@solidjs/h 2.0.0-experimental.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016-2023 Ryan Carniato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# Solid HyperScript
+
+This sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.
+
+HyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.
+
+```js
+// create an element with a title attribute
+h("button", { title: "My button" }, "Click Me")
+
+// create a component with a title prop
+h(Button, { title: "My button" }, "Click Me")
+
+// create an element with many children
+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).
+
+## Example
+
+```js
+import { render } from "solid-js/web";
+import h from "solid-js/h";
+import { createSignal } from "solid-js";
+
+function Button(props) {
+  return h("button.btn-primary", props)
+}
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  const increment = (e) => setCount(c => c + 1);
+
+  return h(Button, { type: "button", onClick: increment }, count);
+}
+
+render(Counter, document.getElementById("app"));
+```
+
+## Differences from JSX
+
+There are a few differences from Solid's JSX that are important to note. And also apply when attempting use any transformation that would compile to HyperScript.
+
+1. Reactive expression must be manually wrapped in functions to be reactive.
+
+```js
+// jsx
+<div id={props.id}>{firstName() + lastName()}</div>
+
+// hyperscript
+h("div", { id: () => props.id }, () => firstName() + lastName())
+```
+
+2. Merging spreads requires using the merge props helper to keep reactivity
+
+```js
+// jsx
+<div class={selectedClass()} {...props} />
+
+// hyperscript
+import { mergeProps } from "solid-js"
+
+h("div", mergeProps({ class: selectedClass }, props))
+```
+
+3. Events on components require explicit event in the arguments
+
+Solid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `<For>` component.
+
+```js
+// good
+h(Button, { onClick: (e) => console.log("Hi")});
+
+// bad
+h(Button, { onClick: () => console.log("Hi")})
+```
+
+4. All refs are callback form
+
+We can't do the compiled assignment trick so only the callback form is supported.
+
+```js
+let myEl;
+
+h(div, { ref: (el) => myEl = el });
+```
+
+5. There is a shorthand for static id and classes
+
+```js
+h("div#some-id.my-class")
+```
+
+6. Fragments are just arrays
+
+```js
+[h("span", "1"), h("span", "2")]
+```

package/dist/h.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+var web = require('@solidjs/web');
+
+const $ELEMENT = Symbol("hyper-element");
+function createHyperScript(r) {
+  function h() {
+    let args = [].slice.call(arguments),
+      e,
+      classes = [],
+      multiExpression = false;
+    while (Array.isArray(args[0])) args = args[0];
+    if (args[0][$ELEMENT]) args.unshift(h.Fragment);
+    typeof args[0] === "string" && detectMultiExpression(args);
+    const ret = () => {
+      while (args.length) item(args.shift());
+      if (e instanceof Element && classes.length) e.classList.add(...classes);
+      return e;
+    };
+    ret[$ELEMENT] = true;
+    return ret;
+    function item(l) {
+      const type = typeof l;
+      if (l == null) ;else 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()));
+      } else if (Array.isArray(l)) {
+        for (let i = 0; i < l.length; i++) item(l[i]);
+      } else if (l instanceof Element) {
+        r.insert(e, l, multiExpression ? null : undefined);
+      } else if ("object" === type) {
+        let dynamic = false;
+        const d = Object.getOwnPropertyDescriptors(l);
+        for (const k in d) {
+          if (k === "class" && classes.length !== 0) {
+            const fixedClasses = classes.join(" "),
+              value = typeof d["class"].value === "function" ? () => fixedClasses + " " + d["class"].value() : fixedClasses + " " + l["class"];
+            Object.defineProperty(l, "class", {
+              ...d[k],
+              value
+            });
+            classes = [];
+          }
+          if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
+            r.dynamicProperty(l, k);
+            dynamic = true;
+          } else if (d[k].get) dynamic = true;
+        }
+        dynamic ? r.spread(e, l, e instanceof SVGElement, !!args.length) : r.assign(e, l, e instanceof SVGElement, !!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 (Array.isArray(d[k].value)) {
+              const list = d[k].value;
+              props[k] = () => {
+                for (let i = 0; i < list.length; i++) {
+                  while (list[i][$ELEMENT]) list[i] = list[i]();
+                }
+                return list;
+              };
+              r.dynamicProperty(props, k);
+            } else if (typeof d[k].value === "function" && !d[k].value.length) r.dynamicProperty(props, k);
+          }
+          e = r.createComponent(l, props);
+          args = [];
+        } else {
+          while (l[$ELEMENT]) l = l();
+          r.insert(e, l, multiExpression ? null : undefined);
+        }
+      }
+    }
+    function parseClass(string) {
+      const m = string.split(/([\.#]?[^\s#.]+)/);
+      if (/^\.|#/.test(m[1])) e = document.createElement("div");
+      for (let i = 0; i < m.length; i++) {
+        const v = m[i],
+          s = v.substring(1, v.length);
+        if (!v) continue;
+        if (!e) e = r.SVGElements.has(v) ? document.createElementNS("http://www.w3.org/2000/svg", v) : document.createElement(v);else if (v[0] === ".") classes.push(s);else if (v[0] === "#") e.setAttribute("id", s);
+      }
+    }
+    function detectMultiExpression(list) {
+      for (let i = 1; i < list.length; i++) {
+        if (typeof list[i] === "function") {
+          multiExpression = true;
+          return;
+        } else if (Array.isArray(list[i])) {
+          detectMultiExpression(list[i]);
+        }
+      }
+    }
+  }
+  h.Fragment = props => props.children;
+  return h;
+}
+
+const h = createHyperScript({
+  spread: web.spread,
+  assign: web.assign,
+  insert: web.insert,
+  createComponent: web.createComponent,
+  dynamicProperty: web.dynamicProperty,
+  SVGElements: web.SVGElements
+});
+
+module.exports = h;

package/dist/h.js

@@ -0,0 +1,144 @@
+import {
+  spread,
+  assign,
+  insert,
+  createComponent,
+  dynamicProperty,
+  SVGElements
+} from "@solidjs/web";
+
+const $ELEMENT = Symbol("hyper-element");
+function createHyperScript(r) {
+  function h() {
+    let args = [].slice.call(arguments),
+      e,
+      classes = [],
+      multiExpression = false;
+    while (Array.isArray(args[0])) args = args[0];
+    if (args[0][$ELEMENT]) args.unshift(h.Fragment);
+    typeof args[0] === "string" && detectMultiExpression(args);
+    const ret = () => {
+      while (args.length) item(args.shift());
+      if (e instanceof Element && classes.length) e.classList.add(...classes);
+      return e;
+    };
+    ret[$ELEMENT] = true;
+    return ret;
+    function item(l) {
+      const type = typeof l;
+      if (l == null);
+      else 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()));
+      } else if (Array.isArray(l)) {
+        for (let i = 0; i < l.length; i++) item(l[i]);
+      } else if (l instanceof Element) {
+        r.insert(e, l, multiExpression ? null : undefined);
+      } else if ("object" === type) {
+        let dynamic = false;
+        const d = Object.getOwnPropertyDescriptors(l);
+        for (const k in d) {
+          if (k === "class" && classes.length !== 0) {
+            const fixedClasses = classes.join(" "),
+              value =
+                typeof d["class"].value === "function"
+                  ? () => fixedClasses + " " + d["class"].value()
+                  : fixedClasses + " " + l["class"];
+            Object.defineProperty(l, "class", {
+              ...d[k],
+              value
+            });
+            classes = [];
+          }
+          if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
+            r.dynamicProperty(l, k);
+            dynamic = true;
+          } else if (d[k].get) dynamic = true;
+        }
+        dynamic
+          ? r.spread(e, l, e instanceof SVGElement, !!args.length)
+          : r.assign(e, l, e instanceof SVGElement, !!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 (Array.isArray(d[k].value)) {
+              const list = d[k].value;
+              props[k] = () => {
+                for (let i = 0; i < list.length; i++) {
+                  while (list[i][$ELEMENT]) list[i] = list[i]();
+                }
+                return list;
+              };
+              r.dynamicProperty(props, k);
+            } else if (typeof d[k].value === "function" && !d[k].value.length)
+              r.dynamicProperty(props, k);
+          }
+          e = r.createComponent(l, props);
+          args = [];
+        } else {
+          while (l[$ELEMENT]) l = l();
+          r.insert(e, l, multiExpression ? null : undefined);
+        }
+      }
+    }
+    function parseClass(string) {
+      const m = string.split(/([\.#]?[^\s#.]+)/);
+      if (/^\.|#/.test(m[1])) e = document.createElement("div");
+      for (let i = 0; i < m.length; i++) {
+        const v = m[i],
+          s = v.substring(1, v.length);
+        if (!v) continue;
+        if (!e)
+          e = r.SVGElements.has(v)
+            ? document.createElementNS("http://www.w3.org/2000/svg", v)
+            : document.createElement(v);
+        else if (v[0] === ".") classes.push(s);
+        else if (v[0] === "#") e.setAttribute("id", s);
+      }
+    }
+    function detectMultiExpression(list) {
+      for (let i = 1; i < list.length; i++) {
+        if (typeof list[i] === "function") {
+          multiExpression = true;
+          return;
+        } else if (Array.isArray(list[i])) {
+          detectMultiExpression(list[i]);
+        }
+      }
+    }
+  }
+  h.Fragment = props => props.children;
+  return h;
+}
+
+const h = createHyperScript({
+  spread,
+  assign,
+  insert,
+  createComponent,
+  dynamicProperty,
+  SVGElements
+});
+
+export { h as default };

package/jsx-dev-runtime/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@solidjs/h/jsx-dev-runtime",
+  "main": "../jsx-runtime/dist/jsx.cjs",
+  "module": "../jsx-runtime/dist/jsx.js",
+  "types": "../jsx-runtime/types/index.d.ts",
+  "type": "module",
+  "sideEffects": false
+}

package/jsx-runtime/dist/jsx.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var h = require('@solidjs/h');
+
+function Fragment(props) {
+  return props.children;
+}
+function jsx(type, props) {
+  return h(type, props);
+}
+
+exports.Fragment = Fragment;
+exports.jsx = jsx;
+exports.jsxDEV = jsx;
+exports.jsxs = jsx;

package/jsx-runtime/dist/jsx.js

@@ -0,0 +1,10 @@
+import h from "@solidjs/h";
+
+function Fragment(props) {
+  return props.children;
+}
+function jsx(type, props) {
+  return h(type, props);
+}
+
+export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs };

package/jsx-runtime/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@solidjs/h/jsx-runtime",
+  "main": "./dist/jsx.cjs",
+  "module": "./dist/jsx.js",
+  "types": "./types/index.d.ts",
+  "type": "module",
+  "sideEffects": false
+}

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

@@ -0,0 +1,14 @@
+export type { JSX } from "./jsx.d.ts";
+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;
+    })[];
+export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment };