what-compiler 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-compiler",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "JSX compiler for What Framework - transforms JSX to optimized DOM operations",
   "main": "src/index.js",
   "type": "module",

package/src/runtime.js

@@ -204,15 +204,69 @@ function appendChild(parent, child) {
     for (const c of child) {
       appendChild(parent, c);
     }
+  } else if (child && typeof child === 'object' && child.tag != null) {
+    // VNode from h() — interop with what-core's VNode system
+    parent.appendChild(renderVNode(child));
   }
 }
 
+// Convert a what-core VNode to a real DOM node (interop bridge)
+function renderVNode(vnode) {
+  if (vnode == null || vnode === false || vnode === true) return document.createComment('');
+  if (typeof vnode === 'string' || typeof vnode === 'number') return document.createTextNode(String(vnode));
+  if (vnode instanceof Node) return vnode;
+  if (Array.isArray(vnode)) {
+    const frag = document.createDocumentFragment();
+    for (const v of vnode) frag.appendChild(renderVNode(v));
+    return frag;
+  }
+
+  const { tag, props, children } = vnode;
+
+  // Component VNode
+  if (typeof tag === 'function') {
+    const result = tag({ ...props, children });
+    return renderVNode(result);
+  }
+
+  // Element VNode
+  const el = document.createElement(tag);
+  if (props) {
+    for (const [key, val] of Object.entries(props)) {
+      if (key === 'key' || key === 'ref' || key === 'children') continue;
+      if (key.startsWith('on') && typeof val === 'function') {
+        el.addEventListener(key.slice(2).toLowerCase(), val);
+      } else if (key === 'className' || key === 'class') {
+        el.className = val || '';
+      } else if (key === 'style' && typeof val === 'object') {
+        Object.assign(el.style, val);
+      } else if (val !== false && val != null) {
+        el.setAttribute(key, val === true ? '' : String(val));
+      }
+    }
+  }
+  if (children) {
+    for (const child of children) {
+      el.appendChild(renderVNode(child));
+    }
+  }
+  return el;
+}
+
 /**
  * Create a component instance
  */
 export function _createComponent(Component, props) {
-  // Components are just functions that return DOM nodes
-  return untrack(() => Component(props));
+  // Call the component function.
+  // Don't untrack — framework components like Router need signal tracking.
+  const result = Component(props);
+
+  // If the component returned a VNode (from h()), convert to DOM
+  if (result && typeof result === 'object' && !(result instanceof Node) && !Array.isArray(result) && result.tag != null) {
+    return renderVNode(result);
+  }
+
+  return result;
 }
 
 /**