@effectify/react-router 0.1.0

package/README.md

@@ -0,0 +1,102 @@
+# @effectify/react-router
+
+Integration of [React Router](https://reactrouter.com/) with [Effect](https://effect.website/) for React applications.
+
+## Installation
+
+```bash
+# npm
+npm install @effectify/react-router
+
+# yarn
+yarn add @effectify/react-router
+
+# pnpm
+pnpm add @effectify/react-router
+
+# bun
+bun add @effectify/react-router
+```
+
+## Basic Usage
+
+### 1. Setup Server Runtime
+
+Create a server runtime with your Effect layers:
+
+```typescript
+// lib/server-runtime.ts
+import { make } from "@effectify/react-router";
+import * as Layer from "effect/Layer"
+
+const layers = Layer.empty
+
+export const { withLoaderEffect, withActionEffect } = make(layers)
+```
+
+### 2. Use in Route Components
+
+Use the Effect-based loaders and actions in your React Router routes:
+
+```typescript
+// routes/home.tsx
+import type * as Route from "./+types.home";
+import { Ok, LoaderArgsContext } from "@effectify/react-router";
+import { withLoaderEffect } from "~/lib/server-runtime";
+import * as T from "effect/Effect"
+
+export const loader = withLoaderEffect(
+  T.gen(function* () {
+    const { request } = yield* LoaderArgsContext
+    yield* T.log("request", request)
+    return yield* T.succeed(new Ok({ data: { hello: 'world' }}))
+  })
+)
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  return (
+    <div>
+      <h1>Home</h1>
+      <pre>{JSON.stringify(loaderData.data, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+## API
+
+### `make(layers)`
+
+Creates Effect-based runtime helpers for React Router.
+
+#### Parameters
+
+- `layers`: Effect Layer containing your application services and dependencies.
+
+#### Returns
+
+An object containing:
+- `withLoaderEffect`: Wrapper for React Router loaders using Effect
+- `withActionEffect`: Wrapper for React Router actions using Effect
+
+### `LoaderArgsContext`
+
+Effect context providing access to React Router loader arguments including:
+- `request`: The incoming Request object
+- `params`: Route parameters
+- `context`: Additional context data
+
+### Response Types
+
+- `Ok(data)`: Successful response with data
+- `Redirect(url)`: Redirect response
+- `Error(message)`: Error response
+
+## Requirements
+
+- React Router v7+
+- Effect ecosystem (`effect`)
+
+## License
+
+MIT

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/context.js';
+export * from './lib/http-response.js';
+export * as Runtime from './lib/runtime.js';

package/dist/src/index.js

@@ -0,0 +1,3 @@
+export * from './lib/context.js';
+export * from './lib/http-response.js';
+export * as Runtime from './lib/runtime.js';

package/dist/src/lib/context.d.ts

@@ -0,0 +1,9 @@
+import * as Context from 'effect/Context';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
+declare const ActionArgsContext_base: Context.TagClass<ActionArgsContext, "ActionArgsContext", ActionFunctionArgs<any>>;
+export declare class ActionArgsContext extends ActionArgsContext_base {
+}
+declare const LoaderArgsContext_base: Context.TagClass<LoaderArgsContext, "LoaderArgsContext", LoaderFunctionArgs<any>>;
+export declare class LoaderArgsContext extends LoaderArgsContext_base {
+}
+export {};

package/dist/src/lib/context.js

@@ -0,0 +1,5 @@
+import * as Context from 'effect/Context';
+export class ActionArgsContext extends Context.Tag('ActionArgsContext')() {
+}
+export class LoaderArgsContext extends Context.Tag('LoaderArgsContext')() {
+}

package/dist/src/lib/http-response.d.ts

@@ -0,0 +1,21 @@
+declare const Ok_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").Equals<A, {}> extends true ? void : { readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }) => Readonly<A> & {
+    readonly _tag: "Ok";
+};
+export declare class Ok<T> extends Ok_base<{
+    readonly data: T;
+}> {
+}
+declare const Redirect_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").Equals<A, {}> extends true ? void : { readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }) => Readonly<A> & {
+    readonly _tag: "Redirect";
+};
+export declare class Redirect extends Redirect_base<{
+    readonly to: string;
+    readonly init?: number | ResponseInit | undefined;
+}> {
+}
+export type HttpResponse<T> = Redirect | Ok<T>;
+export declare const matchHttpResponse: <T>() => <P extends {
+    readonly Ok: (_: Ok<T>) => any;
+    readonly Redirect: (_: Redirect) => any;
+} & { readonly [Tag in Exclude<keyof P, "Ok" | "Redirect">]: never; }>(fields: P) => (input: HttpResponse<T>) => import("effect/Unify").Unify<ReturnType<P[keyof P]>>;
+export {};

package/dist/src/lib/http-response.js

@@ -0,0 +1,7 @@
+import * as Data from 'effect/Data';
+import * as Match from 'effect/Match';
+export class Ok extends Data.TaggedClass('Ok') {
+}
+export class Redirect extends Data.TaggedClass('Redirect') {
+}
+export const matchHttpResponse = () => Match.typeTags();

package/dist/src/lib/runtime.d.ts

@@ -0,0 +1,21 @@
+import * as T from 'effect/Effect';
+import type * as Layer from 'effect/Layer';
+import { type ActionFunctionArgs, type LoaderFunctionArgs } from 'react-router';
+import { ActionArgsContext, LoaderArgsContext } from '../lib/context.js';
+import { type HttpResponse } from '../lib/http-response.js';
+export declare const make: <R, E>(layer: Layer.Layer<R, E, never>) => {
+    withLoaderEffect: <A, B>(self: T.Effect<HttpResponse<A>, B, R | LoaderArgsContext>) => (args: LoaderFunctionArgs) => Promise<{
+        ok: true;
+        data: A;
+    } | {
+        ok: false;
+        errors: string[];
+    }>;
+    withActionEffect: <A, B_1>(self: T.Effect<HttpResponse<A>, B_1, R | ActionArgsContext>) => (args: ActionFunctionArgs) => Promise<import("react-router").UNSAFE_DataWithResponseInit<{
+        ok: false;
+        errors: B_1;
+    }> | {
+        ok: true;
+        response: A;
+    } | Response>;
+};

package/dist/src/lib/runtime.js

@@ -0,0 +1,49 @@
+import * as T from 'effect/Effect';
+import * as Exit from 'effect/Exit';
+import { pipe } from 'effect/Function';
+import * as Logger from 'effect/Logger';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import { data, redirect } from 'react-router';
+import { ActionArgsContext, LoaderArgsContext } from '../lib/context.js';
+import { matchHttpResponse } from '../lib/http-response.js';
+export const make = (layer) => {
+    const runtime = ManagedRuntime.make(layer);
+    const withLoaderEffect = (self) => (args) => {
+        const runnable = pipe(self, T.provide(Logger.pretty), T.provideService(LoaderArgsContext, args));
+        return runtime.runPromiseExit(runnable).then(Exit.match({
+            onFailure: (cause) => {
+                console.error(cause);
+                if (cause._tag === 'Fail') {
+                    throw pipe(cause.error);
+                }
+                // biome-ignore lint/style/useThrowOnlyError: <library uses non-Error throws>
+                throw { ok: false, errors: ['Something went wrong'] };
+            },
+            onSuccess: matchHttpResponse()({
+                Ok: ({ data: response }) => {
+                    return { ok: true, data: response };
+                },
+                Redirect: ({ to, init = {} }) => {
+                    redirect(to, init);
+                    return { ok: false, errors: ['Redirecting...'] };
+                },
+            }),
+        }));
+    };
+    // Don't throw the Error requests, handle them in the normal UI. No ErrorBoundary
+    const withActionEffect = (self) => (args) => {
+        const runnable = pipe(self, T.provide(Logger.pretty), T.provideService(ActionArgsContext, args), T.match({
+            onFailure: (errors) => data({ ok: false, errors }, { status: 400 }),
+            onSuccess: matchHttpResponse()({
+                Ok: ({ data: response }) => {
+                    return { ok: true, response };
+                },
+                Redirect: ({ to, init = {} }) => {
+                    return redirect(to, init);
+                },
+            }),
+        }));
+        return runtime.runPromise(runnable);
+    };
+    return { withLoaderEffect, withActionEffect };
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@effectify/react-router",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "@effectify/source": "./src/index.ts",
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {
+    "@effect/platform": "0.91.1",
+    "@effect/platform-node": "0.97.1",
+    "effect": "3.17.14",
+    "react-router": "7.9.2"
+  },
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}