diff --git a/packages/example/src/routeTree.gen.ts b/packages/example/src/routeTree.gen.ts index 4cb8a51..2cec328 100644 --- a/packages/example/src/routeTree.gen.ts +++ b/packages/example/src/routeTree.gen.ts @@ -11,15 +11,15 @@ // Import Routes import { Route as rootRoute } from './routes/__root' -import { Route as TeardownImport } from './routes/teardown' +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 TeardownRoute = TeardownImport.update({ - id: '/teardown', - path: '/teardown', +const TimeRoute = TimeImport.update({ + id: '/time', + path: '/time', getParentRoute: () => rootRoute, } as any) @@ -53,11 +53,11 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof CountImport parentRoute: typeof rootRoute } - '/teardown': { - id: '/teardown' - path: '/teardown' - fullPath: '/teardown' - preLoaderRoute: typeof TeardownImport + '/time': { + id: '/time' + path: '/time' + fullPath: '/time' + preLoaderRoute: typeof TimeImport parentRoute: typeof rootRoute } } @@ -68,41 +68,41 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexRoute '/count': typeof CountRoute - '/teardown': typeof TeardownRoute + '/time': typeof TimeRoute } export interface FileRoutesByTo { '/': typeof IndexRoute '/count': typeof CountRoute - '/teardown': typeof TeardownRoute + '/time': typeof TimeRoute } export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute '/count': typeof CountRoute - '/teardown': typeof TeardownRoute + '/time': typeof TimeRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/count' | '/teardown' + fullPaths: '/' | '/count' | '/time' fileRoutesByTo: FileRoutesByTo - to: '/' | '/count' | '/teardown' - id: '__root__' | '/' | '/count' | '/teardown' + to: '/' | '/count' | '/time' + id: '__root__' | '/' | '/count' | '/time' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute CountRoute: typeof CountRoute - TeardownRoute: typeof TeardownRoute + TimeRoute: typeof TimeRoute } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, CountRoute: CountRoute, - TeardownRoute: TeardownRoute, + TimeRoute: TimeRoute, } export const routeTree = rootRoute @@ -117,7 +117,7 @@ export const routeTree = rootRoute "children": [ "/", "/count", - "/teardown" + "/time" ] }, "/": { @@ -126,8 +126,8 @@ export const routeTree = rootRoute "/count": { "filePath": "count.tsx" }, - "/teardown": { - "filePath": "teardown.tsx" + "/time": { + "filePath": "time.tsx" } } } diff --git a/packages/example/src/routes/__root.tsx b/packages/example/src/routes/__root.tsx index 7749f30..900d988 100644 --- a/packages/example/src/routes/__root.tsx +++ b/packages/example/src/routes/__root.tsx @@ -12,6 +12,7 @@ function Root() {
Index + Time Count
diff --git a/packages/example/src/routes/teardown.tsx b/packages/example/src/routes/teardown.tsx deleted file mode 100644 index 3a38383..0000000 --- a/packages/example/src/routes/teardown.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Reffuse } from "@/reffuse" -import { createFileRoute } from "@tanstack/react-router" -import { DateTime, Effect, Ref, SubscriptionRef } from "effect" -import { useMemo } from "react" - - -export const Route = createFileRoute("/teardown")({ - component: Teardown -}) - -function Teardown() { - - const runtime = Reffuse.useRuntime() - - const timeRef = useMemo(() => DateTime.now.pipe( - Effect.flatMap(SubscriptionRef.make), - runtime.runSync, - // eslint-disable-next-line react-hooks/exhaustive-deps - ), []) - - Reffuse.useFork(DateTime.now.pipe( - Effect.flatMap(Ref.set(timeRef)) - )) - - const [time] = Reffuse.useRef(timeRef) - - - return <> - -} diff --git a/packages/example/src/routes/time.tsx b/packages/example/src/routes/time.tsx new file mode 100644 index 0000000..ce6c9ff --- /dev/null +++ b/packages/example/src/routes/time.tsx @@ -0,0 +1,42 @@ +import { Reffuse } from "@/reffuse" +import { createFileRoute } from "@tanstack/react-router" +import { Console, DateTime, Effect, Ref, Schedule, SubscriptionRef } from "effect" +import { useMemo } from "react" + + +export const Route = createFileRoute("/time")({ + component: Time +}) + +function Time() { + + const runtime = Reffuse.useRuntime() + + const timeRef = useMemo(() => DateTime.now.pipe( + Effect.flatMap(SubscriptionRef.make), + runtime.runSync, + // eslint-disable-next-line react-hooks/exhaustive-deps + ), []) + + Reffuse.useFork(Effect.addFinalizer(() => Console.log("Component unmounted.")).pipe( + Effect.flatMap(() => DateTime.now), + Effect.flatMap(v => Ref.set(timeRef, v)), + Effect.repeat(Schedule.spaced("1 second")), + )) + + const [time] = Reffuse.useRefState(timeRef) + + + return ( +
+

+ {DateTime.format(time, { + hour: "numeric", + minute: "numeric", + second: "numeric", + })} +

+
+ ) + +} diff --git a/packages/reffuse/src/Reffuse.tsx b/packages/reffuse/src/Reffuse.tsx index c1bdf2a..49cf11f 100644 --- a/packages/reffuse/src/Reffuse.tsx +++ b/packages/reffuse/src/Reffuse.tsx @@ -1,4 +1,4 @@ -import { Effect, Exit, Fiber, Layer, ManagedRuntime, Ref, Runtime, Stream, SubscriptionRef } from "effect" +import { Effect, Exit, Fiber, Layer, ManagedRuntime, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect" import React from "react" @@ -57,7 +57,7 @@ export class Reffuse { useFork( - self: Effect.Effect, + self: Effect.Effect, deps?: React.DependencyList, options?: Runtime.RunForkOptions, ): void {