solid-js 2.0.0-experimental.14 → 2.0.0-experimental.15

package/dist/dev.cjs

@@ -39,8 +39,15 @@ function devComponent(Comp, props) {
       Object.assign(Comp, {
         [$DEVCOMP]: true
       });
-      return Comp(props);
+      signals.setStrictRead(`<${Comp.name || "Anonymous"}>`);
+      try {
+        return Comp(props);
+      } finally {
+        signals.setStrictRead(false);
+      }
     });
+  }, {
+    transparent: true
   });
 }
 function registerGraph(value) {
@@ -60,8 +67,44 @@ const sharedConfig = {
     return signals.getNextChildId(o);
   }
 };
+let _hydrationEndCallbacks = null;
+let _pendingBoundaries = 0;
+let _hydrationDone = false;
+let _snapshotRootOwner = null;
+function markTopLevelSnapshotScope() {
+  if (_snapshotRootOwner) return;
+  let owner = signals.getOwner();
+  if (!owner) return;
+  while (owner._parent) owner = owner._parent;
+  signals.markSnapshotScope(owner);
+  _snapshotRootOwner = owner;
+}
+function drainHydrationCallbacks() {
+  if (_hydrationDone) return;
+  _hydrationDone = true;
+  _doneValue = true;
+  signals.clearSnapshots();
+  signals.setSnapshotCapture(false);
+  signals.flush();
+  const cbs = _hydrationEndCallbacks;
+  _hydrationEndCallbacks = null;
+  if (cbs) for (const cb of cbs) cb();
+  setTimeout(() => {
+    if (globalThis._$HY) globalThis._$HY.done = true;
+  });
+}
+function checkHydrationComplete() {
+  if (_pendingBoundaries === 0) drainHydrationCallbacks();
+}
+let _hydratingValue = false;
+let _doneValue = false;
 let _createMemo;
 let _createSignal;
+let _createErrorBoundary;
+let _createOptimistic;
+let _createProjection;
+let _createStore;
+let _createOptimisticStore;
 class MockPromise {
   static all() {
     return new MockPromise();
@@ -97,14 +140,110 @@ function subFetch(fn, prev) {
   try {
     window.fetch = () => new MockPromise();
     Promise = MockPromise;
-    return fn(prev);
+    const result = fn(prev);
+    if (result && typeof result[Symbol.asyncIterator] === "function") {
+      result[Symbol.asyncIterator]().next();
+    }
+    return result;
   } finally {
     window.fetch = ogFetch;
     Promise = ogPromise;
   }
 }
+function consumeFirstSync(ai) {
+  const iter = ai[Symbol.asyncIterator]();
+  const r = iter.next();
+  const value = !(r instanceof Promise) && !r.done ? r.value : undefined;
+  return [value, iter];
+}
+function applyPatches(target, patches) {
+  for (const patch of patches) {
+    const path = patch[0];
+    let current = target;
+    for (let i = 0; i < path.length - 1; i++) current = current[path[i]];
+    const key = path[path.length - 1];
+    if (patch.length === 1) {
+      Array.isArray(current) ? current.splice(key, 1) : delete current[key];
+    } else if (patch.length === 3) {
+      current.splice(key, 0, patch[1]);
+    } else {
+      current[key] = patch[1];
+    }
+  }
+}
+function scheduleIteratorConsumption(iter, apply) {
+  const consume = () => {
+    while (true) {
+      const n = iter.next();
+      if (n instanceof Promise) {
+        n.then(r => {
+          if (r.done) return;
+          apply(r.value);
+          consume();
+        });
+        return;
+      }
+      if (n.done) break;
+      apply(n.value);
+    }
+  };
+  consume();
+}
+function isAsyncIterable(v) {
+  return v != null && typeof v[Symbol.asyncIterator] === "function";
+}
+function hydrateSignalFromAsyncIterable(coreFn, compute, value, options) {
+  const parent = signals.getOwner();
+  const expectedId = signals.peekNextChildId(parent);
+  if (!sharedConfig.has(expectedId)) return null;
+  const initP = sharedConfig.load(expectedId);
+  if (!isAsyncIterable(initP)) return null;
+  const [firstValue, iter] = consumeFirstSync(initP);
+  const [get, set] = signals.createSignal(firstValue);
+  const result = coreFn(() => get(), firstValue, options);
+  scheduleIteratorConsumption(iter, v => {
+    set(() => v);
+    signals.flush();
+  });
+  return result;
+}
+function hydrateStoreFromAsyncIterable(coreFn, initialValue, options) {
+  const parent = signals.getOwner();
+  const expectedId = signals.peekNextChildId(parent);
+  if (!sharedConfig.has(expectedId)) return null;
+  const initP = sharedConfig.load(expectedId);
+  if (!isAsyncIterable(initP)) return null;
+  const [firstState, iter] = consumeFirstSync(initP);
+  const [store, setStore] = coreFn(() => {}, firstState ?? initialValue, options);
+  scheduleIteratorConsumption(iter, patches => {
+    setStore(d => {
+      applyPatches(d, patches);
+    });
+  });
+  return [store, setStore];
+}
 function hydratedCreateMemo(compute, value, options) {
   if (!sharedConfig.hydrating) return signals.createMemo(compute, value, options);
+  markTopLevelSnapshotScope();
+  const ssrSource = options?.ssrSource;
+  if (ssrSource === "client") {
+    const [hydrated, setHydrated] = signals.createSignal(false);
+    const memo = signals.createMemo(prev => {
+      if (!hydrated()) return prev ?? value;
+      return compute(prev);
+    }, value, options);
+    setHydrated(true);
+    return memo;
+  }
+  if (ssrSource === "initial") {
+    return signals.createMemo(prev => {
+      if (!sharedConfig.hydrating) return compute(prev);
+      subFetch(compute, prev);
+      return prev ?? value;
+    }, value, options);
+  }
+  const aiResult = hydrateSignalFromAsyncIterable(signals.createMemo, compute, value, options);
+  if (aiResult !== null) return aiResult;
   return signals.createMemo(prev => {
     const o = signals.getOwner();
     if (!sharedConfig.hydrating) return compute(prev);
@@ -116,6 +255,26 @@ function hydratedCreateMemo(compute, value, options) {
 }
 function hydratedCreateSignal(fn, second, third) {
   if (typeof fn !== "function" || !sharedConfig.hydrating) return signals.createSignal(fn, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client") {
+    const [hydrated, setHydrated] = signals.createSignal(false);
+    const sig = signals.createSignal(prev => {
+      if (!hydrated()) return prev ?? second;
+      return fn(prev);
+    }, second, third);
+    setHydrated(true);
+    return sig;
+  }
+  if (ssrSource === "initial") {
+    return signals.createSignal(prev => {
+      if (!sharedConfig.hydrating) return fn(prev);
+      subFetch(fn, prev);
+      return prev ?? second;
+    }, second, third);
+  }
+  const aiResult = hydrateSignalFromAsyncIterable(signals.createSignal, fn, second, third);
+  if (aiResult !== null) return aiResult;
   return signals.createSignal(prev => {
     if (!sharedConfig.hydrating) return fn(prev);
     const o = signals.getOwner();
@@ -125,17 +284,215 @@ function hydratedCreateSignal(fn, second, third) {
     return init != null ? (subFetch(fn, prev), init) : fn(prev);
   }, second, third);
 }
+function hydratedCreateErrorBoundary(fn, fallback) {
+  if (!sharedConfig.hydrating) return signals.createErrorBoundary(fn, fallback);
+  markTopLevelSnapshotScope();
+  const parent = signals.getOwner();
+  const expectedId = signals.peekNextChildId(parent);
+  if (sharedConfig.has(expectedId)) {
+    const err = sharedConfig.load(expectedId);
+    if (err !== undefined) {
+      let hydrated = true;
+      return signals.createErrorBoundary(() => {
+        if (hydrated) {
+          hydrated = false;
+          throw err;
+        }
+        return fn();
+      }, fallback);
+    }
+  }
+  return signals.createErrorBoundary(fn, fallback);
+}
+function hydratedCreateOptimistic(fn, second, third) {
+  if (typeof fn !== "function" || !sharedConfig.hydrating) return signals.createOptimistic(fn, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client") {
+    const [hydrated, setHydrated] = signals.createSignal(false);
+    const sig = signals.createOptimistic(prev => {
+      if (!hydrated()) return prev ?? second;
+      return fn(prev);
+    }, second, third);
+    setHydrated(true);
+    return sig;
+  }
+  if (ssrSource === "initial") {
+    return signals.createOptimistic(prev => {
+      if (!sharedConfig.hydrating) return fn(prev);
+      subFetch(fn, prev);
+      return prev ?? second;
+    }, second, third);
+  }
+  const aiResult = hydrateSignalFromAsyncIterable(signals.createOptimistic, fn, second, third);
+  if (aiResult !== null) return aiResult;
+  return signals.createOptimistic(prev => {
+    const o = signals.getOwner();
+    if (!sharedConfig.hydrating) return fn(prev);
+    let initP;
+    if (sharedConfig.has(o.id)) initP = sharedConfig.load(o.id);
+    const init = initP?.v ?? initP;
+    return init != null ? (subFetch(fn, prev), init) : fn(prev);
+  }, second, third);
+}
+function wrapStoreFn(fn, ssrSource) {
+  if (ssrSource === "initial") {
+    return draft => {
+      if (!sharedConfig.hydrating) return fn(draft);
+      subFetch(fn, draft);
+      return undefined;
+    };
+  }
+  return draft => {
+    const o = signals.getOwner();
+    if (!sharedConfig.hydrating) return fn(draft);
+    let initP;
+    if (sharedConfig.has(o.id)) initP = sharedConfig.load(o.id);
+    const init = initP?.v ?? initP;
+    return init != null ? (subFetch(fn, draft), init) : fn(draft);
+  };
+}
+function hydratedCreateStore(first, second, third) {
+  if (typeof first !== "function" || !sharedConfig.hydrating) return signals.createStore(first, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    return signals.createStore(second ?? {}, undefined, third);
+  }
+  const aiResult = hydrateStoreFromAsyncIterable(signals.createStore, second ?? {}, third);
+  if (aiResult !== null) return aiResult;
+  return signals.createStore(wrapStoreFn(first, ssrSource), second, third);
+}
+function hydratedCreateOptimisticStore(first, second, third) {
+  if (typeof first !== "function" || !sharedConfig.hydrating) return signals.createOptimisticStore(first, second, third);
+  markTopLevelSnapshotScope();
+  const ssrSource = third?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    return signals.createOptimisticStore(second ?? {}, undefined, third);
+  }
+  const aiResult = hydrateStoreFromAsyncIterable(signals.createOptimisticStore, second ?? {}, third);
+  if (aiResult !== null) return aiResult;
+  return signals.createOptimisticStore(wrapStoreFn(first, ssrSource), second, third);
+}
+function hydratedCreateProjection(fn, initialValue, options) {
+  if (!sharedConfig.hydrating) return signals.createProjection(fn, initialValue, options);
+  markTopLevelSnapshotScope();
+  const ssrSource = options?.ssrSource;
+  if (ssrSource === "client" || ssrSource === "initial") {
+    return signals.createProjection(draft => draft, initialValue, options);
+  }
+  const aiResult = hydrateStoreFromAsyncIterable(signals.createStore, initialValue, options);
+  if (aiResult !== null) return aiResult[0];
+  return signals.createProjection(wrapStoreFn(fn, ssrSource), initialValue, options);
+}
 function enableHydration() {
   _createMemo = hydratedCreateMemo;
   _createSignal = hydratedCreateSignal;
+  _createErrorBoundary = hydratedCreateErrorBoundary;
+  _createOptimistic = hydratedCreateOptimistic;
+  _createProjection = hydratedCreateProjection;
+  _createStore = hydratedCreateStore;
+  _createOptimisticStore = hydratedCreateOptimisticStore;
+  _hydratingValue = sharedConfig.hydrating;
+  _doneValue = sharedConfig.done;
+  Object.defineProperty(sharedConfig, "hydrating", {
+    get() {
+      return _hydratingValue;
+    },
+    set(v) {
+      const was = _hydratingValue;
+      _hydratingValue = v;
+      if (!was && v) {
+        _hydrationDone = false;
+        _doneValue = false;
+        _pendingBoundaries = 0;
+        signals.setSnapshotCapture(true);
+        _snapshotRootOwner = null;
+      } else if (was && !v) {
+        if (_snapshotRootOwner) {
+          signals.releaseSnapshotScope(_snapshotRootOwner);
+          _snapshotRootOwner = null;
+        }
+        checkHydrationComplete();
+      }
+    },
+    configurable: true,
+    enumerable: true
+  });
+  Object.defineProperty(sharedConfig, "done", {
+    get() {
+      return _doneValue;
+    },
+    set(v) {
+      _doneValue = v;
+      if (v) drainHydrationCallbacks();
+    },
+    configurable: true,
+    enumerable: true
+  });
 }
 const createMemo = (...args) => (_createMemo || signals.createMemo)(...args);
 const createSignal = (...args) => (_createSignal || signals.createSignal)(...args);
+const createErrorBoundary = (...args) => (_createErrorBoundary || signals.createErrorBoundary)(...args);
+const createOptimistic = (...args) => (_createOptimistic || signals.createOptimistic)(...args);
+const createProjection = (...args) => (_createProjection || signals.createProjection)(...args);
+const createStore = (...args) => (_createStore || signals.createStore)(...args);
+const createOptimisticStore = (...args) => (_createOptimisticStore || signals.createOptimisticStore)(...args);
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  if (!hy.modules) hy.modules = {};
+  if (!hy.loading) hy.loading = {};
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
+  }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
+}
+function createBoundaryTrigger() {
+  signals.setSnapshotCapture(false);
+  const [s, set] = signals.createSignal(undefined, {
+    equals: false
+  });
+  s();
+  signals.setSnapshotCapture(true);
+  return set;
+}
+function resumeBoundaryHydration(o, id, set) {
+  _pendingBoundaries--;
+  if (signals.isDisposed(o)) {
+    checkHydrationComplete();
+    return;
+  }
+  sharedConfig.gather(id);
+  _hydratingValue = true;
+  signals.markSnapshotScope(o);
+  _snapshotRootOwner = o;
+  set();
+  signals.flush();
+  _snapshotRootOwner = null;
+  _hydratingValue = false;
+  signals.releaseSnapshotScope(o);
+  signals.flush();
+  checkHydrationComplete();
+}
 function Loading(props) {
   if (!sharedConfig.hydrating) return signals.createLoadBoundary(() => props.children, () => props.fallback);
   return signals.createMemo(() => {
     const o = signals.getOwner();
     const id = o.id;
+    let assetPromise;
+    if (sharedConfig.hydrating && sharedConfig.has(id + "_assets")) {
+      const mapping = sharedConfig.load(id + "_assets");
+      if (mapping && typeof mapping === "object") assetPromise = loadModuleAssets(mapping);
+    }
     if (sharedConfig.hydrating && sharedConfig.has(id)) {
       let ref = sharedConfig.load(id);
       let p;
@@ -143,24 +500,38 @@ function Loading(props) {
         if (typeof ref !== "object" || ref.s !== 1) p = ref;else sharedConfig.gather(id);
       }
       if (p) {
-        const [s, set] = signals.createSignal(undefined, {
-          equals: false
+        _pendingBoundaries++;
+        signals.onCleanup(() => {
+          if (!signals.isDisposed(o)) return;
+          sharedConfig.cleanupFragment?.(id);
         });
-        s();
+        const set = createBoundaryTrigger();
         if (p !== "$$f") {
-          p.then(() => {
-            sharedConfig.gather(id);
-            sharedConfig.hydrating = true;
+          const waitFor = assetPromise ? Promise.all([p, assetPromise]) : p;
+          waitFor.then(() => resumeBoundaryHydration(o, id, set), err => {
+            _pendingBoundaries--;
+            checkHydrationComplete();
+            signals.runWithOwner(o, () => {
+              throw err;
+            });
+          });
+        } else {
+          const afterAssets = () => {
+            _pendingBoundaries--;
             set();
-            signals.flush();
-            sharedConfig.hydrating = false;
-          }, err => signals.runWithOwner(o, () => {
-            throw err;
-          }));
-        } else queueMicrotask(set);
+            checkHydrationComplete();
+          };
+          if (assetPromise) assetPromise.then(() => queueMicrotask(afterAssets));else queueMicrotask(afterAssets);
+        }
         return props.fallback;
       }
     }
+    if (assetPromise) {
+      _pendingBoundaries++;
+      const set = createBoundaryTrigger();
+      assetPromise.then(() => resumeBoundaryHydration(o, id, set));
+      return undefined;
+    }
     return signals.createLoadBoundary(() => props.children, () => props.fallback);
   });
 }
@@ -168,11 +539,24 @@ function Loading(props) {
 function createComponent(Comp, props) {
   return devComponent(Comp, props || {});
 }
-function lazy(fn) {
+function lazy(fn, moduleUrl) {
   let comp;
   let p;
   const wrap = props => {
-    comp = signals.createMemo(() => (p || (p = fn())).then(mod => mod.default));
+    if (sharedConfig.hydrating && moduleUrl) {
+      const cached = globalThis._$HY?.modules?.[moduleUrl];
+      if (!cached) {
+        throw new Error(`lazy() module "${moduleUrl}" was not preloaded before hydration. ` + "Ensure it is inside a Loading boundary.");
+      }
+      comp = () => cached.default;
+    }
+    if (!comp) {
+      p || (p = fn());
+      p.then(mod => {
+        comp = () => mod.default;
+      });
+      comp = signals.createMemo(() => p.then(mod => mod.default));
+    }
     let Comp;
     return signals.createMemo(() => (Comp = comp()) ? signals.untrack(() => {
       Object.assign(Comp, {
@@ -197,6 +581,7 @@ function For(props) {
   } : {
     keyed: props.keyed
   };
+  options.name = "<For>";
   return signals.mapArray(() => props.each, props.children, options);
 }
 function Repeat(props) {
@@ -204,6 +589,7 @@ function Repeat(props) {
     fallback: () => props.fallback
   } : {};
   options.from = () => props.from;
+  options.name = "<Repeat>";
   return signals.repeat(() => props.count, index => typeof props.children === "function" ? props.children(index) : props.children, options);
 }
 function Show(props) {
@@ -220,10 +606,17 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? signals.untrack(() => child(() => {
-        if (!signals.untrack(condition)) throw narrowedError("Show");
-        return conditionValue();
-      })) : child;
+      return fn ? signals.untrack(() => {
+        signals.setStrictRead("<Show>");
+        try {
+          return child(() => {
+            if (!signals.untrack(condition)) throw narrowedError("Show");
+            return conditionValue();
+          });
+        } finally {
+          signals.setStrictRead(false);
+        }
+      }) : child;
     }
     return props.fallback;
   }, undefined, {
@@ -256,10 +649,17 @@ function Switch(props) {
     const [index, conditionValue, mp] = sel;
     const child = mp.children;
     const fn = typeof child === "function" && child.length > 0;
-    return fn ? signals.untrack(() => child(() => {
-      if (signals.untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
-      return conditionValue();
-    })) : child;
+    return fn ? signals.untrack(() => {
+      signals.setStrictRead("<Match>");
+      try {
+        return child(() => {
+          if (signals.untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
+          return conditionValue();
+        });
+      } finally {
+        signals.setStrictRead(false);
+      }
+    }) : child;
   }, undefined, {
     name: "eval conditions"
   } );
@@ -268,7 +668,7 @@ function Match(props) {
   return props;
 }
 function Errored(props) {
-  return signals.createErrorBoundary(() => props.children, (err, reset) => {
+  return createErrorBoundary(() => props.children, (err, reset) => {
     const f = props.fallback;
     if ((typeof f !== "function" || f.length == 0)) console.error(err);
     return typeof f === "function" && f.length ? f(err, reset) : f;
@@ -306,18 +706,6 @@ Object.defineProperty(exports, "createEffect", {
   enumerable: true,
   get: function () { return signals.createEffect; }
 });
-Object.defineProperty(exports, "createOptimistic", {
-  enumerable: true,
-  get: function () { return signals.createOptimistic; }
-});
-Object.defineProperty(exports, "createOptimisticStore", {
-  enumerable: true,
-  get: function () { return signals.createOptimisticStore; }
-});
-Object.defineProperty(exports, "createProjection", {
-  enumerable: true,
-  get: function () { return signals.createProjection; }
-});
 Object.defineProperty(exports, "createReaction", {
   enumerable: true,
   get: function () { return signals.createReaction; }
@@ -330,10 +718,6 @@ Object.defineProperty(exports, "createRoot", {
   enumerable: true,
   get: function () { return signals.createRoot; }
 });
-Object.defineProperty(exports, "createStore", {
-  enumerable: true,
-  get: function () { return signals.createStore; }
-});
 Object.defineProperty(exports, "createTrackedEffect", {
   enumerable: true,
   get: function () { return signals.createTrackedEffect; }
@@ -439,7 +823,11 @@ exports.children = children;
 exports.createComponent = createComponent;
 exports.createContext = createContext;
 exports.createMemo = createMemo;
+exports.createOptimistic = createOptimistic;
+exports.createOptimisticStore = createOptimisticStore;
+exports.createProjection = createProjection;
 exports.createSignal = createSignal;
+exports.createStore = createStore;
 exports.createUniqueId = createUniqueId;
 exports.enableHydration = enableHydration;
 exports.lazy = lazy;