rask-ui 0.2.0 → 0.2.2

package/dist/vdom/ElementVNode.d.ts

@@ -20,5 +20,11 @@ export declare class ElementVNode extends AbstractVNode {
     private setProp;
     private patchProps;
     private addEventListener;
+    /**
+     * Intelligently sync DOM to match children VNode order.
+     * Only performs DOM operations when elements are out of position.
+     * This is used by both patch() and rerender() to efficiently update children.
+     */
+    private syncDOMChildren;
 }
 //# sourceMappingURL=ElementVNode.d.ts.map

package/dist/vdom/ElementVNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ElementVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUvC,qBAAa,YAAa,SAAQ,aAAa;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,GAAG,CAAC,CAA0D;IACtE,OAAO,CAAC,cAAc,CAAC,CAA6B;gBAElD,GAAG,EAAE,MAAM,EACX,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,EACxB,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IASd,QAAQ,IAAI,IAAI;IAOhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAW3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;CAgBzB"}
+{"version":3,"file":"ElementVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ElementVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAUvC,qBAAa,YAAa,SAAQ,aAAa;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,GAAG,CAAC,CAA0D;IACtE,OAAO,CAAC,cAAc,CAAC,CAA6B;gBAElD,GAAG,EAAE,MAAM,EACX,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,EACxB,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IASd,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAM3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAGlB,OAAO,CAAC,gBAAgB;IAgBxB;;;;OAIG;IACH,OAAO,CAAC,eAAe;CAyBxB"}

package/dist/vdom/ElementVNode.js

@@ -18,10 +18,7 @@ export class ElementVNode extends AbstractVNode {
         this.ref = ref;
     }
     rerender() {
-        const childrenElms = this.children
-            .map((child) => child.getElements())
-            .flat();
-        this.elm.replaceChildren(...childrenElms);
+        this.syncDOMChildren();
     }
     mount(parent) {
         this.parent = parent;
@@ -61,10 +58,7 @@ export class ElementVNode extends AbstractVNode {
         this.patchProps(newNode.props);
         this.props = newNode.props;
         this.children = this.patchChildren(newNode.children);
-        const childrenElms = this.children
-            .map((child) => child.getElements())
-            .flat();
-        this.elm.replaceChildren(...childrenElms);
+        this.syncDOMChildren();
     }
     unmount() {
         this.children.forEach((child) => child.unmount());
@@ -123,4 +117,32 @@ export class ElementVNode extends AbstractVNode {
             delete this.eventListeners[type];
         }
     }
+    /**
+     * Intelligently sync DOM to match children VNode order.
+     * Only performs DOM operations when elements are out of position.
+     * This is used by both patch() and rerender() to efficiently update children.
+     */
+    syncDOMChildren() {
+        const elm = this.elm;
+        let currentDomChild = elm.firstChild;
+        for (const child of this.children) {
+            const childNodes = child.getElements();
+            for (const node of childNodes) {
+                if (currentDomChild === node) {
+                    // Already in correct position, advance pointer
+                    currentDomChild = currentDomChild.nextSibling;
+                }
+                else {
+                    // Insert (or move if it exists elsewhere in DOM)
+                    elm.insertBefore(node, currentDomChild);
+                }
+            }
+        }
+        // Remove any leftover nodes (shouldn't happen if unmount works correctly)
+        while (currentDomChild) {
+            const next = currentDomChild.nextSibling;
+            elm.removeChild(currentDomChild);
+            currentDomChild = next;
+        }
+    }
 }

package/dist/vdom/RootVNode.d.ts

@@ -6,9 +6,12 @@ export declare class RootVNode extends AbstractVNode {
     children: VNode[];
     componentStack: ComponentInstance[];
     private lifecycleQueue;
+    private hasPendingMicroTask;
+    private pendingObservers;
     constructor(rootNode: VNode, container: HTMLElement);
     queueMount(cb: () => void): void;
     queueUnmount(cb: () => void): void;
+    queueObserver(cb: () => void): void;
     flushLifecycle(): void;
     pushComponent(instance: ComponentInstance): void;
     popComponent(): void;

package/dist/vdom/RootVNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/RootVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,eAAO,IAAI,WAAW,EAAE,SAAS,GAAG,SAAS,CAAC;AAE9C,qBAAa,SAAU,SAAQ,aAAa;IAC1C,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,cAAc,EAAE,iBAAiB,EAAE,CAAM;IACzC,OAAO,CAAC,cAAc,CAGpB;gBAEU,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW;IAMnD,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI;IAIzB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI;IAI3B,cAAc;IAOd,aAAa,CAAC,QAAQ,EAAE,iBAAiB;IAIzC,YAAY;IAIZ,YAAY;IAIZ,YAAY;IAMZ,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE;IAGtB,KAAK,IAAI,IAAI;IACb,QAAQ,IAAI,IAAI;IAShB,OAAO,IAAI,IAAI;CAChB"}
+{"version":3,"file":"RootVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/RootVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,eAAO,IAAI,WAAW,EAAE,SAAS,GAAG,SAAS,CAAC;AAE9C,qBAAa,SAAU,SAAQ,aAAa;IAC1C,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,cAAc,EAAE,iBAAiB,EAAE,CAAM;IACzC,OAAO,CAAC,cAAc,CAGpB;IACF,OAAO,CAAC,mBAAmB,CAAkB;IAC7C,OAAO,CAAC,gBAAgB,CAAyB;gBAErC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW;IAMnD,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI;IAIzB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI;IAG3B,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI;IAa5B,cAAc;IAOd,aAAa,CAAC,QAAQ,EAAE,iBAAiB;IAIzC,YAAY;IAIZ,YAAY;IAIZ,YAAY;IAMZ,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE;IAGtB,KAAK,IAAI,IAAI;IACb,QAAQ,IAAI,IAAI;IAShB,OAAO,IAAI,IAAI;CAChB"}

package/dist/vdom/RootVNode.js

@@ -9,6 +9,8 @@ export class RootVNode extends AbstractVNode {
         toMount: [],
         toUnmount: [],
     };
+    hasPendingMicroTask = false;
+    pendingObservers = [];
     constructor(rootNode, container) {
         super();
         this.elm = container;
@@ -20,6 +22,19 @@ export class RootVNode extends AbstractVNode {
     queueUnmount(cb) {
         this.lifecycleQueue.toUnmount.push(cb);
     }
+    queueObserver(cb) {
+        this.pendingObservers.push(cb);
+        if (!this.hasPendingMicroTask) {
+            this.hasPendingMicroTask = true;
+            queueMicrotask(() => {
+                this.hasPendingMicroTask = false;
+                const pendingObservers = this.pendingObservers;
+                this.pendingObservers = [];
+                pendingObservers.forEach((pendingObserver) => pendingObserver());
+                this.flushLifecycle();
+            });
+        }
+    }
     flushLifecycle() {
         this.lifecycleQueue.toUnmount.forEach((cb) => cb());
         this.lifecycleQueue.toUnmount = [];

package/dist/vdom/TextVNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/TextVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,qBAAa,SAAU,SAAQ,aAAa;IAC1C,IAAI,EAAE,MAAM,CAAC;gBACD,IAAI,EAAE,MAAM;IAIxB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAe3B,KAAK,CAAC,OAAO,EAAE,SAAS;IAIxB,QAAQ,IAAI,IAAI;IAChB,OAAO;CAMR"}
+{"version":3,"file":"TextVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/TextVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,qBAAa,SAAU,SAAQ,aAAa;IAC1C,IAAI,EAAE,MAAM,CAAC;gBACD,IAAI,EAAE,MAAM;IAIxB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAe3B,KAAK,CAAC,OAAO,EAAE,SAAS;IAQxB,QAAQ,IAAI,IAAI;IAChB,OAAO;CAMR"}

package/dist/vdom/TextVNode.js

@@ -19,6 +19,9 @@ export class TextVNode extends AbstractVNode {
         return textNode;
     }
     patch(newNode) {
+        if (newNode.text === this.text) {
+            return;
+        }
         this.text = newNode.text;
         this.elm.textContent = this.text;
     }

package/dist/vdom/dom-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom-utils.d.ts","sourceRoot":"","sources":["../../src/vdom/dom-utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,IAAI,GAAG,IAAI,EAAE,QAO3B;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAc3D;AAGD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,QAQtE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,QAE3E;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,GAAG,IAAI,QAOrB;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,QAe/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,QAkB3D"}
+{"version":3,"file":"dom-utils.d.ts","sourceRoot":"","sources":["../../src/vdom/dom-utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,IAAI,GAAG,IAAI,EAAE,QAO3B;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAc3D;AAGD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,QAQtE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,QAE3E;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,GAAG,IAAI,QAOrB;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,QAe/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,QA0B3D"}

package/dist/vdom/dom-utils.js

@@ -59,16 +59,26 @@ export function isEventProp(name) {
 }
 export function setElementClass(elm, value) {
     if (value === null || value === undefined) {
-        elm.className = "";
+        elm.removeAttribute("class");
         return;
     }
     if (typeof value === "string") {
-        elm.className = value;
+        if (value === "") {
+            elm.removeAttribute("class");
+        }
+        else {
+            elm.className = value;
+        }
         return;
     }
     // Handle object notation: { "class-name": true, "other-class": false }
     const classes = Object.keys(value)
         .filter((key) => value[key])
         .join(" ");
-    elm.className = classes;
+    if (classes === "") {
+        elm.removeAttribute("class");
+    }
+    else {
+        elm.className = classes;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -19,10 +19,11 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
-    "build": "tsc && cp src/jsx.d.ts dist/",
+    "build": "tsc && cp src/jsx.d.ts dist/ && cp ../../README.md .",
     "dev": "tsc --watch",
     "test": "vitest",
     "test:ui": "vitest --ui",