jsx-framework-test-pb 0.1.7 → 0.1.9

package/dist/reactivity/effect.d.ts

@@ -1,3 +1,3 @@
-import type { Effect, StateObject } from './types';
-export declare function effect(fn: Effect): void;
+import type { Effect, StateObject, Cleanup } from './types';
+export declare function effect(fn: Effect): Cleanup;
 export declare function computed<T>(fn: () => T): StateObject<T>;

package/dist/reactivity/effect.js

@@ -1,11 +1,30 @@
-import { setActiveEffect, state } from './state';
+import { setActiveEffect, setActiveDeps, state } from './state';
 export function effect(fn) {
+    let cleanup;
+    const deps = new Set();
     const runner = () => {
+        // Clear old subscriptions before re-running
+        deps.forEach(sub => sub.delete(runner));
+        deps.clear();
+        // Run cleanup from previous execution
+        cleanup?.();
+        // Set context for dependency tracking
         setActiveEffect(runner);
-        fn();
+        setActiveDeps(deps);
+        // Execute effect and capture any returned cleanup
+        const result = fn();
+        cleanup = typeof result === 'function' ? result : undefined;
+        // Clear context
         setActiveEffect(null);
+        setActiveDeps(null);
     };
     runner();
+    // Return dispose function
+    return () => {
+        cleanup?.();
+        deps.forEach(sub => sub.delete(runner));
+        deps.clear();
+    };
 }
 export function computed(fn) {
     const s = state(undefined);

package/dist/reactivity/index.d.ts

@@ -1,3 +1,3 @@
-export type { Effect, StateObject } from './types';
+export type { Cleanup, Effect, StateObject } from './types';
 export { state, isState } from './state';
 export { effect, computed } from './effect';

package/dist/reactivity/state.d.ts

@@ -1,5 +1,7 @@
 import type { Effect, StateObject } from './types';
 export declare function setActiveEffect(effect: Effect | null): void;
 export declare function getActiveEffect(): Effect | null;
+export declare function setActiveDeps(deps: Set<Set<Effect>> | null): void;
+export declare function getActiveDeps(): Set<Set<Effect>> | null;
 export declare function state<T>(initial: T): StateObject<T>;
 export declare function isState(value: unknown): value is StateObject<unknown>;

package/dist/reactivity/state.js

@@ -1,24 +1,52 @@
 let activeEffect = null;
+let activeDeps = null;
+// Batching state
+let pendingEffects = new Set();
+let isFlushing = false;
 export function setActiveEffect(effect) {
     activeEffect = effect;
 }
 export function getActiveEffect() {
     return activeEffect;
 }
+export function setActiveDeps(deps) {
+    activeDeps = deps;
+}
+export function getActiveDeps() {
+    return activeDeps;
+}
+function queueEffect(effect) {
+    pendingEffects.add(effect);
+    if (!isFlushing) {
+        isFlushing = true;
+        queueMicrotask(flushEffects);
+    }
+}
+function flushEffects() {
+    const effects = pendingEffects;
+    pendingEffects = new Set();
+    isFlushing = false;
+    effects.forEach(fn => fn());
+}
 export function state(initial) {
     let value = initial;
     const subscribers = new Set();
     return {
         get val() {
-            if (activeEffect)
+            if (activeEffect) {
                 subscribers.add(activeEffect);
+                // Track this subscriber set in the effect's dependencies
+                if (activeDeps) {
+                    activeDeps.add(subscribers);
+                }
+            }
             return value;
         },
         set val(next) {
             if (Object.is(value, next))
                 return;
             value = next;
-            subscribers.forEach(fn => fn());
+            subscribers.forEach(fn => queueEffect(fn));
         }
     };
 }

package/dist/reactivity/types.d.ts

@@ -1,4 +1,5 @@
-export type Effect = () => void;
+export type Cleanup = () => void;
+export type Effect = () => void | Cleanup;
 export interface StateObject<T> {
     val: T;
 }

package/dist/runtime/createElement.d.ts

@@ -1 +1,2 @@
+export declare function cleanupNode(node: Node): void;
 export declare function createElement(element: any): Node | null;

package/dist/runtime/createElement.js

@@ -1,15 +1,28 @@
 import { isElement, isValidChild, FRAGMENT_TYPE } from '../utils';
 import { effect } from '../reactivity';
+// Track cleanups per node for proper disposal
+const nodeCleanups = new WeakMap();
+function trackCleanup(node, cleanup) {
+    let cleanups = nodeCleanups.get(node);
+    if (!cleanups) {
+        cleanups = new Set();
+        nodeCleanups.set(node, cleanups);
+    }
+    cleanups.add(cleanup);
+}
+export function cleanupNode(node) {
+    const cleanups = nodeCleanups.get(node);
+    if (cleanups) {
+        cleanups.forEach(fn => fn());
+        cleanups.clear();
+    }
+}
 export function createElement(element) {
     if (!isValidChild(element)) {
         return null;
     }
     if (typeof element === 'function') {
-        const textNode = document.createTextNode('');
-        effect(() => {
-            textNode.textContent = String(element());
-        });
-        return textNode;
+        return createReactiveChild(element);
     }
     if (typeof element === 'string' || typeof element === 'number') {
         return document.createTextNode(String(element));
@@ -33,6 +46,57 @@ export function createElement(element) {
     }
     return null;
 }
+function createReactiveChild(fn) {
+    // Use a comment as a stable anchor point
+    const anchor = document.createComment('');
+    let currentNode = null;
+    let isFirstRun = true;
+    const cleanup = effect(() => {
+        const value = fn();
+        // Clean up previous node (skip on first run)
+        if (!isFirstRun && currentNode) {
+            cleanupTree(currentNode);
+            currentNode.parentNode?.removeChild(currentNode);
+            currentNode = null;
+        }
+        // Handle different return types
+        if (value == null || value === false) {
+            currentNode = null;
+        }
+        else if (typeof value === 'string' || typeof value === 'number') {
+            currentNode = document.createTextNode(String(value));
+        }
+        else if (isElement(value) || Array.isArray(value)) {
+            currentNode = createElement(value);
+        }
+        else {
+            currentNode = document.createTextNode(String(value));
+        }
+        // Insert new node after anchor (skip on first run - handled by fragment)
+        if (!isFirstRun && currentNode && anchor.parentNode) {
+            anchor.parentNode.insertBefore(currentNode, anchor.nextSibling);
+        }
+        isFirstRun = false;
+    });
+    trackCleanup(anchor, () => {
+        cleanup();
+        if (currentNode) {
+            cleanupTree(currentNode);
+            currentNode.parentNode?.removeChild(currentNode);
+        }
+    });
+    // Return fragment with anchor and initial node
+    const fragment = document.createDocumentFragment();
+    fragment.appendChild(anchor);
+    if (currentNode) {
+        fragment.appendChild(currentNode);
+    }
+    return fragment;
+}
+function cleanupTree(node) {
+    cleanupNode(node);
+    node.childNodes.forEach(child => cleanupTree(child));
+}
 function createFragment(children) {
     const fragment = document.createDocumentFragment();
     const childArray = Array.isArray(children) ? children : [children];
@@ -70,9 +134,10 @@ function createHTMLElement(type, props) {
 }
 function handleReactiveProp(element, attrName, value) {
     if (typeof value === 'function' && !attrName.startsWith('on')) {
-        effect(() => {
+        const cleanup = effect(() => {
             element.setAttribute(attrName, String(value()));
         });
+        trackCleanup(element, cleanup);
     }
     else {
         element.setAttribute(attrName, String(value));
@@ -89,15 +154,21 @@ function appendChildren(parent, children) {
 }
 function attachEvent(element, key, handler) {
     const eventName = key.substring(2).toLowerCase();
-    element.addEventListener(eventName, handler);
+    const listener = handler;
+    element.addEventListener(eventName, listener);
+    // Track for cleanup on unmount
+    trackCleanup(element, () => {
+        element.removeEventListener(eventName, listener);
+    });
 }
 function applyStyles(element, styles) {
     Object.keys(styles).forEach(key => {
         const value = styles[key];
         if (typeof value === 'function') {
-            effect(() => {
+            const cleanup = effect(() => {
                 element.style[key] = value();
             });
+            trackCleanup(element, cleanup);
         }
         else {
             element.style[key] = value;

package/dist/runtime/index.d.ts

@@ -1,4 +1,4 @@
 export type { FiberNode } from './types';
 export { reconcile } from './reconciler';
 export { render, unmount } from './render';
-export { createElement } from './createElement';
+export { createElement, cleanupNode } from './createElement';

package/dist/runtime/index.js

@@ -1,3 +1,3 @@
 export { reconcile } from './reconciler';
 export { render, unmount } from './render';
-export { createElement } from './createElement';
+export { createElement, cleanupNode } from './createElement';

package/dist/runtime/reconciler.js

@@ -1,4 +1,4 @@
-import { createElement } from "./createElement";
+import { createElement, cleanupNode } from "./createElement";
 import { isElement } from "../utils";
 import { effect } from "../reactivity";
 function canReuse(oldElement, newElement) {
@@ -40,6 +40,10 @@ function setAttr(el, name, value) {
 function getInsertionPoint(parent, targetIndex) {
     return parent.childNodes.item(targetIndex) ?? null;
 }
+function cleanupTree(node) {
+    cleanupNode(node);
+    node.childNodes.forEach(child => cleanupTree(child));
+}
 export function reconcile(parent, newElements, oldFibers = []) {
     const newFibers = [];
     const newElementsArray = Array.isArray(newElements) ? newElements : [newElements];
@@ -66,6 +70,8 @@ export function reconcile(parent, newElements, oldFibers = []) {
                 oldFibersByIndex.delete(index);
         }
         let fiber;
+        let isNewFiber = false;
+        let needsMove = false;
         if (oldFiber && canReuse(oldFiber.element, element)) {
             fiber = { element, dom: oldFiber.dom, key, index };
             if (fiber.dom)
@@ -73,19 +79,26 @@ export function reconcile(parent, newElements, oldFibers = []) {
             if (oldFiber.dom && isElement(element)) {
                 updateElement(oldFiber.dom, element);
             }
+            // Only need to move if position changed
+            needsMove = oldFiber.index !== index;
         }
         else {
             const dom = createElement(element);
             fiber = { element, dom, key, index };
+            isNewFiber = true;
+            // Clean up old fiber if it existed but couldn't be reused
             if (oldFiber?.dom?.parentNode === parent) {
+                cleanupTree(oldFiber.dom);
                 parent.removeChild(oldFiber.dom);
             }
+            // Insert new element
             if (dom) {
                 const before = getInsertionPoint(parent, index);
                 parent.insertBefore(dom, before);
             }
         }
-        if (fiber.dom) {
+        // Only reposition reused fibers that actually need to move
+        if (!isNewFiber && needsMove && fiber.dom) {
             const before = getInsertionPoint(parent, index);
             if (fiber.dom !== before) {
                 parent.insertBefore(fiber.dom, before);
@@ -93,8 +106,10 @@ export function reconcile(parent, newElements, oldFibers = []) {
         }
         newFibers.push(fiber);
     });
+    // Clean up remaining old fibers
     [...oldFibersByKey.values(), ...oldFibersByIndex.values()].forEach((fiber) => {
         if (fiber.dom?.parentNode === parent && !reusedOldDoms.has(fiber.dom)) {
+            cleanupTree(fiber.dom);
             parent.removeChild(fiber.dom);
         }
     });

package/dist/runtime/render.js

@@ -1,5 +1,6 @@
 import { reconcile } from './reconciler';
 import { isElement } from '../utils';
+import { cleanupNode } from './createElement';
 const instances = new WeakMap();
 export function render(element, container) {
     if (!container)
@@ -16,9 +17,15 @@ export function render(element, container) {
     const newFibers = reconcile(container, children, oldFibers);
     instances.set(container, newFibers);
 }
+function cleanupTree(node) {
+    cleanupNode(node);
+    node.childNodes.forEach(child => cleanupTree(child));
+}
 export function unmount(container) {
     if (!container)
         return;
+    // Clean up all nodes recursively before removing
+    cleanupTree(container);
     container.replaceChildren();
     instances.delete(container);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-framework-test-pb",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",