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

package/dist/dev.cjs

@@ -169,7 +169,7 @@ function createRoot(fn, detachedOwner) {
   },
         updateFn = unowned ? () => fn(() => {
     throw new Error("Dispose method must be an explicit argument to createRoot function");
-  })  : () => fn(() => cleanNode(root));
+  })  : () => fn(() => untrack(() => cleanNode(root)));
   {
     if (owner) root.name = `${owner.name}-r${rootCount++}`;
     globalThis._$afterCreateRoot && globalThis._$afterCreateRoot(root);
@@ -272,7 +272,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) {
@@ -969,7 +969,7 @@ function resolveChildren(children) {
 function createProvider(id) {
   return function provider(props) {
     let res;
-    createComputed(() => res = untrack(() => {
+    createRenderEffect(() => res = untrack(() => {
       Owner.context = {
         [id]: props.value
       };
@@ -1370,6 +1370,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
   });
@@ -1377,20 +1378,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, {
@@ -1400,7 +1407,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) {
@@ -1432,74 +1441,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,
@@ -1540,7 +1560,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, {
@@ -1555,18 +1575,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/dev.js

@@ -165,7 +165,7 @@ function createRoot(fn, detachedOwner) {
   },
         updateFn = unowned ? () => fn(() => {
     throw new Error("Dispose method must be an explicit argument to createRoot function");
-  })  : () => fn(() => cleanNode(root));
+  })  : () => fn(() => untrack(() => cleanNode(root)));
   {
     if (owner) root.name = `${owner.name}-r${rootCount++}`;
     globalThis._$afterCreateRoot && globalThis._$afterCreateRoot(root);
@@ -268,7 +268,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) {
@@ -965,7 +965,7 @@ function resolveChildren(children) {
 function createProvider(id) {
   return function provider(props) {
     let res;
-    createComputed(() => res = untrack(() => {
+    createRenderEffect(() => res = untrack(() => {
       Owner.context = {
         [id]: props.value
       };
@@ -1366,6 +1366,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
   });
@@ -1373,20 +1374,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, {
@@ -1396,7 +1403,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) {
@@ -1428,74 +1437,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,
@@ -1536,7 +1556,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, {
@@ -1551,18 +1571,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/server.cjs

@@ -394,7 +394,7 @@ function createResource(source, fetcher, options = {}) {
   let value = options.initialValue;
   let p;
   let error;
-  if (sharedConfig.context.async) {
+  if (sharedConfig.context.async && !options.useInitialValue) {
     resource = sharedConfig.context.resources[id] || (sharedConfig.context.resources[id] = {});
     if (resource.ref) {
       if (!resource.data && !resource.ref[0].loading && !resource.ref[0].error) resource.ref[1].refetch();
@@ -404,7 +404,7 @@ function createResource(source, fetcher, options = {}) {
   const read = () => {
     if (error) throw error;
     if (resourceContext && p) resourceContext.push(p);
-    const resolved = sharedConfig.context.async && "data" in sharedConfig.context.resources[id];
+    const resolved = !options.useInitialValue && sharedConfig.context.async && "data" in sharedConfig.context.resources[id];
     if (!resolved && read.loading) {
       const ctx = useContext(SuspenseContext);
       if (ctx) {
@@ -463,7 +463,7 @@ function createResource(source, fetcher, options = {}) {
     p = null;
     return ctx.resources[id].data;
   }
-  load();
+  if (!options.useInitialValue) load();
   return resource.ref = [read, {
     refetch: load,
     mutate: v => value = v

package/dist/server.js

@@ -390,7 +390,7 @@ function createResource(source, fetcher, options = {}) {
   let value = options.initialValue;
   let p;
   let error;
-  if (sharedConfig.context.async) {
+  if (sharedConfig.context.async && !options.useInitialValue) {
     resource = sharedConfig.context.resources[id] || (sharedConfig.context.resources[id] = {});
     if (resource.ref) {
       if (!resource.data && !resource.ref[0].loading && !resource.ref[0].error) resource.ref[1].refetch();
@@ -400,7 +400,7 @@ function createResource(source, fetcher, options = {}) {
   const read = () => {
     if (error) throw error;
     if (resourceContext && p) resourceContext.push(p);
-    const resolved = sharedConfig.context.async && "data" in sharedConfig.context.resources[id];
+    const resolved = !options.useInitialValue && sharedConfig.context.async && "data" in sharedConfig.context.resources[id];
     if (!resolved && read.loading) {
       const ctx = useContext(SuspenseContext);
       if (ctx) {
@@ -459,7 +459,7 @@ function createResource(source, fetcher, options = {}) {
     p = null;
     return ctx.resources[id].data;
   }
-  load();
+  if (!options.useInitialValue) load();
   return resource.ref = [read, {
     refetch: load,
     mutate: v => value = v