@effect-rx/rx-react 0.39.1 → 0.40.0

package/dist/cjs/ReactHydration.js

@@ -38,12 +38,60 @@ function _interopRequireWildcard(e, t) {
  */
 const HydrationBoundary = ({
   children,
+  options = {},
   state
 }) => {
   const registry = React.useContext(_RegistryContext.RegistryContext);
-  React.useEffect(() => {
-    Hydration.hydrate(registry, state);
+  const optionsRef = React.useRef(options);
+  optionsRef.current = options;
+  // This useMemo is for performance reasons only, everything inside it must
+  // be safe to run in every render and code here should be read as "in render".
+  //
+  // This code needs to happen during the render phase, because after initial
+  // SSR, hydration needs to happen _before_ children render. Also, if hydrating
+  // during a transition, we want to hydrate as much as is safe in render so
+  // we can prerender as much as possible.
+  //
+  // For any Rx values that already exist in the registry, we want to hold back on
+  // hydrating until _after_ the render phase. The reason for this is that during
+  // transitions, we don't want the existing Rx values and subscribers to update to
+  // the new data on the current page, only _after_ the transition is committed.
+  // If the transition is aborted, we will have hydrated any _new_ Rx values, but
+  // we throw away the fresh data for any existing ones to avoid unexpectedly
+  // updating the UI.
+  const hydrationQueue = React.useMemo(() => {
+    if (state) {
+      const dehydratedRxs = Array.from(state);
+      const nodes = registry.getNodes();
+      const newDehydratedRxs = [];
+      const existingDehydratedRxs = [];
+      for (const dehydratedRx of dehydratedRxs) {
+        const existingNode = nodes.get(dehydratedRx.key);
+        if (!existingNode) {
+          // This is a new Rx value, safe to hydrate immediately
+          newDehydratedRxs.push(dehydratedRx);
+        } else {
+          // This Rx value already exists, queue it for later hydration
+          // TODO: Add logic to check if hydration data is newer
+          existingDehydratedRxs.push(dehydratedRx);
+        }
+      }
+      if (newDehydratedRxs.length > 0) {
+        // It's actually fine to call this with state that already exists
+        // in the registry, or is older. hydrate() is idempotent.
+        Hydration.hydrate(registry, newDehydratedRxs, optionsRef.current);
+      }
+      if (existingDehydratedRxs.length > 0) {
+        return existingDehydratedRxs;
+      }
+    }
+    return undefined;
   }, [registry, state]);
+  React.useEffect(() => {
+    if (hydrationQueue) {
+      Hydration.hydrate(registry, hydrationQueue, optionsRef.current);
+    }
+  }, [registry, hydrationQueue]);
   return React.createElement(React.Fragment, {}, children);
 };
 exports.HydrationBoundary = HydrationBoundary;

package/dist/cjs/ReactHydration.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactHydration.js","names":["Object","defineProperty","exports","value","HydrationBoundary","Hydration","_interopRequireWildcard","require","React","_RegistryContext","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","children","state","registry","useContext","RegistryContext","useEffect","hydrate","createElement","Fragment"],"sources":["../../src/ReactHydration.ts"],"sourcesContent":[null],"mappings":";;AAAA;;;AAGA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,iBAAA;AACZ,IAAAC,SAAA,gBAAAC,uBAAA,cAAAC,OAAA;AACA,IAAAC,KAAA,gBAAAF,uBAAA,cAAAC,OAAA;AACA,IAAAE,gBAAA,gBAAAF,OAAA;AAAsD,SAAAD,wBAAAI,CAAA,EAAAC,CAAA;EAAA,yBAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA;IAAAE,CAAA,OAAAF,OAAA;EAAA,QAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA;IAAA,KAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA;IAAA,IAAAM,CAAA;MAAAC,CAAA;MAAAC,CAAA;QAAAC,SAAA;QAAAC,OAAA,EAAAV;MAAA;IAAA,aAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA;IAAA,IAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA;MAAA,IAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA;MAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA;IAAA;IAAA,WAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAhB,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAA0B,wBAAA,CAAAhB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA;IAAA,OAAAO,CAAA;EAAA,GAAAR,CAAA,EAAAC,CAAA;AAAA;AAEtD;;;;AAIO,MAAMP,iBAAiB,GAGzBA,CAAC;EAAEuB,QAAQ;EAAEC;AAAK,CAAE,KAAI;EAC3B,MAAMC,QAAQ,GAAGrB,KAAK,CAACsB,UAAU,CAACrB,gBAAA,CAAAsB,eAAe,CAAC;EAClDvB,KAAK,CAACwB,SAAS,CAAC,MAAK;IACnB3B,SAAS,CAAC4B,OAAO,CAACJ,QAAQ,EAAED,KAAK,CAAC;EACpC,CAAC,EAAE,CAACC,QAAQ,EAAED,KAAK,CAAC,CAAC;EACrB,OAAOpB,KAAK,CAAC0B,aAAa,CAAC1B,KAAK,CAAC2B,QAAQ,EAAE,EAAE,EAAER,QAAQ,CAAC;AAC1D,CAAC;AAAAzB,OAAA,CAAAE,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"file":"ReactHydration.js","names":["Object","defineProperty","exports","value","HydrationBoundary","Hydration","_interopRequireWildcard","require","React","_RegistryContext","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","children","options","state","registry","useContext","RegistryContext","optionsRef","useRef","current","hydrationQueue","useMemo","dehydratedRxs","Array","from","nodes","getNodes","newDehydratedRxs","existingDehydratedRxs","dehydratedRx","existingNode","key","push","length","hydrate","undefined","useEffect","createElement","Fragment"],"sources":["../../src/ReactHydration.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/dts/ReactHydration.d.ts

@@ -4,8 +4,16 @@ import * as React from "react";
  * @since 1.0.0
  * @category components
  */
-export declare const HydrationBoundary: React.FC<{
-    state: Iterable<Hydration.DehydratedRx>;
+export interface HydrationBoundaryProps {
+    state?: Iterable<Hydration.DehydratedRx>;
+    options?: {
+        readonly shouldHydrateRx?: ((dehydratedRx: Hydration.DehydratedRx) => boolean) | undefined;
+    };
     children?: React.ReactNode;
-}>;
+}
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export declare const HydrationBoundary: React.FC<HydrationBoundaryProps>;
 //# sourceMappingURL=ReactHydration.d.ts.map

package/dist/dts/ReactHydration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactHydration.d.ts","sourceRoot":"","sources":["../../src/ReactHydration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAMA,CAAA"}
+{"version":3,"file":"ReactHydration.d.ts","sourceRoot":"","sources":["../../src/ReactHydration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;IACxC,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;KAC3F,CAAA;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkE9D,CAAA"}

package/dist/esm/ReactHydration.js

@@ -12,12 +12,60 @@ import { RegistryContext } from "./RegistryContext.js";
  */
 export const HydrationBoundary = ({
   children,
+  options = {},
   state
 }) => {
   const registry = React.useContext(RegistryContext);
-  React.useEffect(() => {
-    Hydration.hydrate(registry, state);
+  const optionsRef = React.useRef(options);
+  optionsRef.current = options;
+  // This useMemo is for performance reasons only, everything inside it must
+  // be safe to run in every render and code here should be read as "in render".
+  //
+  // This code needs to happen during the render phase, because after initial
+  // SSR, hydration needs to happen _before_ children render. Also, if hydrating
+  // during a transition, we want to hydrate as much as is safe in render so
+  // we can prerender as much as possible.
+  //
+  // For any Rx values that already exist in the registry, we want to hold back on
+  // hydrating until _after_ the render phase. The reason for this is that during
+  // transitions, we don't want the existing Rx values and subscribers to update to
+  // the new data on the current page, only _after_ the transition is committed.
+  // If the transition is aborted, we will have hydrated any _new_ Rx values, but
+  // we throw away the fresh data for any existing ones to avoid unexpectedly
+  // updating the UI.
+  const hydrationQueue = React.useMemo(() => {
+    if (state) {
+      const dehydratedRxs = Array.from(state);
+      const nodes = registry.getNodes();
+      const newDehydratedRxs = [];
+      const existingDehydratedRxs = [];
+      for (const dehydratedRx of dehydratedRxs) {
+        const existingNode = nodes.get(dehydratedRx.key);
+        if (!existingNode) {
+          // This is a new Rx value, safe to hydrate immediately
+          newDehydratedRxs.push(dehydratedRx);
+        } else {
+          // This Rx value already exists, queue it for later hydration
+          // TODO: Add logic to check if hydration data is newer
+          existingDehydratedRxs.push(dehydratedRx);
+        }
+      }
+      if (newDehydratedRxs.length > 0) {
+        // It's actually fine to call this with state that already exists
+        // in the registry, or is older. hydrate() is idempotent.
+        Hydration.hydrate(registry, newDehydratedRxs, optionsRef.current);
+      }
+      if (existingDehydratedRxs.length > 0) {
+        return existingDehydratedRxs;
+      }
+    }
+    return undefined;
   }, [registry, state]);
+  React.useEffect(() => {
+    if (hydrationQueue) {
+      Hydration.hydrate(registry, hydrationQueue, optionsRef.current);
+    }
+  }, [registry, hydrationQueue]);
   return React.createElement(React.Fragment, {}, children);
 };
 //# sourceMappingURL=ReactHydration.js.map

package/dist/esm/ReactHydration.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactHydration.js","names":["Hydration","React","RegistryContext","HydrationBoundary","children","state","registry","useContext","useEffect","hydrate","createElement","Fragment"],"sources":["../../src/ReactHydration.ts"],"sourcesContent":[null],"mappings":"AAAA;;;AAGA,YAAY;;AACZ,OAAO,KAAKA,SAAS,MAAM,yBAAyB;AACpD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,QAAQ,sBAAsB;AAEtD;;;;AAIA,OAAO,MAAMC,iBAAiB,GAGzBA,CAAC;EAAEC,QAAQ;EAAEC;AAAK,CAAE,KAAI;EAC3B,MAAMC,QAAQ,GAAGL,KAAK,CAACM,UAAU,CAACL,eAAe,CAAC;EAClDD,KAAK,CAACO,SAAS,CAAC,MAAK;IACnBR,SAAS,CAACS,OAAO,CAACH,QAAQ,EAAED,KAAK,CAAC;EACpC,CAAC,EAAE,CAACC,QAAQ,EAAED,KAAK,CAAC,CAAC;EACrB,OAAOJ,KAAK,CAACS,aAAa,CAACT,KAAK,CAACU,QAAQ,EAAE,EAAE,EAAEP,QAAQ,CAAC;AAC1D,CAAC","ignoreList":[]}
+{"version":3,"file":"ReactHydration.js","names":["Hydration","React","RegistryContext","HydrationBoundary","children","options","state","registry","useContext","optionsRef","useRef","current","hydrationQueue","useMemo","dehydratedRxs","Array","from","nodes","getNodes","newDehydratedRxs","existingDehydratedRxs","dehydratedRx","existingNode","get","key","push","length","hydrate","undefined","useEffect","createElement","Fragment"],"sources":["../../src/ReactHydration.ts"],"sourcesContent":[null],"mappings":"AAAA;;;AAGA,YAAY;;AACZ,OAAO,KAAKA,SAAS,MAAM,yBAAyB;AACpD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,QAAQ,sBAAsB;AActD;;;;AAIA,OAAO,MAAMC,iBAAiB,GAAqCA,CAAC;EAClEC,QAAQ;EACRC,OAAO,GAAG,EAAE;EACZC;AAAK,CACN,KAAI;EACH,MAAMC,QAAQ,GAAGN,KAAK,CAACO,UAAU,CAACN,eAAe,CAAC;EAElD,MAAMO,UAAU,GAAGR,KAAK,CAACS,MAAM,CAACL,OAAO,CAAC;EACxCI,UAAU,CAACE,OAAO,GAAGN,OAAO;EAE5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMO,cAAc,GAA8CX,KAAK,CAACY,OAAO,CAAC,MAAK;IACnF,IAAIP,KAAK,EAAE;MACT,MAAMQ,aAAa,GAAGC,KAAK,CAACC,IAAI,CAACV,KAAK,CAAC;MACvC,MAAMW,KAAK,GAAGV,QAAQ,CAACW,QAAQ,EAAE;MAEjC,MAAMC,gBAAgB,GAAkC,EAAE;MAC1D,MAAMC,qBAAqB,GAAkC,EAAE;MAE/D,KAAK,MAAMC,YAAY,IAAIP,aAAa,EAAE;QACxC,MAAMQ,YAAY,GAAGL,KAAK,CAACM,GAAG,CAACF,YAAY,CAACG,GAAG,CAAC;QAEhD,IAAI,CAACF,YAAY,EAAE;UACjB;UACAH,gBAAgB,CAACM,IAAI,CAACJ,YAAY,CAAC;QACrC,CAAC,MAAM;UACL;UACA;UACAD,qBAAqB,CAACK,IAAI,CAACJ,YAAY,CAAC;QAC1C;MACF;MAEA,IAAIF,gBAAgB,CAACO,MAAM,GAAG,CAAC,EAAE;QAC/B;QACA;QACA1B,SAAS,CAAC2B,OAAO,CAACpB,QAAQ,EAAEY,gBAAgB,EAAEV,UAAU,CAACE,OAAO,CAAC;MACnE;MAEA,IAAIS,qBAAqB,CAACM,MAAM,GAAG,CAAC,EAAE;QACpC,OAAON,qBAAqB;MAC9B;IACF;IACA,OAAOQ,SAAS;EAClB,CAAC,EAAE,CAACrB,QAAQ,EAAED,KAAK,CAAC,CAAC;EAErBL,KAAK,CAAC4B,SAAS,CAAC,MAAK;IACnB,IAAIjB,cAAc,EAAE;MAClBZ,SAAS,CAAC2B,OAAO,CAACpB,QAAQ,EAAEK,cAAc,EAAEH,UAAU,CAACE,OAAO,CAAC;IACjE;EACF,CAAC,EAAE,CAACJ,QAAQ,EAAEK,cAAc,CAAC,CAAC;EAE9B,OAAOX,KAAK,CAAC6B,aAAa,CAAC7B,KAAK,CAAC8B,QAAQ,EAAE,EAAE,EAAE3B,QAAQ,CAAC;AAC1D,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-rx/rx-react",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "description": "Reactive toolkit for Effect",
   "license": "MIT",
   "repository": {
@@ -11,10 +11,10 @@
   "author": "Effect contributors",
   "homepage": "https://github.com/effect-ts/rx",
   "dependencies": {
-    "@effect-rx/rx": "^0.45.0"
+    "@effect-rx/rx": "^0.46.0"
   },
   "peerDependencies": {
-    "effect": "^3.16",
+    "effect": "^3.17",
     "react": ">=18 <20",
     "scheduler": "*"
   },

package/src/ReactHydration.ts

@@ -10,13 +10,82 @@ import { RegistryContext } from "./RegistryContext.js"
  * @since 1.0.0
  * @category components
  */
-export const HydrationBoundary: React.FC<{
-  state: Iterable<Hydration.DehydratedRx>
+export interface HydrationBoundaryProps {
+  state?: Iterable<Hydration.DehydratedRx>
+  options?: {
+    readonly shouldHydrateRx?: ((dehydratedRx: Hydration.DehydratedRx) => boolean) | undefined
+  }
   children?: React.ReactNode
-}> = ({ children, state }) => {
+}
+
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export const HydrationBoundary: React.FC<HydrationBoundaryProps> = ({
+  children,
+  options = {},
+  state
+}) => {
   const registry = React.useContext(RegistryContext)
-  React.useEffect(() => {
-    Hydration.hydrate(registry, state)
+
+  const optionsRef = React.useRef(options)
+  optionsRef.current = options
+
+  // This useMemo is for performance reasons only, everything inside it must
+  // be safe to run in every render and code here should be read as "in render".
+  //
+  // This code needs to happen during the render phase, because after initial
+  // SSR, hydration needs to happen _before_ children render. Also, if hydrating
+  // during a transition, we want to hydrate as much as is safe in render so
+  // we can prerender as much as possible.
+  //
+  // For any Rx values that already exist in the registry, we want to hold back on
+  // hydrating until _after_ the render phase. The reason for this is that during
+  // transitions, we don't want the existing Rx values and subscribers to update to
+  // the new data on the current page, only _after_ the transition is committed.
+  // If the transition is aborted, we will have hydrated any _new_ Rx values, but
+  // we throw away the fresh data for any existing ones to avoid unexpectedly
+  // updating the UI.
+  const hydrationQueue: Array<Hydration.DehydratedRx> | undefined = React.useMemo(() => {
+    if (state) {
+      const dehydratedRxs = Array.from(state)
+      const nodes = registry.getNodes()
+
+      const newDehydratedRxs: Array<Hydration.DehydratedRx> = []
+      const existingDehydratedRxs: Array<Hydration.DehydratedRx> = []
+
+      for (const dehydratedRx of dehydratedRxs) {
+        const existingNode = nodes.get(dehydratedRx.key)
+
+        if (!existingNode) {
+          // This is a new Rx value, safe to hydrate immediately
+          newDehydratedRxs.push(dehydratedRx)
+        } else {
+          // This Rx value already exists, queue it for later hydration
+          // TODO: Add logic to check if hydration data is newer
+          existingDehydratedRxs.push(dehydratedRx)
+        }
+      }
+
+      if (newDehydratedRxs.length > 0) {
+        // It's actually fine to call this with state that already exists
+        // in the registry, or is older. hydrate() is idempotent.
+        Hydration.hydrate(registry, newDehydratedRxs, optionsRef.current)
+      }
+
+      if (existingDehydratedRxs.length > 0) {
+        return existingDehydratedRxs
+      }
+    }
+    return undefined
   }, [registry, state])
+
+  React.useEffect(() => {
+    if (hydrationQueue) {
+      Hydration.hydrate(registry, hydrationQueue, optionsRef.current)
+    }
+  }, [registry, hydrationQueue])
+
   return React.createElement(React.Fragment, {}, children)
 }