@solidjs/web 2.0.0-beta.1 → 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.");
   }
@@ -256,6 +259,12 @@ function insert(parent, accessor, marker, initial) {
     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) {
@@ -276,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 = {};
@@ -313,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;
   }
@@ -630,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";

package/dist/dev.js

@@ -1,5 +1,6 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot, flatten, omit, $DEVCOMP, enableHydration } 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.");
   }
@@ -255,6 +258,12 @@ function insert(parent, accessor, marker, initial) {
     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) {
@@ -275,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 = {};
@@ -312,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;
   }
@@ -629,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";
@@ -646,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);
@@ -679,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":

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;

package/dist/server.js

@@ -1,7 +1,8 @@
-import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } 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;

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;
@@ -251,6 +254,12 @@ function insert(parent, accessor, marker, initial) {
     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) {
@@ -271,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 = {};
@@ -300,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;
   }
@@ -576,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";

package/dist/web.js

@@ -1,5 +1,6 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot, flatten, omit, enableHydration } 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;
@@ -250,6 +253,12 @@ function insert(parent, accessor, marker, initial) {
     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) {
@@ -270,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 = {};
@@ -299,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;
   }
@@ -575,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";
@@ -592,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);
@@ -625,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":

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.1",
+  "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.1"
+    "solid-js": "^2.0.0-beta.2",
+    "@solidjs/signals": "^0.12.0"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.1"
+    "solid-js": "2.0.0-beta.2"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

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

@@ -1,6 +1,7 @@
-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 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;

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,6 +1,7 @@
-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 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;