@effect/atom-react 4.0.0-beta.4 → 4.0.0-beta.5

package/dist/ReactHydration.d.ts

@@ -0,0 +1,16 @@
+import * as Hydration from "effect/unstable/reactivity/Hydration";
+import * as React from "react";
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export interface HydrationBoundaryProps {
+    state?: Iterable<Hydration.DehydratedAtom>;
+    children?: React.ReactNode;
+}
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export declare const HydrationBoundary: React.FC<HydrationBoundaryProps>;
+//# sourceMappingURL=ReactHydration.d.ts.map

package/dist/ReactHydration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactHydration.d.ts","sourceRoot":"","sources":["../src/ReactHydration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,SAAS,MAAM,sCAAsC,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6D9D,CAAA"}

package/dist/ReactHydration.js

@@ -0,0 +1,67 @@
+/**
+ * @since 1.0.0
+ */
+"use client";
+
+import * as Hydration from "effect/unstable/reactivity/Hydration";
+import * as React from "react";
+import { RegistryContext } from "./RegistryContext.js";
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export const HydrationBoundary = ({
+  children,
+  state
+}) => {
+  const registry = React.useContext(RegistryContext);
+  // 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 Atom 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 Atom 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_ Atom 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 dehydratedAtoms = Array.from(state);
+      const nodes = registry.getNodes();
+      const newDehydratedAtoms = [];
+      const existingDehydratedAtoms = [];
+      for (const dehydratedAtom of dehydratedAtoms) {
+        const existingNode = nodes.get(dehydratedAtom.key);
+        if (!existingNode) {
+          // This is a new Atom value, safe to hydrate immediately
+          newDehydratedAtoms.push(dehydratedAtom);
+        } else {
+          // This Atom value already exists, queue it for later hydration
+          existingDehydratedAtoms.push(dehydratedAtom);
+        }
+      }
+      if (newDehydratedAtoms.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, newDehydratedAtoms);
+      }
+      if (existingDehydratedAtoms.length > 0) {
+        return existingDehydratedAtoms;
+      }
+    }
+    return undefined;
+  }, [registry, state]);
+  React.useEffect(() => {
+    if (hydrationQueue) {
+      Hydration.hydrate(registry, hydrationQueue);
+    }
+  }, [registry, hydrationQueue]);
+  return React.createElement(React.Fragment, {}, children);
+};
+//# sourceMappingURL=ReactHydration.js.map

package/dist/ReactHydration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactHydration.js","names":["Hydration","React","RegistryContext","HydrationBoundary","children","state","registry","useContext","hydrationQueue","useMemo","dehydratedAtoms","Array","from","nodes","getNodes","newDehydratedAtoms","existingDehydratedAtoms","dehydratedAtom","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,sCAAsC;AACjE,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,QAAQ,sBAAsB;AAWtD;;;;AAIA,OAAO,MAAMC,iBAAiB,GAAqCA,CAAC;EAClEC,QAAQ;EACRC;AAAK,CACN,KAAI;EACH,MAAMC,QAAQ,GAAGL,KAAK,CAACM,UAAU,CAACL,eAAe,CAAC;EAElD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMM,cAAc,GAAqDP,KAAK,CAACQ,OAAO,CAAC,MAAK;IAC1F,IAAIJ,KAAK,EAAE;MACT,MAAMK,eAAe,GAAGC,KAAK,CAACC,IAAI,CAACP,KAAK,CAAyC;MACjF,MAAMQ,KAAK,GAAGP,QAAQ,CAACQ,QAAQ,EAAE;MAEjC,MAAMC,kBAAkB,GAAyC,EAAE;MACnE,MAAMC,uBAAuB,GAAyC,EAAE;MAExE,KAAK,MAAMC,cAAc,IAAIP,eAAe,EAAE;QAC5C,MAAMQ,YAAY,GAAGL,KAAK,CAACM,GAAG,CAACF,cAAc,CAACG,GAAG,CAAC;QAElD,IAAI,CAACF,YAAY,EAAE;UACjB;UACAH,kBAAkB,CAACM,IAAI,CAACJ,cAAc,CAAC;QACzC,CAAC,MAAM;UACL;UACAD,uBAAuB,CAACK,IAAI,CAACJ,cAAc,CAAC;QAC9C;MACF;MAEA,IAAIF,kBAAkB,CAACO,MAAM,GAAG,CAAC,EAAE;QACjC;QACA;QACAtB,SAAS,CAACuB,OAAO,CAACjB,QAAQ,EAAES,kBAAkB,CAAC;MACjD;MAEA,IAAIC,uBAAuB,CAACM,MAAM,GAAG,CAAC,EAAE;QACtC,OAAON,uBAAuB;MAChC;IACF;IACA,OAAOQ,SAAS;EAClB,CAAC,EAAE,CAAClB,QAAQ,EAAED,KAAK,CAAC,CAAC;EAErBJ,KAAK,CAACwB,SAAS,CAAC,MAAK;IACnB,IAAIjB,cAAc,EAAE;MAClBR,SAAS,CAACuB,OAAO,CAACjB,QAAQ,EAAEE,cAAc,CAAC;IAC7C;EACF,CAAC,EAAE,CAACF,QAAQ,EAAEE,cAAc,CAAC,CAAC;EAE9B,OAAOP,KAAK,CAACyB,aAAa,CAACzB,KAAK,CAAC0B,QAAQ,EAAE,EAAE,EAAEvB,QAAQ,CAAC;AAC1D,CAAC","ignoreList":[]}

package/dist/index.d.ts

@@ -9,6 +9,10 @@ export * from "./Hooks.ts";
  * @since 1.0.0
  */
 export * from "./RegistryContext.ts";
+/**
+ * @since 1.0.0
+ */
+export * from "./ReactHydration.ts";
 /**
  * @since 1.0.0
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,cAAc,YAAY,CAAA;AAE1B;;GAEG;AACH,cAAc,sBAAsB,CAAA;AAEpC;;GAEG;AACH,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,cAAc,YAAY,CAAA;AAE1B;;GAEG;AACH,cAAc,sBAAsB,CAAA;AAEpC;;GAEG;AACH,cAAc,qBAAqB,CAAA;AAEnC;;GAEG;AACH,cAAc,iBAAiB,CAAA"}

package/dist/index.js

@@ -9,6 +9,10 @@ export * from "./Hooks.js";
  * @since 1.0.0
  */
 export * from "./RegistryContext.js";
+/**
+ * @since 1.0.0
+ */
+export * from "./ReactHydration.js";
 /**
  * @since 1.0.0
  */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;;AAIA;;;AAGA,cAAc,YAAY;AAE1B;;;AAGA,cAAc,sBAAsB;AAEpC;;;AAGA,cAAc,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;;AAIA;;;AAGA,cAAc,YAAY;AAE1B;;;AAGA,cAAc,sBAAsB;AAEpC;;;AAGA,cAAc,qBAAqB;AAEnC;;;AAGA,cAAc,iBAAiB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect/atom-react",
-  "version": "4.0.0-beta.4",
+  "version": "4.0.0-beta.5",
   "type": "module",
   "license": "MIT",
   "description": "React bindings for the Effect Atom modules",
@@ -45,7 +45,7 @@
   "peerDependencies": {
     "react": "^19.2.4",
     "scheduler": "*",
-    "effect": "^4.0.0-beta.4"
+    "effect": "^4.0.0-beta.5"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -59,7 +59,7 @@
     "react-dom": "19.2.3",
     "react-error-boundary": "^6.0.0",
     "scheduler": "^0.27.0",
-    "effect": "^4.0.0-beta.4"
+    "effect": "^4.0.0-beta.5"
   },
   "scripts": {
     "build": "tsc -b tsconfig.json && pnpm babel",

package/src/ReactHydration.ts

@@ -0,0 +1,83 @@
+/**
+ * @since 1.0.0
+ */
+"use client"
+import * as Hydration from "effect/unstable/reactivity/Hydration"
+import * as React from "react"
+import { RegistryContext } from "./RegistryContext.ts"
+
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export interface HydrationBoundaryProps {
+  state?: Iterable<Hydration.DehydratedAtom>
+  children?: React.ReactNode
+}
+
+/**
+ * @since 1.0.0
+ * @category components
+ */
+export const HydrationBoundary: React.FC<HydrationBoundaryProps> = ({
+  children,
+  state
+}) => {
+  const registry = React.useContext(RegistryContext)
+
+  // 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 Atom 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 Atom 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_ Atom values, but
+  // we throw away the fresh data for any existing ones to avoid unexpectedly
+  // updating the UI.
+  const hydrationQueue: Array<Hydration.DehydratedAtomValue> | undefined = React.useMemo(() => {
+    if (state) {
+      const dehydratedAtoms = Array.from(state) as Array<Hydration.DehydratedAtomValue>
+      const nodes = registry.getNodes()
+
+      const newDehydratedAtoms: Array<Hydration.DehydratedAtomValue> = []
+      const existingDehydratedAtoms: Array<Hydration.DehydratedAtomValue> = []
+
+      for (const dehydratedAtom of dehydratedAtoms) {
+        const existingNode = nodes.get(dehydratedAtom.key)
+
+        if (!existingNode) {
+          // This is a new Atom value, safe to hydrate immediately
+          newDehydratedAtoms.push(dehydratedAtom)
+        } else {
+          // This Atom value already exists, queue it for later hydration
+          existingDehydratedAtoms.push(dehydratedAtom)
+        }
+      }
+
+      if (newDehydratedAtoms.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, newDehydratedAtoms)
+      }
+
+      if (existingDehydratedAtoms.length > 0) {
+        return existingDehydratedAtoms
+      }
+    }
+    return undefined
+  }, [registry, state])
+
+  React.useEffect(() => {
+    if (hydrationQueue) {
+      Hydration.hydrate(registry, hydrationQueue)
+    }
+  }, [registry, hydrationQueue])
+
+  return React.createElement(React.Fragment, {}, children)
+}

package/src/index.ts

@@ -12,6 +12,11 @@ export * from "./Hooks.ts"
  */
 export * from "./RegistryContext.ts"
 
+/**
+ * @since 1.0.0
+ */
+export * from "./ReactHydration.ts"
+
 /**
  * @since 1.0.0
  */