solid-js 1.1.7 → 1.2.2

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.7",
+  "version": "1.2.2",
   "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": "a135f8b621f4b223145df4d5687051d187acd045"
+  "gitHead": "116e636553b34a7bf9fc5d87402d0077d7f16e59"
 }

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"
@@ -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/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/types/server/index.d.ts

@@ -1,3 +1,3 @@
-export { createRoot, createSignal, createComputed, createRenderEffect, createEffect, createDeferred, createSelector, createMemo, getListener, onMount, onCleanup, onError, untrack, batch, on, createContext, useContext, getOwner, runWithOwner, equalFn, requestCallback, mapArray, observable, from, $PROXY, DEV } from "./reactive";
+export { createRoot, createSignal, createComputed, createRenderEffect, createEffect, createDeferred, createSelector, createMemo, getListener, onMount, onCleanup, onError, untrack, batch, on, children, createContext, useContext, getOwner, runWithOwner, equalFn, requestCallback, mapArray, observable, from, $PROXY, DEV } from "./reactive";
 export { awaitSuspense, mergeProps, splitProps, createComponent, For, Index, Show, Switch, Match, ErrorBoundary, Suspense, SuspenseList, createResource, enableScheduling, startTransition, useTransition, createUniqueId, lazy, sharedConfig } from "./rendering";
 export type { Component, Resource } from "./rendering";

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;