@rettangoli/fe 1.0.2 → 1.0.4

package/README.md

@@ -35,7 +35,6 @@ rtgl fe watch     # Start dev server
 - [Snabbdom](https://github.com/snabbdom/snabbdom) - Virtual DOM
 - [Immer](https://github.com/immerjs/immer) - Immutable state management
 - [Jempl](https://github.com/yuusoft-org/jempl) - Template engine
-- [RxJS](https://github.com/ReactiveX/rxjs) - Reactive programming
 
 **Build & Development:**
 - [Vite](https://vite.dev/) - Dev server and production bundling
@@ -196,7 +195,7 @@ Use this workflow:
 Docker image:
 
 ```bash
-IMAGE="han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27"
+IMAGE="han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10"
 ```
 
 Dashboard suite:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/fe",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",
@@ -18,7 +18,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/yuusoft-org/rettangoli.git"
+    "url": "https://github.com/yuusoft-org/rettangoli",
+    "directory": "packages/rettangoli-fe"
   },
   "license": "MIT",
   "exports": {
@@ -32,9 +33,8 @@
   },
   "dependencies": {
     "immer": "^10.1.1",
-    "jempl": "0.3.2-rc2",
+    "jempl": "1.0.1",
     "js-yaml": "^4.1.0",
-    "rxjs": "^7.8.2",
     "snabbdom": "^3.6.2",
     "vite": "^6.3.5"
   },

package/src/cli/examples.js

@@ -3,9 +3,7 @@ import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { load as loadYaml, loadAll } from "js-yaml";
 import { render, parse } from "jempl";
 
-import {
-  flattenArrays,
-} from "../common.js";
+import { flattenArrays } from "../utils/flattenArrays.js";
 import { extractCategoryAndComponent } from "../commonBuild.js";
 import { getAllFiles } from "../commonBuild.js";
 import path, { dirname } from "node:path";

package/src/common.js

@@ -1,36 +1,3 @@
-import { Subject } from "rxjs";
-
-/**
- * A custom subject that can be used to dispatch actions and subscribe to them
- * You can think of this as a bus for all frontend events and communication
- *
- * Example:
- * const subject = new CustomSubject();
- *
- * const subscription = subject.subscribe(({ action, payload }) => {
- *   // handle action and payload
- * });
- *
- * subject.dispatch("action", { payload: "payload" });
- *
- * subscription.unsubscribe();
- */
-export class CustomSubject {
-  _subject = new Subject();
-  pipe = (...args) => {
-    return this._subject.pipe(...args);
-  };
-  dispatch = (action, payload) => {
-    this._subject.next({
-      action,
-      payload: payload || {},
-    });
-  };
-  dispatchCall = (action, payload) => {
-    return () => this.dispatch(action, payload || {});
-  };
-}
-
 const getQueryParamsObject = () => {
   const queryParams = new URLSearchParams(window.location.search + "");
   const paramsObject = {};
@@ -164,34 +131,4 @@ export function createHttpClient(config) {
   return httpClient;
 }
 
-
-
-
-
-
-// Helper function to flatten arrays while preserving object structure
-export const flattenArrays = (items) => {
-  if (!Array.isArray(items)) {
-    return items;
-  }
-
-  return items.reduce((acc, item) => {
-    if (Array.isArray(item)) {
-      // Recursively flatten nested arrays
-      acc.push(...flattenArrays(item));
-    } else {
-      // If it's an object with nested arrays, process those too
-      if (item && typeof item === "object") {
-        const entries = Object.entries(item);
-        if (entries.length > 0) {
-          const [key, value] = entries[0];
-          if (Array.isArray(value)) {
-            item = { [key]: flattenArrays(value) };
-          }
-        }
-      }
-      acc.push(item);
-    }
-    return acc;
-  }, []);
-};
+export { flattenArrays } from "./utils/flattenArrays.js";

package/src/core/runtime/componentOrchestrator.js

@@ -85,6 +85,13 @@ export const runAttributeChangedComponentLifecycle = ({
     return;
   }
 
+  // Browsers can invoke attributeChangedCallback before connectedCallback.
+  // In that phase the component has no render target and transformed
+  // handlers are not wired yet, so update handlers must not trigger render.
+  if (instance.isConnected === false || !instance.renderTarget) {
+    return;
+  }
+
   if (instance.handlers?.handleOnUpdate) {
     const runtimeDeps = createRuntimeDepsForInstance({ instance });
     const changes = buildOnUpdateChanges({

package/src/parser.js

@@ -1,6 +1,6 @@
 import { parseAndRender as jemplParseAndRender, render as jemplRender } from "jempl";
 
-import { flattenArrays } from './common.js';
+import { flattenArrays } from "./utils/flattenArrays.js";
 import { parseNodeBindings } from './core/view/bindings.js';
 import {
   createRefMatchers,

package/src/utils/flattenArrays.js

@@ -0,0 +1,23 @@
+export const flattenArrays = (items) => {
+  if (!Array.isArray(items)) {
+    return items;
+  }
+
+  return items.reduce((acc, item) => {
+    if (Array.isArray(item)) {
+      acc.push(...flattenArrays(item));
+    } else {
+      if (item && typeof item === "object") {
+        const entries = Object.entries(item);
+        if (entries.length > 0) {
+          const [key, value] = entries[0];
+          if (Array.isArray(value)) {
+            item = { [key]: flattenArrays(value) };
+          }
+        }
+      }
+      acc.push(item);
+    }
+    return acc;
+  }, []);
+};