@solidjs/web 2.0.0-beta.8 → 2.0.0-beta.9

package/README.md

@@ -1,7 +1,30 @@
-# Solid Web
+# @solidjs/web
 
-This submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.
+Solid 2.0's web platform runtime — DOM rendering, hydration, server-side rendering, and the web-only control-flow components (`Portal`, `Dynamic`).
 
-In addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `<Portal>` and `<Dynamic>`.
+> **Solid 2.0 (experimental beta).** In 1.x this package was the `solid-js/web` subpath; in 2.0 it's a separate `@solidjs/web` package.
+>
+> See [`solid-js`'s CHEATSHEET](https://github.com/solidjs/solid/blob/next/packages/solid/CHEATSHEET.md) and [MIGRATION guide](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md) for the 2.0 surface.
 
-Refer to the [website](https://docs.solidjs.com) for documentation.
+## Entry points
+
+```ts
+// Browser / hydration
+import { render, hydrate, Portal, Dynamic, dynamic } from "@solidjs/web";
+
+// Server (SSR)
+import {
+  renderToString,
+  renderToStringAsync,
+  renderToStream,
+  isServer
+} from "@solidjs/web";
+```
+
+The control-flow components from `solid-js` (`For`, `Show`, `Switch`/`Match`, `Loading`, `Errored`, `Repeat`, `Reveal`) are also re-exported from `@solidjs/web` for convenience.
+
+## More
+
+- [Documentation](https://docs.solidjs.com)
+- [Cheatsheet (2.0 public API)](https://github.com/solidjs/solid/blob/next/packages/solid/CHEATSHEET.md)
+- [Migration guide (1.x → 2.0)](https://github.com/solidjs/solid/blob/next/documentation/solid-2.0/MIGRATION.md)

package/dist/dev.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var solidJs = require('solid-js');
-var signals = require('@solidjs/signals');
 
 const DOMWithState = {
   INPUT: {
@@ -45,6 +44,8 @@ const Namespaces = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
@@ -56,9 +57,7 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
   transparent: true,
   ...options
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
-  transparent: true
-}) : solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -118,6 +117,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
@@ -126,7 +126,12 @@ function render$1(code, element, init, options = {}) {
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? solidJs.flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
+    if (element === document) {
+      solidJs.flatten(code);
+    } else {
+      const tree = code();
+      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+    }
   }, {
     id: options.renderId
   });
@@ -173,7 +178,7 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
 function className(node, value, prev) {
   if (isHydrating(node)) return;
@@ -225,7 +230,6 @@ function style(node, value, prev) {
   if (typeof value === "string") return nodeStyle.cssText = value;
   typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
   prev || (prev = {});
-  value || (value = {});
   let v, s;
   for (s in value) {
     v = value[s];
@@ -289,13 +293,25 @@ function insert(parent, accessor, marker, initial, options) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
+  let current = initial;
+  effect(() => {
+    const value = normalize(accessor(), current, multi, true);
+    if (typeof value !== "function") return value;
+    effect(() => normalize(value, current, multi), inner => {
+      insertExpression(parent, inner, current, marker);
+      current = inner;
+    }, options);
+    return INNER_OWNED;
+  }, value => {
+    if (value === INNER_OWNED) return;
+    insertExpression(parent, value, current, marker);
+    current = value;
+  }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -718,35 +734,19 @@ function escape(html) {}
 const isServer = false;
 const isDev = true;
 function render(code, element, init, options = {}) {
-  if (!element) {
-    throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
-  }
-  const renderRoot = element.localName === "template" ? element.content : element;
-  let disposer;
-  solidJs.createRoot(dispose => {
-    disposer = dispose;
-    if (element === document) {
-      solidJs.flatten(code);
-      return;
-    }
-    const marker = renderRoot.firstChild ? null : undefined;
-    solidJs.enforceLoadingBoundary(true);
-    try {
-      const tree = code();
-      insert(element, () => tree, marker, init, {
+  solidJs.enforceLoadingBoundary(true);
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
         schedule: true
-      });
-    } finally {
-      solidJs.enforceLoadingBoundary(false);
-    }
-  }, {
-    id: options.renderId
-  });
-  solidJs.flush();
-  return () => {
-    disposer();
-    renderRoot.textContent = "";
-  };
+      }
+    });
+    solidJs.flush();
+    return dispose;
+  } finally {
+    solidJs.enforceLoadingBoundary(false);
+  }
 }
 const hydrate = (...args) => {
   solidJs.enableHydration();
@@ -772,26 +772,30 @@ function Portal(props) {
   });
   return treeMarker;
 }
-function createDynamic(component, props) {
-  const cached = solidJs.createMemo(component);
-  return solidJs.createMemo(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        Object.assign(component, {
-          [solidJs.$DEVCOMP]: true
-        });
-        return solidJs.untrack(() => component(props));
-      case "string":
-        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
-        spread(el, props);
-        return el;
-    }
+function dynamic(source) {
+  const cached = solidJs.createMemo(source, {
+    lazy: true
   });
+  return props => {
+    return solidJs.createMemo(() => {
+      const component = cached();
+      switch (typeof component) {
+        case "function":
+          Object.assign(component, {
+            [solidJs.$DEVCOMP]: true
+          });
+          return solidJs.untrack(() => component(props));
+        case "string":
+          const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
+          spread(el, props);
+          return el;
+      }
+    });
+  };
 }
 function Dynamic(props) {
-  const others = solidJs.omit(props, "component");
-  return createDynamic(() => props.component, others);
+  const Comp = dynamic(() => props.component);
+  return solidJs.createComponent(Comp, solidJs.omit(props, "component"));
 }
 function createElement(tagName, is = undefined) {
   return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
@@ -882,15 +886,17 @@ exports.HydrationScript = voidFn;
 exports.MathMLElements = MathMLElements;
 exports.Namespaces = Namespaces;
 exports.Portal = Portal;
+exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
+exports.VoidElements = VoidElements;
 exports.addEventListener = addEventListener;
 exports.applyRef = applyRef;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
-exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
+exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
 exports.effect = effect;
 exports.escape = escape;

package/dist/dev.js

@@ -1,6 +1,5 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, createComponent, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
-import { createMemo } from '@solidjs/signals';
 
 const DOMWithState = {
   INPUT: {
@@ -44,6 +43,8 @@ const Namespaces = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
@@ -55,9 +56,7 @@ const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, optio
   transparent: true,
   ...options
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
-  transparent: true
-}) : createMemo$1(() => fn());
+const memo = fn => createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -117,6 +116,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
@@ -125,7 +125,12 @@ function render$1(code, element, init, options = {}) {
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
+    if (element === document) {
+      flatten(code);
+    } else {
+      const tree = code();
+      insert(element, () => tree, renderRoot.firstChild ? null : undefined, init, options.insertOptions);
+    }
   }, {
     id: options.renderId
   });
@@ -172,7 +177,7 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
 function className(node, value, prev) {
   if (isHydrating(node)) return;
@@ -224,7 +229,6 @@ function style(node, value, prev) {
   if (typeof value === "string") return nodeStyle.cssText = value;
   typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
   prev || (prev = {});
-  value || (value = {});
   let v, s;
   for (s in value) {
     v = value[s];
@@ -288,13 +292,25 @@ function insert(parent, accessor, marker, initial, options) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
+  let current = initial;
+  effect(() => {
+    const value = normalize(accessor(), current, multi, true);
+    if (typeof value !== "function") return value;
+    effect(() => normalize(value, current, multi), inner => {
+      insertExpression(parent, inner, current, marker);
+      current = inner;
+    }, options);
+    return INNER_OWNED;
+  }, value => {
+    if (value === INNER_OWNED) return;
+    insertExpression(parent, value, current, marker);
+    current = value;
+  }, options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -717,35 +733,19 @@ function escape(html) {}
 const isServer = false;
 const isDev = true;
 function render(code, element, init, options = {}) {
-  if (!element) {
-    throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
-  }
-  const renderRoot = element.localName === "template" ? element.content : element;
-  let disposer;
-  createRoot(dispose => {
-    disposer = dispose;
-    if (element === document) {
-      flatten(code);
-      return;
-    }
-    const marker = renderRoot.firstChild ? null : undefined;
-    enforceLoadingBoundary(true);
-    try {
-      const tree = code();
-      insert(element, () => tree, marker, init, {
+  enforceLoadingBoundary(true);
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
         schedule: true
-      });
-    } finally {
-      enforceLoadingBoundary(false);
-    }
-  }, {
-    id: options.renderId
-  });
-  flush();
-  return () => {
-    disposer();
-    renderRoot.textContent = "";
-  };
+      }
+    });
+    flush();
+    return dispose;
+  } finally {
+    enforceLoadingBoundary(false);
+  }
 }
 const hydrate = (...args) => {
   enableHydration();
@@ -756,7 +756,7 @@ function Portal(props) {
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
     mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = createMemo$1(() => [startMarker, props.children]);
+  let content = createMemo(() => [startMarker, props.children]);
   createRenderEffect(() => [mount(), content()], ([m, c]) => {
     m.appendChild(endMarker);
     insert(m, c, endMarker);
@@ -771,26 +771,30 @@ function Portal(props) {
   });
   return treeMarker;
 }
-function createDynamic(component, props) {
-  const cached = createMemo$1(component);
-  return createMemo$1(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        Object.assign(component, {
-          [$DEVCOMP]: true
-        });
-        return untrack(() => component(props));
-      case "string":
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
-        spread(el, props);
-        return el;
-    }
+function dynamic(source) {
+  const cached = createMemo(source, {
+    lazy: true
   });
+  return props => {
+    return createMemo(() => {
+      const component = cached();
+      switch (typeof component) {
+        case "function":
+          Object.assign(component, {
+            [$DEVCOMP]: true
+          });
+          return untrack(() => component(props));
+        case "string":
+          const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+          spread(el, props);
+          return el;
+      }
+    });
+  };
 }
 function Dynamic(props) {
-  const others = omit(props, "component");
-  return createDynamic(() => props.component, others);
+  const Comp = dynamic(() => props.component);
+  return createComponent(Comp, omit(props, "component"));
 }
 function createElement(tagName, is = undefined) {
   return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
@@ -815,4 +819,4 @@ function createElementProxy(el, marker) {
   });
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

package/dist/server.cjs

@@ -3,7 +3,6 @@
 var solidJs = require('solid-js');
 var seroval = require('seroval');
 var web = require('seroval-plugins/web');
-var signals = require('@solidjs/signals');
 
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
@@ -19,6 +18,8 @@ const Namespaces = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
@@ -30,9 +31,7 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
   transparent: true,
   ...options
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
-  transparent: true
-}) : solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn());
 
 const ES2017FLAG = seroval.Feature.AggregateError |
 seroval.Feature.BigIntTypedArray;
@@ -610,7 +609,7 @@ function ssrClassName(value) {
       classValue = !!value[key];
     if (!key || key === "undefined" || !classValue) continue;
     i && (result += " ");
-    result += escape(key);
+    result += escape(key, true);
   }
   return result;
 }
@@ -620,8 +619,8 @@ function ssrStyle(value) {
   let result = "";
   const k = Object.keys(value);
   for (let i = 0; i < k.length; i++) {
-    const s = k[i];
-    const v = value[s];
+    const s = escape(k[i], true);
+    const v = value[k[i]];
     if (v != undefined) {
       if (i) result += ";";
       const r = escape(v, true);
@@ -763,7 +762,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
 function queue(fn) {
   return Promise.resolve().then(fn);
@@ -930,23 +929,25 @@ function notSup() {
 
 const isServer = true;
 const isDev = false;
-function createDynamic(component, props) {
+function dynamic(source) {
   const o = solidJs.getOwner();
   if (o?.id != null) solidJs.getNextChildId(o);
-  const memoOwner = solidJs.createOwner();
-  return solidJs.runWithOwner(memoOwner, () => {
-    const comp = component(),
-      t = typeof comp;
-    if (comp) {
-      if (t === "function") return comp(props);else if (t === "string") {
-        return ssrElement(comp, props, undefined, true);
+  return props => {
+    const memoOwner = solidJs.createOwner();
+    return solidJs.runWithOwner(memoOwner, () => {
+      const comp = source(),
+        t = typeof comp;
+      if (comp) {
+        if (t === "function") return comp(props);else if (t === "string") {
+          return ssrElement(comp, props, undefined, true);
+        }
       }
-    }
-  });
+    });
+  };
 }
 function Dynamic(props) {
-  const others = solidJs.omit(props, "component");
-  return createDynamic(() => props.component, others);
+  const Comp = dynamic(() => props.component);
+  return solidJs.createComponent(Comp, solidJs.omit(props, "component"));
 }
 function Portal(props) {
   throw new Error("Portal is not supported on the server");
@@ -1016,14 +1017,16 @@ exports.HydrationScript = HydrationScript;
 exports.MathMLElements = MathMLElements;
 exports.Namespaces = Namespaces;
 exports.Portal = Portal;
+exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
+exports.VoidElements = VoidElements;
 exports.addEventListener = notSup;
 exports.applyRef = applyRef;
 exports.assign = notSup;
 exports.className = notSup;
-exports.createDynamic = createDynamic;
 exports.delegateEvents = notSup;
+exports.dynamic = dynamic;
 exports.dynamicProperty = notSup;
 exports.effect = effect;
 exports.escape = escape;