@solidjs/universal 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,122 @@
+# 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
+
+### Babel
+
+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"
+      }
+    ]
+  ]
+}
+```
+
+### Vite
+
+To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:
+```js
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+
+export default defineConfig({
+  plugins: [solidPlugin({
+    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,
+  use
+} = 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/dist/dev.cjs

@@ -0,0 +1,214 @@
+'use strict';
+
+var solidJs = require('solid-js');
+
+function createRenderer({
+  createElement,
+  createTextNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    const multi = marker !== undefined;
+    if (multi && !initial) initial = [];
+    if (typeof accessor !== "function") {
+      accessor = normalize(accessor, multi, true);
+      if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    }
+    solidJs.createRenderEffect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  }
+  function insertExpression(parent, value, current, marker) {
+    if (value === current) return;
+    const t = typeof value,
+      multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      const tc = typeof current;
+      if (tc === "string" || tc === "number") {
+        replaceText(getFirstChild(parent), value);
+      } else {
+        cleanChildren(parent, current, marker, createTextNode(value));
+      }
+    } else if (value == null) {
+      cleanChildren(parent, current, marker);
+    } else if (Array.isArray(value)) {
+      if (value.length === 0) {
+        cleanChildren(parent, current, marker);
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, value, marker);
+          } else reconcileArrays(parent, current, value);
+        } else if (current == null) {
+          appendNodes(parent, value);
+        } else {
+          reconcileArrays(parent, multi && current || [getFirstChild(parent)], value);
+        }
+      }
+    } else {
+      if (Array.isArray(current)) {
+        cleanChildren(parent, current, multi ? marker : null, value);
+      } else if (current == null || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else replaceNode(parent, value, getFirstChild(parent));
+    }
+  }
+  function normalize(value, multi, doNotUnwrap) {
+    value = solidJs.flatten(value, {
+      skipNonRendered: true,
+      doNotUnwrap
+    });
+    if (doNotUnwrap && typeof value === "function") return value;
+    if (multi && value != null && !Array.isArray(value)) value = [value];
+    if (Array.isArray(value)) {
+      for (let i = 0, len = value.length; i < len; i++) {
+        const item = value[i],
+          t = typeof item;
+        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+      }
+    }
+    return value;
+  }
+  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 "";
+    }
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1; i >= 0; i--) {
+        const el = current[i];
+        if (replacement !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (replacement && !inserted && !i) isParent ? replaceNode(parent, replacement, el) : insertNode(parent, replacement, marker);else isParent && removeNode(parent, el);
+        } else inserted = true;
+      }
+    } else if (replacement) insertNode(parent, replacement, marker);
+  }
+  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 spread(node, props, skipChildren) {
+    const prevProps = {};
+    props || (props = {});
+    if (!skipChildren) {
+      solidJs.createRenderEffect(() => normalize(props.children), value => {
+        insertExpression(node, value, prevProps.children);
+        prevProps.children = value;
+      });
+    }
+    solidJs.createRenderEffect(() => props.ref && props.ref(node), () => ({}));
+    solidJs.createRenderEffect(() => {
+      const newProps = {};
+      for (const prop in props) {
+        if (prop === "children" || prop === "ref") continue;
+        const value = props[prop];
+        if (value === prevProps[prop]) continue;
+        newProps[prop] = value;
+      }
+      return newProps;
+    }, props => {
+      for (const prop in props) {
+        const value = props[prop];
+        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,
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps: solidJs.merge,
+    effect: solidJs.createRenderEffect,
+    memo: solidJs.createMemo,
+    createComponent: solidJs.createComponent,
+    use(fn, element, arg) {
+      return solidJs.untrack(() => fn(element, arg));
+    }
+  };
+}
+
+exports.createRenderer = createRenderer;

package/dist/dev.js

@@ -0,0 +1,239 @@
+import {
+  createRoot,
+  merge,
+  createRenderEffect,
+  createMemo,
+  createComponent,
+  untrack,
+  flatten
+} from "solid-js";
+
+function createRenderer({
+  createElement,
+  createTextNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    const multi = marker !== undefined;
+    if (multi && !initial) initial = [];
+    if (typeof accessor !== "function") {
+      accessor = normalize(accessor, multi, true);
+      if (typeof accessor !== "function")
+        return insertExpression(parent, accessor, initial, marker);
+    }
+    createRenderEffect(
+      () => normalize(accessor, multi),
+      (value, current) => insertExpression(parent, value, current, marker),
+      initial
+    );
+  }
+  function insertExpression(parent, value, current, marker) {
+    if (value === current) return;
+    const t = typeof value,
+      multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      const tc = typeof current;
+      if (tc === "string" || tc === "number") {
+        replaceText(getFirstChild(parent), value);
+      } else {
+        cleanChildren(parent, current, marker, createTextNode(value));
+      }
+    } else if (value == null) {
+      cleanChildren(parent, current, marker);
+    } else if (Array.isArray(value)) {
+      if (value.length === 0) {
+        cleanChildren(parent, current, marker);
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, value, marker);
+          } else reconcileArrays(parent, current, value);
+        } else if (current == null) {
+          appendNodes(parent, value);
+        } else {
+          reconcileArrays(parent, (multi && current) || [getFirstChild(parent)], value);
+        }
+      }
+    } else {
+      if (Array.isArray(current)) {
+        cleanChildren(parent, current, multi ? marker : null, value);
+      } else if (current == null || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else replaceNode(parent, value, getFirstChild(parent));
+    }
+  }
+  function normalize(value, multi, doNotUnwrap) {
+    value = flatten(value, {
+      skipNonRendered: true,
+      doNotUnwrap
+    });
+    if (doNotUnwrap && typeof value === "function") return value;
+    if (multi && value != null && !Array.isArray(value)) value = [value];
+    if (Array.isArray(value)) {
+      for (let i = 0, len = value.length; i < len; i++) {
+        const item = value[i],
+          t = typeof item;
+        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+      }
+    }
+    return value;
+  }
+  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 "";
+    }
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1; i >= 0; i--) {
+        const el = current[i];
+        if (replacement !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (replacement && !inserted && !i)
+            isParent
+              ? replaceNode(parent, replacement, el)
+              : insertNode(parent, replacement, marker);
+          else isParent && removeNode(parent, el);
+        } else inserted = true;
+      }
+    } else if (replacement) insertNode(parent, replacement, marker);
+  }
+  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 spread(node, props, skipChildren) {
+    const prevProps = {};
+    props || (props = {});
+    if (!skipChildren) {
+      createRenderEffect(
+        () => normalize(props.children),
+        value => {
+          insertExpression(node, value, prevProps.children);
+          prevProps.children = value;
+        }
+      );
+    }
+    createRenderEffect(
+      () => props.ref && props.ref(node),
+      () => ({})
+    );
+    createRenderEffect(
+      () => {
+        const newProps = {};
+        for (const prop in props) {
+          if (prop === "children" || prop === "ref") continue;
+          const value = props[prop];
+          if (value === prevProps[prop]) continue;
+          newProps[prop] = value;
+        }
+        return newProps;
+      },
+      props => {
+        for (const prop in props) {
+          const value = props[prop];
+          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,
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps: merge,
+    effect: createRenderEffect,
+    memo: createMemo,
+    createComponent,
+    use(fn, element, arg) {
+      return untrack(() => fn(element, arg));
+    }
+  };
+}
+
+export { createRenderer };

package/dist/universal.cjs

@@ -0,0 +1,214 @@
+'use strict';
+
+var solidJs = require('solid-js');
+
+function createRenderer({
+  createElement,
+  createTextNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    const multi = marker !== undefined;
+    if (multi && !initial) initial = [];
+    if (typeof accessor !== "function") {
+      accessor = normalize(accessor, multi, true);
+      if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    }
+    solidJs.createRenderEffect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  }
+  function insertExpression(parent, value, current, marker) {
+    if (value === current) return;
+    const t = typeof value,
+      multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      const tc = typeof current;
+      if (tc === "string" || tc === "number") {
+        replaceText(getFirstChild(parent), value);
+      } else {
+        cleanChildren(parent, current, marker, createTextNode(value));
+      }
+    } else if (value == null) {
+      cleanChildren(parent, current, marker);
+    } else if (Array.isArray(value)) {
+      if (value.length === 0) {
+        cleanChildren(parent, current, marker);
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, value, marker);
+          } else reconcileArrays(parent, current, value);
+        } else if (current == null) {
+          appendNodes(parent, value);
+        } else {
+          reconcileArrays(parent, multi && current || [getFirstChild(parent)], value);
+        }
+      }
+    } else {
+      if (Array.isArray(current)) {
+        cleanChildren(parent, current, multi ? marker : null, value);
+      } else if (current == null || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else replaceNode(parent, value, getFirstChild(parent));
+    }
+  }
+  function normalize(value, multi, doNotUnwrap) {
+    value = solidJs.flatten(value, {
+      skipNonRendered: true,
+      doNotUnwrap
+    });
+    if (doNotUnwrap && typeof value === "function") return value;
+    if (multi && value != null && !Array.isArray(value)) value = [value];
+    if (Array.isArray(value)) {
+      for (let i = 0, len = value.length; i < len; i++) {
+        const item = value[i],
+          t = typeof item;
+        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+      }
+    }
+    return value;
+  }
+  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 "";
+    }
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1; i >= 0; i--) {
+        const el = current[i];
+        if (replacement !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (replacement && !inserted && !i) isParent ? replaceNode(parent, replacement, el) : insertNode(parent, replacement, marker);else isParent && removeNode(parent, el);
+        } else inserted = true;
+      }
+    } else if (replacement) insertNode(parent, replacement, marker);
+  }
+  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 spread(node, props, skipChildren) {
+    const prevProps = {};
+    props || (props = {});
+    if (!skipChildren) {
+      solidJs.createRenderEffect(() => normalize(props.children), value => {
+        insertExpression(node, value, prevProps.children);
+        prevProps.children = value;
+      });
+    }
+    solidJs.createRenderEffect(() => props.ref && props.ref(node), () => ({}));
+    solidJs.createRenderEffect(() => {
+      const newProps = {};
+      for (const prop in props) {
+        if (prop === "children" || prop === "ref") continue;
+        const value = props[prop];
+        if (value === prevProps[prop]) continue;
+        newProps[prop] = value;
+      }
+      return newProps;
+    }, props => {
+      for (const prop in props) {
+        const value = props[prop];
+        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,
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps: solidJs.merge,
+    effect: solidJs.createRenderEffect,
+    memo: solidJs.createMemo,
+    createComponent: solidJs.createComponent,
+    use(fn, element, arg) {
+      return solidJs.untrack(() => fn(element, arg));
+    }
+  };
+}
+
+exports.createRenderer = createRenderer;

package/dist/universal.js

@@ -0,0 +1,239 @@
+import {
+  createRoot,
+  merge,
+  createRenderEffect,
+  createMemo,
+  createComponent,
+  untrack,
+  flatten
+} from "solid-js";
+
+function createRenderer({
+  createElement,
+  createTextNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    const multi = marker !== undefined;
+    if (multi && !initial) initial = [];
+    if (typeof accessor !== "function") {
+      accessor = normalize(accessor, multi, true);
+      if (typeof accessor !== "function")
+        return insertExpression(parent, accessor, initial, marker);
+    }
+    createRenderEffect(
+      () => normalize(accessor, multi),
+      (value, current) => insertExpression(parent, value, current, marker),
+      initial
+    );
+  }
+  function insertExpression(parent, value, current, marker) {
+    if (value === current) return;
+    const t = typeof value,
+      multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      const tc = typeof current;
+      if (tc === "string" || tc === "number") {
+        replaceText(getFirstChild(parent), value);
+      } else {
+        cleanChildren(parent, current, marker, createTextNode(value));
+      }
+    } else if (value == null) {
+      cleanChildren(parent, current, marker);
+    } else if (Array.isArray(value)) {
+      if (value.length === 0) {
+        cleanChildren(parent, current, marker);
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, value, marker);
+          } else reconcileArrays(parent, current, value);
+        } else if (current == null) {
+          appendNodes(parent, value);
+        } else {
+          reconcileArrays(parent, (multi && current) || [getFirstChild(parent)], value);
+        }
+      }
+    } else {
+      if (Array.isArray(current)) {
+        cleanChildren(parent, current, multi ? marker : null, value);
+      } else if (current == null || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else replaceNode(parent, value, getFirstChild(parent));
+    }
+  }
+  function normalize(value, multi, doNotUnwrap) {
+    value = flatten(value, {
+      skipNonRendered: true,
+      doNotUnwrap
+    });
+    if (doNotUnwrap && typeof value === "function") return value;
+    if (multi && value != null && !Array.isArray(value)) value = [value];
+    if (Array.isArray(value)) {
+      for (let i = 0, len = value.length; i < len; i++) {
+        const item = value[i],
+          t = typeof item;
+        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+      }
+    }
+    return value;
+  }
+  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 "";
+    }
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1; i >= 0; i--) {
+        const el = current[i];
+        if (replacement !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (replacement && !inserted && !i)
+            isParent
+              ? replaceNode(parent, replacement, el)
+              : insertNode(parent, replacement, marker);
+          else isParent && removeNode(parent, el);
+        } else inserted = true;
+      }
+    } else if (replacement) insertNode(parent, replacement, marker);
+  }
+  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 spread(node, props, skipChildren) {
+    const prevProps = {};
+    props || (props = {});
+    if (!skipChildren) {
+      createRenderEffect(
+        () => normalize(props.children),
+        value => {
+          insertExpression(node, value, prevProps.children);
+          prevProps.children = value;
+        }
+      );
+    }
+    createRenderEffect(
+      () => props.ref && props.ref(node),
+      () => ({})
+    );
+    createRenderEffect(
+      () => {
+        const newProps = {};
+        for (const prop in props) {
+          if (prop === "children" || prop === "ref") continue;
+          const value = props[prop];
+          if (value === prevProps[prop]) continue;
+          newProps[prop] = value;
+        }
+        return newProps;
+      },
+      props => {
+        for (const prop in props) {
+          const value = props[prop];
+          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,
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps: merge,
+    effect: createRenderEffect,
+    memo: createMemo,
+    createComponent,
+    use(fn, element, arg) {
+      return untrack(() => fn(element, arg));
+    }
+  };
+}
+
+export { createRenderer };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@solidjs/universal",
+  "description": "Solid's universal runtime for creating custom renderers",
+  "version": "2.0.0-experimental.0",
+  "author": "Ryan Carniato",
+  "license": "MIT",
+  "homepage": "https://solidjs.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/solidjs/solid-universal"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/universal.cjs",
+  "module": "./dist/universal.js",
+  "types": "./types/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "types",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./types/index.d.ts",
+        "import": "./dist/dev.js",
+        "require": "./dist/dev.cjs"
+      },
+      "types": "./types/index.d.ts",
+      "import": "./dist/universal.js",
+      "require": "./dist/universal.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./types/*": "./types/*"
+  },
+  "peerDependencies": {
+    "solid-js": "^2.0.0-experimental.0"
+  },
+  "devDependencies": {
+    "solid-js": "2.0.0-experimental.0"
+  },
+  "scripts": {
+    "build": "npm-run-all -nl build:*",
+    "build:clean": "rimraf dist/ coverage/",
+    "build:js": "rollup -c",
+    "types": "npm-run-all -nl types:*",
+    "types:clean": "rimraf types/",
+    "types:universal": "tsc --project ./tsconfig.json && ncp ../../node_modules/dom-expressions/src/universal.d.ts ./types/index.d.ts"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,29 @@
+export interface RendererOptions<NodeType> {
+  createElement(tag: string): NodeType;
+  createTextNode(value: string): NodeType;
+  replaceText(textNode: NodeType, value: string): void;
+  isTextNode(node: NodeType): boolean;
+  setProperty<T>(node: NodeType, name: string, value: T, prev?: T): void;
+  insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
+  removeNode(parent: NodeType, node: NodeType): void;
+  getParentNode(node: NodeType): NodeType | undefined;
+  getFirstChild(node: NodeType): NodeType | undefined;
+  getNextSibling(node: NodeType): NodeType | undefined;
+}
+
+export interface Renderer<NodeType> {
+  render(code: () => NodeType, node: NodeType): () => void;
+  effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
+  memo<T>(fn: () => T, equal: boolean): () => T;
+  createComponent<T>(Comp: (props: T) => NodeType, props: T): NodeType;
+  createElement(tag: string): NodeType;
+  createTextNode(value: string): NodeType;
+  insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
+  insert<T>(parent: any, accessor: (() => T) | T, marker?: any | null): NodeType;
+  spread<T>(node: any, accessor: (() => T) | T, skipChildren?: Boolean): void;
+  setProp<T>(node: NodeType, name: string, value: T, prev?: T): T;
+  mergeProps(...sources: unknown[]): unknown;
+  use<A, T>(fn: (element: NodeType, arg: A) => T, element: NodeType, arg: A): T;
+}
+
+export function createRenderer<NodeType>(options: RendererOptions<NodeType>): Renderer<NodeType>;