@solidjs/web - npm Package Compare versions

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

dist/dev.cjs

@@ -52,5 +52,9 @@ 'use strict';
 
-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(), {
@@ -271,3 +275,3 @@ transparent: true
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
@@ -296,3 +300,3 @@ const multi = marker !== undefined;
   }
-  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);
 }
@@ -717,14 +721,34 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 
-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 = "";
+  };
 }
@@ -755,19 +779,2 @@ const hydrate = (...args) => {
 }
-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) {
@@ -794,2 +801,24 @@ const cached = solidJs.createMemo(component);
 }
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+    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;
+    }
+  });
+}
 
@@ -796,0 +825,0 @@ Object.defineProperty(exports, "Errored", {

dist/dev.js

@@ -1,2 +0,2 @@
-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';
@@ -51,5 +51,9 @@ import { createMemo } from '@solidjs/signals';
 
-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(), {
@@ -270,3 +274,3 @@ transparent: true
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
@@ -295,3 +299,3 @@ const multi = marker !== undefined;
   }
-  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);
 }
@@ -716,14 +720,34 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 
-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 = "";
+  };
 }
@@ -754,19 +778,2 @@ const hydrate = (...args) => {
 }
-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) {
@@ -793,3 +800,25 @@ const cached = createMemo$1(component);
 }
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+    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 };

dist/server.cjs

@@ -26,5 +26,9 @@ 'use strict';
 
-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(), {
@@ -34,5 +38,5 @@ transparent: true
 
-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({
@@ -60,3 +64,3 @@ onData,
 function getLocalHeaderScript(id) {
-  return seroval.getCrossReferenceHeader(id) + ';';
+  return seroval.getCrossReferenceHeader(id) + ";";
 }
@@ -149,3 +153,3 @@
 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 = {}) {
@@ -255,4 +259,11 @@ const {
   });
+  let rootAssetsSerialized = false;
+  const serializeRootAssets = () => {
+    if (rootAssetsSerialized) return;
+    rootAssetsSerialized = true;
+    serializeFragmentAssets("", tracking.boundaryModules, context);
+  };
   const flushEnd = () => {
     if (!registry.size) {
+      serializeRootAssets();
       queue(() => queue(() => serializer.flush()));
@@ -501,3 +512,3 @@ }
     html = injectPreloadLinks(tracking.emittedAssets, html);
-    serializeFragmentAssets("", tracking.boundaryModules, context);
+    serializeRootAssets();
     if (tasks.length) html = injectScripts(html, tasks, nonce);
@@ -504,0 +515,0 @@ buffer.write(html);

dist/server.js

@@ -25,5 +25,9 @@ import { createRenderEffect, createMemo as createMemo$1, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
 
-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(), {
@@ -33,5 +37,5 @@ transparent: true
 
-const ES2017FLAG = Feature.AggregateError
-| Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = '_$HY.r';
+const ES2017FLAG = Feature.AggregateError |
+Feature.BigIntTypedArray;
+const GLOBAL_IDENTIFIER = "_$HY.r";
 function createSerializer({
@@ -59,3 +63,3 @@ onData,
 function getLocalHeaderScript(id) {
-  return getCrossReferenceHeader(id) + ';';
+  return getCrossReferenceHeader(id) + ";";
 }
@@ -148,3 +152,3 @@
 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 = {}) {
@@ -254,4 +258,11 @@ const {
   });
+  let rootAssetsSerialized = false;
+  const serializeRootAssets = () => {
+    if (rootAssetsSerialized) return;
+    rootAssetsSerialized = true;
+    serializeFragmentAssets("", tracking.boundaryModules, context);
+  };
   const flushEnd = () => {
     if (!registry.size) {
+      serializeRootAssets();
       queue(() => queue(() => serializer.flush()));
@@ -500,3 +511,3 @@ }
     html = injectPreloadLinks(tracking.emittedAssets, html);
-    serializeFragmentAssets("", tracking.boundaryModules, context);
+    serializeRootAssets();
     if (tasks.length) html = injectScripts(html, tasks, nonce);
@@ -503,0 +514,0 @@ buffer.write(html);

dist/web.cjs

@@ -52,5 +52,9 @@ 'use strict';
 
-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(), {
@@ -266,3 +270,3 @@ transparent: true
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
@@ -291,3 +295,3 @@ const multi = marker !== undefined;
   }
-  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);
 }
@@ -660,12 +664,29 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 
-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 = "";
+  };
 }
@@ -696,19 +717,2 @@ const hydrate = (...args) => {
 }
-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) {
@@ -732,2 +736,24 @@ const cached = solidJs.createMemo(component);
 }
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+    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;
+    }
+  });
+}
 
@@ -734,0 +760,0 @@ Object.defineProperty(exports, "Errored", {

dist/web.js

@@ -1,2 +0,2 @@
-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';
@@ -51,5 +51,9 @@ import { createMemo } from '@solidjs/signals';
 
-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(), {
@@ -265,3 +269,3 @@ transparent: true
 }
-function insert(parent, accessor, marker, initial) {
+function insert(parent, accessor, marker, initial, options) {
   const childRoot = getChildRoot(parent);
@@ -290,3 +294,3 @@ const multi = marker !== undefined;
   }
-  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);
 }
@@ -659,12 +663,29 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
 
-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 = "";
+  };
 }
@@ -695,19 +716,2 @@ const hydrate = (...args) => {
 }
-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) {
@@ -731,3 +735,25 @@ const cached = createMemo$1(component);
 }
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+    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.json

 {
   "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",
@@ -119,8 +119,8 @@ "license": "MIT",
   "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"
   },
@@ -127,0 +127,0 @@ "scripts": {

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

@@ -1,9 +0,28 @@
-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 * from "./server-mock.cjs";
 export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
-export * from "./server-mock.cjs";
 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;
@@ -21,7 +40,2 @@ /**
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
@@ -28,0 +42,0 @@ * Renders an arbitrary component or element with the given props

storage/types/src/index.d.ts

@@ -1,9 +0,28 @@
-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 * from "./server-mock.js";
 export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
-export * from "./server-mock.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;
@@ -21,7 +40,2 @@ /**
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
@@ -28,0 +42,0 @@ * Renders an arbitrary component or element with the given props

types-cjs/client.d.cts

@@ -36,7 +36,3 @@ import { JSX } from "./jsx.cjs";
 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(
@@ -54,3 +50,7 @@ node: Element,
   | 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;
@@ -72,4 +72,10 @@ export function setStyleProperty(node: Element, name: string, value: any): void;
 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;
 
@@ -88,3 +94,6 @@ export function hydrate(
 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;
@@ -91,0 +100,0 @@ export interface RequestEvent {

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

types-cjs/index.d.cts

@@ -1,9 +0,28 @@
-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 * from "./server-mock.cjs";
 export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
-export * from "./server-mock.cjs";
 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;
@@ -21,7 +40,2 @@ /**
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
@@ -28,0 +42,0 @@ * Renders an arbitrary component or element with the given props

types-cjs/server.d.cts

@@ -18,3 +18,6 @@ import { JSX } from "./jsx.cjs";
     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;
@@ -32,3 +35,6 @@ }
     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;
@@ -44,3 +50,6 @@ }
     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;
@@ -71,3 +80,6 @@ onCompleteAll?: (info: { write: (v: string) => void }) => void;
 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;
@@ -82,3 +94,6 @@ export function getAssets(): string;
 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;
@@ -112,7 +127,3 @@ export interface RequestEvent {
 /** @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;
 
@@ -119,0 +130,0 @@ /** @deprecated not supported on the server side */

types/client.d.ts

@@ -36,7 +36,3 @@ import { JSX } from "./jsx.js";
 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(
@@ -54,3 +50,7 @@ node: Element,
   | 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;
@@ -72,4 +72,10 @@ export function setStyleProperty(node: Element, name: string, value: any): void;
 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;
 
@@ -88,3 +94,6 @@ export function hydrate(
 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;
@@ -91,0 +100,0 @@ export interface RequestEvent {

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

types/index.d.ts

@@ -1,9 +0,28 @@
-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 * from "./server-mock.js";
 export { For, Show, Switch, Match, Errored, Loading, Repeat, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
-export * from "./server-mock.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;
@@ -21,7 +40,2 @@ /**
 }): Text;
-export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
-    [K in keyof P]: P[K];
-} & {
-    component: T | undefined;
-};
 /**
@@ -28,0 +42,0 @@ * Renders an arbitrary component or element with the given props

types/server.d.ts

@@ -18,3 +18,6 @@ import { JSX } from "./jsx.js";
     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;
@@ -32,3 +35,6 @@ }
     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;
@@ -44,3 +50,6 @@ }
     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;
@@ -71,3 +80,6 @@ onCompleteAll?: (info: { write: (v: string) => void }) => void;
 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;
@@ -82,3 +94,6 @@ export function getAssets(): string;
 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;
@@ -112,7 +127,3 @@ export interface RequestEvent {
 /** @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;
 
@@ -119,0 +130,0 @@ /** @deprecated not supported on the server side */

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Improved metrics

Total package byte prevSize

255734

2.63%

Lines of code

5985

3.1%

No dependency changes