what-core 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-core",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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

@@ -101,6 +101,18 @@ function createDOM(vnode, parent, isSvg) {
     return document.createTextNode(String(vnode));
   }
 
+  // Reactive function child — creates a text node that updates fine-grained
+  if (typeof vnode === 'function') {
+    const textNode = document.createTextNode('');
+    effect(() => {
+      const val = vnode();
+      // If the function returns a vnode, we can't upgrade a text node to an element.
+      // For now, stringify the result. Component-level re-render handles complex cases.
+      textNode.textContent = (val == null || val === false || val === true) ? '' : String(val);
+    });
+    return textNode;
+  }
+
   // Array (fragment)
   if (Array.isArray(vnode)) {
     const frag = document.createDocumentFragment();
@@ -615,6 +627,20 @@ function patchNode(parent, domNode, vnode) {
     return placeholder;
   }
 
+  // Reactive function child — replace whatever's there with a reactive text node
+  if (typeof vnode === 'function') {
+    const textNode = document.createTextNode('');
+    effect(() => {
+      const val = vnode();
+      textNode.textContent = (val == null || val === false || val === true) ? '' : String(val);
+    });
+    if (domNode && domNode.parentNode) {
+      disposeTree(domNode);
+      parent.replaceChild(textNode, domNode);
+    }
+    return textNode;
+  }
+
   // Text
   if (typeof vnode === 'string' || typeof vnode === 'number') {
     const text = String(vnode);

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 ---