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

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);
@@ -264,7 +264,7 @@ function createResource(pSource, pFetcher, pOptions) {
       resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   const contexts = new Set(),
-        [value, setValue] = options.store ? options.store(options.initialValue) : createSignal(options.initialValue),
+        [value, setValue] = (options.storage || createSignal)(options.initialValue),
         [track, trigger] = createSignal(undefined, {
     equals: false
   }),
@@ -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.ssrValue === "initial") initP = options.initialValue;else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
   }
   function loadEnd(p, v, success, key) {
     if (pr === p) {
@@ -301,7 +301,7 @@ function createResource(pSource, pFetcher, pOptions) {
     !success && (err = castError(v));
     runUpdates(() => {
       setValue(() => v);
-      setState(success ? "ready" : "error");
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -353,9 +353,7 @@ function createResource(pSource, pFetcher, pOptions) {
   }
   Object.defineProperties(read, {
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -365,13 +363,13 @@ function createResource(pSource, pFetcher, pOptions) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -400,9 +398,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -411,8 +408,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE, options );
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -585,7 +582,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -700,7 +702,7 @@ function runComputation(node, value, time) {
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);
@@ -969,7 +971,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 +1372,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 +1380,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 +1409,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 +1443,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 +1562,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 +1577,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);
@@ -260,7 +260,7 @@ function createResource(pSource, pFetcher, pOptions) {
       resolved = ("initialValue" in options),
       dynamic = typeof source === "function" && createMemo(source);
   const contexts = new Set(),
-        [value, setValue] = options.store ? options.store(options.initialValue) : createSignal(options.initialValue),
+        [value, setValue] = (options.storage || createSignal)(options.initialValue),
         [track, trigger] = createSignal(undefined, {
     equals: false
   }),
@@ -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.ssrValue === "initial") initP = options.initialValue;else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
   }
   function loadEnd(p, v, success, key) {
     if (pr === p) {
@@ -297,7 +297,7 @@ function createResource(pSource, pFetcher, pOptions) {
     !success && (err = castError(v));
     runUpdates(() => {
       setValue(() => v);
-      setState(success ? "ready" : "error");
+      setState(success ? "ready" : "errored");
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
     }, false);
@@ -349,9 +349,7 @@ function createResource(pSource, pFetcher, pOptions) {
   }
   Object.defineProperties(read, {
     state: {
-      get() {
-        return state();
-      }
+      get: () => state()
     },
     loading: {
       get() {
@@ -361,13 +359,13 @@ function createResource(pSource, pFetcher, pOptions) {
     },
     error: {
       get() {
-        return state() === "error" ? err : undefined;
+        return state() === "errored" ? err : undefined;
       }
     },
     latest: {
       get() {
         if (!resolved) return read();
-        if (state() === "error") throw err;
+        if (state() === "errored") throw err;
         return value();
       }
     }
@@ -396,9 +394,8 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
-      const l = subs.get(key);
-      for (const c of l.values()) {
+    for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p)) {
+      for (const c of val.values()) {
         c.state = STALE;
         if (c.pure) Updates.push(c);else Effects.push(c);
       }
@@ -407,8 +404,8 @@ function createSelector(source, fn = equalFn, options) {
   }, undefined, true, STALE, options );
   updateComputation(node);
   return key => {
-    let listener;
-    if (listener = Listener) {
+    const listener = Listener;
+    if (listener) {
       let l;
       if (l = subs.get(key)) l.add(listener);else subs.set(key, l = new Set([listener]));
       onCleanup(() => {
@@ -581,7 +578,12 @@ function useContext(context) {
 }
 function children(fn) {
   const children = createMemo(fn);
-  return createMemo(() => resolveChildren(children()));
+  const memo = createMemo(() => resolveChildren(children()));
+  memo.toArray = () => {
+    const c = memo();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo;
 }
 let SuspenseContext;
 function getSuspenseContext() {
@@ -696,7 +698,7 @@ function runComputation(node, value, time) {
     handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
-    if (node.updatedAt && "observers" in node) {
+    if (node.updatedAt != null && "observers" in node) {
       writeSignal(node, nextValue, true);
     } else if (Transition && Transition.running && node.pure) {
       Transition.sources.add(node);
@@ -965,7 +967,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 +1368,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 +1376,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 +1405,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 +1439,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 +1558,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 +1573,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) {