solid-js 1.7.0-beta.4 → 1.7.0

package/dist/dev.cjs

@@ -1400,6 +1400,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Attempting to access a stale value from <${name}> that could possibly be undefined. This may occur because you are reading the accessor returned from the component at a time where it has already been unmounted. We recommend cleaning up any stale timers or async, or reading from the initial condition.` ;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1427,7 +1428,10 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : createMemo(p => condition() ? props.when : p))) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (!untrack(condition)) throw narrowedError("Show");
+        return props.when;
+      })) : child;
     }
     return props.fallback;
   }, undefined, {
@@ -1458,7 +1462,10 @@ function Switch(props) {
     if (index < 0) return props.fallback;
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : createMemo(p => evalConditions()[0] === index ? cond.when : p))) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
+      return cond.when;
+    })) : c;
   }, undefined, {
     name: "value"
   } );

package/dist/dev.js

@@ -1398,6 +1398,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Attempting to access a stale value from <${name}> that could possibly be undefined. This may occur because you are reading the accessor returned from the component at a time where it has already been unmounted. We recommend cleaning up any stale timers or async, or reading from the initial condition.` ;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1425,7 +1426,10 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : createMemo(p => condition() ? props.when : p))) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (!untrack(condition)) throw narrowedError("Show");
+        return props.when;
+      })) : child;
     }
     return props.fallback;
   }, undefined, {
@@ -1456,7 +1460,10 @@ function Switch(props) {
     if (index < 0) return props.fallback;
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : createMemo(p => evalConditions()[0] === index ? cond.when : p))) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
+      return cond.when;
+    })) : c;
   }, undefined, {
     name: "value"
   } );

package/dist/server.cjs

@@ -601,9 +601,9 @@ function Suspense(props) {
   });
   function suspenseError(err) {
     if (!done || !done(undefined, err)) {
-      if (o) runWithOwner(o.owner, () => {
+      runWithOwner(o.owner, () => {
         throw err;
-      });else throw err;
+      });
     }
   }
   function runSuspense() {
@@ -611,7 +611,7 @@ function Suspense(props) {
       ...ctx,
       count: 0
     });
-    o && cleanNode(o);
+    cleanNode(o);
     return runWithOwner(o, () => createComponent(SuspenseContext.Provider, {
       value,
       get children() {

package/dist/server.js

@@ -599,9 +599,9 @@ function Suspense(props) {
   });
   function suspenseError(err) {
     if (!done || !done(undefined, err)) {
-      if (o) runWithOwner(o.owner, () => {
+      runWithOwner(o.owner, () => {
         throw err;
-      });else throw err;
+      });
     }
   }
   function runSuspense() {
@@ -609,7 +609,7 @@ function Suspense(props) {
       ...ctx,
       count: 0
     });
-    o && cleanNode(o);
+    cleanNode(o);
     return runWithOwner(o, () => createComponent(SuspenseContext.Provider, {
       value,
       get children() {

package/dist/solid.cjs

@@ -1353,6 +1353,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Stale read from <${name}>.`;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1375,7 +1376,10 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : createMemo(p => condition() ? props.when : p))) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (!untrack(condition)) throw narrowedError("Show");
+        return props.when;
+      })) : child;
     }
     return props.fallback;
   }, undefined, undefined);
@@ -1403,7 +1407,10 @@ function Switch(props) {
     if (index < 0) return props.fallback;
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : createMemo(p => evalConditions()[0] === index ? cond.when : p))) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
+      return cond.when;
+    })) : c;
   }, undefined, undefined);
 }
 function Match(props) {

package/dist/solid.js

@@ -1351,6 +1351,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Stale read from <${name}>.`;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1373,7 +1374,10 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : createMemo(p => condition() ? props.when : p))) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (!untrack(condition)) throw narrowedError("Show");
+        return props.when;
+      })) : child;
     }
     return props.fallback;
   }, undefined, undefined);
@@ -1401,7 +1405,10 @@ function Switch(props) {
     if (index < 0) return props.fallback;
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : createMemo(p => evalConditions()[0] === index ? cond.when : p))) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
+      return cond.when;
+    })) : c;
   }, undefined, undefined);
 }
 function Match(props) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.0-beta.4",
+  "version": "1.7.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -279,8 +279,8 @@
     "types:universal": "tsc --project ./universal/tsconfig.json && ncp ../../node_modules/dom-expressions/src/universal.d.ts ./universal/types/universal.d.ts",
     "bench": "node --allow-natives-syntax bench/bench.cjs",
     "link": "symlink-dir . node_modules/solid-js",
-    "test": "jest",
-    "coverage": "jest --coverage",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "test-types": "tsc --project tsconfig.test.json"
   }
 }

package/types/jsx.d.ts

@@ -847,13 +847,13 @@ export namespace JSX {
     allow?: string;
     allowfullscreen?: boolean;
     height?: number | string;
+    loading?: "eager" | "lazy";
     name?: string;
     referrerpolicy?: HTMLReferrerPolicy;
     sandbox?: HTMLIframeSandbox | string;
     src?: string;
     srcdoc?: string;
     width?: number | string;
-    loading?: "eager" | "lazy";
     referrerPolicy?: HTMLReferrerPolicy;
   }
   interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -879,6 +879,7 @@ export namespace JSX {
     accept?: string;
     alt?: string;
     autocomplete?: string;
+    autocorrect?: "on" | "off";
     autofocus?: boolean;
     capture?: boolean | string;
     checked?: boolean;
@@ -892,6 +893,7 @@ export namespace JSX {
     formnovalidate?: boolean;
     formtarget?: string;
     height?: number | string;
+    incremental?: boolean;
     list?: string;
     max?: number | string;
     maxlength?: number | string;
@@ -902,6 +904,7 @@ export namespace JSX {
     pattern?: string;
     placeholder?: string;
     readonly?: boolean;
+    results?: number;
     required?: boolean;
     size?: number | string;
     src?: string;

package/web/dist/dev.cjs

@@ -581,15 +581,13 @@ function Portal(props) {
       return () => s() && props.children;
     } else return () => props.children;
   }
-  solidJs.createRenderEffect(() => {
+  solidJs.createEffect(() => {
     const el = mount();
     if (el instanceof HTMLHeadElement) {
       const [clean, setClean] = solidJs.createSignal(false);
       const cleanup = () => setClean(true);
       solidJs.createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
-      solidJs.onCleanup(() => {
-        if (solidJs.sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-      });
+      solidJs.onCleanup(cleanup);
     } else {
       const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
         renderRoot = useShadow && container.attachShadow ? container.attachShadow({

package/web/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
+import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createMemo, createSignal, onMount, createEffect, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -580,15 +580,13 @@ function Portal(props) {
       return () => s() && props.children;
     } else return () => props.children;
   }
-  createRenderEffect(() => {
+  createEffect(() => {
     const el = mount();
     if (el instanceof HTMLHeadElement) {
       const [clean, setClean] = createSignal(false);
       const cleanup = () => setClean(true);
       createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
-      onCleanup(() => {
-        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-      });
+      onCleanup(cleanup);
     } else {
       const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
         renderRoot = useShadow && container.attachShadow ? container.attachShadow({

package/web/dist/web.cjs

@@ -581,15 +581,13 @@ function Portal(props) {
       return () => s() && props.children;
     } else return () => props.children;
   }
-  solidJs.createRenderEffect(() => {
+  solidJs.createEffect(() => {
     const el = mount();
     if (el instanceof HTMLHeadElement) {
       const [clean, setClean] = solidJs.createSignal(false);
       const cleanup = () => setClean(true);
       solidJs.createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
-      solidJs.onCleanup(() => {
-        if (solidJs.sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-      });
+      solidJs.onCleanup(cleanup);
     } else {
       const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
         renderRoot = useShadow && container.attachShadow ? container.attachShadow({

package/web/dist/web.js

@@ -1,4 +1,4 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
+import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createMemo, createSignal, onMount, createEffect, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -580,15 +580,13 @@ function Portal(props) {
       return () => s() && props.children;
     } else return () => props.children;
   }
-  createRenderEffect(() => {
+  createEffect(() => {
     const el = mount();
     if (el instanceof HTMLHeadElement) {
       const [clean, setClean] = createSignal(false);
       const cleanup = () => setClean(true);
       createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
-      onCleanup(() => {
-        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-      });
+      onCleanup(cleanup);
     } else {
       const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
         renderRoot = useShadow && container.attachShadow ? container.attachShadow({