@solidjs/h 2.0.0-beta.8 → 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-cjs/index.d.cts

@@ -3,9 +3,5 @@ import type { JSX } from "./jsx.d.cts";
 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/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@solidjs/h",
-  "description": "A standard (less-optimal) JSX factory for Solid",
-  "version": "2.0.0-beta.8",
+  "description": "Hyperscript / h() factory for Solid — write components without compiled JSX.",
+  "version": "2.0.0-beta.9",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/solidjs/solid-h"
+    "url": "git+https://github.com/solidjs/solid.git",
+    "directory": "packages/solid-h"
   },
   "publishConfig": {
     "access": "public"
@@ -62,10 +63,11 @@
     "./types/*": "./types/*"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-beta.8"
+    "@solidjs/web": "^2.0.0-beta.9"
   },
   "devDependencies": {
-    "@solidjs/web": "2.0.0-beta.8"
+    "solid-js": "2.0.0-beta.9",
+    "@solidjs/web": "2.0.0-beta.9"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",
@@ -77,6 +79,7 @@
     "types:h": "tsc --project ./tsconfig.json && ncp ../../node_modules/hyper-dom-expressions/types/index.d.ts ./types/hyperscript.d.ts",
     "types:jsx": "rimraf ./jsx-runtime/types && tsc --project ./jsx-runtime/tsconfig.json && ncp ../../node_modules/dom-expressions/src/jsx-h.d.ts ./jsx-runtime/types/jsx.d.ts && ncp ../../node_modules/dom-expressions/src/jsx-properties.d.ts ./jsx-runtime/types/jsx-properties.d.ts",
     "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs ./jsx-runtime/types ./jsx-runtime/types-cjs",
-    "link": "symlink-dir . node_modules/@solidjs/h"
+    "link": "symlink-dir . node_modules/@solidjs/h",
+    "test": "vitest run"
   }
 }

package/types/hyperscript.d.ts

@@ -5,6 +5,7 @@ interface Runtime {
     assign(node: Element, props: any, skipChildren?: Boolean): void;
     createComponent(Comp: (props: any) => any, props: any): any;
     dynamicProperty(props: any, key: string): any;
+    untrack<T>(fn: () => T): T;
     SVGElements: Set<string>;
     MathMLElements: Set<string>;
     Namespaces: Record<string, string>;
@@ -12,11 +13,16 @@ interface Runtime {
 type ExpandableNode = Node & {
     [key: string]: any;
 };
+declare const $ELEMENT: unique symbol;
+export type HyperElement = {
+    (): ExpandableNode | ExpandableNode[];
+    [$ELEMENT]: true;
+};
 export type HyperScript = {
-    (...args: any[]): ExpandableNode | ExpandableNode[];
+    (...args: any[]): HyperElement | ExpandableNode[];
     Fragment: (props: {
-        children: ExpandableNode | ExpandableNode[];
-    }) => ExpandableNode | ExpandableNode[];
+        children: any;
+    }) => any;
 };
 export declare function createHyperScript(r: Runtime): HyperScript;
 export {};

package/types-cjs/hyperscript.d.cts

@@ -5,6 +5,7 @@ interface Runtime {
     assign(node: Element, props: any, skipChildren?: Boolean): void;
     createComponent(Comp: (props: any) => any, props: any): any;
     dynamicProperty(props: any, key: string): any;
+    untrack<T>(fn: () => T): T;
     SVGElements: Set<string>;
     MathMLElements: Set<string>;
     Namespaces: Record<string, string>;
@@ -12,11 +13,16 @@ interface Runtime {
 type ExpandableNode = Node & {
     [key: string]: any;
 };
+declare const $ELEMENT: unique symbol;
+export type HyperElement = {
+    (): ExpandableNode | ExpandableNode[];
+    [$ELEMENT]: true;
+};
 export type HyperScript = {
-    (...args: any[]): ExpandableNode | ExpandableNode[];
+    (...args: any[]): HyperElement | ExpandableNode[];
     Fragment: (props: {
-        children: ExpandableNode | ExpandableNode[];
-    }) => ExpandableNode | ExpandableNode[];
+        children: any;
+    }) => any;
 };
 export declare function createHyperScript(r: Runtime): HyperScript;
 export {};