Compare commits
44 Commits
master
...
3708059da4
| Author | SHA1 | Date | |
|---|---|---|---|
| 3708059da4 | |||
|
cd8b5e6364 | ||
|
|
a48b623822 | ||
|
|
499e1e174b | ||
|
|
6b9c177ae7 | ||
|
|
b73b053cc8 | ||
|
|
bbad86bf97 | ||
|
|
6ae311cdfd | ||
|
|
03eca8a1af | ||
|
|
c03d697361 | ||
|
|
3847686d54 | ||
|
|
9801444c0a | ||
|
|
68d8c9fa84 | ||
|
|
cba42bfa52 | ||
|
|
874da0b963 | ||
|
|
bb0579408d | ||
|
|
b39c5946f9 | ||
|
|
aaf494e27a | ||
|
|
dbc5694b6d | ||
|
|
86582de0c5 | ||
|
|
72495bb9b5 | ||
|
|
312c103e71 | ||
|
|
a252cfec27 | ||
|
|
4a5f4c329d | ||
|
|
6f96608f64 | ||
| 0bc29b2cb9 | |||
|
|
8642619a6a | ||
|
|
e8b8df9449 | ||
|
|
3695128923 | ||
|
|
1f14e8be6b | ||
|
|
adc8835304 | ||
|
|
8b06c56ec0 | ||
|
|
003d2f19a2 | ||
|
|
15f6d695f8 | ||
|
|
64583601dc | ||
|
|
cf4ba5805f | ||
|
|
90db94e905 | ||
|
|
336ea67ea2 | ||
|
|
1af839f036 | ||
|
|
6bdf2a4d87 | ||
| 8d55a67e75 | |||
|
|
a1ec5c4781 | ||
| 756b652861 | |||
| 59f9358b9a |
6
bun.lock
6
bun.lock
@@ -5,7 +5,7 @@
|
||||
"name": "@effect-fc/monorepo",
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^2.2.5",
|
||||
"@effect/language-service": "^0.45.0",
|
||||
"@effect/language-service": "^0.48.0",
|
||||
"@types/bun": "^1.2.23",
|
||||
"npm-check-updates": "^19.0.0",
|
||||
"npm-sort": "^0.0.4",
|
||||
@@ -15,7 +15,7 @@
|
||||
},
|
||||
"packages/effect-fc": {
|
||||
"name": "effect-fc",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.5",
|
||||
"dependencies": {
|
||||
"@typed/async-data": "^0.13.1",
|
||||
},
|
||||
@@ -135,7 +135,7 @@
|
||||
|
||||
"@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],
|
||||
|
||||
"@effect/language-service": ["@effect/language-service@0.45.1", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-SEZ9TaVCpRKYumTQJPApg3os9O94bN2lCYQLgZbyK/xD+NSfYPPJZQ+6T5LkpcNgW8BRk1ACI7S1W2/noxm7Qg=="],
|
||||
"@effect/language-service": ["@effect/language-service@0.48.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-u7DTPoGFFeDGSdomjY5C2nCGNWSisxpYSqHp3dlSG8kCZh5cay+166bveHRYvuJSJS5yomdkPTJwjwrqMmT7Og=="],
|
||||
|
||||
"@effect/platform": ["@effect/platform@0.92.1", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.18.1" } }, "sha512-XXWCBVwyhaKZISN7aM1fv/3fWDGyxr84ObywnUrL8aHvJLoIeskWFAP/fqw3c5MFCrJ3ZV97RWLbv6JiBQugdg=="],
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^2.2.5",
|
||||
"@effect/language-service": "^0.45.0",
|
||||
"@effect/language-service": "^0.48.0",
|
||||
"@types/bun": "^1.2.23",
|
||||
"npm-check-updates": "^19.0.0",
|
||||
"npm-sort": "^0.0.4",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "effect-fc",
|
||||
"description": "Write React function components with Effect",
|
||||
"version": "0.1.5",
|
||||
"version": "0.2.0",
|
||||
"type": "module",
|
||||
"files": [
|
||||
"./README.md",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
/** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
|
||||
import { Effect, Function, Predicate, Runtime, Scope } from "effect"
|
||||
import * as React from "react"
|
||||
import type * as Component from "./Component.js"
|
||||
import * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const TypeId: unique symbol = Symbol.for("effect-fc/Async")
|
||||
export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
|
||||
export type TypeId = typeof TypeId
|
||||
|
||||
export interface Async extends Async.Options {
|
||||
@@ -26,13 +26,15 @@ const SuspenseProto = Object.freeze({
|
||||
makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
|
||||
this: Component.Component<P, A, E, R> & Async,
|
||||
runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
|
||||
scope: Scope.Scope,
|
||||
) {
|
||||
const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
|
||||
|
||||
return ({ fallback, name, ...props }: Async.Props) => {
|
||||
const promise = Runtime.runPromise(runtimeRef.current)(
|
||||
Effect.provideService(this.body(props as P), Scope.Scope, scope)
|
||||
Effect.andThen(
|
||||
Component.useScope([], this),
|
||||
scope => Effect.provideService(this.body(props as P), Scope.Scope, scope),
|
||||
)
|
||||
)
|
||||
|
||||
return React.createElement(
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
/** biome-ignore-all lint/complexity/noBannedTypes: {} is the default type for React props */
|
||||
/** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
|
||||
import { Context, Effect, Effectable, ExecutionStrategy, Function, Predicate, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
|
||||
import { Context, type Duration, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
|
||||
import * as React from "react"
|
||||
import * as Hooks from "./Hooks/index.js"
|
||||
import { Memoized } from "./index.js"
|
||||
|
||||
|
||||
export const TypeId: unique symbol = Symbol.for("effect-fc/Component")
|
||||
export const TypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
|
||||
export type TypeId = typeof TypeId
|
||||
|
||||
export interface Component<P extends {}, A extends React.ReactNode, E, R>
|
||||
@@ -26,8 +25,7 @@ extends
|
||||
|
||||
/** @internal */
|
||||
makeFunctionComponent(
|
||||
runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
|
||||
scope: Scope.Scope,
|
||||
runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
|
||||
): (props: P) => A
|
||||
}
|
||||
|
||||
@@ -41,8 +39,8 @@ export namespace Component {
|
||||
|
||||
export interface Options {
|
||||
readonly displayName?: string
|
||||
readonly finalizerExecutionMode: "sync" | "fork"
|
||||
readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
|
||||
readonly finalizerExecutionDebounce: Duration.DurationInput
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,46 +52,41 @@ const ComponentProto = Object.freeze({
|
||||
commit: Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
|
||||
this: Component<P, A, E, R>
|
||||
) {
|
||||
const self = this
|
||||
// biome-ignore lint/style/noNonNullAssertion: React ref initialization
|
||||
const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
|
||||
runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
|
||||
|
||||
return React.useRef(function ScopeProvider(props: P) {
|
||||
const scope = Runtime.runSync(runtimeRef.current)(Hooks.useScope(
|
||||
Array.from(
|
||||
Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
|
||||
),
|
||||
self,
|
||||
))
|
||||
|
||||
const FC = React.useMemo(() => {
|
||||
const f: React.FC<P> = self.makeFunctionComponent(runtimeRef, scope)
|
||||
f.displayName = self.displayName ?? "Anonymous"
|
||||
return Memoized.isMemoized(self)
|
||||
? React.memo(f, self.propsAreEqual)
|
||||
return yield* React.useState(() => Runtime.runSync(runtimeRef.current)(Effect.cachedFunction(
|
||||
(_services: readonly any[]) => Effect.sync(() => {
|
||||
const f: React.FC<P> = this.makeFunctionComponent(runtimeRef)
|
||||
f.displayName = this.displayName ?? "Anonymous"
|
||||
return Memoized.isMemoized(this)
|
||||
? React.memo(f, this.propsAreEqual)
|
||||
: f
|
||||
}, [scope])
|
||||
|
||||
return React.createElement(FC, props)
|
||||
}).current
|
||||
}),
|
||||
Equivalence.array(Equivalence.strict()),
|
||||
)))[0](Array.from(
|
||||
Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
|
||||
))
|
||||
}),
|
||||
|
||||
makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
|
||||
this: Component<P, A, E, R>,
|
||||
runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
|
||||
scope: Scope.Scope,
|
||||
) {
|
||||
return (props: P) => Runtime.runSync(runtimeRef.current)(
|
||||
Effect.provideService(this.body(props), Scope.Scope, scope)
|
||||
Effect.andThen(
|
||||
useScope([], this),
|
||||
scope => Effect.provideService(this.body(props), Scope.Scope, scope),
|
||||
)
|
||||
)
|
||||
},
|
||||
} as const)
|
||||
|
||||
const defaultOptions = {
|
||||
finalizerExecutionMode: "sync",
|
||||
const defaultOptions: Component.Options = {
|
||||
finalizerExecutionStrategy: ExecutionStrategy.sequential,
|
||||
} as const
|
||||
finalizerExecutionDebounce: "100 millis",
|
||||
}
|
||||
|
||||
const nonReactiveTags = [Tracer.ParentSpan] as const
|
||||
|
||||
@@ -407,3 +400,238 @@ export const withRuntime: {
|
||||
props,
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
export class ScopeMap extends Effect.Service<ScopeMap>()("effect-fc/Component/ScopeMap", {
|
||||
effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<object, ScopeMap.Entry>()))
|
||||
}) {}
|
||||
|
||||
export namespace ScopeMap {
|
||||
export interface Entry {
|
||||
readonly scope: Scope.CloseableScope
|
||||
readonly closeFiber: Option.Option<Fiber.RuntimeFiber<void>>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export namespace useScope {
|
||||
export interface Options {
|
||||
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
|
||||
readonly finalizerExecutionDebounce?: Duration.DurationInput
|
||||
}
|
||||
}
|
||||
|
||||
export const useScope: {
|
||||
(
|
||||
deps: React.DependencyList,
|
||||
options?: useScope.Options,
|
||||
): Effect.Effect<Scope.Scope>
|
||||
} = Effect.fnUntraced(function*(deps, options) {
|
||||
// biome-ignore lint/style/noNonNullAssertion: context initialization
|
||||
const runtimeRef = React.useRef<Runtime.Runtime<never>>(null!)
|
||||
runtimeRef.current = yield* Effect.runtime()
|
||||
|
||||
const scopeMap = yield* ScopeMap as unknown as Effect.Effect<ScopeMap>
|
||||
|
||||
const [key, scope] = React.useMemo(() => Runtime.runSync(runtimeRef.current)(Effect.andThen(
|
||||
Effect.all([Effect.succeed({}), scopeMap.ref]),
|
||||
([key, map]) => Effect.andThen(
|
||||
Option.match(HashMap.get(map, key), {
|
||||
onSome: entry => Effect.succeed(entry.scope),
|
||||
onNone: () => Effect.tap(
|
||||
Scope.make(options?.finalizerExecutionStrategy ?? defaultOptions.finalizerExecutionStrategy),
|
||||
scope => Ref.update(scopeMap.ref, HashMap.set(key, {
|
||||
scope,
|
||||
closeFiber: Option.none(),
|
||||
})),
|
||||
),
|
||||
}),
|
||||
scope => [key, scope] as const,
|
||||
),
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
)), deps)
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: only reactive on "key"
|
||||
React.useEffect(() => Runtime.runSync(runtimeRef.current)(scopeMap.ref.pipe(
|
||||
Effect.andThen(HashMap.get(key)),
|
||||
Effect.tap(entry => Option.match(entry.closeFiber, {
|
||||
onSome: fiber => Effect.andThen(
|
||||
Ref.update(scopeMap.ref, HashMap.set(key, { ...entry, closeFiber: Option.none() })),
|
||||
Fiber.interruptFork(fiber),
|
||||
),
|
||||
onNone: () => Effect.void,
|
||||
})),
|
||||
Effect.map(({ scope }) =>
|
||||
() => Runtime.runSync(runtimeRef.current)(Effect.andThen(
|
||||
Effect.forkDaemon(Effect.sleep(options?.finalizerExecutionDebounce ?? defaultOptions.finalizerExecutionDebounce).pipe(
|
||||
Effect.andThen(Scope.close(scope, Exit.void)),
|
||||
Effect.andThen(Ref.update(scopeMap.ref, HashMap.remove(key))),
|
||||
)),
|
||||
fiber => Ref.update(scopeMap.ref, HashMap.set(key, {
|
||||
scope,
|
||||
closeFiber: Option.some(fiber),
|
||||
})),
|
||||
))
|
||||
),
|
||||
)), [key])
|
||||
|
||||
return scope
|
||||
})
|
||||
|
||||
export const useOnMount: {
|
||||
<A, E, R>(
|
||||
f: () => Effect.Effect<A, E, R>
|
||||
): Effect.Effect<A, E, R>
|
||||
} = Effect.fnUntraced(function* <A, E, R>(
|
||||
f: () => Effect.Effect<A, E, R>
|
||||
) {
|
||||
const runtime = yield* Effect.runtime<R>()
|
||||
return yield* React.useState(() => Runtime.runSync(runtime)(Effect.cached(f())))[0]
|
||||
})
|
||||
|
||||
export namespace useOnChange {
|
||||
export type Options = useScope.Options
|
||||
}
|
||||
|
||||
export const useOnChange: {
|
||||
<A, E, R>(
|
||||
f: () => Effect.Effect<A, E, R>,
|
||||
deps: React.DependencyList,
|
||||
options?: useOnChange.Options,
|
||||
): Effect.Effect<A, E, Exclude<R, Scope.Scope>>
|
||||
} = Effect.fnUntraced(function* <A, E, R>(
|
||||
f: () => Effect.Effect<A, E, R>,
|
||||
deps: React.DependencyList,
|
||||
options?: useOnChange.Options,
|
||||
) {
|
||||
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
|
||||
const scope = yield* useScope(deps, options)
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: only reactive on "scope"
|
||||
return yield* React.useMemo(() => Runtime.runSync(runtime)(
|
||||
Effect.cached(Effect.provideService(f(), Scope.Scope, scope))
|
||||
), [scope])
|
||||
})
|
||||
|
||||
export namespace useReactEffect {
|
||||
export interface Options {
|
||||
readonly finalizerExecutionMode?: "sync" | "fork"
|
||||
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
|
||||
}
|
||||
}
|
||||
|
||||
export const useReactEffect: {
|
||||
<E, R>(
|
||||
f: () => Effect.Effect<void, E, R>,
|
||||
deps?: React.DependencyList,
|
||||
options?: useReactEffect.Options,
|
||||
): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
|
||||
} = Effect.fnUntraced(function* <E, R>(
|
||||
f: () => Effect.Effect<void, E, R>,
|
||||
deps?: React.DependencyList,
|
||||
options?: useReactEffect.Options,
|
||||
) {
|
||||
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
React.useEffect(() => runReactEffect(runtime, f, options), deps)
|
||||
})
|
||||
|
||||
const runReactEffect = <E, R>(
|
||||
runtime: Runtime.Runtime<Exclude<R, Scope.Scope>>,
|
||||
f: () => Effect.Effect<void, E, R>,
|
||||
options?: useReactEffect.Options,
|
||||
) => Effect.Do.pipe(
|
||||
Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? defaultOptions.finalizerExecutionStrategy)),
|
||||
Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(f(), Scope.Scope, scope))),
|
||||
Effect.map(({ scope }) =>
|
||||
() => {
|
||||
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
|
||||
}
|
||||
}
|
||||
),
|
||||
Runtime.runSync(runtime),
|
||||
)
|
||||
|
||||
export namespace useReactLayoutEffect {
|
||||
export type Options = useReactEffect.Options
|
||||
}
|
||||
|
||||
export const useReactLayoutEffect: {
|
||||
<E, R>(
|
||||
f: () => Effect.Effect<void, E, R>,
|
||||
deps?: React.DependencyList,
|
||||
options?: useReactLayoutEffect.Options,
|
||||
): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
|
||||
} = Effect.fnUntraced(function* <E, R>(
|
||||
f: () => Effect.Effect<void, E, R>,
|
||||
deps?: React.DependencyList,
|
||||
options?: useReactLayoutEffect.Options,
|
||||
) {
|
||||
const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
React.useLayoutEffect(() => runReactEffect(runtime, f, options), deps)
|
||||
})
|
||||
|
||||
export const useCallbackSync: {
|
||||
<Args extends unknown[], A, E, R>(
|
||||
f: (...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>(
|
||||
f: (...args: Args) => Effect.Effect<A, E, R>,
|
||||
deps: React.DependencyList,
|
||||
) {
|
||||
// biome-ignore lint/style/noNonNullAssertion: context initialization
|
||||
const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
|
||||
runtimeRef.current = yield* Effect.runtime<R>()
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
return React.useCallback((...args: Args) => Runtime.runSync(runtimeRef.current)(f(...args)), deps)
|
||||
})
|
||||
|
||||
export const useCallbackPromise: {
|
||||
<Args extends unknown[], A, E, R>(
|
||||
f: (...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>(
|
||||
f: (...args: Args) => Effect.Effect<A, E, R>,
|
||||
deps: React.DependencyList,
|
||||
) {
|
||||
// biome-ignore lint/style/noNonNullAssertion: context initialization
|
||||
const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
|
||||
runtimeRef.current = yield* Effect.runtime<R>()
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
return React.useCallback((...args: Args) => Runtime.runPromise(runtimeRef.current)(f(...args)), deps)
|
||||
})
|
||||
|
||||
export namespace useContext {
|
||||
export type Options = useScope.Options
|
||||
}
|
||||
|
||||
export const useContext: {
|
||||
<ROut, E, RIn>(
|
||||
layer: Layer.Layer<ROut, E, RIn>,
|
||||
options?: useContext.Options,
|
||||
): Effect.Effect<Context.Context<ROut>, E, RIn>
|
||||
} = Effect.fnUntraced(function* <ROut, E, RIn>(
|
||||
layer: Layer.Layer<ROut, E, RIn>,
|
||||
options?: useContext.Options,
|
||||
) {
|
||||
const scope = yield* useScope([layer], options)
|
||||
|
||||
return yield* useOnChange(() => Effect.context<RIn>().pipe(
|
||||
Effect.map(context => ManagedRuntime.make(Layer.provide(layer, Layer.succeedContext(context)))),
|
||||
Effect.tap(runtime => Effect.addFinalizer(() => runtime.disposeEffect)),
|
||||
Effect.andThen(runtime => runtime.runtimeEffect),
|
||||
Effect.andThen(runtime => runtime.context),
|
||||
Effect.provideService(Scope.Scope, scope),
|
||||
), [scope])
|
||||
})
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import * as AsyncData from "@typed/async-data"
|
||||
import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream, SubscriptionRef } from "effect"
|
||||
import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
|
||||
import type { NoSuchElementException } from "effect/Cause"
|
||||
import * as React from "react"
|
||||
import * as Hooks from "./Hooks/index.js"
|
||||
import * as Component from "./Component.js"
|
||||
import * as PropertyPath from "./PropertyPath.js"
|
||||
import * as Subscribable from "./Subscribable.js"
|
||||
import * as SubscriptionRef from "./SubscriptionRef.js"
|
||||
import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
|
||||
|
||||
|
||||
export const FormTypeId: unique symbol = Symbol.for("effect-fc/Form")
|
||||
export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
|
||||
export type FormTypeId = typeof FormTypeId
|
||||
|
||||
export interface Form<in out A, in out I = A, out R = never, in out SA = void, in out SE = A, out SR = never>
|
||||
@@ -17,6 +18,7 @@ extends Pipeable.Pipeable {
|
||||
|
||||
readonly schema: Schema.Schema<A, I, R>
|
||||
readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>
|
||||
readonly autosubmit: boolean
|
||||
readonly debounce: Option.Option<Duration.DurationInput>
|
||||
|
||||
readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>
|
||||
@@ -35,6 +37,7 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
|
||||
constructor(
|
||||
readonly schema: Schema.Schema<A, I, R>,
|
||||
readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
|
||||
readonly autosubmit: boolean,
|
||||
readonly debounce: Option.Option<Duration.DurationInput>,
|
||||
|
||||
readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
|
||||
@@ -52,11 +55,15 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
|
||||
export const isForm = (u: unknown): u is Form<unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
|
||||
|
||||
export namespace make {
|
||||
export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never> {
|
||||
export interface Options<in out A, in out I, in out R, in out SA = void, in out SE = A, out SR = never> {
|
||||
readonly schema: Schema.Schema<A, I, R>
|
||||
readonly initialEncodedValue: NoInfer<I>
|
||||
readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
|
||||
readonly debounce?: Duration.DurationInput,
|
||||
readonly onSubmit: (
|
||||
this: Form<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>,
|
||||
value: NoInfer<A>,
|
||||
) => Effect.Effect<SA, SE, SR>
|
||||
readonly autosubmit?: boolean
|
||||
readonly debounce?: Duration.DurationInput
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,6 +82,7 @@ export const make: {
|
||||
return new FormImpl(
|
||||
options.schema,
|
||||
options.onSubmit,
|
||||
options.autosubmit ?? false,
|
||||
Option.fromNullable(options.debounce),
|
||||
|
||||
valueRef,
|
||||
@@ -97,7 +105,7 @@ export const make: {
|
||||
|
||||
export const run = <A, I, R, SA, SE, SR>(
|
||||
self: Form<A, I, R, SA, SE, SR>
|
||||
): Effect.Effect<void, never, Scope.Scope | R> => Stream.runForEach(
|
||||
): Effect.Effect<void, never, Scope.Scope | R | SR> => Stream.runForEach(
|
||||
self.encodedValueRef.changes.pipe(
|
||||
Option.isSome(self.debounce) ? Stream.debounce(self.debounce.value) : identity
|
||||
),
|
||||
@@ -108,30 +116,35 @@ export const run = <A, I, R, SA, SE, SR>(
|
||||
onNone: () => Effect.void,
|
||||
})),
|
||||
Effect.andThen(
|
||||
Effect.addFinalizer(() => SubscriptionRef.set(self.validationFiberRef, Option.none())).pipe(
|
||||
Effect.addFinalizer(() => Ref.set(self.validationFiberRef, Option.none())).pipe(
|
||||
Effect.andThen(Schema.decode(self.schema, { errors: "all" })(encodedValue)),
|
||||
Effect.exit,
|
||||
Effect.andThen(flow(
|
||||
Exit.matchEffect({
|
||||
onSuccess: v => Effect.andThen(
|
||||
SubscriptionRef.set(self.valueRef, Option.some(v)),
|
||||
SubscriptionRef.set(self.errorRef, Option.none()),
|
||||
onSuccess: v => Ref.set(self.valueRef, Option.some(v)).pipe(
|
||||
Effect.andThen(Ref.set(self.errorRef, Option.none())),
|
||||
Effect.as(Option.some(v)),
|
||||
),
|
||||
onFailure: c => Option.match(
|
||||
Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"),
|
||||
{
|
||||
onSome: e => SubscriptionRef.set(self.errorRef, Option.some(e)),
|
||||
onFailure: c => Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError").pipe(
|
||||
Option.match({
|
||||
onSome: e => Ref.set(self.errorRef, Option.some(e)),
|
||||
onNone: () => Effect.void,
|
||||
},
|
||||
}),
|
||||
Effect.as(Option.none<A>()),
|
||||
),
|
||||
}),
|
||||
Effect.uninterruptible,
|
||||
)),
|
||||
Effect.scoped,
|
||||
|
||||
Effect.andThen(value => Option.isSome(value) && self.autosubmit
|
||||
? Effect.asVoid(Effect.forkScoped(submit(self)))
|
||||
: Effect.void
|
||||
),
|
||||
Effect.forkScoped,
|
||||
)
|
||||
),
|
||||
Effect.andThen(fiber => SubscriptionRef.set(self.validationFiberRef, Option.some(fiber)))
|
||||
Effect.andThen(fiber => Ref.set(self.validationFiberRef, Option.some(fiber)))
|
||||
),
|
||||
)
|
||||
|
||||
@@ -157,13 +170,13 @@ export const submit = <A, I, R, SA, SE, SR>(
|
||||
)
|
||||
|
||||
export namespace service {
|
||||
export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
|
||||
export interface Options<in out A, in out I, in out R, in out SA = void, in out SE = A, out SR = never>
|
||||
extends make.Options<A, I, R, SA, SE, SR> {}
|
||||
}
|
||||
|
||||
export const service = <A, I = A, R = never, SA = void, SE = A, SR = never>(
|
||||
options: service.Options<A, I, R, SA, SE, SR>
|
||||
): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R | Scope.Scope> => Effect.tap(
|
||||
): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, Scope.Scope | R | SR> => Effect.tap(
|
||||
make(options),
|
||||
form => Effect.forkScoped(run(form)),
|
||||
)
|
||||
@@ -220,24 +233,6 @@ extends Pipeable.Class() implements FormField<A, I> {
|
||||
|
||||
export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Predicate.hasProperty(u, FormFieldTypeId)
|
||||
|
||||
export namespace useForm {
|
||||
export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
|
||||
extends make.Options<A, I, R, SA, SE, SR> {}
|
||||
}
|
||||
|
||||
export const useForm: {
|
||||
<A, I = A, R = never, SA = void, SE = A, SR = never>(
|
||||
options: make.Options<A, I, R, SA, SE, SR>,
|
||||
deps: React.DependencyList,
|
||||
): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R>
|
||||
} = Effect.fnUntraced(function* <A, I = A, R = never, SA = void, SE = A, SR = never>(
|
||||
options: make.Options<A, I, R, SA, SE, SR>,
|
||||
deps: React.DependencyList,
|
||||
) {
|
||||
const form = yield* Hooks.useMemo(() => make(options), [options.debounce, ...deps])
|
||||
yield* Hooks.useFork(() => run(form), [form])
|
||||
return form
|
||||
})
|
||||
|
||||
export const useSubmit = <A, I, R, SA, SE, SR>(
|
||||
self: Form<A, I, R, SA, SE, SR>
|
||||
@@ -245,7 +240,7 @@ export const useSubmit = <A, I, R, SA, SE, SR>(
|
||||
() => Promise<Option.Option<AsyncData.AsyncData<SA, SE>>>,
|
||||
never,
|
||||
SR
|
||||
> => Hooks.useCallbackPromise(() => submit(self), [self])
|
||||
> => Component.useCallbackPromise(() => submit(self), [self])
|
||||
|
||||
export const useField = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<NoInfer<I>>>(
|
||||
self: Form<A, I, R, SA, SE, SR>,
|
||||
@@ -271,15 +266,14 @@ export const useInput: {
|
||||
<A, I>(
|
||||
field: FormField<A, I>,
|
||||
options?: useInput.Options,
|
||||
): Effect.Effect<useInput.Result<I>, NoSuchElementException>
|
||||
): Effect.Effect<useInput.Result<I>, NoSuchElementException, Scope.Scope>
|
||||
} = Effect.fnUntraced(function* <A, I>(
|
||||
field: FormField<A, I>,
|
||||
options?: useInput.Options,
|
||||
) {
|
||||
const internalValueRef = yield* Hooks.useMemo(() => Effect.andThen(field.encodedValueRef, SubscriptionRef.make), [field])
|
||||
const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
|
||||
|
||||
yield* Hooks.useFork(() => Effect.all([
|
||||
const internalValueRef = yield* Component.useOnChange(() => Effect.tap(
|
||||
Effect.andThen(field.encodedValueRef, SubscriptionRef.make),
|
||||
internalValueRef => Effect.forkScoped(Effect.all([
|
||||
Stream.runForEach(
|
||||
Stream.drop(field.encodedValueRef, 1),
|
||||
upstreamEncodedValue => Effect.whenEffect(
|
||||
@@ -296,8 +290,10 @@ export const useInput: {
|
||||
),
|
||||
internalValue => Ref.set(field.encodedValueRef, internalValue),
|
||||
),
|
||||
], { concurrency: "unbounded" }), [field, internalValueRef, options?.debounce])
|
||||
], { concurrency: "unbounded" })),
|
||||
), [field, options?.debounce])
|
||||
|
||||
const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
|
||||
return { value, setValue }
|
||||
})
|
||||
|
||||
@@ -316,23 +312,21 @@ export const useOptionalInput: {
|
||||
<A, I>(
|
||||
field: FormField<A, Option.Option<I>>,
|
||||
options: useOptionalInput.Options<I>,
|
||||
): Effect.Effect<useOptionalInput.Result<I>, NoSuchElementException>
|
||||
): Effect.Effect<useOptionalInput.Result<I>, NoSuchElementException, Scope.Scope>
|
||||
} = Effect.fnUntraced(function* <A, I>(
|
||||
field: FormField<A, Option.Option<I>>,
|
||||
options: useOptionalInput.Options<I>,
|
||||
) {
|
||||
const [enabledRef, internalValueRef] = yield* Hooks.useMemo(() => Effect.andThen(
|
||||
const [enabledRef, internalValueRef] = yield* Component.useOnChange(() => Effect.tap(
|
||||
Effect.andThen(
|
||||
field.encodedValueRef,
|
||||
Option.match({
|
||||
onSome: v => Effect.all([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
|
||||
onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
|
||||
}),
|
||||
), [field])
|
||||
),
|
||||
|
||||
const [enabled, setEnabled] = yield* Hooks.useRefState(enabledRef)
|
||||
const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
|
||||
|
||||
yield* Hooks.useFork(() => Effect.all([
|
||||
([enabledRef, internalValueRef]) => Effect.forkScoped(Effect.all([
|
||||
Stream.runForEach(
|
||||
Stream.drop(field.encodedValueRef, 1),
|
||||
|
||||
@@ -364,7 +358,10 @@ export const useOptionalInput: {
|
||||
),
|
||||
([enabled, internalValue]) => Ref.set(field.encodedValueRef, enabled ? Option.some(internalValue) : Option.none()),
|
||||
),
|
||||
], { concurrency: "unbounded" }), [field, enabledRef, internalValueRef, options.debounce])
|
||||
], { concurrency: "unbounded" })),
|
||||
), [field, options.debounce])
|
||||
|
||||
const [enabled, setEnabled] = yield* SubscriptionRef.useSubscriptionRefState(enabledRef)
|
||||
const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
|
||||
return { enabled, setEnabled, value, setValue }
|
||||
})
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import type { ExecutionStrategy } from "effect"
|
||||
|
||||
|
||||
export interface ScopeOptions {
|
||||
readonly finalizerExecutionMode?: "sync" | "fork"
|
||||
readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
export * from "./input/index.js"
|
||||
export * from "./ScopeOptions.js"
|
||||
export * from "./useCallbackPromise.js"
|
||||
export * from "./useCallbackSync.js"
|
||||
export * from "./useContext.js"
|
||||
export * from "./useEffect.js"
|
||||
export * from "./useFork.js"
|
||||
export * from "./useLayoutEffect.js"
|
||||
export * from "./useMemo.js"
|
||||
export * from "./useOnce.js"
|
||||
export * from "./useRefFromState.js"
|
||||
export * from "./useRefState.js"
|
||||
export * from "./useScope.js"
|
||||
export * from "./useStreamFromReactiveValues.js"
|
||||
export * from "./useSubscribables.js"
|
||||
export * from "./useSubscribeStream.js"
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from "./useInput.js"
|
||||
export * from "./useOptionalInput.js"
|
||||
@@ -1,67 +0,0 @@
|
||||
import { type Duration, Effect, Equal, Equivalence, flow, identity, Option, type ParseResult, Ref, Schema, Stream, SubscriptionRef } from "effect"
|
||||
import * as React from "react"
|
||||
import { useFork } from "../useFork.js"
|
||||
import { useOnce } from "../useOnce.js"
|
||||
import { useRefState } from "../useRefState.js"
|
||||
|
||||
|
||||
export namespace useInput {
|
||||
export interface Options<A, R> {
|
||||
readonly schema: Schema.Schema<A, string, R>
|
||||
readonly equivalence?: Equivalence.Equivalence<A>
|
||||
readonly ref: SubscriptionRef.SubscriptionRef<A>
|
||||
readonly debounce?: Duration.DurationInput
|
||||
}
|
||||
|
||||
export interface Result {
|
||||
readonly value: string
|
||||
readonly setValue: React.Dispatch<React.SetStateAction<string>>
|
||||
readonly error: Option.Option<ParseResult.ParseError>
|
||||
}
|
||||
}
|
||||
|
||||
export const useInput: {
|
||||
<A, R>(options: useInput.Options<A, R>): Effect.Effect<useInput.Result, ParseResult.ParseError, R>
|
||||
} = Effect.fnUntraced(function* <A, R>(options: useInput.Options<A, R>) {
|
||||
const internalRef = yield* useOnce(() => options.ref.pipe(
|
||||
Effect.andThen(Schema.encode(options.schema)),
|
||||
Effect.andThen(SubscriptionRef.make),
|
||||
))
|
||||
const [error, setError] = React.useState(Option.none<ParseResult.ParseError>())
|
||||
|
||||
yield* useFork(() => Effect.all([
|
||||
// Sync the upstream state with the internal state
|
||||
// Only mutate the internal state if the upstream value is actually different. This avoids infinite re-render loops.
|
||||
Stream.runForEach(Stream.changesWith(options.ref.changes, Equivalence.strict()), upstreamValue =>
|
||||
Effect.whenEffect(
|
||||
Effect.andThen(
|
||||
Schema.encode(options.schema)(upstreamValue),
|
||||
encodedUpstreamValue => Ref.set(internalRef, encodedUpstreamValue),
|
||||
),
|
||||
internalRef.pipe(
|
||||
Effect.andThen(Schema.decode(options.schema)),
|
||||
Effect.andThen(decodedInternalValue => !(options.equivalence ?? Equal.equals)(upstreamValue, decodedInternalValue)),
|
||||
Effect.catchTag("ParseError", () => Effect.succeed(false)),
|
||||
),
|
||||
)
|
||||
),
|
||||
|
||||
// Sync all changes to the internal state with upstream
|
||||
Stream.runForEach(
|
||||
internalRef.changes.pipe(
|
||||
Stream.changesWith(Equivalence.strict()),
|
||||
options.debounce ? Stream.debounce(options.debounce) : identity,
|
||||
Stream.drop(1),
|
||||
),
|
||||
flow(
|
||||
Schema.decode(options.schema),
|
||||
Effect.andThen(v => Ref.set(options.ref, v)),
|
||||
Effect.andThen(() => setError(Option.none())),
|
||||
Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
|
||||
),
|
||||
),
|
||||
], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])
|
||||
|
||||
const [value, setValue] = yield* useRefState(internalRef)
|
||||
return { value, setValue, error }
|
||||
})
|
||||
@@ -1,107 +0,0 @@
|
||||
import { type Duration, Effect, Equal, Equivalence, flow, identity, Option, type ParseResult, Ref, Schema, Stream, SubscriptionRef } from "effect"
|
||||
import * as React from "react"
|
||||
import * as SetStateAction from "../../SetStateAction.js"
|
||||
import { useCallbackSync } from "../useCallbackSync.js"
|
||||
import { useFork } from "../useFork.js"
|
||||
import { useOnce } from "../useOnce.js"
|
||||
import { useRefState } from "../useRefState.js"
|
||||
import { useSubscribables } from "../useSubscribables.js"
|
||||
|
||||
|
||||
export namespace useOptionalInput {
|
||||
export interface Options<A, R> {
|
||||
readonly schema: Schema.Schema<A, string, R>
|
||||
readonly defaultValue?: A
|
||||
readonly equivalence?: Equivalence.Equivalence<A>
|
||||
readonly ref: SubscriptionRef.SubscriptionRef<Option.Option<A>>
|
||||
readonly debounce?: Duration.DurationInput
|
||||
}
|
||||
|
||||
export interface Result {
|
||||
readonly value: string
|
||||
readonly setValue: React.Dispatch<React.SetStateAction<string>>
|
||||
readonly enabled: boolean
|
||||
readonly setEnabled: React.Dispatch<React.SetStateAction<boolean>>
|
||||
readonly error: Option.Option<ParseResult.ParseError>
|
||||
}
|
||||
}
|
||||
|
||||
export const useOptionalInput: {
|
||||
<A, R>(options: useOptionalInput.Options<A, R>): Effect.Effect<useOptionalInput.Result, ParseResult.ParseError, R>
|
||||
} = Effect.fnUntraced(function* <A, R>(options: useOptionalInput.Options<A, R>) {
|
||||
const [internalRef, enabledRef] = yield* useOnce(() => Effect.andThen(options.ref, upstreamValue =>
|
||||
Effect.all([
|
||||
Effect.andThen(
|
||||
Option.match(upstreamValue, {
|
||||
onSome: Schema.encode(options.schema),
|
||||
onNone: () => options.defaultValue
|
||||
? Schema.encode(options.schema)(options.defaultValue)
|
||||
: Effect.succeed(""),
|
||||
}),
|
||||
SubscriptionRef.make,
|
||||
),
|
||||
|
||||
SubscriptionRef.make(Option.isSome(upstreamValue)),
|
||||
])
|
||||
))
|
||||
|
||||
const [error, setError] = React.useState(Option.none<ParseResult.ParseError>())
|
||||
|
||||
yield* useFork(() => Effect.all([
|
||||
// Sync the upstream state with the internal state
|
||||
// Only mutate the internal state if the upstream value is actually different. This avoids infinite re-render loops.
|
||||
Stream.runForEach(Stream.changesWith(options.ref.changes, Equivalence.strict()), Option.match({
|
||||
onSome: upstreamValue => Effect.andThen(
|
||||
Ref.set(enabledRef, true),
|
||||
|
||||
Effect.whenEffect(
|
||||
Effect.andThen(
|
||||
Schema.encode(options.schema)(upstreamValue),
|
||||
encodedUpstreamValue => Ref.set(internalRef, encodedUpstreamValue),
|
||||
),
|
||||
internalRef.pipe(
|
||||
Effect.andThen(Schema.decode(options.schema)),
|
||||
Effect.andThen(decodedInternalValue => !(options.equivalence ?? Equal.equals)(upstreamValue, decodedInternalValue)),
|
||||
Effect.catchTag("ParseError", () => Effect.succeed(false)),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
onNone: () => Ref.set(enabledRef, false),
|
||||
})),
|
||||
|
||||
// Sync all changes to the internal state with upstream
|
||||
Stream.runForEach(
|
||||
internalRef.changes.pipe(
|
||||
Stream.changesWith(Equivalence.strict()),
|
||||
options.debounce ? Stream.debounce(options.debounce) : identity,
|
||||
Stream.drop(1),
|
||||
),
|
||||
flow(
|
||||
Schema.decode(options.schema),
|
||||
Effect.andThen(v => Ref.set(options.ref, Option.some(v))),
|
||||
Effect.andThen(() => setError(Option.none())),
|
||||
Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
|
||||
),
|
||||
),
|
||||
], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])
|
||||
|
||||
const setEnabled = yield* useCallbackSync(
|
||||
(setStateAction: React.SetStateAction<boolean>) => Effect.andThen(
|
||||
Ref.updateAndGet(enabledRef, prevState => SetStateAction.value(setStateAction, prevState)),
|
||||
enabled => enabled
|
||||
? internalRef.pipe(
|
||||
Effect.andThen(Schema.decode(options.schema)),
|
||||
Effect.andThen(v => Ref.set(options.ref, Option.some(v))),
|
||||
Effect.andThen(() => setError(Option.none())),
|
||||
Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
|
||||
)
|
||||
: Ref.set(options.ref, Option.none()),
|
||||
),
|
||||
[options.schema, options.ref, internalRef, enabledRef],
|
||||
)
|
||||
|
||||
const [enabled] = yield* useSubscribables(enabledRef)
|
||||
const [value, setValue] = yield* useRefState(internalRef)
|
||||
return { value, setValue, enabled, setEnabled, error }
|
||||
})
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Exit, Runtime, Scope } from "effect"
|
||||
import type { ScopeOptions } from "./ScopeOptions.js"
|
||||
|
||||
|
||||
export 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
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Effect, Runtime } from "effect"
|
||||
import * as React from "react"
|
||||
|
||||
|
||||
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,
|
||||
) {
|
||||
// biome-ignore lint/style/noNonNullAssertion: context initialization
|
||||
const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
|
||||
runtimeRef.current = yield* Effect.runtime<R>()
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
return React.useCallback((...args: Args) => Runtime.runPromise(runtimeRef.current)(callback(...args)), deps)
|
||||
})
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Effect, Runtime } from "effect"
|
||||
import * as React from "react"
|
||||
|
||||
|
||||
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,
|
||||
) {
|
||||
// biome-ignore lint/style/noNonNullAssertion: context initialization
|
||||
const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
|
||||
runtimeRef.current = yield* Effect.runtime<R>()
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
return React.useCallback((...args: Args) => Runtime.runSync(runtimeRef.current)(callback(...args)), deps)
|
||||
})
|
||||
@@ -1,25 +0,0 @@
|
||||
import { type Context, Effect, Layer, ManagedRuntime, Scope } from "effect"
|
||||
import type { ScopeOptions } from "./ScopeOptions.js"
|
||||
import { useMemo } from "./useMemo.js"
|
||||
import { useScope } from "./useScope.js"
|
||||
|
||||
|
||||
export const useContext: {
|
||||
<ROut, E, RIn>(
|
||||
layer: Layer.Layer<ROut, E, RIn>,
|
||||
options?: ScopeOptions,
|
||||
): Effect.Effect<Context.Context<ROut>, E, RIn>
|
||||
} = Effect.fnUntraced(function* <ROut, E, RIn>(
|
||||
layer: Layer.Layer<ROut, E, RIn>,
|
||||
options?: ScopeOptions,
|
||||
) {
|
||||
const scope = yield* useScope([layer], options)
|
||||
|
||||
return yield* useMemo(() => Effect.context<RIn>().pipe(
|
||||
Effect.map(context => ManagedRuntime.make(Layer.provide(layer, Layer.succeedContext(context)))),
|
||||
Effect.tap(runtime => Effect.addFinalizer(() => runtime.disposeEffect)),
|
||||
Effect.andThen(runtime => runtime.runtimeEffect),
|
||||
Effect.andThen(runtime => runtime.context),
|
||||
Effect.provideService(Scope.Scope, scope),
|
||||
), [scope])
|
||||
})
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
|
||||
import * as React from "react"
|
||||
import { closeScope } from "./internal.js"
|
||||
import type { ScopeOptions } from "./ScopeOptions.js"
|
||||
|
||||
|
||||
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(() => Effect.Do.pipe(
|
||||
Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
|
||||
Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
|
||||
Effect.map(({ scope }) =>
|
||||
() => closeScope(scope, runtime, options)
|
||||
),
|
||||
Runtime.runSync(runtime),
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
), deps)
|
||||
})
|
||||
@@ -1,32 +0,0 @@
|
||||
import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
|
||||
import * as React from "react"
|
||||
import { closeScope } from "./internal.js"
|
||||
import type { ScopeOptions } from "./ScopeOptions.js"
|
||||
|
||||
|
||||
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 ?? ExecutionStrategy.sequential)
|
||||
)
|
||||
Runtime.runFork(runtime)(Effect.provideService(effect(), Scope.Scope, scope), { ...options, scope })
|
||||
return () => closeScope(scope, runtime, {
|
||||
...options,
|
||||
finalizerExecutionMode: options?.finalizerExecutionMode ?? "fork",
|
||||
})
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
}, deps)
|
||||
})
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
|
||||
import * as React from "react"
|
||||
import { closeScope } from "./internal.js"
|
||||
import type { ScopeOptions } from "./ScopeOptions.js"
|
||||
|
||||
|
||||
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(() => Effect.Do.pipe(
|
||||
Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
|
||||
Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
|
||||
Effect.map(({ scope }) =>
|
||||
() => closeScope(scope, runtime, options)
|
||||
),
|
||||
Runtime.runSync(runtime),
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
), deps)
|
||||
})
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Effect, Runtime } from "effect"
|
||||
import * as React from "react"
|
||||
|
||||
|
||||
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()
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(factory())), deps)
|
||||
})
|
||||
@@ -1,11 +0,0 @@
|
||||
import { Effect } from "effect"
|
||||
import { useMemo } from "./useMemo.js"
|
||||
|
||||
|
||||
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, [])
|
||||
})
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Effect, Equivalence, Ref, Stream, SubscriptionRef } from "effect"
|
||||
import type * as React from "react"
|
||||
import { useEffect } from "./useEffect.js"
|
||||
import { useFork } from "./useFork.js"
|
||||
import { useOnce } from "./useOnce.js"
|
||||
|
||||
|
||||
export const useRefFromState: {
|
||||
<A>(state: readonly [A, React.Dispatch<React.SetStateAction<A>>]): Effect.Effect<SubscriptionRef.SubscriptionRef<A>>
|
||||
} = Effect.fnUntraced(function*([value, setValue]) {
|
||||
const ref = yield* useOnce(() => SubscriptionRef.make(value))
|
||||
|
||||
yield* useEffect(() => Ref.set(ref, value), [value])
|
||||
yield* useFork(() => Stream.runForEach(
|
||||
Stream.changesWith(ref.changes, Equivalence.strict()),
|
||||
v => Effect.sync(() => setValue(v)),
|
||||
), [setValue])
|
||||
|
||||
return ref
|
||||
})
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Effect, Equivalence, Ref, Stream, type SubscriptionRef } from "effect"
|
||||
import * as React from "react"
|
||||
import * as SetStateAction from "../SetStateAction.js"
|
||||
import { useCallbackSync } from "./useCallbackSync.js"
|
||||
import { useFork } from "./useFork.js"
|
||||
import { useOnce } from "./useOnce.js"
|
||||
|
||||
|
||||
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, Equivalence.strict()),
|
||||
v => Effect.sync(() => setReactStateValue(v)),
|
||||
), [ref])
|
||||
|
||||
const setValue = yield* useCallbackSync((setStateAction: React.SetStateAction<A>) =>
|
||||
Effect.andThen(
|
||||
Ref.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
|
||||
v => setReactStateValue(v),
|
||||
),
|
||||
[ref])
|
||||
|
||||
return [reactStateValue, setValue]
|
||||
})
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Effect, ExecutionStrategy, Ref, Runtime, Scope } from "effect"
|
||||
import * as React from "react"
|
||||
import { closeScope } from "./internal.js"
|
||||
import type { ScopeOptions } from "./ScopeOptions.js"
|
||||
|
||||
|
||||
export const useScope: {
|
||||
(
|
||||
deps: React.DependencyList,
|
||||
options?: ScopeOptions,
|
||||
): Effect.Effect<Scope.Scope>
|
||||
} = Effect.fnUntraced(function*(deps, options) {
|
||||
const runtime = yield* Effect.runtime()
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: no reactivity needed
|
||||
const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(Effect.all([
|
||||
Ref.make(true),
|
||||
Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
|
||||
])), [])
|
||||
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: () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential).pipe(
|
||||
Effect.tap(scope => Effect.sync(() => setScope(scope))),
|
||||
Effect.map(scope => () => closeScope(scope, runtime, options)),
|
||||
),
|
||||
})
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
|
||||
), deps)
|
||||
|
||||
return scope
|
||||
})
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Effect, PubSub, Ref, type Scope, Stream } from "effect"
|
||||
import type * as React from "react"
|
||||
import { useEffect } from "./useEffect.js"
|
||||
import { useOnce } from "./useOnce.js"
|
||||
|
||||
|
||||
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
|
||||
})
|
||||
@@ -1,31 +0,0 @@
|
||||
import { Effect, Equivalence, pipe, Stream, type Subscribable } from "effect"
|
||||
import * as React from "react"
|
||||
import { useFork } from "./useFork.js"
|
||||
import { useOnce } from "./useOnce.js"
|
||||
|
||||
|
||||
export const useSubscribables: {
|
||||
<const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
|
||||
...elements: T
|
||||
): Effect.Effect<
|
||||
{ [K in keyof T]: Effect.Effect.Success<T[K]["get"]> | Stream.Stream.Success<T[K]["changes"]> },
|
||||
Effect.Effect.Error<T[number]["get"]> | Stream.Stream.Error<T[number]["changes"]>,
|
||||
Effect.Effect.Context<T[number]["get"]> | Stream.Stream.Context<T[number]["changes"]>
|
||||
>
|
||||
} = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
|
||||
...elements: T
|
||||
) {
|
||||
const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() =>
|
||||
Effect.all(elements.map(v => v.get))
|
||||
))
|
||||
|
||||
yield* useFork(() => pipe(
|
||||
elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
|
||||
streams => Stream.zipLatestAll(...streams),
|
||||
Stream.runForEach(v =>
|
||||
Effect.sync(() => setReactStateValue(v))
|
||||
),
|
||||
), elements)
|
||||
|
||||
return reactStateValue as any
|
||||
})
|
||||
@@ -1,32 +0,0 @@
|
||||
import { Effect, Equivalence, Option, Stream } from "effect"
|
||||
import * as React from "react"
|
||||
import { useFork } from "./useFork.js"
|
||||
|
||||
|
||||
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(
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: no reactivity needed
|
||||
React.useMemo(() => initialValue
|
||||
? Option.some(initialValue)
|
||||
: Option.none(),
|
||||
[])
|
||||
)
|
||||
|
||||
yield* useFork(() => Stream.runForEach(
|
||||
Stream.changesWith(stream, Equivalence.strict()),
|
||||
v => Effect.sync(() => setReactStateValue(Option.some(v))),
|
||||
), [stream])
|
||||
|
||||
return reactStateValue as Option.Some<A>
|
||||
})
|
||||
@@ -3,7 +3,7 @@ import { type Equivalence, Function, Predicate } from "effect"
|
||||
import type * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const TypeId: unique symbol = Symbol.for("effect-fc/Memoized")
|
||||
export const TypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
|
||||
export type TypeId = typeof TypeId
|
||||
|
||||
export interface Memoized<P> extends Memoized.Options<P> {
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
|
||||
import { Effect, type Layer, ManagedRuntime, Predicate, type Runtime } from "effect"
|
||||
import { Effect, Layer, ManagedRuntime, Predicate, type Runtime } from "effect"
|
||||
import * as React from "react"
|
||||
import * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const TypeId: unique symbol = Symbol.for("effect-fc/ReactRuntime")
|
||||
export const TypeId: unique symbol = Symbol.for("@effect-fc/ReactRuntime/ReactRuntime")
|
||||
export type TypeId = typeof TypeId
|
||||
|
||||
export interface ReactRuntime<R, ER> {
|
||||
@@ -21,9 +22,12 @@ export const isReactRuntime = (u: unknown): u is ReactRuntime<unknown, unknown>
|
||||
export const make = <R, ER>(
|
||||
layer: Layer.Layer<R, ER>,
|
||||
memoMap?: Layer.MemoMap,
|
||||
): ReactRuntime<R, ER> => Object.setPrototypeOf(
|
||||
): ReactRuntime<R | Component.ScopeMap, ER> => Object.setPrototypeOf(
|
||||
Object.assign(function() {}, {
|
||||
runtime: ManagedRuntime.make(layer, memoMap),
|
||||
runtime: ManagedRuntime.make(
|
||||
Layer.merge(layer, Component.ScopeMap.Default),
|
||||
memoMap,
|
||||
),
|
||||
// biome-ignore lint/style/noNonNullAssertion: context initialization
|
||||
context: React.createContext<Runtime.Runtime<R>>(null!),
|
||||
}),
|
||||
|
||||
58
packages/effect-fc/src/Stream.ts
Normal file
58
packages/effect-fc/src/Stream.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Effect, Equivalence, Option, PubSub, Ref, type Scope, Stream } from "effect"
|
||||
import * as React from "react"
|
||||
import * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const useStream: {
|
||||
<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(() => initialValue
|
||||
? Option.some(initialValue)
|
||||
: Option.none()
|
||||
)
|
||||
|
||||
yield* Component.useReactEffect(() => Effect.forkScoped(
|
||||
Stream.runForEach(
|
||||
Stream.changesWith(stream, Equivalence.strict()),
|
||||
v => Effect.sync(() => setReactStateValue(Option.some(v))),
|
||||
)
|
||||
), [stream])
|
||||
|
||||
return reactStateValue as Option.Some<A>
|
||||
})
|
||||
|
||||
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* Component.useOnMount(() => 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* Component.useReactEffect(() => Ref.set(latest, values).pipe(
|
||||
Effect.andThen(PubSub.publish(pubsub, values)),
|
||||
Effect.unlessEffect(PubSub.isShutdown(pubsub)),
|
||||
), values)
|
||||
|
||||
return stream
|
||||
})
|
||||
|
||||
export * from "effect/Stream"
|
||||
@@ -1,17 +1,47 @@
|
||||
import { Effect, Stream, Subscribable } from "effect"
|
||||
import { Effect, Equivalence, pipe, type Scope, Stream, Subscribable } from "effect"
|
||||
import * as React from "react"
|
||||
import * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const zipLatestAll = <T extends ReadonlyArray<Subscribable.Subscribable<any, any, any>>>(
|
||||
...subscribables: T
|
||||
export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
|
||||
...elements: T
|
||||
): Subscribable.Subscribable<
|
||||
[T[number]] extends [never]
|
||||
? never
|
||||
: { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
|
||||
[T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _E : never,
|
||||
[T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _R : never
|
||||
[T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
|
||||
[T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never
|
||||
> => Subscribable.make({
|
||||
get: Effect.all(subscribables.map(v => v.get)),
|
||||
changes: Stream.zipLatestAll(...subscribables.map(v => v.changes)),
|
||||
get: Effect.all(elements.map(v => v.get)),
|
||||
changes: Stream.zipLatestAll(...elements.map(v => v.changes)),
|
||||
}) as any
|
||||
|
||||
export const useSubscribables: {
|
||||
<const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
|
||||
...elements: T
|
||||
): Effect.Effect<
|
||||
[T[number]] extends [never]
|
||||
? never
|
||||
: { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
|
||||
[T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
|
||||
([T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never) | Scope.Scope
|
||||
>
|
||||
} = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
|
||||
...elements: T
|
||||
) {
|
||||
const [reactStateValue, setReactStateValue] = React.useState(
|
||||
yield* Component.useOnMount(() => Effect.all(elements.map(v => v.get)))
|
||||
)
|
||||
|
||||
yield* Component.useReactEffect(() => Effect.forkScoped(pipe(
|
||||
elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
|
||||
streams => Stream.zipLatestAll(...streams),
|
||||
Stream.runForEach(v =>
|
||||
Effect.sync(() => setReactStateValue(v))
|
||||
),
|
||||
)), elements)
|
||||
|
||||
return reactStateValue as any
|
||||
})
|
||||
|
||||
export * from "effect/Subscribable"
|
||||
|
||||
48
packages/effect-fc/src/SubscriptionRef.ts
Normal file
48
packages/effect-fc/src/SubscriptionRef.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Effect, Equivalence, Ref, type Scope, Stream, SubscriptionRef } from "effect"
|
||||
import * as React from "react"
|
||||
import * as Component from "./Component.js"
|
||||
import * as SetStateAction from "./SetStateAction.js"
|
||||
|
||||
|
||||
export const useSubscriptionRefState: {
|
||||
<A>(
|
||||
ref: SubscriptionRef.SubscriptionRef<A>
|
||||
): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>], never, Scope.Scope>
|
||||
} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
|
||||
const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))
|
||||
|
||||
yield* Component.useReactEffect(() => Effect.forkScoped(
|
||||
Stream.runForEach(
|
||||
Stream.changesWith(ref.changes, Equivalence.strict()),
|
||||
v => Effect.sync(() => setReactStateValue(v)),
|
||||
)
|
||||
), [ref])
|
||||
|
||||
const setValue = yield* Component.useCallbackSync((setStateAction: React.SetStateAction<A>) =>
|
||||
Effect.andThen(
|
||||
Ref.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
|
||||
v => setReactStateValue(v),
|
||||
),
|
||||
[ref])
|
||||
|
||||
return [reactStateValue, setValue]
|
||||
})
|
||||
|
||||
export const useSubscriptionRefFromState: {
|
||||
<A>(state: readonly [A, React.Dispatch<React.SetStateAction<A>>]): Effect.Effect<SubscriptionRef.SubscriptionRef<A>, never, Scope.Scope>
|
||||
} = Effect.fnUntraced(function*([value, setValue]) {
|
||||
const ref = yield* Component.useOnChange(() => Effect.tap(
|
||||
SubscriptionRef.make(value),
|
||||
ref => Effect.forkScoped(
|
||||
Stream.runForEach(
|
||||
Stream.changesWith(ref.changes, Equivalence.strict()),
|
||||
v => Effect.sync(() => setValue(v)),
|
||||
)
|
||||
),
|
||||
), [setValue])
|
||||
|
||||
yield* Component.useReactEffect(() => Ref.set(ref, value), [value])
|
||||
return ref
|
||||
})
|
||||
|
||||
export * from "effect/SubscriptionRef"
|
||||
@@ -2,7 +2,7 @@ import { Chunk, Effect, Effectable, Option, Predicate, Readable, Ref, Stream, Su
|
||||
import * as PropertyPath from "./PropertyPath.js"
|
||||
|
||||
|
||||
export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("effect-fc/SubscriptionSubRef")
|
||||
export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("effect-fc/SubscriptionSubRef/SubscriptionSubRef")
|
||||
export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
|
||||
|
||||
export interface SubscriptionSubRef<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
export * as Async from "./Async.js"
|
||||
export * as Component from "./Component.js"
|
||||
export * as Form from "./Form.js"
|
||||
export * as Hooks from "./Hooks/index.js"
|
||||
export * as Memoized from "./Memoized.js"
|
||||
export * as PropertyPath from "./PropertyPath.js"
|
||||
export * as ReactRuntime from "./ReactRuntime.js"
|
||||
export * as SetStateAction from "./SetStateAction.js"
|
||||
export * as Stream from "./Stream.js"
|
||||
export * as Subscribable from "./Subscribable.js"
|
||||
export * as SubscriptionRef from "./SubscriptionRef.js"
|
||||
export * as SubscriptionSubRef from "./SubscriptionSubRef.js"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { assertEncodedJsonifiable } from "@/lib/schema"
|
||||
import { Schema } from "effect"
|
||||
import { assertEncodedJsonifiable } from "@/lib/schema"
|
||||
|
||||
|
||||
export class Todo extends Schema.Class<Todo>("Todo")({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
|
||||
import { Array, Option, Struct } from "effect"
|
||||
import { Component, Form, Hooks } from "effect-fc"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
|
||||
|
||||
interface Props
|
||||
@@ -18,8 +18,7 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
|
||||
export type TextFieldFormInputProps = Props | OptionalProps
|
||||
|
||||
|
||||
export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(
|
||||
function*(props: TextFieldFormInputProps) {
|
||||
export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
|
||||
const input: (
|
||||
| { readonly optional: true } & Form.useOptionalInput.Result<string>
|
||||
| { readonly optional: false } & Form.useInput.Result<string>
|
||||
@@ -29,7 +28,7 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
|
||||
// biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
|
||||
: { optional: false, ...yield* Form.useInput(props.field, props) }
|
||||
|
||||
const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
|
||||
const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
|
||||
props.field.issuesSubscribable,
|
||||
props.field.isValidatingSubscribable,
|
||||
props.field.isSubmittingSubscribable,
|
||||
@@ -73,5 +72,4 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
|
||||
})}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
) {}
|
||||
}) {}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
|
||||
import { Callout, Flex, TextArea, type TextAreaProps } from "@radix-ui/themes"
|
||||
import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
|
||||
import { Component } from "effect-fc"
|
||||
import { useInput } from "effect-fc/Hooks"
|
||||
import * as React from "react"
|
||||
|
||||
|
||||
export type TextAreaInputProps<A, R> = Omit<useInput.Options<A, R>, "schema" | "equivalence"> & Omit<TextAreaProps, "ref">
|
||||
|
||||
export const TextAreaInput = <A, R>(options: {
|
||||
readonly schema: Schema.Schema<A, string, R>
|
||||
readonly equivalence?: Equivalence.Equivalence<A>
|
||||
}): Component.Component<
|
||||
TextAreaInputProps<A, R>,
|
||||
React.JSX.Element,
|
||||
ParseResult.ParseError,
|
||||
R
|
||||
> => Component.makeUntraced("TextFieldInput")(function*(props) {
|
||||
const input = yield* useInput({ ...options, ...props })
|
||||
const issue = React.useMemo(() => input.error.pipe(
|
||||
Option.map(ParseResult.ArrayFormatter.formatErrorSync),
|
||||
Option.flatMap(Array.head),
|
||||
), [input.error])
|
||||
|
||||
return (
|
||||
<Flex direction="column" gap="1">
|
||||
<TextArea
|
||||
value={input.value}
|
||||
onChange={e => input.setValue(e.target.value)}
|
||||
{...Struct.omit(props, "ref")}
|
||||
/>
|
||||
|
||||
{Option.isSome(issue) &&
|
||||
<Callout.Root color="red" role="alert">
|
||||
<Callout.Text>{issue.value.message}</Callout.Text>
|
||||
</Callout.Root>
|
||||
}
|
||||
</Flex>
|
||||
)
|
||||
})
|
||||
@@ -1,69 +0,0 @@
|
||||
/** biome-ignore-all lint/correctness/useHookAtTopLevel: effect-fc HOC */
|
||||
import { Callout, Checkbox, Flex, TextField } from "@radix-ui/themes"
|
||||
import { Array, type Equivalence, Option, ParseResult, type Schema, Struct } from "effect"
|
||||
import { Component } from "effect-fc"
|
||||
import { useInput, useOptionalInput } from "effect-fc/Hooks"
|
||||
import * as React from "react"
|
||||
|
||||
|
||||
export type TextFieldInputProps<A, R> = (
|
||||
& Omit<useInput.Options<A, R>, "schema" | "equivalence">
|
||||
& Omit<TextField.RootProps, "ref">
|
||||
)
|
||||
export type TextFieldOptionalInputProps<A, R> = (
|
||||
& Omit<useOptionalInput.Options<A, R>, "schema" | "equivalence">
|
||||
& Omit<TextField.RootProps, "ref" | "defaultValue">
|
||||
)
|
||||
|
||||
export const TextFieldInput = <A, R, O extends boolean = false>(options: {
|
||||
readonly optional?: O
|
||||
readonly schema: Schema.Schema<A, string, R>
|
||||
readonly equivalence?: Equivalence.Equivalence<A>
|
||||
}) => Component.makeUntraced("TextFieldInput")(function*(props: O extends true
|
||||
? TextFieldOptionalInputProps<A, R>
|
||||
: TextFieldInputProps<A, R>
|
||||
) {
|
||||
const input: (
|
||||
| { readonly optional: true } & useOptionalInput.Result
|
||||
| { readonly optional: false } & useInput.Result
|
||||
) = options.optional
|
||||
? {
|
||||
optional: true,
|
||||
...yield* useOptionalInput({ ...options, ...props as TextFieldOptionalInputProps<A, R> }),
|
||||
}
|
||||
: {
|
||||
optional: false,
|
||||
...yield* useInput({ ...options, ...props as TextFieldInputProps<A, R> }),
|
||||
}
|
||||
|
||||
const issue = React.useMemo(() => input.error.pipe(
|
||||
Option.map(ParseResult.ArrayFormatter.formatErrorSync),
|
||||
Option.flatMap(Array.head),
|
||||
), [input.error])
|
||||
|
||||
return (
|
||||
<Flex direction="column" gap="1">
|
||||
<Flex direction="row" align="center" gap="1">
|
||||
{input.optional &&
|
||||
<Checkbox
|
||||
checked={input.enabled}
|
||||
onCheckedChange={checked => input.setEnabled(checked !== "indeterminate" && checked)}
|
||||
/>
|
||||
}
|
||||
|
||||
<TextField.Root
|
||||
value={input.value}
|
||||
onChange={e => input.setValue(e.target.value)}
|
||||
disabled={input.optional ? !input.enabled : undefined}
|
||||
{...Struct.omit(props as TextFieldOptionalInputProps<A, R> | TextFieldInputProps<A, R>, "ref", "defaultValue")}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
{(!(input.optional && !input.enabled) && Option.isSome(issue)) &&
|
||||
<Callout.Root color="red" role="alert">
|
||||
<Callout.Text>{issue.value.message}</Callout.Text>
|
||||
</Callout.Root>
|
||||
}
|
||||
</Flex>
|
||||
)
|
||||
})
|
||||
@@ -13,7 +13,7 @@ import { Route as FormRouteImport } from './routes/form'
|
||||
import { Route as BlankRouteImport } from './routes/blank'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as DevMemoRouteImport } from './routes/dev/memo'
|
||||
import { Route as DevInputRouteImport } from './routes/dev/input'
|
||||
import { Route as DevContextRouteImport } from './routes/dev/context'
|
||||
import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
|
||||
|
||||
const FormRoute = FormRouteImport.update({
|
||||
@@ -36,9 +36,9 @@ const DevMemoRoute = DevMemoRouteImport.update({
|
||||
path: '/dev/memo',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DevInputRoute = DevInputRouteImport.update({
|
||||
id: '/dev/input',
|
||||
path: '/dev/input',
|
||||
const DevContextRoute = DevContextRouteImport.update({
|
||||
id: '/dev/context',
|
||||
path: '/dev/context',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DevAsyncRenderingRoute = DevAsyncRenderingRouteImport.update({
|
||||
@@ -52,7 +52,7 @@ export interface FileRoutesByFullPath {
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/dev/async-rendering': typeof DevAsyncRenderingRoute
|
||||
'/dev/input': typeof DevInputRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
@@ -60,7 +60,7 @@ export interface FileRoutesByTo {
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/dev/async-rendering': typeof DevAsyncRenderingRoute
|
||||
'/dev/input': typeof DevInputRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
@@ -69,7 +69,7 @@ export interface FileRoutesById {
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/dev/async-rendering': typeof DevAsyncRenderingRoute
|
||||
'/dev/input': typeof DevInputRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
@@ -79,7 +79,7 @@ export interface FileRouteTypes {
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/dev/async-rendering'
|
||||
| '/dev/input'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
@@ -87,7 +87,7 @@ export interface FileRouteTypes {
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/dev/async-rendering'
|
||||
| '/dev/input'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
id:
|
||||
| '__root__'
|
||||
@@ -95,7 +95,7 @@ export interface FileRouteTypes {
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/dev/async-rendering'
|
||||
| '/dev/input'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
@@ -104,7 +104,7 @@ export interface RootRouteChildren {
|
||||
BlankRoute: typeof BlankRoute
|
||||
FormRoute: typeof FormRoute
|
||||
DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
|
||||
DevInputRoute: typeof DevInputRoute
|
||||
DevContextRoute: typeof DevContextRoute
|
||||
DevMemoRoute: typeof DevMemoRoute
|
||||
}
|
||||
|
||||
@@ -138,11 +138,11 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof DevMemoRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dev/input': {
|
||||
id: '/dev/input'
|
||||
path: '/dev/input'
|
||||
fullPath: '/dev/input'
|
||||
preLoaderRoute: typeof DevInputRouteImport
|
||||
'/dev/context': {
|
||||
id: '/dev/context'
|
||||
path: '/dev/context'
|
||||
fullPath: '/dev/context'
|
||||
preLoaderRoute: typeof DevContextRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dev/async-rendering': {
|
||||
@@ -160,7 +160,7 @@ const rootRouteChildren: RootRouteChildren = {
|
||||
BlankRoute: BlankRoute,
|
||||
FormRoute: FormRoute,
|
||||
DevAsyncRenderingRoute: DevAsyncRenderingRoute,
|
||||
DevInputRoute: DevInputRoute,
|
||||
DevContextRoute: DevContextRoute,
|
||||
DevMemoRoute: DevMemoRoute,
|
||||
}
|
||||
export const routeTree = rootRouteImport
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
||||
import { Effect } from "effect"
|
||||
import { Async, Component, Hooks, Memoized } from "effect-fc"
|
||||
import { Async, Component, Memoized } from "effect-fc"
|
||||
import * as React from "react"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
@@ -69,7 +69,7 @@ class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*(
|
||||
class MemoizedAsyncComponent extends Memoized.memoized(AsyncComponent) {}
|
||||
|
||||
class SubComponent extends Component.makeUntraced("SubComponent")(function*() {
|
||||
const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
|
||||
const [state] = React.useState(yield* Component.useOnMount(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
|
||||
return <Text>{state}</Text>
|
||||
}) {}
|
||||
|
||||
|
||||
42
packages/example/src/routes/dev/context.tsx
Normal file
42
packages/example/src/routes/dev/context.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Container, Flex, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect } from "effect"
|
||||
import { Component } from "effect-fc"
|
||||
import * as React from "react"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
class SubService extends Effect.Service<SubService>()("SubService", {
|
||||
effect: (value: string) => Effect.succeed({ value })
|
||||
}) {}
|
||||
|
||||
const SubComponent = Component.makeUntraced("SubComponent")(function*() {
|
||||
const service = yield* SubService
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("SubComponent unmounted"))
|
||||
yield* Console.log("SubComponent mounted")
|
||||
}))
|
||||
|
||||
return <Text>{service.value}</Text>
|
||||
})
|
||||
|
||||
const ContextView = Component.makeUntraced("ContextView")(function*() {
|
||||
const [serviceValue, setServiceValue] = React.useState("test")
|
||||
const SubServiceLayer = React.useMemo(() => SubService.Default(serviceValue), [serviceValue])
|
||||
const SubComponentFC = yield* Effect.provide(SubComponent, yield* Component.useContext(SubServiceLayer))
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Flex direction="column" align="center">
|
||||
<TextField.Root value={serviceValue} onChange={e => setServiceValue(e.target.value)} />
|
||||
<SubComponentFC />
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/dev/context")({
|
||||
component: ContextView
|
||||
})
|
||||
@@ -1,41 +0,0 @@
|
||||
import { Container } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Schema, SubscriptionRef } from "effect"
|
||||
import { Component, Hooks, Memoized } from "effect-fc"
|
||||
import { TextFieldInput } from "@/lib/input/TextFieldInput"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const IntFromString = Schema.NumberFromString.pipe(Schema.int())
|
||||
|
||||
const IntTextFieldInput = TextFieldInput({ schema: IntFromString })
|
||||
const StringTextFieldInput = TextFieldInput({ schema: Schema.String })
|
||||
|
||||
const Input = Component.makeUntraced("Input")(function*() {
|
||||
const IntTextFieldInputFC = yield* IntTextFieldInput
|
||||
const StringTextFieldInputFC = yield* StringTextFieldInput
|
||||
|
||||
const intRef1 = yield* Hooks.useOnce(() => SubscriptionRef.make(0))
|
||||
// const intRef2 = yield* useOnce(() => SubscriptionRef.make(0))
|
||||
const stringRef = yield* Hooks.useOnce(() => SubscriptionRef.make(""))
|
||||
// yield* useFork(() => Stream.runForEach(intRef1.changes, Console.log), [intRef1])
|
||||
|
||||
// const input2 = yield* useInput({ schema: IntFromString, ref: intRef2 })
|
||||
|
||||
// const [str, setStr] = yield* useRefState(stringRef)
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<IntTextFieldInputFC ref={intRef1} />
|
||||
<StringTextFieldInputFC ref={stringRef} />
|
||||
<StringTextFieldInputFC ref={stringRef} />
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Memoized.memoized,
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/dev/input")({
|
||||
component: Input,
|
||||
})
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Button, Container, Flex } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect, Option, ParseResult, Schema } from "effect"
|
||||
import { Component, Form, Hooks } from "effect-fc"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
|
||||
import { DateTimeUtcFromZonedInput } from "@/lib/schema"
|
||||
import { runtime } from "@/runtime"
|
||||
@@ -50,10 +50,15 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
|
||||
class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
|
||||
const form = yield* RegisterForm
|
||||
const submit = yield* Form.useSubmit(form)
|
||||
const [canSubmit] = yield* Hooks.useSubscribables(form.canSubmitSubscribable)
|
||||
const [canSubmit] = yield* Subscribable.useSubscribables(form.canSubmitSubscribable)
|
||||
|
||||
const TextFieldFormInputFC = yield* TextFieldFormInput
|
||||
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
|
||||
yield* Console.log("RegisterFormView mounted")
|
||||
}))
|
||||
|
||||
|
||||
return (
|
||||
<Container width="300">
|
||||
@@ -87,7 +92,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
|
||||
const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
|
||||
const RegisterFormViewFC = yield* Effect.provide(
|
||||
RegisterFormView,
|
||||
yield* Hooks.useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" }),
|
||||
yield* Component.useContext(RegisterForm.Default),
|
||||
)
|
||||
|
||||
return <RegisterFormViewFC />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Effect } from "effect"
|
||||
import { Component, Hooks } from "effect-fc"
|
||||
import { Component } from "effect-fc"
|
||||
import { runtime } from "@/runtime"
|
||||
import { Todos } from "@/todo/Todos"
|
||||
import { TodosState } from "@/todo/TodosState.service"
|
||||
@@ -11,7 +11,7 @@ const TodosStateLive = TodosState.Default("todos")
|
||||
const Index = Component.makeUntraced("Index")(function*() {
|
||||
const TodosFC = yield* Effect.provide(
|
||||
Todos,
|
||||
yield* Hooks.useContext(TodosStateLive, { finalizerExecutionMode: "fork" }),
|
||||
yield* Component.useContext(TodosStateLive),
|
||||
)
|
||||
|
||||
return <TodosFC />
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
|
||||
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
||||
import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, Stream, SubscriptionRef } from "effect"
|
||||
import { Component, Hooks, Memoized, Subscribable, SubscriptionSubRef } from "effect-fc"
|
||||
import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, Stream } from "effect"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
import { FaArrowDown, FaArrowUp } from "react-icons/fa"
|
||||
import { FaDeleteLeft } from "react-icons/fa6"
|
||||
import * as Domain from "@/domain"
|
||||
import { TextAreaInput } from "@/lib/input/TextAreaInput"
|
||||
import { TextFieldInput } from "@/lib/input/TextFieldInput"
|
||||
import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
|
||||
import { DateTimeUtcFromZonedInput } from "@/lib/schema"
|
||||
import { TodosState } from "./TodosState.service"
|
||||
|
||||
|
||||
const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
|
||||
const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
|
||||
const TodoFormSchema = Schema.compose(Schema.Struct({
|
||||
...Domain.Todo.Todo.fields,
|
||||
completedAt: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
|
||||
}), Domain.Todo.Todo)
|
||||
|
||||
const makeTodo = makeUuid4.pipe(
|
||||
Effect.map(id => Domain.Todo.Todo.make({
|
||||
@@ -33,49 +34,75 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
|
||||
const runtime = yield* Effect.runtime()
|
||||
const state = yield* TodosState
|
||||
|
||||
const { ref, indexRef, contentRef, completedAtRef } = yield* Hooks.useMemo(() => Match.value(props).pipe(
|
||||
Match.tag("new", () => Effect.Do.pipe(
|
||||
Effect.bind("ref", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
|
||||
Effect.let("indexRef", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.empty })),
|
||||
)),
|
||||
Match.tag("edit", ({ id }) => Effect.Do.pipe(
|
||||
Effect.let("ref", () => state.getElementRef(id)),
|
||||
Effect.let("indexRef", () => state.getIndexSubscribable(id)),
|
||||
)),
|
||||
const [
|
||||
indexRef,
|
||||
form,
|
||||
contentField,
|
||||
completedAtField,
|
||||
] = yield* Component.useOnChange(() => Effect.gen(function*() {
|
||||
const indexRef = Match.value(props).pipe(
|
||||
Match.tag("new", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.make(-1) })),
|
||||
Match.tag("edit", ({ id }) => state.getIndexSubscribable(id)),
|
||||
Match.exhaustive,
|
||||
)
|
||||
|
||||
Effect.let("contentRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["content"])),
|
||||
Effect.let("completedAtRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["completedAt"])),
|
||||
), [props._tag, props._tag === "edit" ? props.id : undefined])
|
||||
const form = yield* Form.service({
|
||||
schema: TodoFormSchema,
|
||||
initialEncodedValue: yield* Schema.encode(TodoFormSchema)(
|
||||
yield* Match.value(props).pipe(
|
||||
Match.tag("new", () => makeTodo),
|
||||
Match.tag("edit", ({ id }) => state.getElementRef(id)),
|
||||
Match.exhaustive,
|
||||
)
|
||||
),
|
||||
onSubmit: function(todo) {
|
||||
return Match.value(props).pipe(
|
||||
Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
|
||||
Effect.andThen(makeTodo),
|
||||
Effect.andThen(Schema.encode(TodoFormSchema)),
|
||||
Effect.andThen(v => Ref.set(this.encodedValueRef, v)),
|
||||
)),
|
||||
Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
|
||||
Match.exhaustive,
|
||||
)
|
||||
},
|
||||
autosubmit: props._tag === "edit",
|
||||
debounce: "250 millis",
|
||||
})
|
||||
|
||||
const [index, size] = yield* Hooks.useSubscribables(indexRef, state.sizeSubscribable)
|
||||
return [
|
||||
indexRef,
|
||||
form,
|
||||
Form.field(form, ["content"]),
|
||||
Form.field(form, ["completedAt"]),
|
||||
] as const
|
||||
}), [props._tag, props._tag === "edit" ? props.id : undefined])
|
||||
|
||||
const StringTextAreaInputFC = yield* StringTextAreaInput
|
||||
const OptionalDateTimeInputFC = yield* OptionalDateTimeInput
|
||||
const [index, size, canSubmit] = yield* Subscribable.useSubscribables(
|
||||
indexRef,
|
||||
state.sizeSubscribable,
|
||||
form.canSubmitSubscribable,
|
||||
)
|
||||
const submit = yield* Form.useSubmit(form)
|
||||
const TextFieldFormInputFC = yield* TextFieldFormInput
|
||||
|
||||
|
||||
return (
|
||||
<Flex direction="row" align="center" gap="2">
|
||||
<Box flexGrow="1">
|
||||
<Flex direction="column" align="stretch" gap="2">
|
||||
<StringTextAreaInputFC ref={contentRef} />
|
||||
<TextFieldFormInputFC field={contentField} />
|
||||
|
||||
<Flex direction="row" justify="center" align="center" gap="2">
|
||||
<OptionalDateTimeInputFC
|
||||
<TextFieldFormInputFC
|
||||
optional
|
||||
field={completedAtField}
|
||||
type="datetime-local"
|
||||
ref={completedAtRef}
|
||||
defaultValue={yield* Hooks.useOnce(() => DateTime.now)}
|
||||
defaultValue=""
|
||||
/>
|
||||
|
||||
{props._tag === "new" &&
|
||||
<Button
|
||||
onClick={() => ref.pipe(
|
||||
Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
|
||||
Effect.andThen(makeTodo),
|
||||
Effect.andThen(todo => Ref.set(ref, todo)),
|
||||
Runtime.runSync(runtime),
|
||||
)}
|
||||
>
|
||||
<Button disabled={!canSubmit} onClick={() => submit()}>
|
||||
Add
|
||||
</Button>
|
||||
}
|
||||
@@ -106,6 +133,4 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
|
||||
}
|
||||
</Flex>
|
||||
)
|
||||
}).pipe(
|
||||
Memoized.memoized
|
||||
) {}
|
||||
}) {}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Container, Flex, Heading } from "@radix-ui/themes"
|
||||
import { Chunk, Console, Effect } from "effect"
|
||||
import { Component, Hooks } from "effect-fc"
|
||||
import { Component, Subscribable } from "effect-fc"
|
||||
import { Todo } from "./Todo"
|
||||
import { TodosState } from "./TodosState.service"
|
||||
|
||||
|
||||
export class Todos extends Component.makeUntraced("Todos")(function*() {
|
||||
const state = yield* TodosState
|
||||
const [todos] = yield* Hooks.useSubscribables(state.ref)
|
||||
const [todos] = yield* Subscribable.useSubscribables(state.ref)
|
||||
|
||||
yield* Hooks.useOnce(() => Effect.andThen(
|
||||
yield* Component.useOnMount(() => Effect.andThen(
|
||||
Console.log("Todos mounted"),
|
||||
Effect.addFinalizer(() => Console.log("Todos unmounted")),
|
||||
))
|
||||
|
||||
Reference in New Issue
Block a user