feat: watchers

src/component.ts

@@ -1,4 +1,4 @@
-import { Directives, State, ASTNode } from './models/structs';
+import { Directives, Watchers, State, ASTNode } from './models/structs';
 
 import { directives } from './core/directive';
 import compile from './core/compile';
@@ -10,11 +10,13 @@ import { setElementCustomProp } from './core/utils/elementCustomProp';
 export class Component {
   public state: State;
   public directives: Directives;
+  public watchers: Watchers;
   public ast?: ASTNode[];
 
   constructor(state: State = {}) {
     this.state = state;
     this.directives = {};
+    this.watchers = {};
   }
 
   public mount(el: HTMLElement | string, proxify: boolean = true): State {
@@ -26,7 +28,9 @@ export class Component {
     this.ast = compile(rootEl as HTMLElement, this.state);
     this.state = { ...this.state, $render };
 
-    this.state = proxify ? reactive(this.state, this.render.bind(this)).proxy : this.state;
+    this.state = proxify
+      ? reactive(this.state, this.render.bind(this), this.watchers).proxy
+      : this.state;
     this.directives = { ...this.directives, ...directives };
 
     this.render();
@@ -36,11 +40,14 @@ export class Component {
     return this.state;
   }
 
-  // Custom directive registration
   public directive(name: string, callback: Function) {
     this.directives[name.toUpperCase()] = callback;
   }
 
+  public watch(name: string, callback: Function) {
+    this.watchers[name] = callback;
+  }
+
   public render(props: string[] = Object.keys(this.state)) {
     render(this.ast!, directives, this.state, props);
   }

src/core/reactive.ts

@@ -16,7 +16,11 @@ export const arrayEquals = (firstArray: unknown[], secondArray: unknown[]) => {
   );
 };
 
-export const reactive = (state: State, callback: Function): RevocableProxy => {
+export const reactive = (
+  state: State,
+  callback: Function,
+  watchers: Record<string, Function> = {}
+): RevocableProxy => {
   const handler = {
     get(target: UnknownKV, key: string): unknown {
       if (typeof target[key] === 'object' && target[key] !== null) {
@@ -47,6 +51,9 @@ export const reactive = (state: State, callback: Function): RevocableProxy => {
 
       target[key] = value;
       callback(props);
+      for (const [prop, watcher] of Object.entries(watchers)) {
+        if (props.includes(prop)) watcher();
+      }
 
       return true;
     },

src/index.ts

@@ -18,23 +18,29 @@ export const init = (
 ): void => {
   const stateDirective = `${DIRECTIVE_PREFIX}state`;
   const initDirective = `${DIRECTIVE_PREFIX}init`;
+  const watchDirective = `${DIRECTIVE_PREFIX}watch`;
 
   const componentElements = element.querySelectorAll(`[${stateDirective}]`);
   // Filter out uninit scopes only
   const uninitializedComponents = [...componentElements].filter(
     (el) => getElementCustomProp(el as HTMLElement, '__l') === undefined
   );
 
-  for (let el of uninitializedComponents) {
+  for (const el of uninitializedComponents) {
     const stateExpression = el.getAttribute(stateDirective);
     const initExpression = el.getAttribute(initDirective);
+    const watchExpression = el.getAttribute(watchDirective);
 
     // Parse state from state expression
     const state = computeExpression(`${stateExpression || '{}'}`, el as HTMLElement, true)({});
+    const watchers = computeExpression(`${watchExpression || '{}'}`, el as HTMLElement, true)({});
     const currentComponent = component(state);
     for (const [directiveName, directiveCallback] of Object.entries(directives)) {
       currentComponent.directive(directiveName, directiveCallback);
     }
+    for (const [property, watcher] of Object.entries(watchers)) {
+      currentComponent.watch(property, watcher as Function);
+    }
     currentComponent.mount(el as HTMLElement);
 
     const init = initExpression

src/models/structs.ts

@@ -1,6 +1,7 @@
 import { UnknownKV } from './generics';
 
 export type Directives = Record<string, Function>;
+export type Watchers = Record<string, Function>;
 export type Components = Record<string, Function>;
 export type State = UnknownKV;