State

Posts
API work
2025-01-14 22:22:10 +01:00 · 2025-01-14 22:11:13 +01:00 · 2025-01-14 21:29:38 +01:00 · 2025-01-14 17:09:04 +01:00 · 2025-01-14 16:03:07 +01:00 · 2025-01-14 15:53:42 +01:00
38 changed files with 979 additions and 0 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -5,5 +5,8 @@
    "clean:cache": "rm -f tsconfig.tsbuildinfo",
    "clean:dist": "rm -rf dist",
    "clean:node": "rm -rf node_modules"
+  },
+  "devDependencies": {
+    "npm-check-updates": "^17.1.13"
  }
 }
--- a/packages/example/.gitignore
+++ b/packages/example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/packages/example/README.md
+++ b/packages/example/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
--- a/packages/example/eslint.config.js
+++ b/packages/example/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/packages/example/index.html
+++ b/packages/example/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@tanstack/react-router": "^1.95.3",
+    "@tanstack/router-devtools": "^1.95.3",
+    "@tanstack/router-plugin": "^1.95.3",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "effect": "^3.12.1",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}
--- a/packages/example/postcss.config.js
+++ b/packages/example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}
--- a/packages/example/public/vite.svg
+++ b/packages/example/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/packages/example/src/domain/Post.ts
+++ b/packages/example/src/domain/Post.ts
@@ -0,0 +1,8 @@
+import { Schema } from "effect"
+
+
+export class Post extends Schema.Class<Post>("Post")({
+    id: Schema.String,
+    title: Schema.String,
+    content: Schema.String,
+}) {}
--- a/packages/example/src/domain/index.ts
+++ b/packages/example/src/domain/index.ts
@@ -0,0 +1 @@
+export * as Post from "./Post"
--- a/packages/example/src/index.css
+++ b/packages/example/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/packages/example/src/main.tsx
+++ b/packages/example/src/main.tsx
@@ -0,0 +1,30 @@
+import { createRouter, RouterProvider } from "@tanstack/react-router"
+import { Layer } from "effect"
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import "./index.css"
+import { Reffuse } from "./reffuse"
+import { routeTree } from "./routeTree.gen"
+import { FetchData } from "./services"
+
+
+const layer = Layer.empty.pipe(
+    Layer.provideMerge(FetchData.mockLayer)
+)
+
+const router = createRouter({ routeTree })
+
+declare module "@tanstack/react-router" {
+    interface Register {
+        router: typeof router
+    }
+}
+
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <Reffuse.Provider layer={layer}>
+            <RouterProvider router={router} />
+        </Reffuse.Provider>
+    </StrictMode>
+)
--- a/packages/example/src/reffuse.ts
+++ b/packages/example/src/reffuse.ts
@@ -0,0 +1,5 @@
+import { make } from "@thilawyn/reffuse/Reffuse"
+import { FetchData } from "./services"
+
+
+export const Reffuse = make<FetchData.FetchData>()
--- a/packages/example/src/routeTree.gen.ts
+++ b/packages/example/src/routeTree.gen.ts
@@ -0,0 +1,134 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as TimeImport } from './routes/time'
+import { Route as CountImport } from './routes/count'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const TimeRoute = TimeImport.update({
+  id: '/time',
+  path: '/time',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const CountRoute = CountImport.update({
+  id: '/count',
+  path: '/count',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/count': {
+      id: '/count'
+      path: '/count'
+      fullPath: '/count'
+      preLoaderRoute: typeof CountImport
+      parentRoute: typeof rootRoute
+    }
+    '/time': {
+      id: '/time'
+      path: '/time'
+      fullPath: '/time'
+      preLoaderRoute: typeof TimeImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/count': typeof CountRoute
+  '/time': typeof TimeRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/count': typeof CountRoute
+  '/time': typeof TimeRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/count': typeof CountRoute
+  '/time': typeof TimeRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/count' | '/time'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/count' | '/time'
+  id: '__root__' | '/' | '/count' | '/time'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  CountRoute: typeof CountRoute
+  TimeRoute: typeof TimeRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  CountRoute: CountRoute,
+  TimeRoute: TimeRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/count",
+        "/time"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/count": {
+      "filePath": "count.tsx"
+    },
+    "/time": {
+      "filePath": "time.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */
--- a/packages/example/src/routes/__root.tsx
+++ b/packages/example/src/routes/__root.tsx
@@ -0,0 +1,20 @@
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
+import { TanStackRouterDevtools } from "@tanstack/router-devtools"
+
+
+export const Route = createRootRoute({
+    component: Root
+})
+
+function Root() {
+    return <>
+        <div className="container flex-row gap-2 justify-center items-center mx-auto mb-4">
+            <Link to="/">Index</Link>
+            <Link to="/time">Time</Link>
+            <Link to="/count">Count</Link>
+        </div>
+
+        <Outlet />
+        <TanStackRouterDevtools />
+    </>
+}
--- a/packages/example/src/routes/count.tsx
+++ b/packages/example/src/routes/count.tsx
@@ -0,0 +1,27 @@
+import { Reffuse } from "@/reffuse"
+import { createFileRoute } from "@tanstack/react-router"
+import { Ref } from "effect"
+
+
+export const Route = createFileRoute("/count")({
+    component: Count
+})
+
+function Count() {
+
+    const runSync = Reffuse.useRunSync()
+
+    const countRef = Reffuse.useRef(0)
+    const [count] = Reffuse.useRefState(countRef)
+
+
+    return (
+        <div className="container mx-auto">
+            {/* <button onClick={() => setCount((count) => count + 1)}> */}
+            <button onClick={() => Ref.update(countRef, count => count + 1).pipe(runSync)}>
+                count is {count}
+            </button>
+        </div>
+    )
+
+}
--- a/packages/example/src/routes/index.tsx
+++ b/packages/example/src/routes/index.tsx
@@ -0,0 +1,30 @@
+import { Reffuse } from "@/reffuse"
+import { FetchData } from "@/services"
+import { Reffuse as PostsReffuse } from "@/views/posts/reffuse"
+import { PostsState } from "@/views/posts/services"
+import { VPosts } from "@/views/posts/VPosts"
+import { createFileRoute } from "@tanstack/react-router"
+import { Effect } from "effect"
+
+
+export const Route = createFileRoute("/")({
+    component: Index
+})
+
+function Index() {
+
+    const postsLayer = Reffuse.useMemo(FetchData.FetchData.pipe(
+        Effect.flatMap(({ fetchPosts }) => fetchPosts),
+        Effect.map(PostsState.make),
+    ))
+
+
+    return (
+        <div className="container mx-auto">
+            <PostsReffuse.Provider layer={postsLayer}>
+                <VPosts />
+            </PostsReffuse.Provider>
+        </div>
+    )
+
+}
--- a/packages/example/src/routes/time.tsx
+++ b/packages/example/src/routes/time.tsx
@@ -0,0 +1,49 @@
+import { Reffuse } from "@/reffuse"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, DateTime, Effect, Ref, Schedule, Stream } from "effect"
+
+
+const timeEverySecond = Stream.repeatEffectWithSchedule(
+    DateTime.now,
+    Schedule.intersect(Schedule.forever, Schedule.spaced("1 second")),
+)
+
+
+export const Route = createFileRoute("/time")({
+    component: Time
+})
+
+function Time() {
+
+    const timeRef = Reffuse.useRefFromEffect(DateTime.now)
+
+    Reffuse.useFork(Effect.addFinalizer(() => Console.log("Cleanup")).pipe(
+        Effect.flatMap(() =>
+            Stream.runForEach(timeEverySecond, v => Ref.set(timeRef, v))
+        )
+    ), [timeRef])
+    // Reffuse.useFork(Effect.addFinalizer(() => Console.log("Cleanup")).pipe(
+    //     Effect.flatMap(() => DateTime.now),
+    //     Effect.flatMap(v => Ref.set(timeRef, v)),
+    //     Effect.repeat(Schedule.intersect(
+    //         Schedule.forever,
+    //         Schedule.spaced("1 second"),
+    //     )),
+    // ), [timeRef])
+
+    const [time] = Reffuse.useRefState(timeRef)
+
+
+    return (
+        <div className="container mx-auto">
+            <p className="text-center">
+                {DateTime.format(time, {
+                    hour: "numeric",
+                    minute: "numeric",
+                    second: "numeric",
+                })}
+            </p>
+        </div>
+    )
+
+}
--- a/packages/example/src/services/FetchData.ts
+++ b/packages/example/src/services/FetchData.ts
@@ -0,0 +1,24 @@
+import { Post } from "@/domain"
+import { Chunk, Context, Effect, Layer } from "effect"
+
+
+export class FetchData extends Context.Tag("FetchData")<FetchData, {
+    readonly fetchPosts: Effect.Effect<Chunk.Chunk<Post.Post>>
+}>() {}
+
+
+export const mockLayer = Layer.succeed(FetchData, {
+    fetchPosts: Effect.succeed(Chunk.make(
+        Post.Post.make({
+            id: "1",
+            title: "Lorem ipsum dolor sit amet",
+            content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget lacus sit amet diam suscipit porttitor non at felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla risus ligula, elementum nec scelerisque eget, volutpat vel sapien. Phasellus aliquam ac neque vitae sodales. Nunc sodales congue odio. Nulla eget nisl cursus, convallis lorem at, varius lectus. Aliquam vitae mauris vel mi dignissim condimentum. Proin sed dignissim sapien, ut cursus ex. Donec eget sapien sagittis, auctor metus vitae, fringilla lacus. Donec ut elit a quam aliquet consectetur interdum eu nisl. Etiam nec convallis purus, eu venenatis nulla. Phasellus non metus id mauris tincidunt cursus. Cras varius aliquet diam eu blandit. In hac habitasse platea dictumst.",
+        }),
+
+        Post.Post.make({
+            id: "2",
+            title: "Vestibulum non bibendum ligula",
+            content: "Vestibulum non bibendum ligula. Integer pellentesque, diam ac faucibus volutpat, nulla libero porttitor nunc, ac pulvinar tortor diam id ipsum. Sed id enim at odio euismod imperdiet et ac purus. Etiam tempus ipsum semper scelerisque mollis. Integer auctor, magna et tristique tempus, nisi mi euismod est, nec finibus quam nunc nec libero. Maecenas aliquet viverra magna, vitae blandit ligula pharetra id. Vestibulum vel lacus at nibh placerat tincidunt. Sed suscipit tellus vel felis euismod, et sollicitudin neque cursus. Curabitur dapibus eros vitae ligula suscipit, at facilisis risus venenatis. Sed pharetra blandit pulvinar. Vivamus vestibulum at ligula pulvinar fringilla. Suspendisse vel mattis libero, eget vulputate massa. Vivamus vehicula, lectus id tempor maximus, erat tortor blandit purus, at scelerisque nunc urna faucibus sapien.",
+        }),
+    ))
+})
--- a/packages/example/src/services/index.ts
+++ b/packages/example/src/services/index.ts
@@ -0,0 +1 @@
+export * as FetchData from "./FetchData"
--- a/packages/example/src/views/post/VPost.tsx
+++ b/packages/example/src/views/post/VPost.tsx
@@ -0,0 +1,34 @@
+import { Post } from "@/domain"
+import { Effect } from "effect"
+import { PostsState } from "../posts/services"
+import { Reffuse } from "./reffuse"
+
+
+export interface VPostProps {
+    readonly index: number
+    readonly post: Post.Post
+}
+
+
+export function VPost({ post, index }: VPostProps) {
+
+    const runSync = Reffuse.useRunSync()
+
+
+    return (
+        <div className="flex-col gap-1 items-stretch">
+            <p>{post.title}</p>
+            <p>{post.content}</p>
+
+            <button
+                onClick={() => PostsState.PostsState.pipe(
+                    Effect.flatMap(state => state.remove(index)),
+                    runSync,
+                )}
+            >
+                X
+            </button>
+        </div>
+    )
+
+}
--- a/packages/example/src/views/post/reffuse.ts
+++ b/packages/example/src/views/post/reffuse.ts
@@ -0,0 +1 @@
+export { Reffuse } from "../posts/reffuse"
--- a/packages/example/src/views/posts/VPosts.tsx
+++ b/packages/example/src/views/posts/VPosts.tsx
@@ -0,0 +1,25 @@
+import { Chunk } from "effect"
+import { VPost } from "../post/VPost"
+import { Reffuse } from "./reffuse"
+import { PostsState } from "./services"
+
+
+export function VPosts() {
+
+    const state = Reffuse.useMemo(PostsState.PostsState)
+    const [posts] = Reffuse.useRefState(state.posts)
+
+
+    return (
+        <div className="flex-col gap-2 items-stretch">
+            {Chunk.map(posts, (post, index) => (
+                <VPost
+                    key={`${ index }-${ post.id }`}
+                    index={index}
+                    post={post}
+                />
+            ))}
+        </div>
+    )
+
+}
--- a/packages/example/src/views/posts/reffuse.ts
+++ b/packages/example/src/views/posts/reffuse.ts
@@ -0,0 +1,5 @@
+import { Reffuse as RootReffuse } from "@/reffuse"
+import { PostsState } from "./services"
+
+
+export const Reffuse = RootReffuse.extend<PostsState.PostsState>()
--- a/packages/example/src/views/posts/services/PostsState.ts
+++ b/packages/example/src/views/posts/services/PostsState.ts
@@ -0,0 +1,15 @@
+import { Post } from "@/domain"
+import { Chunk, Context, Effect, Layer, Ref, SubscriptionRef } from "effect"
+
+
+export class PostsState extends Context.Tag("PostsState")<PostsState, {
+    readonly posts: SubscriptionRef.SubscriptionRef<Chunk.Chunk<Post.Post>>
+    readonly remove: (index: number) => Effect.Effect<void>
+}>() {}
+
+export const make = (posts: Chunk.Chunk<Post.Post>) => Layer.effect(PostsState, SubscriptionRef.make(posts).pipe(
+    Effect.map(posts => ({
+        posts,
+        remove: (index: number) => Ref.update(posts, Chunk.remove(index)),
+    }))
+))
--- a/packages/example/src/views/posts/services/index.ts
+++ b/packages/example/src/views/posts/services/index.ts
@@ -0,0 +1 @@
+export * as PostsState from "./PostsState"
--- a/packages/example/src/vite-env.d.ts
+++ b/packages/example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/packages/example/tailwind.config.js
+++ b/packages/example/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import("tailwindcss").Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
--- a/packages/example/tsconfig.app.json
+++ b/packages/example/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/packages/example/tsconfig.json
+++ b/packages/example/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/packages/example/tsconfig.node.json
+++ b/packages/example/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/packages/example/vite.config.ts
+++ b/packages/example/vite.config.ts
@@ -0,0 +1,19 @@
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite"
+import react from "@vitejs/plugin-react"
+import path from "node:path"
+import { defineConfig } from "vite"
+
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        TanStackRouterVite(),
+        react(),
+    ],
+
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+})
--- a/packages/reffuse/package.json
+++ b/packages/reffuse/package.json
@@ -24,5 +24,9 @@
    "clean:node": "rm -rf node_modules"
  },
  "devDependencies": {
+    "@types/react": "^19.0.4",
+    "effect": "^3.12.1",
+    "react": "^19.0.0",
+    "typescript": "^5.7.3"
  }
 }
--- a/packages/reffuse/src/Reffuse.ts
+++ b/packages/reffuse/src/Reffuse.ts
@@ -0,0 +1,182 @@
+import { Context, Effect, Fiber, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import React from "react"
+import * as ReffuseReactContext from "./ReffuseReactContext.js"
+
+
+export class Reffuse<
+    RuntimeR,
+    ContextR extends ParentContextR | OwnContextR,
+    OwnContextR,
+    ParentContextR = never,
+> {
+
+    readonly Context = React.createContext<ReffuseReactContext.Value<RuntimeR, ContextR>>(null!)
+    readonly Provider: ReffuseReactContext.Provider<RuntimeR, OwnContextR, ParentContextR>
+
+    constructor(
+        private readonly runtime: Runtime.Runtime<RuntimeR>,
+        parent?: Reffuse<RuntimeR, ParentContextR, unknown, unknown>,
+    ) {
+        this.Provider = parent
+            ? ReffuseReactContext.makeNestedProvider(runtime, this.Context, parent)
+            : ReffuseReactContext.makeRootProvider(runtime, this.Context)
+    }
+
+    extend<OwnContextR = never>() {
+        return new Reffuse<
+            RuntimeR,
+            ContextR | OwnContextR,
+            OwnContextR,
+            ContextR
+        >(this.runtime, this)
+    }
+
+
+    useRuntime(): Runtime.Runtime<RuntimeR> {
+        return React.useContext(this.Context).runtime
+    }
+
+    useContext(): Context.Context<ContextR> {
+        return React.useContext(this.Context).context
+    }
+
+
+    useRunSync() {
+        const { runtime, context } = React.useContext(this.Context)
+
+        return React.useCallback(<A, E>(
+            effect: Effect.Effect<A, E, RuntimeR | ContextR>
+        ): A => effect.pipe(
+            Effect.provide(context),
+            Runtime.runSync(runtime),
+        ), [runtime, context])
+    }
+
+    useRunPromise() {
+        const { runtime, context } = React.useContext(this.Context)
+
+        return React.useCallback(<A, E>(
+            effect: Effect.Effect<A, E, RuntimeR | ContextR>,
+            options?: { readonly signal?: AbortSignal },
+        ): Promise<A> => effect.pipe(
+            Effect.provide(context),
+            effect => Runtime.runPromise(runtime)(effect, options),
+        ), [runtime, context])
+    }
+
+    useRunFork() {
+        const { runtime, context } = React.useContext(this.Context)
+
+        return React.useCallback(<A, E>(
+            effect: Effect.Effect<A, E, RuntimeR | ContextR>,
+            options?: Runtime.RunForkOptions,
+        ): Fiber.RuntimeFiber<A, E> => effect.pipe(
+            Effect.provide(context),
+            effect => Runtime.runFork(runtime)(effect, options),
+        ), [runtime, context])
+    }
+
+
+    useMemo<A, E>(
+        effect: Effect.Effect<A, E, RuntimeR | ContextR>,
+        deps?: React.DependencyList,
+        options?: RenderOptions,
+    ): A {
+        const runSync = this.useRunSync()
+
+        return React.useMemo(() => runSync(effect), [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+            ...(deps ?? []),
+        ])
+    }
+
+    // useEffect<A, E>(
+    //     effect: Effect.Effect<A, E, RuntimeR | ContextR | Scope.Scope>,
+    //     deps?: React.DependencyList,
+    //     options?: RenderOptions,
+    // ): void {
+    //     const runSync = this.useRunSync()
+
+    //     return React.useEffect(() => { runSync(effect) }, [
+    //         ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
+    //         ...(deps ?? []),
+    //     ])
+    // }
+
+    useSuspense<A, E>(
+        effect: Effect.Effect<A, E, RuntimeR | ContextR>,
+        options?: { readonly signal?: AbortSignal },
+    ): A {
+        const runPromise = this.useRunPromise()
+        return React.use(runPromise(effect, options))
+    }
+
+    useFork<A, E>(
+        effect: Effect.Effect<A, E, RuntimeR | ContextR | Scope.Scope>,
+        deps?: React.DependencyList,
+        options?: Runtime.RunForkOptions & RenderOptions,
+    ): void {
+        const runFork = this.useRunFork()
+
+        return React.useEffect(() => {
+            const fiber = runFork(Effect.scoped(effect), options)
+            return () => { runFork(Fiber.interrupt(fiber)) }
+        }, [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runFork],
+            ...(deps ?? []),
+        ])
+    }
+
+
+    useRef<A>(value: A): SubscriptionRef.SubscriptionRef<A> {
+        return this.useMemo(
+            SubscriptionRef.make(value),
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: false }, // Do not recreate the ref when the context changes
+        )
+    }
+
+    useRefFromEffect<A, E>(effect: Effect.Effect<A, E, RuntimeR | ContextR>): SubscriptionRef.SubscriptionRef<A> {
+        return this.useMemo(
+            effect.pipe(Effect.flatMap(SubscriptionRef.make)),
+            [],
+            { doNotReExecuteOnRuntimeOrContextChange: false }, // Do not recreate the ref when the context changes
+        )
+    }
+
+    useRefState<A>(ref: SubscriptionRef.SubscriptionRef<A>): [A, React.Dispatch<React.SetStateAction<A>>] {
+        const runSync = this.useRunSync()
+
+        const initialState = React.useMemo(() => runSync(ref), [ref])
+        const [reactStateValue, setReactStateValue] = React.useState(initialState)
+
+        this.useFork(Stream.runForEach(ref.changes, v => Effect.sync(() =>
+            setReactStateValue(v)
+        )), [ref])
+
+        const setValue = React.useCallback((setStateAction: React.SetStateAction<A>) =>
+            runSync(Ref.update(ref, previousState =>
+                typeof setStateAction === "function"
+                    ? (setStateAction as (prevState: A) => A)(previousState)
+                    : setStateAction
+            )),
+        [ref])
+
+        return [reactStateValue, setValue]
+    }
+
+}
+
+
+export interface RenderOptions {
+    /** Prevents re-executing the effect when the Effect runtime or context changes. Defaults to `false`. */
+    readonly doNotReExecuteOnRuntimeOrContextChange?: boolean
+}
+
+
+export const make = <R = never>(): Reffuse<never, R, R> =>
+    new Reffuse(Runtime.defaultRuntime)
+
+export const makeWithRuntime = <R = never>() =>
+    <RuntimeR>(runtime: Runtime.Runtime<RuntimeR>): Reffuse<RuntimeR, R, R> =>
+        new Reffuse(runtime)
--- a/packages/reffuse/src/ReffuseReactContext.tsx
+++ b/packages/reffuse/src/ReffuseReactContext.tsx
@@ -0,0 +1,84 @@
+import { Context, Effect, Runtime, type Layer } from "effect"
+import React from "react"
+import type * as Reffuse from "./Reffuse.js"
+
+
+export interface Value<RuntimeR, ContextR> {
+    readonly runtime: Runtime.Runtime<RuntimeR>
+    readonly context: Context.Context<ContextR>
+}
+
+
+export type Provider<
+    RuntimeR,
+    OwnContextR,
+    ParentContextR,
+> = React.FC<ProviderProps<RuntimeR, OwnContextR, ParentContextR>>
+
+export interface ProviderProps<
+    RuntimeR,
+    OwnContextR,
+    ParentContextR,
+> {
+    readonly layer: Layer.Layer<OwnContextR, unknown, RuntimeR | ParentContextR>
+    readonly children?: React.ReactNode
+}
+
+export function makeRootProvider<
+    RuntimeR,
+    ContextR extends ParentContextR | OwnContextR,
+    OwnContextR,
+    ParentContextR,
+>(
+    runtime: Runtime.Runtime<RuntimeR>,
+    ReactContext: React.Context<Value<RuntimeR, ContextR>>,
+): Provider<RuntimeR, OwnContextR, ParentContextR> {
+    return function ReffuseRootReactContextProvider(props) {
+        const value = React.useMemo(() => ({
+            runtime,
+            context: Effect.context<ContextR>().pipe(
+                Effect.provide(props.layer),
+                Effect.provide(Context.empty() as Context.Context<ParentContextR>), // Just there for type safety. ParentContextR is always never here anyway
+                Runtime.runSync(runtime),
+            ),
+        }), [props.layer])
+
+        return (
+            <ReactContext
+                {...props}
+                value={value}
+            />
+        )
+    }
+}
+
+export function makeNestedProvider<
+    RuntimeR,
+    ContextR extends ParentContextR | OwnContextR,
+    OwnContextR,
+    ParentContextR,
+>(
+    runtime: Runtime.Runtime<RuntimeR>,
+    ReactContext: React.Context<Value<RuntimeR, ContextR>>,
+    parent: Reffuse.Reffuse<RuntimeR, ParentContextR, unknown, unknown>,
+): Provider<RuntimeR, OwnContextR, ParentContextR> {
+    return function ReffuseNestedReactContextProvider(props) {
+        const parentContext = parent.useContext()
+
+        const value = React.useMemo(() => ({
+            runtime,
+            context: Effect.context<ContextR>().pipe(
+                Effect.provide(props.layer),
+                Effect.provide(parentContext),
+                Runtime.runSync(runtime),
+            ),
+        }), [props.layer, parentContext])
+
+        return (
+            <ReactContext
+                {...props}
+                value={value}
+            />
+        )
+    }
+}
--- a/packages/reffuse/src/index.ts
+++ b/packages/reffuse/src/index.ts
@@ -0,0 +1,2 @@
+export * as Reffuse from "./Reffuse.js"
+export * as ReffuseReactContext from "./ReffuseReactContext.js"
--- a/packages/reffuse/src/tests.ts
+++ b/packages/reffuse/src/tests.ts
@@ -0,0 +1,43 @@
+import { Context, Effect, FiberRefs, Layer, Ref, Runtime, RuntimeFlags } from "effect"
+
+
+const runtime = Runtime.make({
+    context: Context.empty(),
+    runtimeFlags: RuntimeFlags.make(),
+    fiberRefs: FiberRefs.empty(),
+})
+
+const createRunSync = <R1, R2>(runtime: Runtime.Runtime<R1>, layer: Layer.Layer<R2>) => {
+    const context = Effect.context<R1 | R2>().pipe(
+        Effect.provide(layer),
+        Runtime.runSync(runtime),
+    )
+
+    return <A, E>(effect: Effect.Effect<A, E, R1 | R2>) =>
+        Runtime.runSync(runtime)(effect.pipe(Effect.provide(context)))
+}
+
+
+class MyService extends Effect.Service<MyService>()("MyServer", {
+    effect: Effect.gen(function*() {
+        return {
+            ref: yield* Ref.make("initial value")
+        } as const
+    })
+}) {}
+
+const MyLayer = Layer.empty.pipe(
+    Layer.provideMerge(MyService.Default)
+)
+
+
+const runSync = createRunSync(runtime, MyLayer)
+
+const setMyServiceValue = (value: string) => Effect.gen(function*() {
+    console.log("previous value: ", yield* (yield* MyService).ref)
+    yield* Ref.set((yield* MyService).ref, value)
+    console.log("new value: ", yield* (yield* MyService).ref)
+})
+
+runSync(setMyServiceValue("1"))
+runSync(setMyServiceValue("2"))
Author	SHA1	Message	Date
Julien Valverdé	ec264e0381	State Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 22:22:10 +01:00
Julien Valverdé	18d94c77e2	Posts Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 22:11:13 +01:00
Julien Valverdé	4f091ae221	API work Some checks failed Lint / lint (push) Failing after 10s Details	2025-01-14 21:29:38 +01:00
Julien Valverdé	671a80b6ff	Post work Some checks failed Lint / lint (push) Failing after 8s Details	2025-01-14 17:09:04 +01:00
Julien Valverdé	249de93047	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 16:03:07 +01:00
Julien Valverdé	ae6bb410a3	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 15:53:42 +01:00
Julien Valverdé	2aaee4826b	extend Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 15:53:20 +01:00
Julien Valverdé	f50adbf119	Done Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 15:40:02 +01:00
Julien Valverdé	cf0951039c	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-14 15:29:09 +01:00
Julien Valverdé	4b6cf9a46e	ReffuseReactContext provider split Some checks failed Lint / lint (push) Failing after 10s Details	2025-01-14 15:16:51 +01:00
Julien Valverdé	12849d37da	Work Some checks failed Lint / lint (push) Failing after 1m20s Details	2025-01-14 00:54:39 +01:00
Julien Valverdé	c60c396054	Inheritance work Some checks failed Lint / lint (push) Failing after 10s Details	2025-01-13 23:38:46 +01:00
Julien Valverdé	1720266761	Fix Some checks failed Lint / lint (push) Failing after 10s Details	2025-01-13 01:32:07 +01:00
Julien Valverdé	edec837a87	Fix Some checks failed Lint / lint (push) Failing after 10s Details	2025-01-12 23:50:49 +01:00
Julien Valverdé	d8553e95e2	Working Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-12 23:41:32 +01:00
Julien Valverdé	f6dc7a0722	Reffuse work Some checks failed Lint / lint (push) Failing after 10s Details	2025-01-12 23:36:28 +01:00
Julien Valverdé	ed85f9804c	Reffuse work Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-12 23:17:28 +01:00
Julien Valverdé	cd2df017ec	Working tests Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-12 19:55:31 +01:00
Julien Valverdé	79a3779005	Tests Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-12 19:14:01 +01:00
Julien Valverdé	b3ec1c4f49	Context Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-12 18:35:25 +01:00
Julien Valverdé	6aafadb4ad	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 23:36:07 +01:00
Julien Valverdé	c4b902b110	Cleanup Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 21:36:48 +01:00
Julien Valverdé	7e239b0d1e	useRefFromEffect Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 18:45:18 +01:00
Julien Valverdé	038f38d32c	Time Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 18:26:43 +01:00
Julien Valverdé	e8580ec49e	Time work Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 17:54:59 +01:00
Julien Valverdé	8ae59bdd93	Time fork test Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 17:51:36 +01:00
Julien Valverdé	e1a85fbb7e	Teardown Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 16:55:48 +01:00
Julien Valverdé	4e0cec051f	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 16:42:49 +01:00
Julien Valverdé	6373919fc4	Router setup Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-11 16:36:06 +01:00
Julien Valverdé	5f455295ad	Tests Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-10 22:34:53 +01:00
Julien Valverdé	00bf5a3c63	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-10 22:21:54 +01:00
Julien Valverdé	9aa86f19f0	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-10 22:14:24 +01:00
Julien Valverdé	64c07a62e6	Fix Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-10 22:11:50 +01:00
Julien Valverdé	100169952c	Example tests Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-10 22:00:14 +01:00
Julien Valverdé	8624a507b3	Example setup Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-10 21:06:32 +01:00
Julien Valverdé	fcd37a5910	Fix Some checks failed Lint / lint (push) Failing after 8s Details	2025-01-09 16:02:39 +01:00
Julien Valverdé	c91b538c97	Reffuse work Some checks failed Lint / lint (push) Failing after 9s Details	2025-01-09 14:27:41 +01:00
Julien Valverdé	53232729c3	Reffuse work Some checks failed Lint / lint (push) Failing after 8s Details	2025-01-09 13:06:45 +01:00
Julien Valverdé	107d1ba359	Reffuse work Some checks failed Lint / lint (push) Failing after 8s Details	2025-01-09 11:51:14 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>