@rettangoli/fe 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",

package/src/cli/watch.js

@@ -7,6 +7,10 @@ import { writeViewFile } from './build.js';
 import buildRettangoliFrontend from './build.js';
 import { extractCategoryAndComponent } from '../common.js';
 
+// Debounce mechanism to prevent excessive rebuilds
+let rebuildTimeout = null;
+const DEBOUNCE_DELAY = 200; // 200ms delay
+
 
 const setupWatcher = (directory, options) => {
   watch(
@@ -21,7 +25,17 @@ const setupWatcher = (directory, options) => {
             const { category, component } = extractCategoryAndComponent(filename);
             await writeViewFile(view, category, component);
           }
-          await buildRettangoliFrontend(options);
+
+          // Debounce the rebuild
+          if (rebuildTimeout) {
+            clearTimeout(rebuildTimeout);
+          }
+
+          rebuildTimeout = setTimeout(async () => {
+            console.log('Triggering rebuild...');
+            await buildRettangoliFrontend(options);
+          }, DEBOUNCE_DELAY);
+
         } catch (error) {
           console.error(`Error processing ${filename}:`, error);
           // Keep the watcher running

package/src/createComponent.js

@@ -309,17 +309,18 @@ class BaseComponent extends HTMLElement {
       dispatchEvent: this.dispatchEvent.bind(this),
     };
 
-
     this.transformedHandlers = {
-      handleCallStoreAction: (event, payload) => {
+      handleCallStoreAction: (payload) => {
         const { render, store } = deps;
+        const { _event, _action } = payload;
         const context = parseAndRender(payload, {
-          event: {
-            target: event.target,
-            detail: event.detail
-          }
+          event: _event
         })
-        store[payload.action](context);
+        console.log('context', context)
+        if (!store[_action]) {
+          throw new Error(`store action store.${store._action} is not defined`)
+        }
+        store[_action](context);
         render();
       }
     };
@@ -364,10 +365,6 @@ class BaseComponent extends HTMLElement {
     if (oldValue !== newValue && this.render) {
       // Call handleOnUpdate if it exists
       if (this.handlers?.handleOnUpdate) {
-        const changes = {
-          oldAttrs: { [name]: oldValue },
-          newAttrs: { [name]: newValue }
-        };
         const deps = {
           ...this.deps,
           refIds: this.refIds,
@@ -376,7 +373,13 @@ class BaseComponent extends HTMLElement {
           store: this.store,
           render: this.render.bind(this),
         };
-        this.handlers.handleOnUpdate(changes, deps);
+        const changes = {
+          oldAttrs: { [name]: oldValue },
+          newAttrs: { [name]: newValue },
+          oldProps: deps.props,
+          newProps: deps.props,
+        };
+        this.handlers.handleOnUpdate(deps, changes);
       } else {
         requestAnimationFrame(() => {
           this.render();

package/src/parser.js

@@ -332,13 +332,22 @@ export const createVirtualDom = ({
                   }
 
                   if (eventConfig.action) {
-                    handlers.handleCallStoreAction(event, eventConfig.payload)
+                    eventHandlers[eventType] = (event) => {
+                      handlers.handleCallStoreAction({
+                        ...eventConfig.payload,
+                        _event: event,
+                        _action: eventConfig.action,
+                      })
+                    }
                     return;
                   }
 
                   if (eventConfig.handler && handlers[eventConfig.handler]) {
                     eventHandlers[eventType] = (event) => {
-                      handlers[eventConfig.handler](event, eventConfig.payload);
+                      handlers[eventConfig.handler]({
+                        ...eventConfig.payload,
+                        _event: event,
+                      });
                     };
                   } else if (eventConfig.handler) {
                     // Keep this warning for missing handlers
@@ -419,7 +428,7 @@ export const createVirtualDom = ({
                     // Call the specific component's handleOnUpdate instead of the parent's onUpdate
                     if (element.handlers && element.handlers.handleOnUpdate) {
                       const deps = {
-                        ...(element.deps || {}),
+                        ...(element.deps),
                         store: element.store,
                         render: element.render.bind(element),
                         handlers: element.handlers,
@@ -427,12 +436,12 @@ export const createVirtualDom = ({
                         refIds: element.refIds || {},
                         getRefIds: () => element.refIds || {},
                       };
-                      element.handlers.handleOnUpdate({
+                      element.handlers.handleOnUpdate(deps, {
                         oldProps,
                         newProps,
                         oldAttrs,
                         newAttrs,
-                      }, deps);
+                      });
                     }
                   });
                 }