0.1.0 (#1)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/reffuse/pulls/1

packages/example/src/routes/__root.tsx

@@ -0,0 +1,27 @@
+import { Container, Flex, Theme } from "@radix-ui/themes"
+import "@radix-ui/themes/styles.css"
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
+import { TanStackRouterDevtools } from "@tanstack/router-devtools"
+import "../index.css"
+
+
+export const Route = createRootRoute({
+    component: Root
+})
+
+function Root() {
+    return (
+        <Theme>
+            <Container>
+                <Flex direction="row" justify="center" align="center" gap="2">
+                    <Link to="/">Index</Link>
+                    <Link to="/time">Time</Link>
+                    <Link to="/count">Count</Link>
+                </Flex>
+            </Container>
+
+            <Outlet />
+            <TanStackRouterDevtools />
+        </Theme>
+    )
+}

packages/example/src/routes/count.tsx

@@ -0,0 +1,27 @@
+import { R } from "@/reffuse"
+import { createFileRoute } from "@tanstack/react-router"
+import { Ref } from "effect"
+
+
+export const Route = createFileRoute("/count")({
+    component: Count
+})
+
+function Count() {
+
+    const runSync = R.useRunSync()
+
+    const countRef = R.useRef(0)
+    const [count] = R.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>
+    )
+
+}

packages/example/src/routes/index.tsx

@@ -0,0 +1,34 @@
+import { R } from "@/reffuse"
+import { TodosContext } from "@/todos/reffuse"
+import { TodosState } from "@/todos/services"
+import { VTodos } from "@/todos/views/VTodos"
+import { Container } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect, Layer } from "effect"
+import { useMemo } from "react"
+
+
+export const Route = createFileRoute("/")({
+    component: Index
+})
+
+function Index() {
+
+    const todosLayer = useMemo(() => Layer.empty.pipe(
+        Layer.provideMerge(TodosState.make("todos"))
+    ), [])
+
+    R.useEffect(Effect.addFinalizer(() => Console.log("Effect cleanup")).pipe(
+        Effect.flatMap(() => Console.log("Effect recalculated"))
+    ))
+
+
+    return (
+        <Container>
+            <TodosContext.Provider layer={todosLayer}>
+                <VTodos />
+            </TodosContext.Provider>
+        </Container>
+    )
+
+}

packages/example/src/routes/time.tsx

@@ -0,0 +1,49 @@
+import { R } 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 = R.useRefFromEffect(DateTime.now)
+
+    R.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] = R.useRefState(timeRef)
+
+
+    return (
+        <div className="container mx-auto">
+            <p className="text-center">
+                {DateTime.format(time, {
+                    hour: "numeric",
+                    minute: "numeric",
+                    second: "numeric",
+                })}
+            </p>
+        </div>
+    )
+
+}