@rettangoli/fe 0.0.7-rc9 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "0.0.7-rc9",
+  "version": "0.0.9",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",
@@ -29,7 +29,7 @@
   "dependencies": {
     "esbuild": "^0.25.5",
     "immer": "^10.1.1",
-    "jempl": "0.1.1",
+    "jempl": "0.3.2-rc2",
     "js-yaml": "^4.1.0",
     "rxjs": "^7.8.2",
     "snabbdom": "^3.6.2",

package/src/cli/blank/blank.handlers.js

@@ -1,8 +1,8 @@
 
-export const handleOnMount = (deps) => {
+export const handleOnMount = (deps, event) => {
   //
 }
 
-export const handlerSomeEvent = (e, deps) => {
+export const handlerSomeEvent = (deps, event) => {
   //
 }

package/src/cli/blank/blank.store.js

@@ -1,8 +1,8 @@
-export const INITIAL_STATE = Object.freeze({
-  // 
+export const createInitialState = () => ({
+  //
 });
 
-export const toViewData = ({ state, props }) => {
+export const selectViewData = ({ state, props }) => {
   return state;
 }
 

package/src/cli/build.js

@@ -18,7 +18,7 @@ function capitalize(word) {
 // Function to process view files - loads YAML and creates temporary JS file
 export const writeViewFile = (view, category, component) => {
   // const { category, component } = extractCategoryAndComponent(filePath);
-  
+
   const dir = `./.temp/${category}`;
   if (!existsSync(dir)) {
     mkdirSync(dir, { recursive: true });
@@ -30,12 +30,12 @@ export const writeViewFile = (view, category, component) => {
 };
 
 export const bundleFile = async (options) => {
-  const { outfile = "./vt/static/main.js" } = options;
+  const { outfile = "./vt/static/main.js", development = false } = options;
   await esbuild.build({
     entryPoints: ["./.temp/dynamicImport.js"],
     bundle: true,
-    minify: false,
-    sourcemap: true,
+    minify: !development,
+    sourcemap: !!development,
     outfile: outfile,
     format: "esm",
     loader: {
@@ -47,7 +47,7 @@ export const bundleFile = async (options) => {
 const buildRettangoliFrontend = async (options) => {
   console.log("running build with options", options);
 
-  const { dirs = ["./example"], outfile = "./vt/static/main.js", setup = "setup.js" } = options;
+  const { dirs = ["./example"], outfile = "./vt/static/main.js", setup = "setup.js", development = false } = options;
 
   const allFiles = getAllFiles(dirs).filter((filePath) => {
     return (
@@ -93,7 +93,12 @@ const buildRettangoliFrontend = async (options) => {
       count++;
     } else if (["view"].includes(fileType)) {
       const view = loadYaml(readFileSync(filePath, "utf8"));
-      view.template = parse(view.template);
+      try {
+        view.template = parse(view.template);
+      } catch (error) {
+        console.error(`Error parsing template in file: ${filePath}`);
+        throw error;
+      }
       writeViewFile(view, category, component);
       output += `import ${component}${capitalize(
         fileType,
@@ -125,7 +130,7 @@ Object.keys(imports).forEach(category => {
 
   writeFileSync("./.temp/dynamicImport.js", output);
 
-  await bundleFile({ outfile });
+  await bundleFile({ outfile, development });
 
   console.log(`Build complete. Output file: ${outfile}`);
 };

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
@@ -64,13 +78,19 @@ async function startViteServer(options) {
 const startWatching = async (options) => {
   const { dirs = ['src'], port = 3001 } = options;
 
+  // Set development mode for all builds in watch mode
+  const watchOptions = {
+    development: true,
+    ...options
+  };
+
   // Do initial build with all directories
   console.log('Starting initial build...');
-  await buildRettangoliFrontend(options);
+  await buildRettangoliFrontend(watchOptions);
   console.log('Initial build complete');
 
   dirs.forEach(dir => {
-    setupWatcher(dir, options);
+    setupWatcher(dir, watchOptions);
   });
 
   startViteServer({ port, outfile: options.outfile });

package/src/createComponent.js

@@ -1,5 +1,6 @@
 import { produce } from "immer";
 import { parseView } from "./parser.js";
+import { parseAndRender } from "jempl";
 
 /**
  * covert this format of json into raw css strings
@@ -261,8 +262,10 @@ class BaseComponent extends HTMLElement {
   }
 
   get viewData() {
-    // TODO decide whether to pass globalStore state
-    const data = this.store.toViewData();
+    let data = {};
+    if (this.store.selectViewData) {
+      data = this.store.selectViewData();
+    }
     return data;
   }
 
@@ -295,7 +298,6 @@ class BaseComponent extends HTMLElement {
     this.renderTarget = document.createElement("div");
     this.renderTarget.style.cssText = "display: contents;";
     this.shadow.appendChild(this.renderTarget);
-    this.transformedHandlers = {};
     if (!this.renderTarget.parentNode) {
       this.appendChild(this.renderTarget);
     }
@@ -307,10 +309,25 @@ class BaseComponent extends HTMLElement {
       dispatchEvent: this.dispatchEvent.bind(this),
     };
 
+    this.transformedHandlers = {
+      handleCallStoreAction: (payload) => {
+        const { render, store } = deps;
+        const { _event, _action } = payload;
+        const context = parseAndRender(payload, {
+          event: _event
+        })
+        console.log('context', context)
+        if (!store[_action]) {
+          throw new Error(`store action store.${store._action} is not defined`)
+        }
+        store[_action](context);
+        render();
+      }
+    };
     // TODO don't include onmount, subscriptions, etc in transformedHandlers
     Object.keys(this.handlers || {}).forEach((key) => {
-      this.transformedHandlers[key] = (payload) => {
-        const result = this.handlers[key](payload, deps);
+      this.transformedHandlers[key] = (event, payload) => {
+        const result = this.handlers[key](deps, event, payload);
         return result;
       };
     });
@@ -348,7 +365,10 @@ class BaseComponent extends HTMLElement {
     if (oldValue !== newValue && this.render) {
       // Call handleOnUpdate if it exists
       if (this.handlers?.handleOnUpdate) {
-        const changes = { [name]: { oldValue, newValue } };
+        const changes = {
+          oldAttrs: { [name]: oldValue },
+          newAttrs: { [name]: newValue }
+        };
         const deps = {
           ...this.deps,
           refIds: this.refIds,
@@ -421,17 +441,19 @@ class BaseComponent extends HTMLElement {
 /**
  * Binds store functions with actual framework data flow
  * Makes state changes immutable with immer
- * Passes props to selectors and toViewData
+ * Passes props to selectors
  * @param {*} store
  * @param {*} props
  * @returns
  */
 const bindStore = (store, props, attrs) => {
-  const { INITIAL_STATE, toViewData, ...selectorsAndActions } = store;
+  const { createInitialState, ...selectorsAndActions } = store;
   const selectors = {};
   const actions = {};
-  let currentState = structuredClone(INITIAL_STATE);
-
+  let currentState = {};
+  if (createInitialState) {
+    currentState = createInitialState();
+  }
   Object.entries(selectorsAndActions).forEach(([key, fn]) => {
     if (key.startsWith("select")) {
       selectors[key] = (...args) => {
@@ -448,7 +470,6 @@ const bindStore = (store, props, attrs) => {
   });
 
   return {
-    toViewData: () => toViewData({ state: currentState, props, attrs }),
     getState: () => currentState,
     ...actions,
     ...selectors,

package/src/parser.js

@@ -164,7 +164,7 @@ export const createVirtualDom = ({
           const attrRegex = /(\S+?)=(?:\"([^\"]*)\"|\'([^\']*)\'|([^\s]+))/g;
           let match;
           const processedAttrs = new Set();
-          
+
           while ((match = attrRegex.exec(attrsString)) !== null) {
             processedAttrs.add(match[1]);
             if (match[1].startsWith(".")) {
@@ -175,7 +175,7 @@ export const createVirtualDom = ({
               // Handle conditional boolean attributes
               const attrName = match[1].substring(1);
               const attrValue = match[2] || match[3] || match[4];
-              
+
               // Convert string values to boolean
               let evalValue;
               if (attrValue === "true") {
@@ -186,7 +186,7 @@ export const createVirtualDom = ({
                 // Try to get from viewData if it's not a literal boolean
                 evalValue = lodashGet(viewData, attrValue);
               }
-              
+
               // Only add attribute if value is truthy
               if (evalValue) {
                 attrs[attrName] = "";
@@ -195,7 +195,7 @@ export const createVirtualDom = ({
               attrs[match[1]] = match[2] || match[3] || match[4];
             }
           }
-          
+
           // Then, handle boolean attributes without values
           // Remove all processed attribute-value pairs from the string first
           let remainingAttrsString = attrsString;
@@ -209,7 +209,7 @@ export const createVirtualDom = ({
           processedMatches.forEach(match => {
             remainingAttrsString = remainingAttrsString.replace(match, ' ');
           });
-          
+
           const booleanAttrRegex = /\b(\S+?)(?=\s|$)/g;
           let boolMatch;
           while ((boolMatch = booleanAttrRegex.exec(remainingAttrsString)) !== null) {
@@ -327,9 +327,27 @@ export const createVirtualDom = ({
               const eventListeners = refs[bestMatchRefKey].eventListeners;
               Object.entries(eventListeners).forEach(
                 ([eventType, eventConfig]) => {
+                  if (eventConfig.handler && eventConfig.action) {
+                    throw new Error('Each listener can have hanlder or action but not both')
+                  }
+
+                  if (eventConfig.action) {
+                    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);
+                      handlers[eventConfig.handler]({
+                        ...eventConfig.payload,
+                        _event: event,
+                      });
                     };
                   } else if (eventConfig.handler) {
                     // Keep this warning for missing handlers