0.1.3 (#5)

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

packages/extension-query/README.md

@@ -0,0 +1,10 @@
+# Reffuse Query
+
+TanStack Query style hooks for Reffuse.
+
+## Peer dependencies
+- `reffuse` 0.1.3+
+- `effect` 3.13+
+- `@effect/platform` & `@effect/platform-browser`
+- `react` & `@types/react` 19+
+- `@typed/async-data`

packages/extension-query/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@reffuse/extension-query",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "./README.md",
+    "./dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "url": "git+https://github.com/Thiladev/reffuse.git"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "lint:tsc": "tsc --noEmit",
+    "pack": "npm pack",
+    "clean:cache": "rm -f tsconfig.tsbuildinfo",
+    "clean:dist": "rm -rf dist",
+    "clean:node": "rm -rf node_modules"
+  },
+  "devDependencies": {
+    "reffuse": "workspace:*"
+  },
+  "peerDependencies": {
+    "@effect/platform": "^0.77.0",
+    "@effect/platform-browser": "^0.56.0",
+    "@typed/async-data": "^0.13.0",
+    "@types/react": "^19.0.0",
+    "effect": "^3.13.0",
+    "react": "^19.0.0",
+    "reffuse": "^0.1.3"
+  }
+}

packages/extension-query/src/QueryExtension.ts

@@ -0,0 +1,55 @@
+import type * as AsyncData from "@typed/async-data"
+import { type Cause, type Context, Effect, type Fiber, Layer, type Option, type Stream, type SubscriptionRef } from "effect"
+import * as React from "react"
+import { ReffuseExtension, type ReffuseHelpers } from "reffuse"
+import * as QueryRunner from "./QueryRunner.js"
+import type * as QueryService from "./QueryService.js"
+
+
+export interface UseQueryProps<K extends readonly unknown[], A, E, R> {
+    readonly key: Stream.Stream<K>
+    readonly query: (key: K) => Effect.Effect<A, E, R>
+    readonly refreshOnWindowFocus?: boolean
+}
+
+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 layer: <Self, Id extends string>(
+        tag: Context.TagClass<Self, Id, QueryService.QueryService<K, A, E>>
+    ) => Layer.Layer<Self>
+}
+
+
+export const QueryExtension = ReffuseExtension.make(() => ({
+    useQuery<K extends readonly unknown[], A, E, R>(
+        this: ReffuseHelpers.ReffuseHelpers<R>,
+        props: UseQueryProps<K, A, E, R>,
+    ): UseQueryResult<K, A, E> {
+        const runner = this.useMemo(() => QueryRunner.make({
+            key: props.key,
+            query: props.query,
+        }), [props.key])
+
+        this.useFork(() => runner.fetchOnKeyChange, [runner])
+
+        this.useFork(() => (props.refreshOnWindowFocus ?? true)
+            ? runner.refreshOnWindowFocus
+            : Effect.void,
+        [props.refreshOnWindowFocus, runner])
+
+        return React.useMemo(() => ({
+            latestKey: runner.latestKeyRef,
+            state: runner.stateRef,
+            refresh: runner.forkRefresh,
+
+            layer: tag => Layer.succeed(tag, {
+                latestKey: runner.latestKeyRef,
+                state: runner.stateRef,
+                refresh: runner.forkRefresh,
+            }),
+        }), [runner])
+    }
+}))

packages/extension-query/src/QueryRunner.ts

@@ -0,0 +1,144 @@
+import { BrowserStream } from "@effect/platform-browser"
+import * as AsyncData from "@typed/async-data"
+import { type Cause, Effect, Fiber, identity, Option, Ref, type Scope, Stream, SubscriptionRef } from "effect"
+
+
+export interface QueryRunner<K extends readonly unknown[], A, E, R> {
+    readonly query: (key: K) => Effect.Effect<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 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 fetchOnKeyChange: Effect.Effect<void, Cause.NoSuchElementException, Scope.Scope>
+    readonly refreshOnWindowFocus: Effect.Effect<void>
+}
+
+
+export interface MakeProps<K extends readonly unknown[], A, E, R> {
+    readonly key: Stream.Stream<K>
+    readonly query: (key: K) => Effect.Effect<A, E, R>
+}
+
+export const make = <K extends readonly unknown[], A, E, R>(
+    { key, query }: MakeProps<K, A, E, R>
+): Effect.Effect<QueryRunner<K, A, E, R>, never, R> => Effect.gen(function*() {
+    const context = yield* Effect.context<R>()
+
+    const latestKeyRef = yield* SubscriptionRef.make(Option.none<K>())
+    const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, E>())
+    const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>())
+
+    const interrupt = fiberRef.pipe(
+        Effect.flatMap(Option.match({
+            onSome: fiber => Ref.set(fiberRef, Option.none()).pipe(
+                Effect.andThen(Fiber.interrupt(fiber))
+            ),
+            onNone: () => Effect.void,
+        }))
+    )
+
+    const forkInterrupt = fiberRef.pipe(
+        Effect.flatMap(Option.match({
+            onSome: fiber => Ref.set(fiberRef, Option.none()).pipe(
+                Effect.andThen(Fiber.interrupt(fiber).pipe(
+                    Effect.asVoid,
+                    Effect.forkDaemon,
+                ))
+            ),
+            onNone: () => Effect.forkDaemon(Effect.void),
+        }))
+    )
+
+    const forkFetch = interrupt.pipe(
+        Effect.andThen(
+            Ref.set(stateRef, AsyncData.loading()).pipe(
+                Effect.andThen(latestKeyRef),
+                Effect.flatMap(identity),
+                Effect.flatMap(key => query(key).pipe(
+                    Effect.matchCauseEffect({
+                        onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
+                        onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
+                    })
+                )),
+
+                Effect.provide(context),
+                Effect.fork,
+            )
+        ),
+
+        Effect.flatMap(fiber =>
+            Ref.set(fiberRef, Option.some(fiber)).pipe(
+                Effect.andThen(Fiber.join(fiber)),
+                Effect.andThen(Ref.set(fiberRef, Option.none())),
+            )
+        ),
+
+        Effect.forkDaemon,
+    )
+
+    const forkRefresh = interrupt.pipe(
+        Effect.andThen(
+            Ref.update(stateRef, 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(
+                Effect.andThen(latestKeyRef),
+                Effect.flatMap(identity),
+                Effect.flatMap(key => query(key).pipe(
+                    Effect.matchCauseEffect({
+                        onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
+                        onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
+                    })
+                )),
+
+                Effect.provide(context),
+                Effect.fork,
+            )
+        ),
+
+        Effect.flatMap(fiber =>
+            Ref.set(fiberRef, Option.some(fiber)).pipe(
+                Effect.andThen(Fiber.join(fiber)),
+                Effect.andThen(Ref.set(fiberRef, Option.none())),
+            )
+        ),
+
+        Effect.forkDaemon,
+    )
+
+    const fetchOnKeyChange = Effect.addFinalizer(() => interrupt).pipe(
+        Effect.andThen(Stream.runForEach(key, latestKey =>
+            Ref.set(latestKeyRef, Option.some(latestKey)).pipe(
+                Effect.andThen(forkFetch)
+            )
+        ))
+    )
+
+    const refreshOnWindowFocus = Stream.runForEach(
+        BrowserStream.fromEventListenerWindow("focus"),
+        () => forkRefresh,
+    )
+
+    return {
+        query,
+
+        latestKeyRef,
+        stateRef,
+        fiberRef,
+
+        forkInterrupt,
+        forkFetch,
+        forkRefresh,
+
+        fetchOnKeyChange,
+        refreshOnWindowFocus,
+    }
+})

packages/extension-query/src/QueryService.ts

@@ -0,0 +1,32 @@
+import type * as AsyncData from "@typed/async-data"
+import { type Cause, Effect, type Fiber, type Option, 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>>
+}
+
+export const Tag = <const Id extends string>(id: Id) => <
+    Self, K extends readonly unknown[], A, E = never,
+>() => Effect.Tag(id)<Self, QueryService<K, A, E>>()
+
+
+// export interface LayerProps<A, E, R> {
+//     readonly query: Effect.Effect<A, E, R>
+// }
+
+// export const layer = <Self, Id extends string, A, E, R>(
+//     tag: Context.TagClass<Self, Id, QueryService<A, E>>,
+//     props: LayerProps<A, E, R>,
+// ): Layer.Layer<Self, never, R> => Layer.effect(tag, Effect.gen(function*() {
+//     const runner = yield* QueryRunner.make({
+//         query: props.query
+//     })
+
+//     return {
+//         state: runner.stateRef,
+//         refresh: runner.forkRefresh,
+//     }
+// }))

packages/extension-query/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./QueryExtension.js"
+export * as QueryRunner from "./QueryRunner.js"
+export * as QueryService from "./QueryService.js"

packages/extension-query/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    // "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "NodeNext",
+    // "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    // "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+
+    // Build
+    "outDir": "./dist",
+    "declaration": true
+  },
+
+  "include": ["./src"]
+}