@solidjs/h 2.0.0-beta.7 → 2.0.0-beta.9

package/README.md

@@ -17,11 +17,17 @@ h("div", { title: "My button" }, h("span", "1"), h("span", "2"), h("span", "3"))
 
 This is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakeable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).
 
+> `h(...)` returns a tagged zero-arity thunk rather than a DOM node directly.
+> Pass a function reference (or `() => h(App)`) to `render(...)` so the thunk
+> is invoked inside the root. Nested `h(...)` thunks auto-invoke when consumed,
+> so composition with control-flow components like `<For>` and `<Show>` works
+> without extra wrapping.
+
 ## Example
 
 ```js
-import { render } from "solid-js/web";
-import h from "solid-js/h";
+import { render } from "@solidjs/web";
+import h from "@solidjs/h";
 import { createSignal } from "solid-js";
 
 function Button(props) {

package/dist/h.cjs

@@ -2,15 +2,54 @@
 
 var web = require('@solidjs/web');
 
+const $ELEMENT = Symbol("hyper-element");
+const $WRAPPED = Symbol("hyper-wrapped");
+function resolveThunks(value) {
+  if (typeof value === "function" && value[$ELEMENT]) return resolveThunks(value());
+  if (Array.isArray(value)) {
+    const out = new Array(value.length);
+    for (let i = 0; i < value.length; i++) out[i] = resolveThunks(value[i]);
+    return out;
+  }
+  return value;
+}
+function wrapCallback(orig) {
+  let w;
+  if (orig.length === 1) {
+    w = function (a) {
+      return resolveThunks(orig.call(this, a));
+    };
+  } else if (orig.length === 2) {
+    w = function (a, b) {
+      return resolveThunks(orig.call(this, a, b));
+    };
+  } else {
+    w = function (...args) {
+      return resolveThunks(orig.apply(this, args));
+    };
+    Object.defineProperty(w, "length", {
+      value: orig.length
+    });
+  }
+  w[$WRAPPED] = true;
+  return w;
+}
 function createHyperScript(r) {
-  function h() {
-    let args = [].slice.call(arguments),
-      e,
-      classes = [],
-      multiExpression = false;
+  function h(...rawArgs) {
+    if (rawArgs.length === 1 && Array.isArray(rawArgs[0])) return rawArgs[0];
+    const thunk = () => r.untrack(() => materialize(rawArgs));
+    thunk[$ELEMENT] = true;
+    return thunk;
+  }
+  function materialize(args) {
+    let e;
+    let classes = [];
+    let multiExpression = false;
+    args = args.slice();
     function item(l) {
+      if (l == null) return;
       const type = typeof l;
-      if (l == null) ;else if ("string" === type) {
+      if ("string" === type) {
         if (!e) parseClass(l);else e.appendChild(document.createTextNode(l));
       } else if ("number" === type || "boolean" === type || "bigint" === type || "symbol" === type || l instanceof Date || l instanceof RegExp) {
         e.appendChild(document.createTextNode(l.toString()));
@@ -38,26 +77,24 @@ function createHyperScript(r) {
         dynamic ? r.spread(e, l, !!args.length) : r.assign(e, l, !!args.length);
       } else if ("function" === type) {
         if (!e) {
-          let props,
-            next = args[0];
-          if (next == null || typeof next === "object" && !Array.isArray(next) && !(next instanceof Element)) props = args.shift();
-          props || (props = {});
-          if (args.length) {
-            props.children = args.length > 1 ? args : args[0];
-          }
-          const d = Object.getOwnPropertyDescriptors(props);
-          for (const k in d) {
-            if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
+          const first = args[0];
+          const props = first == null || typeof first === "object" && !Array.isArray(first) && !(first instanceof Element) ? args.shift() || {} : {};
+          if (args.length) props.children = args.length > 1 ? args : args[0];
+          for (const k in props) {
+            const v = props[k];
+            if (typeof v === "function") {
+              if (!v.length) r.dynamicProperty(props, k);else if (!v[$ELEMENT] && !v[$WRAPPED]) {
+                props[k] = wrapCallback(v);
+              }
+            }
           }
           e = r.createComponent(l, props);
+          while (typeof e === "function" && e[$ELEMENT]) e = e();
           args = [];
-        } else {
-          r.insert(e, l, multiExpression ? null : undefined);
-        }
+        } else if (l[$ELEMENT]) item(l());else r.insert(e, l, multiExpression ? null : undefined);
       }
     }
-    if (args.length === 1 && Array.isArray(args[0])) return args[0];
-    typeof args[0] === "string" && detectMultiExpression(args);
+    if (typeof args[0] === "string") detectMultiExpression(args);
     while (args.length) item(args.shift());
     if (e instanceof Element && classes.length) e.classList.add(...classes);
     return e;
@@ -92,6 +129,7 @@ const h = createHyperScript({
   insert: web.insert,
   createComponent: web.createComponent,
   dynamicProperty: web.dynamicProperty,
+  untrack: web.untrack,
   SVGElements: web.SVGElements,
   MathMLElements: web.MathMLElements,
   Namespaces: web.Namespaces

package/dist/h.js

@@ -1,14 +1,53 @@
-import { Namespaces, MathMLElements, SVGElements, dynamicProperty, createComponent, insert, assign, spread } from '@solidjs/web';
+import { Namespaces, MathMLElements, SVGElements, untrack, dynamicProperty, createComponent, insert, assign, spread } from '@solidjs/web';
 
+const $ELEMENT = Symbol("hyper-element");
+const $WRAPPED = Symbol("hyper-wrapped");
+function resolveThunks(value) {
+  if (typeof value === "function" && value[$ELEMENT]) return resolveThunks(value());
+  if (Array.isArray(value)) {
+    const out = new Array(value.length);
+    for (let i = 0; i < value.length; i++) out[i] = resolveThunks(value[i]);
+    return out;
+  }
+  return value;
+}
+function wrapCallback(orig) {
+  let w;
+  if (orig.length === 1) {
+    w = function (a) {
+      return resolveThunks(orig.call(this, a));
+    };
+  } else if (orig.length === 2) {
+    w = function (a, b) {
+      return resolveThunks(orig.call(this, a, b));
+    };
+  } else {
+    w = function (...args) {
+      return resolveThunks(orig.apply(this, args));
+    };
+    Object.defineProperty(w, "length", {
+      value: orig.length
+    });
+  }
+  w[$WRAPPED] = true;
+  return w;
+}
 function createHyperScript(r) {
-  function h() {
-    let args = [].slice.call(arguments),
-      e,
-      classes = [],
-      multiExpression = false;
+  function h(...rawArgs) {
+    if (rawArgs.length === 1 && Array.isArray(rawArgs[0])) return rawArgs[0];
+    const thunk = () => r.untrack(() => materialize(rawArgs));
+    thunk[$ELEMENT] = true;
+    return thunk;
+  }
+  function materialize(args) {
+    let e;
+    let classes = [];
+    let multiExpression = false;
+    args = args.slice();
     function item(l) {
+      if (l == null) return;
       const type = typeof l;
-      if (l == null) ;else if ("string" === type) {
+      if ("string" === type) {
         if (!e) parseClass(l);else e.appendChild(document.createTextNode(l));
       } else if ("number" === type || "boolean" === type || "bigint" === type || "symbol" === type || l instanceof Date || l instanceof RegExp) {
         e.appendChild(document.createTextNode(l.toString()));
@@ -36,26 +75,24 @@ function createHyperScript(r) {
         dynamic ? r.spread(e, l, !!args.length) : r.assign(e, l, !!args.length);
       } else if ("function" === type) {
         if (!e) {
-          let props,
-            next = args[0];
-          if (next == null || typeof next === "object" && !Array.isArray(next) && !(next instanceof Element)) props = args.shift();
-          props || (props = {});
-          if (args.length) {
-            props.children = args.length > 1 ? args : args[0];
-          }
-          const d = Object.getOwnPropertyDescriptors(props);
-          for (const k in d) {
-            if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
+          const first = args[0];
+          const props = first == null || typeof first === "object" && !Array.isArray(first) && !(first instanceof Element) ? args.shift() || {} : {};
+          if (args.length) props.children = args.length > 1 ? args : args[0];
+          for (const k in props) {
+            const v = props[k];
+            if (typeof v === "function") {
+              if (!v.length) r.dynamicProperty(props, k);else if (!v[$ELEMENT] && !v[$WRAPPED]) {
+                props[k] = wrapCallback(v);
+              }
+            }
           }
           e = r.createComponent(l, props);
+          while (typeof e === "function" && e[$ELEMENT]) e = e();
           args = [];
-        } else {
-          r.insert(e, l, multiExpression ? null : undefined);
-        }
+        } else if (l[$ELEMENT]) item(l());else r.insert(e, l, multiExpression ? null : undefined);
       }
     }
-    if (args.length === 1 && Array.isArray(args[0])) return args[0];
-    typeof args[0] === "string" && detectMultiExpression(args);
+    if (typeof args[0] === "string") detectMultiExpression(args);
     while (args.length) item(args.shift());
     if (e instanceof Element && classes.length) e.classList.add(...classes);
     return e;
@@ -90,6 +127,7 @@ const h = createHyperScript({
   insert,
   createComponent,
   dynamicProperty,
+  untrack,
   SVGElements,
   MathMLElements,
   Namespaces

package/jsx-runtime/types/index.d.ts

@@ -3,9 +3,5 @@ import type { JSX } from "./jsx.d.ts";
 declare function Fragment(props: {
     children: JSX.Element;
 }): JSX.Element;
-declare function jsx(type: any, props: any): (Node & {
-    [key: string]: any;
-}) | (Node & {
-    [key: string]: any;
-})[];
+declare function jsx(type: any, props: any): JSX.Element;
 export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment };

package/jsx-runtime/types/jsx-properties.d.ts

@@ -41,11 +41,8 @@ export type PropValue =
  *   narrowing
  * - other types pass through unchanged
  */
-export type WidenPropValue<V> = [V] extends [string]
-  ? string extends V
-    ? string | number
-    : V
-  : V;
+type WidenString<V> = string extends V ? string | number : V;
+export type WidenPropValue<V> = [V] extends [string] ? WidenString<V> : V;
 
 /**
  * Structurally identical → `Y`; distinct → `N`. Used by `IsReadonlyKey` to detect