what-core 0.4.0 → 0.4.2

package/dist/dom.js

@@ -60,12 +60,16 @@ function disposeComponent(ctx) {
   mountedComponents.delete(ctx);
 }
 
-// Dispose all components attached to a DOM subtree
+// Dispose all components and reactive effects attached to a DOM subtree
 function disposeTree(node) {
   if (!node) return;
   if (node._componentCtx) {
     disposeComponent(node._componentCtx);
   }
+  // Dispose reactive function child effects ({() => ...} wrappers)
+  if (node._dispose) {
+    try { node._dispose(); } catch (e) { /* already disposed */ }
+  }
   if (node.childNodes) {
     for (const child of node.childNodes) {
       disposeTree(child);
@@ -101,6 +105,31 @@ function createDOM(vnode, parent, isSvg) {
     return document.createTextNode(String(vnode));
   }
 
+  // Reactive function child — creates a wrapper that updates fine-grained
+  // Handles both primitives ({() => count()}) and vnodes ({() => items().map(...)})
+  if (typeof vnode === 'function') {
+    const wrapper = document.createElement('what-c');
+    let mounted = false;
+    const dispose = effect(() => {
+      const val = vnode();
+      // Normalize: null/false/true → empty, primitives and vnodes → array
+      const vnodes = (val == null || val === false || val === true)
+        ? []
+        : Array.isArray(val) ? val : [val];
+      if (!mounted) {
+        mounted = true;
+        for (const v of vnodes) {
+          const node = createDOM(v, wrapper, parent?._isSvg);
+          if (node) wrapper.appendChild(node);
+        }
+      } else {
+        reconcileChildren(wrapper, vnodes);
+      }
+    });
+    wrapper._dispose = dispose;
+    return wrapper;
+  }
+
   // Array (fragment)
   if (Array.isArray(vnode)) {
     const frag = document.createDocumentFragment();
@@ -253,6 +282,7 @@ function createComponent(vnode, parent, isSvg) {
   });
 
   ctx.effects.push(dispose);
+  wrapper._vnode = vnode; // Store vnode for keyed reconciliation
   return wrapper;
 }
 
@@ -615,6 +645,33 @@ function patchNode(parent, domNode, vnode) {
     return placeholder;
   }
 
+  // Reactive function child — replace whatever's there with a reactive wrapper
+  if (typeof vnode === 'function') {
+    const wrapper = document.createElement('what-c');
+    let mounted = false;
+    const dispose = effect(() => {
+      const val = vnode();
+      const vnodes = (val == null || val === false || val === true)
+        ? []
+        : Array.isArray(val) ? val : [val];
+      if (!mounted) {
+        mounted = true;
+        for (const v of vnodes) {
+          const node = createDOM(v, wrapper);
+          if (node) wrapper.appendChild(node);
+        }
+      } else {
+        reconcileChildren(wrapper, vnodes);
+      }
+    });
+    wrapper._dispose = dispose;
+    if (domNode && domNode.parentNode) {
+      disposeTree(domNode);
+      parent.replaceChild(wrapper, domNode);
+    }
+    return wrapper;
+  }
+
   // Text
   if (typeof vnode === 'string' || typeof vnode === 'number') {
     const text = String(vnode);
@@ -688,6 +745,7 @@ function patchNode(parent, domNode, vnode) {
         && domNode._componentCtx.Component === vnode.tag) {
       // Same component — update props reactively, let its effect re-render
       domNode._componentCtx._propsSignal.set({ ...vnode.props, children: vnode.children });
+      domNode._vnode = vnode; // Keep vnode current for keyed reconciliation
       return domNode;
     }
     // Different component or not a component — dispose old, create new

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "What Framework - The closest framework to vanilla JS",
   "type": "module",
   "main": "dist/what.js",
@@ -12,6 +12,12 @@
       "import": "./src/index.js",
       "require": "./dist/what.cjs"
     },
+    "./jsx-runtime": {
+      "import": "./src/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "import": "./src/jsx-dev-runtime.js"
+    },
     "./render": {
       "import": "./src/render.js"
     },

package/src/dom.js

@@ -60,12 +60,16 @@ function disposeComponent(ctx) {
   mountedComponents.delete(ctx);
 }
 
-// Dispose all components attached to a DOM subtree
+// Dispose all components and reactive effects attached to a DOM subtree
 function disposeTree(node) {
   if (!node) return;
   if (node._componentCtx) {
     disposeComponent(node._componentCtx);
   }
+  // Dispose reactive function child effects ({() => ...} wrappers)
+  if (node._dispose) {
+    try { node._dispose(); } catch (e) { /* already disposed */ }
+  }
   if (node.childNodes) {
     for (const child of node.childNodes) {
       disposeTree(child);
@@ -101,6 +105,31 @@ function createDOM(vnode, parent, isSvg) {
     return document.createTextNode(String(vnode));
   }
 
+  // Reactive function child — creates a wrapper that updates fine-grained
+  // Handles both primitives ({() => count()}) and vnodes ({() => items().map(...)})
+  if (typeof vnode === 'function') {
+    const wrapper = document.createElement('what-c');
+    let mounted = false;
+    const dispose = effect(() => {
+      const val = vnode();
+      // Normalize: null/false/true → empty, primitives and vnodes → array
+      const vnodes = (val == null || val === false || val === true)
+        ? []
+        : Array.isArray(val) ? val : [val];
+      if (!mounted) {
+        mounted = true;
+        for (const v of vnodes) {
+          const node = createDOM(v, wrapper, parent?._isSvg);
+          if (node) wrapper.appendChild(node);
+        }
+      } else {
+        reconcileChildren(wrapper, vnodes);
+      }
+    });
+    wrapper._dispose = dispose;
+    return wrapper;
+  }
+
   // Array (fragment)
   if (Array.isArray(vnode)) {
     const frag = document.createDocumentFragment();
@@ -253,6 +282,7 @@ function createComponent(vnode, parent, isSvg) {
   });
 
   ctx.effects.push(dispose);
+  wrapper._vnode = vnode; // Store vnode for keyed reconciliation
   return wrapper;
 }
 
@@ -615,6 +645,33 @@ function patchNode(parent, domNode, vnode) {
     return placeholder;
   }
 
+  // Reactive function child — replace whatever's there with a reactive wrapper
+  if (typeof vnode === 'function') {
+    const wrapper = document.createElement('what-c');
+    let mounted = false;
+    const dispose = effect(() => {
+      const val = vnode();
+      const vnodes = (val == null || val === false || val === true)
+        ? []
+        : Array.isArray(val) ? val : [val];
+      if (!mounted) {
+        mounted = true;
+        for (const v of vnodes) {
+          const node = createDOM(v, wrapper);
+          if (node) wrapper.appendChild(node);
+        }
+      } else {
+        reconcileChildren(wrapper, vnodes);
+      }
+    });
+    wrapper._dispose = dispose;
+    if (domNode && domNode.parentNode) {
+      disposeTree(domNode);
+      parent.replaceChild(wrapper, domNode);
+    }
+    return wrapper;
+  }
+
   // Text
   if (typeof vnode === 'string' || typeof vnode === 'number') {
     const text = String(vnode);
@@ -688,6 +745,7 @@ function patchNode(parent, domNode, vnode) {
         && domNode._componentCtx.Component === vnode.tag) {
       // Same component — update props reactively, let its effect re-render
       domNode._componentCtx._propsSignal.set({ ...vnode.props, children: vnode.children });
+      domNode._vnode = vnode; // Keep vnode current for keyed reconciliation
       return domNode;
     }
     // Different component or not a component — dispose old, create new

package/src/h.js

@@ -36,6 +36,9 @@ function flattenChildren(children) {
       out.push(...flattenChildren(child));
     } else if (typeof child === 'object' && child._vnode) {
       out.push(child);
+    } else if (typeof child === 'function') {
+      // Reactive child — preserve function for fine-grained DOM updates
+      out.push(child);
     } else {
       // Text node
       out.push(String(child));

package/src/jsx-dev-runtime.js

@@ -0,0 +1,19 @@
+// What Framework — JSX Dev Runtime
+// Same as jsx-runtime but used in development mode by Vite.
+
+import { h, Fragment } from './h.js';
+
+export { Fragment };
+
+export function jsxDEV(type, props, key) {
+  if (props == null) return h(type, null);
+  const { children, ...rest } = props;
+  if (key !== undefined) rest.key = key;
+  if (children === undefined) return h(type, rest);
+  if (Array.isArray(children)) return h(type, rest, ...children);
+  return h(type, rest, children);
+}
+
+// Also export jsx/jsxs for compatibility — some bundlers use these even in dev
+export const jsx = jsxDEV;
+export const jsxs = jsxDEV;

package/src/jsx-runtime.js

@@ -0,0 +1,21 @@
+// What Framework — JSX Automatic Runtime
+// Used by: jsxImportSource: "what-framework" (or "what-core")
+// Vite/esbuild import this automatically when using the "react-jsx" transform.
+
+import { h, Fragment } from './h.js';
+
+export { Fragment };
+
+// Automatic JSX transform signature: jsx(type, { children, ...props }, key)
+// What's h() signature: h(type, props, ...children)
+export function jsx(type, props, key) {
+  if (props == null) return h(type, null);
+  const { children, ...rest } = props;
+  if (key !== undefined) rest.key = key;
+  if (children === undefined) return h(type, rest);
+  if (Array.isArray(children)) return h(type, rest, ...children);
+  return h(type, rest, children);
+}
+
+// jsxs = jsx for static children (multiple). Same behavior for What.
+export const jsxs = jsx;

package/src/reactive.js

@@ -17,29 +17,38 @@ export function signal(initial) {
   let value = initial;
   const subs = new Set();
 
-  function read() {
-    if (currentEffect) {
-      subs.add(currentEffect);
-      currentEffect.deps.push(subs); // Track reverse dep for cleanup
+  // Unified getter/setter: sig() reads, sig(newVal) writes
+  function sig(...args) {
+    if (args.length === 0) {
+      // Read
+      if (currentEffect) {
+        subs.add(currentEffect);
+        currentEffect.deps.push(subs);
+      }
+      return value;
     }
-    return value;
+    // Write
+    const nextVal = typeof args[0] === 'function' ? args[0](value) : args[0];
+    if (Object.is(value, nextVal)) return;
+    value = nextVal;
+    notify(subs);
   }
 
-  read.set = (next) => {
+  sig.set = (next) => {
     const nextVal = typeof next === 'function' ? next(value) : next;
     if (Object.is(value, nextVal)) return;
     value = nextVal;
     notify(subs);
   };
 
-  read.peek = () => value;
+  sig.peek = () => value;
 
-  read.subscribe = (fn) => {
-    return effect(() => fn(read()));
+  sig.subscribe = (fn) => {
+    return effect(() => fn(sig()));
   };
 
-  read._signal = true;
-  return read;
+  sig._signal = true;
+  return sig;
 }
 
 // --- Computed ---