@rettangoli/fe 0.0.9 → 0.0.11

package/package.json

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

package/src/cli/build.js

@@ -8,8 +8,9 @@ import {
 import esbuild from "esbuild";
 import { load as loadYaml } from "js-yaml";
 import { parse } from 'jempl';
-import { extractCategoryAndComponent } from '../common.js';
+import { extractCategoryAndComponent } from '../commonBuild.js';
 import { getAllFiles } from '../commonBuild.js';
+import path from "node:path";
 
 function capitalize(word) {
   return word ? word[0].toUpperCase() + word.slice(1) : word;
@@ -18,13 +19,12 @@ 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}`;
+  const dir = path.join(".temp", category);
   if (!existsSync(dir)) {
     mkdirSync(dir, { recursive: true });
   }
   writeFileSync(
-    `${dir}/${component}.view.js`,
+    path.join(dir, `${component}.view.js`),
     `export default ${JSON.stringify(view)};`,
   );
 };
@@ -41,6 +41,7 @@ export const bundleFile = async (options) => {
     loader: {
       ".wasm": "binary",
     },
+    platform: "browser",
   });
 };
 
@@ -83,10 +84,11 @@ const buildRettangoliFrontend = async (options) => {
       categories.push(category);
     }
 
+
     if (["handlers", "store"].includes(fileType)) {
       output += `import * as ${component}${capitalize(
         fileType,
-      )} from '../${filePath}';\n`;
+      )} from '../${filePath.replaceAll(path.sep, "/")}';\n`;
 
       replaceMap[count] = `${component}${capitalize(fileType)}`;
       imports[category][component][fileType] = count;

package/src/cli/examples.js

@@ -4,9 +4,9 @@ import { load as loadYaml, loadAll } from "js-yaml";
 import { render, parse } from "jempl";
 
 import {
-  extractCategoryAndComponent,
   flattenArrays,
 } from "../common.js";
+import { extractCategoryAndComponent } from "../commonBuild.js";
 import { getAllFiles } from "../commonBuild.js";
 import path, { dirname } from "node:path";
 

package/src/cli/watch.js

@@ -5,7 +5,7 @@ import { load as loadYaml } from "js-yaml";
 import { createServer } from 'vite'
 import { writeViewFile } from './build.js';
 import buildRettangoliFrontend from './build.js';
-import { extractCategoryAndComponent } from '../common.js';
+import { extractCategoryAndComponent } from '../commonBuild.js';
 
 // Debounce mechanism to prevent excessive rebuilds
 let rebuildTimeout = null;

package/src/common.js

@@ -165,13 +165,7 @@ export function createHttpClient(config) {
 }
 
 
-export const extractCategoryAndComponent = (filePath) => {
-  const parts = filePath.split("/");
-  const component = parts[parts.length - 1].split(".")[0];
-  const category = parts[parts.length - 3];
-  const fileType = parts[parts.length - 1].split(".")[1];
-  return { category, component, fileType };
-}
+
 
 
 

package/src/commonBuild.js

@@ -2,7 +2,7 @@
 import { readdirSync, statSync } from "node:fs";
 import { join } from "node:path";
 
-
+import { sep } from 'node:path';
 // Function to recursively get all files in a directory
 export function getAllFiles(dirPaths, arrayOfFiles = []) {
   dirPaths.forEach((dirPath) => {
@@ -19,4 +19,12 @@ export function getAllFiles(dirPaths, arrayOfFiles = []) {
   });
 
   return arrayOfFiles;
+}
+
+export const extractCategoryAndComponent = (filePath) => {
+  const parts = filePath.split(sep);
+  const component = parts[parts.length - 1].split(".")[0];
+  const category = parts[parts.length - 3];
+  const fileType = parts[parts.length - 1].split(".")[1];
+  return { category, component, fileType };
 }

package/src/createComponent.js

@@ -365,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,
@@ -377,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

@@ -428,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,
@@ -436,12 +436,12 @@ export const createVirtualDom = ({
                         refIds: element.refIds || {},
                         getRefIds: () => element.refIds || {},
                       };
-                      element.handlers.handleOnUpdate({
+                      element.handlers.handleOnUpdate(deps, {
                         oldProps,
                         newProps,
                         oldAttrs,
                         newAttrs,
-                      }, deps);
+                      });
                     }
                   });
                 }