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

package/dist/dev.cjs

@@ -49,9 +49,13 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
@@ -267,7 +271,7 @@ function ref(fn, element) {
   const resolved = solidJs.untrack(fn);
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
@@ -291,7 +295,7 @@ function insert(parent, accessor, marker, initial) {
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -711,18 +715,38 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  solidJs.enforceLoadingBoundary(true);
-  const result = render$1(...args);
-  solidJs.enforceLoadingBoundary(false);
-  return result;
-}
 const isServer = false;
 const isDev = true;
-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, {
-    is
+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, {
+        schedule: true
+      });
+    } finally {
+      solidJs.enforceLoadingBoundary(false);
+    }
+  }, {
+    id: options.renderId
   });
+  solidJs.flush();
+  return () => {
+    disposer();
+    renderRoot.textContent = "";
+  };
 }
 const hydrate = (...args) => {
   solidJs.enableHydration();
@@ -748,23 +772,6 @@ function Portal(props) {
   });
   return treeMarker;
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 function createDynamic(component, props) {
   const cached = solidJs.createMemo(component);
   return solidJs.createMemo(() => {
@@ -786,6 +793,28 @@ function Dynamic(props) {
   const others = solidJs.omit(props, "component");
   return createDynamic(() => props.component, others);
 }
+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, {
+    is
+  });
+}
+function createElementProxy(el, marker) {
+  return new Proxy(el, {
+    get(target, prop) {
+      if (prop === "appendChild" || prop === "insertBefore") {
+        return (...args) => {
+          Object.defineProperty(args[0], "_$host", {
+            get: () => marker.parentNode,
+            configurable: true
+          });
+          target[prop](...args);
+        };
+      }
+      const value = Reflect.get(target, prop);
+      return typeof value === "function" ? value.bind(target) : value;
+    }
+  });
+}
 
 Object.defineProperty(exports, "Errored", {
   enumerable: true,

package/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, 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';
 
@@ -48,9 +48,13 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
@@ -266,7 +270,7 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
@@ -290,7 +294,7 @@ function insert(parent, accessor, marker, initial) {
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -710,18 +714,38 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  enforceLoadingBoundary(true);
-  const result = render$1(...args);
-  enforceLoadingBoundary(false);
-  return result;
-}
 const isServer = false;
 const isDev = true;
-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, {
-    is
+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, {
+        schedule: true
+      });
+    } finally {
+      enforceLoadingBoundary(false);
+    }
+  }, {
+    id: options.renderId
   });
+  flush();
+  return () => {
+    disposer();
+    renderRoot.textContent = "";
+  };
 }
 const hydrate = (...args) => {
   enableHydration();
@@ -747,23 +771,6 @@ function Portal(props) {
   });
   return treeMarker;
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 function createDynamic(component, props) {
   const cached = createMemo$1(component);
   return createMemo$1(() => {
@@ -785,5 +792,27 @@ function Dynamic(props) {
   const others = omit(props, "component");
   return createDynamic(() => props.component, others);
 }
+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, {
+    is
+  });
+}
+function createElementProxy(el, marker) {
+  return new Proxy(el, {
+    get(target, prop) {
+      if (prop === "appendChild" || prop === "insertBefore") {
+        return (...args) => {
+          Object.defineProperty(args[0], "_$host", {
+            get: () => marker.parentNode,
+            configurable: true
+          });
+          target[prop](...args);
+        };
+      }
+      const value = Reflect.get(target, prop);
+      return typeof value === "function" ? value.bind(target) : value;
+    }
+  });
+}
 
 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 };

package/dist/server.cjs

@@ -23,16 +23,20 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
 
-const ES2017FLAG = seroval.Feature.AggregateError
-| seroval.Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = '_$HY.r';
+const ES2017FLAG = seroval.Feature.AggregateError |
+seroval.Feature.BigIntTypedArray;
+const GLOBAL_IDENTIFIER = "_$HY.r";
 function createSerializer({
   onData,
   onDone,
@@ -55,7 +59,7 @@ function createSerializer({
   });
 }
 function getLocalHeaderScript(id) {
-  return seroval.getCrossReferenceHeader(id) + ';';
+  return seroval.getCrossReferenceHeader(id) + ";";
 }
 
 function resolveAssets(moduleUrl, manifest) {
@@ -143,7 +147,7 @@ function applyAssetTracking(context, tracking, manifest) {
   if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
 }
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)if($dfl(e[i]))return e[i];return null}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
@@ -248,8 +252,15 @@ function renderToStream(code, options = {}) {
     onDone,
     onError: options.onError
   });
+  let rootAssetsSerialized = false;
+  const serializeRootAssets = () => {
+    if (rootAssetsSerialized) return;
+    rootAssetsSerialized = true;
+    serializeFragmentAssets("", tracking.boundaryModules, context);
+  };
   const flushEnd = () => {
     if (!registry.size) {
+      serializeRootAssets();
       queue(() => queue(() => serializer.flush()));
     }
   };
@@ -493,7 +504,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
-    serializeFragmentAssets("", tracking.boundaryModules, context);
+    serializeRootAssets();
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";

package/dist/server.js

@@ -22,16 +22,20 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
 
-const ES2017FLAG = Feature.AggregateError
-| Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = '_$HY.r';
+const ES2017FLAG = Feature.AggregateError |
+Feature.BigIntTypedArray;
+const GLOBAL_IDENTIFIER = "_$HY.r";
 function createSerializer({
   onData,
   onDone,
@@ -54,7 +58,7 @@ function createSerializer({
   });
 }
 function getLocalHeaderScript(id) {
-  return getCrossReferenceHeader(id) + ';';
+  return getCrossReferenceHeader(id) + ";";
 }
 
 function resolveAssets(moduleUrl, manifest) {
@@ -142,7 +146,7 @@ function applyAssetTracking(context, tracking, manifest) {
   if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
 }
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)if($dfl(e[i]))return e[i];return null}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
@@ -247,8 +251,15 @@ function renderToStream(code, options = {}) {
     onDone,
     onError: options.onError
   });
+  let rootAssetsSerialized = false;
+  const serializeRootAssets = () => {
+    if (rootAssetsSerialized) return;
+    rootAssetsSerialized = true;
+    serializeFragmentAssets("", tracking.boundaryModules, context);
+  };
   const flushEnd = () => {
     if (!registry.size) {
+      serializeRootAssets();
       queue(() => queue(() => serializer.flush()));
     }
   };
@@ -492,7 +503,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
-    serializeFragmentAssets("", tracking.boundaryModules, context);
+    serializeRootAssets();
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";

package/dist/web.cjs

@@ -49,9 +49,13 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
@@ -262,7 +266,7 @@ function ref(fn, element) {
   const resolved = solidJs.untrack(fn);
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
@@ -286,7 +290,7 @@ function insert(parent, accessor, marker, initial) {
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -654,16 +658,33 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  const result = render$1(...args);
-  return result;
-}
 const isServer = false;
 const isDev = false;
-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, {
-    is
+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, {
+        schedule: true
+      });
+    } finally {
+    }
+  }, {
+    id: options.renderId
   });
+  solidJs.flush();
+  return () => {
+    disposer();
+    renderRoot.textContent = "";
+  };
 }
 const hydrate = (...args) => {
   solidJs.enableHydration();
@@ -689,23 +710,6 @@ function Portal(props) {
   });
   return treeMarker;
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 function createDynamic(component, props) {
   const cached = solidJs.createMemo(component);
   return solidJs.createMemo(() => {
@@ -724,6 +728,28 @@ function Dynamic(props) {
   const others = solidJs.omit(props, "component");
   return createDynamic(() => props.component, others);
 }
+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, {
+    is
+  });
+}
+function createElementProxy(el, marker) {
+  return new Proxy(el, {
+    get(target, prop) {
+      if (prop === "appendChild" || prop === "insertBefore") {
+        return (...args) => {
+          Object.defineProperty(args[0], "_$host", {
+            get: () => marker.parentNode,
+            configurable: true
+          });
+          target[prop](...args);
+        };
+      }
+      const value = Reflect.get(target, prop);
+      return typeof value === "function" ? value.bind(target) : value;
+    }
+  });
+}
 
 Object.defineProperty(exports, "Errored", {
   enumerable: true,

package/dist/web.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, 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';
 
@@ -48,9 +48,13 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
+const transparentOptions = {
   transparent: true
-});
+};
+const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
+  transparent: true,
+  ...options
+} : transparentOptions);
 const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
@@ -261,7 +265,7 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
@@ -285,7 +289,7 @@ function insert(parent, accessor, marker, initial) {
     childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker), options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -653,16 +657,33 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
-function render(...args) {
-  const result = render$1(...args);
-  return result;
-}
 const isServer = false;
 const isDev = false;
-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, {
-    is
+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, {
+        schedule: true
+      });
+    } finally {
+    }
+  }, {
+    id: options.renderId
   });
+  flush();
+  return () => {
+    disposer();
+    renderRoot.textContent = "";
+  };
 }
 const hydrate = (...args) => {
   enableHydration();
@@ -688,23 +709,6 @@ function Portal(props) {
   });
   return treeMarker;
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 function createDynamic(component, props) {
   const cached = createMemo$1(component);
   return createMemo$1(() => {
@@ -723,5 +727,27 @@ function Dynamic(props) {
   const others = omit(props, "component");
   return createDynamic(() => props.component, others);
 }
+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, {
+    is
+  });
+}
+function createElementProxy(el, marker) {
+  return new Proxy(el, {
+    get(target, prop) {
+      if (prop === "appendChild" || prop === "insertBefore") {
+        return (...args) => {
+          Object.defineProperty(args[0], "_$host", {
+            get: () => marker.parentNode,
+            configurable: true
+          });
+          target[prop](...args);
+        };
+      }
+      const value = Reflect.get(target, prop);
+      return typeof value === "function" ? value.bind(target) : value;
+    }
+  });
+}
 
 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -116,12 +116,12 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "@solidjs/signals": "^2.0.0-beta.7",
-    "solid-js": "^2.0.0-beta.7"
+    "@solidjs/signals": "^2.0.0-beta.8",
+    "solid-js": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@solidjs/signals": "2.0.0-beta.7",
-    "solid-js": "2.0.0-beta.7"
+    "@solidjs/signals": "2.0.0-beta.8",
+    "solid-js": "2.0.0-beta.8"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/storage/types/src/index.d.ts

@@ -1,11 +1,30 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.js";
+import { hydrate as hydrateCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
-export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders a component tree into a DOM element and returns a dispose function.
+ *
+ * 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.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
 export declare const hydrate: typeof hydrateCore;
 /**
  * Renders components somewhere else in the DOM
@@ -18,11 +37,6 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     mount?: Element;
     children: JSX.Element;
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
  * Renders an arbitrary component or element with the given props
  *

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

@@ -1,11 +1,30 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.cjs";
+import { hydrate as hydrateCore } from "./client.cjs";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.cjs";
-export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.cjs";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders a component tree into a DOM element and returns a dispose function.
+ *
+ * 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.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
 export declare const hydrate: typeof hydrateCore;
 /**
  * Renders components somewhere else in the DOM
@@ -18,11 +37,6 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     mount?: Element;
     children: JSX.Element;
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
  * Renders an arbitrary component or element with the given props
  *

package/types/client.d.ts

@@ -33,11 +33,7 @@ export function insert<T>(
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function delegateEvents(eventNames: string[], d?: Document): void;
 export function clearDelegatedEvents(d?: Document): void;
-export function spread<T>(
-  node: Element,
-  accessor: T,
-  skipChildren?: Boolean
-): void;
+export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 export function assign(
   node: Element,
   props: any,
@@ -50,7 +46,11 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
 type ClassList =
   | Record<string, boolean>
   | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
+export function className(
+  node: Element,
+  value: string | ClassList,
+  prev?: string | ClassList
+): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function setStyleProperty(node: Element, name: string, value: any): void;
 export function addEventListener(
@@ -67,8 +67,14 @@ export function style(
 export function getOwner(): unknown;
 export function mergeProps(...sources: unknown[]): unknown;
 export function dynamicProperty(props: unknown, key: string): unknown;
-export function applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
-export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
+export function applyRef(
+  r: ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
+export function ref(
+  fn: () => ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
 
 export function hydrate(
   fn: () => JSX.Element,
@@ -82,7 +88,10 @@ export function getNextMarker(start: Node): [Node, Array<Node>];
 export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
 export function HydrationScript(props?: { nonce?: string; eventNames?: string[] }): JSX.Element;
-export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
+export function generateHydrationScript(options?: {
+  nonce?: string;
+  eventNames?: string[];
+}): string;
 export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export interface RequestEvent {
   request: Request;

package/types/core.d.ts

@@ -1,3 +1,3 @@
 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) => void;
+export declare const effect: (fn: any, effectFn: any, options: any) => void;
 export declare const memo: (fn: any, transparent: any) => any;

package/types/index.d.ts

@@ -1,11 +1,30 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.js";
+import { hydrate as hydrateCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
-export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders a component tree into a DOM element and returns a dispose function.
+ *
+ * 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.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
 export declare const hydrate: typeof hydrateCore;
 /**
  * Renders components somewhere else in the DOM
@@ -18,11 +37,6 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     mount?: Element;
     children: JSX.Element;
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
  * Renders an arbitrary component or element with the given props
  *

package/types/server.d.ts

@@ -15,7 +15,10 @@ export function renderToString<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    manifest?: Record<
+      string,
+      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+    > & { _base?: string };
     onError?: (err: any) => void;
   }
 ): string;
@@ -28,7 +31,10 @@ export function renderToStringAsync<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    manifest?: Record<
+      string,
+      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+    > & { _base?: string };
     onError?: (err: any) => void;
   }
 ): Promise<string>;
@@ -39,7 +45,10 @@ export function renderToStream<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    manifest?: Record<
+      string,
+      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+    > & { _base?: string };
     onCompleteShell?: (info: { write: (v: string) => void }) => void;
     onCompleteAll?: (info: { write: (v: string) => void }) => void;
     onError?: (err: any) => void;
@@ -65,7 +74,10 @@ export function ssrAttribute(key: string, value: any): string;
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function escape(s: any, attr?: boolean): any;
-export function applyRef(r: ((element: any) => void) | ((element: any) => void)[], element: any): void;
+export function applyRef(
+  r: ((element: any) => void) | ((element: any) => void)[],
+  element: any
+): void;
 export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
 export function getHydrationKey(): string | undefined;
@@ -75,7 +87,10 @@ export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): J
 export function mergeProps(...sources: unknown[]): unknown;
 export function getOwner(): unknown;
 export function ssrRunInScope(fn: () => void, owner: unknown): void;
-export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
+export function generateHydrationScript(options?: {
+  nonce?: string;
+  eventNames?: string[];
+}): string;
 export declare const RequestContext: unique symbol;
 export interface RequestEvent {
   request: Request;
@@ -104,11 +119,7 @@ export function insert<T>(
 ): JSX.Element;
 
 /** @deprecated not supported on the server side */
-export function spread<T>(
-  node: Element,
-  accessor: T,
-  skipChildren?: Boolean
-): void;
+export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 
 /** @deprecated not supported on the server side */
 export function delegateEvents(eventNames: string[], d?: Document): void;

package/types-cjs/client.d.cts

@@ -33,11 +33,7 @@ export function insert<T>(
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function delegateEvents(eventNames: string[], d?: Document): void;
 export function clearDelegatedEvents(d?: Document): void;
-export function spread<T>(
-  node: Element,
-  accessor: T,
-  skipChildren?: Boolean
-): void;
+export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 export function assign(
   node: Element,
   props: any,
@@ -50,7 +46,11 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
 type ClassList =
   | Record<string, boolean>
   | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
+export function className(
+  node: Element,
+  value: string | ClassList,
+  prev?: string | ClassList
+): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function setStyleProperty(node: Element, name: string, value: any): void;
 export function addEventListener(
@@ -67,8 +67,14 @@ export function style(
 export function getOwner(): unknown;
 export function mergeProps(...sources: unknown[]): unknown;
 export function dynamicProperty(props: unknown, key: string): unknown;
-export function applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
-export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
+export function applyRef(
+  r: ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
+export function ref(
+  fn: () => ((element: Element) => void) | ((element: Element) => void)[],
+  element: Element
+): void;
 
 export function hydrate(
   fn: () => JSX.Element,
@@ -82,7 +88,10 @@ export function getNextMarker(start: Node): [Node, Array<Node>];
 export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
 export function HydrationScript(props?: { nonce?: string; eventNames?: string[] }): JSX.Element;
-export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
+export function generateHydrationScript(options?: {
+  nonce?: string;
+  eventNames?: string[];
+}): string;
 export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export interface RequestEvent {
   request: Request;

package/types-cjs/core.d.cts

@@ -1,3 +1,3 @@
 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) => void;
+export declare const effect: (fn: any, effectFn: any, options: any) => void;
 export declare const memo: (fn: any, transparent: any) => any;

package/types-cjs/index.d.cts

@@ -1,11 +1,30 @@
-import { hydrate as hydrateCore, render as renderCore } from "./client.cjs";
+import { hydrate as hydrateCore } from "./client.cjs";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.cjs";
-export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.cjs";
+export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders a component tree into a DOM element and returns a dispose function.
+ *
+ * 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.
+ */
+export declare function render(code: () => JSX.Element, element: MountableElement, init?: unknown, options?: {
+    renderId?: string;
+}): () => void;
 export declare const hydrate: typeof hydrateCore;
 /**
  * Renders components somewhere else in the DOM
@@ -18,11 +37,6 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     mount?: Element;
     children: JSX.Element;
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
  * Renders an arbitrary component or element with the given props
  *

package/types-cjs/server.d.cts

@@ -15,7 +15,10 @@ export function renderToString<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    manifest?: Record<
+      string,
+      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+    > & { _base?: string };
     onError?: (err: any) => void;
   }
 ): string;
@@ -28,7 +31,10 @@ export function renderToStringAsync<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    manifest?: Record<
+      string,
+      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+    > & { _base?: string };
     onError?: (err: any) => void;
   }
 ): Promise<string>;
@@ -39,7 +45,10 @@ export function renderToStream<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
-    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
+    manifest?: Record<
+      string,
+      { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }
+    > & { _base?: string };
     onCompleteShell?: (info: { write: (v: string) => void }) => void;
     onCompleteAll?: (info: { write: (v: string) => void }) => void;
     onError?: (err: any) => void;
@@ -65,7 +74,10 @@ export function ssrAttribute(key: string, value: any): string;
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function escape(s: any, attr?: boolean): any;
-export function applyRef(r: ((element: any) => void) | ((element: any) => void)[], element: any): void;
+export function applyRef(
+  r: ((element: any) => void) | ((element: any) => void)[],
+  element: any
+): void;
 export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
 export function getHydrationKey(): string | undefined;
@@ -75,7 +87,10 @@ export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): J
 export function mergeProps(...sources: unknown[]): unknown;
 export function getOwner(): unknown;
 export function ssrRunInScope(fn: () => void, owner: unknown): void;
-export function generateHydrationScript(options?: { nonce?: string; eventNames?: string[] }): string;
+export function generateHydrationScript(options?: {
+  nonce?: string;
+  eventNames?: string[];
+}): string;
 export declare const RequestContext: unique symbol;
 export interface RequestEvent {
   request: Request;
@@ -104,11 +119,7 @@ export function insert<T>(
 ): JSX.Element;
 
 /** @deprecated not supported on the server side */
-export function spread<T>(
-  node: Element,
-  accessor: T,
-  skipChildren?: Boolean
-): void;
+export function spread<T>(node: Element, accessor: T, skipChildren?: Boolean): void;
 
 /** @deprecated not supported on the server side */
 export function delegateEvents(eventNames: string[], d?: Document): void;