Thilawyn/reffuse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Thilawyn:reffuse-neo-tests
Branches Tags
Thilawyn:master Thilawyn:reffuse-neo-tests Thilawyn:next Thilawyn:extension-refactoring Thilawyn:form Thilawyn:ai-doc
..
compare: Thilawyn:ai-doc
Branches Tags
Thilawyn:reffuse-neo-tests Thilawyn:next Thilawyn:master Thilawyn:extension-refactoring Thilawyn:form Thilawyn:ai-doc

1 Commits
reffuse-ne ... ai-doc

Author SHA1 Message Date
Julien Valverdé
acce65c6a4 Code Narrator test
All checks were successful
Lint / lint (push) Successful in 17s
Details
2025-03-11 03:28:00 +01:00
72 changed files with 1286 additions and 2966 deletions
Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -1,3 +0,0 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}

769
bun.lock
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@reffuse/monorepo", "name": "@reffuse/monorepo",
"packageManager": "bun@1.2.13", "packageManager": "bun@1.2.2",
"private": true, "private": true,
"workspaces": [ "workspaces": [
"./packages/*" "./packages/*"
@@ -15,9 +15,10 @@
"clean:node": "rm -rf node_modules" "clean:node": "rm -rf node_modules"
}, },
"devDependencies": { "devDependencies": {
"npm-check-updates": "^18.0.1", "code-narrator": "^1.0.17",
"npm-check-updates": "^17.1.14",
"npm-sort": "^0.0.4", "npm-sort": "^0.0.4",
"turbo": "^2.5.3", "turbo": "^2.4.4",
"typescript": "^5.8.3" "typescript": "^5.7.3"
} }
} }

11
packages/effect-components/README.md
View File

@@ -1,11 +0,0 @@
# Reffuse
[Effect-TS](https://effect.website/) integration for React 19+ with the aim of integrating the Effect context system within React's component hierarchy, while avoiding touching React's internals.
This library is in early development. While it is (almost) feature complete and mostly usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are more than welcome.
Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.
## Peer dependencies
- `effect` 3.13+
- `react` & `@types/react` 19+

44
packages/effect-components/package.json
View File

@@ -1,44 +0,0 @@
{
"name": "effect-components",
"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": {
"types": "./dist/types/index.d.ts",
"default": "./dist/types/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"
},
"peerDependencies": {
"@types/react": "^19.0.0",
"effect": "^3.15.0",
"react": "^19.0.0"
},
"devDependencies": {
"@effect/language-service": "^0.23.3"
}
}

72
packages/effect-components/src/ReactComponent.ts
View File

@@ -1,72 +0,0 @@
import { Context, Effect, Function, Runtime, Scope, Tracer } from "effect"
import type { Mutable } from "effect/Types"
import * as React from "react"
import * as ReactHook from "./ReactHook.js"
export interface ReactComponent<E, R, P> {
(props: P): Effect.Effect<React.ReactNode, E, R>
readonly displayName?: string
}
export const nonReactiveTags = [Tracer.ParentSpan] as const
export const withDisplayName: {
<C extends ReactComponent<any, any, any>>(displayName: string): (self: C) => C
<C extends ReactComponent<any, any, any>>(self: C, displayName: string): C
} = Function.dual(2, <C extends ReactComponent<any, any, any>>(
self: C,
displayName: string,
): C => {
(self as Mutable<C>).displayName = displayName
return self
})
export const useFC: {
<E, R, P extends {} = {}>(
self: ReactComponent<E, R, P>,
options?: ReactHook.ScopeOptions,
): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
} = Effect.fnUntraced(function* <E, R, P extends {}>(
self: ReactComponent<E, R, P>,
options?: ReactHook.ScopeOptions,
) {
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
return React.useMemo(() => function ScopeProvider(props: P) {
const scope = Runtime.runSync(runtime)(ReactHook.useScope(options))
const FC = React.useMemo(() => {
const f = (props: P) => Runtime.runSync(runtime)(
Effect.provideService(self(props), Scope.Scope, scope)
)
if (self.displayName) f.displayName = self.displayName
return f
}, [scope])
return React.createElement(FC, props)
}, Array.from(
Context.omit(...nonReactiveTags)(runtime.context).unsafeMap.values()
))
})
export const use: {
<E, R, P extends {} = {}>(
self: ReactComponent<E, R, P>,
fn: (Component: React.FC<P>) => React.ReactNode,
options?: ReactHook.ScopeOptions,
): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
} = Effect.fnUntraced(function*(self, fn, options) {
return fn(yield* useFC(self, options))
})
export const withRuntime: {
<E, R, P extends {} = {}>(context: React.Context<Runtime.Runtime<R>>): (self: ReactComponent<E, R, P>) => React.FC<P>
<E, R, P extends {} = {}>(self: ReactComponent<E, R, P>, context: React.Context<Runtime.Runtime<R>>): React.FC<P>
} = Function.dual(2, <E, R, P extends {}>(
self: ReactComponent<E, R, P>,
context: React.Context<Runtime.Runtime<R>>,
): React.FC<P> => function WithRuntime(props) {
const runtime = React.useContext(context)
return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
})

317
packages/effect-components/src/ReactHook.ts
View File

@@ -1,317 +0,0 @@
import { type Context, Effect, ExecutionStrategy, Exit, type Layer, Option, pipe, PubSub, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
import * as React from "react"
import { SetStateAction } from "./types/index.js"
export interface ScopeOptions {
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
readonly finalizerExecutionMode?: "sync" | "fork"
}
export const useScope: {
(options?: ScopeOptions): Effect.Effect<Scope.Scope>
} = Effect.fnUntraced(function* (options?: ScopeOptions) {
const runtime = yield* Effect.runtime()
const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
Effect.all([Ref.make(true), makeScope(options)])
), [])
const [scope, setScope] = React.useState(initialScope)
React.useEffect(() => Runtime.runSync(runtime)(
Effect.if(isInitialRun, {
onTrue: () => Effect.as(
Ref.set(isInitialRun, false),
() => closeScope(scope, runtime, options),
),
onFalse: () => makeScope(options).pipe(
Effect.tap(scope => Effect.sync(() => setScope(scope))),
Effect.map(scope => () => closeScope(scope, runtime, options)),
),
})
), [])
return scope
})
const makeScope = (options?: ScopeOptions) => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
const closeScope = (
scope: Scope.CloseableScope,
runtime: Runtime.Runtime<never>,
options?: ScopeOptions,
) => {
switch (options?.finalizerExecutionMode ?? "sync") {
case "sync":
Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
break
case "fork":
Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
break
}
}
export const useMemo: {
<A, E, R>(
factory: () => Effect.Effect<A, E, R>,
deps: React.DependencyList,
): Effect.Effect<A, E, R>
} = Effect.fnUntraced(function* <A, E, R>(
factory: () => Effect.Effect<A, E, R>,
deps: React.DependencyList,
) {
const runtime = yield* Effect.runtime()
return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(factory())), deps)
})
export const useOnce: {
<A, E, R>(factory: () => Effect.Effect<A, E, R>): Effect.Effect<A, E, R>
} = Effect.fnUntraced(function* <A, E, R>(
factory: () => Effect.Effect<A, E, R>
) {
return yield* useMemo(factory, [])
})
export const useMemoLayer: {
<ROut, E, RIn>(
layer: Layer.Layer<ROut, E, RIn>
): Effect.Effect<Context.Context<ROut>, E, RIn>
} = Effect.fnUntraced(function* <ROut, E, RIn>(
layer: Layer.Layer<ROut, E, RIn>
) {
return yield* useMemo(() => Effect.provide(Effect.context<ROut>(), layer), [layer])
})
export const useCallbackSync: {
<Args extends unknown[], A, E, R>(
callback: (...args: Args) => Effect.Effect<A, E, R>,
deps: React.DependencyList,
): Effect.Effect<(...args: Args) => A, never, R>
} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
callback: (...args: Args) => Effect.Effect<A, E, R>,
deps: React.DependencyList,
) {
const runtime = yield* Effect.runtime<R>()
return React.useCallback((...args: Args) => Runtime.runSync(runtime)(callback(...args)), deps)
})
export const useCallbackPromise: {
<Args extends unknown[], A, E, R>(
callback: (...args: Args) => Effect.Effect<A, E, R>,
deps: React.DependencyList,
): Effect.Effect<(...args: Args) => Promise<A>, never, R>
} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
callback: (...args: Args) => Effect.Effect<A, E, R>,
deps: React.DependencyList,
) {
const runtime = yield* Effect.runtime<R>()
return React.useCallback((...args: Args) => Runtime.runPromise(runtime)(callback(...args)), deps)
})
export const useEffect: {
<E, R>(
effect: () => Effect.Effect<void, E, R>,
deps?: React.DependencyList,
options?: ScopeOptions,
): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
} = Effect.fnUntraced(function* <E, R>(
effect: () => Effect.Effect<void, E, R>,
deps?: React.DependencyList,
options?: ScopeOptions,
) {
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
React.useEffect(() => {
const { scope, exit } = Effect.Do.pipe(
Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
Runtime.runSync(runtime),
)
return () => {
switch (options?.finalizerExecutionMode ?? "sync") {
case "sync":
Runtime.runSync(runtime)(Scope.close(scope, exit))
break
case "fork":
Runtime.runFork(runtime)(Scope.close(scope, exit))
break
}
}
}, deps)
})
export const useLayoutEffect: {
<E, R>(
effect: () => Effect.Effect<void, E, R>,
deps?: React.DependencyList,
options?: ScopeOptions,
): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
} = Effect.fnUntraced(function* <E, R>(
effect: () => Effect.Effect<void, E, R>,
deps?: React.DependencyList,
options?: ScopeOptions,
) {
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
React.useLayoutEffect(() => {
const { scope, exit } = Effect.Do.pipe(
Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
Runtime.runSync(runtime),
)
return () => {
switch (options?.finalizerExecutionMode ?? "sync") {
case "sync":
Runtime.runSync(runtime)(Scope.close(scope, exit))
break
case "fork":
Runtime.runFork(runtime)(Scope.close(scope, exit))
break
}
}
}, deps)
})
export const useFork: {
<E, R>(
effect: () => Effect.Effect<void, E, R>,
deps?: React.DependencyList,
options?: Runtime.RunForkOptions & ScopeOptions,
): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
} = Effect.fnUntraced(function* <E, R>(
effect: () => Effect.Effect<void, E, R>,
deps?: React.DependencyList,
options?: Runtime.RunForkOptions & ScopeOptions,
) {
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
React.useEffect(() => {
const scope = Runtime.runSync(runtime)(options?.scope
? Scope.fork(options.scope, options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
: Scope.make(options?.finalizerExecutionStrategy)
)
Runtime.runFork(runtime)(Effect.provideService(effect(), Scope.Scope, scope), { ...options, scope })
return () => {
switch (options?.finalizerExecutionMode ?? "fork") {
case "sync":
Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
break
case "fork":
Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
break
}
}
}, deps)
})
export const useRefFromReactiveValue: {
<A>(value: A): Effect.Effect<SubscriptionRef.SubscriptionRef<A>>
} = Effect.fnUntraced(function*(value) {
const ref = yield* useOnce(() => SubscriptionRef.make(value))
yield* useEffect(() => Ref.set(ref, value), [value])
return ref
})
export const useSubscribeRefs: {
<const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
...refs: Refs
): Effect.Effect<{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }>
} = Effect.fnUntraced(function* <const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
...refs: Refs
) {
const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() =>
Effect.all(refs as readonly SubscriptionRef.SubscriptionRef<any>[])
))
yield* useFork(() => pipe(
refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
streams => Stream.zipLatestAll(...streams),
Stream.runForEach(v =>
Effect.sync(() => setReactStateValue(v))
),
), refs)
return reactStateValue as any
})
export const useRefState: {
<A>(
ref: SubscriptionRef.SubscriptionRef<A>
): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>]>
} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() => ref))
yield* useFork(() => Stream.runForEach(
Stream.changesWith(ref.changes, (x, y) => x === y),
v => Effect.sync(() => setReactStateValue(v)),
), [ref])
const setValue = yield* useCallbackSync((setStateAction: React.SetStateAction<A>) =>
Ref.update(ref, prevState =>
SetStateAction.value(setStateAction, prevState)
),
[ref])
return [reactStateValue, setValue]
})
export const useStreamFromReactiveValues: {
<const A extends React.DependencyList>(
values: A
): Effect.Effect<Stream.Stream<A>, never, Scope.Scope>
} = Effect.fnUntraced(function* <const A extends React.DependencyList>(values: A) {
const { latest, pubsub, stream } = yield* useOnce(() => Effect.Do.pipe(
Effect.bind("latest", () => Ref.make(values)),
Effect.bind("pubsub", () => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown)),
Effect.let("stream", ({ latest, pubsub }) => latest.pipe(
Effect.flatMap(a => Effect.map(
Stream.fromPubSub(pubsub, { scoped: true }),
s => Stream.concat(Stream.make(a), s),
)),
Stream.unwrapScoped,
)),
))
yield* useEffect(() => Ref.set(latest, values).pipe(
Effect.andThen(PubSub.publish(pubsub, values)),
Effect.unlessEffect(PubSub.isShutdown(pubsub)),
), values)
return stream
})
export const useSubscribeStream: {
<A, E, R>(
stream: Stream.Stream<A, E, R>
): Effect.Effect<Option.Option<A>, never, R>
<A extends NonNullable<unknown>, E, R>(
stream: Stream.Stream<A, E, R>,
initialValue: A,
): Effect.Effect<Option.Some<A>, never, R>
} = Effect.fnUntraced(function* <A extends NonNullable<unknown>, E, R>(
stream: Stream.Stream<A, E, R>,
initialValue?: A,
) {
const [reactStateValue, setReactStateValue] = React.useState(
React.useMemo(() => initialValue
? Option.some(initialValue)
: Option.none(),
[])
)
yield* useFork(() => Stream.runForEach(
Stream.changesWith(stream, (x, y) => x === y),
v => Effect.sync(() => setReactStateValue(Option.some(v))),
), [stream])
return reactStateValue as Option.Some<A>
})

47
packages/effect-components/src/ReactManagedRuntime.ts
View File

@@ -1,47 +0,0 @@
import { Effect, type Layer, ManagedRuntime, type Runtime } from "effect"
import * as React from "react"
export interface ReactManagedRuntime<R, ER> {
readonly runtime: ManagedRuntime.ManagedRuntime<R, ER>
readonly context: React.Context<Runtime.Runtime<R>>
}
export const make = <R, ER>(
layer: Layer.Layer<R, ER>,
memoMap?: Layer.MemoMap,
): ReactManagedRuntime<R, ER> => ({
runtime: ManagedRuntime.make(layer, memoMap),
context: React.createContext<Runtime.Runtime<R>>(null!),
})
export interface AsyncProviderProps<R, ER> extends React.SuspenseProps {
readonly runtime: ReactManagedRuntime<R, ER>
readonly children?: React.ReactNode
}
export function AsyncProvider<R, ER>(
{ runtime, children, ...suspenseProps }: AsyncProviderProps<R, ER>
): React.ReactNode {
const promise = React.useMemo(() => Effect.runPromise(runtime.runtime.runtimeEffect), [runtime])
return React.createElement(
React.Suspense,
suspenseProps,
React.createElement(AsyncProviderInner<R, ER>, { runtime, promise, children }),
)
}
interface AsyncProviderInnerProps<R, ER> {
readonly runtime: ReactManagedRuntime<R, ER>
readonly promise: Promise<Runtime.Runtime<R>>
readonly children?: React.ReactNode
}
function AsyncProviderInner<R, ER>(
{ runtime, promise, children }: AsyncProviderInnerProps<R, ER>
): React.ReactNode {
const value = React.use(promise)
return React.createElement(runtime.context, { value }, children)
}

3
packages/effect-components/src/index.ts
View File

@@ -1,3 +0,0 @@
export * as ReactComponent from "./ReactComponent.js"
export * as ReactHook from "./ReactHook.js"
export * as ReactManagedRuntime from "./ReactManagedRuntime.js"

99
packages/effect-components/src/types/PropertyPath.ts
View File

@@ -1,99 +0,0 @@
import { Array, Function, Option, Predicate } from "effect"
type Prev = readonly [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
export type Paths<T, D extends number = 5, Seen = never> = [] | (
D extends never ? [] :
T extends Seen ? [] :
T extends readonly any[] ? ArrayPaths<T, D, Seen | T> :
T extends object ? ObjectPaths<T, D, Seen | T> :
never
)
export type ArrayPaths<T extends readonly any[], D extends number, Seen> = {
[K in keyof T as K extends number ? K : never]:
| [K]
| [K, ...Paths<T[K], Prev[D], Seen>]
} extends infer O
? O[keyof O]
: never
export type ObjectPaths<T extends object, D extends number, Seen> = {
[K in keyof T as K extends string | number | symbol ? K : never]-?:
NonNullable<T[K]> extends infer V
? [K] | [K, ...Paths<V, Prev[D], Seen>]
: never
} extends infer O
? O[keyof O]
: never
export type ValueFromPath<T, P extends any[]> = P extends [infer Head, ...infer Tail]
? Head extends keyof T
? ValueFromPath<T[Head], Tail>
: T extends readonly any[]
? Head extends number
? ValueFromPath<T[number], Tail>
: never
: never
: T
export type AnyKey = string | number | symbol
export type AnyPath = readonly AnyKey[]
export const unsafeGet: {
<T, const P extends Paths<T>>(path: P): (self: T) => ValueFromPath<T, P>
<T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P>
} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P> =>
path.reduce((acc: any, key: any) => acc?.[key], self)
)
export const get: {
<T, const P extends Paths<T>>(path: P): (self: T) => Option.Option<ValueFromPath<T, P>>
<T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>>
} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>> =>
path.reduce(
(acc: Option.Option<any>, key: any): Option.Option<any> => Option.isSome(acc)
? Predicate.hasProperty(acc.value, key)
? Option.some(acc.value[key])
: Option.none()
: acc,
Option.some(self),
)
)
export const immutableSet: {
<T, const P extends Paths<T>>(path: P, value: ValueFromPath<T, P>): (self: T) => ValueFromPath<T, P>
<T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T>
} = Function.dual(3, <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T> => {
const key = Array.head(path as AnyPath)
if (Option.isNone(key))
return Option.some(value as T)
if (!Predicate.hasProperty(self, key.value))
return Option.none()
const child = immutableSet<any, any>(self[key.value], Option.getOrThrow(Array.tail(path as AnyPath)), value)
if (Option.isNone(child))
return child
if (Array.isArray(self))
return typeof key.value === "number"
? Option.some([
...self.slice(0, key.value),
child.value,
...self.slice(key.value + 1),
] as T)
: Option.none()
if (typeof self === "object")
return Option.some(
Object.assign(
Object.create(Object.getPrototypeOf(self)),
{ ...self, [key.value]: child.value },
)
)
return Option.none()
})

100
packages/effect-components/src/types/SubscriptionSubRef.ts
View File

@@ -1,100 +0,0 @@
import { Effect, Effectable, Option, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
import * as PropertyPath from "./PropertyPath.js"
export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("reffuse/types/SubscriptionSubRef")
export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
export interface SubscriptionSubRef<in out A, in out B> extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
readonly parent: SubscriptionRef.SubscriptionRef<B>
readonly [Unify.typeSymbol]?: unknown
readonly [Unify.unifySymbol]?: SubscriptionSubRefUnify<this>
readonly [Unify.ignoreSymbol]?: SubscriptionSubRefUnifyIgnore
}
export declare namespace SubscriptionSubRef {
export interface Variance<in out A, in out B> {
readonly [SubscriptionSubRefTypeId]: {
readonly _A: Types.Invariant<A>
readonly _B: Types.Invariant<B>
}
}
}
export interface SubscriptionSubRefUnify<A extends { [Unify.typeSymbol]?: any }> extends SubscriptionRef.SubscriptionRefUnify<A> {
SubscriptionSubRef?: () => Extract<A[Unify.typeSymbol], SubscriptionSubRef<any, any>>
}
export interface SubscriptionSubRefUnifyIgnore extends SubscriptionRef.SubscriptionRefUnifyIgnore {
SubscriptionRef?: true
}
const refVariance = { _A: (_: any) => _ }
const synchronizedRefVariance = { _A: (_: any) => _ }
const subscriptionRefVariance = { _A: (_: any) => _ }
const subscriptionSubRefVariance = { _A: (_: any) => _, _B: (_: any) => _ }
class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> implements SubscriptionSubRef<A, B> {
readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
readonly [Ref.RefTypeId] = refVariance
readonly [SynchronizedRef.SynchronizedRefTypeId] = synchronizedRefVariance
readonly [SubscriptionRef.SubscriptionRefTypeId] = subscriptionRefVariance
readonly [SubscriptionSubRefTypeId] = subscriptionSubRefVariance
readonly get: Effect.Effect<A>
constructor(
readonly parent: SubscriptionRef.SubscriptionRef<B>,
readonly getter: (parentValue: B) => A,
readonly setter: (parentValue: B, value: A) => B,
) {
super()
this.get = Effect.map(Ref.get(this.parent), this.getter)
}
commit() {
return this.get
}
get changes(): Stream.Stream<A> {
return this.get.pipe(
Effect.map(a => this.parent.changes.pipe(
Stream.map(this.getter),
s => Stream.concat(Stream.make(a), s),
)),
Stream.unwrap,
)
}
modify<C>(f: (a: A) => readonly [C, A]): Effect.Effect<C> {
return this.modifyEffect(a => Effect.succeed(f(a)))
}
modifyEffect<C, E, R>(f: (a: A) => Effect.Effect<readonly [C, A], E, R>): Effect.Effect<C, E, R> {
return Effect.Do.pipe(
Effect.bind("b", () => Ref.get(this.parent)),
Effect.bind("ca", ({ b }) => f(this.getter(b))),
Effect.tap(({ b, ca: [, a] }) => Ref.set(this.parent, this.setter(b, a))),
Effect.map(({ ca: [c] }) => c),
)
}
}
export const makeFromGetSet = <A, B>(
parent: SubscriptionRef.SubscriptionRef<B>,
getter: (parentValue: B) => A,
setter: (parentValue: B, value: A) => B,
): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, getter, setter)
export const makeFromPath = <B, const P extends PropertyPath.Paths<B>>(
parent: SubscriptionRef.SubscriptionRef<B>,
path: P,
): SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B> => new SubscriptionSubRefImpl(
parent,
parentValue => Option.getOrThrow(PropertyPath.get(parentValue, path)),
(parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
)

3
packages/effect-components/src/types/index.ts
View File

@@ -1,3 +0,0 @@
export * as PropertyPath from "./PropertyPath.js"
export * as SetStateAction from "./SetStateAction.js"
export * as SubscriptionSubRef from "./SubscriptionSubRef.js"

33
packages/effect-components/tsconfig.json
View File

@@ -1,33 +0,0 @@
{
"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"]
}

46
packages/example/package.json
View File

@@ -11,41 +11,41 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.26.0", "@eslint/js": "^9.21.0",
"@tanstack/react-router": "^1.120.3", "@tanstack/react-router": "^1.112.7",
"@tanstack/react-router-devtools": "^1.120.3", "@tanstack/router-devtools": "^1.112.7",
"@tanstack/router-plugin": "^1.120.3", "@tanstack/router-plugin": "^1.112.7",
"@thilawyn/thilaschema": "^0.1.4", "@thilawyn/thilaschema": "^0.1.4",
"@types/react": "^19.1.4", "@types/react": "^19.0.10",
"@types/react-dom": "^19.1.5", "@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.4.1", "@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.26.0", "eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20", "eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.1.0", "globals": "^16.0.0",
"react": "^19.1.0", "react": "^19.0.0",
"react-dom": "^19.1.0", "react-dom": "^19.0.0",
"typescript-eslint": "^8.32.1", "typescript-eslint": "^8.26.0",
"vite": "^6.3.5" "vite": "^6.2.0"
}, },
"dependencies": { "dependencies": {
"@effect/platform": "^0.82.1", "@effect/platform": "^0.77.6",
"@effect/platform-browser": "^0.62.1", "@effect/platform-browser": "^0.56.6",
"@radix-ui/themes": "^3.2.1", "@radix-ui/themes": "^3.2.1",
"@reffuse/extension-lazyref": "workspace:*", "@reffuse/extension-lazyref": "workspace:*",
"@reffuse/extension-query": "workspace:*", "@reffuse/extension-query": "workspace:*",
"@typed/async-data": "^0.13.1", "@typed/async-data": "^0.13.1",
"@typed/id": "^0.17.2", "@typed/id": "^0.17.1",
"@typed/lazy-ref": "^0.3.3", "@typed/lazy-ref": "^0.3.3",
"effect": "^3.15.1", "effect": "^3.13.6",
"lucide-react": "^0.510.0", "lucide-react": "^0.477.0",
"mobx": "^6.13.7", "mobx": "^6.13.6",
"reffuse": "workspace:*" "reffuse": "workspace:*"
}, },
"overrides": { "overrides": {
"effect": "^3.15.1", "effect": "^3.13.6",
"@effect/platform": "^0.82.1", "@effect/platform": "^0.77.6",
"@effect/platform-browser": "^0.62.1", "@effect/platform-browser": "^0.56.6",
"@typed/lazy-ref": "^0.3.3", "@typed/lazy-ref": "^0.3.3",
"@typed/async-data": "^0.13.1" "@typed/async-data": "^0.13.1"
} }

57
packages/example/src/VQueryErrorHandler.tsx
View File

@@ -1,57 +0,0 @@
import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
import { Cause, Console, Effect, Either, flow, Match, Option, Stream } from "effect"
import { useState } from "react"
import { R } from "./reffuse"
import { AppQueryErrorHandler } from "./services"
export function VQueryErrorHandler() {
const [open, setOpen] = useState(false)
const error = R.useSubscribeStream(
R.useMemo(() => AppQueryErrorHandler.AppQueryErrorHandler.pipe(
Effect.map(handler => handler.errors.pipe(
Stream.changes,
Stream.tap(Console.error),
Stream.tap(() => Effect.sync(() => setOpen(true))),
))
), [])
)
if (Option.isNone(error))
return <></>
return (
<AlertDialog.Root open={open}>
<AlertDialog.Content maxWidth="450px">
<AlertDialog.Title>Error</AlertDialog.Title>
<AlertDialog.Description size="2">
{Either.match(Cause.failureOrCause(error.value), {
onLeft: flow(
Match.value,
Match.tag("RequestError", () => <Text>HTTP request error</Text>),
Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
Match.exhaustive,
),
onRight: flow(
Cause.dieOption,
Option.match({
onSome: () => <Text>Unrecoverable defect</Text>,
onNone: () => <Text>Unknown error</Text>,
}),
),
})}
</AlertDialog.Description>
<Flex gap="3" mt="4" justify="end">
<AlertDialog.Action>
<Button variant="solid" color="red" onClick={() => setOpen(false)}>
Ok
</Button>
</AlertDialog.Action>
</Flex>
</AlertDialog.Content>
</AlertDialog.Root>
)
}

10
packages/example/src/domain/Todo.ts
View File

@@ -1,5 +1,6 @@
import { ThSchema } from "@thilawyn/thilaschema" import { ThSchema } from "@thilawyn/thilaschema"
import { Schema } from "effect" import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Effect, Schema } from "effect"
export class Todo extends Schema.Class<Todo>("Todo")({ export class Todo extends Schema.Class<Todo>("Todo")({
@@ -17,4 +18,9 @@ export const TodoFromJsonStruct = Schema.Struct({
ThSchema.assertEncodedJsonifiable ThSchema.assertEncodedJsonifiable
) )
export const TodoFromJson = Schema.compose(TodoFromJsonStruct, Todo) export const TodoFromJson = TodoFromJsonStruct.pipe(Schema.compose(Todo))
export const generateUniqueID = makeUuid4.pipe(
Effect.provide(GetRandomValues.CryptoRandom)
)

9
packages/example/src/main.tsx
View File

@@ -5,14 +5,11 @@ import { Layer } from "effect"
import { StrictMode } from "react" import { StrictMode } from "react"
import { createRoot } from "react-dom/client" import { createRoot } from "react-dom/client"
import { ReffuseRuntime } from "reffuse" import { ReffuseRuntime } from "reffuse"
import { RootContext } from "./reffuse" import { GlobalContext } from "./reffuse"
import { routeTree } from "./routeTree.gen" import { routeTree } from "./routeTree.gen"
import { AppQueryClient, AppQueryErrorHandler } from "./services"
const layer = Layer.empty.pipe( const layer = Layer.empty.pipe(
Layer.provideMerge(AppQueryClient.AppQueryClient.Default),
Layer.provideMerge(AppQueryErrorHandler.AppQueryErrorHandler.Default),
Layer.provideMerge(Clipboard.layer), Layer.provideMerge(Clipboard.layer),
Layer.provideMerge(Geolocation.layer), Layer.provideMerge(Geolocation.layer),
Layer.provideMerge(Permissions.layer), Layer.provideMerge(Permissions.layer),
@@ -31,9 +28,9 @@ declare module "@tanstack/react-router" {
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<StrictMode> <StrictMode>
<ReffuseRuntime.Provider> <ReffuseRuntime.Provider>
<RootContext.Provider layer={layer}> <GlobalContext.Provider layer={layer}>
<RouterProvider router={router} /> <RouterProvider router={router} />
</RootContext.Provider> </GlobalContext.Provider>
</ReffuseRuntime.Provider> </ReffuseRuntime.Provider>
</StrictMode> </StrictMode>
) )

4
packages/example/src/query/reffuse.ts
View File

@@ -1,10 +1,10 @@
import { RootReffuse } from "@/reffuse" import { GlobalReffuse } from "@/reffuse"
import { Reffuse, ReffuseContext } from "reffuse" import { Reffuse, ReffuseContext } from "reffuse"
import { Uuid4Query } from "./services" import { Uuid4Query } from "./services"
export const QueryContext = ReffuseContext.make<Uuid4Query.Uuid4Query>() export const QueryContext = ReffuseContext.make<Uuid4Query.Uuid4Query>()
export const R = new class QueryReffuse extends RootReffuse.pipe( export const R = new class QueryReffuse extends GlobalReffuse.pipe(
Reffuse.withContexts(QueryContext) Reffuse.withContexts(QueryContext)
) {} ) {}

7
packages/example/src/query/services/Uuid4Query.ts
View File

@@ -1,11 +1,12 @@
import { QueryRunner } from "@reffuse/extension-query" import { HttpClientError } from "@effect/platform"
import { QueryService } from "@reffuse/extension-query"
import { ParseResult, Schema } from "effect" import { ParseResult, Schema } from "effect"
export const Result = Schema.Array(Schema.String) export const Result = Schema.Array(Schema.String)
export class Uuid4Query extends QueryRunner.Tag("Uuid4Query")<Uuid4Query, export class Uuid4Query extends QueryService.Tag("Uuid4Query")<Uuid4Query,
readonly ["uuid4", number], readonly ["uuid4", number],
typeof Result.Type, typeof Result.Type,
ParseResult.ParseError HttpClientError.HttpClientError | ParseResult.ParseError
>() {} >() {}

6
packages/example/src/query/views/Uuid4QueryService.tsx
View File

@@ -5,10 +5,10 @@ import { Uuid4Query } from "../services"
export function Uuid4QueryService() { export function Uuid4QueryService() {
const runFork = R.useRunFork() const runSync = R.useRunSync()
const query = R.useMemo(() => Uuid4Query.Uuid4Query, []) const query = R.useMemo(() => Uuid4Query.Uuid4Query, [])
const [state] = R.useSubscribeRefs(query.stateRef) const [state] = R.useRefState(query.state)
return ( return (
@@ -25,7 +25,7 @@ export function Uuid4QueryService() {
})} })}
</Text> </Text>
<Button onClick={() => runFork(query.forkRefresh)}>Refresh</Button> <Button onClick={() => runSync(query.refresh)}>Refresh</Button>
</Flex> </Flex>
</Container> </Container>
) )

11
packages/example/src/reffuse.ts
View File

@@ -3,22 +3,19 @@ import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
import { LazyRefExtension } from "@reffuse/extension-lazyref" import { LazyRefExtension } from "@reffuse/extension-lazyref"
import { QueryExtension } from "@reffuse/extension-query" import { QueryExtension } from "@reffuse/extension-query"
import { Reffuse, ReffuseContext } from "reffuse" import { Reffuse, ReffuseContext } from "reffuse"
import { AppQueryClient, AppQueryErrorHandler } from "./services"
export const RootContext = ReffuseContext.make< export const GlobalContext = ReffuseContext.make<
| AppQueryClient.AppQueryClient
| AppQueryErrorHandler.AppQueryErrorHandler
| Clipboard.Clipboard | Clipboard.Clipboard
| Geolocation.Geolocation | Geolocation.Geolocation
| Permissions.Permissions | Permissions.Permissions
| HttpClient.HttpClient | HttpClient.HttpClient
>() >()
export class RootReffuse extends Reffuse.Reffuse.pipe( export class GlobalReffuse extends Reffuse.Reffuse.pipe(
Reffuse.withExtension(LazyRefExtension), Reffuse.withExtension(LazyRefExtension),
Reffuse.withExtension(QueryExtension), Reffuse.withExtension(QueryExtension),
Reffuse.withContexts(RootContext), Reffuse.withContexts(GlobalContext),
) {} ) {}
export const R = new RootReffuse() export const R = new GlobalReffuse()

106
packages/example/src/routeTree.gen.ts
View File

@@ -11,28 +11,18 @@
// Import Routes // Import Routes
import { Route as rootRoute } from './routes/__root' import { Route as rootRoute } from './routes/__root'
import { Route as TodosImport } from './routes/todos'
import { Route as TimeImport } from './routes/time' import { Route as TimeImport } from './routes/time'
import { Route as TestsImport } from './routes/tests' import { Route as TestsImport } from './routes/tests'
import { Route as PromiseImport } from './routes/promise' import { Route as PromiseImport } from './routes/promise'
import { Route as LazyrefImport } from './routes/lazyref' import { Route as LazyrefImport } from './routes/lazyref'
import { Route as EffectComponentTestsImport } from './routes/effect-component-tests'
import { Route as CountImport } from './routes/count' import { Route as CountImport } from './routes/count'
import { Route as BlankImport } from './routes/blank' import { Route as BlankImport } from './routes/blank'
import { Route as IndexImport } from './routes/index' import { Route as IndexImport } from './routes/index'
import { Route as StreamsPullImport } from './routes/streams/pull'
import { Route as QueryUsequeryImport } from './routes/query/usequery' import { Route as QueryUsequeryImport } from './routes/query/usequery'
import { Route as QueryUsemutationImport } from './routes/query/usemutation'
import { Route as QueryServiceImport } from './routes/query/service' import { Route as QueryServiceImport } from './routes/query/service'
// Create/Update Routes // Create/Update Routes
const TodosRoute = TodosImport.update({
id: '/todos',
path: '/todos',
getParentRoute: () => rootRoute,
} as any)
const TimeRoute = TimeImport.update({ const TimeRoute = TimeImport.update({
id: '/time', id: '/time',
path: '/time', path: '/time',
@@ -57,12 +47,6 @@ const LazyrefRoute = LazyrefImport.update({
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
} as any) } as any)
const EffectComponentTestsRoute = EffectComponentTestsImport.update({
id: '/effect-component-tests',
path: '/effect-component-tests',
getParentRoute: () => rootRoute,
} as any)
const CountRoute = CountImport.update({ const CountRoute = CountImport.update({
id: '/count', id: '/count',
path: '/count', path: '/count',
@@ -81,24 +65,12 @@ const IndexRoute = IndexImport.update({
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
} as any) } as any)
const StreamsPullRoute = StreamsPullImport.update({
id: '/streams/pull',
path: '/streams/pull',
getParentRoute: () => rootRoute,
} as any)
const QueryUsequeryRoute = QueryUsequeryImport.update({ const QueryUsequeryRoute = QueryUsequeryImport.update({
id: '/query/usequery', id: '/query/usequery',
path: '/query/usequery', path: '/query/usequery',
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
} as any) } as any)
const QueryUsemutationRoute = QueryUsemutationImport.update({
id: '/query/usemutation',
path: '/query/usemutation',
getParentRoute: () => rootRoute,
} as any)
const QueryServiceRoute = QueryServiceImport.update({ const QueryServiceRoute = QueryServiceImport.update({
id: '/query/service', id: '/query/service',
path: '/query/service', path: '/query/service',
@@ -130,13 +102,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof CountImport preLoaderRoute: typeof CountImport
parentRoute: typeof rootRoute parentRoute: typeof rootRoute
} }
'/effect-component-tests': {
id: '/effect-component-tests'
path: '/effect-component-tests'
fullPath: '/effect-component-tests'
preLoaderRoute: typeof EffectComponentTestsImport
parentRoute: typeof rootRoute
}
'/lazyref': { '/lazyref': {
id: '/lazyref' id: '/lazyref'
path: '/lazyref' path: '/lazyref'
@@ -165,13 +130,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof TimeImport preLoaderRoute: typeof TimeImport
parentRoute: typeof rootRoute parentRoute: typeof rootRoute
} }
'/todos': {
id: '/todos'
path: '/todos'
fullPath: '/todos'
preLoaderRoute: typeof TodosImport
parentRoute: typeof rootRoute
}
'/query/service': { '/query/service': {
id: '/query/service' id: '/query/service'
path: '/query/service' path: '/query/service'
@@ -179,13 +137,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof QueryServiceImport preLoaderRoute: typeof QueryServiceImport
parentRoute: typeof rootRoute parentRoute: typeof rootRoute
} }
'/query/usemutation': {
id: '/query/usemutation'
path: '/query/usemutation'
fullPath: '/query/usemutation'
preLoaderRoute: typeof QueryUsemutationImport
parentRoute: typeof rootRoute
}
'/query/usequery': { '/query/usequery': {
id: '/query/usequery' id: '/query/usequery'
path: '/query/usequery' path: '/query/usequery'
@@ -193,13 +144,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof QueryUsequeryImport preLoaderRoute: typeof QueryUsequeryImport
parentRoute: typeof rootRoute parentRoute: typeof rootRoute
} }
'/streams/pull': {
id: '/streams/pull'
path: '/streams/pull'
fullPath: '/streams/pull'
preLoaderRoute: typeof StreamsPullImport
parentRoute: typeof rootRoute
}
} }
} }
@@ -209,32 +153,24 @@ export interface FileRoutesByFullPath {
'/': typeof IndexRoute '/': typeof IndexRoute
'/blank': typeof BlankRoute '/blank': typeof BlankRoute
'/count': typeof CountRoute '/count': typeof CountRoute
'/effect-component-tests': typeof EffectComponentTestsRoute
'/lazyref': typeof LazyrefRoute '/lazyref': typeof LazyrefRoute
'/promise': typeof PromiseRoute '/promise': typeof PromiseRoute
'/tests': typeof TestsRoute '/tests': typeof TestsRoute
'/time': typeof TimeRoute '/time': typeof TimeRoute
'/todos': typeof TodosRoute
'/query/service': typeof QueryServiceRoute '/query/service': typeof QueryServiceRoute
'/query/usemutation': typeof QueryUsemutationRoute
'/query/usequery': typeof QueryUsequeryRoute '/query/usequery': typeof QueryUsequeryRoute
'/streams/pull': typeof StreamsPullRoute
} }
export interface FileRoutesByTo { export interface FileRoutesByTo {
'/': typeof IndexRoute '/': typeof IndexRoute
'/blank': typeof BlankRoute '/blank': typeof BlankRoute
'/count': typeof CountRoute '/count': typeof CountRoute
'/effect-component-tests': typeof EffectComponentTestsRoute
'/lazyref': typeof LazyrefRoute '/lazyref': typeof LazyrefRoute
'/promise': typeof PromiseRoute '/promise': typeof PromiseRoute
'/tests': typeof TestsRoute '/tests': typeof TestsRoute
'/time': typeof TimeRoute '/time': typeof TimeRoute
'/todos': typeof TodosRoute
'/query/service': typeof QueryServiceRoute '/query/service': typeof QueryServiceRoute
'/query/usemutation': typeof QueryUsemutationRoute
'/query/usequery': typeof QueryUsequeryRoute '/query/usequery': typeof QueryUsequeryRoute
'/streams/pull': typeof StreamsPullRoute
} }
export interface FileRoutesById { export interface FileRoutesById {
@@ -242,16 +178,12 @@ export interface FileRoutesById {
'/': typeof IndexRoute '/': typeof IndexRoute
'/blank': typeof BlankRoute '/blank': typeof BlankRoute
'/count': typeof CountRoute '/count': typeof CountRoute
'/effect-component-tests': typeof EffectComponentTestsRoute
'/lazyref': typeof LazyrefRoute '/lazyref': typeof LazyrefRoute
'/promise': typeof PromiseRoute '/promise': typeof PromiseRoute
'/tests': typeof TestsRoute '/tests': typeof TestsRoute
'/time': typeof TimeRoute '/time': typeof TimeRoute
'/todos': typeof TodosRoute
'/query/service': typeof QueryServiceRoute '/query/service': typeof QueryServiceRoute
'/query/usemutation': typeof QueryUsemutationRoute
'/query/usequery': typeof QueryUsequeryRoute '/query/usequery': typeof QueryUsequeryRoute
'/streams/pull': typeof StreamsPullRoute
} }
export interface FileRouteTypes { export interface FileRouteTypes {
@@ -260,46 +192,34 @@ export interface FileRouteTypes {
| '/' | '/'
| '/blank' | '/blank'
| '/count' | '/count'
| '/effect-component-tests'
| '/lazyref' | '/lazyref'
| '/promise' | '/promise'
| '/tests' | '/tests'
| '/time' | '/time'
| '/todos'
| '/query/service' | '/query/service'
| '/query/usemutation'
| '/query/usequery' | '/query/usequery'
| '/streams/pull'
fileRoutesByTo: FileRoutesByTo fileRoutesByTo: FileRoutesByTo
to: to:
| '/' | '/'
| '/blank' | '/blank'
| '/count' | '/count'
| '/effect-component-tests'
| '/lazyref' | '/lazyref'
| '/promise' | '/promise'
| '/tests' | '/tests'
| '/time' | '/time'
| '/todos'
| '/query/service' | '/query/service'
| '/query/usemutation'
| '/query/usequery' | '/query/usequery'
| '/streams/pull'
id: id:
| '__root__' | '__root__'
| '/' | '/'
| '/blank' | '/blank'
| '/count' | '/count'
| '/effect-component-tests'
| '/lazyref' | '/lazyref'
| '/promise' | '/promise'
| '/tests' | '/tests'
| '/time' | '/time'
| '/todos'
| '/query/service' | '/query/service'
| '/query/usemutation'
| '/query/usequery' | '/query/usequery'
| '/streams/pull'
fileRoutesById: FileRoutesById fileRoutesById: FileRoutesById
} }
@@ -307,32 +227,24 @@ export interface RootRouteChildren {
IndexRoute: typeof IndexRoute IndexRoute: typeof IndexRoute
BlankRoute: typeof BlankRoute BlankRoute: typeof BlankRoute
CountRoute: typeof CountRoute CountRoute: typeof CountRoute
EffectComponentTestsRoute: typeof EffectComponentTestsRoute
LazyrefRoute: typeof LazyrefRoute LazyrefRoute: typeof LazyrefRoute
PromiseRoute: typeof PromiseRoute PromiseRoute: typeof PromiseRoute
TestsRoute: typeof TestsRoute TestsRoute: typeof TestsRoute
TimeRoute: typeof TimeRoute TimeRoute: typeof TimeRoute
TodosRoute: typeof TodosRoute
QueryServiceRoute: typeof QueryServiceRoute QueryServiceRoute: typeof QueryServiceRoute
QueryUsemutationRoute: typeof QueryUsemutationRoute
QueryUsequeryRoute: typeof QueryUsequeryRoute QueryUsequeryRoute: typeof QueryUsequeryRoute
StreamsPullRoute: typeof StreamsPullRoute
} }
const rootRouteChildren: RootRouteChildren = { const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute, IndexRoute: IndexRoute,
BlankRoute: BlankRoute, BlankRoute: BlankRoute,
CountRoute: CountRoute, CountRoute: CountRoute,
EffectComponentTestsRoute: EffectComponentTestsRoute,
LazyrefRoute: LazyrefRoute, LazyrefRoute: LazyrefRoute,
PromiseRoute: PromiseRoute, PromiseRoute: PromiseRoute,
TestsRoute: TestsRoute, TestsRoute: TestsRoute,
TimeRoute: TimeRoute, TimeRoute: TimeRoute,
TodosRoute: TodosRoute,
QueryServiceRoute: QueryServiceRoute, QueryServiceRoute: QueryServiceRoute,
QueryUsemutationRoute: QueryUsemutationRoute,
QueryUsequeryRoute: QueryUsequeryRoute, QueryUsequeryRoute: QueryUsequeryRoute,
StreamsPullRoute: StreamsPullRoute,
} }
export const routeTree = rootRoute export const routeTree = rootRoute
@@ -348,16 +260,12 @@ export const routeTree = rootRoute
"/", "/",
"/blank", "/blank",
"/count", "/count",
"/effect-component-tests",
"/lazyref", "/lazyref",
"/promise", "/promise",
"/tests", "/tests",
"/time", "/time",
"/todos",
"/query/service", "/query/service",
"/query/usemutation", "/query/usequery"
"/query/usequery",
"/streams/pull"
] ]
}, },
"/": { "/": {
@@ -369,9 +277,6 @@ export const routeTree = rootRoute
"/count": { "/count": {
"filePath": "count.tsx" "filePath": "count.tsx"
}, },
"/effect-component-tests": {
"filePath": "effect-component-tests.tsx"
},
"/lazyref": { "/lazyref": {
"filePath": "lazyref.tsx" "filePath": "lazyref.tsx"
}, },
@@ -384,20 +289,11 @@ export const routeTree = rootRoute
"/time": { "/time": {
"filePath": "time.tsx" "filePath": "time.tsx"
}, },
"/todos": {
"filePath": "todos.tsx"
},
"/query/service": { "/query/service": {
"filePath": "query/service.tsx" "filePath": "query/service.tsx"
}, },
"/query/usemutation": {
"filePath": "query/usemutation.tsx"
},
"/query/usequery": { "/query/usequery": {
"filePath": "query/usequery.tsx" "filePath": "query/usequery.tsx"
},
"/streams/pull": {
"filePath": "streams/pull.tsx"
} }
} }
} }

5
packages/example/src/routes/__root.tsx
View File

@@ -1,7 +1,6 @@
import { VQueryErrorHandler } from "@/VQueryErrorHandler"
import { Container, Flex, Theme } from "@radix-ui/themes" import { Container, Flex, Theme } from "@radix-ui/themes"
import { createRootRoute, Link, Outlet } from "@tanstack/react-router" import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools" import { TanStackRouterDevtools } from "@tanstack/router-devtools"
import "@radix-ui/themes/styles.css" import "@radix-ui/themes/styles.css"
import "../index.css" import "../index.css"
@@ -27,8 +26,6 @@ function Root() {
</Container> </Container>
<Outlet /> <Outlet />
<VQueryErrorHandler />
<TanStackRouterDevtools /> <TanStackRouterDevtools />
</Theme> </Theme>
) )

9
packages/example/src/routes/count.tsx
View File

@@ -1,6 +1,6 @@
import { R } from "@/reffuse" import { R } from "@/reffuse"
import { createFileRoute } from "@tanstack/react-router" import { createFileRoute } from "@tanstack/react-router"
import { Effect, Ref } from "effect" import { Ref } from "effect"
export const Route = createFileRoute("/count")({ export const Route = createFileRoute("/count")({
@@ -11,13 +11,14 @@ function Count() {
const runSync = R.useRunSync() const runSync = R.useRunSync()
const countRef = R.useRef(() => Effect.succeed(0)) const countRef = R.useRef(0)
const [count] = R.useSubscribeRefs(countRef) const [count] = R.useRefState(countRef)
return ( return (
<div className="container mx-auto"> <div className="container mx-auto">
<button onClick={() => runSync(Ref.update(countRef, count => count + 1))}> {/* <button onClick={() => setCount((count) => count + 1)}> */}
<button onClick={() => Ref.update(countRef, count => count + 1).pipe(runSync)}>
count is {count} count is {count}
</button> </button>
</div> </div>

105
packages/example/src/routes/effect-component-tests.tsx
View File

@@ -1,105 +0,0 @@
import { Box, TextField } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router"
import { Array, Console, Effect, Layer, pipe, Ref, Runtime, SubscriptionRef } from "effect"
import { ReactComponent, ReactHook, ReactManagedRuntime } from "effect-components"
const LogLive = Layer.scopedDiscard(Effect.acquireRelease(
Console.log("Runtime built."),
() => Console.log("Runtime destroyed."),
))
class TestService extends Effect.Service<TestService>()("TestService", {
effect: Effect.bind(Effect.Do, "ref", () => SubscriptionRef.make("value")),
}) {}
class SubService extends Effect.Service<SubService>()("SubService", {
effect: Effect.bind(Effect.Do, "ref", () => SubscriptionRef.make("subvalue")),
}) {}
const runtime = ReactManagedRuntime.make(Layer.empty.pipe(
Layer.provideMerge(LogLive),
Layer.provideMerge(TestService.Default),
))
export const Route = createFileRoute("/effect-component-tests")({
component: RouteComponent,
})
function RouteComponent() {
return (
<ReactManagedRuntime.AsyncProvider runtime={runtime}>
<MyRoute />
</ReactManagedRuntime.AsyncProvider>
)
}
const MyRoute = pipe(
Effect.fn(function*() {
const runtime = yield* Effect.runtime()
const service = yield* TestService
const [value] = yield* ReactHook.useSubscribeRefs(service.ref)
// const MyTestComponentFC = yield* Effect.provide(
// ReactComponent.useFC(MyTestComponent),
// yield* ReactHook.useMemoLayer(SubService.Default),
// )
return <>
<Box>
<TextField.Root
value={value}
onChange={e => Runtime.runSync(runtime)(Ref.set(service.ref, e.target.value))}
/>
</Box>
{/* {yield* ReactComponent.use(MyTestComponent, C => <C />).pipe(
Effect.provide(yield* ReactHook.useMemoLayer(SubService.Default))
)} */}
{/* {Array.range(0, 3).map(k =>
<MyTestComponentFC key={k} />
)} */}
{yield* pipe(
Array.range(0, 3),
Array.map(k => ReactComponent.use(MyTestComponent, FC =>
<FC key={k} />
)),
Effect.all,
Effect.provide(yield* ReactHook.useMemoLayer(SubService.Default)),
)}
</>
}),
ReactComponent.withDisplayName("MyRoute"),
ReactComponent.withRuntime(runtime.context),
)
const MyTestComponent = pipe(
Effect.fn(function*() {
const runtime = yield* Effect.runtime()
const service = yield* SubService
const [value] = yield* ReactHook.useSubscribeRefs(service.ref)
// yield* ReactHook.useMemo(() => Effect.andThen(
// Effect.addFinalizer(() => Console.log("MyTestComponent umounted")),
// Console.log("MyTestComponent mounted"),
// ), [])
return <>
<Box>
<TextField.Root
value={value}
onChange={e => Runtime.runSync(runtime)(Ref.set(service.ref, e.target.value))}
/>
</Box>
</>
}),
ReactComponent.withDisplayName("MyTestComponent"),
)

27
packages/example/src/routes/index.tsx
View File

@@ -1,10 +1,29 @@
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 { createFileRoute } from "@tanstack/react-router"
import { Layer } from "effect"
import { useMemo } from "react"
export const Route = createFileRoute('/')({ export const Route = createFileRoute("/")({
component: RouteComponent component: Index
}) })
function RouteComponent() { function Index() {
return <div>Hello "/"!</div>
const todosLayer = useMemo(() => Layer.empty.pipe(
Layer.provideMerge(TodosState.make("todos"))
), [])
return (
<Container>
<TodosContext.Provider layer={todosLayer}>
<VTodos />
</TodosContext.Provider>
</Container>
)
} }

13
packages/example/src/routes/query/service.tsx
View File

@@ -4,7 +4,7 @@ import { Uuid4QueryService } from "@/query/views/Uuid4QueryService"
import { R } from "@/reffuse" import { R } from "@/reffuse"
import { HttpClient } from "@effect/platform" import { HttpClient } from "@effect/platform"
import { createFileRoute } from "@tanstack/react-router" import { createFileRoute } from "@tanstack/react-router"
import { Console, Effect, Layer, Schema } from "effect" import { Console, Effect, Schema } from "effect"
import { useMemo } from "react" import { useMemo } from "react"
@@ -14,21 +14,18 @@ export const Route = createFileRoute("/query/service")({
function RouteComponent() { function RouteComponent() {
const query = R.useQuery({ const query = R.useQuery({
key: R.useStreamFromReactiveValues(["uuid4", 10 as number]), key: R.useStreamFromValues(["uuid4", 10 as number]),
query: ([, count]) => Console.log(`Querying ${ count } IDs...`).pipe( query: ([, count]) => Console.log(`Querying ${ count } IDs...`).pipe(
Effect.andThen(Effect.sleep("500 millis")), Effect.andThen(Effect.sleep("500 millis")),
Effect.andThen(Effect.map( Effect.andThen(HttpClient.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
HttpClient.HttpClient, HttpClient.withTracerPropagation(false),
HttpClient.withTracerPropagation(false),
)),
Effect.flatMap(client => client.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
Effect.flatMap(res => res.json), Effect.flatMap(res => res.json),
Effect.flatMap(Schema.decodeUnknown(Uuid4Query.Result)), Effect.flatMap(Schema.decodeUnknown(Uuid4Query.Result)),
Effect.scoped, Effect.scoped,
), ),
}) })
const layer = useMemo(() => Layer.succeed(Uuid4Query.Uuid4Query, query), [query]) const layer = useMemo(() => query.layer(Uuid4Query.Uuid4Query), [query])
return ( return (
<QueryContext.Provider layer={layer}> <QueryContext.Provider layer={layer}>

84
packages/example/src/routes/query/usemutation.tsx
View File

@@ -1,84 +0,0 @@
import { R } from "@/reffuse"
import { HttpClient } from "@effect/platform"
import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
import { QueryProgress } from "@reffuse/extension-query"
import { createFileRoute } from "@tanstack/react-router"
import * as AsyncData from "@typed/async-data"
import { Array, Console, Effect, flow, Option, Schema, Stream } from "effect"
import { useState } from "react"
export const Route = createFileRoute("/query/usemutation")({
component: RouteComponent
})
const Result = Schema.Array(Schema.String)
function RouteComponent() {
const runFork = R.useRunFork()
const [count, setCount] = useState(1)
const mutation = R.useMutation({
mutation: ([count]: readonly [count: number]) => Console.log(`Querying ${ count } IDs...`).pipe(
Effect.andThen(QueryProgress.QueryProgress.update(() =>
AsyncData.Progress.make({ loaded: 0, total: Option.some(100) })
)),
Effect.andThen(Effect.sleep("500 millis")),
Effect.tap(() => QueryProgress.QueryProgress.update(() =>
AsyncData.Progress.make({ loaded: 50, total: Option.some(100) })
)),
Effect.andThen(Effect.map(
HttpClient.HttpClient,
HttpClient.withTracerPropagation(false),
)),
Effect.flatMap(client => client.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
Effect.flatMap(res => res.json),
Effect.flatMap(Schema.decodeUnknown(Result)),
Effect.scoped,
)
})
const [state] = R.useSubscribeRefs(mutation.stateRef)
return (
<Container>
<Flex direction="column" align="center" gap="2">
<Slider
min={1}
max={100}
value={[count]}
onValueChange={flow(
Array.head,
Option.getOrThrow,
setCount,
)}
/>
<Text>
{AsyncData.match(state, {
NoData: () => "No data yet",
Loading: progress =>
`Loading...
${ Option.match(progress, {
onSome: ({ loaded, total }) => ` (${ loaded }/${ Option.getOrElse(total, () => "unknown") })`,
onNone: () => "",
}) }`,
Success: value => `Value: ${ value }`,
Failure: cause => `Error: ${ cause }`,
})}
</Text>
<Button onClick={() => mutation.forkMutate(count).pipe(
Effect.flatMap(([, state]) => Stream.runForEach(state, Console.log)),
Effect.andThen(Console.log("Mutation done.")),
runFork,
)}>
Get
</Button>
</Flex>
</Container>
)
}

25
packages/example/src/routes/query/usequery.tsx
View File

@@ -3,7 +3,7 @@ import { HttpClient } from "@effect/platform"
import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes" import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router" import { createFileRoute } from "@tanstack/react-router"
import * as AsyncData from "@typed/async-data" import * as AsyncData from "@typed/async-data"
import { Array, Console, Effect, flow, Option, Schema, Stream } from "effect" import { Array, Console, Effect, flow, Option, Schema } from "effect"
import { useState } from "react" import { useState } from "react"
@@ -15,26 +15,23 @@ export const Route = createFileRoute("/query/usequery")({
const Result = Schema.Array(Schema.String) const Result = Schema.Array(Schema.String)
function RouteComponent() { function RouteComponent() {
const runFork = R.useRunFork() const runSync = R.useRunSync()
const [count, setCount] = useState(1) const [count, setCount] = useState(1)
const query = R.useQuery({ const query = R.useQuery({
key: R.useStreamFromReactiveValues(["uuid4", count]), key: R.useStreamFromValues(["uuid4", count]),
query: ([, count]) => Console.log(`Querying ${ count } IDs...`).pipe( query: ([, count]) => Console.log(`Querying ${ count } IDs...`).pipe(
Effect.andThen(Effect.sleep("500 millis")), Effect.andThen(Effect.sleep("500 millis")),
Effect.andThen(Effect.map( Effect.andThen(HttpClient.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
HttpClient.HttpClient, HttpClient.withTracerPropagation(false),
HttpClient.withTracerPropagation(false),
)),
Effect.flatMap(client => client.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
Effect.flatMap(res => res.json), Effect.flatMap(res => res.json),
Effect.flatMap(Schema.decodeUnknown(Result)), Effect.flatMap(Schema.decodeUnknown(Result)),
Effect.scoped, Effect.scoped,
), ),
}) })
const [state] = R.useSubscribeRefs(query.stateRef) const [state] = R.useRefState(query.state)
return ( return (
@@ -62,15 +59,7 @@ function RouteComponent() {
})} })}
</Text> </Text>
<Button <Button onClick={() => runSync(query.refresh)}>Refresh</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> </Flex>
</Container> </Container>
) )

34
packages/example/src/routes/streams/pull.tsx
View File

@@ -1,34 +0,0 @@
import { R } from "@/reffuse"
import { Button, Flex, Text } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router"
import { Chunk, Effect, Exit, Option, Queue, Random, Scope, Stream } from "effect"
import { useMemo, useState } from "react"
export const Route = createFileRoute("/streams/pull")({
component: RouteComponent
})
function RouteComponent() {
const stream = useMemo(() => Stream.repeatEffect(Random.nextInt), [])
const streamScope = R.useScope([stream], { finalizerExecutionMode: "fork" })
const queue = R.useMemo(() => Effect.provideService(Stream.toQueueOfElements(stream), Scope.Scope, streamScope), [streamScope])
const [value, setValue] = useState(Option.none<number>())
const pullLatest = R.useCallbackSync(() => Queue.takeAll(queue).pipe(
Effect.flatMap(Chunk.last),
Effect.flatMap(Exit.matchEffect({
onSuccess: Effect.succeed,
onFailure: Effect.fail,
})),
Effect.tap(v => Effect.sync(() => setValue(Option.some(v)))),
), [queue])
return (
<Flex direction="column" align="center" gap="2">
{Option.isSome(value) && <Text>{value.value}</Text>}
<Button onClick={pullLatest}>Pull latest</Button>
</Flex>
)
}

66
packages/example/src/routes/tests.tsx
View File

@@ -1,22 +1,9 @@
import { R } from "@/reffuse" import { R } from "@/reffuse"
import { Button, Flex, Text } from "@radix-ui/themes" import { Button, Flex } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router" import { createFileRoute } from "@tanstack/react-router"
import { GetRandomValues, makeUuid4 } from "@typed/id" import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Console, Effect, Option } from "effect" import { Console, Effect, Stream } from "effect"
import { useEffect, useState } from "react" import { useState } from "react"
interface Node {
value: string
left?: Leaf
right?: Leaf
}
interface Leaf {
node: Node
}
const makeUuid = Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)
export const Route = createFileRoute("/tests")({ export const Route = createFileRoute("/tests")({
@@ -24,39 +11,36 @@ export const Route = createFileRoute("/tests")({
}) })
function RouteComponent() { function RouteComponent() {
const runSync = R.useRunSync() // const value = R.useMemoScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
// Effect.andThen(makeUuid4),
// Effect.provide(GetRandomValues.CryptoRandom),
// ), [])
// console.log(value)
const [uuid, setUuid] = useState(R.useMemo(() => makeUuid, [])) R.useFork(() => Effect.addFinalizer(() => Console.log("cleanup")).pipe(
const generateUuid = R.useCallbackSync(() => makeUuid.pipe( Effect.andThen(Console.log("ouient")),
Effect.tap(v => Effect.sync(() => setUuid(v))) Effect.delay("1 second"),
), []) ), [])
const uuidStream = R.useStreamFromReactiveValues([uuid]) const [reactValue, setReactValue] = useState("initial")
const uuidStreamLatestValue = R.useSubscribeStream(uuidStream) const reactValueStream = R.useStreamFromValues([reactValue])
R.useFork(() => Stream.runForEach(reactValueStream, Console.log), [reactValueStream])
const [, scopeLayer] = R.useScope([uuid])
useEffect(() => Effect.addFinalizer(() => Console.log("Scope cleanup!")).pipe(
Effect.andThen(Console.log("Scope changed")),
Effect.provide(scopeLayer),
runSync,
), [scopeLayer, runSync])
const nodeRef = R.useRef(() => Effect.succeed<Node>({ value: "prout" })) const logValue = R.useCallbackSync(Effect.fn(function*(value: string) {
const nodeValueRef = R.useSubRefFromPath(nodeRef, ["value"]) yield* Effect.log(value)
}), [])
const generateUuid = R.useCallbackSync(() => makeUuid4.pipe(
Effect.provide(GetRandomValues.CryptoRandom),
Effect.map(setReactValue),
), [])
return ( return (
<Flex direction="column" justify="center" align="center" gap="2"> <Flex direction="row" justify="center" align="center" gap="2">
<Text>{uuid}</Text> <Button onClick={() => logValue("test")}>Log value</Button>
<Button onClick={generateUuid}>Generate UUID</Button> <Button onClick={() => generateUuid()}>Generate UUID</Button>
<Text>
{Option.match(uuidStreamLatestValue, {
onSome: ([v]) => v,
onNone: () => <></>,
})}
</Text>
</Flex> </Flex>
) )
} }

35
packages/example/src/routes/todos.tsx
View File

@@ -1,35 +0,0 @@
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("/todos")({
component: Todos
})
function Todos() {
const todosLayer = useMemo(() => Layer.empty.pipe(
Layer.provideMerge(TodosState.make("todos")),
Layer.merge(Layer.effectDiscard(
Effect.addFinalizer(() => Console.log("TodosContext cleaned up")).pipe(
Effect.andThen(Console.log("TodosContext constructed"))
)
)),
), [])
return (
<Container>
<TodosContext.Provider layer={todosLayer} finalizerExecutionMode="fork">
<VTodos />
</TodosContext.Provider>
</Container>
)
}

7
packages/example/src/services/AppQueryClient.ts
View File

@@ -1,7 +0,0 @@
import { QueryClient } from "@reffuse/extension-query"
import * as AppQueryErrorHandler from "./AppQueryErrorHandler"
export class AppQueryClient extends QueryClient.Service<AppQueryClient>()({
errorHandler: AppQueryErrorHandler.AppQueryErrorHandler
}) {}

13
packages/example/src/services/AppQueryErrorHandler.ts
View File

@@ -1,13 +0,0 @@
import { HttpClientError } from "@effect/platform"
import { QueryErrorHandler } from "@reffuse/extension-query"
import { Effect } from "effect"
export class AppQueryErrorHandler extends Effect.Service<AppQueryErrorHandler>()("AppQueryErrorHandler", {
effect: QueryErrorHandler.make<HttpClientError.HttpClientError>()(
(self, failure, defect) => self.pipe(
Effect.catchTag("RequestError", "ResponseError", failure),
Effect.catchAllDefect(defect),
)
)
}) {}

3
packages/example/src/services/index.ts
View File

@@ -1,2 +1 @@
export * as AppQueryClient from "./AppQueryClient" export {}
export * as AppQueryErrorHandler from "./AppQueryErrorHandler"

4
packages/example/src/todos/reffuse.ts
View File

@@ -1,10 +1,10 @@
import { RootReffuse } from "@/reffuse" import { GlobalReffuse } from "@/reffuse"
import { Reffuse, ReffuseContext } from "reffuse" import { Reffuse, ReffuseContext } from "reffuse"
import { TodosState } from "./services" import { TodosState } from "./services"
export const TodosContext = ReffuseContext.make<TodosState.TodosState>() export const TodosContext = ReffuseContext.make<TodosState.TodosState>()
export const R = new class TodosReffuse extends RootReffuse.pipe( export const R = new class TodosReffuse extends GlobalReffuse.pipe(
Reffuse.withContexts(TodosContext) Reffuse.withContexts(TodosContext)
) {} ) {}

57
packages/example/src/todos/services/TodosState.ts
View File

@@ -2,43 +2,68 @@ import { Todo } from "@/domain"
import { KeyValueStore } from "@effect/platform" import { KeyValueStore } from "@effect/platform"
import { BrowserKeyValueStore } from "@effect/platform-browser" import { BrowserKeyValueStore } from "@effect/platform-browser"
import { PlatformError } from "@effect/platform/Error" import { PlatformError } from "@effect/platform/Error"
import { Chunk, Context, Effect, identity, Layer, ParseResult, Ref, Schema, Stream, SubscriptionRef } from "effect" import { Chunk, Context, Effect, identity, Layer, ParseResult, Ref, Schema, SubscriptionRef } from "effect"
export class TodosState extends Context.Tag("TodosState")<TodosState, { export class TodosState extends Context.Tag("TodosState")<TodosState, {
readonly todos: SubscriptionRef.SubscriptionRef<Chunk.Chunk<Todo.Todo>> readonly todos: SubscriptionRef.SubscriptionRef<Chunk.Chunk<Todo.Todo>>
readonly load: Effect.Effect<void, PlatformError | ParseResult.ParseError>
readonly save: Effect.Effect<void, PlatformError | ParseResult.ParseError> readonly readFromLocalStorage: Effect.Effect<void, PlatformError | ParseResult.ParseError>
readonly saveToLocalStorage: Effect.Effect<void, PlatformError | ParseResult.ParseError>
readonly prepend: (todo: Todo.Todo) => Effect.Effect<void>
readonly replace: (index: number, todo: Todo.Todo) => Effect.Effect<void>
readonly remove: (index: number) => Effect.Effect<void>
// readonly moveUp: (index: number) => Effect.Effect<void, Cause.NoSuchElementException>
// readonly moveDown: (index: number) => Effect.Effect<void, Cause.NoSuchElementException>
}>() {} }>() {}
export const make = (key: string) => Layer.effect(TodosState, Effect.gen(function*() { export const make = (key: string) => Layer.effect(TodosState, Effect.gen(function*() {
const todos = yield* SubscriptionRef.make(Chunk.empty<Todo.Todo>())
const readFromLocalStorage = KeyValueStore.KeyValueStore.pipe( const readFromLocalStorage = KeyValueStore.KeyValueStore.pipe(
Effect.flatMap(kv => kv.get(key)), Effect.flatMap(kv => kv.get(key)),
Effect.flatMap(identity), Effect.flatMap(identity),
Effect.flatMap(Schema.decode( Effect.flatMap(Schema.parseJson().pipe(
Schema.compose(Schema.parseJson(), Schema.Chunk(Todo.TodoFromJson)) Schema.compose(Schema.Chunk(Todo.TodoFromJson)),
Schema.decode,
)), )),
Effect.catchTag("NoSuchElementException", () => Effect.succeed(Chunk.empty<Todo.Todo>())), Effect.flatMap(v => Ref.set(todos, v)),
Effect.catchTag("NoSuchElementException", () => Ref.set(todos, Chunk.empty())),
Effect.provide(BrowserKeyValueStore.layerLocalStorage), Effect.provide(BrowserKeyValueStore.layerLocalStorage),
) )
const writeToLocalStorage = (values: Chunk.Chunk<Todo.Todo>) => KeyValueStore.KeyValueStore.pipe( const saveToLocalStorage = Effect.all([KeyValueStore.KeyValueStore, todos]).pipe(
Effect.flatMap(kv => values.pipe( Effect.flatMap(([kv, values]) => values.pipe(
Schema.encode( Schema.parseJson().pipe(
Schema.compose(Schema.parseJson(), Schema.Chunk(Todo.TodoFromJson)) Schema.compose(Schema.Chunk(Todo.TodoFromJson)),
Schema.encode,
), ),
Effect.flatMap(v => kv.set(key, v)), Effect.flatMap(v => kv.set(key, v)),
)), )),
Effect.provide(BrowserKeyValueStore.layerLocalStorage), Effect.provide(BrowserKeyValueStore.layerLocalStorage),
) )
const todos = yield* SubscriptionRef.make(yield* readFromLocalStorage) const prepend = (todo: Todo.Todo) => Ref.update(todos, Chunk.prepend(todo))
const load = Effect.flatMap(readFromLocalStorage, v => Ref.set(todos, v)) const replace = (index: number, todo: Todo.Todo) => Ref.update(todos, Chunk.replace(index, todo))
const save = Effect.flatMap(todos, writeToLocalStorage) const remove = (index: number) => Ref.update(todos, Chunk.remove(index))
// Sync changes with local storage // const moveUp = (index: number) => Effect.gen(function*() {
yield* Effect.forkScoped(Stream.runForEach(todos.changes, writeToLocalStorage))
return { todos, load, save } // })
yield* readFromLocalStorage
return {
todos,
readFromLocalStorage,
saveToLocalStorage,
prepend,
replace,
remove,
}
})) }))

39
packages/example/src/todos/views/VNewTodo.tsx
View File

@@ -1,27 +1,25 @@
import { Todo } from "@/domain" import { Todo } from "@/domain"
import { Box, Button, Card, Flex, TextArea } from "@radix-ui/themes" import { Box, Button, Card, Flex, TextArea } from "@radix-ui/themes"
import { GetRandomValues, makeUuid4 } from "@typed/id" import { Effect, Option, SubscriptionRef } from "effect"
import { Chunk, Effect, Option, Ref } from "effect"
import { R } from "../reffuse" import { R } from "../reffuse"
import { TodosState } from "../services" import { TodosState } from "../services"
const createEmptyTodo = makeUuid4.pipe( const createEmptyTodo = Todo.generateUniqueID.pipe(
Effect.map(id => Todo.Todo.make({ id, content: "", completedAt: Option.none()}, true)), Effect.map(id => Todo.Todo.make({
Effect.provide(GetRandomValues.CryptoRandom), id,
content: "",
completedAt: Option.none(),
}, true))
) )
export function VNewTodo() { export function VNewTodo() {
const todoRef = R.useRef(() => createEmptyTodo) const runSync = R.useRunSync()
const [content, setContent] = R.useRefState(R.useSubRefFromPath(todoRef, ["content"]))
const add = R.useCallbackSync(() => Effect.all([TodosState.TodosState, todoRef]).pipe( const todoRef = R.useMemo(() => createEmptyTodo.pipe(Effect.flatMap(SubscriptionRef.make)), [])
Effect.flatMap(([state, todo]) => Ref.update(state.todos, Chunk.prepend(todo))), const [todo, setTodo] = R.useRefState(todoRef)
Effect.andThen(createEmptyTodo),
Effect.flatMap(v => Ref.set(todoRef, v)),
), [todoRef])
return ( return (
@@ -29,12 +27,23 @@ export function VNewTodo() {
<Card> <Card>
<Flex direction="column" align="stretch" gap="2"> <Flex direction="column" align="stretch" gap="2">
<TextArea <TextArea
value={content} value={todo.content}
onChange={e => setContent(e.target.value)} onChange={e => setTodo(prev =>
Todo.Todo.make({ ...prev, content: e.target.value }, true)
)}
/> />
<Flex direction="row" justify="center" align="center"> <Flex direction="row" justify="center" align="center">
<Button onClick={add}>Add</Button> <Button
onClick={() => TodosState.TodosState.pipe(
Effect.flatMap(state => state.prepend(todo)),
Effect.andThen(createEmptyTodo),
Effect.map(setTodo),
runSync,
)}
>
Add
</Button>
</Flex> </Flex>
</Flex> </Flex>
</Card> </Card>

35
packages/example/src/todos/views/VTodo.tsx
View File

@@ -1,28 +1,20 @@
import { Todo } from "@/domain" import { Todo } from "@/domain"
import { Box, Card, Flex, IconButton, TextArea } from "@radix-ui/themes" import { Box, Card, Flex, IconButton, TextArea } from "@radix-ui/themes"
import { Effect, Ref, Stream, SubscriptionRef } from "effect" import { Effect } from "effect"
import { Delete } from "lucide-react" import { Delete } from "lucide-react"
import { useState } from "react" import { useState } from "react"
import { R } from "../reffuse" import { R } from "../reffuse"
import { TodosState } from "../services"
export interface VTodoProps { export interface VTodoProps {
readonly todoRef: SubscriptionRef.SubscriptionRef<Todo.Todo> readonly index: number
readonly remove: Effect.Effect<void> readonly todo: Todo.Todo
} }
export function VTodo({ todoRef, remove }: VTodoProps) { export function VTodo({ index, todo }: VTodoProps) {
const runSync = R.useRunSync() const runSync = R.useRunSync()
const localTodoRef = R.useRef(() => todoRef)
const [content, setContent] = R.useRefState(R.useSubRefFromPath(localTodoRef, ["content"]))
R.useFork(() => localTodoRef.changes.pipe(
Stream.debounce("250 millis"),
Stream.runForEach(v => Ref.set(todoRef, v)),
), [localTodoRef])
const editorMode = useState(false) const editorMode = useState(false)
@@ -31,8 +23,14 @@ export function VTodo({ todoRef, remove }: VTodoProps) {
<Card> <Card>
<Flex direction="column" align="stretch" gap="1"> <Flex direction="column" align="stretch" gap="1">
<TextArea <TextArea
value={content} value={todo.content}
onChange={e => setContent(e.target.value)} onChange={e => TodosState.TodosState.pipe(
Effect.flatMap(state => state.replace(
index,
Todo.Todo.make({ ...todo, content: e.target.value }, true),
)),
runSync,
)}
disabled={!editorMode} disabled={!editorMode}
/> />
@@ -40,7 +38,12 @@ export function VTodo({ todoRef, remove }: VTodoProps) {
<Box></Box> <Box></Box>
<Flex direction="row" align="center" gap="1"> <Flex direction="row" align="center" gap="1">
<IconButton onClick={() => runSync(remove)}> <IconButton
onClick={() => TodosState.TodosState.pipe(
Effect.flatMap(state => state.remove(index)),
runSync,
)}
>
<Delete /> <Delete />
</IconButton> </IconButton>
</Flex> </Flex>

24
packages/example/src/todos/views/VTodos.tsx
View File

@@ -1,5 +1,5 @@
import { Box, Flex } from "@radix-ui/themes" import { Box, Flex } from "@radix-ui/themes"
import { Chunk, Effect, Ref } from "effect" import { Chunk, Effect, Stream } from "effect"
import { R } from "../reffuse" import { R } from "../reffuse"
import { TodosState } from "../services" import { TodosState } from "../services"
import { VNewTodo } from "./VNewTodo" import { VNewTodo } from "./VNewTodo"
@@ -8,8 +8,15 @@ import { VTodo } from "./VTodo"
export function VTodos() { export function VTodos() {
const todosRef = R.useMemo(() => Effect.map(TodosState.TodosState, state => state.todos), []) // Sync changes to the todos with the local storage
const [todos] = R.useSubscribeRefs(todosRef) R.useFork(() => TodosState.TodosState.pipe(
Effect.flatMap(state =>
Stream.runForEach(state.todos.changes, () => state.saveToLocalStorage)
)
), [])
const todosRef = R.useMemo(() => TodosState.TodosState.pipe(Effect.map(state => state.todos)), [])
const [todos] = R.useRefState(todosRef)
return ( return (
@@ -20,16 +27,7 @@ export function VTodos() {
{Chunk.map(todos, (todo, index) => ( {Chunk.map(todos, (todo, index) => (
<Box key={todo.id} width="500px"> <Box key={todo.id} width="500px">
<R.SubRefFromGetSet <VTodo index={index} todo={todo} />
parent={todosRef}
getter={parentValue => Chunk.unsafeGet(parentValue, index)}
setter={(parentValue, value) => Chunk.replace(parentValue, index, value)}
>
{ref => <VTodo
todoRef={ref}
remove={Ref.update(todosRef, Chunk.remove(index))}
/>}
</R.SubRefFromGetSet>
</Box> </Box>
))} ))}
</Flex> </Flex>

6
packages/extension-lazyref/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@reffuse/extension-lazyref", "name": "@reffuse/extension-lazyref",
"version": "0.1.4", "version": "0.1.0",
"type": "module", "type": "module",
"files": [ "files": [
"./README.md", "./README.md",
@@ -35,8 +35,8 @@
"peerDependencies": { "peerDependencies": {
"@typed/lazy-ref": "^0.3.0", "@typed/lazy-ref": "^0.3.0",
"@types/react": "^19.0.0", "@types/react": "^19.0.0",
"effect": "^3.15.0", "effect": "^3.13.0",
"react": "^19.0.0", "react": "^19.0.0",
"reffuse": "^0.1.8" "reffuse": "^0.1.3"
} }
} }

45
packages/extension-lazyref/src/index.ts
View File

@@ -1,49 +1,20 @@
import * as LazyRef from "@typed/lazy-ref" import * as LazyRef from "@typed/lazy-ref"
import { Effect, pipe, Stream } from "effect" import { Effect, Stream } from "effect"
import * as React from "react" import * as React from "react"
import { ReffuseExtension, type ReffuseNamespace } from "reffuse" import { ReffuseExtension, type ReffuseHelpers, SetStateAction } from "reffuse"
import { SetStateAction } from "reffuse/types"
export const LazyRefExtension = ReffuseExtension.make(() => ({ export const LazyRefExtension = ReffuseExtension.make(() => ({
useSubscribeLazyRefs<
const Refs extends readonly LazyRef.LazyRef<any>[],
R,
>(
this: ReffuseNamespace.ReffuseNamespace<R>,
...refs: Refs
): [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }] {
const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
() => Effect.all(refs as readonly LazyRef.LazyRef<any>[]),
[],
{ doNotReExecuteOnRuntimeOrContextChange: true },
) as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }])
this.useFork(() => pipe(
refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
streams => Stream.zipLatestAll(...streams),
Stream.runForEach(v =>
Effect.sync(() => setReactStateValue(v as [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]))
),
), refs)
return reactStateValue
},
useLazyRefState<A, E, R>( useLazyRefState<A, E, R>(
this: ReffuseNamespace.ReffuseNamespace<R>, this: ReffuseHelpers.ReffuseHelpers<R>,
ref: LazyRef.LazyRef<A, E, R>, ref: LazyRef.LazyRef<A, E, R>,
): [A, React.Dispatch<React.SetStateAction<A>>] { ): [A, React.Dispatch<React.SetStateAction<A>>] {
const [reactStateValue, setReactStateValue] = React.useState(this.useMemo( const initialState = this.useMemo(() => ref, [], { doNotReExecuteOnRuntimeOrContextChange: true })
() => ref, const [reactStateValue, setReactStateValue] = React.useState(initialState)
[],
{ doNotReExecuteOnRuntimeOrContextChange: true },
))
this.useFork(() => Stream.runForEach( this.useFork(() => Stream.runForEach(ref.changes, v => Effect.sync(() =>
Stream.changesWith(ref.changes, (x, y) => x === y), setReactStateValue(v)
v => Effect.sync(() => setReactStateValue(v)), )), [ref])
), [ref])
const setValue = this.useCallbackSync((setStateAction: React.SetStateAction<A>) => const setValue = this.useCallbackSync((setStateAction: React.SetStateAction<A>) =>
LazyRef.update(ref, prevState => LazyRef.update(ref, prevState =>

6
packages/extension-query/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@reffuse/extension-query", "name": "@reffuse/extension-query",
"version": "0.1.5", "version": "0.1.0",
"type": "module", "type": "module",
"files": [ "files": [
"./README.md", "./README.md",
@@ -37,8 +37,8 @@
"@effect/platform-browser": "^0.56.0", "@effect/platform-browser": "^0.56.0",
"@typed/async-data": "^0.13.0", "@typed/async-data": "^0.13.0",
"@types/react": "^19.0.0", "@types/react": "^19.0.0",
"effect": "^3.15.0", "effect": "^3.13.0",
"react": "^19.0.0", "react": "^19.0.0",
"reffuse": "^0.1.11" "reffuse": "^0.1.3"
} }
} }

195
packages/extension-query/src/MutationRunner.ts
View File

@@ -1,95 +1,134 @@
import * as AsyncData from "@typed/async-data" // import { BrowserStream } from "@effect/platform-browser"
import { Effect, type Fiber, Queue, Ref, Stream, SubscriptionRef } from "effect" // import * as AsyncData from "@typed/async-data"
import type * as QueryClient from "./QueryClient.js" // import { type Cause, Effect, Fiber, identity, Option, Ref, type Scope, Stream, SubscriptionRef } from "effect"
import * as QueryProgress from "./QueryProgress.js"
import { QueryState } from "./internal/index.js"
export interface MutationRunner<K extends readonly unknown[], A, E> { // export interface MutationRunner<K extends readonly unknown[], A, E, R> {
readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>> // readonly mutation: (...args: K) => Effect.Effect<A, E, R>
readonly mutate: (...key: K) => Effect.Effect<AsyncData.Success<A> | AsyncData.Failure<E>> // readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
readonly forkMutate: (...key: K) => Effect.Effect<readonly [
fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>>, // readonly forkMutate: Effect.Effect<Fiber.RuntimeFiber<void>>
state: Stream.Stream<AsyncData.AsyncData<A, E>>, // }
]>
}
export const Tag = <const Id extends string>(id: Id) => < // export interface MakeProps<K extends readonly unknown[], A, E, R> {
Self, K extends readonly unknown[], A, E = never, // readonly mutation: (...args: K) => Effect.Effect<A, E, R>
>() => Effect.Tag(id)<Self, MutationRunner<K, A, E>>() // }
// export const make = <K extends readonly unknown[], A, E, R>(
// { key, query }: MakeProps<K, A, E, R>
// ): Effect.Effect<MutationRunner<K, A, E, R>, never, R> => Effect.gen(function*() {
// const context = yield* Effect.context<R>()
export interface MakeProps<K extends readonly unknown[], A, FallbackA, E, HandledE, R> { // const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, E>())
readonly QueryClient: QueryClient.GenericTagClass<FallbackA, HandledE>
readonly mutation: (key: K) => Effect.Effect<A, E, R | QueryProgress.QueryProgress>
}
export const make = <K extends readonly unknown[], A, FallbackA, E, HandledE, R>( // const interrupt = fiberRef.pipe(
{ // Effect.flatMap(Option.match({
QueryClient, // onSome: fiber => Ref.set(fiberRef, Option.none()).pipe(
mutation, // Effect.andThen(Fiber.interrupt(fiber))
}: MakeProps<K, A, FallbackA, E, HandledE, R> // ),
): Effect.Effect< // onNone: () => Effect.void,
MutationRunner<K, A | FallbackA, Exclude<E, HandledE>>, // }))
never, // )
R | QueryClient.TagClassShape<FallbackA, HandledE>
> => Effect.gen(function*() {
const context = yield* Effect.context<R | QueryClient.TagClassShape<FallbackA, HandledE>>()
const globalStateRef = yield* SubscriptionRef.make(AsyncData.noData<A | FallbackA, Exclude<E, HandledE>>())
const queryStateTag = QueryState.makeTag<A | FallbackA, Exclude<E, HandledE>>() // 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 run = (key: K) => Effect.all([QueryClient, queryStateTag]).pipe( // const forkFetch = interrupt.pipe(
Effect.flatMap(([client, state]) => state.set(AsyncData.loading()).pipe( // Effect.andThen(
Effect.andThen(mutation(key)), // Ref.set(stateRef, AsyncData.loading()).pipe(
client.errorHandler.handle, // Effect.andThen(latestKeyRef),
Effect.matchCauseEffect({ // Effect.flatMap(identity),
onSuccess: v => Effect.tap(Effect.succeed(AsyncData.success(v)), state.set), // Effect.flatMap(key => query(key).pipe(
onFailure: c => Effect.tap(Effect.succeed(AsyncData.failure(c)), state.set), // Effect.matchCauseEffect({
}), // onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
)), // onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
// })
// )),
Effect.provide(context), // Effect.provide(context),
Effect.provide(QueryProgress.QueryProgress.Default), // Effect.fork,
) // )
// ),
const mutate = (...key: K) => Effect.provide(run(key), QueryState.layer( // Effect.flatMap(fiber =>
queryStateTag, // Ref.set(fiberRef, Option.some(fiber)).pipe(
globalStateRef, // Effect.andThen(Fiber.join(fiber)),
value => Ref.set(globalStateRef, value), // Effect.andThen(Ref.set(fiberRef, Option.none())),
)) // )
// ),
const forkMutate = (...key: K) => Effect.all([ // Effect.forkDaemon,
Ref.make(AsyncData.noData<A | FallbackA, Exclude<E, HandledE>>()), // )
Queue.unbounded<AsyncData.AsyncData<A | FallbackA, 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), // 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(QueryState.layer( // Effect.provide(context),
queryStateTag, // Effect.fork,
stateRef, // )
value => Queue.offer(stateQueue, value).pipe( // ),
Effect.andThen(Ref.set(stateRef, value)),
Effect.andThen(Ref.set(globalStateRef, value)),
),
)),
)
)
)
return { // Effect.flatMap(fiber =>
context, // Ref.set(fiberRef, Option.some(fiber)).pipe(
stateRef: globalStateRef, // Effect.andThen(Fiber.join(fiber)),
// Effect.andThen(Ref.set(fiberRef, Option.none())),
// )
// ),
mutate, // Effect.forkDaemon,
forkMutate, // )
}
}) // 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,
// }
// })

58
packages/extension-query/src/QueryClient.ts
View File

@@ -1,58 +0,0 @@
import { Context, Effect, identity, Layer } from "effect"
import type { Mutable } from "effect/Types"
import * as QueryErrorHandler from "./QueryErrorHandler.js"
export interface QueryClient<FallbackA, HandledE> {
readonly errorHandler: QueryErrorHandler.QueryErrorHandler<FallbackA, HandledE>
}
export interface MakeProps<FallbackA, HandledE> {
readonly errorHandler: QueryErrorHandler.QueryErrorHandler<FallbackA, HandledE>
}
export const make = <FallbackA, HandledE>(
{ errorHandler }: MakeProps<FallbackA, HandledE>
): Effect.Effect<QueryClient<FallbackA, HandledE>> => Effect.Do.pipe(
Effect.let("errorHandler", () => errorHandler)
)
const id = "@reffuse/extension-query/QueryClient"
export type TagClassShape<FallbackA, HandledE> = Context.TagClassShape<typeof id, QueryClient<FallbackA, HandledE>>
export type GenericTagClass<FallbackA, HandledE> = Context.TagClass<
TagClassShape<FallbackA, HandledE>,
typeof id,
QueryClient<FallbackA, HandledE>
>
export const makeGenericTagClass = <FallbackA = never, HandledE = never>(): GenericTagClass<FallbackA, HandledE> => Context.Tag(id)()
export interface ServiceProps<FallbackA = never, HandledE = never, E = never, R = never> {
readonly errorHandler?: Effect.Effect<QueryErrorHandler.QueryErrorHandler<FallbackA, HandledE>, E, R>
}
export interface ServiceResult<Self, FallbackA, HandledE, E, R> extends Context.TagClass<
Self,
typeof id,
QueryClient<FallbackA, HandledE>
> {
readonly Default: Layer.Layer<Self, E, R>
}
export const Service = <Self>() => (
<FallbackA = never, HandledE = never, E = never, R = never>(
props?: ServiceProps<FallbackA, HandledE, E, R>
): ServiceResult<Self, FallbackA, HandledE, E, R> => {
const TagClass = Context.Tag(id)() as ServiceResult<Self, FallbackA, HandledE, E, R>
(TagClass as Mutable<typeof TagClass>).Default = Layer.effect(TagClass, Effect.flatMap(
props?.errorHandler ?? QueryErrorHandler.make<never>()(identity),
errorHandler => make({ errorHandler }),
))
return TagClass
}
)

40
packages/extension-query/src/QueryErrorHandler.ts
View File

@@ -1,40 +0,0 @@
import { Cause, Effect, PubSub, Stream } from "effect"
export interface QueryErrorHandler<FallbackA, HandledE> {
readonly errors: Stream.Stream<Cause.Cause<HandledE>>
readonly handle: <A, E, R>(self: Effect.Effect<A, E, R>) => Effect.Effect<A | FallbackA, Exclude<E, HandledE>, R>
}
export type Fallback<T> = T extends QueryErrorHandler<infer A, any> ? A : never
export type Error<T> = T extends QueryErrorHandler<any, infer E> ? E : never
export const make = <HandledE = never>() => (
<FallbackA>(
f: (
self: Effect.Effect<never, HandledE>,
failure: (failure: HandledE) => Effect.Effect<never>,
defect: (defect: unknown) => Effect.Effect<never>,
) => Effect.Effect<FallbackA>
): Effect.Effect<QueryErrorHandler<FallbackA, HandledE>> => Effect.gen(function*() {
const pubsub = yield* PubSub.unbounded<Cause.Cause<HandledE>>()
const errors = Stream.fromPubSub(pubsub)
const handle = <A, E, R>(
self: Effect.Effect<A, E, R>
): Effect.Effect<A | FallbackA, Exclude<E, HandledE>, R> => f(
self as unknown as Effect.Effect<never, HandledE, never>,
(failure: HandledE) => Effect.andThen(
PubSub.publish(pubsub, Cause.fail(failure)),
Effect.failCause(Cause.empty),
),
(defect: unknown) => Effect.andThen(
PubSub.publish(pubsub, Cause.die(defect)),
Effect.failCause(Cause.empty),
),
)
return { errors, handle }
})
)

78
packages/extension-query/src/QueryExtension.ts
View File

@@ -1,61 +1,55 @@
import type { Effect, Stream } from "effect" import type * as AsyncData from "@typed/async-data"
import { ReffuseExtension, type ReffuseNamespace } from "reffuse" import { type Cause, type Context, Effect, type Fiber, Layer, type Option, type Stream, type SubscriptionRef } from "effect"
import * as MutationRunner from "./MutationRunner.js" import * as React from "react"
import * as QueryClient from "./QueryClient.js" import { ReffuseExtension, type ReffuseHelpers } from "reffuse"
import type * as QueryProgress from "./QueryProgress.js"
import * as QueryRunner from "./QueryRunner.js" import * as QueryRunner from "./QueryRunner.js"
import type * as QueryService from "./QueryService.js"
export interface UseQueryProps<K extends readonly unknown[], A, E, R> { export interface UseQueryProps<K extends readonly unknown[], A, E, R> {
readonly key: Stream.Stream<K> readonly key: Stream.Stream<K>
readonly query: (key: K) => Effect.Effect<A, E, R | QueryProgress.QueryProgress> readonly query: (key: K) => Effect.Effect<A, E, R>
readonly options?: QueryRunner.RunOptions readonly refreshOnWindowFocus?: boolean
} }
export interface UseMutationProps<K extends readonly unknown[], A, E, R> { export interface UseQueryResult<K extends readonly unknown[], A, E> {
readonly mutation: (key: K) => Effect.Effect<A, E, R | QueryProgress.QueryProgress> 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(() => ({ export const QueryExtension = ReffuseExtension.make(() => ({
useQuery< useQuery<K extends readonly unknown[], A, E, R>(
QK extends readonly unknown[], this: ReffuseHelpers.ReffuseHelpers<R>,
QA, props: UseQueryProps<K, A, E, R>,
FallbackA, ): UseQueryResult<K, A, E> {
QE,
HandledE,
QR extends R,
R,
>(
this: ReffuseNamespace.ReffuseNamespace<R | QueryClient.TagClassShape<FallbackA, HandledE>>,
props: UseQueryProps<QK, QA, QE, QR>,
): QueryRunner.QueryRunner<QK, QA | FallbackA, Exclude<QE, HandledE>> {
const runner = this.useMemo(() => QueryRunner.make({ const runner = this.useMemo(() => QueryRunner.make({
QueryClient: QueryClient.makeGenericTagClass<FallbackA, HandledE>(),
key: props.key, key: props.key,
query: props.query, query: props.query,
}), [props.key]) }), [props.key])
this.useFork(() => QueryRunner.run(runner, props.options), [runner]) this.useFork(() => runner.fetchOnKeyChange, [runner])
return runner this.useFork(() => (props.refreshOnWindowFocus ?? true)
}, ? runner.refreshOnWindowFocus
: Effect.void,
[props.refreshOnWindowFocus, runner])
useMutation< return React.useMemo(() => ({
QK extends readonly unknown[], latestKey: runner.latestKeyRef,
QA, state: runner.stateRef,
FallbackA, refresh: runner.forkRefresh,
QE,
HandledE, layer: tag => Layer.succeed(tag, {
QR extends R, latestKey: runner.latestKeyRef,
R, state: runner.stateRef,
>( refresh: runner.forkRefresh,
this: ReffuseNamespace.ReffuseNamespace<R | QueryClient.TagClassShape<FallbackA, HandledE>>, }),
props: UseMutationProps<QK, QA, QE, QR>, }), [runner])
): MutationRunner.MutationRunner<QK, QA | FallbackA, Exclude<QE, HandledE>> { }
return this.useMemo(() => MutationRunner.make({
QueryClient: QueryClient.makeGenericTagClass<FallbackA, HandledE>(),
mutation: props.mutation,
}), [])
},
})) }))

37
packages/extension-query/src/QueryProgress.ts
View File

@@ -1,37 +0,0 @@
import * as AsyncData from "@typed/async-data"
import { Effect, flow, Layer, Match, Option } from "effect"
import { QueryState } from "./internal/index.js"
export class QueryProgress extends Effect.Tag("@reffuse/extension-query/QueryProgress")<QueryProgress, {
readonly get: Effect.Effect<Option.Option<AsyncData.Progress>>
readonly update: (
f: (previous: Option.Option<AsyncData.Progress>) => AsyncData.Progress
) => Effect.Effect<void>
}>() {
static readonly Default: Layer.Layer<
QueryProgress,
never,
QueryState.QueryState<any, any>
> = Layer.effect(this, Effect.gen(function*() {
const state = yield* QueryState.makeTag()
const get = state.get.pipe(
Effect.map(flow(Match.value,
Match.tag("Loading", v => v.progress),
Match.tag("Refreshing", v => v.progress),
Match.orElse(() => Option.none()),
))
)
const update = (f: (previous: Option.Option<AsyncData.Progress>) => AsyncData.Progress) => get.pipe(
Effect.map(f),
Effect.flatMap(progress => state.update(previous =>
AsyncData.updateProgress(previous, progress)
)),
)
return { get, update }
}))
}

279
packages/extension-query/src/QueryRunner.ts
View File

@@ -1,193 +1,144 @@
import { BrowserStream } from "@effect/platform-browser" import { BrowserStream } from "@effect/platform-browser"
import * as AsyncData from "@typed/async-data" import * as AsyncData from "@typed/async-data"
import { type Cause, Effect, Fiber, identity, Option, Queue, Ref, type Scope, Stream, SubscriptionRef } from "effect" import { type Cause, Effect, Fiber, identity, Option, Ref, type Scope, Stream, SubscriptionRef } from "effect"
import type * as QueryClient from "./QueryClient.js"
import * as QueryProgress from "./QueryProgress.js"
import { QueryState } from "./internal/index.js"
export interface QueryRunner<K extends readonly unknown[], A, E> { export interface QueryRunner<K extends readonly unknown[], A, E, R> {
readonly queryKey: Stream.Stream<K> readonly query: (key: K) => Effect.Effect<A, E, R>
readonly latestKeyValueRef: SubscriptionRef.SubscriptionRef<Option.Option<K>>
readonly latestKeyRef: SubscriptionRef.SubscriptionRef<Option.Option<K>>
readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>> readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.RuntimeFiber< readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>>
AsyncData.Success<A> | AsyncData.Failure<E>,
Cause.NoSuchElementException
>>>
readonly interrupt: Effect.Effect<void> readonly forkInterrupt: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
readonly forkInterrupt: Effect.Effect<Fiber.RuntimeFiber<void>> readonly forkFetch: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
readonly forkFetch: (keyValue: K) => Effect.Effect<readonly [ readonly forkRefresh: Effect.Effect<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>
fiber: Fiber.RuntimeFiber<AsyncData.Success<A> | AsyncData.Failure<E>>,
state: Stream.Stream<AsyncData.AsyncData<A, E>>, readonly fetchOnKeyChange: Effect.Effect<void, Cause.NoSuchElementException, Scope.Scope>
]> readonly refreshOnWindowFocus: Effect.Effect<void>
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) => < export interface MakeProps<K extends readonly unknown[], A, E, R> {
Self, K extends readonly unknown[], A, E = never
>() => Effect.Tag(id)<Self, QueryRunner<K, A, E>>()
export interface MakeProps<K extends readonly unknown[], A, FallbackA, E, HandledE, R> {
readonly QueryClient: QueryClient.GenericTagClass<FallbackA, HandledE>
readonly key: Stream.Stream<K> readonly key: Stream.Stream<K>
readonly query: (key: K) => Effect.Effect<A, E, R | QueryProgress.QueryProgress> readonly query: (key: K) => Effect.Effect<A, E, R>
} }
export const make = <K extends readonly unknown[], A, FallbackA, E, HandledE, R>( export const make = <K extends readonly unknown[], A, E, R>(
{ { key, query }: MakeProps<K, A, E, R>
QueryClient, ): Effect.Effect<QueryRunner<K, A, E, R>, never, R> => Effect.gen(function*() {
key, const context = yield* Effect.context<R>()
query,
}: MakeProps<K, A, FallbackA, E, HandledE, R>
): Effect.Effect<
QueryRunner<K, A | FallbackA, Exclude<E, HandledE>>,
never,
R | QueryClient.TagClassShape<FallbackA, HandledE>
> => Effect.gen(function*() {
const context = yield* Effect.context<R | QueryClient.TagClassShape<FallbackA, HandledE>>()
const latestKeyValueRef = yield* SubscriptionRef.make(Option.none<K>()) const latestKeyRef = yield* SubscriptionRef.make(Option.none<K>())
const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A | FallbackA, Exclude<E, HandledE>>()) const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, E>())
const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.RuntimeFiber< const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>())
AsyncData.Success<A | FallbackA> | AsyncData.Failure<Exclude<E, HandledE>>,
Cause.NoSuchElementException
>>())
const queryStateTag = QueryState.makeTag<A | FallbackA, Exclude<E, HandledE>>() const interrupt = fiberRef.pipe(
Effect.flatMap(Option.match({
const interrupt = Effect.flatMap(fiberRef, Option.match({ onSome: fiber => Ref.set(fiberRef, Option.none()).pipe(
onSome: fiber => Ref.set(fiberRef, Option.none()).pipe( Effect.andThen(Fiber.interrupt(fiber))
Effect.andThen(Fiber.interrupt(fiber))
),
onNone: () => Effect.void,
}))
const forkInterrupt = Effect.flatMap(fiberRef, 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 run = (keyValue: K) => Effect.all([QueryClient, queryStateTag]).pipe(
Effect.flatMap(([client, state]) => Ref.set(latestKeyValueRef, Option.some(keyValue)).pipe(
Effect.andThen(query(keyValue)),
client.errorHandler.handle,
Effect.matchCauseEffect({
onSuccess: v => Effect.tap(Effect.succeed(AsyncData.success(v)), state.set),
onFailure: c => Effect.tap(Effect.succeed(AsyncData.failure(c)), state.set),
}),
)),
Effect.provide(context),
Effect.provide(QueryProgress.QueryProgress.Default),
)
const forkFetch = (keyValue: K) => Queue.unbounded<AsyncData.AsyncData<A | FallbackA, Exclude<E, HandledE>>>().pipe(
Effect.flatMap(stateQueue => queryStateTag.pipe(
Effect.flatMap(state => interrupt.pipe(
Effect.andThen(
Effect.addFinalizer(() => Effect.andThen(
Ref.set(fiberRef, Option.none()),
Queue.shutdown(stateQueue),
)).pipe(
Effect.andThen(state.set(AsyncData.loading())),
Effect.andThen(run(keyValue)),
Effect.scoped,
Effect.forkDaemon,
)
),
Effect.tap(fiber => Ref.set(fiberRef, Option.some(fiber))),
Effect.map(fiber => [fiber, Stream.fromQueue(stateQueue)] as const),
)),
Effect.provide(QueryState.layer(
queryStateTag,
stateRef,
value => Effect.andThen(
Queue.offer(stateQueue, value),
Ref.set(stateRef, value),
),
)),
))
)
const setInitialRefreshState = Effect.flatMap(queryStateTag, 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 | FallbackA, Exclude<E, HandledE>>>().pipe(
Effect.flatMap(stateQueue => interrupt.pipe(
Effect.andThen(
Effect.addFinalizer(() => Effect.andThen(
Ref.set(fiberRef, Option.none()),
Queue.shutdown(stateQueue),
)).pipe(
Effect.andThen(setInitialRefreshState),
Effect.andThen(latestKeyValueRef.pipe(
Effect.flatMap(identity),
Effect.flatMap(run),
)),
Effect.scoped,
Effect.forkDaemon,
)
), ),
onNone: () => Effect.void,
}))
)
Effect.tap(fiber => Ref.set(fiberRef, Option.some(fiber))), const forkInterrupt = fiberRef.pipe(
Effect.map(fiber => [fiber, Stream.fromQueue(stateQueue)] as const), 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),
}))
)
Effect.provide(QueryState.layer( const forkFetch = interrupt.pipe(
queryStateTag, Effect.andThen(
stateRef, Ref.set(stateRef, AsyncData.loading()).pipe(
value => Effect.andThen( Effect.andThen(latestKeyRef),
Queue.offer(stateQueue, value), Effect.flatMap(identity),
Ref.set(stateRef, value), 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 { return {
queryKey: key, query,
latestKeyValueRef,
latestKeyRef,
stateRef, stateRef,
fiberRef, fiberRef,
interrupt,
forkInterrupt, forkInterrupt,
forkFetch, forkFetch,
forkRefresh, forkRefresh,
fetchOnKeyChange,
refreshOnWindowFocus,
} }
}) })
export interface RunOptions {
readonly refreshOnWindowFocus?: boolean
}
export const run = <K extends readonly unknown[], A, E>(
self: QueryRunner<K, A, E>,
options?: RunOptions,
): Effect.Effect<void, never, Scope.Scope> => Effect.gen(function*() {
if (typeof window !== "undefined" && (options?.refreshOnWindowFocus ?? true))
yield* Effect.forkScoped(
Stream.runForEach(BrowserStream.fromEventListenerWindow("focus"), () => self.forkRefresh)
)
yield* Effect.addFinalizer(() => self.interrupt)
yield* Stream.runForEach(Stream.changes(self.queryKey), latestKey => self.forkFetch(latestKey))
})

32
packages/extension-query/src/QueryService.ts Normal file
View File

@@ -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,
// }
// }))

5
packages/extension-query/src/index.ts
View File

@@ -1,6 +1,3 @@
export * as MutationRunner from "./MutationRunner.js"
export * as QueryClient from "./QueryClient.js"
export * as QueryErrorHandler from "./QueryErrorHandler.js"
export * from "./QueryExtension.js" export * from "./QueryExtension.js"
export * as QueryProgress from "./QueryProgress.js"
export * as QueryRunner from "./QueryRunner.js" export * as QueryRunner from "./QueryRunner.js"
export * as QueryService from "./QueryService.js"

24
packages/extension-query/src/internal/QueryState.ts
View File

@@ -1,24 +0,0 @@
import type * as AsyncData from "@typed/async-data"
import { Context, Effect, Layer } from "effect"
export interface QueryState<A, E> {
readonly get: Effect.Effect<AsyncData.AsyncData<A, E>>
readonly set: (value: AsyncData.AsyncData<A, E>) => Effect.Effect<void>
readonly update: (f: (previous: AsyncData.AsyncData<A, E>) => AsyncData.AsyncData<A, E>) => Effect.Effect<void>
}
export const makeTag = <A, E>(): Context.Tag<QueryState<A, E>, QueryState<A, E>> => Context.GenericTag("@reffuse/query-extension/QueryState")
export const layer = <A, E>(
tag: Context.Tag<QueryState<A, E>, QueryState<A, E>>,
get: Effect.Effect<AsyncData.AsyncData<A, E>>,
set: (value: AsyncData.AsyncData<A, E>) => Effect.Effect<void>,
): Layer.Layer<QueryState<A, E>> => Layer.succeed(tag, {
get,
set,
update: f => get.pipe(
Effect.map(f),
Effect.flatMap(set),
),
})

1
packages/extension-query/src/internal/index.ts
View File

@@ -1 +0,0 @@
export * as QueryState from "./QueryState.js"

14
packages/reffuse/.code-narrator/gpt_questions/README.liquid Normal file
View File

@@ -0,0 +1,14 @@
Create a "ReadMe" guide for the project, named "{{ projectName }}".
Include the following:
Title, Description,
Getting Started by installing npm package, how to run it with npx
Configuration is optional and will be generated on first run
Reporting bugs, repository and homepage
Versioning
Authors
License
This is the entry file:
###
{{ entryFileContent }}
###

4
packages/reffuse/.code-narrator/gpt_questions/howto_create_howto.liquid Normal file
View File

@@ -0,0 +1,4 @@
Show how developer would add HowTo in config file,
args property is used to inject properties into liquid template, any property set in args can be access in liquid template with {{ keyName }}
file property appends extracted content of a file to liquid template, using JSONPath or the extract property that uses LLM to extract content from file
Developers MUST create a liquid template in .code-narrator/gpt_questions, this template file is used to ask GPT question

4
packages/reffuse/.code-narrator/gpt_questions/overview_readme.liquid Normal file
View File

@@ -0,0 +1,4 @@
Give title and short description that this is an overview file for files located in directory
Give short description of each file that is provided
Add link to each file, link should be the filename

101
packages/reffuse/code-narrator.config.js Normal file
View File

@@ -0,0 +1,101 @@
const ConfigurationBuilder = require("code-narrator/dist/src/documentation/plugins/builders/Configuration/ConfigurationBuilder");
const FilesBuilder = require("code-narrator/dist/src/documentation/plugins/builders/Files/FilesBuilder");
const FoldersBuilder = require("code-narrator/dist/src/documentation/plugins/builders/Folders/FoldersBuilder");
const UserDefinedBuilder = require("code-narrator/dist/src/documentation/plugins/builders/UserDefined/UserDefinedBuilder");
/**
* You can find the documentation about code-narrator.config.js at
* https://github.com/ingig/code-narrator/blob/master/docs/Configuration/code-narrator.config.js.md
*
* @type {ICodeNarratorConfig}
*/
const config = {
// App specific configuration files. This could be something like project_name.json
config_files: [
],
project_file: "package.json",
entry_file: "./dist/index.js",
cli_file: "",
project_path: "./",
source_path: "src",
documentation_path: "./docs",
test_path: "test",
exclude: [
"/node_modules",
".env",
"/.idea",
"/.git",
".gitignore",
"/.code-narrator",
"/dist",
"/build",
"package-lock.json",
],
// Indicates if the documentation should create a README file in root of project
readmeRoot: true,
// Url to the repository, code-narrator tries to extract this from project file
repository_url: "git+https://github.com/Thiladev/reffuse.git",
// These are the plugins used when building documentation. You can create your own plugin. Checkout the code-narrator docs HowTo create a builder plugin
builderPlugins: [
ConfigurationBuilder,
FilesBuilder,
FoldersBuilder,
UserDefinedBuilder,
],
// These are system commends send to GPT with every query
gptSystemCommands: [
"Act as a documentation expert for software",
"If there is :::note, :::info, :::caution, :::tip, :::danger in the text, extract that from its location and format it correctly",
"Return your answer in {DocumentationType} format",
"If you notice any secret information, replace it with ***** in your response",
],
documentation_type: "md",
document_file_extension: ".md",
folderRootFileName: "README",
cache_file: ".code-narrator/cache.json",
gptModel: "gpt-4",
aiService: undefined,
project_name: "reffuse",
include: [
"src/**/*",
],
// Array of user defined documentations. See code-narrator How to create a user defined builder
builders: [
{
name: "README",
type: "README",
template: "README",
sidebarPosition: 1,
args: {
entryFileContent: "content(package.json)",
aiService: undefined,
},
aiService: undefined,
},
{
name: "HowTo Overview",
type: "README",
template: "overview_readme",
path: "howto",
files: [
{
path: "howto/*.md",
aiService: undefined,
},
],
pages: [
{
name: "HowTo Example",
type: "howto",
template: "howto_create_howto",
aiService: undefined,
},
],
aiService: undefined,
},
],
}
module.exports = config;

8
packages/reffuse/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "reffuse", "name": "reffuse",
"version": "0.1.13", "version": "0.1.3",
"type": "module", "type": "module",
"files": [ "files": [
"./README.md", "./README.md",
@@ -16,10 +16,6 @@
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",
"default": "./dist/index.js" "default": "./dist/index.js"
}, },
"./types": {
"types": "./dist/types/index.d.ts",
"default": "./dist/types/index.js"
},
"./*": { "./*": {
"types": "./dist/*.d.ts", "types": "./dist/*.d.ts",
"default": "./dist/*.js" "default": "./dist/*.js"
@@ -35,7 +31,7 @@
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^19.0.0", "@types/react": "^19.0.0",
"effect": "^3.15.0", "effect": "^3.13.0",
"react": "^19.0.0" "react": "^19.0.0"
} }
} }

25
packages/reffuse/src/Reffuse.ts
View File

@@ -1,42 +1,42 @@
import type * as ReffuseContext from "./ReffuseContext.js" import type * as ReffuseContext from "./ReffuseContext.js"
import type * as ReffuseExtension from "./ReffuseExtension.js" import type * as ReffuseExtension from "./ReffuseExtension.js"
import * as ReffuseNamespace from "./ReffuseNamespace.js" import * as ReffuseHelpers from "./ReffuseHelpers.js"
import type { Merge, StaticType } from "./utils.js" import type { Merge, StaticType } from "./types.js"
export class Reffuse extends ReffuseNamespace.makeClass() {} export class Reffuse extends ReffuseHelpers.make() {}
export const withContexts = <R2 extends Array<unknown>>( export const withContexts = <R2 extends Array<unknown>>(
...contexts: [...{ [K in keyof R2]: ReffuseContext.ReffuseContext<R2[K]> }] ...contexts: [...{ [K in keyof R2]: ReffuseContext.ReffuseContext<R2[K]> }]
) => ( ) =>
< <
BaseClass extends ReffuseNamespace.ReffuseNamespaceClass<R1>, BaseClass extends ReffuseHelpers.ReffuseHelpersClass<R1>,
R1 R1
>( >(
self: BaseClass & ReffuseNamespace.ReffuseNamespaceClass<R1> self: BaseClass & ReffuseHelpers.ReffuseHelpersClass<R1>
): ( ): (
{ {
new(): Merge< new(): Merge<
InstanceType<BaseClass>, InstanceType<BaseClass>,
{ constructor: ReffuseNamespace.ReffuseNamespaceClass<R1 | R2[number]> } { constructor: ReffuseHelpers.ReffuseHelpersClass<R1 | R2[number]> }
> >
} & } &
Merge< Merge<
StaticType<BaseClass>, StaticType<BaseClass>,
StaticType<ReffuseNamespace.ReffuseNamespaceClass<R1 | R2[number]>> StaticType<ReffuseHelpers.ReffuseHelpersClass<R1 | R2[number]>>
> >
) => class extends self { ) => class extends self {
static readonly contexts = [...self.contexts, ...contexts] static readonly contexts = [...self.contexts, ...contexts]
} as any } as any
)
export const withExtension = <A extends object>(extension: ReffuseExtension.ReffuseExtension<A>) => (
export const withExtension = <A extends object>(extension: ReffuseExtension.ReffuseExtension<A>) =>
< <
BaseClass extends ReffuseNamespace.ReffuseNamespaceClass<R>, BaseClass extends ReffuseHelpers.ReffuseHelpersClass<R>,
R R
>( >(
self: BaseClass & ReffuseNamespace.ReffuseNamespaceClass<R> self: BaseClass & ReffuseHelpers.ReffuseHelpersClass<R>
): ( ): (
{ new(): Merge<InstanceType<BaseClass>, A> } & { new(): Merge<InstanceType<BaseClass>, A> } &
StaticType<BaseClass> StaticType<BaseClass>
@@ -45,4 +45,3 @@ export const withExtension = <A extends object>(extension: ReffuseExtension.Reff
Object.assign(class_.prototype, extension()) Object.assign(class_.prototype, extension())
return class_ as any return class_ as any
} }
)

178
packages/reffuse/src/ReffuseContext.ts
View File

@@ -1,178 +0,0 @@
import { Array, Context, Effect, ExecutionStrategy, Exit, Layer, Match, Ref, Runtime, Scope } from "effect"
import * as React from "react"
import * as ReffuseRuntime from "./ReffuseRuntime.js"
export class ReffuseContext<R> {
readonly Context = React.createContext<Context.Context<R>>(null!)
readonly Provider = makeProvider(this.Context)
readonly AsyncProvider = makeAsyncProvider(this.Context)
useContext(): Context.Context<R> {
return React.useContext(this.Context)
}
useLayer(): Layer.Layer<R> {
const context = this.useContext()
return React.useMemo(() => Layer.effectContext(Effect.succeed(context)), [context])
}
}
export type R<T> = T extends ReffuseContext<infer R> ? R : never
export type ReactProvider<R> = React.FC<{
readonly layer: Layer.Layer<R, unknown, Scope.Scope>
readonly scope?: Scope.Scope
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
readonly finalizerExecutionMode?: "sync" | "fork"
readonly children?: React.ReactNode
}>
const makeProvider = <R>(Context: React.Context<Context.Context<R>>): ReactProvider<R> => {
return function ReffuseContextReactProvider(props) {
const runtime = ReffuseRuntime.useRuntime()
const runSync = React.useMemo(() => Runtime.runSync(runtime), [runtime])
const runFork = React.useMemo(() => Runtime.runFork(runtime), [runtime])
const makeScope = React.useMemo(() => props.scope
? Scope.fork(props.scope, props.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
: Scope.make(props.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
[props.scope])
const makeContext = (scope: Scope.CloseableScope) => Effect.context<R>().pipe(
Effect.provide(props.layer),
Effect.provideService(Scope.Scope, scope),
)
const closeScope = (scope: Scope.CloseableScope) => Scope.close(scope, Exit.void).pipe(
effect => Match.value(props.finalizerExecutionMode ?? "sync").pipe(
Match.when("sync", () => { runSync(effect) }),
Match.when("fork", () => { runFork(effect) }),
Match.exhaustive,
)
)
const [isInitialRun, initialScope, initialValue] = React.useMemo(() => Effect.Do.pipe(
Effect.bind("isInitialRun", () => Ref.make(true)),
Effect.bind("scope", () => makeScope),
Effect.bind("context", ({ scope }) => makeContext(scope)),
Effect.map(({ isInitialRun, scope, context }) => [isInitialRun, scope, context] as const),
runSync,
), [])
const [value, setValue] = React.useState(initialValue)
React.useEffect(() => isInitialRun.pipe(
Effect.if({
onTrue: () => Ref.set(isInitialRun, false).pipe(
Effect.map(() =>
() => closeScope(initialScope)
)
),
onFalse: () => Effect.Do.pipe(
Effect.bind("scope", () => makeScope),
Effect.bind("context", ({ scope }) => makeContext(scope)),
Effect.tap(({ context }) =>
Effect.sync(() => setValue(context))
),
Effect.map(({ scope }) =>
() => closeScope(scope)
),
),
}),
runSync,
), [makeScope, runSync, runFork])
return React.createElement(Context, { ...props, value })
}
}
export type AsyncReactProvider<R> = React.FC<{
readonly layer: Layer.Layer<R, unknown, Scope.Scope>
readonly scope?: Scope.Scope
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
readonly finalizerExecutionMode?: "sync" | "fork"
readonly fallback?: React.ReactNode
readonly children?: React.ReactNode
}>
const makeAsyncProvider = <R>(Context: React.Context<Context.Context<R>>): AsyncReactProvider<R> => {
function ReffuseContextAsyncReactProviderInner({ promise, children }: {
readonly promise: Promise<Context.Context<R>>
readonly children?: React.ReactNode
}) {
return React.createElement(Context, {
value: React.use(promise),
children,
})
}
return function ReffuseContextAsyncReactProvider(props) {
const runtime = ReffuseRuntime.useRuntime()
const runSync = React.useMemo(() => Runtime.runSync(runtime), [runtime])
const runFork = React.useMemo(() => Runtime.runFork(runtime), [runtime])
const [promise, setPromise] = React.useState(Promise.withResolvers<Context.Context<R>>().promise)
React.useEffect(() => {
const { promise, resolve, reject } = Promise.withResolvers<Context.Context<R>>()
setPromise(promise)
const scope = runSync(props.scope
? Scope.fork(props.scope, props.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
: Scope.make(props.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
)
Effect.context<R>().pipe(
Effect.match({
onSuccess: resolve,
onFailure: reject,
}),
Effect.provide(props.layer),
Effect.provideService(Scope.Scope, scope),
effect => runFork(effect, { ...props, scope }),
)
return () => Scope.close(scope, Exit.void).pipe(
effect => Match.value(props.finalizerExecutionMode ?? "sync").pipe(
Match.when("sync", () => { runSync(effect) }),
Match.when("fork", () => { runFork(effect) }),
Match.exhaustive,
)
)
}, [props.layer, runSync, runFork])
return React.createElement(React.Suspense, {
children: React.createElement(ReffuseContextAsyncReactProviderInner, { ...props, promise }),
fallback: props.fallback,
})
}
}
export const make = <R = never>() => new ReffuseContext<R>()
export const useMergeAll = <T extends Array<unknown>>(
...contexts: [...{ [K in keyof T]: ReffuseContext<T[K]> }]
): Context.Context<T[number]> => {
const values = contexts.map(v => React.use(v.Context))
return React.useMemo(() => Context.mergeAll(...values), values)
}
export const useMergeAllLayers = <T extends Array<unknown>>(
...contexts: [...{ [K in keyof T]: ReffuseContext<T[K]> }]
): Layer.Layer<T[number]> => {
const values = contexts.map(v => React.use(v.Context))
return React.useMemo(() => Array.isNonEmptyArray(values)
? Layer.mergeAll(
...Array.map(values, context => Layer.effectContext(Effect.succeed(context)))
)
: Layer.empty as Layer.Layer<T[number]>,
values)
}

111
packages/reffuse/src/ReffuseContext.tsx Normal file
View File

@@ -0,0 +1,111 @@
import { Array, Context, Effect, Layer, Runtime } from "effect"
import * as React from "react"
import * as ReffuseRuntime from "./ReffuseRuntime.js"
export class ReffuseContext<R> {
readonly Context = React.createContext<Context.Context<R>>(null!)
readonly Provider = makeProvider(this.Context)
readonly AsyncProvider = makeAsyncProvider(this.Context)
useContext(): Context.Context<R> {
return React.useContext(this.Context)
}
useLayer(): Layer.Layer<R> {
const context = this.useContext()
return React.useMemo(() => Layer.effectContext(Effect.succeed(context)), [context])
}
}
export type R<T> = T extends ReffuseContext<infer R> ? R : never
export type ReactProvider<R> = React.FC<{
readonly layer: Layer.Layer<R, unknown>
readonly children?: React.ReactNode
}>
function makeProvider<R>(Context: React.Context<Context.Context<R>>): ReactProvider<R> {
return function ReffuseContextReactProvider(props) {
const runtime = ReffuseRuntime.useRuntime()
const value = React.useMemo(() => Effect.context<R>().pipe(
Effect.provide(props.layer),
Runtime.runSync(runtime),
), [props.layer, runtime])
return (
<Context
{...props}
value={value}
/>
)
}
}
export type AsyncReactProvider<R> = React.FC<{
readonly layer: Layer.Layer<R, unknown>
readonly fallback?: React.ReactNode
readonly children?: React.ReactNode
}>
function makeAsyncProvider<R>(Context: React.Context<Context.Context<R>>): AsyncReactProvider<R> {
function Inner({ promise, children }: {
readonly promise: Promise<Context.Context<R>>
readonly children?: React.ReactNode
}) {
const value = React.use(promise)
return (
<Context
value={value}
children={children}
/>
)
}
return function ReffuseContextAsyncReactProvider(props) {
const runtime = ReffuseRuntime.useRuntime()
const promise = React.useMemo(() => Effect.context<R>().pipe(
Effect.provide(props.layer),
Runtime.runPromise(runtime),
), [props.layer, runtime])
return (
<React.Suspense fallback={props.fallback}>
<Inner
{...props}
promise={promise}
/>
</React.Suspense>
)
}
}
export function make<R = never>() {
return new ReffuseContext<R>()
}
export function useMergeAll<T extends Array<unknown>>(
...contexts: [...{ [K in keyof T]: ReffuseContext<T[K]> }]
): Context.Context<T[number]> {
const values = contexts.map(v => React.use(v.Context))
return React.useMemo(() => Context.mergeAll(...values), values)
}
export function useMergeAllLayers<T extends Array<unknown>>(
...contexts: [...{ [K in keyof T]: ReffuseContext<T[K]> }]
): Layer.Layer<T[number]> {
const values = contexts.map(v => React.use(v.Context))
return React.useMemo(() => Array.isNonEmptyArray(values)
? Layer.mergeAll(
...Array.map(values, context => Layer.effectContext(Effect.succeed(context)))
)
: Layer.empty as Layer.Layer<T[number]>,
values)
}

384
packages/reffuse/src/ReffuseNamespace.ts → packages/reffuse/src/ReffuseHelpers.ts
View File

@@ -1,8 +1,8 @@
import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, Layer, Match, Option, pipe, Pipeable, PubSub, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect" import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, type Layer, Pipeable, Queue, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
import * as React from "react" import * as React from "react"
import * as ReffuseContext from "./ReffuseContext.js" import * as ReffuseContext from "./ReffuseContext.js"
import * as ReffuseRuntime from "./ReffuseRuntime.js" import * as ReffuseRuntime from "./ReffuseRuntime.js"
import { type PropertyPath, SetStateAction, SubscriptionSubRef } from "./types/index.js" import * as SetStateAction from "./SetStateAction.js"
export interface RenderOptions { export interface RenderOptions {
@@ -14,38 +14,21 @@ export interface ScopeOptions {
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
} }
export interface UseScopeOptions extends RenderOptions, ScopeOptions {
readonly scope?: Scope.Scope
readonly finalizerExecutionMode?: "sync" | "fork"
}
export type RefsA<T extends readonly SubscriptionRef.SubscriptionRef<any>[]> = { export abstract class ReffuseHelpers<R> {
[K in keyof T]: Effect.Effect.Success<T[K]> declare ["constructor"]: ReffuseHelpersClass<R>
}
export abstract class ReffuseNamespace<R> { useContext<R>(this: ReffuseHelpers<R>): Context.Context<R> {
declare ["constructor"]: ReffuseNamespaceClass<R>
constructor() {
this.SubRefFromGetSet = this.SubRefFromGetSet.bind(this as any) as any
this.SubRefFromPath = this.SubRefFromPath.bind(this as any) as any
this.SubscribeRefs = this.SubscribeRefs.bind(this as any) as any
this.RefState = this.RefState.bind(this as any) as any
this.SubscribeStream = this.SubscribeStream.bind(this as any) as any
}
useContext<R>(this: ReffuseNamespace<R>): Context.Context<R> {
return ReffuseContext.useMergeAll(...this.constructor.contexts) return ReffuseContext.useMergeAll(...this.constructor.contexts)
} }
useLayer<R>(this: ReffuseNamespace<R>): Layer.Layer<R> { useLayer<R>(this: ReffuseHelpers<R>): Layer.Layer<R> {
return ReffuseContext.useMergeAllLayers(...this.constructor.contexts) return ReffuseContext.useMergeAllLayers(...this.constructor.contexts)
} }
useRunSync<R>(this: ReffuseNamespace<R>): <A, E>(effect: Effect.Effect<A, E, R>) => A { useRunSync<R>(this: ReffuseHelpers<R>): <A, E>(effect: Effect.Effect<A, E, R>) => A {
const runtime = ReffuseRuntime.useRuntime() const runtime = ReffuseRuntime.useRuntime()
const context = this.useContext() const context = this.useContext()
@@ -55,7 +38,7 @@ export abstract class ReffuseNamespace<R> {
), [runtime, context]) ), [runtime, context])
} }
useRunPromise<R>(this: ReffuseNamespace<R>): <A, E>( useRunPromise<R>(this: ReffuseHelpers<R>): <A, E>(
effect: Effect.Effect<A, E, R>, effect: Effect.Effect<A, E, R>,
options?: { readonly signal?: AbortSignal }, options?: { readonly signal?: AbortSignal },
) => Promise<A> { ) => Promise<A> {
@@ -68,7 +51,7 @@ export abstract class ReffuseNamespace<R> {
), [runtime, context]) ), [runtime, context])
} }
useRunFork<R>(this: ReffuseNamespace<R>): <A, E>( useRunFork<R>(this: ReffuseHelpers<R>): <A, E>(
effect: Effect.Effect<A, E, R>, effect: Effect.Effect<A, E, R>,
options?: Runtime.RunForkOptions, options?: Runtime.RunForkOptions,
) => Fiber.RuntimeFiber<A, E> { ) => Fiber.RuntimeFiber<A, E> {
@@ -81,7 +64,7 @@ export abstract class ReffuseNamespace<R> {
), [runtime, context]) ), [runtime, context])
} }
useRunCallback<R>(this: ReffuseNamespace<R>): <A, E>( useRunCallback<R>(this: ReffuseHelpers<R>): <A, E>(
effect: Effect.Effect<A, E, R>, effect: Effect.Effect<A, E, R>,
options?: Runtime.RunCallbackOptions<A, E>, options?: Runtime.RunCallbackOptions<A, E>,
) => Runtime.Cancel<A, E> { ) => Runtime.Cancel<A, E> {
@@ -94,56 +77,6 @@ export abstract class ReffuseNamespace<R> {
), [runtime, context]) ), [runtime, context])
} }
useScope<R>(
this: ReffuseNamespace<R>,
deps: React.DependencyList = [],
options?: UseScopeOptions,
): readonly [scope: Scope.Scope, layer: Layer.Layer<Scope.Scope>] {
const runSync = this.useRunSync()
const runFork = this.useRunFork()
const makeScope = React.useMemo(() => options?.scope
? Scope.fork(options.scope, options.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
: Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
[options?.scope])
const closeScope = (scope: Scope.CloseableScope) => Scope.close(scope, Exit.void).pipe(
effect => Match.value(options?.finalizerExecutionMode ?? "sync").pipe(
Match.when("sync", () => { runSync(effect) }),
Match.when("fork", () => { runFork(effect) }),
Match.exhaustive,
)
)
const [isInitialRun, initialScope] = React.useMemo(() => runSync(
Effect.all([Ref.make(true), makeScope])
), [makeScope])
const [scope, setScope] = React.useState(initialScope)
React.useEffect(() => isInitialRun.pipe(
Effect.if({
onTrue: () => Effect.as(
Ref.set(isInitialRun, false),
() => closeScope(initialScope),
),
onFalse: () => makeScope.pipe(
Effect.tap(v => Effect.sync(() => setScope(v))),
Effect.map(v => () => closeScope(v)),
),
}),
runSync,
), [
makeScope,
...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync, runFork],
...deps,
])
return React.useMemo(() => [scope, Layer.succeed(Scope.Scope, scope)] as const, [scope])
}
/** /**
* Reffuse equivalent to `React.useMemo`. * Reffuse equivalent to `React.useMemo`.
* *
@@ -154,7 +87,7 @@ export abstract class ReffuseNamespace<R> {
* You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`. * You can disable this behavior by setting `doNotReExecuteOnRuntimeOrContextChange` to `true` in `options`.
*/ */
useMemo<A, E, R>( useMemo<A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
effect: () => Effect.Effect<A, E, R>, effect: () => Effect.Effect<A, E, R>,
deps: React.DependencyList, deps: React.DependencyList,
options?: RenderOptions, options?: RenderOptions,
@@ -167,6 +100,56 @@ export abstract class ReffuseNamespace<R> {
]) ])
} }
useMemoScoped<A, E, R>(
this: ReffuseHelpers<R>,
effect: () => Effect.Effect<A, E, R | Scope.Scope>,
deps: React.DependencyList,
options?: RenderOptions & ScopeOptions,
): A {
const runSync = this.useRunSync()
// Calculate an initial version of the value so that it can be accessed during the first render
const [initialScope, initialValue] = React.useMemo(() => Scope.make(options?.finalizerExecutionStrategy).pipe(
Effect.flatMap(scope => effect().pipe(
Effect.provideService(Scope.Scope, scope),
Effect.map(value => [scope, value] as const),
)),
runSync,
), [])
// Keep track of the state of the initial scope
const initialScopeClosed = React.useRef(false)
const [value, setValue] = React.useState(initialValue)
React.useEffect(() => {
const closeInitialScopeIfNeeded = Scope.close(initialScope, Exit.void).pipe(
Effect.andThen(Effect.sync(() => { initialScopeClosed.current = true })),
Effect.when(() => !initialScopeClosed.current),
)
const [scope, value] = closeInitialScopeIfNeeded.pipe(
Effect.andThen(Scope.make(options?.finalizerExecutionStrategy).pipe(
Effect.flatMap(scope => effect().pipe(
Effect.provideService(Scope.Scope, scope),
Effect.map(value => [scope, value] as const),
))
)),
runSync,
)
setValue(value)
return () => { runSync(Scope.close(scope, Exit.void)) }
}, [
...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
...deps,
])
return value
}
/** /**
* Reffuse equivalent to `React.useEffect`. * Reffuse equivalent to `React.useEffect`.
* *
@@ -194,7 +177,7 @@ export abstract class ReffuseNamespace<R> {
* ``` * ```
*/ */
useEffect<A, E, R>( useEffect<A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
effect: () => Effect.Effect<A, E, R | Scope.Scope>, effect: () => Effect.Effect<A, E, R | Scope.Scope>,
deps?: React.DependencyList, deps?: React.DependencyList,
options?: RenderOptions & ScopeOptions, options?: RenderOptions & ScopeOptions,
@@ -242,7 +225,7 @@ export abstract class ReffuseNamespace<R> {
* ``` * ```
*/ */
useLayoutEffect<A, E, R>( useLayoutEffect<A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
effect: () => Effect.Effect<A, E, R | Scope.Scope>, effect: () => Effect.Effect<A, E, R | Scope.Scope>,
deps?: React.DependencyList, deps?: React.DependencyList,
options?: RenderOptions & ScopeOptions, options?: RenderOptions & ScopeOptions,
@@ -290,7 +273,7 @@ export abstract class ReffuseNamespace<R> {
* ``` * ```
*/ */
useFork<A, E, R>( useFork<A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
effect: () => Effect.Effect<A, E, R | Scope.Scope>, effect: () => Effect.Effect<A, E, R | Scope.Scope>,
deps?: React.DependencyList, deps?: React.DependencyList,
options?: Runtime.RunForkOptions & RenderOptions & ScopeOptions, options?: Runtime.RunForkOptions & RenderOptions & ScopeOptions,
@@ -313,7 +296,7 @@ export abstract class ReffuseNamespace<R> {
} }
usePromise<A, E, R>( usePromise<A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
effect: () => Effect.Effect<A, E, R | Scope.Scope>, effect: () => Effect.Effect<A, E, R | Scope.Scope>,
deps?: React.DependencyList, deps?: React.DependencyList,
options?: { readonly signal?: AbortSignal } & Runtime.RunForkOptions & RenderOptions & ScopeOptions, options?: { readonly signal?: AbortSignal } & Runtime.RunForkOptions & RenderOptions & ScopeOptions,
@@ -360,7 +343,7 @@ export abstract class ReffuseNamespace<R> {
} }
useCallbackSync<Args extends unknown[], A, E, R>( useCallbackSync<Args extends unknown[], A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
callback: (...args: Args) => Effect.Effect<A, E, R>, callback: (...args: Args) => Effect.Effect<A, E, R>,
deps: React.DependencyList, deps: React.DependencyList,
options?: RenderOptions, options?: RenderOptions,
@@ -374,7 +357,7 @@ export abstract class ReffuseNamespace<R> {
} }
useCallbackPromise<Args extends unknown[], A, E, R>( useCallbackPromise<Args extends unknown[], A, E, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
callback: (...args: Args) => Effect.Effect<A, E, R>, callback: (...args: Args) => Effect.Effect<A, E, R>,
deps: React.DependencyList, deps: React.DependencyList,
options?: { readonly signal?: AbortSignal } & RenderOptions, options?: { readonly signal?: AbortSignal } & RenderOptions,
@@ -387,73 +370,17 @@ export abstract class ReffuseNamespace<R> {
]) ])
} }
useRef<A, E, R>( useRef<A, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
initialValue: () => Effect.Effect<A, E, R>, value: A,
): SubscriptionRef.SubscriptionRef<A> { ): SubscriptionRef.SubscriptionRef<A> {
return this.useMemo( return this.useMemo(
() => Effect.flatMap(initialValue(), SubscriptionRef.make), () => SubscriptionRef.make(value),
[], [],
{ doNotReExecuteOnRuntimeOrContextChange: true }, // Do not recreate the ref when the context changes { doNotReExecuteOnRuntimeOrContextChange: true }, // Do not recreate the ref when the context changes
) )
} }
useRefFromReactiveValue<A, R>(
this: ReffuseNamespace<R>,
value: A,
): SubscriptionRef.SubscriptionRef<A> {
const ref = this.useRef(() => Effect.succeed(value))
this.useEffect(() => Ref.set(ref, value), [value], { doNotReExecuteOnRuntimeOrContextChange: true })
return ref
}
useSubRefFromGetSet<A, B, R>(
this: ReffuseNamespace<R>,
parent: SubscriptionRef.SubscriptionRef<B>,
getter: (parentValue: B) => A,
setter: (parentValue: B, value: A) => B,
): SubscriptionSubRef.SubscriptionSubRef<A, B> {
return React.useMemo(
() => SubscriptionSubRef.makeFromGetSet(parent, getter, setter),
[parent],
)
}
useSubRefFromPath<B, const P extends PropertyPath.Paths<B>, R>(
this: ReffuseNamespace<R>,
parent: SubscriptionRef.SubscriptionRef<B>,
path: P,
): SubscriptionSubRef.SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B> {
return React.useMemo(
() => SubscriptionSubRef.makeFromPath(parent, path),
[parent, ...path],
)
}
useSubscribeRefs<
const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[],
R,
>(
this: ReffuseNamespace<R>,
...refs: Refs
): RefsA<Refs> {
const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
() => Effect.all(refs as readonly SubscriptionRef.SubscriptionRef<any>[]),
[],
{ doNotReExecuteOnRuntimeOrContextChange: true },
) as RefsA<Refs>)
this.useFork(() => pipe(
refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
streams => Stream.zipLatestAll(...streams),
Stream.runForEach(v =>
Effect.sync(() => setReactStateValue(v as RefsA<Refs>))
),
), refs)
return reactStateValue
}
/** /**
* Binds the state of a `SubscriptionRef` to the state of the React component. * Binds the state of a `SubscriptionRef` to the state of the React component.
* *
@@ -462,19 +389,15 @@ export abstract class ReffuseNamespace<R> {
* Note that the rules of React's immutable state still apply: updating a ref with the same value will not trigger a re-render. * Note that the rules of React's immutable state still apply: updating a ref with the same value will not trigger a re-render.
*/ */
useRefState<A, R>( useRefState<A, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
ref: SubscriptionRef.SubscriptionRef<A>, ref: SubscriptionRef.SubscriptionRef<A>,
): [A, React.Dispatch<React.SetStateAction<A>>] { ): [A, React.Dispatch<React.SetStateAction<A>>] {
const [reactStateValue, setReactStateValue] = React.useState(this.useMemo( const initialState = this.useMemo(() => ref, [], { doNotReExecuteOnRuntimeOrContextChange: true })
() => ref, const [reactStateValue, setReactStateValue] = React.useState(initialState)
[],
{ doNotReExecuteOnRuntimeOrContextChange: true },
))
this.useFork(() => Stream.runForEach( this.useFork(() => Stream.runForEach(ref.changes, v => Effect.sync(() =>
Stream.changesWith(ref.changes, (x, y) => x === y), setReactStateValue(v)
v => Effect.sync(() => setReactStateValue(v)), )), [ref])
), [ref])
const setValue = this.useCallbackSync((setStateAction: React.SetStateAction<A>) => const setValue = this.useCallbackSync((setStateAction: React.SetStateAction<A>) =>
Ref.update(ref, prevState => Ref.update(ref, prevState =>
@@ -485,162 +408,39 @@ export abstract class ReffuseNamespace<R> {
return [reactStateValue, setValue] return [reactStateValue, setValue]
} }
useStreamFromReactiveValues<const A extends React.DependencyList, R>( useStreamFromValues<const A extends React.DependencyList, R>(
this: ReffuseNamespace<R>, this: ReffuseHelpers<R>,
values: A, values: A,
): Stream.Stream<A> { ): Stream.Stream<A> {
const [, scopeLayer] = this.useScope([], { finalizerExecutionMode: "fork" }) const [queue, stream] = this.useMemo(() => Queue.unbounded<A>().pipe(
Effect.map(queue => [queue, Stream.fromQueue(queue)] as const)
), [])
const { latest, pubsub, stream } = this.useMemo(() => Effect.Do.pipe( this.useEffect(() => Queue.offer(queue, values), values)
Effect.bind("latest", () => Ref.make(values)),
Effect.bind("pubsub", () => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown)),
Effect.let("stream", ({ latest, pubsub }) => Ref.get(latest).pipe(
Effect.flatMap(a => Effect.map(
Stream.fromPubSub(pubsub, { scoped: true }),
s => Stream.concat(Stream.make(a), s),
)),
Stream.unwrapScoped,
)),
Effect.provide(scopeLayer),
), [scopeLayer], { doNotReExecuteOnRuntimeOrContextChange: true })
this.useEffect(() => Ref.set(latest, values).pipe(
Effect.andThen(PubSub.publish(pubsub, values)),
Effect.unlessEffect(PubSub.isShutdown(pubsub)),
), values, { doNotReExecuteOnRuntimeOrContextChange: true })
return stream return stream
} }
useSubscribeStream<A, E, R>(
this: ReffuseNamespace<R>,
stream: Stream.Stream<A, E, R>,
): Option.Option<A>
useSubscribeStream<A, E, IE, R>(
this: ReffuseNamespace<R>,
stream: Stream.Stream<A, E, R>,
initialValue: () => Effect.Effect<A, IE, R>,
): Option.Some<A>
useSubscribeStream<A, E, IE, R>(
this: ReffuseNamespace<R>,
stream: Stream.Stream<A, E, R>,
initialValue?: () => Effect.Effect<A, IE, R>,
): Option.Option<A> {
const [reactStateValue, setReactStateValue] = React.useState(this.useMemo(
() => initialValue
? Effect.map(initialValue(), Option.some)
: Effect.succeed(Option.none()),
[],
{ doNotReExecuteOnRuntimeOrContextChange: true },
))
this.useFork(() => Stream.runForEach(
Stream.changesWith(stream, (x, y) => x === y),
v => Effect.sync(() => setReactStateValue(Option.some(v))),
), [stream])
return reactStateValue
}
SubRefFromGetSet<A, B, R>(
this: ReffuseNamespace<R>,
props: {
readonly parent: SubscriptionRef.SubscriptionRef<B>,
readonly getter: (parentValue: B) => A,
readonly setter: (parentValue: B, value: A) => B,
readonly children: (subRef: SubscriptionSubRef.SubscriptionSubRef<A, B>) => React.ReactNode
},
): React.ReactNode {
return props.children(this.useSubRefFromGetSet(props.parent, props.getter, props.setter))
}
SubRefFromPath<B, const P extends PropertyPath.Paths<B>, R>(
this: ReffuseNamespace<R>,
props: {
readonly parent: SubscriptionRef.SubscriptionRef<B>,
readonly path: P,
readonly children: (subRef: SubscriptionSubRef.SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B>) => React.ReactNode
},
): React.ReactNode {
return props.children(this.useSubRefFromPath(props.parent, props.path))
}
SubscribeRefs<
const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[],
R,
>(
this: ReffuseNamespace<R>,
props: {
readonly refs: Refs
readonly children: (...args: RefsA<Refs>) => React.ReactNode
},
): React.ReactNode {
return props.children(...this.useSubscribeRefs(...props.refs))
}
RefState<A, R>(
this: ReffuseNamespace<R>,
props: {
readonly ref: SubscriptionRef.SubscriptionRef<A>
readonly children: (state: [A, React.Dispatch<React.SetStateAction<A>>]) => React.ReactNode
},
): React.ReactNode {
return props.children(this.useRefState(props.ref))
}
SubscribeStream<A, E, R>(
this: ReffuseNamespace<R>,
props: {
readonly stream: Stream.Stream<A, E, R>
readonly children: (latestValue: Option.Option<A>) => React.ReactNode
},
): React.ReactNode
SubscribeStream<A, E, IE, R>(
this: ReffuseNamespace<R>,
props: {
readonly stream: Stream.Stream<A, E, R>
readonly initialValue: () => Effect.Effect<A, IE, R>
readonly children: (latestValue: Option.Some<A>) => React.ReactNode
},
): React.ReactNode
SubscribeStream<A, E, IE, R>(
this: ReffuseNamespace<R>,
props: {
readonly stream: Stream.Stream<A, E, R>
readonly initialValue?: () => Effect.Effect<A, IE, R>
readonly children: (latestValue: Option.Some<A>) => React.ReactNode
},
): React.ReactNode {
return props.children(this.useSubscribeStream(props.stream, props.initialValue as () => Effect.Effect<A, IE, R>))
}
} }
export interface ReffuseNamespace<R> extends Pipeable.Pipeable {} export interface ReffuseHelpers<R> extends Pipeable.Pipeable {}
ReffuseNamespace.prototype.pipe = function pipe() { ReffuseHelpers.prototype.pipe = function pipe() {
return Pipeable.pipeArguments(this, arguments) return Pipeable.pipeArguments(this, arguments)
}; }
export interface ReffuseNamespaceClass<R> extends Pipeable.Pipeable { export interface ReffuseHelpersClass<R> extends Pipeable.Pipeable {
new(): ReffuseNamespace<R> new(): ReffuseHelpers<R>
make<Self>(this: new () => Self): Self
readonly contexts: readonly ReffuseContext.ReffuseContext<R>[] readonly contexts: readonly ReffuseContext.ReffuseContext<R>[]
} }
(ReffuseNamespace as ReffuseNamespaceClass<any>).make = function make() { (ReffuseHelpers as ReffuseHelpersClass<any>).pipe = function pipe() {
return new this()
};
(ReffuseNamespace as ReffuseNamespaceClass<any>).pipe = function pipe() {
return Pipeable.pipeArguments(this, arguments) return Pipeable.pipeArguments(this, arguments)
}; }
export const makeClass = (): ReffuseNamespaceClass<never> => ( export const make = (): ReffuseHelpersClass<never> =>
class extends (ReffuseNamespace<never> as ReffuseNamespaceClass<never>) { class extends (ReffuseHelpers<never> as ReffuseHelpersClass<never>) {
static readonly contexts = [] static readonly contexts = []
} }
)

16
packages/reffuse/src/ReffuseRuntime.ts
View File

@@ -1,16 +0,0 @@
import { Runtime } from "effect"
import * as React from "react"
export const Context = React.createContext<Runtime.Runtime<never>>(null!)
export const Provider = function ReffuseRuntimeReactProvider(props: {
readonly children?: React.ReactNode
}) {
return React.createElement(Context, {
...props,
value: Runtime.defaultRuntime,
})
}
export const useRuntime = () => React.useContext(Context)

15
packages/reffuse/src/ReffuseRuntime.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Runtime } from "effect"
import * as React from "react"
export const Context = React.createContext<Runtime.Runtime<never>>(null!)
export const Provider = (props: { readonly children?: React.ReactNode }) => (
<Context
{...props}
value={Runtime.defaultRuntime}
/>
)
Provider.displayName = "ReffuseRuntimeReactProvider"
export const useRuntime = () => React.useContext(Context)

0
packages/effect-components/src/types/SetStateAction.ts → packages/reffuse/src/SetStateAction.ts
View File

3
packages/reffuse/src/index.ts
View File

@@ -1,5 +1,6 @@
export * as Reffuse from "./Reffuse.js" export * as Reffuse from "./Reffuse.js"
export * as ReffuseContext from "./ReffuseContext.js" export * as ReffuseContext from "./ReffuseContext.js"
export * as ReffuseExtension from "./ReffuseExtension.js" export * as ReffuseExtension from "./ReffuseExtension.js"
export * as ReffuseNamespace from "./ReffuseNamespace.js" export * as ReffuseHelpers from "./ReffuseHelpers.js"
export * as ReffuseRuntime from "./ReffuseRuntime.js" export * as ReffuseRuntime from "./ReffuseRuntime.js"
export * as SetStateAction from "./SetStateAction.js"

10
packages/reffuse/src/utils.ts → packages/reffuse/src/types.ts
View File

@@ -8,4 +8,14 @@ export type CommonKeys<A, B> = Extract<keyof A, keyof B>
*/ */
export type StaticType<T extends abstract new (...args: any) => any> = Omit<T, "prototype"> export type StaticType<T extends abstract new (...args: any) => any> = Omit<T, "prototype">
export type Extend<Super, Self> =
Extendable<Super, Self> extends true
? Omit<Super, CommonKeys<Self, Super>> & Self
: never
export type Extendable<Super, Self> =
Pick<Self, CommonKeys<Self, Super>> extends Pick<Super, CommonKeys<Self, Super>>
? true
: false
export type Merge<Super, Self> = Omit<Super, CommonKeys<Self, Super>> & Self export type Merge<Super, Self> = Omit<Super, CommonKeys<Self, Super>> & Self

99
packages/reffuse/src/types/PropertyPath.ts
View File

@@ -1,99 +0,0 @@
import { Array, Function, Option, Predicate } from "effect"
type Prev = readonly [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
export type Paths<T, D extends number = 5, Seen = never> = [] | (
D extends never ? [] :
T extends Seen ? [] :
T extends readonly any[] ? ArrayPaths<T, D, Seen | T> :
T extends object ? ObjectPaths<T, D, Seen | T> :
never
)
export type ArrayPaths<T extends readonly any[], D extends number, Seen> = {
[K in keyof T as K extends number ? K : never]:
| [K]
| [K, ...Paths<T[K], Prev[D], Seen>]
} extends infer O
? O[keyof O]
: never
export type ObjectPaths<T extends object, D extends number, Seen> = {
[K in keyof T as K extends string | number | symbol ? K : never]-?:
NonNullable<T[K]> extends infer V
? [K] | [K, ...Paths<V, Prev[D], Seen>]
: never
} extends infer O
? O[keyof O]
: never
export type ValueFromPath<T, P extends any[]> = P extends [infer Head, ...infer Tail]
? Head extends keyof T
? ValueFromPath<T[Head], Tail>
: T extends readonly any[]
? Head extends number
? ValueFromPath<T[number], Tail>
: never
: never
: T
export type AnyKey = string | number | symbol
export type AnyPath = readonly AnyKey[]
export const unsafeGet: {
<T, const P extends Paths<T>>(path: P): (self: T) => ValueFromPath<T, P>
<T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P>
} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): ValueFromPath<T, P> =>
path.reduce((acc: any, key: any) => acc?.[key], self)
)
export const get: {
<T, const P extends Paths<T>>(path: P): (self: T) => Option.Option<ValueFromPath<T, P>>
<T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>>
} = Function.dual(2, <T, const P extends Paths<T>>(self: T, path: P): Option.Option<ValueFromPath<T, P>> =>
path.reduce(
(acc: Option.Option<any>, key: any): Option.Option<any> => Option.isSome(acc)
? Predicate.hasProperty(acc.value, key)
? Option.some(acc.value[key])
: Option.none()
: acc,
Option.some(self),
)
)
export const immutableSet: {
<T, const P extends Paths<T>>(path: P, value: ValueFromPath<T, P>): (self: T) => ValueFromPath<T, P>
<T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T>
} = Function.dual(3, <T, const P extends Paths<T>>(self: T, path: P, value: ValueFromPath<T, P>): Option.Option<T> => {
const key = Array.head(path as AnyPath)
if (Option.isNone(key))
return Option.some(value as T)
if (!Predicate.hasProperty(self, key.value))
return Option.none()
const child = immutableSet<any, any>(self[key.value], Option.getOrThrow(Array.tail(path as AnyPath)), value)
if (Option.isNone(child))
return child
if (Array.isArray(self))
return typeof key.value === "number"
? Option.some([
...self.slice(0, key.value),
child.value,
...self.slice(key.value + 1),
] as T)
: Option.none()
if (typeof self === "object")
return Option.some(
Object.assign(
Object.create(Object.getPrototypeOf(self)),
{ ...self, [key.value]: child.value },
)
)
return Option.none()
})

12
packages/reffuse/src/types/SetStateAction.ts
View File

@@ -1,12 +0,0 @@
import { Function } from "effect"
import type * as React from "react"
export const value: {
<S>(prevState: S): (self: React.SetStateAction<S>) => S
<S>(self: React.SetStateAction<S>, prevState: S): S
} = Function.dual(2, <S>(self: React.SetStateAction<S>, prevState: S): S =>
typeof self === "function"
? (self as (prevState: S) => S)(prevState)
: self
)

100
packages/reffuse/src/types/SubscriptionSubRef.ts
View File

@@ -1,100 +0,0 @@
import { Effect, Effectable, Option, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
import * as PropertyPath from "./PropertyPath.js"
export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("reffuse/types/SubscriptionSubRef")
export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
export interface SubscriptionSubRef<in out A, in out B> extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
readonly parent: SubscriptionRef.SubscriptionRef<B>
readonly [Unify.typeSymbol]?: unknown
readonly [Unify.unifySymbol]?: SubscriptionSubRefUnify<this>
readonly [Unify.ignoreSymbol]?: SubscriptionSubRefUnifyIgnore
}
export declare namespace SubscriptionSubRef {
export interface Variance<in out A, in out B> {
readonly [SubscriptionSubRefTypeId]: {
readonly _A: Types.Invariant<A>
readonly _B: Types.Invariant<B>
}
}
}
export interface SubscriptionSubRefUnify<A extends { [Unify.typeSymbol]?: any }> extends SubscriptionRef.SubscriptionRefUnify<A> {
SubscriptionSubRef?: () => Extract<A[Unify.typeSymbol], SubscriptionSubRef<any, any>>
}
export interface SubscriptionSubRefUnifyIgnore extends SubscriptionRef.SubscriptionRefUnifyIgnore {
SubscriptionRef?: true
}
const refVariance = { _A: (_: any) => _ }
const synchronizedRefVariance = { _A: (_: any) => _ }
const subscriptionRefVariance = { _A: (_: any) => _ }
const subscriptionSubRefVariance = { _A: (_: any) => _, _B: (_: any) => _ }
class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> implements SubscriptionSubRef<A, B> {
readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
readonly [Ref.RefTypeId] = refVariance
readonly [SynchronizedRef.SynchronizedRefTypeId] = synchronizedRefVariance
readonly [SubscriptionRef.SubscriptionRefTypeId] = subscriptionRefVariance
readonly [SubscriptionSubRefTypeId] = subscriptionSubRefVariance
readonly get: Effect.Effect<A>
constructor(
readonly parent: SubscriptionRef.SubscriptionRef<B>,
readonly getter: (parentValue: B) => A,
readonly setter: (parentValue: B, value: A) => B,
) {
super()
this.get = Effect.map(Ref.get(this.parent), this.getter)
}
commit() {
return this.get
}
get changes(): Stream.Stream<A> {
return this.get.pipe(
Effect.map(a => this.parent.changes.pipe(
Stream.map(this.getter),
s => Stream.concat(Stream.make(a), s),
)),
Stream.unwrap,
)
}
modify<C>(f: (a: A) => readonly [C, A]): Effect.Effect<C> {
return this.modifyEffect(a => Effect.succeed(f(a)))
}
modifyEffect<C, E, R>(f: (a: A) => Effect.Effect<readonly [C, A], E, R>): Effect.Effect<C, E, R> {
return Effect.Do.pipe(
Effect.bind("b", () => Ref.get(this.parent)),
Effect.bind("ca", ({ b }) => f(this.getter(b))),
Effect.tap(({ b, ca: [, a] }) => Ref.set(this.parent, this.setter(b, a))),
Effect.map(({ ca: [c] }) => c),
)
}
}
export const makeFromGetSet = <A, B>(
parent: SubscriptionRef.SubscriptionRef<B>,
getter: (parentValue: B) => A,
setter: (parentValue: B, value: A) => B,
): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, getter, setter)
export const makeFromPath = <B, const P extends PropertyPath.Paths<B>>(
parent: SubscriptionRef.SubscriptionRef<B>,
path: P,
): SubscriptionSubRef<PropertyPath.ValueFromPath<B, P>, B> => new SubscriptionSubRefImpl(
parent,
parentValue => Option.getOrThrow(PropertyPath.get(parentValue, path)),
(parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
)

3
packages/reffuse/src/types/index.ts
View File

@@ -1,3 +0,0 @@
export * as PropertyPath from "./PropertyPath.js"
export * as SetStateAction from "./SetStateAction.js"
export * as SubscriptionSubRef from "./SubscriptionSubRef.js"

8
packages/reffuse/tsconfig.json
View File

@@ -26,13 +26,7 @@
// Build // Build
"outDir": "./dist", "outDir": "./dist",
"declaration": true, "declaration": true
"plugins": [
{
"name": "@effect/language-service"
}
]
}, },
"include": ["./src"] "include": ["./src"]