solid-js 1.5.0-beta.2 → 1.5.0-beta.3

package/dist/solid.cjs

@@ -166,7 +166,7 @@ function createRoot(fn, detachedOwner) {
     context: null,
     owner: detachedOwner || owner
   },
-        updateFn = unowned ? fn : () => fn(() => cleanNode(root));
+        updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
   Owner = root;
   Listener = null;
   try {
@@ -264,7 +264,7 @@ function createResource(pSource, pFetcher, pOptions) {
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
     let v;
-    if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
+    if (options.useInitialValue) initP = options.initialValue;else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
   }
   function loadEnd(p, v, success, key) {
     if (pr === p) {
@@ -907,7 +907,7 @@ function resolveChildren(children) {
 function createProvider(id) {
   return function provider(props) {
     let res;
-    createComputed(() => res = untrack(() => {
+    createRenderEffect(() => res = untrack(() => {
       Owner.context = {
         [id]: props.value
       };
@@ -1282,6 +1282,7 @@ function Index(props) {
 }
 function Show(props) {
   let strictEqual = false;
+  const keyed = props.keyed;
   const condition = createMemo(() => props.when, undefined, {
     equals: (a, b) => strictEqual ? a === b : !a === !b
   });
@@ -1289,20 +1290,26 @@ function Show(props) {
     const c = condition();
     if (c) {
       const child = props.children;
-      return (strictEqual = typeof child === "function" && child.length > 0) ? untrack(() => child(c)) : child;
+      const fn = typeof child === "function" && child.length > 0;
+      strictEqual = keyed || fn;
+      return fn ? untrack(() => child(c)) : child;
     }
     return props.fallback;
   });
 }
 function Switch(props) {
   let strictEqual = false;
+  let keyed = false;
   const conditions = children(() => props.children),
         evalConditions = createMemo(() => {
     let conds = conditions();
     if (!Array.isArray(conds)) conds = [conds];
     for (let i = 0; i < conds.length; i++) {
       const c = conds[i].when;
-      if (c) return [i, c, conds[i]];
+      if (c) {
+        keyed = !!conds[i].keyed;
+        return [i, c, conds[i]];
+      }
     }
     return [-1];
   }, undefined, {
@@ -1312,7 +1319,9 @@ function Switch(props) {
     const [index, when, cond] = evalConditions();
     if (index < 0) return props.fallback;
     const c = cond.children;
-    return (strictEqual = typeof c === "function" && c.length > 0) ? untrack(() => c(when)) : c;
+    const fn = typeof c === "function" && c.length > 0;
+    strictEqual = keyed || fn;
+    return fn ? untrack(() => c(when)) : c;
   });
 }
 function Match(props) {
@@ -1343,74 +1352,85 @@ function ErrorBoundary(props) {
   });
 }
 
+const suspenseListEquals = (a, b) => a.showContent === b.showContent && a.showFallback === b.showFallback;
 const SuspenseListContext = createContext();
 function SuspenseList(props) {
-  let suspenseSetter, showContent, showFallback;
+  let [wrapper, setWrapper] = createSignal(() => ({
+    inFallback: false
+  })),
+      show;
   const listContext = useContext(SuspenseListContext);
+  const [registry, setRegistry] = createSignal([]);
   if (listContext) {
-    const [inFallback, setFallback] = createSignal(false);
-    suspenseSetter = setFallback;
-    [showContent, showFallback] = listContext.register(inFallback);
+    show = listContext.register(createMemo(() => wrapper()().inFallback));
   }
-  const [registry, setRegistry] = createSignal([]),
-        comp = createComponent(SuspenseListContext.Provider, {
-    value: {
-      register: inFallback => {
-        const [showingContent, showContent] = createSignal(false),
-              [showingFallback, showFallback] = createSignal(false);
-        setRegistry(registry => [...registry, {
-          inFallback,
-          showContent,
-          showFallback
-        }]);
-        return [showingContent, showingFallback];
-      }
-    },
-    get children() {
-      return props.children;
-    }
-  });
-  createComputed(() => {
+  const resolved = createMemo(prev => {
     const reveal = props.revealOrder,
           tail = props.tail,
-          visibleContent = showContent ? showContent() : true,
-          visibleFallback = showFallback ? showFallback() : true,
+          {
+      showContent = true,
+      showFallback = true
+    } = show ? show() : {},
           reg = registry(),
           reverse = reveal === "backwards";
     if (reveal === "together") {
-      const all = reg.every(i => !i.inFallback());
-      suspenseSetter && suspenseSetter(!all);
-      reg.forEach(i => {
-        i.showContent(all && visibleContent);
-        i.showFallback(visibleFallback);
-      });
-      return;
+      const all = reg.every(inFallback => !inFallback());
+      const res = reg.map(() => ({
+        showContent: all && showContent,
+        showFallback
+      }));
+      res.inFallback = !all;
+      return res;
     }
     let stop = false;
+    let inFallback = prev.inFallback;
+    const res = [];
     for (let i = 0, len = reg.length; i < len; i++) {
       const n = reverse ? len - i - 1 : i,
-            s = reg[n].inFallback();
+            s = reg[n]();
       if (!stop && !s) {
-        reg[n].showContent(visibleContent);
-        reg[n].showFallback(visibleFallback);
+        res[n] = {
+          showContent,
+          showFallback
+        };
       } else {
         const next = !stop;
-        if (next && suspenseSetter) suspenseSetter(true);
-        if (!tail || next && tail === "collapsed") {
-          reg[n].showFallback(visibleFallback);
-        } else reg[n].showFallback(false);
+        if (next) inFallback = true;
+        res[n] = {
+          showContent: next,
+          showFallback: !tail || next && tail === "collapsed" ? showFallback : false
+        };
         stop = true;
-        reg[n].showContent(next);
       }
     }
-    if (!stop && suspenseSetter) suspenseSetter(false);
+    if (!stop) inFallback = false;
+    res.inFallback = inFallback;
+    return res;
+  }, {
+    inFallback: false
+  });
+  setWrapper(() => resolved);
+  return createComponent(SuspenseListContext.Provider, {
+    value: {
+      register: inFallback => {
+        let index;
+        setRegistry(registry => {
+          index = registry.length;
+          return [...registry, inFallback];
+        });
+        return createMemo(() => resolved()[index], undefined, {
+          equals: suspenseListEquals
+        });
+      }
+    },
+    get children() {
+      return props.children;
+    }
   });
-  return comp;
 }
 function Suspense(props) {
   let counter = 0,
-      showContent,
-      showFallback,
+      show,
       ctx,
       p,
       flicker,
@@ -1451,7 +1471,7 @@ function Suspense(props) {
     }
   }
   const listContext = useContext(SuspenseListContext);
-  if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  if (listContext) show = listContext.register(store.inFallback);
   let dispose;
   onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
@@ -1466,18 +1486,21 @@ function Suspense(props) {
         }
         if (ctx && p === "$$f") setHydrateContext();
         const rendered = createMemo(() => props.children);
-        return createMemo(() => {
+        return createMemo(prev => {
           const inFallback = store.inFallback(),
-                visibleContent = showContent ? showContent() : true,
-                visibleFallback = showFallback ? showFallback() : true;
-          dispose && dispose();
-          if ((!inFallback || p && p !== "$$f") && visibleContent) {
+                {
+            showContent = true,
+            showFallback = true
+          } = show ? show() : {};
+          if ((!inFallback || p && p !== "$$f") && showContent) {
             store.resolved = true;
-            ctx = p = undefined;
+            dispose && dispose();
+            dispose = ctx = p = undefined;
             resumeEffects(store.effects);
             return rendered();
           }
-          if (!visibleFallback) return;
+          if (!showFallback) return;
+          if (dispose) return prev;
           return createRoot(disposer => {
             dispose = disposer;
             if (ctx) {

package/dist/solid.js

@@ -162,7 +162,7 @@ function createRoot(fn, detachedOwner) {
     context: null,
     owner: detachedOwner || owner
   },
-        updateFn = unowned ? fn : () => fn(() => cleanNode(root));
+        updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
   Owner = root;
   Listener = null;
   try {
@@ -260,7 +260,7 @@ function createResource(pSource, pFetcher, pOptions) {
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
     let v;
-    if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
+    if (options.useInitialValue) initP = options.initialValue;else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
   }
   function loadEnd(p, v, success, key) {
     if (pr === p) {
@@ -903,7 +903,7 @@ function resolveChildren(children) {
 function createProvider(id) {
   return function provider(props) {
     let res;
-    createComputed(() => res = untrack(() => {
+    createRenderEffect(() => res = untrack(() => {
       Owner.context = {
         [id]: props.value
       };
@@ -1278,6 +1278,7 @@ function Index(props) {
 }
 function Show(props) {
   let strictEqual = false;
+  const keyed = props.keyed;
   const condition = createMemo(() => props.when, undefined, {
     equals: (a, b) => strictEqual ? a === b : !a === !b
   });
@@ -1285,20 +1286,26 @@ function Show(props) {
     const c = condition();
     if (c) {
       const child = props.children;
-      return (strictEqual = typeof child === "function" && child.length > 0) ? untrack(() => child(c)) : child;
+      const fn = typeof child === "function" && child.length > 0;
+      strictEqual = keyed || fn;
+      return fn ? untrack(() => child(c)) : child;
     }
     return props.fallback;
   });
 }
 function Switch(props) {
   let strictEqual = false;
+  let keyed = false;
   const conditions = children(() => props.children),
         evalConditions = createMemo(() => {
     let conds = conditions();
     if (!Array.isArray(conds)) conds = [conds];
     for (let i = 0; i < conds.length; i++) {
       const c = conds[i].when;
-      if (c) return [i, c, conds[i]];
+      if (c) {
+        keyed = !!conds[i].keyed;
+        return [i, c, conds[i]];
+      }
     }
     return [-1];
   }, undefined, {
@@ -1308,7 +1315,9 @@ function Switch(props) {
     const [index, when, cond] = evalConditions();
     if (index < 0) return props.fallback;
     const c = cond.children;
-    return (strictEqual = typeof c === "function" && c.length > 0) ? untrack(() => c(when)) : c;
+    const fn = typeof c === "function" && c.length > 0;
+    strictEqual = keyed || fn;
+    return fn ? untrack(() => c(when)) : c;
   });
 }
 function Match(props) {
@@ -1339,74 +1348,85 @@ function ErrorBoundary(props) {
   });
 }
 
+const suspenseListEquals = (a, b) => a.showContent === b.showContent && a.showFallback === b.showFallback;
 const SuspenseListContext = createContext();
 function SuspenseList(props) {
-  let suspenseSetter, showContent, showFallback;
+  let [wrapper, setWrapper] = createSignal(() => ({
+    inFallback: false
+  })),
+      show;
   const listContext = useContext(SuspenseListContext);
+  const [registry, setRegistry] = createSignal([]);
   if (listContext) {
-    const [inFallback, setFallback] = createSignal(false);
-    suspenseSetter = setFallback;
-    [showContent, showFallback] = listContext.register(inFallback);
+    show = listContext.register(createMemo(() => wrapper()().inFallback));
   }
-  const [registry, setRegistry] = createSignal([]),
-        comp = createComponent(SuspenseListContext.Provider, {
-    value: {
-      register: inFallback => {
-        const [showingContent, showContent] = createSignal(false),
-              [showingFallback, showFallback] = createSignal(false);
-        setRegistry(registry => [...registry, {
-          inFallback,
-          showContent,
-          showFallback
-        }]);
-        return [showingContent, showingFallback];
-      }
-    },
-    get children() {
-      return props.children;
-    }
-  });
-  createComputed(() => {
+  const resolved = createMemo(prev => {
     const reveal = props.revealOrder,
           tail = props.tail,
-          visibleContent = showContent ? showContent() : true,
-          visibleFallback = showFallback ? showFallback() : true,
+          {
+      showContent = true,
+      showFallback = true
+    } = show ? show() : {},
           reg = registry(),
           reverse = reveal === "backwards";
     if (reveal === "together") {
-      const all = reg.every(i => !i.inFallback());
-      suspenseSetter && suspenseSetter(!all);
-      reg.forEach(i => {
-        i.showContent(all && visibleContent);
-        i.showFallback(visibleFallback);
-      });
-      return;
+      const all = reg.every(inFallback => !inFallback());
+      const res = reg.map(() => ({
+        showContent: all && showContent,
+        showFallback
+      }));
+      res.inFallback = !all;
+      return res;
     }
     let stop = false;
+    let inFallback = prev.inFallback;
+    const res = [];
     for (let i = 0, len = reg.length; i < len; i++) {
       const n = reverse ? len - i - 1 : i,
-            s = reg[n].inFallback();
+            s = reg[n]();
       if (!stop && !s) {
-        reg[n].showContent(visibleContent);
-        reg[n].showFallback(visibleFallback);
+        res[n] = {
+          showContent,
+          showFallback
+        };
       } else {
         const next = !stop;
-        if (next && suspenseSetter) suspenseSetter(true);
-        if (!tail || next && tail === "collapsed") {
-          reg[n].showFallback(visibleFallback);
-        } else reg[n].showFallback(false);
+        if (next) inFallback = true;
+        res[n] = {
+          showContent: next,
+          showFallback: !tail || next && tail === "collapsed" ? showFallback : false
+        };
         stop = true;
-        reg[n].showContent(next);
       }
     }
-    if (!stop && suspenseSetter) suspenseSetter(false);
+    if (!stop) inFallback = false;
+    res.inFallback = inFallback;
+    return res;
+  }, {
+    inFallback: false
+  });
+  setWrapper(() => resolved);
+  return createComponent(SuspenseListContext.Provider, {
+    value: {
+      register: inFallback => {
+        let index;
+        setRegistry(registry => {
+          index = registry.length;
+          return [...registry, inFallback];
+        });
+        return createMemo(() => resolved()[index], undefined, {
+          equals: suspenseListEquals
+        });
+      }
+    },
+    get children() {
+      return props.children;
+    }
   });
-  return comp;
 }
 function Suspense(props) {
   let counter = 0,
-      showContent,
-      showFallback,
+      show,
       ctx,
       p,
       flicker,
@@ -1447,7 +1467,7 @@ function Suspense(props) {
     }
   }
   const listContext = useContext(SuspenseListContext);
-  if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  if (listContext) show = listContext.register(store.inFallback);
   let dispose;
   onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
@@ -1462,18 +1482,21 @@ function Suspense(props) {
         }
         if (ctx && p === "$$f") setHydrateContext();
         const rendered = createMemo(() => props.children);
-        return createMemo(() => {
+        return createMemo(prev => {
           const inFallback = store.inFallback(),
-                visibleContent = showContent ? showContent() : true,
-                visibleFallback = showFallback ? showFallback() : true;
-          dispose && dispose();
-          if ((!inFallback || p && p !== "$$f") && visibleContent) {
+                {
+            showContent = true,
+            showFallback = true
+          } = show ? show() : {};
+          if ((!inFallback || p && p !== "$$f") && showContent) {
             store.resolved = true;
-            ctx = p = undefined;
+            dispose && dispose();
+            dispose = ctx = p = undefined;
             resumeEffects(store.effects);
             return rendered();
           }
-          if (!visibleFallback) return;
+          if (!showFallback) return;
+          if (dispose) return prev;
           return createRoot(disposer => {
             dispose = disposer;
             if (ctx) {

package/h/jsx-runtime/types/jsx.d.ts

@@ -1854,7 +1854,7 @@ export namespace JSX {
     del: HTMLAttributes<HTMLElement>;
     details: DetailsHtmlAttributes<HTMLDetailsElement>;
     dfn: HTMLAttributes<HTMLElement>;
-    dialog: DialogHtmlAttributes<HTMLElement>;
+    dialog: DialogHtmlAttributes<HTMLDialogElement>;
     div: HTMLAttributes<HTMLDivElement>;
     dl: HTMLAttributes<HTMLDListElement>;
     dt: HTMLAttributes<HTMLElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.5.0-beta.2",
+  "version": "1.5.0-beta.3",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",

package/types/jsx.d.ts

@@ -286,7 +286,7 @@ export namespace JSX {
   interface CSSProperties extends csstype.PropertiesHyphen {
     // Override
   }
-  
+
   type HTMLAutocapitalize = "off" | "none" | "on" | "sentences" | "words" | "characters";
   type HTMLDir = "ltr" | "rtl" | "auto";
   type HTMLFormEncType = "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
@@ -1862,7 +1862,7 @@ export namespace JSX {
     del: HTMLAttributes<HTMLElement>;
     details: DetailsHtmlAttributes<HTMLDetailsElement>;
     dfn: HTMLAttributes<HTMLElement>;
-    dialog: DialogHtmlAttributes<HTMLElement>;
+    dialog: DialogHtmlAttributes<HTMLDialogElement>;
     div: HTMLAttributes<HTMLDivElement>;
     dl: HTMLAttributes<HTMLDListElement>;
     dt: HTMLAttributes<HTMLElement>;

package/types/reactive/signal.d.ts

@@ -247,6 +247,7 @@ export declare type ResourceOptions<T, S = unknown> = {
     initialValue?: T;
     name?: string;
     deferStream?: boolean;
+    useInitialValue?: boolean;
     store?: (init: T | undefined) => [Accessor<T | undefined>, Setter<T | undefined>];
     onHydrated?: (k: S | undefined, info: {
         value: T | undefined;

package/types/render/flow.d.ts

@@ -42,9 +42,16 @@ export declare function Index<T, U extends JSX.Element>(props: {
  */
 export declare function Show<T>(props: {
     when: T | undefined | null | false;
+    keyed: true;
     fallback?: JSX.Element;
     children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
 }): () => JSX.Element;
+export declare function Show<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    fallback?: JSX.Element;
+    children: JSX.Element;
+}): () => JSX.Element;
 /**
  * switches between content based on mutually exclusive conditions
  * ```typescript
@@ -65,6 +72,7 @@ export declare function Switch(props: {
 }): Accessor<JSX.Element>;
 export declare type MatchProps<T> = {
     when: T | undefined | null | false;
+    keyed?: boolean;
     children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
 };
 /**
@@ -76,7 +84,16 @@ export declare type MatchProps<T> = {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#%3Cswitch%3E%2F%3Cmatch%3E
  */
-export declare function Match<T>(props: MatchProps<T>): JSX.Element;
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed: true;
+    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+}): JSX.Element;
+export declare function Match<T>(props: {
+    when: T | undefined | null | false;
+    keyed?: false;
+    children: JSX.Element;
+}): JSX.Element;
 export declare function resetErrorBoundaries(): void;
 /**
  * catches uncaught errors inside components and renders a fallback content

package/types/server/rendering.d.ts

@@ -48,9 +48,10 @@ export declare function Index<T>(props: {
     children: (item: () => T, index: number) => string;
 }): string | any[] | undefined;
 export declare function Show<T>(props: {
-    when: T | false;
+    when: T | undefined | null | false;
+    keyed?: boolean;
     fallback?: string;
-    children: string | ((item: T) => string);
+    children: string | ((item: NonNullable<T>) => string);
 }): string;
 export declare function Switch(props: {
     fallback?: string;
@@ -58,6 +59,7 @@ export declare function Switch(props: {
 }): string;
 declare type MatchProps<T> = {
     when: T | false;
+    keyed?: boolean;
     children: string | ((item: T) => string);
 };
 export declare function Match<T>(props: MatchProps<T>): MatchProps<T>;
@@ -98,11 +100,13 @@ export declare type ResourceOptions<T> = undefined extends T ? {
     initialValue?: T;
     name?: string;
     deferStream?: boolean;
+    useInitialValue?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 } : {
     initialValue: T;
     name?: string;
     deferStream?: boolean;
+    useInitialValue?: boolean;
     onHydrated?: <S, T>(k: S, info: ResourceFetcherInfo<T>) => void;
 };
 export declare function createResource<T, S = true>(fetcher: ResourceFetcher<S, T>, options?: ResourceOptions<undefined>): ResourceReturn<T | undefined>;

package/universal/dist/dev.cjs

@@ -235,7 +235,10 @@ function createRenderer$1({
     mergeProps,
     effect: solidJs.createRenderEffect,
     memo,
-    createComponent: solidJs.createComponent
+    createComponent: solidJs.createComponent,
+    use(fn, element, arg) {
+      return solidJs.untrack(() => fn(element, arg));
+    }
   };
 }
 function mergeProps(...sources) {

package/universal/dist/dev.js

@@ -1,4 +1,4 @@
-import { createMemo, createRoot, createRenderEffect, createComponent, mergeProps as mergeProps$1 } from 'solid-js';
+import { createMemo, createRoot, createRenderEffect, createComponent, untrack, mergeProps as mergeProps$1 } from 'solid-js';
 
 function memo(fn, equals) {
   return createMemo(fn, undefined, !equals ? {
@@ -231,7 +231,10 @@ function createRenderer$1({
     mergeProps,
     effect: createRenderEffect,
     memo,
-    createComponent
+    createComponent,
+    use(fn, element, arg) {
+      return untrack(() => fn(element, arg));
+    }
   };
 }
 function mergeProps(...sources) {

package/universal/dist/universal.cjs

@@ -235,7 +235,10 @@ function createRenderer$1({
     mergeProps,
     effect: solidJs.createRenderEffect,
     memo,
-    createComponent: solidJs.createComponent
+    createComponent: solidJs.createComponent,
+    use(fn, element, arg) {
+      return solidJs.untrack(() => fn(element, arg));
+    }
   };
 }
 function mergeProps(...sources) {

package/universal/dist/universal.js

@@ -1,4 +1,4 @@
-import { createMemo, createRoot, createRenderEffect, createComponent, mergeProps as mergeProps$1 } from 'solid-js';
+import { createMemo, createRoot, createRenderEffect, createComponent, untrack, mergeProps as mergeProps$1 } from 'solid-js';
 
 function memo(fn, equals) {
   return createMemo(fn, undefined, !equals ? {
@@ -231,7 +231,10 @@ function createRenderer$1({
     mergeProps,
     effect: createRenderEffect,
     memo,
-    createComponent
+    createComponent,
+    use(fn, element, arg) {
+      return untrack(() => fn(element, arg));
+    }
   };
 }
 function mergeProps(...sources) {