WatchManager

ภาพรวม

WatchManager คือระบบ watch state changes ใน Now.js Framework ใช้สำหรับ track property changes และ execute callbacks

ใช้เมื่อ:

• ต้องการ watch state changes
• ต้องการ react to property changes
• ต้องการ deep object watching
• ต้องการ debounced watchers

ทำไมต้องใช้:

• ✅ Deep และ shallow watching
• ✅ Debounce support
• ✅ Immediate execution option
• ✅ Dot notation paths
• ✅ Array watching
• ✅ Automatic cleanup

การใช้งานพื้นฐาน

Setup Watchers

const instance = {
  id: 'my-component',
  state: {
    count: 0,
    user: { name: 'John' },
    items: []
  }
};

WatchManager.setupWatchers(instance, instance.state, {
  // Simple watcher
  count(newVal, oldVal) {
    console.log(`Count changed: ${oldVal} → ${newVal}`);
  },

  // Deep watcher for objects
  user: {
    handler(newVal, oldVal) {
      console.log('User changed:', newVal);
    },
    deep: true
  },

  // Nested path
  'user.name'(newVal) {
    console.log('Name changed to:', newVal);
  }
});

Trigger Watchers

// After state change
instance.state.count++;
WatchManager.triggerWatchers(instance);

Watcher Options

WatchManager.setupWatchers(instance, state, {
  propertyName: {
    // Handler function
    handler(newVal, oldVal) {
      console.log('Changed:', newVal);
    },

    // Execute immediately
    immediate: false,

    // Deep watch (for objects/arrays)
    deep: false,

    // Debounce (ms)
    debounce: 0
  }
});

API อ้างอิง

WatchManager.setupWatchers(instance, state, watchers)

ตั้งค่า watchers

WatchManager.setupWatchers(component, component.state, {
  items: {
    handler(newItems) {
      this.render();  // 'this' = instance
    },
    deep: true
  }
});

WatchManager.triggerWatchers(instance)

ตรวจสอบและ trigger watchers

// Call after state mutations
instance.state.count++;
WatchManager.triggerWatchers(instance);

WatchManager.cleanupWatchers(instance)

ล้าง watchers ทั้งหมด

// On component destroy
WatchManager.cleanupWatchers(instance);

WatchManager.getDeepValue(path, obj)

รับค่าจาก dot notation path

Returns: Any value

const name = WatchManager.getDeepValue('user.profile.name', state);

Watcher Patterns

Simple Property

{
  count(newVal, oldVal) {
    console.log('Count:', newVal);
  }
}

Deep Object

{
  user: {
    handler(newUser) {
      console.log('User changed:', newUser);
    },
    deep: true  // Watch nested changes
  }
}

Nested Path

{
  'settings.theme'(newTheme) {
    document.body.className = newTheme;
  }
}

Array Index

{
  'items[0]'(firstItem) {
    console.log('First item:', firstItem);
  }
}

Debounced

{
  searchQuery: {
    handler(query) {
      this.search(query);
    },
    debounce: 300  // Wait 300ms
  }
}

Immediate

{
  locale: {
    handler(locale) {
      this.loadTranslations(locale);
    },
    immediate: true  // Run on setup
  }
}

ตัวอย่างการใช้งานจริง

Form Validation

WatchManager.setupWatchers(form, form.state, {
  'data.email'(email) {
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    this.setFieldError('email', isValid ? null : 'Invalid email');
  },

  'data.password'(password) {
    const strength = calculateStrength(password);
    this.updatePasswordMeter(strength);
  }
});

Auto-Save

WatchManager.setupWatchers(editor, editor.state, {
  content: {
    handler(content) {
      this.saveToServer(content);
    },
    debounce: 1000,  // Save after 1s of no changes
    deep: true
  }
});

Computed Properties

WatchManager.setupWatchers(cart, cart.state, {
  items: {
    handler(items) {
      // Update computed total
      this.state.total = items.reduce((sum, item) => {
        return sum + (item.price * item.quantity);
      }, 0);
    },
    deep: true,
    immediate: true
  }
});

ข้อควรระวัง

⚠️ 1. ต้อง Trigger หลัง Mutation

// ❌ Watcher ไม่ทำงาน
state.count++;

// ✅ Trigger หลัง mutation
state.count++;
WatchManager.triggerWatchers(instance);

⚠️ 2. Deep Watch สำหรับ Objects

// ❌ Nested change ไม่ถูก detect
{
  user(newUser) { ... }
}

// ✅ ใช้ deep: true
{
  user: {
    handler(newUser) { ... },
    deep: true
  }
}

⚠️ 3. Cleanup เมื่อ Destroy

// ไม่ cleanup = memory leak
function destroyComponent() {
  WatchManager.cleanupWatchers(instance);
}

เอกสารที่เกี่ยวข้อง

• ReactiveManager - Reactive state
• StateManager - State management