@solidjs/web - npm Package Compare versions

Comparing version 2.0.0-beta.8 to 2.0.0-beta.9

dist/dev.cjs

 'use strict';
 
 var solidJs = require('solid-js');
-var signals = require('@solidjs/signals');
 
@@ -48,2 +47,4 @@ const DOMWithState = {
 };
+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",
@@ -60,5 +61,3 @@ "webview",
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
-  transparent: true
-}) : solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn());
 
@@ -123,2 +122,3 @@ function reconcileArrays(parentNode, a, b) {
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
@@ -132,3 +132,8 @@ if (!element) {
     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);
+    }
   }, {
@@ -180,3 +185,3 @@ id: options.renderId
   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);
 }
@@ -233,3 +238,2 @@ function className(node, value, prev) {
   prev || (prev = {});
-  value || (value = {});
   let v, s;
@@ -298,3 +302,2 @@ for (s in value) {
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
@@ -305,3 +308,16 @@ const placeholder = document.createTextNode("");
   }
-  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);
 }
@@ -729,31 +745,15 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 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.");
+  solidJs.enforceLoadingBoundary(true);
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
+        schedule: true
+      }
+    });
+    solidJs.flush();
+    return dispose;
+  } finally {
+    solidJs.enforceLoadingBoundary(false);
   }
-  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, {
-        schedule: true
-      });
-    } finally {
-      solidJs.enforceLoadingBoundary(false);
-    }
-  }, {
-    id: options.renderId
-  });
-  solidJs.flush();
-  return () => {
-    disposer();
-    renderRoot.textContent = "";
-  };
 }
@@ -784,22 +784,26 @@ const hydrate = (...args) => {
 }
-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"));
 }
@@ -895,4 +899,6 @@ function createElement(tagName, is = undefined) {
 exports.Portal = Portal;
+exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
+exports.VoidElements = VoidElements;
 exports.addEventListener = addEventListener;
@@ -903,4 +909,4 @@ exports.applyRef = applyRef;
 exports.clearDelegatedEvents = clearDelegatedEvents;
-exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
+exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
@@ -907,0 +913,0 @@ exports.effect = effect;

dist/dev.js

@@ -1,4 +0,3 @@
-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';
 
@@ -47,2 +46,4 @@ const DOMWithState = {
 };
+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",
@@ -59,5 +60,3 @@ "webview",
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
-  transparent: true
-}) : createMemo$1(() => fn());
+const memo = fn => createMemo(() => fn());
 
@@ -122,2 +121,3 @@ function reconcileArrays(parentNode, a, b) {
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
@@ -131,3 +131,8 @@ if (!element) {
     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);
+    }
   }, {
@@ -179,3 +184,3 @@ id: options.renderId
   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);
 }
@@ -232,3 +237,2 @@ function className(node, value, prev) {
   prev || (prev = {});
-  value || (value = {});
   let v, s;
@@ -297,3 +301,2 @@ for (s in value) {
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
@@ -304,3 +307,16 @@ const placeholder = document.createTextNode("");
   }
-  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);
 }
@@ -728,31 +744,15 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 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.");
+  enforceLoadingBoundary(true);
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
+        schedule: true
+      }
+    });
+    flush();
+    return dispose;
+  } finally {
+    enforceLoadingBoundary(false);
   }
-  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, {
-        schedule: true
-      });
-    } finally {
-      enforceLoadingBoundary(false);
-    }
-  }, {
-    id: options.renderId
-  });
-  flush();
-  return () => {
-    disposer();
-    renderRoot.textContent = "";
-  };
 }
@@ -768,3 +768,3 @@ const hydrate = (...args) => {
     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]) => {
@@ -784,22 +784,26 @@ m.appendChild(endMarker);
 }
-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"));
 }
@@ -829,2 +833,2 @@ function createElement(tagName, is = undefined) {
 
-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 };

dist/server.cjs

@@ -6,3 +6,2 @@ 'use strict';
 var web = require('seroval-plugins/web');
-var signals = require('@solidjs/signals');
 
@@ -23,2 +22,4 @@ const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 };
+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",
@@ -35,5 +36,3 @@ "webview",
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
-  transparent: true
-}) : solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn());
 
@@ -616,3 +615,3 @@ const ES2017FLAG = seroval.Feature.AggregateError |
     i && (result += " ");
-    result += escape(key);
+    result += escape(key, true);
   }
@@ -627,4 +626,4 @@ return result;
   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) {
@@ -771,3 +770,3 @@ if (i) result += ";";
 } = {}) {
-  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-->`;
 }
@@ -939,19 +938,21 @@ function queue(fn) {
 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"));
 }
@@ -1026,4 +1027,6 @@ function Portal(props) {
 exports.Portal = Portal;
+exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
+exports.VoidElements = VoidElements;
 exports.addEventListener = notSup;
@@ -1033,4 +1036,4 @@ exports.applyRef = applyRef;
 exports.className = notSup;
-exports.createDynamic = createDynamic;
 exports.delegateEvents = notSup;
+exports.dynamic = dynamic;
 exports.dynamicProperty = notSup;
@@ -1037,0 +1040,0 @@ exports.effect = effect;

dist/server.js

@@ -1,6 +0,5 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, createComponent, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
-import { createMemo } from '@solidjs/signals';
 
@@ -21,2 +20,4 @@ const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 };
+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",
@@ -33,5 +34,3 @@ "webview",
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
-  transparent: true
-}) : createMemo$1(() => fn());
+const memo = fn => createMemo(() => fn());
 
@@ -614,3 +613,3 @@ const ES2017FLAG = Feature.AggregateError |
     i && (result += " ");
-    result += escape(key);
+    result += escape(key, true);
   }
@@ -625,4 +624,4 @@ return result;
   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) {
@@ -769,3 +768,3 @@ if (i) result += ";";
 } = {}) {
-  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-->`;
 }
@@ -937,19 +936,21 @@ function queue(fn) {
 const isDev = false;
-function createDynamic(component, props) {
+function dynamic(source) {
   const o = getOwner();
   if (o?.id != null) getNextChildId(o);
-  const memoOwner = createOwner();
-  return 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 = createOwner();
+    return 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 = omit(props, "component");
-  return createDynamic(() => props.component, others);
+  const Comp = dynamic(() => props.component);
+  return createComponent(Comp, omit(props, "component"));
 }
@@ -960,2 +961,2 @@ function Portal(props) {
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };

dist/web.cjs

 'use strict';
 
 var solidJs = require('solid-js');
-var signals = require('@solidjs/signals');
 
@@ -48,2 +47,4 @@ const DOMWithState = {
 };
+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",
@@ -60,5 +61,3 @@ "webview",
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
-  transparent: true
-}) : solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn());
 
@@ -123,2 +122,3 @@ function reconcileArrays(parentNode, a, b) {
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
@@ -129,3 +129,8 @@ const renderRoot = getChildRoot(element);
     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);
+    }
   }, {
@@ -175,3 +180,3 @@ id: options.renderId
   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);
 }
@@ -228,3 +233,2 @@ function className(node, value, prev) {
   prev || (prev = {});
-  value || (value = {});
   let v, s;
@@ -293,3 +297,2 @@ for (s in value) {
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
@@ -300,3 +303,16 @@ const placeholder = document.createTextNode("");
   }
-  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);
 }
@@ -672,26 +688,13 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 function render(code, element, init, options = {}) {
-  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;
-    try {
-      const tree = code();
-      insert(element, () => tree, marker, init, {
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
         schedule: true
-      });
-    } finally {
-    }
-  }, {
-    id: options.renderId
-  });
-  solidJs.flush();
-  return () => {
-    disposer();
-    renderRoot.textContent = "";
-  };
+      }
+    });
+    solidJs.flush();
+    return dispose;
+  } finally {
+  }
 }
@@ -722,19 +725,23 @@ const hydrate = (...args) => {
 }
-function createDynamic(component, props) {
-  const cached = solidJs.createMemo(component);
-  return solidJs.createMemo(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        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":
+          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"));
 }
@@ -830,4 +837,6 @@ function createElement(tagName, is = undefined) {
 exports.Portal = Portal;
+exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
+exports.VoidElements = VoidElements;
 exports.addEventListener = addEventListener;
@@ -838,4 +847,4 @@ exports.applyRef = applyRef;
 exports.clearDelegatedEvents = clearDelegatedEvents;
-exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
+exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
@@ -842,0 +851,0 @@ exports.effect = effect;

dist/web.js

@@ -1,4 +0,3 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration, flush } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, createComponent, omit, enableHydration, 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';
 
@@ -47,2 +46,4 @@ const DOMWithState = {
 };
+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",
@@ -59,5 +60,3 @@ "webview",
 } : transparentOptions);
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
-  transparent: true
-}) : createMemo$1(() => fn());
+const memo = fn => createMemo(() => fn());
 
@@ -122,2 +121,3 @@ function reconcileArrays(parentNode, a, b) {
 const $$EVENTS = "_$DX_DELEGATE";
+const INNER_OWNED = {};
 function render$1(code, element, init, options = {}) {
@@ -128,3 +128,8 @@ const renderRoot = getChildRoot(element);
     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);
+    }
   }, {
@@ -174,3 +179,3 @@ id: options.renderId
   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);
 }
@@ -227,3 +232,2 @@ function className(node, value, prev) {
   prev || (prev = {});
-  value || (value = {});
   let v, s;
@@ -292,3 +296,2 @@ for (s in value) {
   }
-  accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
@@ -299,3 +302,16 @@ const placeholder = document.createTextNode("");
   }
-  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);
 }
@@ -671,26 +687,13 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 function render(code, element, init, options = {}) {
-  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;
-    try {
-      const tree = code();
-      insert(element, () => tree, marker, init, {
+  try {
+    const dispose = render$1(code, element, init, {
+      ...options,
+      insertOptions: {
         schedule: true
-      });
-    } finally {
-    }
-  }, {
-    id: options.renderId
-  });
-  flush();
-  return () => {
-    disposer();
-    renderRoot.textContent = "";
-  };
+      }
+    });
+    flush();
+    return dispose;
+  } finally {
+  }
 }
@@ -706,3 +709,3 @@ const hydrate = (...args) => {
     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]) => {
@@ -722,19 +725,23 @@ m.appendChild(endMarker);
 }
-function createDynamic(component, props) {
-  const cached = createMemo$1(component);
-  return createMemo$1(() => {
-    const component = cached();
-    switch (typeof component) {
-      case "function":
-        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":
+          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"));
 }
@@ -764,2 +771,2 @@ function createElement(tagName, is = undefined) {
 
-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.json

 {
   "name": "@solidjs/web",
-  "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.8",
+  "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
+  "version": "2.0.0-beta.9",
   "author": "Ryan Carniato",
@@ -10,3 +10,4 @@ "license": "MIT",
     "type": "git",
-    "url": "https://github.com/solidjs/solid-web"
+    "url": "git+https://github.com/solidjs/solid.git",
+    "directory": "packages/solid-web"
   },
@@ -120,8 +121,6 @@ "publishConfig": {
   "peerDependencies": {
-    "@solidjs/signals": "^2.0.0-beta.8",
-    "solid-js": "^2.0.0-beta.8"
+    "solid-js": "^2.0.0-beta.9"
   },
   "devDependencies": {
-    "@solidjs/signals": "2.0.0-beta.8",
-    "solid-js": "2.0.0-beta.8"
+    "solid-js": "2.0.0-beta.9"
   },
@@ -128,0 +127,0 @@ "scripts": {

README.md

@@ -1,7 +0,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)

storage/types-cjs/src/index.d.cts

 import { hydrate as hydrateCore } from "./client.cjs";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.cjs";
@@ -12,14 +12,28 @@ export * from "./server-mock.cjs";
 } & {
-    component: T | undefined;
+    component: T | null | undefined | false;
 };
 /**
- * Renders a component tree into a DOM element and returns a dispose function.
+ * Renders a component tree into a DOM element. Returns a dispose function
+ * that tears the tree down and cleans up reactive scopes when called.
  *
- * The top-level insert runs with `schedule: true` so its initial DOM attach
- * goes through the effect queue rather than executing inline. This lets the
- * mount participate in transitions: if an uncaught async read surfaces during
- * the initial render (no `Loading` ancestor absorbs it), the mount is held by
- * the transition and attaches atomically once all pending settles. On the
- * no-async happy path the tail `flush()` drains the queued callback so the
- * attach is synchronous by the time `render()` returns.
+ * @example
+ * ```tsx
+ * import { render } from "@solidjs/web";
+ *
+ * const dispose = render(() => <App />, document.getElementById("root")!);
+ *
+ * // Later, to unmount:
+ * dispose();
+ * ```
+ *
+ * @remarks
+ * The top-level insert is queued via `insertOptions: { schedule: true }` so
+ * its initial DOM attach goes through the effect queue rather than executing
+ * inline. This lets the mount participate in transitions: if an uncaught
+ * async read surfaces during the initial render (no `Loading` ancestor
+ * absorbs it), the mount is held by the transition and attaches atomically
+ * once all pending settles. On the no-async happy path the tail `flush()`
+ * drains the queued callback so the attach is synchronous by the time
+ * `render()` returns. The dev enforcement window scopes
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
  */
@@ -29,8 +43,37 @@ export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
 }): () => void;
+/**
+ * Resumes a server-rendered tree on the client, attaching event listeners
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
+ * function that tears down reactive scopes (DOM nodes are left in place).
+ *
+ * Use this when the page HTML was produced by `renderToString`,
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
+ * `render` instead.
+ *
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
+ * server render that used the same id.
+ *
+ * @example
+ * ```tsx
+ * import { hydrate } from "@solidjs/web";
+ *
+ * hydrate(() => <App />, document.getElementById("root")!);
+ * ```
+ */
 export declare const hydrate: typeof hydrateCore;
 /**
- * Renders components somewhere else in the DOM
+ * Renders its children into a different part of the DOM (modal roots,
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
  *
- * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
+ * still participates in the parent's reactive scope and disposes when the
+ * parent does.
  *
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
+ *
  * @description https://docs.solidjs.com/reference/components/portal
@@ -43,14 +86,20 @@ */
 /**
- * Renders an arbitrary component or element with the given props
+ * Returns a stable `Component` whose identity is driven by a reactive (and
+ * optionally async) `source`. The returned component can be used anywhere a
+ * normal component is used; children and props flow through JSX as usual.
  *
- * This is a lower level version of the `Dynamic` component, useful for
- * performance optimizations in libraries. Do not use this unless you know
- * what you are doing.
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
+ * `lazy`.
+ *
  * ```typescript
- * const element = () => multiline() ? 'textarea' : 'input';
- * createDynamic(element, { value: value() });
+ * const User = dynamic(() => getUserComp(props.id));
+ * return <User>client content</User>;
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
-export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
 /**
@@ -57,0 +106,0 @@ * Renders an arbitrary custom or native component and passes the other props

storage/types-cjs/src/server-mock.d.cts

@@ -0,1 +1,16 @@
+/**
+ * Renders a component tree synchronously to an HTML string. Async reads inside
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
+ * resolution use `renderToStringAsync` instead.
+ *
+ * Pair the returned HTML with `hydrate()` on the client.
+ *
+ * @example
+ * ```tsx
+ * import { renderToString } from "@solidjs/web";
+ *
+ * const html = renderToString(() => <App />);
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
+ * ```
+ */
 export declare function renderToString<T>(fn: () => T, options?: {
@@ -15,2 +30,17 @@ nonce?: string;
 }): string;
+/**
+ * Renders a component tree to an HTML string and awaits all async reads in the
+ * subtree before resolving. The returned HTML reflects the fully-settled state
+ * — no `<Loading>` fallbacks appear in the output.
+ *
+ * Use this when you want a complete page in one round-trip. For incremental
+ * streaming with progressive boundary resolution, use `renderToStream`.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStringAsync } from "@solidjs/web";
+ *
+ * const html = await renderToStringAsync(() => <App />);
+ * ```
+ */
 export declare function renderToStringAsync<T>(fn: () => T, options?: {
@@ -31,2 +61,21 @@ timeoutMs?: number;
 }): Promise<string>;
+/**
+ * Streams an HTML response, flushing the synchronous shell first and then
+ * progressively emitting async-resolved fragments as their `<Loading>`
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
+ *
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStream } from "@solidjs/web";
+ *
+ * // Node:
+ * renderToStream(() => <App />).pipe(res);
+ *
+ * // Web (Workers / Deno):
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
+ * ```
+ */
 export declare function renderToStream<T>(fn: () => T, options?: {
@@ -59,17 +108,25 @@ nonce?: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
 export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
     t: string;
 };
+/** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
+/** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
+/** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrAttribute(key: string, value: boolean): string;
+/** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrHydrationKey(): string;
+/** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
 export declare function resolveSSRNode(node: any): string;
+/** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
 export declare function escape(html: string): string;

storage/types/src/index.d.ts

 import { hydrate as hydrateCore } from "./client.js";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
@@ -12,14 +12,28 @@ export * from "./server-mock.js";
 } & {
-    component: T | undefined;
+    component: T | null | undefined | false;
 };
 /**
- * Renders a component tree into a DOM element and returns a dispose function.
+ * Renders a component tree into a DOM element. Returns a dispose function
+ * that tears the tree down and cleans up reactive scopes when called.
  *
- * The top-level insert runs with `schedule: true` so its initial DOM attach
- * goes through the effect queue rather than executing inline. This lets the
- * mount participate in transitions: if an uncaught async read surfaces during
- * the initial render (no `Loading` ancestor absorbs it), the mount is held by
- * the transition and attaches atomically once all pending settles. On the
- * no-async happy path the tail `flush()` drains the queued callback so the
- * attach is synchronous by the time `render()` returns.
+ * @example
+ * ```tsx
+ * import { render } from "@solidjs/web";
+ *
+ * const dispose = render(() => <App />, document.getElementById("root")!);
+ *
+ * // Later, to unmount:
+ * dispose();
+ * ```
+ *
+ * @remarks
+ * The top-level insert is queued via `insertOptions: { schedule: true }` so
+ * its initial DOM attach goes through the effect queue rather than executing
+ * inline. This lets the mount participate in transitions: if an uncaught
+ * async read surfaces during the initial render (no `Loading` ancestor
+ * absorbs it), the mount is held by the transition and attaches atomically
+ * once all pending settles. On the no-async happy path the tail `flush()`
+ * drains the queued callback so the attach is synchronous by the time
+ * `render()` returns. The dev enforcement window scopes
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
  */
@@ -29,8 +43,37 @@ export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
 }): () => void;
+/**
+ * Resumes a server-rendered tree on the client, attaching event listeners
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
+ * function that tears down reactive scopes (DOM nodes are left in place).
+ *
+ * Use this when the page HTML was produced by `renderToString`,
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
+ * `render` instead.
+ *
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
+ * server render that used the same id.
+ *
+ * @example
+ * ```tsx
+ * import { hydrate } from "@solidjs/web";
+ *
+ * hydrate(() => <App />, document.getElementById("root")!);
+ * ```
+ */
 export declare const hydrate: typeof hydrateCore;
 /**
- * Renders components somewhere else in the DOM
+ * Renders its children into a different part of the DOM (modal roots,
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
  *
- * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
+ * still participates in the parent's reactive scope and disposes when the
+ * parent does.
  *
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
+ *
  * @description https://docs.solidjs.com/reference/components/portal
@@ -43,14 +86,20 @@ */
 /**
- * Renders an arbitrary component or element with the given props
+ * Returns a stable `Component` whose identity is driven by a reactive (and
+ * optionally async) `source`. The returned component can be used anywhere a
+ * normal component is used; children and props flow through JSX as usual.
  *
- * This is a lower level version of the `Dynamic` component, useful for
- * performance optimizations in libraries. Do not use this unless you know
- * what you are doing.
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
+ * `lazy`.
+ *
  * ```typescript
- * const element = () => multiline() ? 'textarea' : 'input';
- * createDynamic(element, { value: value() });
+ * const User = dynamic(() => getUserComp(props.id));
+ * return <User>client content</User>;
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
-export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
 /**
@@ -57,0 +106,0 @@ * Renders an arbitrary custom or native component and passes the other props

storage/types/src/server-mock.d.ts

@@ -0,1 +1,16 @@
+/**
+ * Renders a component tree synchronously to an HTML string. Async reads inside
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
+ * resolution use `renderToStringAsync` instead.
+ *
+ * Pair the returned HTML with `hydrate()` on the client.
+ *
+ * @example
+ * ```tsx
+ * import { renderToString } from "@solidjs/web";
+ *
+ * const html = renderToString(() => <App />);
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
+ * ```
+ */
 export declare function renderToString<T>(fn: () => T, options?: {
@@ -15,2 +30,17 @@ nonce?: string;
 }): string;
+/**
+ * Renders a component tree to an HTML string and awaits all async reads in the
+ * subtree before resolving. The returned HTML reflects the fully-settled state
+ * — no `<Loading>` fallbacks appear in the output.
+ *
+ * Use this when you want a complete page in one round-trip. For incremental
+ * streaming with progressive boundary resolution, use `renderToStream`.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStringAsync } from "@solidjs/web";
+ *
+ * const html = await renderToStringAsync(() => <App />);
+ * ```
+ */
 export declare function renderToStringAsync<T>(fn: () => T, options?: {
@@ -31,2 +61,21 @@ timeoutMs?: number;
 }): Promise<string>;
+/**
+ * Streams an HTML response, flushing the synchronous shell first and then
+ * progressively emitting async-resolved fragments as their `<Loading>`
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
+ *
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStream } from "@solidjs/web";
+ *
+ * // Node:
+ * renderToStream(() => <App />).pipe(res);
+ *
+ * // Web (Workers / Deno):
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
+ * ```
+ */
 export declare function renderToStream<T>(fn: () => T, options?: {
@@ -59,17 +108,25 @@ nonce?: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
 export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
     t: string;
 };
+/** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
+/** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
+/** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrAttribute(key: string, value: boolean): string;
+/** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrHydrationKey(): string;
+/** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
 export declare function resolveSSRNode(node: any): string;
+/** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
 export declare function escape(html: string): string;

types-cjs/client.d.cts

@@ -8,2 +8,4 @@ import { JSX } from "./jsx.cjs";
 export const MathMLElements: Set<string>;
+export const VoidElements: Set<string>;
+export const RawTextElements: Set<string>;
 export const Namespaces: Record<string, string>;
@@ -10,0 +12,0 @@

types-cjs/core.d.cts

 export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
 export declare const effect: (fn: any, effectFn: any, options: any) => void;
-export declare const memo: (fn: any, transparent: any) => any;
+export declare const memo: (fn: any) => import("solid-js").Accessor<any>;

types-cjs/index.d.cts

 import { hydrate as hydrateCore } from "./client.cjs";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.cjs";
@@ -12,14 +12,28 @@ export * from "./server-mock.cjs";
 } & {
-    component: T | undefined;
+    component: T | null | undefined | false;
 };
 /**
- * Renders a component tree into a DOM element and returns a dispose function.
+ * Renders a component tree into a DOM element. Returns a dispose function
+ * that tears the tree down and cleans up reactive scopes when called.
  *
- * The top-level insert runs with `schedule: true` so its initial DOM attach
- * goes through the effect queue rather than executing inline. This lets the
- * mount participate in transitions: if an uncaught async read surfaces during
- * the initial render (no `Loading` ancestor absorbs it), the mount is held by
- * the transition and attaches atomically once all pending settles. On the
- * no-async happy path the tail `flush()` drains the queued callback so the
- * attach is synchronous by the time `render()` returns.
+ * @example
+ * ```tsx
+ * import { render } from "@solidjs/web";
+ *
+ * const dispose = render(() => <App />, document.getElementById("root")!);
+ *
+ * // Later, to unmount:
+ * dispose();
+ * ```
+ *
+ * @remarks
+ * The top-level insert is queued via `insertOptions: { schedule: true }` so
+ * its initial DOM attach goes through the effect queue rather than executing
+ * inline. This lets the mount participate in transitions: if an uncaught
+ * async read surfaces during the initial render (no `Loading` ancestor
+ * absorbs it), the mount is held by the transition and attaches atomically
+ * once all pending settles. On the no-async happy path the tail `flush()`
+ * drains the queued callback so the attach is synchronous by the time
+ * `render()` returns. The dev enforcement window scopes
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
  */
@@ -29,8 +43,37 @@ export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
 }): () => void;
+/**
+ * Resumes a server-rendered tree on the client, attaching event listeners
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
+ * function that tears down reactive scopes (DOM nodes are left in place).
+ *
+ * Use this when the page HTML was produced by `renderToString`,
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
+ * `render` instead.
+ *
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
+ * server render that used the same id.
+ *
+ * @example
+ * ```tsx
+ * import { hydrate } from "@solidjs/web";
+ *
+ * hydrate(() => <App />, document.getElementById("root")!);
+ * ```
+ */
 export declare const hydrate: typeof hydrateCore;
 /**
- * Renders components somewhere else in the DOM
+ * Renders its children into a different part of the DOM (modal roots,
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
  *
- * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
+ * still participates in the parent's reactive scope and disposes when the
+ * parent does.
  *
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
+ *
  * @description https://docs.solidjs.com/reference/components/portal
@@ -43,14 +86,20 @@ */
 /**
- * Renders an arbitrary component or element with the given props
+ * Returns a stable `Component` whose identity is driven by a reactive (and
+ * optionally async) `source`. The returned component can be used anywhere a
+ * normal component is used; children and props flow through JSX as usual.
  *
- * This is a lower level version of the `Dynamic` component, useful for
- * performance optimizations in libraries. Do not use this unless you know
- * what you are doing.
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
+ * `lazy`.
+ *
  * ```typescript
- * const element = () => multiline() ? 'textarea' : 'input';
- * createDynamic(element, { value: value() });
+ * const User = dynamic(() => getUserComp(props.id));
+ * return <User>client content</User>;
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
-export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
 /**
@@ -57,0 +106,0 @@ * Renders an arbitrary custom or native component and passes the other props

types-cjs/server-mock.d.cts

@@ -0,1 +1,16 @@
+/**
+ * Renders a component tree synchronously to an HTML string. Async reads inside
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
+ * resolution use `renderToStringAsync` instead.
+ *
+ * Pair the returned HTML with `hydrate()` on the client.
+ *
+ * @example
+ * ```tsx
+ * import { renderToString } from "@solidjs/web";
+ *
+ * const html = renderToString(() => <App />);
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
+ * ```
+ */
 export declare function renderToString<T>(fn: () => T, options?: {
@@ -15,2 +30,17 @@ nonce?: string;
 }): string;
+/**
+ * Renders a component tree to an HTML string and awaits all async reads in the
+ * subtree before resolving. The returned HTML reflects the fully-settled state
+ * — no `<Loading>` fallbacks appear in the output.
+ *
+ * Use this when you want a complete page in one round-trip. For incremental
+ * streaming with progressive boundary resolution, use `renderToStream`.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStringAsync } from "@solidjs/web";
+ *
+ * const html = await renderToStringAsync(() => <App />);
+ * ```
+ */
 export declare function renderToStringAsync<T>(fn: () => T, options?: {
@@ -31,2 +61,21 @@ timeoutMs?: number;
 }): Promise<string>;
+/**
+ * Streams an HTML response, flushing the synchronous shell first and then
+ * progressively emitting async-resolved fragments as their `<Loading>`
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
+ *
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStream } from "@solidjs/web";
+ *
+ * // Node:
+ * renderToStream(() => <App />).pipe(res);
+ *
+ * // Web (Workers / Deno):
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
+ * ```
+ */
 export declare function renderToStream<T>(fn: () => T, options?: {
@@ -59,17 +108,25 @@ nonce?: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
 export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
     t: string;
 };
+/** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
+/** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
+/** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrAttribute(key: string, value: boolean): string;
+/** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrHydrationKey(): string;
+/** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
 export declare function resolveSSRNode(node: any): string;
+/** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
 export declare function escape(html: string): string;

types-cjs/server.d.cts

@@ -7,2 +7,4 @@ import { JSX } from "./jsx.cjs";
 export const MathMLElements: Set<string>;
+export const VoidElements: Set<string>;
+export const RawTextElements: Set<string>;
 export const Namespaces: Record<string, string>;
@@ -9,0 +11,0 @@

types/client.d.ts

@@ -8,2 +8,4 @@ import { JSX } from "./jsx.js";
 export const MathMLElements: Set<string>;
+export const VoidElements: Set<string>;
+export const RawTextElements: Set<string>;
 export const Namespaces: Record<string, string>;
@@ -10,0 +12,0 @@

types/core.d.ts

 export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
 export declare const effect: (fn: any, effectFn: any, options: any) => void;
-export declare const memo: (fn: any, transparent: any) => any;
+export declare const memo: (fn: any) => import("solid-js").Accessor<any>;

types/index.d.ts

 import { hydrate as hydrateCore } from "./client.js";
-import { JSX, ComponentProps, ValidComponent } from "solid-js";
+import { JSX, Component, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
@@ -12,14 +12,28 @@ export * from "./server-mock.js";
 } & {
-    component: T | undefined;
+    component: T | null | undefined | false;
 };
 /**
- * Renders a component tree into a DOM element and returns a dispose function.
+ * Renders a component tree into a DOM element. Returns a dispose function
+ * that tears the tree down and cleans up reactive scopes when called.
  *
- * The top-level insert runs with `schedule: true` so its initial DOM attach
- * goes through the effect queue rather than executing inline. This lets the
- * mount participate in transitions: if an uncaught async read surfaces during
- * the initial render (no `Loading` ancestor absorbs it), the mount is held by
- * the transition and attaches atomically once all pending settles. On the
- * no-async happy path the tail `flush()` drains the queued callback so the
- * attach is synchronous by the time `render()` returns.
+ * @example
+ * ```tsx
+ * import { render } from "@solidjs/web";
+ *
+ * const dispose = render(() => <App />, document.getElementById("root")!);
+ *
+ * // Later, to unmount:
+ * dispose();
+ * ```
+ *
+ * @remarks
+ * The top-level insert is queued via `insertOptions: { schedule: true }` so
+ * its initial DOM attach goes through the effect queue rather than executing
+ * inline. This lets the mount participate in transitions: if an uncaught
+ * async read surfaces during the initial render (no `Loading` ancestor
+ * absorbs it), the mount is held by the transition and attaches atomically
+ * once all pending settles. On the no-async happy path the tail `flush()`
+ * drains the queued callback so the attach is synchronous by the time
+ * `render()` returns. The dev enforcement window scopes
+ * `ASYNC_OUTSIDE_LOADING_BOUNDARY` to the initial mount only.
  */
@@ -29,8 +43,37 @@ export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
 }): () => void;
+/**
+ * Resumes a server-rendered tree on the client, attaching event listeners
+ * and reactive bindings without reconstructing the DOM. Returns a `dispose`
+ * function that tears down reactive scopes (DOM nodes are left in place).
+ *
+ * Use this when the page HTML was produced by `renderToString`,
+ * `renderToStringAsync`, or `renderToStream`. For client-only apps, use
+ * `render` instead.
+ *
+ * Pass `options.renderId` to hydrate one of multiple roots emitted by a
+ * server render that used the same id.
+ *
+ * @example
+ * ```tsx
+ * import { hydrate } from "@solidjs/web";
+ *
+ * hydrate(() => <App />, document.getElementById("root")!);
+ * ```
+ */
 export declare const hydrate: typeof hydrateCore;
 /**
- * Renders components somewhere else in the DOM
+ * Renders its children into a different part of the DOM (modal roots,
+ * tooltips, layers that need to escape an `overflow: hidden` ancestor).
  *
- * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
+ * If `mount` is omitted, the portal attaches to `document.body`. The portal
+ * still participates in the parent's reactive scope and disposes when the
+ * parent does.
  *
+ * @example
+ * ```tsx
+ * <Portal mount={document.getElementById("modal-root")!}>
+ *   <Dialog />
+ * </Portal>
+ * ```
+ *
  * @description https://docs.solidjs.com/reference/components/portal
@@ -43,14 +86,20 @@ */
 /**
- * Renders an arbitrary component or element with the given props
+ * Returns a stable `Component` whose identity is driven by a reactive (and
+ * optionally async) `source`. The returned component can be used anywhere a
+ * normal component is used; children and props flow through JSX as usual.
  *
- * This is a lower level version of the `Dynamic` component, useful for
- * performance optimizations in libraries. Do not use this unless you know
- * what you are doing.
+ * `source` may return a component, a native tag name (`'input'`, `'textarea'`,
+ * etc.), `undefined`, or a `Promise` of any of the above. A pending promise
+ * propagates as `NotReadyError` through the surrounding reactive scope, so
+ * async swaps compose with `Loading`/Suspense boundaries the same way as
+ * `lazy`.
+ *
  * ```typescript
- * const element = () => multiline() ? 'textarea' : 'input';
- * createDynamic(element, { value: value() });
+ * const User = dynamic(() => getUserComp(props.id));
+ * return <User>client content</User>;
  * ```
+ *
  * @description https://docs.solidjs.com/reference/components/dynamic
  */
-export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+export declare function dynamic<T extends ValidComponent>(source: () => T | Promise<T> | null | undefined | false): Component<ComponentProps<T>>;
 /**
@@ -57,0 +106,0 @@ * Renders an arbitrary custom or native component and passes the other props

types/server-mock.d.ts

@@ -0,1 +1,16 @@
+/**
+ * Renders a component tree synchronously to an HTML string. Async reads inside
+ * `<Loading>` boundaries emit their `fallback` content; for full-graph
+ * resolution use `renderToStringAsync` instead.
+ *
+ * Pair the returned HTML with `hydrate()` on the client.
+ *
+ * @example
+ * ```tsx
+ * import { renderToString } from "@solidjs/web";
+ *
+ * const html = renderToString(() => <App />);
+ * res.send(`<!doctype html><html><body><div id="root">${html}</div></body></html>`);
+ * ```
+ */
 export declare function renderToString<T>(fn: () => T, options?: {
@@ -15,2 +30,17 @@ nonce?: string;
 }): string;
+/**
+ * Renders a component tree to an HTML string and awaits all async reads in the
+ * subtree before resolving. The returned HTML reflects the fully-settled state
+ * — no `<Loading>` fallbacks appear in the output.
+ *
+ * Use this when you want a complete page in one round-trip. For incremental
+ * streaming with progressive boundary resolution, use `renderToStream`.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStringAsync } from "@solidjs/web";
+ *
+ * const html = await renderToStringAsync(() => <App />);
+ * ```
+ */
 export declare function renderToStringAsync<T>(fn: () => T, options?: {
@@ -31,2 +61,21 @@ timeoutMs?: number;
 }): Promise<string>;
+/**
+ * Streams an HTML response, flushing the synchronous shell first and then
+ * progressively emitting async-resolved fragments as their `<Loading>`
+ * boundaries settle. Good for time-to-first-byte sensitive pages.
+ *
+ * Returns an object with `pipe`/`pipeTo` for piping to a Node `Writable` or
+ * a Web `WritableStream`, plus a `then` for awaiting full completion.
+ *
+ * @example
+ * ```tsx
+ * import { renderToStream } from "@solidjs/web";
+ *
+ * // Node:
+ * renderToStream(() => <App />).pipe(res);
+ *
+ * // Web (Workers / Deno):
+ * await renderToStream(() => <App />).pipeTo(stream.writable);
+ * ```
+ */
 export declare function renderToStream<T>(fn: () => T, options?: {
@@ -59,17 +108,25 @@ nonce?: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for tagged-template SSR output. Not meant for hand-written code. */
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
+/** Compiler primitive — emitted by JSX-DOM-Expressions for SSR element output. Not meant for hand-written code. */
 export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
     t: string;
 };
+/** Compiler primitive — serializes a classList object for SSR output. Not meant for hand-written code. */
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
+/** Compiler primitive — serializes a style object for SSR output. Not meant for hand-written code. */
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
+/** Compiler primitive — serializes a boolean attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrAttribute(key: string, value: boolean): string;
+/** Compiler primitive — generates the hydration-key attribute for SSR output. Not meant for hand-written code. */
 export declare function ssrHydrationKey(): string;
+/** Compiler primitive — collapses an SSR-shaped node into its HTML string. Not meant for hand-written code. */
 export declare function resolveSSRNode(node: any): string;
+/** Escapes a string for safe inclusion in HTML output. Useful when constructing SSR fragments by hand. */
 export declare function escape(html: string): string;

types/server.d.ts

@@ -7,2 +7,4 @@ import { JSX } from "./jsx.js";
 export const MathMLElements: Set<string>;
+export const VoidElements: Set<string>;
+export const RawTextElements: Set<string>;
 export const Namespaces: Record<string, string>;
@@ -9,0 +11,0 @@

No alert changes

Improved metrics

Total package byte prevSize

274122

7.19%

Dependency count

3

-25%

Dev dependency count

1

-50%

Lines of code

6234

4.16%

Number of lines in readme file

31

287.5%

No dependency changes