solid-js 1.1.6-beta.0 → 1.2.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.1.6-beta.0",
+  "version": "1.2.0-beta.0",
   "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": "9333aee148900824222538fed46a75eb996e96ff"
+  "gitHead": "ec5bfa3adc09c0efd9210be6ff5096ec18c06d02"
 }

package/types/jsx.d.ts

@@ -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;

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: {};
@@ -15,6 +15,7 @@ interface Signal<T> {
     observers: Computation<any>[] | null;
     observerSlots: number[] | null;
     pending: T | {};
+    tValue?: T;
     comparator?: (prev: T, next: T) => boolean;
     name?: string;
 }
@@ -32,20 +33,23 @@ interface Owner {
 interface Computation<T> extends Owner {
     fn: (v?: T) => T;
     state: number;
+    tState?: number;
     sources: Signal<T>[] | null;
     sourceSlots: number[] | null;
     value?: T;
-    updatedAt: number;
+    updatedAt: number | null;
     pure: boolean;
     user?: boolean;
     suspense?: SuspenseContextType;
 }
+interface Memo<T> extends Signal<T>, Computation<T> {
+    tOwned?: Computation<any>[];
+}
 interface Transition {
-    sources: Set<Signal<any> | Computation<any>>;
-    lookup: Map<Signal<any> | Computation<any>, Signal<any> | Computation<any>>;
-    updated: Set<Computation<any>>;
+    sources: Set<Signal<any>>;
     effects: Computation<any>[];
     promises: Set<Promise<any>>;
+    disposed: Set<Computation<any>>;
     queue: Set<Computation<any>>;
     scheduler?: (fn: () => void) => unknown;
     running: boolean;
@@ -244,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 }
@@ -263,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;
@@ -421,5 +425,6 @@ export declare function getSuspenseContext(): Context<SuspenseContextType> & {
     increment?(): void;
     decrement?(): void;
 };
-export declare function writeSignal(node: Signal<any>, value: any): any;
+export declare function readSignal(this: Signal<any> | Memo<any>): any;
+export declare function writeSignal(node: Signal<any> | Memo<any>, value: any, isComp?: boolean): any;
 export {};

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/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 };