packages/example/package.json

@@ -14,6 +14,7 @@
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
+    "effect": "^3.12.1",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",

packages/example/src/App.tsx

@@ -1,13 +1,14 @@
-import { useState } from 'react'
+import "./App.css"
-import reactLogo from './assets/react.svg'
+import reactLogo from "./assets/react.svg"
-import viteLogo from '/vite.svg'
+import { Reffuse } from "./Reffuse"
-import './App.css'
+import viteLogo from "/vite.svg"
 
-function App() {
-  const [count, setCount] = useState(0)
 
-  return (
+export function App() {
-    <>
+
+  const [count, setCount] = Reffuse.useRefState(Reffuse.useRef(0))
+
+  return <>
       <div>
         <a href="https://vite.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
@@ -28,8 +29,6 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
-    </>
+  </>
-  )
-}
 
-export default App
+}

packages/example/src/Reffuse.ts

@@ -0,0 +1,5 @@
+import { Reffuse as TReffuse } from "@thilawyn/reffuse"
+import { Layer } from "effect"
+
+
+export const Reffuse = TReffuse.make(Layer.empty)

packages/example/src/main.tsx

@@ -1,10 +1,14 @@
-import { StrictMode } from 'react'
+import { StrictMode } from "react"
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client"
-import './index.css'
+import { App } from "./App.tsx"
-import App from './App.tsx'
+import "./index.css"
+import { Reffuse } from "./Reffuse.ts"
 
-createRoot(document.getElementById('root')!).render(
+
-  <StrictMode>
+createRoot(document.getElementById("root")!).render(
-    <App />
+    <StrictMode>
-  </StrictMode>,
+        <Reffuse.Provider>
+            <App />
+        </Reffuse.Provider>
+    </StrictMode>
 )

packages/example/tsconfig.app.json

@@ -20,7 +20,11 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

packages/reffuse/src/Reffuse.ts

@@ -1,4 +1,4 @@
-import { Effect, Exit, Fiber, ManagedRuntime, Ref, Runtime, Stream, SubscriptionRef } from "effect"
+import { Effect, Exit, Fiber, Layer, ManagedRuntime, Ref, Runtime, Stream, SubscriptionRef } from "effect"
 import React from "react"
 
 
@@ -9,7 +9,7 @@ export class Reffuse<R, ER> {
     ) {
         this.Context = React.createContext(runtime)
 
-        this.Provider = (props: { readonly children?: React.ReactNode }) => this.Context.Provider({
+        this.Provider = (props: { readonly children?: React.ReactNode }) => this.Context({
             ...props,
             value: this.runtime,
         })
@@ -90,3 +90,7 @@ export class Reffuse<R, ER> {
     }
 
 }
+
+
+export const make = <ROut, E>(layer: Layer.Layer<ROut, E, never>): Reffuse<ROut, E> =>
+    new Reffuse(ManagedRuntime.make(layer))