raf-effect-atom 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -1,10 +1,25 @@
 # Changelog
 
+## [0.2.6](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.5...raf-effect-atom%400.2.6) (2026-10-23)
+
+### Features
+
+* **raf-effect-atom:** start browser-only reads with prefetchInBrowser ([65f783a](https://github.com/KATT/raf-effect-atom/commit/65f783a0014e44a8aa11ce5e8fa34ab863063403))
+
+### Documentation
+
+* **www:** keep a search box's text in the URL, and drop the debounce sample ([a3949bf](https://github.com/KATT/raf-effect-atom/commit/a3949bfca4b64e478132f983033b2776e50ba949))
+
+### Tests
+
+* **raf-effect-atom:** start a browser-only read from a client-only TanStack route ([69a8bd8](https://github.com/KATT/raf-effect-atom/commit/69a8bd887c34a7aeef51fdd20057ac30aa9e1fbc))
+* **raf-effect-atom:** type a derived atom's handle through it and its wrappers ([a16b587](https://github.com/KATT/raf-effect-atom/commit/a16b587a59dc4827dd18ecb3a3d5bb8f6fdedf0b))
+
 ## [0.2.5](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.4...raf-effect-atom%400.2.5) (2026-10-23)
 
 ### Features
 
-* **raf-effect-atom:** start a derived atom's source from the loader verbs, following initialValueTarget ([00a9760](https://github.com/KATT/raf-effect-atom/commit/00a97602068cabf085fa9cfe41e88bf853b6af32))
+- **raf-effect-atom:** start a derived atom's source from the loader verbs, following initialValueTarget ([00a9760](https://github.com/KATT/raf-effect-atom/commit/00a97602068cabf085fa9cfe41e88bf853b6af32))
 
 ## [0.2.4](https://github.com/KATT/raf-effect-atom/compare/raf-effect-atom%400.2.3...raf-effect-atom%400.2.4) (2026-10-23)
 

package/dist/Handle.d.mts

@@ -67,6 +67,11 @@ export type HandleKey<S> = string & {
  */
 export interface Handle<S> {
   readonly args: ArgsOf<S>;
+  /**
+   * `true` when `Loader.prefetchInBrowser` ran on the server and left the
+   * atom to the browser: the browser's read starts it.
+   */
+  readonly inBrowser?: true;
   /** The atom's serialization key; `undefined` for an atom without one. */
   readonly key: HandleKey<S> | undefined;
 }

package/dist/Hooks.mjs

@@ -3,6 +3,7 @@ import { stream } from "./internal/pending.mjs";
 import { hydrated } from "./Hydration.mjs";
 import { keyOf, release } from "./internal/leases.mjs";
 import { atomOf, sourceOf } from "./internal/handles.mjs";
+import { isRequestRegistry } from "./RequestRegistry.mjs";
 import { requireRequestRegistry } from "./internal/registry.mjs";
 import { ModeContext, check } from "./internal/waterfalls.mjs";
 import * as Predicate from "effect/Predicate";
@@ -99,6 +100,7 @@ const useAtomResult = (source, handle) => {
 	const registry = React.useContext(RegistryContext);
 	const atom = atomOf(source, handle.args);
 	requireRequestRegistry(registry, "useAtomResult");
+	if (handle.inBrowser === true && isRequestRegistry(registry)) throw new Error(`raf-effect-atom: ${String(atom)} starts in the browser (Loader.prefetchInBrowser), so the server renders the nearest Suspense boundary's fallback, and the browser renders the boundary.`);
 	const target = sourceOf(atom);
 	const started = hydrated(target);
 	const read = target === atom ? hydrated(atom) : atom;
@@ -106,7 +108,7 @@ const useAtomResult = (source, handle) => {
 	if (process.env.NODE_ENV !== "production" && handle.key !== void 0 && Predicate.isString(key) && handle.key !== key) throw new Error(`raf-effect-atom: useAtomResult read the handle of ${handle.key} through a source that makes ${key}. Read a handle through the source that made it.`);
 	const streamed = Predicate.isString(key) ? stream(registry, key) : void 0;
 	if (streamed !== void 0) React.use(streamed);
-	if (process.env.NODE_ENV !== "production") check(registry, started, React.use(ModeContext));
+	if (process.env.NODE_ENV !== "production" && handle.inBrowser !== true) check(registry, started, React.use(ModeContext));
 	if (read !== started) registry.get(started);
 	const current = registry.get(read);
 	const result = useAtomSuspense(read, {

package/dist/Loader.d.mts

@@ -5,7 +5,7 @@ import * as Effect from "effect/Effect";
 import * as AsyncResult from "effect/reactivity/AsyncResult";
 import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 declare namespace Loader_d_exports {
-  export { LeaseTTL, Loader, MakeOptions, SettledResult, ensure, fetch, make, prefetch, result };
+  export { LeaseTTL, Loader, MakeOptions, SettledResult, ensure, fetch, make, prefetch, prefetchInBrowser, result };
 }
 /**
  * A settled `AsyncResult`: what `ensure` and `fetch` return.
@@ -73,6 +73,49 @@ export declare const LeaseTTL: Context.Reference<Duration.Duration>;
  * @since 0.1.0
  */
 export declare const prefetch: <S extends Source>(source: S, ...args: ArgsOf<S>) => Effect.Effect<Handle<S>, never, AtomRegistry.AtomRegistry>;
+/**
+ * Starts a source's atom in the browser, and returns its handle: on the
+ * server, it starts nothing, and the browser's read starts the atom.
+ *
+ * **When to use**
+ *
+ * Use for data only the browser can load: an input the server never sees,
+ * such as a token in the URL's fragment or a permission, or a request the
+ * server can't make. The rest of the page still renders on the server.
+ *
+ * **Details**
+ *
+ * - In the browser, it's `prefetch`: a loader that runs there, such as on a
+ *   client navigation, starts the atom and takes a lease.
+ * - On a request registry, it returns a handle marked `inBrowser` without
+ *   starting the atom, so the atom needs no serialization key. On the
+ *   server, `useAtomResult` throws for that handle, so React renders the
+ *   nearest Suspense boundary's fallback there and renders the boundary in
+ *   the browser. There, the read starts the atom, and the waterfall check
+ *   skips it, since a loader asked for it.
+ *
+ * **Gotchas**
+ *
+ * - Read the handle under a Suspense boundary: on the server, a read
+ *   outside one fails the whole render. React reports the boundary it
+ *   renders in the browser to `onRecoverableError`.
+ * - On a page the server rendered, the request starts when the browser
+ *   renders the read, after hydration's JavaScript has loaded: start the
+ *   data the server can load with `prefetch` or `ensure`.
+ *
+ * **Example**
+ *
+ * ```ts
+ * import { Loader } from "raf-effect-atom"
+ *
+ * const program = Loader.prefetchInBrowser(pushSubscription)
+ * ```
+ *
+ * @stability unstable
+ * @category verbs
+ * @since 0.2.6
+ */
+export declare const prefetchInBrowser: <S extends Source>(source: S, ...args: ArgsOf<S>) => Effect.Effect<Handle<S>, never, AtomRegistry.AtomRegistry>;
 /**
  * Starts a source's atom, waits only while it has no result, and returns a
  * handle whose reader renders without suspending.
@@ -179,6 +222,8 @@ export interface Loader {
    * the seed resolves.
    */
   readonly prefetch: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
+  /** {@link prefetchInBrowser}, run at once. */
+  readonly prefetchInBrowser: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
   /**
    * Runs an Effect that needs the registry, such as the Effect verbs in an
    * `Effect.gen`, as a Promise that rejects with its squashed cause.
@@ -213,8 +258,8 @@ export interface MakeOptions {
  *
  * Use in a framework integration, in loaders that are async functions, or
  * in an event handler that starts an atom before the state change that
- * renders its reader, for state that can't be in the URL, such as a
- * search-as-you-type query. In Effect code, use the verbs directly, and run
+ * renders its reader, for a choice a click or a submit makes that doesn't
+ * belong in the URL. In Effect code, use the verbs directly, and run
  * the Effect on the registry with `run`.
  *
  * **Details**

package/dist/Loader.mjs

@@ -2,7 +2,7 @@ import { __exportAll } from "./_virtual/_rolldown/runtime.mjs";
 import { hydrated } from "./Hydration.mjs";
 import { isDevelopment } from "./internal/development.mjs";
 import { keyOf, take } from "./internal/leases.mjs";
-import { atomOf, loaded as loaded$1, make as make$1, sourceOf } from "./internal/handles.mjs";
+import { atomOf, inBrowser, loaded as loaded$1, make as make$1, sourceOf } from "./internal/handles.mjs";
 import { afterSeed, pending } from "./internal/seeds.mjs";
 import { isRequestRegistry } from "./RequestRegistry.mjs";
 import * as Atom from "effect/reactivity/Atom";
@@ -31,6 +31,9 @@ import * as AtomRegistry from "effect/reactivity/AtomRegistry";
 * | `ensure`   | if it isn't in the registry     | only while it's `Initial`     | returns it at once    |
 * | `fetch`    | if it isn't, or refreshes it    | until the new result settles  | refreshes, then waits |
 *
+* `prefetchInBrowser` is `prefetch` in the browser. On the server, it
+* starts nothing, and the browser's read starts the atom.
+*
 * Typed failures don't reject: `ensure` and `fetch` settle on them, and
 * `result` returns the settled `AsyncResult`, so a loader can redirect on a
 * tag and otherwise let a boundary render the failure. Only defects and
@@ -48,6 +51,7 @@ var Loader_exports = /* @__PURE__ */ __exportAll({
 	fetch: () => fetch,
 	make: () => make,
 	prefetch: () => prefetch,
+	prefetchInBrowser: () => prefetchInBrowser,
 	result: () => result
 });
 /**
@@ -154,6 +158,54 @@ const prefetch = (source, ...args) => Effect.gen(function* () {
 	yield* start(atom);
 	return make$1(args, atom);
 });
+/**
+* Starts a source's atom in the browser, and returns its handle: on the
+* server, it starts nothing, and the browser's read starts the atom.
+*
+* **When to use**
+*
+* Use for data only the browser can load: an input the server never sees,
+* such as a token in the URL's fragment or a permission, or a request the
+* server can't make. The rest of the page still renders on the server.
+*
+* **Details**
+*
+* - In the browser, it's `prefetch`: a loader that runs there, such as on a
+*   client navigation, starts the atom and takes a lease.
+* - On a request registry, it returns a handle marked `inBrowser` without
+*   starting the atom, so the atom needs no serialization key. On the
+*   server, `useAtomResult` throws for that handle, so React renders the
+*   nearest Suspense boundary's fallback there and renders the boundary in
+*   the browser. There, the read starts the atom, and the waterfall check
+*   skips it, since a loader asked for it.
+*
+* **Gotchas**
+*
+* - Read the handle under a Suspense boundary: on the server, a read
+*   outside one fails the whole render. React reports the boundary it
+*   renders in the browser to `onRecoverableError`.
+* - On a page the server rendered, the request starts when the browser
+*   renders the read, after hydration's JavaScript has loaded: start the
+*   data the server can load with `prefetch` or `ensure`.
+*
+* **Example**
+*
+* ```ts
+* import { Loader } from "raf-effect-atom"
+*
+* const program = Loader.prefetchInBrowser(pushSubscription)
+* ```
+*
+* @stability unstable
+* @category verbs
+* @since 0.2.6
+*/
+const prefetchInBrowser = (source, ...args) => Effect.gen(function* () {
+	const atom = atomOf(source, args);
+	if (isRequestRegistry(yield* AtomRegistry.AtomRegistry)) return inBrowser(args, atom);
+	yield* start(atom);
+	return make$1(args, atom);
+});
 const loaded = (args, atom, result) => {
 	const handle = loaded$1(args, atom);
 	results.set(handle, result);
@@ -277,8 +329,8 @@ const either = (first, second) => first === void 0 || second === void 0 ? first
 *
 * Use in a framework integration, in loaders that are async functions, or
 * in an event handler that starts an atom before the state change that
-* renders its reader, for state that can't be in the URL, such as a
-* search-as-you-type query. In Effect code, use the verbs directly, and run
+* renders its reader, for a choice a click or a submit makes that doesn't
+* belong in the URL. In Effect code, use the verbs directly, and run
 * the Effect on the registry with `run`.
 *
 * **Details**
@@ -319,7 +371,15 @@ const make = (registry, options) => {
 			});
 			return make$1(args, atom);
 		},
+		prefetchInBrowser: (source, ...args) => {
+			const atom = atomOf(source, args);
+			if (isRequestRegistry(registry)) return inBrowser(args, atom);
+			afterSeed(registry, () => {
+				Effect.runSync(provide(start(atom)));
+			});
+			return make$1(args, atom);
+		},
 		run: (effect, runOptions) => runPromise(provide(effect), either(signal, runOptions?.signal))
 	};
 };
-export { LeaseTTL, Loader_exports, ensure, fetch, make, prefetch, result };
+export { LeaseTTL, Loader_exports, ensure, fetch, make, prefetch, prefetchInBrowser, result };

package/dist/Next.d.mts

@@ -90,6 +90,15 @@ export declare const getRegistry: () => AtomRegistry.AtomRegistry;
  * @since 0.1.0
  */
 export declare const prefetch: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
+/**
+ * `Loader.prefetchInBrowser` on the request's registry: returns a handle
+ * whose atom the browser's read starts, without starting it on the server.
+ *
+ * @stability unstable
+ * @category verbs
+ * @since 0.2.6
+ */
+export declare const prefetchInBrowser: <S extends Source>(source: S, ...args: ArgsOf<S>) => Handle<S>;
 /**
  * `Loader.ensure` on the request's registry: starts a source's atom, waits
  * for its result, and returns its handle.

package/dist/Next.mjs

@@ -72,6 +72,15 @@ const getRegistry = atoms.getRegistry;
 */
 const prefetch = atoms.prefetch;
 /**
+* `Loader.prefetchInBrowser` on the request's registry: returns a handle
+* whose atom the browser's read starts, without starting it on the server.
+*
+* @stability unstable
+* @category verbs
+* @since 0.2.6
+*/
+const prefetchInBrowser = atoms.prefetchInBrowser;
+/**
 * `Loader.ensure` on the request's registry: starts a source's atom, waits
 * for its result, and returns its handle.
 *
@@ -130,4 +139,4 @@ const run = atoms.run;
 * @since 0.1.0
 */
 const dehydrate = atoms.dehydrate;
-export { HydrateAtoms, RegistryProvider, dehydrate, ensure, fetch, getRegistry, makeRequestAtoms, prefetch, run };
+export { HydrateAtoms, RegistryProvider, dehydrate, ensure, fetch, getRegistry, makeRequestAtoms, prefetch, prefetchInBrowser, run };

package/dist/Waterfalls.d.mts

@@ -51,7 +51,7 @@ export declare const WaterfallDetection: (props: {
 }) => React.ReactNode;
 /**
  * Starts a source's atom during render and returns its handle, for an input
- * only a render knows, such as a debounced search query.
+ * only a render knows, such as an id read from another atom's result.
  *
  * **When to use**
  *

package/dist/Waterfalls.mjs

@@ -55,7 +55,7 @@ const WaterfallDetection = (props) => process.env.NODE_ENV === "production" ? pr
 });
 /**
 * Starts a source's atom during render and returns its handle, for an input
-* only a render knows, such as a debounced search query.
+* only a render knows, such as an id read from another atom's result.
 *
 * **When to use**
 *

package/dist/internal/handles.mjs

@@ -23,9 +23,14 @@ const make = (args, atom) => ({
 	args,
 	key: keyOf(atom)
 });
+const inBrowser = (args, atom) => ({
+	args,
+	inBrowser: true,
+	key: keyOf(atom)
+});
 const loaded = (args, atom) => ({
 	args,
 	key: keyOf(atom),
 	loaded: true
 });
-export { atomOf, loaded, make, sourceOf };
+export { atomOf, inBrowser, loaded, make, sourceOf };

package/dist/internal/next.mjs

@@ -23,6 +23,7 @@ const make = (options) => {
 		fetch: (source, ...args) => getLoader().fetch(source, ...args),
 		getRegistry,
 		prefetch: (source, ...args) => getLoader().prefetch(source, ...args),
+		prefetchInBrowser: (source, ...args) => getLoader().prefetchInBrowser(source, ...args),
 		run: (effect, runOptions) => getLoader().run(effect, runOptions)
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raf-effect-atom",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Render-as-you-fetch for Effect Atom: start atoms from route loaders and stream them into the browser, typed failures intact",
   "keywords": [
     "effect",
@@ -58,7 +58,7 @@
     "@types/react-dom": "19.3.0",
     "@vitest/coverage-v8": "5.0.5",
     "effect": "4.0.6",
-    "effect-atom-boundary": "0.1.1",
+    "effect-atom-boundary": "0.1.2",
     "happy-dom": "21.0.4",
     "react": "19.3.1",
     "react-dom": "19.3.1",