solid-js 1.1.6 → 1.2.1

package/html/README.md

@@ -0,0 +1,84 @@
+# Solid Tagged Template Literals
+
+This sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.
+
+`html` uses `${}` to escape into JavaScript expressions. Components are closed with `<//>`
+
+```js
+// create an element with a title attribute
+html`<button title="My button">Click Me</button>`
+
+// create a component with a title prop
+html`<${Button} title="My button">Click me<//>`
+
+// create an element with dynamic attribute and spread
+html`<div title=${() => selectedClass()} ...${props} />`
+```
+
+Using `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakebable, and cannot leverage expression 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 html from "solid-js/html";
+import { createSignal } from "solid-js";
+
+function Button(props) {
+  return html`<button class="btn-primary" ...${props} />`;
+}
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  const increment = (e) => setCount((c) => c + 1);
+
+  return html`<${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.
+
+1. Reactive expression must be manually wrapped in functions to be reactive.
+
+```js
+// jsx
+<div id={props.id}>{firstName() + lastName()}</div>
+
+// hyperscript
+html`<div id=${() => props.id}>${() => firstName() + lastName()}</div>`
+```
+
+2. Events on components require explicit event in the arguments
+
+Solid's Tagged Template Literals 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
+html`<${Button} onClick=${(e) => console.log("Hi")} />`;
+
+// bad
+html`<${Button} onClick=${() => console.log("Hi")} />`;
+```
+
+4. All refs are callback form
+
+We can't do the compiled assigment trick so only the callback form is supported.
+
+```js
+let myEl;
+html`<div ref=${(el) => myEl = el} />`;
+```
+
+5. There can be multiple top level elements
+
+No need for fragments just:
+```js
+html`
+  <div>1</div>
+  <div>2</div>
+`
+```

package/html/dist/html.cjs

@@ -213,7 +213,7 @@ function createHTML(r, {
       markup = markup + statics[i] + "<!--#-->";
     }
     markup = markup + statics[i];
-    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
+    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(/\.\.\.(<!--#-->)/g, "###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
     const [html, code] = parseTemplate(parse(markup)),
           templates = [];
     for (let i = 0; i < html.length; i++) {
@@ -323,16 +323,29 @@ function createHTML(r, {
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
   }
+  function processComponentProps(propGroups) {
+    let result = [];
+    for (const props of propGroups) {
+      if (Array.isArray(props)) {
+        if (!props.length) continue;
+        result.push(`r.wrapProps({${props.join(",") || ""}})`);
+      } else result.push(props);
+    }
+    return result.length > 1 ? `r.mergeProps(${result.join(",")})` : result[0];
+  }
   function processComponent(node, options) {
+    let props = [];
     const keys = Object.keys(node.attrs),
-          props = [],
+          propGroups = [props],
           componentIdentifier = options.counter++;
     for (let i = 0; i < keys.length; i++) {
       const name = keys[i],
             value = node.attrs[name];
-      if (value === "###") {
-        let count = options.counter++;
-        props.push(`${name}: exprs[${count}]`);
+      if (name === "###") {
+        propGroups.push(`exprs[${options.counter++}]`);
+        propGroups.push(props = []);
+      } else if (value === "###") {
+        props.push(`${name}: exprs[${options.counter++}]`);
       } else props.push(`${name}: "${value}"`);
     }
     if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
@@ -357,7 +370,7 @@ function createHTML(r, {
       tag = `_$el${uuid++}`;
       options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
     }
-    if (options.parent) options.exprs.push(`r.insert(${options.parent}, r.createComponent(exprs[${componentIdentifier}], r.wrapProps({${props.join(", ") || ""}}))${tag ? `, ${tag}` : ""})`);else options.exprs.push(`${options.fragment ? "" : "return "}r.createComponent(exprs[${componentIdentifier}], r.wrapProps({${props.join(", ") || ""}}))`);
+    if (options.parent) options.exprs.push(`r.insert(${options.parent}, r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})${tag ? `, ${tag}` : ""})`);else options.exprs.push(`${options.fragment ? "" : "return "}r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})`);
     options.path = tag;
     options.first = false;
   }
@@ -410,6 +423,9 @@ function createHTML(r, {
         if (value === "###") {
           delete node.attrs[name];
           parseAttribute(tag, name, isSVG, isCE, options);
+        } else if (name === "###") {
+          delete node.attrs[name];
+          options.exprs.push(`r.spread(${tag},exprs[${options.counter++}],${isSVG},${!!node.children.length})`);
         }
       }
       options.path = tag;
@@ -470,9 +486,11 @@ var index = createHTML({
   effect: web.effect,
   style: web.style,
   insert: web.insert,
+  spread: web.spread,
   createComponent: web.createComponent,
   delegateEvents: web.delegateEvents,
   classList: web.classList,
+  mergeProps: web.mergeProps,
   dynamicProperty: web.dynamicProperty,
   setAttribute: web.setAttribute,
   setAttributeNS: web.setAttributeNS,

package/html/dist/html.js

@@ -1,4 +1,4 @@
-import { effect, style, insert, createComponent, delegateEvents, classList, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, PropAliases, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
+import { effect, style, insert, spread, createComponent, delegateEvents, classList, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, PropAliases, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
 
 var attrRE, lookup, parseTag, pushCommentNode, pushTextNode, tagRE;
 tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
@@ -211,7 +211,7 @@ function createHTML(r, {
       markup = markup + statics[i] + "<!--#-->";
     }
     markup = markup + statics[i];
-    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
+    markup = markup.replace(selfClosing, fullClosing).replace(/<(<!--#-->)/g, "<###").replace(/\.\.\.(<!--#-->)/g, "###").replace(attrSeeker, attrReplacer).replace(/>\n+\s*/g, ">").replace(/\n+\s*</g, "<").replace(/\s+</g, " <").replace(/>\s+/g, "> ");
     const [html, code] = parseTemplate(parse(markup)),
           templates = [];
     for (let i = 0; i < html.length; i++) {
@@ -321,16 +321,29 @@ function createHTML(r, {
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
   }
+  function processComponentProps(propGroups) {
+    let result = [];
+    for (const props of propGroups) {
+      if (Array.isArray(props)) {
+        if (!props.length) continue;
+        result.push(`r.wrapProps({${props.join(",") || ""}})`);
+      } else result.push(props);
+    }
+    return result.length > 1 ? `r.mergeProps(${result.join(",")})` : result[0];
+  }
   function processComponent(node, options) {
+    let props = [];
     const keys = Object.keys(node.attrs),
-          props = [],
+          propGroups = [props],
           componentIdentifier = options.counter++;
     for (let i = 0; i < keys.length; i++) {
       const name = keys[i],
             value = node.attrs[name];
-      if (value === "###") {
-        let count = options.counter++;
-        props.push(`${name}: exprs[${count}]`);
+      if (name === "###") {
+        propGroups.push(`exprs[${options.counter++}]`);
+        propGroups.push(props = []);
+      } else if (value === "###") {
+        props.push(`${name}: exprs[${options.counter++}]`);
       } else props.push(`${name}: "${value}"`);
     }
     if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
@@ -355,7 +368,7 @@ function createHTML(r, {
       tag = `_$el${uuid++}`;
       options.decl.push(`${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
     }
-    if (options.parent) options.exprs.push(`r.insert(${options.parent}, r.createComponent(exprs[${componentIdentifier}], r.wrapProps({${props.join(", ") || ""}}))${tag ? `, ${tag}` : ""})`);else options.exprs.push(`${options.fragment ? "" : "return "}r.createComponent(exprs[${componentIdentifier}], r.wrapProps({${props.join(", ") || ""}}))`);
+    if (options.parent) options.exprs.push(`r.insert(${options.parent}, r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})${tag ? `, ${tag}` : ""})`);else options.exprs.push(`${options.fragment ? "" : "return "}r.createComponent(exprs[${componentIdentifier}],${processComponentProps(propGroups)})`);
     options.path = tag;
     options.first = false;
   }
@@ -408,6 +421,9 @@ function createHTML(r, {
         if (value === "###") {
           delete node.attrs[name];
           parseAttribute(tag, name, isSVG, isCE, options);
+        } else if (name === "###") {
+          delete node.attrs[name];
+          options.exprs.push(`r.spread(${tag},exprs[${options.counter++}],${isSVG},${!!node.children.length})`);
         }
       }
       options.path = tag;
@@ -468,9 +484,11 @@ var index = createHTML({
   effect,
   style,
   insert,
+  spread,
   createComponent,
   delegateEvents,
   classList,
+  mergeProps,
   dynamicProperty,
   setAttribute,
   setAttributeNS,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.1.6",
+  "version": "1.2.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://github.com/solidjs/solid#readme",
@@ -29,6 +29,8 @@
     "h/types",
     "html/dist",
     "html/types",
+    "universal/dist",
+    "universal/types",
     "types",
     "jsx-runtime.d.ts"
   ],
@@ -84,6 +86,15 @@
       "require": "./web/dist/web.cjs"
     },
     "./web/dist/*": "./web/dist/*",
+    "./universal": {
+      "development": {
+        "import": "./universal/dist/dev.js",
+        "require": "./universal/dist/dev.cjs"
+      },
+      "import": "./universal/dist/universal.js",
+      "require": "./universal/dist/universal.cjs"
+    },
+    "./universal/dist/*": "./universal/dist/*",
     "./h": {
       "import": "./h/dist/h.js",
       "require": "./h/dist/h.cjs"
@@ -106,6 +117,7 @@
     "build:types-web": "tsc --project ./web/tsconfig.json && tsconfig-replace-paths --project ./web/tsconfig.types.json",
     "build:types-html": "tsc --project ./html/tsconfig.json",
     "build:types-h": "tsc --project ./h/tsconfig.json",
+    "build:types-universal": "tsc --project ./universal/tsconfig.json",
     "bench": "node --allow-natives-syntax bench/bench.cjs",
     "test": "jest && npm run test:types",
     "test:coverage": "jest --coverage && npm run test:types",
@@ -120,5 +132,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "da70c25d88966fa3a11c0e60f1feb7d0dc2041c8"
+  "gitHead": "8bca8fa83837ac7406bc76813fedbc72bbe11a01"
 }

package/store/README.md

@@ -0,0 +1,23 @@
+# Solid Store
+
+This submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.
+
+This also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutationa and data diffing.
+
+For full documentation, check out the [website](https://www.solidjs.com/docs/latest/api).
+
+## Example
+
+```js
+import { createStore } from "solid-js/store";
+
+const [store, setStore] = createStore({
+  user: {
+    firstName: "John",
+    lastName: "Smith"
+  }
+});
+
+// update store.user.firstName
+setStore("user", "firstName", "Will");
+```

package/types/jsx.d.ts

@@ -11,7 +11,7 @@ export namespace JSX {
     | Node
     | ArrayElement
     | FunctionElement
-    | string
+    | (string & {})
     | number
     | boolean
     | null
@@ -1674,6 +1674,7 @@ export namespace JSX {
     | "unsafe-url";
   type HTMLIframeSandbox =
     | "allow-downloads-without-user-activation"
+    | "allow-downloads"
     | "allow-forms"
     | "allow-modals"
     | "allow-orientation-lock"
@@ -2116,7 +2117,7 @@ export namespace JSX {
     height?: number | string;
     name?: string;
     referrerpolicy?: HTMLReferrerPolicy;
-    sandbox?: HTMLIframeSandbox;
+    sandbox?: HTMLIframeSandbox | string;
     src?: string;
     srcdoc?: string;
     width?: number | string;
@@ -2873,7 +2874,8 @@ export namespace JSX {
     extends FilterPrimitiveElementSVGAttributes<T>,
       ExternalResourceSVGAttributes,
       StylableSVGAttributes {
-    preserveAspectRatio: SVGPreserveAspectRatio;
+    preserveAspectRatio?: SVGPreserveAspectRatio;
+    href?: string;
   }
   interface FeMergeSVGAttributes<T>
     extends FilterPrimitiveElementSVGAttributes<T>,
@@ -2976,6 +2978,7 @@ export namespace JSX {
     width?: number | string;
     height?: number | string;
     preserveAspectRatio?: ImagePreserveAspectRatio;
+    href?: string;
   }
   interface LineSVGAttributes<T>
     extends GraphicsElementSVGAttributes<T>,

package/types/reactive/signal.d.ts

@@ -248,7 +248,7 @@ export declare function createDeferred<T>(source: Accessor<T>, options?: {
 /**
  * Creates a conditional signal that only notifies subscribers when entering or exiting their key matching the value
  * ```typescript
- * export function createRenderEffect<T, U>(
+ * export function createSelector<T, U>(
  *   source: () => T
  *   fn: (a: U, b: T) => boolean,
  *   options?: { name?: string }
@@ -267,7 +267,7 @@ export declare function createDeferred<T>(source: Accessor<T>, options?: {
  *
  * This makes the operation O(2) instead of O(n).
  *
- * @description https://www.solidjs.com/docs/latest/api#createrendereffect
+ * @description https://www.solidjs.com/docs/latest/api#createselector
  */
 export declare function createSelector<T, U>(source: Accessor<T>, fn?: (a: U, b: T) => boolean, options?: {
     name?: string;

package/types/render/component.d.ts

@@ -15,7 +15,7 @@ export declare function createComponent<T>(Comp: (props: T) => JSX.Element, prop
 declare type BoxedTupleTypes<T extends any[]> = {
     [P in keyof T]: [T[P]];
 }[Exclude<keyof T, keyof any[]>];
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
+declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 declare type UnboxIntersection<T> = T extends {
     0: infer U;
 } ? U : never;

package/universal/README.md

@@ -0,0 +1,102 @@
+# Solid Universal
+
+This contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.
+
+## Example
+
+To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:
+```json
+{
+  "presets": [
+    [
+      "babel-preset-solid",
+      {
+        "moduleName": "solid-custom-dom",
+        "generate": "universal"
+      }
+    ]
+  ]
+}
+```
+
+To create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.
+
+```js
+// example custom dom renderer
+import { createRenderer } from "solid-js/universal";
+
+const PROPERTIES = new Set(["className", "textContent"]);
+
+export const {
+  render,
+  effect,
+  memo,
+  createComponent,
+  createElement,
+  createTextNode,
+  insertNode,
+  insert,
+  spread,
+  setProp,
+  mergeProps
+} = createRenderer({
+  createElement(string) {
+    return document.createElement(string);
+  },
+  createTextNode(value) {
+    return document.createTextNode(value);
+  },
+  replaceText(textNode, value) {
+    textNode.data = value;
+  },
+  setProperty(node, name, value) {
+    if (name === "style") Object.assign(node.style, value);
+    else if (name.startsWith("on")) node[name.toLowerCase()] = value;
+    else if (PROPERTIES.has(name)) node[name] = value;
+    else node.setAttribute(name, value);
+  },
+  insertNode(parent, node, anchor) {
+    parent.insertBefore(node, anchor);
+  },
+  isTextNode(node) {
+    return node.type === 3;
+  },
+  removeNode(parent, node) {
+    parent.removeChild(node);
+  },
+  getParentNode(node) {
+    return node.parentNode;
+  },
+  getFirstChild(node) {
+    return node.firstChild;
+  },
+  getNextSibling(node) {
+    return node.nextSibling;
+  }
+});
+
+// Forward Solid control flow
+export {
+  For,
+  Show,
+  Suspense,
+  SuspenseList,
+  Switch,
+  Match,
+  Index,
+  ErrorBoundary
+} from "solid-js";
+```
+
+Then to consume:
+```js
+import { render } from "solid-custom-dom";
+
+function App() {
+  // the skies the limits
+}
+
+render(() => <App />, mountNode)
+```
+
+> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.