Merge branch 'queryclient' of git.valverde.cloud:Thilawyn/reffuse into queryclient

2025-03-26 19:34:59 +01:00
parent 03f0b623ed 972986241c
commit b50255ded2
16 changed files with 317 additions and 226 deletions
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -11,41 +11,41 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@tanstack/react-router": "^1.112.7",
-    "@tanstack/router-devtools": "^1.112.7",
-    "@tanstack/router-plugin": "^1.112.7",
+    "@eslint/js": "^9.23.0",
+    "@tanstack/react-router": "^1.114.27",
+    "@tanstack/react-router-devtools": "^1.114.27",
+    "@tanstack/router-plugin": "^1.114.27",
    "@thilawyn/thilaschema": "^0.1.4",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.12",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
+    "eslint": "^9.23.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "typescript-eslint": "^8.26.0",
-    "vite": "^6.2.0"
+    "typescript-eslint": "^8.28.0",
+    "vite": "^6.2.3"
  },
  "dependencies": {
-    "@effect/platform": "^0.77.6",
-    "@effect/platform-browser": "^0.56.6",
+    "@effect/platform": "^0.80.1",
+    "@effect/platform-browser": "^0.59.1",
    "@radix-ui/themes": "^3.2.1",
    "@reffuse/extension-lazyref": "workspace:*",
    "@reffuse/extension-query": "workspace:*",
    "@typed/async-data": "^0.13.1",
    "@typed/id": "^0.17.1",
    "@typed/lazy-ref": "^0.3.3",
-    "effect": "^3.13.6",
-    "lucide-react": "^0.477.0",
-    "mobx": "^6.13.6",
+    "effect": "^3.14.1",
+    "lucide-react": "^0.483.0",
+    "mobx": "^6.13.7",
    "reffuse": "workspace:*"
  },
  "overrides": {
-    "effect": "^3.13.6",
-    "@effect/platform": "^0.77.6",
-    "@effect/platform-browser": "^0.56.6",
+    "effect": "^3.14.1",
+    "@effect/platform": "^0.80.1",
+    "@effect/platform-browser": "^0.59.1",
    "@typed/lazy-ref": "^0.3.3",
    "@typed/async-data": "^0.13.1"
  }
--- a/packages/example/src/query/views/Uuid4QueryService.tsx
+++ b/packages/example/src/query/views/Uuid4QueryService.tsx
@@ -5,7 +5,7 @@ import { Uuid4Query } from "../services"


 export function Uuid4QueryService() {
-    const runSync = R.useRunSync()
+    const runFork = R.useRunFork()

    const query = R.useMemo(() => Uuid4Query.Uuid4Query, [])
    const [state] = R.useRefState(query.state)
@@ -25,7 +25,7 @@ export function Uuid4QueryService() {
                    })}
                </Text>

-                <Button onClick={() => runSync(query.refresh)}>Refresh</Button>
+                <Button onClick={() => runFork(query.forkRefresh)}>Refresh</Button>
            </Flex>
        </Container>
    )
--- a/packages/example/src/routes/__root.tsx
+++ b/packages/example/src/routes/__root.tsx
@@ -1,7 +1,7 @@
 import { VQueryErrorHandler } from "@/QueryErrorHandler"
 import { Container, Flex, Theme } from "@radix-ui/themes"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
-import { TanStackRouterDevtools } from "@tanstack/router-devtools"
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"

 import "@radix-ui/themes/styles.css"
 import "../index.css"
--- a/packages/example/src/routes/query/usequery.tsx
+++ b/packages/example/src/routes/query/usequery.tsx
@@ -3,7 +3,7 @@ import { HttpClient } from "@effect/platform"
 import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import * as AsyncData from "@typed/async-data"
-import { Array, Console, Effect, flow, Option, Schema } from "effect"
+import { Array, Console, Effect, flow, Option, Schema, Stream } from "effect"
 import { useState } from "react"


@@ -15,7 +15,7 @@ export const Route = createFileRoute("/query/usequery")({
 const Result = Schema.Array(Schema.String)

 function RouteComponent() {
-    const runSync = R.useRunSync()
+    const runFork = R.useRunFork()

    const [count, setCount] = useState(1)

@@ -59,7 +59,15 @@ function RouteComponent() {
                    })}
                </Text>

-                <Button onClick={() => runSync(query.refresh)}>Refresh</Button>
+                <Button
+                    onClick={() => query.forkRefresh.pipe(
+                        Effect.flatMap(([, state]) => Stream.runForEach(state, Console.log)),
+                        Effect.andThen(Console.log("Refresh finished or stopped")),
+                        runFork,
+                    )}
+                >
+                    Refresh
+                </Button>
            </Flex>
        </Container>
    )
--- a/packages/extension-lazyref/package.json
+++ b/packages/extension-lazyref/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@reffuse/extension-lazyref",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "type": "module",
  "files": [
    "./README.md",
@@ -37,6 +37,6 @@
    "@types/react": "^19.0.0",
    "effect": "^3.13.0",
    "react": "^19.0.0",
-    "reffuse": "^0.1.3"
+    "reffuse": "^0.1.4"
  }
 }
--- a/packages/extension-lazyref/src/index.ts
+++ b/packages/extension-lazyref/src/index.ts
@@ -13,7 +13,7 @@ export const LazyRefExtension = ReffuseExtension.make(() => ({
        const [reactStateValue, setReactStateValue] = React.useState(initialState)

        this.useFork(() => Stream.runForEach(
-            Stream.changes(ref.changes),
+            Stream.changesWith(ref.changes, (x, y) => x === y),
            v => Effect.sync(() => setReactStateValue(v)),
        ), [ref])

--- a/packages/extension-query/package.json
+++ b/packages/extension-query/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@reffuse/extension-query",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "type": "module",
  "files": [
    "./README.md",
@@ -39,6 +39,6 @@
    "@types/react": "^19.0.0",
    "effect": "^3.13.0",
    "react": "^19.0.0",
-    "reffuse": "^0.1.3"
+    "reffuse": "^0.1.4"
  }
 }
--- a/packages/extension-query/src/QueryExtension.ts
+++ b/packages/extension-query/src/QueryExtension.ts
@@ -18,7 +18,11 @@ export interface UseQueryProps<K extends readonly unknown[], A, E, R> {
 export interface UseQueryResult<K extends readonly unknown[], A, E> {
    readonly latestKey: SubscriptionRef.SubscriptionRef<Option.Option<K>>
    readonly state: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
-    readonly refresh: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
+
+    readonly forkRefresh: Effect.Effect<readonly [
+        fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>, Cause.NoSuchElementException>,
+        state: Stream.Stream<AsyncData.AsyncData<A, E>>,
+    ]>

    readonly layer: <Self, Id extends string>(
        tag: Context.TagClass<Self, Id, QueryService.QueryService<K, A, E>>
@@ -32,6 +36,7 @@ export interface UseMutationProps<K extends readonly unknown[], A, E, R> {

 export interface UseMutationResult<K extends readonly unknown[], A, E> {
    readonly state: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
+
    readonly mutate: (...key: K) => Effect.Effect<AsyncData.Success<A> | AsyncData.Failure<E>>
    readonly forkMutate: (...key: K) => Effect.Effect<readonly [
        fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>>,
@@ -73,12 +78,13 @@ export const QueryExtension = ReffuseExtension.make(() => ({
        return React.useMemo(() => ({
            latestKey: runner.latestKeyRef,
            state: runner.stateRef,
-            refresh: runner.forkRefresh,
+
+            forkRefresh: runner.forkRefresh,

            layer: tag => Layer.succeed(tag, {
                latestKey: runner.latestKeyRef,
                state: runner.stateRef,
-                refresh: runner.forkRefresh,
+                forkRefresh: runner.forkRefresh,
            }),
        }), [runner])
    },
@@ -102,6 +108,7 @@ export const QueryExtension = ReffuseExtension.make(() => ({

        return React.useMemo(() => ({
            state: runner.stateRef,
+
            mutate: runner.mutate,
            forkMutate: runner.forkMutate,

--- a/packages/extension-query/src/QueryService.ts
+++ b/packages/extension-query/src/QueryService.ts
@@ -1,11 +1,14 @@
 import type * as AsyncData from "@typed/async-data"
-import { type Cause, Effect, type Fiber, type Option, type SubscriptionRef } from "effect"
+import { type Cause, Effect, type Fiber, type Option, type Stream, type SubscriptionRef } from "effect"


 export interface QueryService<K extends readonly unknown[], A, E> {
    readonly latestKey: SubscriptionRef.SubscriptionRef<Option.Option<K>>
    readonly state: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
-    readonly refresh: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
+    readonly forkRefresh: Effect.Effect<readonly [
+        fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>, Cause.NoSuchElementException>,
+        state: Stream.Stream<AsyncData.AsyncData<A, E>>,
+    ]>
 }

 export const Tag = <const Id extends string>(id: Id) => <
--- a/packages/extension-query/src/internal/MutationRunner.ts
+++ b/packages/extension-query/src/internal/MutationRunner.ts
@@ -58,35 +58,36 @@ export const make = <EH, K extends readonly unknown[], A, E, HandledE, R>(
        Effect.provide(QueryProgress.QueryProgress.Live),
    )

-    const mutate = (...key: K) => run(key).pipe(
-        Effect.provide(QueryState.layer(
-            queryStateTag,
-            globalStateRef,
-            value => Ref.set(globalStateRef, value),
-        ))
+    const mutate = (...key: K) => Effect.provide(run(key), QueryState.layer(
+        queryStateTag,
+        globalStateRef,
+        value => Ref.set(globalStateRef, value),
+    ))
+
+    const forkMutate = (...key: K) => Effect.all([
+        Ref.make(AsyncData.noData<A, Exclude<E, HandledE>>()),
+        Queue.unbounded<AsyncData.AsyncData<A, Exclude<E, HandledE>>>(),
+    ]).pipe(
+        Effect.flatMap(([stateRef, stateQueue]) =>
+            Effect.addFinalizer(() => Queue.shutdown(stateQueue)).pipe(
+                Effect.andThen(run(key)),
+                Effect.scoped,
+                Effect.forkDaemon,
+
+                Effect.map(fiber => [fiber, Stream.fromQueue(stateQueue)] as const),
+
+                Effect.provide(QueryState.layer(
+                    queryStateTag,
+                    stateRef,
+                    value => Queue.offer(stateQueue, value).pipe(
+                        Effect.andThen(Ref.set(stateRef, value)),
+                        Effect.andThen(Ref.set(globalStateRef, value)),
+                    ),
+                )),
+            )
+        )
    )

-    const forkMutate = (...key: K) => Effect.gen(function*() {
-        const stateRef = yield* Ref.make(AsyncData.noData<A, Exclude<E, HandledE>>())
-        const stateQueue = yield* Queue.unbounded<AsyncData.AsyncData<A, Exclude<E, HandledE>>>()
-
-        const fiber = yield* Effect.forkDaemon(run(key).pipe(
-            Effect.tap(() => Queue.shutdown(stateQueue)),
-
-            Effect.provide(QueryState.layer(
-                queryStateTag,
-                stateRef,
-                value => Queue.offer(stateQueue, value).pipe(
-                    Effect.andThen(Ref.set(stateRef, value)),
-                    Effect.andThen(Ref.set(globalStateRef, value)),
-                ),
-            )),
-        ))
-
-        return [fiber, Stream.fromQueue(stateQueue)] as const
-    })
-
-
    return {
        context,
        stateRef: globalStateRef,
--- a/packages/extension-query/src/internal/QueryRunner.ts
+++ b/packages/extension-query/src/internal/QueryRunner.ts
@@ -1,6 +1,6 @@
 import { BrowserStream } from "@effect/platform-browser"
 import * as AsyncData from "@typed/async-data"
-import { type Cause, type Context, Effect, Fiber, identity, Option, Ref, type Scope, Stream, SubscriptionRef } from "effect"
+import { type Cause, type Context, Effect, Fiber, identity, Option, Queue, Ref, type Scope, Stream, SubscriptionRef } from "effect"
 import type * as QueryClient from "../QueryClient.js"
 import * as QueryProgress from "../QueryProgress.js"
 import * as QueryState from "./QueryState.js"
@@ -11,11 +11,20 @@ export interface QueryRunner<K extends readonly unknown[], A, E, R> {

    readonly latestKeyRef: SubscriptionRef.SubscriptionRef<Option.Option<K>>
    readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
-    readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>>
+    readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.RuntimeFiber<
+        AsyncData.Success<A> | AsyncData.Failure<E>,
+        Cause.NoSuchElementException
+    >>>

    readonly forkInterrupt: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
-    readonly forkFetch: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
-    readonly forkRefresh: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
+    readonly forkFetch: Effect.Effect<readonly [
+        fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>, Cause.NoSuchElementException>,
+        state: Stream.Stream<AsyncData.AsyncData<A, E>>,
+    ]>
+    readonly forkRefresh: Effect.Effect<readonly [
+        fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>, Cause.NoSuchElementException>,
+        state: Stream.Stream<AsyncData.AsyncData<A, E>>,
+    ]>

    readonly fetchOnKeyChange: Effect.Effect<void, Cause.NoSuchElementException, Scope.Scope>
    readonly refreshOnWindowFocus: Effect.Effect<void>
@@ -43,10 +52,12 @@ export const make = <EH, K extends readonly unknown[], A, E, HandledE, R>(

    const latestKeyRef = yield* SubscriptionRef.make(Option.none<K>())
    const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, Exclude<E, HandledE>>())
-    const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>())
+    const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.RuntimeFiber<
+        AsyncData.Success<A> | AsyncData.Failure<Exclude<E, HandledE>>,
+        Cause.NoSuchElementException
+    >>())

    const queryStateTag = QueryState.makeTag<A, Exclude<E, HandledE>>()
-    const queryStateLayer = QueryState.layer(queryStateTag, stateRef, value => Ref.set(stateRef, value))

    const interrupt = fiberRef.pipe(
        Effect.flatMap(Option.match({
@@ -78,8 +89,12 @@ export const make = <EH, K extends readonly unknown[], A, E, HandledE, R>(
            Effect.flatMap(key => query(key).pipe(
                errorHandler.handle,
                Effect.matchCauseEffect({
-                    onSuccess: v => state.set(AsyncData.success(v)),
-                    onFailure: c => state.set(AsyncData.failure(c)),
+                    onSuccess: v => Effect.succeed(AsyncData.success(v)).pipe(
+                        Effect.tap(state.set)
+                    ),
+                    onFailure: c => Effect.succeed(AsyncData.failure(c)).pipe(
+                        Effect.tap(state.set)
+                    ),
                }),
            )),
        )),
@@ -88,48 +103,64 @@ export const make = <EH, K extends readonly unknown[], A, E, HandledE, R>(
        Effect.provide(QueryProgress.QueryProgress.Live),
    )

-    const forkFetch = queryStateTag.pipe(
-        Effect.flatMap(state => interrupt.pipe(
-            Effect.andThen(state.set(AsyncData.loading()).pipe(
-                Effect.andThen(run),
-                Effect.fork,
+    const forkFetch = Queue.unbounded<AsyncData.AsyncData<A, Exclude<E, HandledE>>>().pipe(
+        Effect.flatMap(stateQueue => queryStateTag.pipe(
+            Effect.flatMap(state => interrupt.pipe(
+                Effect.andThen(Effect.addFinalizer(() => Ref.set(fiberRef, Option.none()).pipe(
+                    Effect.andThen(Queue.shutdown(stateQueue))
+                )).pipe(
+                    Effect.andThen(state.set(AsyncData.loading())),
+                    Effect.andThen(run),
+                    Effect.scoped,
+                    Effect.forkDaemon,
+                )),
+
+                Effect.tap(fiber => Ref.set(fiberRef, Option.some(fiber))),
+                Effect.map(fiber => [fiber, Stream.fromQueue(stateQueue)] as const),
            )),
-        )),

-        Effect.flatMap(fiber =>
-            Ref.set(fiberRef, Option.some(fiber)).pipe(
-                Effect.andThen(Fiber.join(fiber)),
-                Effect.andThen(Ref.set(fiberRef, Option.none())),
-            )
-        ),
-
-        Effect.forkDaemon,
-        Effect.provide(queryStateLayer),
+            Effect.provide(QueryState.layer(
+                queryStateTag,
+                stateRef,
+                value => Queue.offer(stateQueue, value).pipe(
+                    Effect.andThen(Ref.set(stateRef, value))
+                ),
+            )),
+        ))
    )

-    const forkRefresh = queryStateTag.pipe(
-        Effect.flatMap(state => interrupt.pipe(
-            Effect.andThen(state.update(previous => {
-                if (AsyncData.isSuccess(previous) || AsyncData.isFailure(previous))
-                    return AsyncData.refreshing(previous)
-                if (AsyncData.isRefreshing(previous))
-                    return AsyncData.refreshing(previous.previous)
-                return AsyncData.loading()
-            }).pipe(
+    const setInitialRefreshState = queryStateTag.pipe(
+        Effect.flatMap(state => state.update(previous => {
+            if (AsyncData.isSuccess(previous) || AsyncData.isFailure(previous))
+                return AsyncData.refreshing(previous)
+            if (AsyncData.isRefreshing(previous))
+                return AsyncData.refreshing(previous.previous)
+            return AsyncData.loading()
+        }))
+    )
+
+    const forkRefresh = Queue.unbounded<AsyncData.AsyncData<A, Exclude<E, HandledE>>>().pipe(
+        Effect.flatMap(stateQueue => interrupt.pipe(
+            Effect.andThen(Effect.addFinalizer(() => Ref.set(fiberRef, Option.none()).pipe(
+                Effect.andThen(Queue.shutdown(stateQueue))
+            )).pipe(
+                Effect.andThen(setInitialRefreshState),
                Effect.andThen(run),
-                Effect.fork,
-            ))
-        )),
+                Effect.scoped,
+                Effect.forkDaemon,
+            )),

-        Effect.flatMap(fiber =>
-            Ref.set(fiberRef, Option.some(fiber)).pipe(
-                Effect.andThen(Fiber.join(fiber)),
-                Effect.andThen(Ref.set(fiberRef, Option.none())),
-            )
-        ),
+            Effect.tap(fiber => Ref.set(fiberRef, Option.some(fiber))),
+            Effect.map(fiber => [fiber, Stream.fromQueue(stateQueue)] as const),

-        Effect.forkDaemon,
-        Effect.provide(queryStateLayer),
+            Effect.provide(QueryState.layer(
+                queryStateTag,
+                stateRef,
+                value => Queue.offer(stateQueue, value).pipe(
+                    Effect.andThen(Ref.set(stateRef, value))
+                ),
+            )),
+        ))
    )

    const fetchOnKeyChange = Effect.addFinalizer(() => interrupt).pipe(
--- a/packages/reffuse/package.json
+++ b/packages/reffuse/package.json
@@ -1,6 +1,6 @@
 {
  "name": "reffuse",
-  "version": "0.1.3",
+  "version": "0.1.4",
  "type": "module",
  "files": [
    "./README.md",
--- a/packages/reffuse/src/Reffuse.ts
+++ b/packages/reffuse/src/Reffuse.ts
@@ -9,7 +9,7 @@ export class Reffuse extends ReffuseHelpers.make() {}

 export const withContexts = <R2 extends Array<unknown>>(
    ...contexts: [...{ [K in keyof R2]: ReffuseContext.ReffuseContext<R2[K]> }]
-) =>
+) => (
    <
        BaseClass extends ReffuseHelpers.ReffuseHelpersClass<R1>,
        R1
@@ -29,9 +29,9 @@ export const withContexts = <R2 extends Array<unknown>>(
    ) => class extends self {
        static readonly contexts = [...self.contexts, ...contexts]
    } as any
+)

-
-export const withExtension = <A extends object>(extension: ReffuseExtension.ReffuseExtension<A>) =>
+export const withExtension = <A extends object>(extension: ReffuseExtension.ReffuseExtension<A>) => (
    <
        BaseClass extends ReffuseHelpers.ReffuseHelpersClass<R>,
        R
@@ -45,3 +45,4 @@ export const withExtension = <A extends object>(extension: ReffuseExtension.Reff
        Object.assign(class_.prototype, extension())
        return class_ as any
    }
+)
--- a/packages/reffuse/src/ReffuseHelpers.ts
+++ b/packages/reffuse/src/ReffuseHelpers.ts
@@ -396,7 +396,7 @@ export abstract class ReffuseHelpers<R> {
        const [reactStateValue, setReactStateValue] = React.useState(initialState)

        this.useFork(() => Stream.runForEach(
-            Stream.changes(ref.changes),
+            Stream.changesWith(ref.changes, (x, y) => x === y),
            v => Effect.sync(() => setReactStateValue(v)),
        ), [ref])

@@ -428,20 +428,26 @@ export interface ReffuseHelpers<R> extends Pipeable.Pipeable {}

 ReffuseHelpers.prototype.pipe = function pipe() {
    return Pipeable.pipeArguments(this, arguments)
-}
+};


 export interface ReffuseHelpersClass<R> extends Pipeable.Pipeable {
    new(): ReffuseHelpers<R>
+    make<Self>(this: new () => Self): Self
    readonly contexts: readonly ReffuseContext.ReffuseContext<R>[]
 }

+(ReffuseHelpers as ReffuseHelpersClass<any>).make = function make() {
+    return new this()
+};
+
 (ReffuseHelpers as ReffuseHelpersClass<any>).pipe = function pipe() {
    return Pipeable.pipeArguments(this, arguments)
-}
+};


-export const make = (): ReffuseHelpersClass<never> =>
+export const make = (): ReffuseHelpersClass<never> => (
    class extends (ReffuseHelpers<never> as ReffuseHelpersClass<never>) {
        static readonly contexts = []
    }
+)