solid-js - npm Package Compare versions

Comparing version 2.0.0-beta.30 to 2.0.0-beta.31

dist/dev.cjs

@@ -591,3 +591,15 @@ 'use strict';
   const hy = globalThis._$HY;
-  if (hy && !hy.f) hy.f = fragmentPolicy;
+  if (hy && !hy.fr) {
+    if (!hy.f) hy.f = fragmentPolicy;
+    hy.fr = {
+      pending: anyFragmentPending,
+      subscribe: subscribeFragments
+    };
+    const prevFe = hy.fe;
+    hy.fe = (id, parent) => {
+      prevFe && prevFe(id, parent);
+      for (const sub of _revealSubs) sub(id, parent);
+    };
+    watchTruncation(hy);
+  }
   _hydratingValue = sharedConfig.hydrating;
@@ -694,3 +706,4 @@ _doneValue = sharedConfig.done;
     sharedConfig.boundaryScopes?.delete(id);
-    _fragmentClaims.delete(id);
+    const claim = _fragments.get(id);
+    if (claim) claim.claimed = false;
     return true;
@@ -706,18 +719,84 @@ };
 }
-const _fragmentClaims = new Set();
-const _heldFragments = new Set();
+const _fragments = new Map();
+const _truncated = new Set();
+const _revealSubs = new Set();
+const _truncationRejectors = new Map();
+function fragmentState(id) {
+  let f = _fragments.get(id);
+  if (!f) _fragments.set(id, f = {});
+  return f;
+}
 function fragmentPolicy(id) {
-  if (!_hydrationDone || _fragmentClaims.has(id)) return globalThis.$dfr(id);
-  _heldFragments.add(id);
+  const f = fragmentState(id);
+  if (!_hydrationDone || f.claimed) return globalThis.$dfr(id);
+  f.held = true;
   return 0;
 }
 function replayHeldFragment(id) {
-  if (_heldFragments.delete(id)) globalThis.$dfr(id);
+  const f = _fragments.get(id);
+  if (f && f.held) {
+    f.held = false;
+    globalThis.$dfr(id);
+  }
 }
 function claimFragment(id) {
-  _fragmentClaims.add(id);
+  fragmentState(id).claimed = true;
   replayHeldFragment(id);
 }
-function waitAndResume(p, resume, assetPromise, hydrateRejected = true) {
-  const data = Promise.resolve(p).then(() => {
+function fragmentPending(hy, id) {
+  if (_truncated.has(id)) return false;
+  const ref = hy.r[id + "_fr"];
+  if (!ref || typeof ref !== "object") return false;
+  if (!ref.s) return true;
+  if (hy.v && hy.v[id]) return false;
+  return !!document.getElementById(id);
+}
+function anyFragmentPending() {
+  const hy = globalThis._$HY;
+  if (!hy || !hy.r) return false;
+  for (const key in hy.r) {
+    if (key.length > 3 && key.endsWith("_fr") && fragmentPending(hy, key.slice(0, -3))) {
+      return true;
+    }
+  }
+  return false;
+}
+function subscribeFragments(cb) {
+  _revealSubs.add(cb);
+  return () => _revealSubs.delete(cb);
+}
+function watchTruncation(hy) {
+  if (typeof document === "undefined" || document.readyState !== "loading") return;
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!hy.r) return;
+    for (const key in hy.r) {
+      if (key.length <= 3 || !key.endsWith("_fr")) continue;
+      const ref = hy.r[key];
+      if (ref && typeof ref === "object" && !ref.s) markTruncated(hy, key.slice(0, -3));
+    }
+  }, {
+    once: true
+  });
+}
+function markTruncated(hy, id) {
+  if (_truncated.has(id)) return;
+  _truncated.add(id);
+  const err = new Error(`Hydration fragment "${id}" was truncated: the stream ended before its content arrived.`);
+  const ref = hy.r[id + "_fr"];
+  if (ref && typeof ref === "object") {
+    ref.s = 2;
+    ref.v = err;
+  }
+  const reject = _truncationRejectors.get(id);
+  if (reject) {
+    _truncationRejectors.delete(id);
+    reject(err);
+  }
+  for (const sub of _revealSubs) sub(id);
+}
+function fragmentAbort(id) {
+  return new Promise((_, reject) => _truncationRejectors.set(id, reject));
+}
+function waitAndResume(p, resume, assetPromise, hydrateRejected = true, abort) {
+  const data = (abort ? Promise.race([Promise.resolve(p), abort]) : Promise.resolve(p)).then(() => {
     if (p && typeof p === "object") p.s = 1;
@@ -827,3 +906,3 @@ return true;
       claimFragment(id);
-      waitAndResume(fr, resume, assetPromise, false);
+      waitAndResume(fr, resume, assetPromise, false, fragmentAbort(id));
       return fallback();
@@ -830,0 +909,0 @@ }

dist/dev.js

@@ -590,3 +590,15 @@ import { getContext, createMemo as createMemo$1, flatten, createRoot, setContext, getOwner, untrack, createOwner, runWithOwner, createEffect as createEffect$1, createErrorBoundary as createErrorBoundary$1, createLoadingBoundary as createLoadingBoundary$1, createOptimistic as createOptimistic$1, createOptimisticStore as createOptimisticStore$1, createProjection as createProjection$1, createRenderEffect as createRenderEffect$1, createRevealOrder as createRevealOrder$1, createSignal as createSignal$1, createStore as createStore$1, setSnapshotCapture, releaseSnapshotScope, peekNextChildId, getNextChildId, clearSnapshots, flush, markSnapshotScope, onCleanup, isDisposed, mapArray, repeat, DEV as DEV$1 } from '@solidjs/signals';
   const hy = globalThis._$HY;
-  if (hy && !hy.f) hy.f = fragmentPolicy;
+  if (hy && !hy.fr) {
+    if (!hy.f) hy.f = fragmentPolicy;
+    hy.fr = {
+      pending: anyFragmentPending,
+      subscribe: subscribeFragments
+    };
+    const prevFe = hy.fe;
+    hy.fe = (id, parent) => {
+      prevFe && prevFe(id, parent);
+      for (const sub of _revealSubs) sub(id, parent);
+    };
+    watchTruncation(hy);
+  }
   _hydratingValue = sharedConfig.hydrating;
@@ -693,3 +705,4 @@ _doneValue = sharedConfig.done;
     sharedConfig.boundaryScopes?.delete(id);
-    _fragmentClaims.delete(id);
+    const claim = _fragments.get(id);
+    if (claim) claim.claimed = false;
     return true;
@@ -705,18 +718,84 @@ };
 }
-const _fragmentClaims = new Set();
-const _heldFragments = new Set();
+const _fragments = new Map();
+const _truncated = new Set();
+const _revealSubs = new Set();
+const _truncationRejectors = new Map();
+function fragmentState(id) {
+  let f = _fragments.get(id);
+  if (!f) _fragments.set(id, f = {});
+  return f;
+}
 function fragmentPolicy(id) {
-  if (!_hydrationDone || _fragmentClaims.has(id)) return globalThis.$dfr(id);
-  _heldFragments.add(id);
+  const f = fragmentState(id);
+  if (!_hydrationDone || f.claimed) return globalThis.$dfr(id);
+  f.held = true;
   return 0;
 }
 function replayHeldFragment(id) {
-  if (_heldFragments.delete(id)) globalThis.$dfr(id);
+  const f = _fragments.get(id);
+  if (f && f.held) {
+    f.held = false;
+    globalThis.$dfr(id);
+  }
 }
 function claimFragment(id) {
-  _fragmentClaims.add(id);
+  fragmentState(id).claimed = true;
   replayHeldFragment(id);
 }
-function waitAndResume(p, resume, assetPromise, hydrateRejected = true) {
-  const data = Promise.resolve(p).then(() => {
+function fragmentPending(hy, id) {
+  if (_truncated.has(id)) return false;
+  const ref = hy.r[id + "_fr"];
+  if (!ref || typeof ref !== "object") return false;
+  if (!ref.s) return true;
+  if (hy.v && hy.v[id]) return false;
+  return !!document.getElementById(id);
+}
+function anyFragmentPending() {
+  const hy = globalThis._$HY;
+  if (!hy || !hy.r) return false;
+  for (const key in hy.r) {
+    if (key.length > 3 && key.endsWith("_fr") && fragmentPending(hy, key.slice(0, -3))) {
+      return true;
+    }
+  }
+  return false;
+}
+function subscribeFragments(cb) {
+  _revealSubs.add(cb);
+  return () => _revealSubs.delete(cb);
+}
+function watchTruncation(hy) {
+  if (typeof document === "undefined" || document.readyState !== "loading") return;
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!hy.r) return;
+    for (const key in hy.r) {
+      if (key.length <= 3 || !key.endsWith("_fr")) continue;
+      const ref = hy.r[key];
+      if (ref && typeof ref === "object" && !ref.s) markTruncated(hy, key.slice(0, -3));
+    }
+  }, {
+    once: true
+  });
+}
+function markTruncated(hy, id) {
+  if (_truncated.has(id)) return;
+  _truncated.add(id);
+  const err = new Error(`Hydration fragment "${id}" was truncated: the stream ended before its content arrived.`);
+  const ref = hy.r[id + "_fr"];
+  if (ref && typeof ref === "object") {
+    ref.s = 2;
+    ref.v = err;
+  }
+  const reject = _truncationRejectors.get(id);
+  if (reject) {
+    _truncationRejectors.delete(id);
+    reject(err);
+  }
+  for (const sub of _revealSubs) sub(id);
+}
+function fragmentAbort(id) {
+  return new Promise((_, reject) => _truncationRejectors.set(id, reject));
+}
+function waitAndResume(p, resume, assetPromise, hydrateRejected = true, abort) {
+  const data = (abort ? Promise.race([Promise.resolve(p), abort]) : Promise.resolve(p)).then(() => {
     if (p && typeof p === "object") p.s = 1;
@@ -826,3 +905,3 @@ return true;
       claimFragment(id);
-      waitAndResume(fr, resume, assetPromise, false);
+      waitAndResume(fr, resume, assetPromise, false, fragmentAbort(id));
       return fallback();
@@ -829,0 +908,0 @@ }

dist/server.cjs

@@ -651,5 +651,5 @@ 'use strict';
 }
-function createStore(first, second) {
+function createStore(first, second, options) {
   if (typeof first === "function") {
-    const store = createProjection(first, second);
+    const store = createProjection(first, second, options);
     return [store, fn => fn(store)];
@@ -656,0 +656,0 @@ }

dist/server.js

@@ -650,5 +650,5 @@ import { NotReadyError, $REFRESH, merge as merge$1, isWrappable, NoOwnerError, ContextNotFoundError, $PROXY, flatten } from '@solidjs/signals';
 }
-function createStore(first, second) {
+function createStore(first, second, options) {
   if (typeof first === "function") {
-    const store = createProjection(first, second);
+    const store = createProjection(first, second, options);
     return [store, fn => fn(store)];
@@ -655,0 +655,0 @@ }

dist/solid.cjs

@@ -574,3 +574,15 @@ 'use strict';
   const hy = globalThis._$HY;
-  if (hy && !hy.f) hy.f = fragmentPolicy;
+  if (hy && !hy.fr) {
+    if (!hy.f) hy.f = fragmentPolicy;
+    hy.fr = {
+      pending: anyFragmentPending,
+      subscribe: subscribeFragments
+    };
+    const prevFe = hy.fe;
+    hy.fe = (id, parent) => {
+      prevFe && prevFe(id, parent);
+      for (const sub of _revealSubs) sub(id, parent);
+    };
+    watchTruncation(hy);
+  }
   _hydratingValue = sharedConfig.hydrating;
@@ -677,3 +689,4 @@ _doneValue = sharedConfig.done;
     sharedConfig.boundaryScopes?.delete(id);
-    _fragmentClaims.delete(id);
+    const claim = _fragments.get(id);
+    if (claim) claim.claimed = false;
     return true;
@@ -689,18 +702,84 @@ };
 }
-const _fragmentClaims = new Set();
-const _heldFragments = new Set();
+const _fragments = new Map();
+const _truncated = new Set();
+const _revealSubs = new Set();
+const _truncationRejectors = new Map();
+function fragmentState(id) {
+  let f = _fragments.get(id);
+  if (!f) _fragments.set(id, f = {});
+  return f;
+}
 function fragmentPolicy(id) {
-  if (!_hydrationDone || _fragmentClaims.has(id)) return globalThis.$dfr(id);
-  _heldFragments.add(id);
+  const f = fragmentState(id);
+  if (!_hydrationDone || f.claimed) return globalThis.$dfr(id);
+  f.held = true;
   return 0;
 }
 function replayHeldFragment(id) {
-  if (_heldFragments.delete(id)) globalThis.$dfr(id);
+  const f = _fragments.get(id);
+  if (f && f.held) {
+    f.held = false;
+    globalThis.$dfr(id);
+  }
 }
 function claimFragment(id) {
-  _fragmentClaims.add(id);
+  fragmentState(id).claimed = true;
   replayHeldFragment(id);
 }
-function waitAndResume(p, resume, assetPromise, hydrateRejected = true) {
-  const data = Promise.resolve(p).then(() => {
+function fragmentPending(hy, id) {
+  if (_truncated.has(id)) return false;
+  const ref = hy.r[id + "_fr"];
+  if (!ref || typeof ref !== "object") return false;
+  if (!ref.s) return true;
+  if (hy.v && hy.v[id]) return false;
+  return !!document.getElementById(id);
+}
+function anyFragmentPending() {
+  const hy = globalThis._$HY;
+  if (!hy || !hy.r) return false;
+  for (const key in hy.r) {
+    if (key.length > 3 && key.endsWith("_fr") && fragmentPending(hy, key.slice(0, -3))) {
+      return true;
+    }
+  }
+  return false;
+}
+function subscribeFragments(cb) {
+  _revealSubs.add(cb);
+  return () => _revealSubs.delete(cb);
+}
+function watchTruncation(hy) {
+  if (typeof document === "undefined" || document.readyState !== "loading") return;
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!hy.r) return;
+    for (const key in hy.r) {
+      if (key.length <= 3 || !key.endsWith("_fr")) continue;
+      const ref = hy.r[key];
+      if (ref && typeof ref === "object" && !ref.s) markTruncated(hy, key.slice(0, -3));
+    }
+  }, {
+    once: true
+  });
+}
+function markTruncated(hy, id) {
+  if (_truncated.has(id)) return;
+  _truncated.add(id);
+  const err = new Error(`Hydration fragment "${id}" was truncated: the stream ended before its content arrived.`);
+  const ref = hy.r[id + "_fr"];
+  if (ref && typeof ref === "object") {
+    ref.s = 2;
+    ref.v = err;
+  }
+  const reject = _truncationRejectors.get(id);
+  if (reject) {
+    _truncationRejectors.delete(id);
+    reject(err);
+  }
+  for (const sub of _revealSubs) sub(id);
+}
+function fragmentAbort(id) {
+  return new Promise((_, reject) => _truncationRejectors.set(id, reject));
+}
+function waitAndResume(p, resume, assetPromise, hydrateRejected = true, abort) {
+  const data = (abort ? Promise.race([Promise.resolve(p), abort]) : Promise.resolve(p)).then(() => {
     if (p && typeof p === "object") p.s = 1;
@@ -810,3 +889,3 @@ return true;
       claimFragment(id);
-      waitAndResume(fr, resume, assetPromise, false);
+      waitAndResume(fr, resume, assetPromise, false, fragmentAbort(id));
       return fallback();
@@ -813,0 +892,0 @@ }

dist/solid.js

@@ -573,3 +573,15 @@ import { getContext, createMemo as createMemo$1, flatten, createRoot, setContext, createOwner, runWithOwner, createEffect as createEffect$1, createErrorBoundary as createErrorBoundary$1, createLoadingBoundary as createLoadingBoundary$1, createOptimistic as createOptimistic$1, createOptimisticStore as createOptimisticStore$1, createProjection as createProjection$1, createRenderEffect as createRenderEffect$1, createRevealOrder as createRevealOrder$1, createSignal as createSignal$1, createStore as createStore$1, setSnapshotCapture, releaseSnapshotScope, getOwner, peekNextChildId, getNextChildId, clearSnapshots, flush, markSnapshotScope, onCleanup, isDisposed, untrack, mapArray, repeat } from '@solidjs/signals';
   const hy = globalThis._$HY;
-  if (hy && !hy.f) hy.f = fragmentPolicy;
+  if (hy && !hy.fr) {
+    if (!hy.f) hy.f = fragmentPolicy;
+    hy.fr = {
+      pending: anyFragmentPending,
+      subscribe: subscribeFragments
+    };
+    const prevFe = hy.fe;
+    hy.fe = (id, parent) => {
+      prevFe && prevFe(id, parent);
+      for (const sub of _revealSubs) sub(id, parent);
+    };
+    watchTruncation(hy);
+  }
   _hydratingValue = sharedConfig.hydrating;
@@ -676,3 +688,4 @@ _doneValue = sharedConfig.done;
     sharedConfig.boundaryScopes?.delete(id);
-    _fragmentClaims.delete(id);
+    const claim = _fragments.get(id);
+    if (claim) claim.claimed = false;
     return true;
@@ -688,18 +701,84 @@ };
 }
-const _fragmentClaims = new Set();
-const _heldFragments = new Set();
+const _fragments = new Map();
+const _truncated = new Set();
+const _revealSubs = new Set();
+const _truncationRejectors = new Map();
+function fragmentState(id) {
+  let f = _fragments.get(id);
+  if (!f) _fragments.set(id, f = {});
+  return f;
+}
 function fragmentPolicy(id) {
-  if (!_hydrationDone || _fragmentClaims.has(id)) return globalThis.$dfr(id);
-  _heldFragments.add(id);
+  const f = fragmentState(id);
+  if (!_hydrationDone || f.claimed) return globalThis.$dfr(id);
+  f.held = true;
   return 0;
 }
 function replayHeldFragment(id) {
-  if (_heldFragments.delete(id)) globalThis.$dfr(id);
+  const f = _fragments.get(id);
+  if (f && f.held) {
+    f.held = false;
+    globalThis.$dfr(id);
+  }
 }
 function claimFragment(id) {
-  _fragmentClaims.add(id);
+  fragmentState(id).claimed = true;
   replayHeldFragment(id);
 }
-function waitAndResume(p, resume, assetPromise, hydrateRejected = true) {
-  const data = Promise.resolve(p).then(() => {
+function fragmentPending(hy, id) {
+  if (_truncated.has(id)) return false;
+  const ref = hy.r[id + "_fr"];
+  if (!ref || typeof ref !== "object") return false;
+  if (!ref.s) return true;
+  if (hy.v && hy.v[id]) return false;
+  return !!document.getElementById(id);
+}
+function anyFragmentPending() {
+  const hy = globalThis._$HY;
+  if (!hy || !hy.r) return false;
+  for (const key in hy.r) {
+    if (key.length > 3 && key.endsWith("_fr") && fragmentPending(hy, key.slice(0, -3))) {
+      return true;
+    }
+  }
+  return false;
+}
+function subscribeFragments(cb) {
+  _revealSubs.add(cb);
+  return () => _revealSubs.delete(cb);
+}
+function watchTruncation(hy) {
+  if (typeof document === "undefined" || document.readyState !== "loading") return;
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!hy.r) return;
+    for (const key in hy.r) {
+      if (key.length <= 3 || !key.endsWith("_fr")) continue;
+      const ref = hy.r[key];
+      if (ref && typeof ref === "object" && !ref.s) markTruncated(hy, key.slice(0, -3));
+    }
+  }, {
+    once: true
+  });
+}
+function markTruncated(hy, id) {
+  if (_truncated.has(id)) return;
+  _truncated.add(id);
+  const err = new Error(`Hydration fragment "${id}" was truncated: the stream ended before its content arrived.`);
+  const ref = hy.r[id + "_fr"];
+  if (ref && typeof ref === "object") {
+    ref.s = 2;
+    ref.v = err;
+  }
+  const reject = _truncationRejectors.get(id);
+  if (reject) {
+    _truncationRejectors.delete(id);
+    reject(err);
+  }
+  for (const sub of _revealSubs) sub(id);
+}
+function fragmentAbort(id) {
+  return new Promise((_, reject) => _truncationRejectors.set(id, reject));
+}
+function waitAndResume(p, resume, assetPromise, hydrateRejected = true, abort) {
+  const data = (abort ? Promise.race([Promise.resolve(p), abort]) : Promise.resolve(p)).then(() => {
     if (p && typeof p === "object") p.s = 1;
@@ -809,3 +888,3 @@ return true;
       claimFragment(id);
-      waitAndResume(fr, resume, assetPromise, false);
+      waitAndResume(fr, resume, assetPromise, false, fragmentAbort(id));
       return fallback();
@@ -812,0 +891,0 @@ }

package.json

 {
   "name": "solid-js",
   "description": "Reactive JavaScript library for building user interfaces. Compiles JSX to real DOM with fine-grained signal-based updates — no virtual DOM.",
-  "version": "2.0.0-beta.30",
+  "version": "2.0.0-beta.31",
   "author": "Ryan Carniato",
@@ -131,3 +131,3 @@ "license": "MIT",
   "dependencies": {
-    "@solidjs/signals": "^2.0.0-beta.30",
+    "@solidjs/signals": "^2.0.0-beta.31",
     "csstype": "^3.1.0",
@@ -134,0 +134,0 @@ "seroval": "~1.5.4",

types-cjs/client/component.d.cts

@@ -60,3 +60,3 @@ import type { Element as SolidElement } from "../types.cjs";
  */
-export type Ref<T> = T | ((val: T) => void);
+export type Ref<T> = T | ((val: T) => void) | undefined | Ref<T>[];
 /**
@@ -63,0 +63,0 @@ * Invokes a component, wrapping the call in `untrack` so that reactive reads

types-cjs/server/signals.d.cts

@@ -131,3 +131,6 @@ import { $REFRESH } from "@solidjs/signals";
 }): [get: Store<T>, set: StoreSetter<T>];
-export declare function createStore<T extends object>(fn: (store: T) => void | T | Promise<void | T>, store: Partial<T> | Store<T>): [get: Store<T>, set: StoreSetter<T>];
+export declare function createStore<T extends object>(fn: (store: T) => void | T | Promise<void | T>, store: Partial<T> | Store<T>, options?: ServerSsrOptions & {
+    name?: string;
+    shallow?: boolean;
+}): [get: Store<T>, set: StoreSetter<T>];
 export declare const createOptimisticStore: typeof createStore;
@@ -134,0 +137,0 @@ export declare function createProjection<T extends object>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, initialValue: Partial<T> | Store<T>, options?: ServerSsrOptions): Store<T>;

types/client/component.d.ts

@@ -60,3 +60,3 @@ import type { Element as SolidElement } from "../types.js";
  */
-export type Ref<T> = T | ((val: T) => void);
+export type Ref<T> = T | ((val: T) => void) | undefined | Ref<T>[];
 /**
@@ -63,0 +63,0 @@ * Invokes a component, wrapping the call in `untrack` so that reactive reads

types/server/signals.d.ts

@@ -131,3 +131,6 @@ import { $REFRESH } from "@solidjs/signals";
 }): [get: Store<T>, set: StoreSetter<T>];
-export declare function createStore<T extends object>(fn: (store: T) => void | T | Promise<void | T>, store: Partial<T> | Store<T>): [get: Store<T>, set: StoreSetter<T>];
+export declare function createStore<T extends object>(fn: (store: T) => void | T | Promise<void | T>, store: Partial<T> | Store<T>, options?: ServerSsrOptions & {
+    name?: string;
+    shallow?: boolean;
+}): [get: Store<T>, set: StoreSetter<T>];
 export declare const createOptimisticStore: typeof createStore;
@@ -134,0 +137,0 @@ export declare function createProjection<T extends object>(fn: (draft: T) => void | T | Promise<void | T> | AsyncIterable<void | T>, initialValue: Partial<T> | Store<T>, options?: ServerSsrOptions): Store<T>;

No alert changes

Improved metrics

Total package byte prevSize

474303

2.03%

Lines of code

10643

3.09%

Dependency changes

• Updated

  @solidjs/signals@^2.0.0-beta.31