solid-js 1.2.2 → 1.3.0-beta.0

package/dist/dev.cjs

@@ -187,18 +187,21 @@ function createSignal(value, options) {
     comparator: options.equals || undefined
   };
   if (!options.internal) s.name = registerGraph(options.name || hashValue(value), s);
-  return [readSignal.bind(s), value => {
+  const setter = value => {
     if (typeof value === "function") {
       if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.pending !== NOTPENDING ? s.pending : s.tValue);else value = value(s.pending !== NOTPENDING ? s.pending : s.value);
     }
     return writeSignal(s, value);
-  }];
+  };
+  return [readSignal.bind(s), setter];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE, options ));
+  const c = createComputation(fn, value, true, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE, options ));
+  const c = createComputation(fn, value, false, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -215,7 +218,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -244,12 +250,7 @@ function createResource(source, fetcher, options) {
       dynamic = typeof source === "function";
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
-    if (sharedConfig.context.loadResource) {
-      initP = sharedConfig.context.loadResource(id);
-    } else if (sharedConfig.resources && id && id in sharedConfig.resources) {
-      initP = sharedConfig.resources[id];
-      delete sharedConfig.resources[id];
-    }
+    if (sharedConfig.load) initP = sharedConfig.load(id);
   }
   function loadEnd(p, v, e) {
     if (pr === p) {
@@ -404,7 +405,8 @@ function untrack(fn) {
   Listener = listener;
   return result;
 }
-function on(deps, fn, options) {
+function on(deps, fn,
+options) {
   const isArray = Array.isArray(deps);
   let prevInput;
   let defer = options && options.defer;
@@ -1207,6 +1209,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1229,7 +1234,7 @@ function lazy(fn) {
   let comp;
   const wrap = props => {
     const ctx = sharedConfig.context;
-    if (ctx && sharedConfig.resources) {
+    if (ctx) {
       ctx.count++;
       const [s, set] = createSignal();
       fn().then(mod => {
@@ -1302,7 +1307,7 @@ function Switch(props) {
     }
     return [-1];
   }, undefined, {
-    equals: (a, b) => a && a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
+    equals: (a, b) => a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
   });
   return createMemo(() => {
     const [index, when, cond] = evalConditions();
@@ -1396,7 +1401,10 @@ function SuspenseList(props) {
 function Suspense(props) {
   let counter = 0,
       showContent,
-      showFallback;
+      showFallback,
+      ctx,
+      waitingHydration,
+      flicker;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1409,30 +1417,62 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
+  if (sharedConfig.context && sharedConfig.load) {
+    const key = sharedConfig.context.id + sharedConfig.context.count;
+    const p = sharedConfig.load(key);
+    if (p) {
+      const [s, set] = createSignal(undefined, {
+        equals: false
+      });
+      flicker = s;
+      p.then(() => {
+        sharedConfig.gather(key);
+        waitingHydration = true;
+        setHydrateContext(ctx);
+        set();
+        setHydrateContext(undefined);
+        waitingHydration = false;
+      });
+    }
+  }
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
-      const rendered = untrack(() => props.children);
       return createMemo(() => {
-        const inFallback = store.inFallback(),
-              visibleContent = showContent ? showContent() : true,
-              visibleFallback = showFallback ? showFallback() : true;
-        if (!inFallback && visibleContent) {
-          store.resolved = true;
-          resumeEffects(store.effects);
-          return rendered;
+        if (flicker) {
+          ctx = sharedConfig.context;
+          flicker();
+          return flicker = undefined;
         }
-        if (!visibleFallback) return;
-        return props.fallback;
+        const rendered = untrack(() => props.children);
+        return createMemo(() => {
+          const inFallback = store.inFallback(),
+                visibleContent = showContent ? showContent() : true,
+                visibleFallback = showFallback ? showFallback() : true;
+          dispose && dispose();
+          if ((!inFallback || waitingHydration) && visibleContent) {
+            store.resolved = true;
+            resumeEffects(store.effects);
+            return rendered;
+          }
+          if (!visibleFallback) return;
+          return createRoot(disposer => {
+            dispose = disposer;
+            if (sharedConfig.context) sharedConfig.context.count = 0;
+            return props.fallback;
+          }, owner);
+        });
       });
     }
   });
 }
 
-function awaitSuspense() {}
 exports.DEV = void 0;
 {
   exports.DEV = {
@@ -1455,7 +1495,6 @@ exports.Show = Show;
 exports.Suspense = Suspense;
 exports.SuspenseList = SuspenseList;
 exports.Switch = Switch;
-exports.awaitSuspense = awaitSuspense;
 exports.batch = batch;
 exports.cancelCallback = cancelCallback;
 exports.children = children;

package/dist/dev.js

@@ -183,18 +183,21 @@ function createSignal(value, options) {
     comparator: options.equals || undefined
   };
   if (!options.internal) s.name = registerGraph(options.name || hashValue(value), s);
-  return [readSignal.bind(s), value => {
+  const setter = value => {
     if (typeof value === "function") {
       if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.pending !== NOTPENDING ? s.pending : s.tValue);else value = value(s.pending !== NOTPENDING ? s.pending : s.value);
     }
     return writeSignal(s, value);
-  }];
+  };
+  return [readSignal.bind(s), setter];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE, options ));
+  const c = createComputation(fn, value, true, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE, options ));
+  const c = createComputation(fn, value, false, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -211,7 +214,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -240,12 +246,7 @@ function createResource(source, fetcher, options) {
       dynamic = typeof source === "function";
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
-    if (sharedConfig.context.loadResource) {
-      initP = sharedConfig.context.loadResource(id);
-    } else if (sharedConfig.resources && id && id in sharedConfig.resources) {
-      initP = sharedConfig.resources[id];
-      delete sharedConfig.resources[id];
-    }
+    if (sharedConfig.load) initP = sharedConfig.load(id);
   }
   function loadEnd(p, v, e) {
     if (pr === p) {
@@ -400,7 +401,8 @@ function untrack(fn) {
   Listener = listener;
   return result;
 }
-function on(deps, fn, options) {
+function on(deps, fn,
+options) {
   const isArray = Array.isArray(deps);
   let prevInput;
   let defer = options && options.defer;
@@ -1203,6 +1205,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1225,7 +1230,7 @@ function lazy(fn) {
   let comp;
   const wrap = props => {
     const ctx = sharedConfig.context;
-    if (ctx && sharedConfig.resources) {
+    if (ctx) {
       ctx.count++;
       const [s, set] = createSignal();
       fn().then(mod => {
@@ -1298,7 +1303,7 @@ function Switch(props) {
     }
     return [-1];
   }, undefined, {
-    equals: (a, b) => a && a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
+    equals: (a, b) => a[0] === b[0] && (strictEqual ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2]
   });
   return createMemo(() => {
     const [index, when, cond] = evalConditions();
@@ -1392,7 +1397,10 @@ function SuspenseList(props) {
 function Suspense(props) {
   let counter = 0,
       showContent,
-      showFallback;
+      showFallback,
+      ctx,
+      waitingHydration,
+      flicker;
   const [inFallback, setFallback] = createSignal(false),
         SuspenseContext = getSuspenseContext(),
         store = {
@@ -1405,30 +1413,62 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
+  if (sharedConfig.context && sharedConfig.load) {
+    const key = sharedConfig.context.id + sharedConfig.context.count;
+    const p = sharedConfig.load(key);
+    if (p) {
+      const [s, set] = createSignal(undefined, {
+        equals: false
+      });
+      flicker = s;
+      p.then(() => {
+        sharedConfig.gather(key);
+        waitingHydration = true;
+        setHydrateContext(ctx);
+        set();
+        setHydrateContext(undefined);
+        waitingHydration = false;
+      });
+    }
+  }
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
-      const rendered = untrack(() => props.children);
       return createMemo(() => {
-        const inFallback = store.inFallback(),
-              visibleContent = showContent ? showContent() : true,
-              visibleFallback = showFallback ? showFallback() : true;
-        if (!inFallback && visibleContent) {
-          store.resolved = true;
-          resumeEffects(store.effects);
-          return rendered;
+        if (flicker) {
+          ctx = sharedConfig.context;
+          flicker();
+          return flicker = undefined;
         }
-        if (!visibleFallback) return;
-        return props.fallback;
+        const rendered = untrack(() => props.children);
+        return createMemo(() => {
+          const inFallback = store.inFallback(),
+                visibleContent = showContent ? showContent() : true,
+                visibleFallback = showFallback ? showFallback() : true;
+          dispose && dispose();
+          if ((!inFallback || waitingHydration) && visibleContent) {
+            store.resolved = true;
+            resumeEffects(store.effects);
+            return rendered;
+          }
+          if (!visibleFallback) return;
+          return createRoot(disposer => {
+            dispose = disposer;
+            if (sharedConfig.context) sharedConfig.context.count = 0;
+            return props.fallback;
+          }, owner);
+        });
       });
     }
   });
 }
 
-function awaitSuspense() {}
 let DEV;
 {
   DEV = {
@@ -1442,4 +1482,4 @@ if (globalThis) {
   if (!globalThis.Solid$$) globalThis.Solid$$ = true;else console.warn("You appear to have multiple instances of Solid. This can lead to unexpected behavior.");
 }
 
-export { $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, awaitSuspense, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };
+export { $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };

package/dist/server.cjs

@@ -219,7 +219,7 @@ function createUniqueId() {
   return `${ctx.id}${ctx.count++}`;
 }
 function createComponent(Comp, props) {
-  if (sharedConfig.context) {
+  if (sharedConfig.context && !sharedConfig.context.noHydrate) {
     const c = sharedConfig.context;
     setHydrateContext(nextHydrateContext());
     const r = Comp(props);
@@ -320,7 +320,7 @@ function createResource(fn, fetcher, options = {}) {
   const read = () => {
     if (resourceContext && p) resourceContext.push(p);
     const resolved = sharedConfig.context.async && sharedConfig.context.resources[id].data;
-    if (sharedConfig.context.async && !resolved) {
+    if (!resolved) {
       const ctx = useContext(SuspenseContext);
       if (ctx) {
         ctx.resources.set(id, read);
@@ -332,7 +332,7 @@ function createResource(fn, fetcher, options = {}) {
   read.loading = false;
   function load() {
     const ctx = sharedConfig.context;
-    if (!ctx.async && !ctx.streaming) return;
+    if (!ctx.async) return read.loading = true;
     if (ctx.resources && id in ctx.resources && ctx.resources[id].data) {
       value = ctx.resources[id].data;
       return;
@@ -349,15 +349,7 @@ function createResource(fn, fetcher, options = {}) {
     }
     read.loading = true;
     if ("then" in p) {
-      if (ctx.writeResource) {
-        ctx.writeResource(id, p);
-        p.then(v => {
-          value = v;
-          read.loading = false;
-          p = null;
-        });
-        return;
-      }
+      if (ctx.writeResource) ctx.writeResource(id, p);
       p.then(res => {
         read.loading = false;
         ctx.resources[id].data = res;
@@ -392,7 +384,7 @@ function lazy(fn) {
       ctx.resources.set(id, track);
       contexts.add(ctx);
     }
-    p.then(() => {
+    if (sharedConfig.context.async) p.then(() => {
       track.loading = false;
       notifySuspense(contexts);
     });
@@ -425,15 +417,10 @@ function useTransition() {
 function SuspenseList(props) {
   return props.children;
 }
-const SUSPENSE_GLOBAL = Symbol("suspense-global");
 function Suspense(props) {
   const ctx = sharedConfig.context;
-  if (!ctx.async) return createComponent(() => {
-    props.children;
-    return props.fallback;
-  }, {});
   const id = ctx.id + ctx.count;
-  const done = ctx.async ? lookup(Owner, SUSPENSE_GLOBAL)(id) : () => {};
+  const done = ctx.async ? ctx.registerFragment(id) : () => {};
   const o = Owner;
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
@@ -462,40 +449,23 @@ function Suspense(props) {
     done();
     return res;
   }
-  return sharedConfig.context.async ? {
-    t: `<#${id}#>`
-  } : props.fallback;
-}
-const SUSPENSE_REPLACE = /<#([\d.]+)#>/;
-function awaitSuspense(fn) {
-  return new Promise(resolve => {
-    const registry = new Set();
-    const cache = Object.create(null);
-    const res = createMemo(() => {
-      Owner.context = {
-        [SUSPENSE_GLOBAL]: getCallback
-      };
-      return fn();
-    });
-    if (!registry.size) resolve(res());
-    function getCallback(key) {
-      registry.add(key);
-      return value => {
-        if (value) cache[key] = value;
-        registry.delete(key);
-        if (!registry.size) Promise.resolve().then(() => {
-          let source = resolveSSRNode(res());
-          let final = "";
-          let match;
-          while (match = source.match(SUSPENSE_REPLACE)) {
-            final += source.substring(0, match.index);
-            source = cache[match[1]] + source.substring(match.index + match[0].length);
-          }
-          resolve(final + source);
-        });
+  if (sharedConfig.context.async) {
+    if (sharedConfig.context.streaming) {
+      setHydrateContext(undefined);
+      const res = {
+        t: `<span id="pl${id}">${resolveSSRNode(props.fallback)}</span>`
       };
+      setHydrateContext(ctx);
+      return res;
     }
+    return {
+      t: `<![${id}]>`
+    };
+  }
+  setHydrateContext({ ...ctx,
+    count: 0
   });
+  return createComponent(() => props.fallback, {});
 }
 
 exports.$PROXY = $PROXY;
@@ -508,7 +478,6 @@ exports.Show = Show;
 exports.Suspense = Suspense;
 exports.SuspenseList = SuspenseList;
 exports.Switch = Switch;
-exports.awaitSuspense = awaitSuspense;
 exports.batch = batch;
 exports.children = children;
 exports.createComponent = createComponent;

package/dist/server.js

@@ -215,7 +215,7 @@ function createUniqueId() {
   return `${ctx.id}${ctx.count++}`;
 }
 function createComponent(Comp, props) {
-  if (sharedConfig.context) {
+  if (sharedConfig.context && !sharedConfig.context.noHydrate) {
     const c = sharedConfig.context;
     setHydrateContext(nextHydrateContext());
     const r = Comp(props);
@@ -316,7 +316,7 @@ function createResource(fn, fetcher, options = {}) {
   const read = () => {
     if (resourceContext && p) resourceContext.push(p);
     const resolved = sharedConfig.context.async && sharedConfig.context.resources[id].data;
-    if (sharedConfig.context.async && !resolved) {
+    if (!resolved) {
       const ctx = useContext(SuspenseContext);
       if (ctx) {
         ctx.resources.set(id, read);
@@ -328,7 +328,7 @@ function createResource(fn, fetcher, options = {}) {
   read.loading = false;
   function load() {
     const ctx = sharedConfig.context;
-    if (!ctx.async && !ctx.streaming) return;
+    if (!ctx.async) return read.loading = true;
     if (ctx.resources && id in ctx.resources && ctx.resources[id].data) {
       value = ctx.resources[id].data;
       return;
@@ -345,15 +345,7 @@ function createResource(fn, fetcher, options = {}) {
     }
     read.loading = true;
     if ("then" in p) {
-      if (ctx.writeResource) {
-        ctx.writeResource(id, p);
-        p.then(v => {
-          value = v;
-          read.loading = false;
-          p = null;
-        });
-        return;
-      }
+      if (ctx.writeResource) ctx.writeResource(id, p);
       p.then(res => {
         read.loading = false;
         ctx.resources[id].data = res;
@@ -388,7 +380,7 @@ function lazy(fn) {
       ctx.resources.set(id, track);
       contexts.add(ctx);
     }
-    p.then(() => {
+    if (sharedConfig.context.async) p.then(() => {
       track.loading = false;
       notifySuspense(contexts);
     });
@@ -421,15 +413,10 @@ function useTransition() {
 function SuspenseList(props) {
   return props.children;
 }
-const SUSPENSE_GLOBAL = Symbol("suspense-global");
 function Suspense(props) {
   const ctx = sharedConfig.context;
-  if (!ctx.async) return createComponent(() => {
-    props.children;
-    return props.fallback;
-  }, {});
   const id = ctx.id + ctx.count;
-  const done = ctx.async ? lookup(Owner, SUSPENSE_GLOBAL)(id) : () => {};
+  const done = ctx.async ? ctx.registerFragment(id) : () => {};
   const o = Owner;
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
@@ -458,40 +445,23 @@ function Suspense(props) {
     done();
     return res;
   }
-  return sharedConfig.context.async ? {
-    t: `<#${id}#>`
-  } : props.fallback;
-}
-const SUSPENSE_REPLACE = /<#([\d.]+)#>/;
-function awaitSuspense(fn) {
-  return new Promise(resolve => {
-    const registry = new Set();
-    const cache = Object.create(null);
-    const res = createMemo(() => {
-      Owner.context = {
-        [SUSPENSE_GLOBAL]: getCallback
-      };
-      return fn();
-    });
-    if (!registry.size) resolve(res());
-    function getCallback(key) {
-      registry.add(key);
-      return value => {
-        if (value) cache[key] = value;
-        registry.delete(key);
-        if (!registry.size) Promise.resolve().then(() => {
-          let source = resolveSSRNode(res());
-          let final = "";
-          let match;
-          while (match = source.match(SUSPENSE_REPLACE)) {
-            final += source.substring(0, match.index);
-            source = cache[match[1]] + source.substring(match.index + match[0].length);
-          }
-          resolve(final + source);
-        });
+  if (sharedConfig.context.async) {
+    if (sharedConfig.context.streaming) {
+      setHydrateContext(undefined);
+      const res = {
+        t: `<span id="pl${id}">${resolveSSRNode(props.fallback)}</span>`
       };
+      setHydrateContext(ctx);
+      return res;
     }
+    return {
+      t: `<![${id}]>`
+    };
+  }
+  setHydrateContext({ ...ctx,
+    count: 0
   });
+  return createComponent(() => props.fallback, {});
 }
 
-export { $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, awaitSuspense, batch, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableScheduling, equalFn, from, getListener, getOwner, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };
+export { $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableScheduling, equalFn, from, getListener, getOwner, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };