diff --git a/bun.lockb b/bun.lockb
index 3a7a538..8da25e4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/example/package.json b/packages/example/package.json
index 75b4953..eb4afd7 100644
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -11,16 +11,22 @@
},
"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"
diff --git a/packages/example/src/App.css b/packages/example/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/packages/example/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
deleted file mode 100644
index f7ec0ee..0000000
--- a/packages/example/src/App.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Ref } from "effect"
-import "./App.css"
-import reactLogo from "./assets/react.svg"
-import { Reffuse } from "./Reffuse"
-import viteLogo from "/vite.svg"
-
-
-export function App() {
-
- const runtime = Reffuse.useRuntime()
-
- const countRef = Reffuse.useRef(0)
- const [count] = Reffuse.useRefState(countRef)
-
-
- return <>
-
- Vite + React
-
- {/*
- Click on the Vite and React logos to learn more
-
-
-
-}
diff --git a/packages/example/src/Reffuse.ts b/packages/example/src/Reffuse.ts
deleted file mode 100644
index 9037b3a..0000000
--- a/packages/example/src/Reffuse.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Reffuse as TReffuse } from "@thilawyn/reffuse"
-import { Layer } from "effect"
-
-
-export const Reffuse = TReffuse.make(Layer.empty)
diff --git a/packages/example/src/assets/react.svg b/packages/example/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/packages/example/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/example/src/index.css b/packages/example/src/index.css
index 6119ad9..b5c61c9 100644
--- a/packages/example/src/index.css
+++ b/packages/example/src/index.css
@@ -1,68 +1,3 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/example/src/main.tsx b/packages/example/src/main.tsx
index e263ba2..0f57e0d 100644
--- a/packages/example/src/main.tsx
+++ b/packages/example/src/main.tsx
@@ -1,14 +1,20 @@
+import { createRouter, RouterProvider } from "@tanstack/react-router"
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
-import { App } from "./App.tsx"
import "./index.css"
-import { Reffuse } from "./Reffuse.ts"
+import { routeTree } from './routeTree.gen'
+const router = createRouter({ routeTree })
+
+declare module "@tanstack/react-router" {
+ interface Register {
+ router: typeof router
+ }
+}
+
createRoot(document.getElementById("root")!).render(
-
-
-
+
)
diff --git a/packages/example/src/reffuse.ts b/packages/example/src/reffuse.ts
new file mode 100644
index 0000000..1a73e66
--- /dev/null
+++ b/packages/example/src/reffuse.ts
@@ -0,0 +1,5 @@
+import { make } from "@thilawyn/reffuse/Reffuse"
+import { Layer } from "effect"
+
+
+export const Reffuse = make(Layer.empty)
diff --git a/packages/example/src/routeTree.gen.ts b/packages/example/src/routeTree.gen.ts
new file mode 100644
index 0000000..640dfa0
--- /dev/null
+++ b/packages/example/src/routeTree.gen.ts
@@ -0,0 +1,111 @@
+/* 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 CountImport } from './routes/count'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+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
+ }
+ }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/count': typeof CountRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/count': typeof CountRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof IndexRoute
+ '/count': typeof CountRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: '/' | '/count'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/' | '/count'
+ id: '__root__' | '/' | '/count'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ CountRoute: typeof CountRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ CountRoute: CountRoute,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
+
+/* ROUTE_MANIFEST_START
+{
+ "routes": {
+ "__root__": {
+ "filePath": "__root.tsx",
+ "children": [
+ "/",
+ "/count"
+ ]
+ },
+ "/": {
+ "filePath": "index.tsx"
+ },
+ "/count": {
+ "filePath": "count.tsx"
+ }
+ }
+}
+ROUTE_MANIFEST_END */
diff --git a/packages/example/src/routes/__root.tsx b/packages/example/src/routes/__root.tsx
new file mode 100644
index 0000000..7749f30
--- /dev/null
+++ b/packages/example/src/routes/__root.tsx
@@ -0,0 +1,22 @@
+import { Reffuse } from "@/reffuse"
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
+import { TanStackRouterDevtools } from "@tanstack/router-devtools"
+
+
+export const Route = createRootRoute({
+ component: Root
+})
+
+function Root() {
+ return (
+
+
+ Index
+ Count
+
+
+
+
+
+ )
+}
diff --git a/packages/example/src/routes/count.tsx b/packages/example/src/routes/count.tsx
new file mode 100644
index 0000000..f36f36a
--- /dev/null
+++ 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 runtime = Reffuse.useRuntime()
+
+ const countRef = Reffuse.useRef(0)
+ const [count] = Reffuse.useRefState(countRef)
+
+
+ return (
+
+ {/*
+ )
+
+}
diff --git a/packages/example/src/routes/index.tsx b/packages/example/src/routes/index.tsx
new file mode 100644
index 0000000..25b530d
--- /dev/null
+++ b/packages/example/src/routes/index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router"
+
+
+export const Route = createFileRoute("/")({
+ component: Index
+})
+
+function Index() {
+ return <>
+}
diff --git a/packages/example/tailwind.config.js b/packages/example/tailwind.config.js
new file mode 100644
index 0000000..f802d2c
--- /dev/null
+++ 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: [],
+}
diff --git a/packages/example/vite.config.ts b/packages/example/vite.config.ts
index 8b0f57b..6b20c32 100644
--- a/packages/example/vite.config.ts
+++ b/packages/example/vite.config.ts
@@ -1,7 +1,19 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+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: [react()],
+ plugins: [
+ TanStackRouterVite(),
+ react(),
+ ],
+
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
})
diff --git a/packages/reffuse/src/Reffuse.tsx b/packages/reffuse/src/Reffuse.tsx
index 7038090..c1bdf2a 100644
--- a/packages/reffuse/src/Reffuse.tsx
+++ b/packages/reffuse/src/Reffuse.tsx
@@ -64,7 +64,7 @@ export class Reffuse {
const runtime = this.useRuntime()
return React.useEffect(() => {
- const fiber = runtime.runFork(self.pipe(Effect.scoped), options)
+ const fiber = runtime.runFork(Effect.scoped(self), options)
return () => { runtime.runFork(Fiber.interrupt(fiber)) }
}, [runtime, ...deps ?? []])
}