@solidjs/web 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/dev.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var solidJs = require('solid-js');
+var signals = require('@solidjs/signals');
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -22,7 +23,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
   transparent: true
 });
-const memo = fn => solidJs.createMemo(() => fn());
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+  transparent: true
+}) : solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -82,7 +85,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
-function render(code, element, init, options = {}) {
+function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
@@ -242,17 +245,26 @@ function ref(fn, element) {
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
-  if (isHydrating(parent) && Array.isArray(initial)) {
-    let j = 0;
-    for (let i = 0; i < initial.length; i++) {
-      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+  if (isHydrating(parent)) {
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (Array.isArray(initial)) {
+      let j = 0;
+      for (let i = 0; i < initial.length; i++) {
+        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+      }
+      initial.length = j;
     }
-    initial.length = j;
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
+  accessor = memo(accessor, true);
+  if (multi && initial.length === 0 && !isHydrating(parent)) {
+    const placeholder = document.createTextNode("");
+    parent.insertBefore(placeholder, marker);
+    initial = [placeholder];
+  }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
@@ -273,7 +285,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
   }
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -310,7 +322,7 @@ function hydrate$1(code, element, options = {}) {
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -602,12 +614,6 @@ function gatherHydratable(element, root) {
 function getHydrationKey() {
   return solidJs.sharedConfig.getNextContextId();
 }
-function NoHydration(props) {
-  return solidJs.sharedConfig.hydrating ? undefined : props.children;
-}
-function Hydration(props) {
-  return props.children;
-}
 const voidFn = () => undefined;
 const RequestContext = Symbol();
 
@@ -633,6 +639,31 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
+function render(...args) {
+  let unhandledAsync = false;
+  {
+    solidJs.setOnUnhandledAsync(() => {
+      unhandledAsync = true;
+    });
+  }
+  const result = render$1(...args);
+  {
+    solidJs.setOnUnhandledAsync(null);
+    if (unhandledAsync) {
+      const message = "Async content was used in JSX without a <Loading> boundary. " + "Wrap async content in <Loading> to show a fallback while loading.";
+      result();
+      const container = args[1];
+      container.textContent = "";
+      const msg = document.createElement("pre");
+      msg.style.cssText = "color:#e53e3e;background:#fff5f5;border:2px solid #e53e3e;" + "border-radius:4px;padding:16px;margin:16px;font-family:monospace;" + "white-space:pre-wrap;word-break:break-word;";
+      msg.textContent = message;
+      container.appendChild(msg);
+      console.error(message);
+      return () => {};
+    }
+  }
+  return result;
+}
 const isServer = false;
 const isDev = true;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -713,6 +744,10 @@ Object.defineProperty(exports, "For", {
   enumerable: true,
   get: function () { return solidJs.For; }
 });
+Object.defineProperty(exports, "Hydration", {
+  enumerable: true,
+  get: function () { return solidJs.Hydration; }
+});
 Object.defineProperty(exports, "Loading", {
   enumerable: true,
   get: function () { return solidJs.Loading; }
@@ -721,6 +756,10 @@ Object.defineProperty(exports, "Match", {
   enumerable: true,
   get: function () { return solidJs.Match; }
 });
+Object.defineProperty(exports, "NoHydration", {
+  enumerable: true,
+  get: function () { return solidJs.NoHydration; }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
@@ -750,9 +789,7 @@ exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
-exports.Hydration = Hydration;
 exports.HydrationScript = voidFn;
-exports.NoHydration = NoHydration;
 exports.Portal = Portal;
 exports.Properties = Properties;
 exports.RequestContext = RequestContext;

package/dist/dev.js

@@ -1,5 +1,6 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot, flatten, omit, $DEVCOMP, enableHydration } from 'solid-js';
-export { Errored, For, Loading, Match, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, setOnUnhandledAsync } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createMemo } from '@solidjs/signals';
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -21,7 +22,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
   transparent: true
 });
-const memo = fn => createMemo(() => fn());
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+  transparent: true
+}) : createMemo$1(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -81,7 +84,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
-function render(code, element, init, options = {}) {
+function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
@@ -241,17 +244,26 @@ function ref(fn, element) {
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
-  if (isHydrating(parent) && Array.isArray(initial)) {
-    let j = 0;
-    for (let i = 0; i < initial.length; i++) {
-      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+  if (isHydrating(parent)) {
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (Array.isArray(initial)) {
+      let j = 0;
+      for (let i = 0; i < initial.length; i++) {
+        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+      }
+      initial.length = j;
     }
-    initial.length = j;
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
+  accessor = memo(accessor, true);
+  if (multi && initial.length === 0 && !isHydrating(parent)) {
+    const placeholder = document.createTextNode("");
+    parent.insertBefore(placeholder, marker);
+    initial = [placeholder];
+  }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
@@ -272,7 +284,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
   }
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -309,7 +321,7 @@ function hydrate$1(code, element, options = {}) {
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -601,12 +613,6 @@ function gatherHydratable(element, root) {
 function getHydrationKey() {
   return sharedConfig.getNextContextId();
 }
-function NoHydration(props) {
-  return sharedConfig.hydrating ? undefined : props.children;
-}
-function Hydration(props) {
-  return props.children;
-}
 const voidFn = () => undefined;
 const RequestContext = Symbol();
 
@@ -632,6 +638,31 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
+function render(...args) {
+  let unhandledAsync = false;
+  {
+    setOnUnhandledAsync(() => {
+      unhandledAsync = true;
+    });
+  }
+  const result = render$1(...args);
+  {
+    setOnUnhandledAsync(null);
+    if (unhandledAsync) {
+      const message = "Async content was used in JSX without a <Loading> boundary. " + "Wrap async content in <Loading> to show a fallback while loading.";
+      result();
+      const container = args[1];
+      container.textContent = "";
+      const msg = document.createElement("pre");
+      msg.style.cssText = "color:#e53e3e;background:#fff5f5;border:2px solid #e53e3e;" + "border-radius:4px;padding:16px;margin:16px;font-family:monospace;" + "white-space:pre-wrap;word-break:break-word;";
+      msg.textContent = message;
+      container.appendChild(msg);
+      console.error(message);
+      return () => {};
+    }
+  }
+  return result;
+}
 const isServer = false;
 const isDev = true;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -649,7 +680,7 @@ function Portal(props) {
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
     mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = createMemo(() => [startMarker, props.children]);
+  let content = createMemo$1(() => [startMarker, props.children]);
   createRenderEffect(() => [mount(), content()], ([m, c]) => {
     m.appendChild(endMarker);
     insert(m, c, endMarker);
@@ -682,8 +713,8 @@ function createElementProxy(el, marker) {
   });
 }
 function createDynamic(component, props) {
-  const cached = createMemo(component);
-  return createMemo(() => {
+  const cached = createMemo$1(component);
+  return createMemo$1(() => {
     const component = cached();
     switch (typeof component) {
       case "function":
@@ -704,4 +735,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, 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

@@ -3,6 +3,7 @@
 var solidJs = require('solid-js');
 var seroval = require('seroval');
 var web = require('seroval-plugins/web');
+var signals = require('@solidjs/signals');
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -24,7 +25,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
   transparent: true
 });
-const memo = fn => solidJs.createMemo(() => fn());
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+  transparent: true
+}) : solidJs.createMemo(() => fn());
 
 const ES2017FLAG = seroval.Feature.AggregateError
 | seroval.Feature.BigIntTypedArray;
@@ -56,6 +59,7 @@ function getLocalHeaderScript(id) {
 
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
+  const base = manifest._base || "/";
   const entry = manifest[moduleUrl];
   if (!entry) return null;
   const css = [];
@@ -66,8 +70,8 @@ function resolveAssets(moduleUrl, manifest) {
     visited.add(key);
     const e = manifest[key];
     if (!e) return;
-    js.push(e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(e.css[i]);
+    js.push(base + e.file);
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
   };
   walk(moduleUrl);
@@ -646,7 +650,7 @@ function mergeProps(...sources) {
 }
 function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
-  return hydrate && !hydrate.noHydrate && solidJs.sharedConfig.getNextContextId();
+  return hydrate && solidJs.sharedConfig.getNextContextId();
 }
 function applyRef(r, element) {
   Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
@@ -666,27 +670,6 @@ function generateHydrationScript({
 } = {}) {
   return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
-function Hydration(props) {
-  if (!solidJs.sharedConfig.context.noHydrate) return props.children;
-  const context = solidJs.sharedConfig.context;
-  solidJs.sharedConfig.context = {
-    ...context,
-    noHydrate: false
-  };
-  const res = props.children;
-  solidJs.sharedConfig.context = context;
-  return res;
-}
-function NoHydration(props) {
-  let context = solidJs.sharedConfig.context;
-  if (context) solidJs.sharedConfig.context = {
-    ...context,
-    noHydrate: true
-  };
-  const res = props.children;
-  if (context) solidJs.sharedConfig.context = context;
-  return res;
-}
 function queue(fn) {
   return Promise.resolve().then(fn);
 }
@@ -882,6 +865,10 @@ Object.defineProperty(exports, "For", {
   enumerable: true,
   get: function () { return solidJs.For; }
 });
+Object.defineProperty(exports, "Hydration", {
+  enumerable: true,
+  get: function () { return solidJs.Hydration; }
+});
 Object.defineProperty(exports, "Loading", {
   enumerable: true,
   get: function () { return solidJs.Loading; }
@@ -890,6 +877,10 @@ Object.defineProperty(exports, "Match", {
   enumerable: true,
   get: function () { return solidJs.Match; }
 });
+Object.defineProperty(exports, "NoHydration", {
+  enumerable: true,
+  get: function () { return solidJs.NoHydration; }
+});
 Object.defineProperty(exports, "Repeat", {
   enumerable: true,
   get: function () { return solidJs.Repeat; }
@@ -922,9 +913,7 @@ exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
-exports.Hydration = Hydration;
 exports.HydrationScript = HydrationScript;
-exports.NoHydration = NoHydration;
 exports.Portal = Portal;
 exports.Properties = Properties;
 exports.RequestContext = RequestContext;

package/dist/server.js

@@ -1,7 +1,8 @@
-import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
-export { Errored, For, Loading, Match, Repeat, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
+import { createMemo } from '@solidjs/signals';
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -23,7 +24,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
   transparent: true
 });
-const memo = fn => createMemo(() => fn());
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+  transparent: true
+}) : createMemo$1(() => fn());
 
 const ES2017FLAG = Feature.AggregateError
 | Feature.BigIntTypedArray;
@@ -55,6 +58,7 @@ function getLocalHeaderScript(id) {
 
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
+  const base = manifest._base || "/";
   const entry = manifest[moduleUrl];
   if (!entry) return null;
   const css = [];
@@ -65,8 +69,8 @@ function resolveAssets(moduleUrl, manifest) {
     visited.add(key);
     const e = manifest[key];
     if (!e) return;
-    js.push(e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(e.css[i]);
+    js.push(base + e.file);
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
   };
   walk(moduleUrl);
@@ -645,7 +649,7 @@ function mergeProps(...sources) {
 }
 function getHydrationKey() {
   const hydrate = sharedConfig.context;
-  return hydrate && !hydrate.noHydrate && sharedConfig.getNextContextId();
+  return hydrate && sharedConfig.getNextContextId();
 }
 function applyRef(r, element) {
   Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
@@ -665,27 +669,6 @@ function generateHydrationScript({
 } = {}) {
   return `<script${nonce ? ` nonce="${nonce}"` : ""}>window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("_hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()[0]||o.target);s&&!e.completed.has(s)&&e.events.push([s,o])}))))})(_$HY={events:[],completed:new WeakSet,r:{},fe(){}});</script><!--xs-->`;
 }
-function Hydration(props) {
-  if (!sharedConfig.context.noHydrate) return props.children;
-  const context = sharedConfig.context;
-  sharedConfig.context = {
-    ...context,
-    noHydrate: false
-  };
-  const res = props.children;
-  sharedConfig.context = context;
-  return res;
-}
-function NoHydration(props) {
-  let context = sharedConfig.context;
-  if (context) sharedConfig.context = {
-    ...context,
-    noHydrate: true
-  };
-  const res = props.children;
-  if (context) sharedConfig.context = context;
-  return res;
-}
 function queue(fn) {
   return Promise.resolve().then(fn);
 }
@@ -873,4 +856,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };

package/dist/web.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var solidJs = require('solid-js');
+var signals = require('@solidjs/signals');
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -22,7 +23,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
   transparent: true
 });
-const memo = fn => solidJs.createMemo(() => fn());
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+  transparent: true
+}) : solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -82,7 +85,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
-function render(code, element, init, options = {}) {
+function render$1(code, element, init, options = {}) {
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
@@ -237,17 +240,26 @@ function ref(fn, element) {
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
-  if (isHydrating(parent) && Array.isArray(initial)) {
-    let j = 0;
-    for (let i = 0; i < initial.length; i++) {
-      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+  if (isHydrating(parent)) {
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (Array.isArray(initial)) {
+      let j = 0;
+      for (let i = 0; i < initial.length; i++) {
+        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+      }
+      initial.length = j;
     }
-    initial.length = j;
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
+  accessor = memo(accessor, true);
+  if (multi && initial.length === 0 && !isHydrating(parent)) {
+    const placeholder = document.createTextNode("");
+    parent.insertBefore(placeholder, marker);
+    initial = [placeholder];
+  }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
@@ -268,7 +280,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
   }
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -297,7 +309,7 @@ function hydrate$1(code, element, options = {}) {
   solidJs.sharedConfig.hydrating = true;
   try {
     gatherHydratable(element, options.renderId);
-    return render(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -548,12 +560,6 @@ function gatherHydratable(element, root) {
 function getHydrationKey() {
   return solidJs.sharedConfig.getNextContextId();
 }
-function NoHydration(props) {
-  return solidJs.sharedConfig.hydrating ? undefined : props.children;
-}
-function Hydration(props) {
-  return props.children;
-}
 const voidFn = () => undefined;
 const RequestContext = Symbol();
 
@@ -579,6 +585,10 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
+function render(...args) {
+  const result = render$1(...args);
+  return result;
+}
 const isServer = false;
 const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -656,6 +666,10 @@ Object.defineProperty(exports, "For", {
   enumerable: true,
   get: function () { return solidJs.For; }
 });
+Object.defineProperty(exports, "Hydration", {
+  enumerable: true,
+  get: function () { return solidJs.Hydration; }
+});
 Object.defineProperty(exports, "Loading", {
   enumerable: true,
   get: function () { return solidJs.Loading; }
@@ -664,6 +678,10 @@ Object.defineProperty(exports, "Match", {
   enumerable: true,
   get: function () { return solidJs.Match; }
 });
+Object.defineProperty(exports, "NoHydration", {
+  enumerable: true,
+  get: function () { return solidJs.NoHydration; }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
@@ -693,9 +711,7 @@ exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
-exports.Hydration = Hydration;
 exports.HydrationScript = voidFn;
-exports.NoHydration = NoHydration;
 exports.Portal = Portal;
 exports.Properties = Properties;
 exports.RequestContext = RequestContext;

package/dist/web.js

@@ -1,5 +1,6 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot, flatten, omit, enableHydration } from 'solid-js';
-export { Errored, For, Loading, Match, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createMemo } from '@solidjs/signals';
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -21,7 +22,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
   transparent: true
 });
-const memo = fn => createMemo(() => fn());
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+  transparent: true
+}) : createMemo$1(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -81,7 +84,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 const $$EVENTS = "_$DX_DELEGATE";
-function render(code, element, init, options = {}) {
+function render$1(code, element, init, options = {}) {
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
@@ -236,17 +239,26 @@ function ref(fn, element) {
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
-  if (isHydrating(parent) && Array.isArray(initial)) {
-    let j = 0;
-    for (let i = 0; i < initial.length; i++) {
-      if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+  if (isHydrating(parent)) {
+    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (Array.isArray(initial)) {
+      let j = 0;
+      for (let i = 0; i < initial.length; i++) {
+        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
+      }
+      initial.length = j;
     }
-    initial.length = j;
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
+  accessor = memo(accessor, true);
+  if (multi && initial.length === 0 && !isHydrating(parent)) {
+    const placeholder = document.createTextNode("");
+    parent.insertBefore(placeholder, marker);
+    initial = [placeholder];
+  }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
@@ -267,7 +279,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
   }
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -296,7 +308,7 @@ function hydrate$1(code, element, options = {}) {
   sharedConfig.hydrating = true;
   try {
     gatherHydratable(element, options.renderId);
-    return render(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...element.childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -547,12 +559,6 @@ function gatherHydratable(element, root) {
 function getHydrationKey() {
   return sharedConfig.getNextContextId();
 }
-function NoHydration(props) {
-  return sharedConfig.hydrating ? undefined : props.children;
-}
-function Hydration(props) {
-  return props.children;
-}
 const voidFn = () => undefined;
 const RequestContext = Symbol();
 
@@ -578,6 +584,10 @@ function ssrHydrationKey() {}
 function resolveSSRNode(node) {}
 function escape(html) {}
 
+function render(...args) {
+  const result = render$1(...args);
+  return result;
+}
 const isServer = false;
 const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -595,7 +605,7 @@ function Portal(props) {
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
     mount = () => createElementProxy(props.mount || document.body, treeMarker);
-  let content = createMemo(() => [startMarker, props.children]);
+  let content = createMemo$1(() => [startMarker, props.children]);
   createRenderEffect(() => [mount(), content()], ([m, c]) => {
     m.appendChild(endMarker);
     insert(m, c, endMarker);
@@ -628,8 +638,8 @@ function createElementProxy(el, marker) {
   });
 }
 function createDynamic(component, props) {
-  const cached = createMemo(component);
-  return createMemo(() => {
+  const cached = createMemo$1(component);
+  return createMemo$1(() => {
     const component = cached();
     switch (typeof component) {
       case "function":
@@ -647,4 +657,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, 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.0",
+  "version": "2.0.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,10 +75,11 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.0"
+    "solid-js": "^2.0.0-beta.2",
+    "@solidjs/signals": "^0.12.0"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.0"
+    "solid-js": "2.0.0-beta.2"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

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

@@ -1,7 +1,8 @@
-import { hydrate as hydrateCore } from "./client.js";
+import { hydrate as hydrateCore, render as renderCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
-export { For, Show, Switch, Match, Errored, Loading, merge as mergeProps } from "solid-js";
+export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
+export { For, Show, Switch, Match, Errored, Loading, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;

package/types/client.d.ts

@@ -79,8 +79,6 @@ 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 Assets(props: { children?: JSX.Element }): JSX.Element;
-export function Hydration(props: { children?: JSX.Element }): JSX.Element;
-export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
 export interface RequestEvent {
   request: Request;
   locals: Record<string | number | symbol, any>;

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, initial: any) => void;
-export declare const memo: (fn: any) => import("solid-js").Accessor<any>;
+export declare const memo: (fn: any, transparent: any) => any;

package/types/index.d.ts

@@ -1,7 +1,8 @@
-import { hydrate as hydrateCore } from "./client.js";
+import { hydrate as hydrateCore, render as renderCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
-export { For, Show, Switch, Match, Errored, Loading, merge as mergeProps } from "solid-js";
+export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
+export { For, Show, Switch, Match, Errored, Loading, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;

package/types/server.d.ts

@@ -15,6 +15,7 @@ export function renderToString<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
+    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
     onError?: (err: any) => void;
   }
 ): string;
@@ -27,6 +28,7 @@ export function renderToStringAsync<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
+    manifest?: Record<string, { file: string; css?: string[]; isEntry?: boolean; imports?: string[] }> & { _base?: string };
     onError?: (err: any) => void;
   }
 ): Promise<string>;
@@ -37,6 +39,7 @@ export function renderToStream<T>(
     renderId?: string;
     noScripts?: boolean;
     plugins?: any[];
+    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;
@@ -80,8 +83,6 @@ export interface RequestEvent {
 }
 export function getRequestEvent(): RequestEvent | undefined;
 
-export function Hydration(props: { children?: JSX.Element }): JSX.Element;
-export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
 export function Assets(props: { children?: JSX.Element }): JSX.Element;
 export function untrack<T>(fn: () => T): T;