@rettangoli/fe 0.0.6 → 0.0.7-rc10

package/README.md

@@ -1,324 +1,120 @@
-
 # Rettangoli Frontend
 
-## Development
+A modern frontend framework that uses YAML for view definitions, web components for composition, and Immer for state management. Build reactive applications with minimal complexity using just 3 types of files.
 
-Bundle the code under `example` folder using `@rettangoli/fe`
+## Features
 
-```bash
-bun run ../rettangoli-cli/cli.js fe build
-```
+- **🗂️ Three-File Architecture** - `.view.yaml`, `.store.js`, `.handlers.js` files scale from single page to complex applications
+- **📝 YAML Views** - Declarative UI definitions that compile to virtual DOM
+- **🧩 Web Components** - Standards-based component architecture
+- **🔄 Reactive State** - Immer-powered immutable state management
+- **⚡ Fast Development** - Hot reload with Vite integration
+- **🎯 Template System** - Jempl templating for dynamic content
+- **🧪 Testing Ready** - Pure functions and dependency injection for easy testing
 
-Visit the example project that shows the components in action
+## Quick Start
 
 ```bash
-bunx serve ./viz/static
+rtgl fe build     # Build components
+rtgl fe watch     # Start dev server
 ```
 
-Instead of running `fe build` each time, we can also watch for file changes and bundle the code automatically.
-
-```bash
-bun run ../rettangoli-cli/cli.js fe watch
-```
-
-
-Note: rettangoli-vt is not setup for this project yet. We just use static files under `viz/static` folder.
-
-
-## Introduction
+## Documentation
 
-A frontend framework with just 3 type of files to scale from a single page to a full fledged complex application.
+- **[Developer Quickstart](./docs/overview.md)** - Complete introduction and examples
+- **[View System](./docs/view.md)** - Complete YAML syntax
+- **[Store Management](./docs/store.md)** - State patterns
+- **[Event Handlers](./docs/handlers.md)** - Event handling
 
-Implemented using:
+## Architecture
 
-Browser native:
-* web components for components
+### Technology Stack
 
-Runtime:
-* [snabbdom](https://github.com/snabbdom/snabbdom) for virtual dom
-* [immer](https://github.com/immerjs/immer) for data immutability for state management
-* [json-e](https://github.com/json-e/json-e) for templating using json
-* [rxjs](https://github.com/ReactiveX/rxjs) for reactive programming
+**Runtime:**
+- [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:
-* [esbuild](https://esbuild.github.io/) for bundling
-* [vite](https://vite.dev/) for development
+**Build & Development:**
+- [ESBuild](https://esbuild.github.io/) - Fast bundling
+- [Vite](https://vite.dev/) - Development server with hot reload
 
-## View Layer
+**Browser Native:**
+- Web Components - Component encapsulation
 
-The view layer is unique in that it uses yaml.
-
-* The yaml will be converted into json at build time. The json will then be consumed by snabbdom to be transformed into html through a virtual dom.
-
-### Yaml to write html
-
-Standard html can be totally written in yaml. 
-
-All child element are arrays. Except for things like actual content of text
-
-Use `#` and `.` selectors to represent `id` and `class`.
-
-`div#myid.class1.class2 custorm-attribute=abcd`
-
-will become
-
-`<div id="myid" class="class1 class2" custom-attribute="abcd"></div>`
-
-
-### Templating using json-e
+## Development
 
-`json-e` templating language allows us to write conditions and loops in our yaml. For example:
+### Prerequisites
 
+- Node.js 18+ or Bun
+- A `rettangoli.config.yaml` file in your project root
 
-Loop
+### Setup
 
-```yaml
-template:
-  - rtgl-view w=f g=m:
-    - $map: { $eval: projects }
-      each(v,k):
-        - rtgl-view#project-${v.id} h=64 w=f bw=xs p=m cur=p:
-          - rtgl-text s=lg: "${v.name}"
-          - rtgl-text s=sm: "${v.description}"
+1. **Install dependencies**:
+```bash
+bun install
 ```
 
-Conditional. We usually use `$switch` more as it tends to be more flexible than `$if`.
-
-```yaml
-template:
-  - rtgl-view d=h w=f h=f:
-    - $switch:
-        'showSidebar':
-          - sidebar-component: []
-    - rtgl-view w=f h=f:
-      - $switch:
-          'currentRoute== "/projects"':
-            - projects-component: []
-          'currentRoute== "/profile"':
+2. **Create project structure**:
+```bash
+# Scaffold a new component
+node ../rettangoli-cli/cli.js fe scaffold --category components --name MyButton
 ```
 
-`json-e` has many more features but we want to keep it simple and in most cases loops and conditionals are enough.
-
-The actual data used in the template is passed in as `viewData` from the state store which we will cover later.
-
-### Define a elementName
+3. **Start development**:
+```bash
+# Build once
+node ../rettangoli-cli/cli.js fe build
 
-```yaml
-elementName: custom-projects
+# Watch for changes (recommended)
+node ../rettangoli-cli/cli.js fe watch
 ```
 
-This will be the web component name that will be used for the component.
-
-The component can later be used as `<custom-projects></custom-projects>`.
-
-### Styles
+### Project Structure
 
-Styles can also be completely written in yaml.
-
-```yaml
-styles:
-  '#title':
-    font-size: 24px
-  '@media (min-width: 768px)':
-    '#title':
-      font-size: 32px
 ```
-
-TODO better support nesting and issue with some global selectors.
-
-### Event listeners
-
-```yaml
-refs:
-  createButton:
-    eventListeners:
-      click:
-        handler: handleCreateButtonClick
-  project-*:
-    eventListeners:
-      click:
-        handler: handleProjectsClick
-
-template:
-  - rtgl-button#createButton: Create Project
-  - rtgl-view w=f g=m:
-    - $map: { $eval: projects }
-      each(v,k):
-        - rtgl-view#project-${v.id} h=64 w=f bw=xs p=m cur=p:
-          - rtgl-text s=lg: "${v.name}"
-          - rtgl-text s=sm: "${v.description}"
+src/
+├── cli/
+│   ├── build.js       # Build component bundles
+│   ├── watch.js       # Development server with hot reload
+│   ├── scaffold.js    # Component scaffolding
+│   ├── examples.js    # Generate examples for testing
+│   └── blank/         # Component templates
+├── createComponent.js # Component factory
+├── createWebPatch.js  # Virtual DOM patching
+├── parser.js          # YAML to JSON converter
+├── common.js          # Shared utilities
+└── index.js           # Main exports
 ```
 
-The above example, will attach event listenrs to `#createButton` and all `#project-*` (wild card support) elements. And bind them to the handlers `handleCreateButtonClick` and `handleProjectsClick`.
-
-### Defining data schema
-
-Component have a few types of data that can be defined using a JSON schema:
-
-* `viewDataSchema` - The data that will used for the template.
-* `propsSchema` - The data that will be passed to the component via javascript, those can be objects.
-* `attrsSchema` - The data that will be passed to the component via html attributes, this is raw strings.
+## Configuration
 
+Create a `rettangoli.config.yaml` file in your project root:
 
 ```yaml
-viewDataSchema:
-  type: object
-  properties:
-    title:
-      type: string
-      default: Projects
-    createButtonText:
-      type: string
-      default: Create Project
-    projects:
-      type: array
-      items:
-        type: object
-        properties:
-          id:
-            type: string
-          name:
-            type: string
-            default: Project 1
-          description:
-            type: string
-            default: Project 1 description
-propsSchema:
-  type: object
-  properties: {}
+fe:
+  dirs:
+    - "./src/components"
+    - "./src/pages"
+  setup: "setup.js"
+  outfile: "./dist/bundle.js"
+  examples:
+    outputDir: "./vt/specs/examples"
 ```
 
-
-## State Store
-
-* Define `initial state`
-* `toViewData` will take current `state`, `props` and `attrs` and return the `viewData` to be used by the view template
-* Any exported function that starts with `select`  will beceme selectors and are used by handlers to access state data
-* `actions` are all other exported functions that are used to mutate the state.
-
-```js
-export const INITIAL_STATE = Object.freeze({
-  title: "Projects",
-  createButtonText: "Create Project",
-  projects: [
-    {
-      id: "1",
-      name: "Project 1",
-      description: "Project 1 description",
-    },
-    {
-      id: '2',
-      name: 'Project 2',
-      description: 'Project 2 description'
-    }
-  ],
-});
-
-export const toViewData = ({ state, props }, payload) => {
-  return state;
-}
-
-export const selectProjects = (state, props, payload) => {
-  return state.projects;
-}
-
-export const setProjects = (state, payload) => {
-
-}
-```
-
-Note that this is just a dump store, it is not reactive. Components will need to call `deps.render()` from handlers to re-render the component.
-
-## Handlers
-
-`handleOnMount` is a special handler that is called when the component is mounted. It returns a promise that resolves when the component is mounted.
-
-All other exported functions will automatically become handlers and can be used in the view layers's `eventListeners`
-
-A special object called `deps` is injected into all handlers. It has the following properties:
-
-* `deps.render()` will re-render the component. We call this function each time we have chaged state and want to re-render the component.
-* `deps.store` is the store instance. Use selectors to select state and actions to mutate state.
-* `deps.transformedHandlers` can be used to call other handlers.
-* `deps.attrs` is the html attributes that are passed to the component.
-* `deps.props` is the javascript properties that are passed to the component.
-
-
-```js
-export const handleOnMount = (deps) => {
-  () => {
-    // unsubscribe
-  }
-}
-
-export const handleCreateButtonClick = async (e, deps) => {
-  const { store, deps, render } = deps;
-  const formIsVisible = store.selectFormIsVisible();
-
-  if (!formIsVisible) {
-    store.setFormIsVisible(true);
-  }
-  deps.render();
-}
-
-export const handleProjectsClick = (e, deps) => {
-  const id = e.target.id
-  console.log('handleProjectsClick', id);
-}
-```
-
-
-
-* `deps.dispatchEvent` can be used to dispatch custom dom events.
-
-```js
-export const handleProjectsClick = (e, deps) => {
-  deps.dispatchEvent(new CustomEvent('project-clicked', {
-    projectId: '1',
-  }));
-}
-```
-
-
-### Adding additional dependencies
-
-This is a simple yet powerful way to do dependency injection. Those are all global singleton dependencies. Technically anything can be injected and be made accessible to all components.
-
-```js
-const componentDependencies = {
-}
-
-const pageDependencies = {
-}
-
-export const deps = {
-  components: componentDependencies,
-  pages: pageDependencies,
-}
-```
-
-
 ## Testing
 
-This framework is written with testability in mind.
-
-
-## View
-
-Visual testing `rettangoli-vt`
+### View Components
 
+Use visual testing with `rtgl vt`:
 
-## State Store
-
-Those are all pure functions and it is straighforward to test them. Actions can be turned into pure functions using immer produce.
-
-Example
-
-```yaml
-...
+```bash
+rtgl vt generate
+rtgl vt report
 ```
 
-## Handlers
+## Examples
 
-Test them as normal functions.
-They are not always pure per se due to calling of dependencies. 
+For a complete working example, see the todos app in `examples/example1/`.

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@rettangoli/fe",
-  "version": "0.0.6",
+  "version": "0.0.7-rc10",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",
-  "keywords": ["frontend", "reactive", "components", "web", "framework"],
+  "keywords": [
+    "frontend",
+    "reactive",
+    "components",
+    "web",
+    "framework"
+  ],
   "files": [
     "src",
     "README.md",
@@ -23,7 +29,7 @@
   "dependencies": {
     "esbuild": "^0.25.5",
     "immer": "^10.1.1",
-    "jempl": "^0.0.6",
+    "jempl": "0.1.2-rc2",
     "js-yaml": "^4.1.0",
     "rxjs": "^7.8.2",
     "snabbdom": "^3.6.2",

package/src/cli/examples.js

@@ -133,7 +133,7 @@ const examples = (options = {}) => {
       for (const [index, example] of examples.entries()) {
         const { name, viewData } = example;
         const ast = parse(template);
-        const renderedView = flattenArrays(render({ ast, data: viewData }));
+        const renderedView = flattenArrays(render(ast, viewData, {}));
         const html = yamlToHtml(renderedView);
         output.push({
           category,

package/src/cli/watch.js

@@ -8,7 +8,7 @@ import buildRettangoliFrontend from './build.js';
 import { extractCategoryAndComponent } from '../common.js';
 
 
-const setupWatcher = (directory) => {
+const setupWatcher = (directory, options) => {
   watch(
     directory,
     { recursive: true },
@@ -21,7 +21,7 @@ const setupWatcher = (directory) => {
             const { category, component } = extractCategoryAndComponent(filename);
             await writeViewFile(view, category, component);
           }
-          await buildRettangoliFrontend({ dirs: [directory] });
+          await buildRettangoliFrontend(options);
         } catch (error) {
           console.error(`Error processing ${filename}:`, error);
           // Keep the watcher running
@@ -32,7 +32,13 @@ const setupWatcher = (directory) => {
 };
 
 async function startViteServer(options) {
-  const { port = 3001, root = './viz/static' } = options;
+  const { port = 3001, outfile = "./vt/static/main.js" } = options;
+
+  // Extract the directory from outfile path
+  const outDir = path.dirname(outfile);
+  // Go up one level from the JS file directory to serve the site root
+  const root = path.dirname(outDir);
+  console.log('watch root dir:', root)
   try {
     const server = await createServer({
       // any valid user config options, plus `mode` and `configFile`
@@ -40,6 +46,8 @@ async function startViteServer(options) {
       root,
       server: {
         port,
+        host: '0.0.0.0',
+        allowedHosts: true
       },
     });
     await server.listen();
@@ -53,14 +61,19 @@ async function startViteServer(options) {
 }
 
 
-const startWatching = (options) => {
+const startWatching = async (options) => {
   const { dirs = ['src'], port = 3001 } = options;
 
+  // Do initial build with all directories
+  console.log('Starting initial build...');
+  await buildRettangoliFrontend(options);
+  console.log('Initial build complete');
+
   dirs.forEach(dir => {
-    setupWatcher(dir);
+    setupWatcher(dir, options);
   });
 
-  startViteServer({ port });
+  startViteServer({ port, outfile: options.outfile });
 }
 
 export default startWatching;

package/src/common.js

@@ -8,7 +8,7 @@ import { Subject } from "rxjs";
  * const subject = new CustomSubject();
  *
  * const subscription = subject.subscribe(({ action, payload }) => {
- *   console.log(action, payload);
+ *   // handle action and payload
  * });
  *
  * subject.dispatch("action", { payload: "payload" });

package/src/createComponent.js

@@ -4,7 +4,7 @@ import { parseView } from "./parser.js";
 /**
  * covert this format of json into raw css strings
  * notice if propoperty starts with \@, it will need to nest it
- * 
+ *
     ':host':
       display: contents
     'button':
@@ -26,8 +26,8 @@ import { parseView } from "./parser.js";
     '@media (min-width: 768px)':
       'button':
         height: 40px
- * @param {*} styleObject 
- * @returns 
+ * @param {*} styleObject
+ * @returns
  */
 const yamlToCss = (elementName, styleObject) => {
   if (!styleObject || typeof styleObject !== "object") {
@@ -104,7 +104,9 @@ function createAttrsProxy(source) {
     {
       get(_, prop) {
         if (typeof prop === "string") {
-          return source.getAttribute(prop);
+          const value = source.getAttribute(prop);
+          // Return true for boolean attributes (empty string values)
+          return value === "" ? true : value;
         }
         return undefined;
       },
@@ -313,15 +315,24 @@ class BaseComponent extends HTMLElement {
       };
     });
 
-    if (this.handlers?.subscriptions) {
-      this.unsubscribeAll = subscribeAll(this.handlers.subscriptions(deps));
-    }
+    if (this.handlers?.handleBeforeMount) {
+      this._unmountCallback = this.handlers?.handleBeforeMount(deps);
 
-    if (this.handlers?.handleOnMount) {
-      this._unmountCallback = this.handlers?.handleOnMount(deps);
+      // Validate that handleBeforeMount doesn't return a Promise
+      if (this._unmountCallback && typeof this._unmountCallback.then === 'function') {
+        throw new Error('handleBeforeMount must be synchronous and cannot return a Promise.');
+      }
     }
 
     this.render();
+
+    if (this.handlers?.handleAfterMount) {
+      this.handlers?.handleAfterMount(deps);
+    }
+
+    if (this.handlers?.subscriptions) {
+      this.unsubscribeAll = subscribeAll(this.handlers.subscriptions(deps));
+    }
   }
 
   disconnectedCallback() {
@@ -335,9 +346,23 @@ class BaseComponent extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue && this.render) {
-      requestAnimationFrame(() => {
-        this.render();
-      });
+      // Call handleOnUpdate if it exists
+      if (this.handlers?.handleOnUpdate) {
+        const changes = { [name]: { oldValue, newValue } };
+        const deps = {
+          ...this.deps,
+          refIds: this.refIds,
+          getRefIds: () => this.refIds,
+          dispatchEvent: this.dispatchEvent.bind(this),
+          store: this.store,
+          render: this.render.bind(this),
+        };
+        this.handlers.handleOnUpdate(changes, deps);
+      } else {
+        requestAnimationFrame(() => {
+          this.render();
+        });
+      }
     }
   }
 
@@ -353,7 +378,15 @@ class BaseComponent extends HTMLElement {
     }
 
     try {
-      // const parseStart = performance.now();
+      const deps = {
+        ...this.deps,
+        refIds: this.refIds,
+        getRefIds: () => this.refIds,
+        dispatchEvent: this.dispatchEvent.bind(this),
+        store: this.store,
+        render: this.render.bind(this),
+      };
+
       const vDom = parseView({
         h: this.h,
         template: this.template,
@@ -361,9 +394,6 @@ class BaseComponent extends HTMLElement {
         refs: this.refs,
         handlers: this.transformedHandlers,
       });
-
-      // const parseTime = performance.now() - parseStart;
-      // console.log(`parseView took ${parseTime.toFixed(2)}ms`);
       // parse through vDom and recursively find all elements with id
       const ids = {};
       const findIds = (vDom) => {
@@ -377,15 +407,11 @@ class BaseComponent extends HTMLElement {
       findIds(vDom);
       this.refIds = ids;
 
-      // const patchStart = performance.now();
       if (!this._oldVNode) {
         this._oldVNode = this.patch(this.renderTarget, vDom);
       } else {
         this._oldVNode = this.patch(this._oldVNode, vDom);
       }
-
-      // const patchTime = performance.now() - patchStart;
-      // console.log(`patch took ${patchTime.toFixed(2)}ms`);
     } catch (error) {
       console.error("Error during patching:", error);
     }
@@ -430,7 +456,7 @@ const bindStore = (store, props, attrs) => {
 };
 
 const createComponent = ({ handlers, view, store, patch, h }, deps) => {
-  const { elementName, propsSchema, template, refs, styles } = view;
+  const { elementName, propsSchema, attrsSchema, template, refs, styles } = view;
 
   if (!patch) {
     throw new Error("Patch is not defined");
@@ -447,7 +473,9 @@ const createComponent = ({ handlers, view, store, patch, h }, deps) => {
   class MyComponent extends BaseComponent {
 
     static get observedAttributes() {
-      return ["key"];
+      const baseAttrs = ["key"];
+      const attrKeys = attrsSchema?.properties ? Object.keys(attrsSchema.properties) : [];
+      return [...baseAttrs, ...attrKeys];
     }
 
     constructor() {

package/src/parser.js

@@ -4,16 +4,16 @@ import { flattenArrays } from './common.js';
 
 const lodashGet = (obj, path) => {
   if (!path) return obj;
-  
+
   // Parse path to handle both dot notation and bracket notation
   const parts = [];
   let current = '';
   let inBrackets = false;
   let quoteChar = null;
-  
+
   for (let i = 0; i < path.length; i++) {
     const char = path[i];
-    
+
     if (!inBrackets && char === '.') {
       if (current) {
         parts.push(current);
@@ -28,14 +28,14 @@ const lodashGet = (obj, path) => {
     } else if (inBrackets && char === ']') {
       if (current) {
         // Remove quotes if present and add the key
-        if ((current.startsWith('"') && current.endsWith('"')) || 
-            (current.startsWith("'") && current.endsWith("'"))) {
+        if ((current.startsWith('"') && current.endsWith('"')) ||
+          (current.startsWith("'") && current.endsWith("'"))) {
           parts.push(current.slice(1, -1));
-                 } else {
-           // Numeric index or unquoted string
-           const numValue = Number(current);
-           parts.push(isNaN(numValue) ? current : numValue);
-         }
+        } else {
+          // Numeric index or unquoted string
+          const numValue = Number(current);
+          parts.push(isNaN(numValue) ? current : numValue);
+        }
         current = '';
       }
       inBrackets = false;
@@ -51,24 +51,17 @@ const lodashGet = (obj, path) => {
       current += char;
     }
   }
-  
+
   if (current) {
     parts.push(current);
   }
-  
+
   return parts.reduce((acc, part) => acc && acc[part], obj);
 };
 
 export const parseView = ({ h, template, viewData, refs, handlers }) => {
-  // const startTime = performance.now();
-  const result = jemplRender({
-    ast: template,
-    data: viewData,
-  });
-  // const endTime = performance.now();
-  // const executionTime = endTime - startTime;
-  // console.log(`jemplRender execution time: ${executionTime.toFixed(2)}ms`);
-  
+  const result = jemplRender(template, viewData, {});
+
   // Flatten the array carefully to maintain structure
   const flattenedResult = flattenArrays(result);
 
@@ -98,7 +91,7 @@ export const createVirtualDom = ({
   items,
   refs = {},
   handlers = {},
-  viewData = {},
+  viewData = {}
 }) => {
   if (!Array.isArray(items)) {
     console.error("Input to createVirtualDom must be an array.");
@@ -120,7 +113,7 @@ export const createVirtualDom = ({
 
         const entries = Object.entries(item);
         if (entries.length === 0) {
-          console.warn("Skipping empty object item:", item);
+          // skipping empty object item
           return null;
         }
 
@@ -167,17 +160,65 @@ export const createVirtualDom = ({
         const attrs = {}; // Ensure attrs is always an object
         const props = {};
         if (attrsString) {
-          const attrRegex = /(\S+?)=(?:\"([^\"]*)\"|\'([^\']*)\'|(\S+))/g;
+          // First, handle attributes with values
+          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(".")) {
               const propName = match[1].substring(1);
               const valuePathName = match[4];
               props[propName] = lodashGet(viewData, valuePathName);
+            } else if (match[1].startsWith("?")) {
+              // 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") {
+                evalValue = true;
+              } else if (attrValue === "false") {
+                evalValue = false;
+              } else {
+                // 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] = "";
+              }
             } else {
               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;
+          const processedMatches = [];
+          let tempMatch;
+          const tempAttrRegex = /(\S+?)=(?:\"([^\"]*)\"|\'([^\']*)\'|([^\s]+))/g;
+          while ((tempMatch = tempAttrRegex.exec(attrsString)) !== null) {
+            processedMatches.push(tempMatch[0]);
+          }
+          // Remove all matched attribute=value pairs
+          processedMatches.forEach(match => {
+            remainingAttrsString = remainingAttrsString.replace(match, ' ');
+          });
+          
+          const booleanAttrRegex = /\b(\S+?)(?=\s|$)/g;
+          let boolMatch;
+          while ((boolMatch = booleanAttrRegex.exec(remainingAttrsString)) !== null) {
+            const attrName = boolMatch[1];
+            // Skip if already processed or starts with . (prop) or contains =
+            if (!processedAttrs.has(attrName) && !attrName.startsWith(".") && !attrName.includes("=")) {
+              attrs[attrName] = "";
+            }
+          }
         }
 
         // 2. Handle ID from selector string (e.g., tag#id)
@@ -335,42 +376,60 @@ export const createVirtualDom = ({
         }
         if (Object.keys(props).length > 0) {
           snabbdomData.props = props;
+        }
 
-          // For web components, add a hook to detect prop changes and set isDirty
-          if (isWebComponent) {
-            snabbdomData.hook = {
-              update: (oldVnode, vnode) => {
-                const oldProps = oldVnode.data?.props || {};
-                const newProps = vnode.data?.props || {};
-                const oldAttrs = oldVnode.data?.attrs || {};
-                const newAttrs = vnode.data?.attrs || {};
-
-                // Check if props have changed
-                const propsChanged =
-                  JSON.stringify(oldProps) !== JSON.stringify(newProps);
-
-                // Check if attrs have changed
-                const attrsChanged =
-                  JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs);
-
-                if (propsChanged || attrsChanged) {
-                  // Set isDirty attribute and trigger re-render
-                  const element = vnode.elm;
-                  if (
-                    element &&
-                    element.render &&
-                    typeof element.render === "function"
-                  ) {
-                    element.setAttribute("isDirty", "true");
-                    requestAnimationFrame(() => {
-                      element.render();
-                      element.removeAttribute("isDirty");
-                    });
-                  }
+        // For web components, add a hook to detect prop and attr changes
+        if (isWebComponent) {
+          snabbdomData.hook = {
+            update: (oldVnode, vnode) => {
+              const oldProps = oldVnode.data?.props || {};
+              const newProps = vnode.data?.props || {};
+              const oldAttrs = oldVnode.data?.attrs || {};
+              const newAttrs = vnode.data?.attrs || {};
+
+              // Check if props have changed
+              const propsChanged =
+                JSON.stringify(oldProps) !== JSON.stringify(newProps);
+
+              // Check if attrs have changed
+              const attrsChanged =
+                JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs);
+
+              if (propsChanged || attrsChanged) {
+                // Set isDirty attribute and trigger re-render
+                const element = vnode.elm;
+                if (
+                  element &&
+                  element.render &&
+                  typeof element.render === "function"
+                ) {
+                  element.setAttribute("isDirty", "true");
+                  requestAnimationFrame(() => {
+                    element.render();
+                    element.removeAttribute("isDirty");
+                    // Call the specific component's handleOnUpdate instead of the parent's onUpdate
+                    if (element.handlers && element.handlers.handleOnUpdate) {
+                      const deps = {
+                        ...(element.deps || {}),
+                        store: element.store,
+                        render: element.render.bind(element),
+                        handlers: element.handlers,
+                        dispatchEvent: element.dispatchEvent.bind(element),
+                        refIds: element.refIds || {},
+                        getRefIds: () => element.refIds || {},
+                      };
+                      element.handlers.handleOnUpdate({
+                        oldProps,
+                        newProps,
+                        oldAttrs,
+                        newAttrs,
+                      }, deps);
+                    }
+                  });
                 }
-              },
-            };
-          }
+              }
+            },
+          };
         }
 
         try {