solid-js 1.1.6-beta.1 → 1.2.0

package/types/reactive/signal.d.ts

@@ -1,7 +1,7 @@
 import { requestCallback } from "./scheduler";
 import type { JSX } from "../jsx";
 export declare type Accessor<T> = () => T;
-export declare type Setter<T> = undefined extends T ? <U extends T>(v?: (U extends Function ? never : U) | ((prev?: U) => U)) => U : <U extends T>(v: (U extends Function ? never : U) | ((prev: U) => U)) => U;
+export declare type Setter<T> = undefined extends T ? <U extends T>(v?: (U extends Function ? never : U) | ((prev?: T) => U)) => U : <U extends T>(v: (U extends Function ? never : U) | ((prev: T) => U)) => U;
 export declare const equalFn: <T>(a: T, b: T) => boolean;
 export declare const $PROXY: unique symbol;
 export declare const NOTPENDING: {};
@@ -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.

package/universal/dist/dev.cjs

@@ -0,0 +1,258 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var solidJs = require('solid-js');
+
+function memo(fn, equals) {
+  return solidJs.createMemo(fn, undefined, !equals ? {
+    equals
+  } : undefined);
+}
+
+function createRenderer$1({
+  createElement,
+  createTextNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    if (marker !== undefined && !initial) initial = [];
+    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
+  }
+  function insertExpression(parent, value, current, marker, unwrapArray) {
+    while (typeof current === "function") current = current();
+    if (value === current) return current;
+    const t = typeof value,
+          multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      if (t === "number") value = value.toString();
+      if (multi) {
+        let node = current[0];
+        if (node && isTextNode(node)) {
+          replaceText(node, value);
+        } else node = createTextNode(value);
+        current = cleanChildren(parent, current, marker, node);
+      } else {
+        if (current !== "" && typeof current === "string") {
+          replaceText(getFirstChild(parent), current = value);
+        } else {
+          cleanChildren(parent, current, marker, createTextNode(value));
+          current = value;
+        }
+      }
+    } else if (value == null || t === "boolean") {
+      current = cleanChildren(parent, current, marker);
+    } else if (t === "function") {
+      solidJs.createRenderEffect(() => {
+        let v = value();
+        while (typeof v === "function") v = v();
+        current = insertExpression(parent, v, current, marker);
+      });
+      return () => current;
+    } else if (Array.isArray(value)) {
+      const array = [];
+      if (normalizeIncomingArray(array, value, unwrapArray)) {
+        solidJs.createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+        return () => current;
+      }
+      if (array.length === 0) {
+        const replacement = cleanChildren(parent, current, marker);
+        if (multi) return current = replacement;
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, array, marker);
+          } else reconcileArrays(parent, current, array);
+        } else if (current == null || current === "") {
+          appendNodes(parent, array);
+        } else {
+          reconcileArrays(parent, multi && current || [getFirstChild(parent)], array);
+        }
+      }
+      current = array;
+    } else {
+      if (Array.isArray(current)) {
+        if (multi) return current = cleanChildren(parent, current, marker, value);
+        cleanChildren(parent, current, null, value);
+      } else if (current == null || current === "" || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else replaceNode(parent, value, getFirstChild(parent));
+      current = value;
+    }
+    return current;
+  }
+  function normalizeIncomingArray(normalized, array, unwrap) {
+    let dynamic = false;
+    for (let i = 0, len = array.length; i < len; i++) {
+      let item = array[i],
+          t;
+      if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+        dynamic = normalizeIncomingArray(normalized, item) || dynamic;
+      } else if ((t = typeof item) === "string" || t === "number") {
+        normalized.push(createTextNode(item));
+      } else if (t === "function") {
+        if (unwrap) {
+          while (typeof item === "function") item = item();
+          dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item]) || dynamic;
+        } else {
+          normalized.push(item);
+          dynamic = true;
+        }
+      } else normalized.push(item);
+    }
+    return dynamic;
+  }
+  function reconcileArrays(parentNode, a, b) {
+    let bLength = b.length,
+        aEnd = a.length,
+        bEnd = bLength,
+        aStart = 0,
+        bStart = 0,
+        after = getNextSibling(a[aEnd - 1]),
+        map = null;
+    while (aStart < aEnd || bStart < bEnd) {
+      if (a[aStart] === b[bStart]) {
+        aStart++;
+        bStart++;
+        continue;
+      }
+      while (a[aEnd - 1] === b[bEnd - 1]) {
+        aEnd--;
+        bEnd--;
+      }
+      if (aEnd === aStart) {
+        const node = bEnd < bLength ? bStart ? getNextSibling(b[bStart - 1]) : b[bEnd - bStart] : after;
+        while (bStart < bEnd) insertNode(parentNode, b[bStart++], node);
+      } else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          if (!map || !map.has(a[aStart])) removeNode(parentNode, a[aStart]);
+          aStart++;
+        }
+      } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+        const node = getNextSibling(a[--aEnd]);
+        insertNode(parentNode, b[bStart++], getNextSibling(a[aStart++]));
+        insertNode(parentNode, b[--bEnd], node);
+        a[aEnd] = b[bEnd];
+      } else {
+        if (!map) {
+          map = new Map();
+          let i = bStart;
+          while (i < bEnd) map.set(b[i], i++);
+        }
+        const index = map.get(a[aStart]);
+        if (index != null) {
+          if (bStart < index && index < bEnd) {
+            let i = aStart,
+                sequence = 1,
+                t;
+            while (++i < aEnd && i < bEnd) {
+              if ((t = map.get(a[i])) == null || t !== index + sequence) break;
+              sequence++;
+            }
+            if (sequence > index - bStart) {
+              const node = a[aStart];
+              while (bStart < index) insertNode(parentNode, b[bStart++], node);
+            } else replaceNode(parentNode, b[bStart++], a[aStart++]);
+          } else aStart++;
+        } else removeNode(parentNode, a[aStart++]);
+      }
+    }
+  }
+  function cleanChildren(parent, current, marker, replacement) {
+    if (marker === undefined) {
+      let removed;
+      while (removed = getFirstChild(parent)) removeNode(parent, removed);
+      replacement && insertNode(parent, replacement);
+      return "";
+    }
+    const node = replacement || createTextNode("");
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1; i >= 0; i--) {
+        const el = current[i];
+        if (node !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (!inserted && !i) isParent ? replaceNode(parent, node, el) : insertNode(parent, node, marker);else isParent && removeNode(parent, el);
+        } else inserted = true;
+      }
+    } else insertNode(parent, node, marker);
+    return [node];
+  }
+  function appendNodes(parent, array, marker) {
+    for (let i = 0, len = array.length; i < len; i++) insertNode(parent, array[i], marker);
+  }
+  function replaceNode(parent, newNode, oldNode) {
+    insertNode(parent, newNode, oldNode);
+    removeNode(parent, oldNode);
+  }
+  function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    if (!skipChildren && "children" in props) {
+      solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+    }
+    solidJs.createRenderEffect(() => {
+      for (const prop in props) {
+        if (prop === "children") continue;
+        const value = props[prop];
+        if (value === prevProps[prop]) continue;
+        if (prop === "ref") value(node);else {
+          setProperty(node, prop, value, prevProps[prop]);
+          prevProps[prop] = value;
+        }
+      }
+    });
+    return prevProps;
+  }
+  return {
+    render(code, element) {
+      let disposer;
+      solidJs.createRoot(dispose => {
+        disposer = dispose;
+        insert(element, code());
+      });
+      return disposer;
+    },
+    insert,
+    spread(node, accessor, skipChildren) {
+      if (typeof accessor === "function") {
+        solidJs.createRenderEffect(current => spreadExpression(node, accessor(), current, skipChildren));
+      } else spreadExpression(node, accessor, undefined, skipChildren);
+    },
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps,
+    effect: solidJs.createRenderEffect,
+    memo,
+    createComponent: solidJs.createComponent
+  };
+}
+function mergeProps(...sources) {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    const descriptors = Object.getOwnPropertyDescriptors(source);
+    Object.defineProperties(target, descriptors);
+  }
+  return target;
+}
+
+function createRenderer(options) {
+  const renderer = createRenderer$1(options);
+  renderer.mergeProps = solidJs.mergeProps;
+  return renderer;
+}
+
+exports.createRenderer = createRenderer;

package/universal/dist/dev.js

@@ -0,0 +1,254 @@
+import { createMemo, createRoot, createRenderEffect, createComponent, mergeProps as mergeProps$1 } from 'solid-js';
+
+function memo(fn, equals) {
+  return createMemo(fn, undefined, !equals ? {
+    equals
+  } : undefined);
+}
+
+function createRenderer$1({
+  createElement,
+  createTextNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    if (marker !== undefined && !initial) initial = [];
+    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
+  }
+  function insertExpression(parent, value, current, marker, unwrapArray) {
+    while (typeof current === "function") current = current();
+    if (value === current) return current;
+    const t = typeof value,
+          multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      if (t === "number") value = value.toString();
+      if (multi) {
+        let node = current[0];
+        if (node && isTextNode(node)) {
+          replaceText(node, value);
+        } else node = createTextNode(value);
+        current = cleanChildren(parent, current, marker, node);
+      } else {
+        if (current !== "" && typeof current === "string") {
+          replaceText(getFirstChild(parent), current = value);
+        } else {
+          cleanChildren(parent, current, marker, createTextNode(value));
+          current = value;
+        }
+      }
+    } else if (value == null || t === "boolean") {
+      current = cleanChildren(parent, current, marker);
+    } else if (t === "function") {
+      createRenderEffect(() => {
+        let v = value();
+        while (typeof v === "function") v = v();
+        current = insertExpression(parent, v, current, marker);
+      });
+      return () => current;
+    } else if (Array.isArray(value)) {
+      const array = [];
+      if (normalizeIncomingArray(array, value, unwrapArray)) {
+        createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+        return () => current;
+      }
+      if (array.length === 0) {
+        const replacement = cleanChildren(parent, current, marker);
+        if (multi) return current = replacement;
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, array, marker);
+          } else reconcileArrays(parent, current, array);
+        } else if (current == null || current === "") {
+          appendNodes(parent, array);
+        } else {
+          reconcileArrays(parent, multi && current || [getFirstChild(parent)], array);
+        }
+      }
+      current = array;
+    } else {
+      if (Array.isArray(current)) {
+        if (multi) return current = cleanChildren(parent, current, marker, value);
+        cleanChildren(parent, current, null, value);
+      } else if (current == null || current === "" || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else replaceNode(parent, value, getFirstChild(parent));
+      current = value;
+    }
+    return current;
+  }
+  function normalizeIncomingArray(normalized, array, unwrap) {
+    let dynamic = false;
+    for (let i = 0, len = array.length; i < len; i++) {
+      let item = array[i],
+          t;
+      if (item == null || item === true || item === false) ; else if (Array.isArray(item)) {
+        dynamic = normalizeIncomingArray(normalized, item) || dynamic;
+      } else if ((t = typeof item) === "string" || t === "number") {
+        normalized.push(createTextNode(item));
+      } else if (t === "function") {
+        if (unwrap) {
+          while (typeof item === "function") item = item();
+          dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item]) || dynamic;
+        } else {
+          normalized.push(item);
+          dynamic = true;
+        }
+      } else normalized.push(item);
+    }
+    return dynamic;
+  }
+  function reconcileArrays(parentNode, a, b) {
+    let bLength = b.length,
+        aEnd = a.length,
+        bEnd = bLength,
+        aStart = 0,
+        bStart = 0,
+        after = getNextSibling(a[aEnd - 1]),
+        map = null;
+    while (aStart < aEnd || bStart < bEnd) {
+      if (a[aStart] === b[bStart]) {
+        aStart++;
+        bStart++;
+        continue;
+      }
+      while (a[aEnd - 1] === b[bEnd - 1]) {
+        aEnd--;
+        bEnd--;
+      }
+      if (aEnd === aStart) {
+        const node = bEnd < bLength ? bStart ? getNextSibling(b[bStart - 1]) : b[bEnd - bStart] : after;
+        while (bStart < bEnd) insertNode(parentNode, b[bStart++], node);
+      } else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          if (!map || !map.has(a[aStart])) removeNode(parentNode, a[aStart]);
+          aStart++;
+        }
+      } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+        const node = getNextSibling(a[--aEnd]);
+        insertNode(parentNode, b[bStart++], getNextSibling(a[aStart++]));
+        insertNode(parentNode, b[--bEnd], node);
+        a[aEnd] = b[bEnd];
+      } else {
+        if (!map) {
+          map = new Map();
+          let i = bStart;
+          while (i < bEnd) map.set(b[i], i++);
+        }
+        const index = map.get(a[aStart]);
+        if (index != null) {
+          if (bStart < index && index < bEnd) {
+            let i = aStart,
+                sequence = 1,
+                t;
+            while (++i < aEnd && i < bEnd) {
+              if ((t = map.get(a[i])) == null || t !== index + sequence) break;
+              sequence++;
+            }
+            if (sequence > index - bStart) {
+              const node = a[aStart];
+              while (bStart < index) insertNode(parentNode, b[bStart++], node);
+            } else replaceNode(parentNode, b[bStart++], a[aStart++]);
+          } else aStart++;
+        } else removeNode(parentNode, a[aStart++]);
+      }
+    }
+  }
+  function cleanChildren(parent, current, marker, replacement) {
+    if (marker === undefined) {
+      let removed;
+      while (removed = getFirstChild(parent)) removeNode(parent, removed);
+      replacement && insertNode(parent, replacement);
+      return "";
+    }
+    const node = replacement || createTextNode("");
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1; i >= 0; i--) {
+        const el = current[i];
+        if (node !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (!inserted && !i) isParent ? replaceNode(parent, node, el) : insertNode(parent, node, marker);else isParent && removeNode(parent, el);
+        } else inserted = true;
+      }
+    } else insertNode(parent, node, marker);
+    return [node];
+  }
+  function appendNodes(parent, array, marker) {
+    for (let i = 0, len = array.length; i < len; i++) insertNode(parent, array[i], marker);
+  }
+  function replaceNode(parent, newNode, oldNode) {
+    insertNode(parent, newNode, oldNode);
+    removeNode(parent, oldNode);
+  }
+  function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    if (!skipChildren && "children" in props) {
+      createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+    }
+    createRenderEffect(() => {
+      for (const prop in props) {
+        if (prop === "children") continue;
+        const value = props[prop];
+        if (value === prevProps[prop]) continue;
+        if (prop === "ref") value(node);else {
+          setProperty(node, prop, value, prevProps[prop]);
+          prevProps[prop] = value;
+        }
+      }
+    });
+    return prevProps;
+  }
+  return {
+    render(code, element) {
+      let disposer;
+      createRoot(dispose => {
+        disposer = dispose;
+        insert(element, code());
+      });
+      return disposer;
+    },
+    insert,
+    spread(node, accessor, skipChildren) {
+      if (typeof accessor === "function") {
+        createRenderEffect(current => spreadExpression(node, accessor(), current, skipChildren));
+      } else spreadExpression(node, accessor, undefined, skipChildren);
+    },
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps,
+    effect: createRenderEffect,
+    memo,
+    createComponent
+  };
+}
+function mergeProps(...sources) {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    const descriptors = Object.getOwnPropertyDescriptors(source);
+    Object.defineProperties(target, descriptors);
+  }
+  return target;
+}
+
+function createRenderer(options) {
+  const renderer = createRenderer$1(options);
+  renderer.mergeProps = mergeProps$1;
+  return renderer;
+}
+
+export { createRenderer };