Finalize the Effect View rename and refresh docs, examples, and tooling (#59)
## Summary - Rename `effect-fc-next` to `effect-view` and update package metadata, internal symbols, imports, and repository references. - Promote the Effect 4 example to `packages/example` and move the legacy Effect 3 example to `packages/effect-fc-example`. - Add `effect-view` to the npm publishing workflow. - Update the Vite Fast Refresh plugin for `effect-view` and rename `effectViewPlugin()` to `effectView()`. - Upgrade Effect, React, TypeScript, build tooling, and related dependencies. - Refresh the documentation and homepage. ## Documentation - Add a dedicated Async guide covering: - Suspense fallbacks - Hook ordering - Memoization - Structural prop equality - Clarify synchronous and asynchronous component behavior. - Document runner scope and service requirements. - Explain stable construction of Query, Mutation, and Form instances. - Expand focused Lens and Form examples, including curried focus helpers. - Document the optional `@effect/platform-browser` dependency for window-focus query refresh. - Improve the Forms guide structure and examples. - Fix responsive homepage headline wrapping and update homepage copy. ## Notable API changes - Package rename: ```diff - effect-fc-next + effect-view --------- Co-authored-by: Julien Valverdé <julien.valverde@mailo.com> Reviewed-on: #59
This commit was merged in pull request #59.
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
title: Async
|
||||
---
|
||||
|
||||
# Async
|
||||
|
||||
Effect View components run synchronously by default. Apply `Async.async` when a
|
||||
component must wait for an asynchronous Effect before it can return JSX. The
|
||||
component suspends while the Effect runs and accepts React Suspense props such
|
||||
as `fallback`.
|
||||
|
||||
```tsx title="src/UserCard.tsx"
|
||||
import { Effect } from "effect"
|
||||
import { Async, Component } from "effect-view"
|
||||
import { loadUser } from "./api"
|
||||
|
||||
export const UserCard = Component.make("UserCard")(
|
||||
function* ({ userId }: { readonly userId: string }) {
|
||||
const user = yield* Component.useOnChange(
|
||||
() => loadUser(userId),
|
||||
[userId],
|
||||
)
|
||||
|
||||
return <article>{user.name}</article>
|
||||
},
|
||||
).pipe(Async.async)
|
||||
```
|
||||
|
||||
Pass a fallback when rendering the component:
|
||||
|
||||
```tsx
|
||||
const User = yield* UserCard.use
|
||||
|
||||
return <User userId="123" fallback={<p>Loading user...</p>} />
|
||||
```
|
||||
|
||||
Or configure a default fallback once:
|
||||
|
||||
```tsx
|
||||
export const UserCard = Component.make("UserCard")(
|
||||
function* ({ userId }: { readonly userId: string }) {
|
||||
const user = yield* Component.useOnChange(
|
||||
() => loadUser(userId),
|
||||
[userId],
|
||||
)
|
||||
|
||||
return <article>{user.name}</article>
|
||||
},
|
||||
).pipe(
|
||||
Async.async,
|
||||
Async.withOptions({ defaultFallback: <p>Loading user...</p> }),
|
||||
)
|
||||
```
|
||||
|
||||
## Hook ordering
|
||||
|
||||
**Important:** Do not use React hooks or Effect View hook helpers after an
|
||||
asynchronous computation in the component body. After the computation suspends,
|
||||
the generator continuation runs outside React's synchronous render phase.
|
||||
|
||||
Place every hook before the first operation that may suspend:
|
||||
|
||||
```tsx
|
||||
import { useState } from "react"
|
||||
|
||||
const UserCard = Component.make("UserCard")(
|
||||
function* ({ userId }: { readonly userId: string }) {
|
||||
// Hooks and hook helpers go before asynchronous work.
|
||||
const [showDetails, setShowDetails] = useState(false)
|
||||
|
||||
// This may suspend, so no hooks may be used after it.
|
||||
const user = yield* Component.useOnChange(
|
||||
() => loadUser(userId),
|
||||
[userId],
|
||||
)
|
||||
|
||||
return (
|
||||
<article>
|
||||
<button onClick={() => setShowDetails((value) => !value)}>
|
||||
{user.name}
|
||||
</button>
|
||||
{showDetails && <p>{user.bio}</p>}
|
||||
</article>
|
||||
)
|
||||
},
|
||||
).pipe(Async.async)
|
||||
```
|
||||
|
||||
## Memoization
|
||||
|
||||
An async computation starts whenever its component renders. Apply
|
||||
`Memoized.memoized` after `Async.async` to prevent an unrelated parent render
|
||||
from restarting an async child whose props have not changed:
|
||||
|
||||
```tsx
|
||||
import { Async, Component, Memoized } from "effect-view"
|
||||
|
||||
export const UserCard = Component.make("UserCard")(
|
||||
function* ({ userId }: { readonly userId: string }) {
|
||||
const user = yield* Component.useOnChange(
|
||||
() => loadUser(userId),
|
||||
[userId],
|
||||
)
|
||||
|
||||
return <article>{user.name}</article>
|
||||
},
|
||||
).pipe(
|
||||
Async.async,
|
||||
Memoized.memoized,
|
||||
)
|
||||
```
|
||||
|
||||
Async components compare props with `Object.is` by default and ignore the
|
||||
`fallback` prop during that comparison. A changed `userId` renders the child
|
||||
again, closes the previous dependency scope, and runs `loadUser` for the new
|
||||
value.
|
||||
|
||||
If props contain immutable objects or arrays that may be recreated with the same
|
||||
content, use `Equal.asEquivalence()` for full structural equality:
|
||||
|
||||
```tsx
|
||||
import { Equal } from "effect"
|
||||
import { Async, Component, Memoized } from "effect-view"
|
||||
|
||||
export const UserCard = Component.make("UserCard")(
|
||||
function* (props: { readonly user: { readonly id: string } }) {
|
||||
const details = yield* Component.useOnChange(
|
||||
() => loadUser(props.user.id),
|
||||
[props.user.id],
|
||||
)
|
||||
|
||||
return <article>{details.name}</article>
|
||||
},
|
||||
).pipe(
|
||||
Async.async,
|
||||
Memoized.memoized,
|
||||
Memoized.withOptions({
|
||||
propsEquivalence: Equal.asEquivalence(),
|
||||
}),
|
||||
)
|
||||
```
|
||||
|
||||
Supplying `propsEquivalence` replaces the async component's default comparison,
|
||||
so `fallback` is also included in this structural comparison.
|
||||
+139
-121
@@ -52,6 +52,14 @@ valid decoded value should go:
|
||||
| `MutationForm` | Yes | It is passed to a mutation when `submit` runs. |
|
||||
| `LensForm` | Yes | It is written automatically to a target `Lens`. |
|
||||
|
||||
## Create forms once
|
||||
|
||||
`MutationForm.service` and `LensForm.service` are Effect constructors, not
|
||||
hooks. Create each root form once and keep it stable. For a component-owned
|
||||
form, call the constructor inside `Component.useOnMount`; for a form shared by
|
||||
multiple components, create it in an Effect service. Update the existing form's
|
||||
Lenses rather than reconstructing the form during render.
|
||||
|
||||
## MutationForm: validate, then submit
|
||||
|
||||
Use `MutationForm` for registration, checkout, search, and other workflows with
|
||||
@@ -102,9 +110,9 @@ mutation receives the schema's decoded profile, so `profile.age` is a number.
|
||||
Schema transformations happen before the mutation and schema issues prevent an
|
||||
invalid draft from being submitted.
|
||||
|
||||
`MutationForm.service` also starts initial validation in the current scope. Use
|
||||
it inside `Component.useOnMount`, a scoped service, or another Effect scope so
|
||||
its validation and mutation work is cleaned up with its owner.
|
||||
`MutationForm.service` also starts initial validation in the current scope. In
|
||||
the example above, `Component.useOnMount` keeps that validation and the form's
|
||||
mutation work tied to the component that owns them.
|
||||
|
||||
## LensForm: validate, then synchronize
|
||||
|
||||
@@ -163,124 +171,6 @@ Pass `initialEncodedValue` only when the first draft should differ from the
|
||||
encoded target. Otherwise `LensForm.service` obtains the initial draft by
|
||||
encoding the target through the schema.
|
||||
|
||||
## Example: local date input, UTC domain value
|
||||
|
||||
The encoded/decoded distinction is especially useful for dates. An HTML
|
||||
`datetime-local` input produces a wall-clock string such as
|
||||
`"2026-07-22T14:30"`. It contains no time-zone or UTC offset, while application
|
||||
state and APIs usually need an unambiguous UTC instant.
|
||||
|
||||
A schema can own that entire conversion. The following schema interprets the
|
||||
input in the current time zone and decodes it to `DateTime.Utc`:
|
||||
|
||||
```tsx title="src/DateTimeUtcFromZonedInput.ts"
|
||||
import { DateTime, Effect, Option, ParseResult, Schema } from "effect"
|
||||
|
||||
class DateTimeUtcFromZoned extends Schema.transformOrFail(
|
||||
Schema.DateTimeZonedFromSelf,
|
||||
Schema.DateTimeUtcFromSelf,
|
||||
{
|
||||
strict: true,
|
||||
decode: (input) => ParseResult.succeed(DateTime.toUtc(input)),
|
||||
encode: DateTime.setZoneCurrent,
|
||||
},
|
||||
) {}
|
||||
|
||||
export class DateTimeUtcFromZonedInput extends Schema.transformOrFail(
|
||||
Schema.String,
|
||||
DateTimeUtcFromZoned,
|
||||
{
|
||||
strict: true,
|
||||
decode: (input, _options, ast) =>
|
||||
Effect.flatMap(DateTime.CurrentTimeZone, (timeZone) =>
|
||||
Option.match(
|
||||
DateTime.makeZoned(input, {
|
||||
timeZone,
|
||||
adjustForTimeZone: true,
|
||||
}),
|
||||
{
|
||||
onSome: ParseResult.succeed,
|
||||
onNone: () =>
|
||||
ParseResult.fail(
|
||||
new ParseResult.Type(
|
||||
ast,
|
||||
input,
|
||||
"Enter a valid date and time",
|
||||
),
|
||||
),
|
||||
},
|
||||
),
|
||||
),
|
||||
encode: (value) =>
|
||||
ParseResult.succeed(
|
||||
DateTime.formatIsoZoned(value).slice(0, 16),
|
||||
),
|
||||
},
|
||||
) {}
|
||||
```
|
||||
|
||||
Use it like any other field schema. The form and input work with a string, but
|
||||
the mutation receives UTC:
|
||||
|
||||
```tsx
|
||||
import { DateTime, Effect, Schema } from "effect"
|
||||
import { Component, Form, MutationForm, View } from "effect-view"
|
||||
import { DateTimeUtcFromZonedInput } from "./DateTimeUtcFromZonedInput"
|
||||
|
||||
const AppointmentSchema = Schema.Struct({
|
||||
startsAt: DateTimeUtcFromZonedInput,
|
||||
})
|
||||
|
||||
const AppointmentView = Component.make("Appointment")(function* () {
|
||||
const [form, startsAtField] = yield* Component.useOnMount(() =>
|
||||
Effect.gen(function* () {
|
||||
const form = yield* MutationForm.service({
|
||||
schema: AppointmentSchema,
|
||||
initialEncodedValue: { startsAt: "" },
|
||||
f: ([appointment]) =>
|
||||
Effect.log(
|
||||
`Saving ${DateTime.formatIso(appointment.startsAt)}`,
|
||||
),
|
||||
})
|
||||
|
||||
return [form, Form.focusObjectOn(form, "startsAt")] as const
|
||||
}),
|
||||
)
|
||||
|
||||
const startsAt = yield* Form.useInput(startsAtField)
|
||||
const [canCommit] = yield* View.useAll([form.canCommit])
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
void runPromise(form.submit)
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={startsAt.value}
|
||||
onChange={(event) =>
|
||||
startsAt.setValue(event.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<button disabled={!canCommit}>Save appointment</button>
|
||||
</form>
|
||||
)
|
||||
})
|
||||
```
|
||||
|
||||
The schema requires `DateTime.CurrentTimeZone`; provide
|
||||
`DateTime.layerCurrentZoneLocal` in the application runtime. If the current
|
||||
zone is `Europe/Paris`, for example, entering `2026-07-22T14:30` decodes to the
|
||||
UTC instant `2026-07-22T12:30:00.000Z`.
|
||||
|
||||
Encoding works in the other direction. A `LensForm` whose target contains that
|
||||
UTC instant presents `2026-07-22T14:30` to the local input. The component never
|
||||
manually parses dates, applies offsets, or maintains a second representation;
|
||||
the schema defines both directions and the form keeps them synchronized.
|
||||
|
||||
## Focus into subforms
|
||||
|
||||
The root `MutationForm` or `LensForm` represents the complete schema. UI
|
||||
@@ -300,6 +190,16 @@ const contactForm = Form.focusObjectOn(form, "contact")
|
||||
const emailField = Form.focusObjectOn(contactForm, "email")
|
||||
```
|
||||
|
||||
Form focus helpers also have a dual API. Pass only the key or index to get a curried function. Curried helpers can be chained
|
||||
with `pipe` to focus through a deeper path:
|
||||
|
||||
```tsx
|
||||
const emailField = form.pipe(
|
||||
Form.focusObjectOn("contact"),
|
||||
Form.focusObjectOn("email"),
|
||||
)
|
||||
```
|
||||
|
||||
`displayNameField`, `ageField`, and `emailField` can each be passed to the input
|
||||
component responsible for that field. Focusing can also be repeated:
|
||||
`contactForm` represents the complete contact section, and `emailField`
|
||||
@@ -455,3 +355,121 @@ They expose the schema pipeline as reactive Lenses and Views:
|
||||
The form model itself is Effect code. Effect View adds the React-facing hooks,
|
||||
including `Form.useInput` and `Form.useOptionalInput`, while your own component
|
||||
library remains responsible for rendering controls and layout.
|
||||
|
||||
## Example: local date input, UTC domain value
|
||||
|
||||
The encoded/decoded distinction is especially useful for dates. An HTML
|
||||
`datetime-local` input produces a wall-clock string such as
|
||||
`"2026-07-22T14:30"`. It contains no time-zone or UTC offset, while application
|
||||
state and APIs usually need an unambiguous UTC instant.
|
||||
|
||||
A schema can own that entire conversion. The following schema interprets the
|
||||
input in the current time zone and decodes it to `DateTime.Utc`:
|
||||
|
||||
```tsx title="src/DateTimeUtcFromZonedInput.ts"
|
||||
import { DateTime, Effect, Option, ParseResult, Schema } from "effect"
|
||||
|
||||
class DateTimeUtcFromZoned extends Schema.transformOrFail(
|
||||
Schema.DateTimeZonedFromSelf,
|
||||
Schema.DateTimeUtcFromSelf,
|
||||
{
|
||||
strict: true,
|
||||
decode: (input) => ParseResult.succeed(DateTime.toUtc(input)),
|
||||
encode: DateTime.setZoneCurrent,
|
||||
},
|
||||
) {}
|
||||
|
||||
export class DateTimeUtcFromZonedInput extends Schema.transformOrFail(
|
||||
Schema.String,
|
||||
DateTimeUtcFromZoned,
|
||||
{
|
||||
strict: true,
|
||||
decode: (input, _options, ast) =>
|
||||
Effect.flatMap(DateTime.CurrentTimeZone, (timeZone) =>
|
||||
Option.match(
|
||||
DateTime.makeZoned(input, {
|
||||
timeZone,
|
||||
adjustForTimeZone: true,
|
||||
}),
|
||||
{
|
||||
onSome: ParseResult.succeed,
|
||||
onNone: () =>
|
||||
ParseResult.fail(
|
||||
new ParseResult.Type(
|
||||
ast,
|
||||
input,
|
||||
"Enter a valid date and time",
|
||||
),
|
||||
),
|
||||
},
|
||||
),
|
||||
),
|
||||
encode: (value) =>
|
||||
ParseResult.succeed(
|
||||
DateTime.formatIsoZoned(value).slice(0, 16),
|
||||
),
|
||||
},
|
||||
) {}
|
||||
```
|
||||
|
||||
Use it like any other field schema. The form and input work with a string, but
|
||||
the mutation receives UTC:
|
||||
|
||||
```tsx
|
||||
import { DateTime, Effect, Schema } from "effect"
|
||||
import { Component, Form, MutationForm, View } from "effect-view"
|
||||
import { DateTimeUtcFromZonedInput } from "./DateTimeUtcFromZonedInput"
|
||||
|
||||
const AppointmentSchema = Schema.Struct({
|
||||
startsAt: DateTimeUtcFromZonedInput,
|
||||
})
|
||||
|
||||
const AppointmentView = Component.make("Appointment")(function* () {
|
||||
const [form, startsAtField] = yield* Component.useOnMount(() =>
|
||||
Effect.gen(function* () {
|
||||
const form = yield* MutationForm.service({
|
||||
schema: AppointmentSchema,
|
||||
initialEncodedValue: { startsAt: "" },
|
||||
f: ([appointment]) =>
|
||||
Effect.log(
|
||||
`Saving ${DateTime.formatIso(appointment.startsAt)}`,
|
||||
),
|
||||
})
|
||||
|
||||
return [form, Form.focusObjectOn(form, "startsAt")] as const
|
||||
}),
|
||||
)
|
||||
|
||||
const startsAt = yield* Form.useInput(startsAtField)
|
||||
const [canCommit] = yield* View.useAll([form.canCommit])
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
void runPromise(form.submit)
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={startsAt.value}
|
||||
onChange={(event) =>
|
||||
startsAt.setValue(event.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
<button disabled={!canCommit}>Save appointment</button>
|
||||
</form>
|
||||
)
|
||||
})
|
||||
```
|
||||
|
||||
The schema requires `DateTime.CurrentTimeZone`; provide
|
||||
`DateTime.layerCurrentZoneLocal` in the application runtime. If the current
|
||||
zone is `Europe/Paris`, for example, entering `2026-07-22T14:30` decodes to the
|
||||
UTC instant `2026-07-22T12:30:00.000Z`.
|
||||
|
||||
Encoding works in the other direction. A `LensForm` whose target contains that
|
||||
UTC instant presents `2026-07-22T14:30` to the local input. The component never
|
||||
manually parses dates, applies offsets, or maintains a second representation;
|
||||
the schema defines both directions and the form keeps them synchronized.
|
||||
|
||||
@@ -44,16 +44,16 @@ Effect View components:
|
||||
npm install --save-dev @effect-view/vite-plugin
|
||||
```
|
||||
|
||||
Add `effectViewPlugin()` before the React plugin in your Vite configuration:
|
||||
Add `effectView()` before the React plugin in your Vite configuration:
|
||||
|
||||
```ts title="vite.config.ts"
|
||||
import { effectViewPlugin } from "@effect-view/vite-plugin"
|
||||
import { effectView } from "@effect-view/vite-plugin"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
effectViewPlugin(),
|
||||
effectView(),
|
||||
react(),
|
||||
],
|
||||
})
|
||||
@@ -199,51 +199,25 @@ to provide local services to a subtree.
|
||||
|
||||
## Synchronous and asynchronous components
|
||||
|
||||
A regular Effect View component runs its body during React render. That Effect
|
||||
must complete synchronously: yielding a service, reading synchronous state, or
|
||||
creating a scoped object is fine; sleeping, fetching, or awaiting a promise is
|
||||
not.
|
||||
A regular Effect View component runs its body during React render. Effects
|
||||
executed directly by that body—including setup passed to `useOnMount`,
|
||||
`useOnChange`, or `useLayer`—must complete synchronously every time they run.
|
||||
Yielding services and reading synchronous state is fine; sleeping, fetching, or
|
||||
awaiting a promise is not.
|
||||
|
||||
Use `Async.async` when render genuinely depends on an asynchronous Effect. The
|
||||
component then suspends and accepts React Suspense props such as `fallback`:
|
||||
Choose the integration that matches the asynchronous work:
|
||||
|
||||
```tsx title="src/UserView.tsx"
|
||||
import { Async, Component, Memoized } from "effect-view"
|
||||
import { loadUser } from "./api"
|
||||
|
||||
export const UserView = Component.make("UserView")(
|
||||
function* (props: { readonly userId: string }) {
|
||||
const user = yield* Component.useOnChange(
|
||||
() => loadUser(props.userId),
|
||||
[props.userId],
|
||||
)
|
||||
|
||||
return <h2>{user.name}</h2>
|
||||
},
|
||||
).pipe(
|
||||
Async.async,
|
||||
Async.withOptions({ defaultFallback: <p>Loading user...</p> }),
|
||||
Memoized.memoized,
|
||||
)
|
||||
```
|
||||
|
||||
Use it from an Effect View parent in the usual way:
|
||||
|
||||
```tsx
|
||||
const User = yield* UserView.use
|
||||
|
||||
return <User userId={selectedUserId} />
|
||||
```
|
||||
|
||||
`Memoized.memoized` prevents an unrelated parent re-render from restarting an
|
||||
async child whose props have not changed. A changed `userId` creates a new
|
||||
dependency scope, cleans up the previous one, and runs `loadUser` again.
|
||||
|
||||
An async component's rejected Effect is handled by the nearest React error
|
||||
boundary. Suspense handles waiting, not failures.
|
||||
|
||||
For server data that should be cached, refreshed, and shared, prefer the
|
||||
[Query module](./query) over a raw async component.
|
||||
- Make the component asynchronous with [`Async.async`](./async) when it must
|
||||
wait for a one-off asynchronous Effect before producing JSX. The component
|
||||
suspends while it waits.
|
||||
- Use [Query](./query) for server reads that need caching, sharing, refresh, or
|
||||
invalidation.
|
||||
- Use [Mutation](./mutation) for user-triggered writes with observable pending
|
||||
and error state.
|
||||
- Use `useRunPromise` or `useCallbackPromise` for asynchronous event work that
|
||||
does not need Mutation state.
|
||||
- Use a post-commit hook with a scoped fiber for subscriptions or background
|
||||
work tied to the component lifecycle.
|
||||
|
||||
## Use Effect services
|
||||
|
||||
@@ -321,24 +295,25 @@ const ResourceView = Component.make("Resource")(function* () {
|
||||
with the context already available in the component body, so the resource above
|
||||
is owned by the component's root scope.
|
||||
|
||||
`useOnChange`, `useReactEffect`, and `useReactLayoutEffect` each create a scope
|
||||
that can be replaced without closing the component root scope.
|
||||
`useOnChange`, `useReactEffect`, and `useReactLayoutEffect` each manage their
|
||||
own resources. When their dependencies change, those resources are cleaned up
|
||||
and recreated while the rest of the component remains active.
|
||||
|
||||
The main lifecycle choices are:
|
||||
|
||||
| Hook | What it does | Scope seen by setup | Scope closes when |
|
||||
| --- | --- | --- | --- |
|
||||
| Component body | Produces the component's rendered value | Component root scope | The component unmounts |
|
||||
| `useOnMount` | Computes and caches a value for the component instance | The same component root scope | The component unmounts |
|
||||
| `useOnMount` | Computes and caches a value for the component instance | Component root scope | The component unmounts |
|
||||
| `useOnChange` | Recomputes a cached value when dependencies change | A new dependency scope | Dependencies change or the component unmounts |
|
||||
| `useReactEffect` | Runs a post-commit side effect | A new effect scope | Dependencies change or the component unmounts |
|
||||
| `useReactLayoutEffect` | Runs a layout effect before the browser paints | A new layout-effect scope | Dependencies change or the component unmounts |
|
||||
| `useLayer` | Builds and provides a layer context | A dependency scope created through `useOnChange` | The layer reference changes or the component unmounts |
|
||||
| `useLayer` | Builds and provides a layer context | A new scope tied to the current layer reference | The layer reference changes or the component unmounts |
|
||||
|
||||
`useRunSync`, `useRunPromise`, `useCallbackSync`, and `useCallbackPromise` do
|
||||
not create lifecycle scopes either. They capture the component context, so an
|
||||
Effect invoked through them sees the component root scope unless it explicitly
|
||||
provides another one.
|
||||
`useRunSync` and `useRunPromise` do not create a new scope. The runner they
|
||||
return includes the component root scope in its context by default.
|
||||
`useCallbackSync` and `useCallbackPromise` similarly capture the component
|
||||
context required by their Effect.
|
||||
|
||||
### useOnMount
|
||||
|
||||
@@ -436,6 +411,21 @@ Use `Component.useRunSync` only for Effects known to complete synchronously.
|
||||
Use `Component.useRunPromise` for Effects that may suspend, sleep, fetch, or
|
||||
otherwise continue asynchronously.
|
||||
|
||||
Both runners provide `Scope.Scope` by default, so they can run scoped Effects
|
||||
without a type argument. When an Effect also requires application services,
|
||||
declare the complete runner context explicitly:
|
||||
|
||||
```tsx
|
||||
import { Scope } from "effect"
|
||||
|
||||
const runPromise = yield* Component.useRunPromise<
|
||||
Scope.Scope | UserRepository
|
||||
>()
|
||||
```
|
||||
|
||||
The resulting runner accepts Effects that require the component scope,
|
||||
`UserRepository`, or both.
|
||||
|
||||
When a callback is passed to a memoized child or used as a dependency, use the
|
||||
callback variants to preserve its identity:
|
||||
|
||||
|
||||
@@ -30,6 +30,11 @@ Create a mutation in a component scope with `Mutation.make`. Its function can
|
||||
be any Effect, including one that requires services from the application
|
||||
runtime:
|
||||
|
||||
`Mutation.make` is an Effect constructor, not a hook. Create each mutation
|
||||
instance once and keep it stable instead of calling `Mutation.make` again on
|
||||
every render. Use `Component.useOnMount` for a component-owned mutation or
|
||||
create it in an Effect service when it should be shared.
|
||||
|
||||
```tsx
|
||||
import { Effect } from "effect"
|
||||
import { AsyncResult } from "effect/unstable/reactivity"
|
||||
|
||||
@@ -35,7 +35,6 @@ application runtime once, alongside the services used by your query effects:
|
||||
|
||||
```tsx title="src/runtime.ts"
|
||||
import { Layer } from "effect"
|
||||
import { FetchHttpClient } from "effect/unstable/http"
|
||||
import { QueryClient, ReactRuntime } from "effect-view"
|
||||
|
||||
const AppLive = Layer.empty.pipe(
|
||||
@@ -44,7 +43,6 @@ const AppLive = Layer.empty.pipe(
|
||||
defaultRefreshOnWindowFocus: true,
|
||||
cacheGcTime: "5 minutes",
|
||||
})),
|
||||
Layer.provideMerge(FetchHttpClient.layer),
|
||||
)
|
||||
|
||||
export const runtime = ReactRuntime.make(AppLive)
|
||||
@@ -52,7 +50,9 @@ export const runtime = ReactRuntime.make(AppLive)
|
||||
|
||||
The client owns the cache and its cleanup lifecycle. Individual queries can
|
||||
override `staleTime` and `refreshOnWindowFocus`; otherwise they inherit the
|
||||
client defaults.
|
||||
client defaults. Window-focus refresh also requires the optional
|
||||
`@effect/platform-browser` package, as described under
|
||||
[Staleness and cache lifetime](#staleness-and-cache-lifetime).
|
||||
|
||||
## Create a reactive query
|
||||
|
||||
@@ -60,6 +60,12 @@ A query is driven by a `View` rather than by a value read during one React
|
||||
render. Whenever that key changes, `Query.service` checks the cache and starts
|
||||
the query effect when necessary.
|
||||
|
||||
`Query.service` is an Effect constructor, not a hook. Create each query instance
|
||||
once and keep it stable. In a component, the usual place is
|
||||
`Component.useOnMount`; a query shared by multiple components can instead be
|
||||
owned by an Effect service. Change the existing query's reactive key rather
|
||||
than reconstructing the query during render.
|
||||
|
||||
```tsx
|
||||
import { Effect, Schema, SubscriptionRef } from "effect"
|
||||
import { HttpClient } from "effect/unstable/http"
|
||||
@@ -118,9 +124,9 @@ Effect equality by default, so structurally equal Effect data types work well
|
||||
as query keys. Supply `keyEquivalence` when the key needs different equality
|
||||
semantics.
|
||||
|
||||
`Query.service` creates the query and starts watching its key in the current
|
||||
scope. Creating it in `Component.useOnMount` keeps one query instance—and one
|
||||
stable query function identity—for the component's lifetime.
|
||||
`Query.service` starts watching its key in the current scope. The
|
||||
`Component.useOnMount` call above keeps both the query instance and its query
|
||||
function identity stable for the component's lifetime.
|
||||
|
||||
## Render AsyncResult
|
||||
|
||||
@@ -264,8 +270,17 @@ const query = yield* Query.service({
|
||||
})
|
||||
```
|
||||
|
||||
Window focus resolves the current key again, subject to the same freshness
|
||||
check. The browser integration is ignored in non-browser environments.
|
||||
Window-focus refresh depends on the optional `@effect/platform-browser`
|
||||
integration. Install it in browser applications that use this behavior:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install @effect/platform-browser@beta
|
||||
```
|
||||
|
||||
When the package is available, focusing the window resolves the current key
|
||||
again, subject to the same freshness check. Without it,
|
||||
`refreshOnWindowFocus` has no effect; the rest of the Query API continues to
|
||||
work normally. The integration is also ignored in non-browser environments.
|
||||
|
||||
## The Effect touch
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@ subscribe to changes, and write updates back to the underlying source. A Lens
|
||||
can point at a whole state object or focus on one nested field inside it.
|
||||
|
||||
`effect-view` re-exports the `Lens` and `View` modules from
|
||||
[`effect-lens`](https://github.com/Thiladev/effect-lens) for convenience. The
|
||||
[`effect-lens`](https://www.npmjs.com/package/effect-lens/v/beta) for convenience. The
|
||||
core data model and transformation APIs belong to `effect-lens`, so check the
|
||||
[`effect-lens` documentation](https://github.com/Thiladev/effect-lens/tree/master/packages/effect-lens) for the full Lens/View API.
|
||||
[`effect-lens` documentation](https://www.npmjs.com/package/effect-lens/v/beta) for the full Lens/View API.
|
||||
|
||||
The usual pattern is to create state with Effect primitives such as
|
||||
`SubscriptionRef`, turn that primitive into a Lens with a matching constructor
|
||||
@@ -219,15 +219,16 @@ interface UserProfile {
|
||||
readonly name: string
|
||||
readonly email: string
|
||||
readonly role: string
|
||||
readonly contact: {
|
||||
readonly address: {
|
||||
readonly city: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ProfileState extends Context.Service<
|
||||
ProfileState,
|
||||
{
|
||||
readonly profile: Lens.Lens<UserProfile>
|
||||
readonly name: Lens.Lens<string>
|
||||
readonly role: Lens.Lens<string>
|
||||
}
|
||||
{ readonly profile: Lens.Lens<UserProfile> }
|
||||
>()("ProfileState") {
|
||||
static readonly layer = Layer.effect(
|
||||
ProfileState,
|
||||
@@ -237,20 +238,35 @@ class ProfileState extends Context.Service<
|
||||
name: "",
|
||||
email: "",
|
||||
role: "reader",
|
||||
contact: {
|
||||
address: {
|
||||
city: "",
|
||||
},
|
||||
},
|
||||
}),
|
||||
)
|
||||
const name = Lens.focusObjectOn(profile, "name")
|
||||
const role = Lens.focusObjectOn(profile, "role")
|
||||
|
||||
return { profile, name, role } as const
|
||||
return { profile } as const
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
const ProfileNameView = Component.make("ProfileName")(function*() {
|
||||
const state = yield* ProfileState
|
||||
const [name, setName] = yield* Lens.useState(state.name)
|
||||
const [role] = yield* View.useAll([state.role])
|
||||
const [nameLens, roleLens, cityLens] = yield* Component.useOnMount(() =>
|
||||
Effect.succeed([
|
||||
Lens.focusObjectOn(state.profile, "name"),
|
||||
Lens.focusObjectOn(state.profile, "role"),
|
||||
state.profile.pipe(
|
||||
Lens.focusObjectOn("contact"),
|
||||
Lens.focusObjectOn("address"),
|
||||
Lens.focusObjectOn("city"),
|
||||
),
|
||||
] as const),
|
||||
)
|
||||
|
||||
const [name, setName] = yield* Lens.useState(nameLens)
|
||||
const [role, city] = yield* View.useAll([roleLens, cityLens])
|
||||
|
||||
return (
|
||||
<label>
|
||||
@@ -260,15 +276,22 @@ const ProfileNameView = Component.make("ProfileName")(function*() {
|
||||
onChange={(event) => setName(event.currentTarget.value)}
|
||||
/>
|
||||
<span>Role: {role}</span>
|
||||
<span>City: {city}</span>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
```
|
||||
|
||||
Updating the focused `name` Lens through `Lens.useState` updates the parent
|
||||
`profile` Lens. The focused `role` Lens is only read, so it stays on the simpler
|
||||
`View.useAll` path.
|
||||
The service owns only the root `profile` Lens. The component chooses the fields
|
||||
it needs, creates those focused Lenses once in `Component.useOnMount`, and
|
||||
subscribes only to them. Updating `nameLens` through `Lens.useState` still
|
||||
updates the parent `profile` Lens.
|
||||
|
||||
Lens focus helpers have a dual API. They can be called in data-first form, such
|
||||
as `Lens.focusObjectOn(profile, "name")`, or in curried form with only the key
|
||||
or index. The `cityLens` above uses the curried form with `pipe` to focus through
|
||||
a deeper path without storing intermediate Lenses.
|
||||
|
||||
For focusing into nested state, deriving lenses, custom write behavior, and the
|
||||
complete API, refer to the
|
||||
[`effect-lens` documentation](https://github.com/Thiladev/effect-lens/tree/master/packages/effect-lens).
|
||||
[`effect-lens` documentation](https://www.npmjs.com/package/effect-lens/v/beta).
|
||||
|
||||
@@ -6,6 +6,7 @@ const sidebars: SidebarsConfig = {
|
||||
docsSidebar: [
|
||||
"getting-started",
|
||||
"state-management",
|
||||
"async",
|
||||
"query",
|
||||
"mutation",
|
||||
"forms",
|
||||
|
||||
@@ -72,9 +72,15 @@
|
||||
letter-spacing: -0.075em;
|
||||
line-height: 0.92;
|
||||
margin: 0;
|
||||
overflow-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.hero h1 span {
|
||||
.hero h1 .unbreakable {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero h1 .heroAccent {
|
||||
background: linear-gradient(105deg, var(--home-teal) 5%, #1a9793 48%, var(--home-amber));
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
@@ -100,8 +100,8 @@ export default function Home(): ReactNode {
|
||||
Effect View for React 19
|
||||
</div>
|
||||
<h1>
|
||||
React components,
|
||||
<span> powered by Effect.</span>
|
||||
React <span className={styles.unbreakable}>components,</span>
|
||||
<span className={styles.heroAccent}> powered by Effect.</span>
|
||||
</h1>
|
||||
<p className={styles.lede}>
|
||||
Bring typed services, scoped resources, reactive state, server
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
# Effect FC Example
|
||||
|
||||
Example application for the legacy `effect-fc` package, built with React,
|
||||
TypeScript, and Vite.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import react from 'eslint-plugin-react'
|
||||
|
||||
export default tseslint.config({
|
||||
// Set the react version
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
// Add the react plugin
|
||||
react,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended rules
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<title>Effect FC Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
@@ -1,10 +1,9 @@
|
||||
{
|
||||
"name": "@effect-fc/example-next",
|
||||
"name": "@effect-fc/example",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "tsc -b && vite build",
|
||||
"dev": "vite",
|
||||
"lint:tsc": "tsc -b --noEmit",
|
||||
"lint:biome": "biome lint",
|
||||
@@ -14,7 +13,6 @@
|
||||
"clean:modules": "rm -rf node_modules"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@effect-view/vite-plugin": "workspace:*",
|
||||
"@tanstack/react-router": "^1.170.10",
|
||||
"@tanstack/react-router-devtools": "^1.167.0",
|
||||
"@tanstack/router-plugin": "^1.168.13",
|
||||
@@ -24,18 +22,21 @@
|
||||
"globals": "^17.6.0",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"type-fest": "^5.7.0",
|
||||
"vite": "^8.0.16"
|
||||
},
|
||||
"dependencies": {
|
||||
"@effect/platform-browser": "4.0.0-beta.98",
|
||||
"@effect/platform": "^0.96.1",
|
||||
"@effect/platform-browser": "^0.76.0",
|
||||
"@radix-ui/themes": "^3.3.0",
|
||||
"effect": "4.0.0-beta.98",
|
||||
"effect-fc-next": "workspace:*",
|
||||
"@typed/id": "^0.17.2",
|
||||
"effect": "^3.21.2",
|
||||
"effect-fc": "workspace:*",
|
||||
"react-icons": "^5.6.0"
|
||||
},
|
||||
"overrides": {
|
||||
"@types/react": "^19.2.15",
|
||||
"effect": "4.0.0-beta.98",
|
||||
"effect": "^3.21.2",
|
||||
"react": "^19.2.6"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
+3
-3
@@ -1,6 +1,6 @@
|
||||
import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
|
||||
import { Array, Option, Struct } from "effect"
|
||||
import { Component, Form, View } from "effect-fc-next"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
import type * as React from "react"
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(f
|
||||
props: TextFieldFormInputView.Props<readonly PropertyKey[], any, any, any>
|
||||
) {
|
||||
const input = yield* Form.useInput(props.form, props)
|
||||
const [issues, isValidating, isCommitting] = yield* View.useAll([
|
||||
const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
|
||||
props.form.issues,
|
||||
props.form.isValidating,
|
||||
props.form.isCommitting,
|
||||
@@ -29,7 +29,7 @@ export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(f
|
||||
value={input.value}
|
||||
onChange={e => input.setValue(e.target.value)}
|
||||
disabled={isCommitting}
|
||||
{...Struct.omit(props, ["form"])}
|
||||
{...Struct.omit(props, "form")}
|
||||
>
|
||||
{isValidating &&
|
||||
<TextField.Slot side="right">
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
|
||||
import { Array, Option, Struct } from "effect"
|
||||
import { Component, Form, View } from "effect-fc-next"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
import type * as React from "react"
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalF
|
||||
props: TextFieldOptionalFormInputView.Props<readonly PropertyKey[], any, any, any>
|
||||
) {
|
||||
const input = yield* Form.useOptionalInput(props.form, props)
|
||||
const [issues, isValidating, isCommitting] = yield* View.useAll([
|
||||
const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
|
||||
props.form.issues,
|
||||
props.form.isValidating,
|
||||
props.form.isCommitting,
|
||||
@@ -29,7 +29,7 @@ export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalF
|
||||
value={input.value}
|
||||
onChange={e => input.setValue(e.target.value)}
|
||||
disabled={!input.enabled || isCommitting}
|
||||
{...Struct.omit(props, ["form", "defaultValue"])}
|
||||
{...Struct.omit(props, "form", "defaultValue")}
|
||||
>
|
||||
<TextField.Slot side="left">
|
||||
<Switch
|
||||
@@ -1,21 +1,24 @@
|
||||
import { createRouter, RouterProvider } from "@tanstack/react-router"
|
||||
import { ReactRuntime } from "effect-fc-next"
|
||||
import { ReactRuntime } from "effect-fc"
|
||||
import { StrictMode } from "react"
|
||||
import { createRoot } from "react-dom/client"
|
||||
import { routeTree } from "./routeTree.gen"
|
||||
import { runtime } from "./runtime"
|
||||
|
||||
|
||||
const router = createRouter({ routeTree })
|
||||
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register { router: typeof router }
|
||||
interface Register {
|
||||
router: typeof router
|
||||
}
|
||||
}
|
||||
|
||||
// biome-ignore lint/style/noNonNullAssertion: the Vite template provides this element
|
||||
// biome-ignore lint/style/noNonNullAssertion: React entrypoint
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<ReactRuntime.Provider runtime={runtime}>
|
||||
<RouterProvider router={router} />
|
||||
</ReactRuntime.Provider>
|
||||
</StrictMode>,
|
||||
</StrictMode>
|
||||
)
|
||||
+118
-57
@@ -9,26 +9,23 @@
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as AsyncRouteImport } from './routes/async'
|
||||
import { Route as BlankRouteImport } from './routes/blank'
|
||||
import { Route as FormRouteImport } from './routes/form'
|
||||
import { Route as LensformRouteImport } from './routes/lensform'
|
||||
import { Route as ResultRouteImport } from './routes/result'
|
||||
import { Route as QueryRouteImport } from './routes/query'
|
||||
import { Route as FormRouteImport } from './routes/form'
|
||||
import { Route as BlankRouteImport } from './routes/blank'
|
||||
import { Route as AsyncRouteImport } from './routes/async'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as DevMemoRouteImport } from './routes/dev/memo'
|
||||
import { Route as DevContextRouteImport } from './routes/dev/context'
|
||||
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
const ResultRoute = ResultRouteImport.update({
|
||||
id: '/result',
|
||||
path: '/result',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const AsyncRoute = AsyncRouteImport.update({
|
||||
id: '/async',
|
||||
path: '/async',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const BlankRoute = BlankRouteImport.update({
|
||||
id: '/blank',
|
||||
path: '/blank',
|
||||
const QueryRoute = QueryRouteImport.update({
|
||||
id: '/query',
|
||||
path: '/query',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const FormRoute = FormRouteImport.update({
|
||||
@@ -36,14 +33,29 @@ const FormRoute = FormRouteImport.update({
|
||||
path: '/form',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const LensformRoute = LensformRouteImport.update({
|
||||
id: '/lensform',
|
||||
path: '/lensform',
|
||||
const BlankRoute = BlankRouteImport.update({
|
||||
id: '/blank',
|
||||
path: '/blank',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const QueryRoute = QueryRouteImport.update({
|
||||
id: '/query',
|
||||
path: '/query',
|
||||
const AsyncRoute = AsyncRouteImport.update({
|
||||
id: '/async',
|
||||
path: '/async',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DevMemoRoute = DevMemoRouteImport.update({
|
||||
id: '/dev/memo',
|
||||
path: '/dev/memo',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DevContextRoute = DevContextRouteImport.update({
|
||||
id: '/dev/context',
|
||||
path: '/dev/context',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
|
||||
@@ -52,16 +64,20 @@ export interface FileRoutesByFullPath {
|
||||
'/async': typeof AsyncRoute
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/lensform': typeof LensformRoute
|
||||
'/query': typeof QueryRoute
|
||||
'/result': typeof ResultRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/async': typeof AsyncRoute
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/lensform': typeof LensformRoute
|
||||
'/query': typeof QueryRoute
|
||||
'/result': typeof ResultRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
@@ -69,15 +85,42 @@ export interface FileRoutesById {
|
||||
'/async': typeof AsyncRoute
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/lensform': typeof LensformRoute
|
||||
'/query': typeof QueryRoute
|
||||
'/result': typeof ResultRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query'
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/async'
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/query'
|
||||
| '/result'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query'
|
||||
id: '__root__' | '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query'
|
||||
to:
|
||||
| '/'
|
||||
| '/async'
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/query'
|
||||
| '/result'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/async'
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/query'
|
||||
| '/result'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
@@ -85,31 +128,26 @@ export interface RootRouteChildren {
|
||||
AsyncRoute: typeof AsyncRoute
|
||||
BlankRoute: typeof BlankRoute
|
||||
FormRoute: typeof FormRoute
|
||||
LensformRoute: typeof LensformRoute
|
||||
QueryRoute: typeof QueryRoute
|
||||
ResultRoute: typeof ResultRoute
|
||||
DevContextRoute: typeof DevContextRoute
|
||||
DevMemoRoute: typeof DevMemoRoute
|
||||
}
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
'/result': {
|
||||
id: '/result'
|
||||
path: '/result'
|
||||
fullPath: '/result'
|
||||
preLoaderRoute: typeof ResultRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/async': {
|
||||
id: '/async'
|
||||
path: '/async'
|
||||
fullPath: '/async'
|
||||
preLoaderRoute: typeof AsyncRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/blank': {
|
||||
id: '/blank'
|
||||
path: '/blank'
|
||||
fullPath: '/blank'
|
||||
preLoaderRoute: typeof BlankRouteImport
|
||||
'/query': {
|
||||
id: '/query'
|
||||
path: '/query'
|
||||
fullPath: '/query'
|
||||
preLoaderRoute: typeof QueryRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/form': {
|
||||
@@ -119,18 +157,39 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof FormRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/lensform': {
|
||||
id: '/lensform'
|
||||
path: '/lensform'
|
||||
fullPath: '/lensform'
|
||||
preLoaderRoute: typeof LensformRouteImport
|
||||
'/blank': {
|
||||
id: '/blank'
|
||||
path: '/blank'
|
||||
fullPath: '/blank'
|
||||
preLoaderRoute: typeof BlankRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/query': {
|
||||
id: '/query'
|
||||
path: '/query'
|
||||
fullPath: '/query'
|
||||
preLoaderRoute: typeof QueryRouteImport
|
||||
'/async': {
|
||||
id: '/async'
|
||||
path: '/async'
|
||||
fullPath: '/async'
|
||||
preLoaderRoute: typeof AsyncRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dev/memo': {
|
||||
id: '/dev/memo'
|
||||
path: '/dev/memo'
|
||||
fullPath: '/dev/memo'
|
||||
preLoaderRoute: typeof DevMemoRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dev/context': {
|
||||
id: '/dev/context'
|
||||
path: '/dev/context'
|
||||
fullPath: '/dev/context'
|
||||
preLoaderRoute: typeof DevContextRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
}
|
||||
@@ -141,8 +200,10 @@ const rootRouteChildren: RootRouteChildren = {
|
||||
AsyncRoute: AsyncRoute,
|
||||
BlankRoute: BlankRoute,
|
||||
FormRoute: FormRoute,
|
||||
LensformRoute: LensformRoute,
|
||||
QueryRoute: QueryRoute,
|
||||
ResultRoute: ResultRoute,
|
||||
DevContextRoute: DevContextRoute,
|
||||
DevMemoRoute: DevMemoRoute,
|
||||
}
|
||||
export const routeTree = rootRouteImport
|
||||
._addFileChildren(rootRouteChildren)
|
||||
+1
-5
@@ -7,7 +7,7 @@ import "../index.css"
|
||||
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: Root,
|
||||
component: Root
|
||||
})
|
||||
|
||||
function Root() {
|
||||
@@ -17,10 +17,6 @@ function Root() {
|
||||
<Flex direction="row" justify="center" align="center" gap="2">
|
||||
<Link to="/">Index</Link>
|
||||
<Link to="/blank">Blank</Link>
|
||||
<Link to="/async">Async</Link>
|
||||
<Link to="/query">Query</Link>
|
||||
<Link to="/form">Form</Link>
|
||||
<Link to="/lensform">LensForm</Link>
|
||||
</Flex>
|
||||
</Container>
|
||||
|
||||
+23
-29
@@ -1,35 +1,30 @@
|
||||
import { HttpClient } from "@effect/platform"
|
||||
import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect } from "effect"
|
||||
import { Async, Component, Memoized } from "effect-fc-next"
|
||||
import { Array, Effect, flow, Option, Schema } from "effect"
|
||||
import { Async, Component, Memoized } from "effect-fc"
|
||||
import * as React from "react"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const fetchPost = (id: number) => Effect.sleep("500 millis").pipe(
|
||||
Effect.as({
|
||||
title: `Post ${id}`,
|
||||
body: `This is the content of post ${id}.`,
|
||||
}),
|
||||
)
|
||||
|
||||
const Post = Schema.Struct({
|
||||
userId: Schema.Int,
|
||||
id: Schema.Int,
|
||||
title: Schema.String,
|
||||
body: Schema.String,
|
||||
})
|
||||
|
||||
interface AsyncFetchPostViewProps {
|
||||
readonly id: number
|
||||
}
|
||||
|
||||
const AsyncFetchPostView = Component.make("AsyncFetchPostView")(function*(
|
||||
props: AsyncFetchPostViewProps,
|
||||
) {
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("AsyncFetchPostView unmounted"))
|
||||
yield* Console.log("AsyncFetchPostView mounted")
|
||||
}))
|
||||
|
||||
const post = yield* Component.useOnChange(
|
||||
() => fetchPost(props.id),
|
||||
[props.id],
|
||||
)
|
||||
class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(props: AsyncFetchPostViewProps) {
|
||||
const post = yield* Component.useOnChange(() => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("500 millis")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ props.id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknown(Post)),
|
||||
), [props.id])
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -39,9 +34,10 @@ const AsyncFetchPostView = Component.make("AsyncFetchPostView")(function*(
|
||||
)
|
||||
}).pipe(
|
||||
Async.async,
|
||||
Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
|
||||
Async.withOptions({ defaultFallback: <Text>Default fallback</Text> }),
|
||||
Memoized.memoized,
|
||||
)
|
||||
) {}
|
||||
|
||||
|
||||
const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
|
||||
const [text, setText] = React.useState("Typing here should not trigger a refetch of the post")
|
||||
@@ -54,22 +50,20 @@ const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
|
||||
<Flex direction="column" align="stretch" gap="2">
|
||||
<TextField.Root
|
||||
value={text}
|
||||
onChange={event => setText(event.currentTarget.value)}
|
||||
onChange={e => setText(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Slider
|
||||
value={[id]}
|
||||
min={1}
|
||||
max={10}
|
||||
onValueChange={([value]) => setId(value ?? 1)}
|
||||
onValueChange={flow(Array.head, Option.getOrThrow, setId)}
|
||||
/>
|
||||
|
||||
<AsyncFetchPost id={id} />
|
||||
<AsyncFetchPost id={id} fallback={<Text>Loading post...</Text>} />
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withContext(runtime.context),
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/async")({
|
||||
@@ -0,0 +1,143 @@
|
||||
import { Button, Container, Flex, Text } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
|
||||
import { Component, Form, SubmittableForm, Subscribable } from "effect-fc"
|
||||
import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
|
||||
import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
|
||||
import { DateTimeUtcFromZonedInput } from "@/lib/schema"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const email = Schema.pattern<typeof Schema.String>(
|
||||
/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i,
|
||||
|
||||
{
|
||||
identifier: "email",
|
||||
title: "email",
|
||||
message: () => "Not an email address",
|
||||
},
|
||||
)
|
||||
|
||||
const RegisterFormSchema = Schema.Struct({
|
||||
email: Schema.String.pipe(email),
|
||||
password: Schema.String.pipe(Schema.minLength(3)),
|
||||
birth: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
|
||||
})
|
||||
|
||||
const RegisterFormSubmitSchema = Schema.Struct({
|
||||
email: Schema.transformOrFail(
|
||||
Schema.String,
|
||||
Schema.String,
|
||||
{
|
||||
decode: (input, _options, ast) => input !== "admin@admin.com"
|
||||
? ParseResult.succeed(input)
|
||||
: ParseResult.fail(new ParseResult.Type(ast, input, "This email is already in use.")),
|
||||
encode: ParseResult.succeed,
|
||||
},
|
||||
),
|
||||
password: Schema.String,
|
||||
birth: Schema.OptionFromSelf(Schema.DateTimeUtcFromSelf),
|
||||
})
|
||||
|
||||
class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
|
||||
scoped: Effect.gen(function*() {
|
||||
const form = yield* SubmittableForm.service({
|
||||
schema: RegisterFormSchema.pipe(
|
||||
Schema.compose(
|
||||
Schema.transformOrFail(
|
||||
Schema.typeSchema(RegisterFormSchema),
|
||||
Schema.typeSchema(RegisterFormSchema),
|
||||
{
|
||||
decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
|
||||
encode: ParseResult.succeed,
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
initialEncodedValue: { email: "", password: "", birth: Option.none() },
|
||||
f: Effect.fnUntraced(function*([value]) {
|
||||
yield* Effect.sleep("500 millis")
|
||||
return yield* Schema.decode(RegisterFormSubmitSchema)(value)
|
||||
}),
|
||||
})
|
||||
|
||||
return {
|
||||
form,
|
||||
emailField: Form.focusObjectOn(form, "email"),
|
||||
passwordField: Form.focusObjectOn(form, "password"),
|
||||
birthField: Form.focusObjectOn(form, "birth"),
|
||||
} as const
|
||||
})
|
||||
}) {}
|
||||
|
||||
class RegisterFormView extends Component.make("RegisterFormView")(function*() {
|
||||
const form = yield* RegisterFormService
|
||||
const [canCommit, submitResult] = yield* Subscribable.useAll([
|
||||
form.form.canCommit,
|
||||
form.form.mutation.result,
|
||||
])
|
||||
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
const TextFieldFormInput = yield* TextFieldFormInputView.use
|
||||
const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
|
||||
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
|
||||
yield* Console.log("RegisterFormView mounted")
|
||||
}))
|
||||
|
||||
|
||||
return (
|
||||
<Container width="300">
|
||||
<form onSubmit={e => {
|
||||
e.preventDefault()
|
||||
void runPromise(form.form.submit)
|
||||
}}>
|
||||
<Flex direction="column" gap="2">
|
||||
<TextFieldFormInput
|
||||
form={form.emailField}
|
||||
debounce="250 millis"
|
||||
/>
|
||||
|
||||
<TextFieldFormInput
|
||||
form={form.passwordField}
|
||||
debounce="250 millis"
|
||||
/>
|
||||
|
||||
<TextFieldOptionalFormInput
|
||||
type="datetime-local"
|
||||
form={form.birthField}
|
||||
defaultValue=""
|
||||
/>
|
||||
|
||||
<Button disabled={!canCommit}>Submit</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
|
||||
{Match.value(submitResult).pipe(
|
||||
Match.tag("Initial", () => <></>),
|
||||
Match.tag("Running", () => <Text>Submitting...</Text>),
|
||||
Match.tag("Success", () => <Text>Submitted successfully!</Text>),
|
||||
Match.tag("Failure", e => <Text>Error: {e.cause.toString()}</Text>),
|
||||
Match.exhaustive,
|
||||
)}
|
||||
</Container>
|
||||
)
|
||||
}) {}
|
||||
|
||||
const RegisterPage = Component.make("RegisterPageView")(function*() {
|
||||
const RegisterForm = yield* Effect.provide(
|
||||
RegisterFormView.use,
|
||||
yield* Component.useLayer(RegisterFormService.Default),
|
||||
)
|
||||
|
||||
return <RegisterForm />
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
|
||||
export const Route = createFileRoute("/form")({
|
||||
component: RegisterPage
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Effect } from "effect"
|
||||
import { Component } from "effect-fc"
|
||||
import { runtime } from "@/runtime"
|
||||
import { TodosState } from "@/todo/TodosState"
|
||||
import { TodosView } from "@/todo/TodosView"
|
||||
|
||||
|
||||
const TodosStateLive = TodosState.Default("todos")
|
||||
|
||||
const Index = Component.make("IndexView")(function*() {
|
||||
const Todos = yield* Effect.provide(
|
||||
TodosView.use,
|
||||
yield* Component.useLayer(TodosStateLive),
|
||||
)
|
||||
|
||||
return <Todos />
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: Index
|
||||
})
|
||||
@@ -0,0 +1,117 @@
|
||||
import { HttpClient, type HttpClientError } from "@effect/platform"
|
||||
import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream, SubscriptionRef } from "effect"
|
||||
import { Component, ErrorObserver, Lens, Mutation, Query, Result, Subscribable } from "effect-fc"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const Post = Schema.Struct({
|
||||
userId: Schema.Int,
|
||||
id: Schema.Int,
|
||||
title: Schema.String,
|
||||
body: Schema.String,
|
||||
})
|
||||
|
||||
const ResultView = Component.make("ResultView")(function*() {
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
const [idLens, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
const idLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(1))
|
||||
const key = Stream.map(idLens.changes, id => [id] as const)
|
||||
|
||||
const query = yield* Query.service({
|
||||
key,
|
||||
f: ([id]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("500 millis")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknown(Post)),
|
||||
),
|
||||
staleTime: "10 seconds",
|
||||
})
|
||||
|
||||
const mutation = yield* Mutation.make({
|
||||
f: ([id]: readonly [id: number]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("500 millis")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknown(Post)),
|
||||
),
|
||||
})
|
||||
|
||||
return [idLens, query, mutation] as const
|
||||
}))
|
||||
|
||||
const [id, setId] = yield* Lens.useState(idLens)
|
||||
const [queryResult, mutationResult] = yield* Subscribable.useAll([query.result, mutation.result])
|
||||
|
||||
yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
|
||||
Effect.andThen(observer => observer.subscribe),
|
||||
Effect.andThen(Stream.fromQueue),
|
||||
Stream.unwrapScoped,
|
||||
Stream.runForEach(flow(
|
||||
Cause.failures,
|
||||
Chunk.findFirst(e => e._tag === "RequestError" || e._tag === "ResponseError"),
|
||||
Option.match({
|
||||
onSome: e => Console.log("ResultView HttpClient error", e),
|
||||
onNone: () => Effect.void,
|
||||
}),
|
||||
)),
|
||||
Effect.forkScoped,
|
||||
))
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Flex direction="column" align="center" gap="2">
|
||||
<Slider
|
||||
value={[id]}
|
||||
onValueChange={flow(Array.head, Option.getOrThrow, setId)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
{Match.value(queryResult).pipe(
|
||||
Match.tag("Running", () => <Text>Loading...</Text>),
|
||||
Match.tag("Success", result => <>
|
||||
<Heading>{result.value.title}</Heading>
|
||||
<Text>{result.value.body}</Text>
|
||||
{Result.hasRefreshingFlag(result) && <Text>Refreshing...</Text>}
|
||||
</>),
|
||||
Match.tag("Failure", result =>
|
||||
<Text>An error has occured: {result.cause.toString()}</Text>
|
||||
),
|
||||
Match.orElse(() => <></>),
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Flex direction="row" justify="center" align="center" gap="1">
|
||||
<Button onClick={() => runPromise(query.refresh)}>Refresh</Button>
|
||||
<Button onClick={() => runPromise(query.invalidateCache)}>Invalidate cache</Button>
|
||||
</Flex>
|
||||
|
||||
<div>
|
||||
{Match.value(mutationResult).pipe(
|
||||
Match.tag("Running", () => <Text>Loading...</Text>),
|
||||
Match.tag("Success", result => <>
|
||||
<Heading>{result.value.title}</Heading>
|
||||
<Text>{result.value.body}</Text>
|
||||
{Result.hasRefreshingFlag(result) && <Text>Refreshing...</Text>}
|
||||
</>),
|
||||
Match.tag("Failure", result =>
|
||||
<Text>An error has occured: {result.cause.toString()}</Text>
|
||||
),
|
||||
Match.orElse(() => <></>),
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Flex direction="row" justify="center" align="center" gap="1">
|
||||
<Button onClick={() => runPromise(Effect.andThen(Lens.get(idLens), id => mutation.mutate([id])))}>Mutate</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
})
|
||||
|
||||
export const Route = createFileRoute("/query")({
|
||||
component: Component.withRuntime(ResultView, runtime.context)
|
||||
})
|
||||
@@ -1,11 +1,10 @@
|
||||
import { FetchHttpClient } from "@effect/platform"
|
||||
import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
|
||||
import { DateTime, Layer } from "effect"
|
||||
import { FetchHttpClient } from "effect/unstable/http"
|
||||
import { QueryClient, ReactRuntime } from "effect-fc-next"
|
||||
import { ReactRuntime } from "effect-fc"
|
||||
|
||||
|
||||
export const layer = Layer.empty.pipe(
|
||||
Layer.provideMerge(QueryClient.layer()),
|
||||
export const AppLive = Layer.empty.pipe(
|
||||
Layer.provideMerge(DateTime.layerCurrentZoneLocal),
|
||||
Layer.provideMerge(Clipboard.layer),
|
||||
Layer.provideMerge(Geolocation.layer),
|
||||
@@ -13,4 +12,4 @@ export const layer = Layer.empty.pipe(
|
||||
Layer.provideMerge(FetchHttpClient.layer),
|
||||
)
|
||||
|
||||
export const runtime = ReactRuntime.make(layer)
|
||||
export const runtime = ReactRuntime.make(AppLive)
|
||||
@@ -1,6 +1,5 @@
|
||||
import { tanstackRouter } from "@tanstack/router-plugin/vite"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { effectViewPlugin } from "@effect-view/vite-plugin"
|
||||
import path from "node:path"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
@@ -8,7 +7,6 @@ import { defineConfig } from "vite"
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
effectViewPlugin(),
|
||||
tanstackRouter({
|
||||
target: "react",
|
||||
autoCodeSplitting: true,
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
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.
|
||||
Documentation is currently being written. In the meantime, you can take a look at the `packages/effect-fc-example` directory.
|
||||
|
||||
## Peer dependencies
|
||||
- `effect` 3.19+
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "effect-fc",
|
||||
"description": "Write React function components with Effect",
|
||||
"version": "0.3.0",
|
||||
"version": "0.3.1",
|
||||
"type": "module",
|
||||
"files": [
|
||||
"./README.md",
|
||||
@@ -9,7 +9,7 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"url": "git+https://github.com/Thiladev/effect-fc.git"
|
||||
"url": "git+https://github.com/Thiladev/effect-view.git"
|
||||
},
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
@@ -50,6 +50,6 @@
|
||||
"react": "^19.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"effect-lens": "^0.2.0"
|
||||
"effect-lens": "^0.2.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,6 +273,7 @@ describe("Component", () => {
|
||||
)
|
||||
|
||||
await screen.findByText("first")
|
||||
vi.useFakeTimers()
|
||||
|
||||
view.rerender(
|
||||
<runtime.context.Provider value={effectRuntime}>
|
||||
@@ -280,16 +281,19 @@ describe("Component", () => {
|
||||
</runtime.context.Provider>
|
||||
)
|
||||
|
||||
await screen.findByText("second")
|
||||
expect(screen.getByText("second")).toBeTruthy()
|
||||
expect(cleanup).not.toHaveBeenCalled()
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 5))
|
||||
await vi.advanceTimersByTimeAsync(19)
|
||||
expect(cleanup).not.toHaveBeenCalled()
|
||||
|
||||
await waitFor(() => expect(cleanup).toHaveBeenCalledWith("first"), { timeout: 100 })
|
||||
await vi.advanceTimersByTimeAsync(1)
|
||||
expect(cleanup).toHaveBeenCalledWith("first")
|
||||
|
||||
view.unmount()
|
||||
await waitFor(() => expect(cleanup).toHaveBeenCalledWith("second"), { timeout: 100 })
|
||||
await vi.advanceTimersByTimeAsync(20)
|
||||
expect(cleanup).toHaveBeenCalledWith("second")
|
||||
vi.useRealTimers()
|
||||
await Effect.runPromise(runtime.runtime.disposeEffect)
|
||||
})
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<p align="center">
|
||||
<a href="https://thila.dev/effect-view">
|
||||
<img src="../docs/static/img/logo.svg" width="104" height="104" alt="Effect View logo" />
|
||||
<img src="https://github.com/Thiladev/effect-view/raw/master/packages/docs/static/img/logo.svg" width="104" height="104" alt="Effect View logo" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "effect-fc-next",
|
||||
"name": "effect-view",
|
||||
"description": "Write React function components with Effect",
|
||||
"version": "0.1.0-beta.0",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"files": [
|
||||
"./README.md",
|
||||
@@ -9,7 +9,7 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"url": "git+https://github.com/Thiladev/effect-fc.git"
|
||||
"url": "git+https://github.com/Thiladev/effect-view.git"
|
||||
},
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
@@ -97,19 +97,19 @@
|
||||
"clean:modules": "rm -rf node_modules"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@effect/platform-browser": "4.0.0-beta.98",
|
||||
"@effect/platform-browser": "4.0.0-beta.101",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"effect": "4.0.0-beta.98",
|
||||
"effect": "4.0.0-beta.101",
|
||||
"jsdom": "^26.1.0",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0",
|
||||
"effect": "4.0.0-beta.98",
|
||||
"effect": "4.0.0-beta.101",
|
||||
"react": "^19.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.1.0",
|
||||
"effect-lens": "^2.0.0-beta.1"
|
||||
"effect-lens": "^2.0.1-beta.101"
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import * as React from "react"
|
||||
import * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const AsyncTypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
|
||||
export const AsyncTypeId: unique symbol = Symbol.for("@effect-view/Async/Async")
|
||||
export type AsyncTypeId = typeof AsyncTypeId
|
||||
|
||||
|
||||
+8
-4
@@ -277,6 +277,7 @@ describe("Component", () => {
|
||||
)
|
||||
|
||||
await screen.findByText("first")
|
||||
vi.useFakeTimers()
|
||||
|
||||
view.rerender(
|
||||
<runtime.context.Provider value={effectRuntime}>
|
||||
@@ -284,16 +285,19 @@ describe("Component", () => {
|
||||
</runtime.context.Provider>
|
||||
)
|
||||
|
||||
await screen.findByText("second")
|
||||
expect(screen.getByText("second")).toBeTruthy()
|
||||
expect(cleanup).not.toHaveBeenCalled()
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 5))
|
||||
await vi.advanceTimersByTimeAsync(19)
|
||||
expect(cleanup).not.toHaveBeenCalled()
|
||||
|
||||
await waitFor(() => expect(cleanup).toHaveBeenCalledWith("first"), { timeout: 100 })
|
||||
await vi.advanceTimersByTimeAsync(1)
|
||||
expect(cleanup).toHaveBeenCalledWith("first")
|
||||
|
||||
view.unmount()
|
||||
await waitFor(() => expect(cleanup).toHaveBeenCalledWith("second"), { timeout: 100 })
|
||||
await vi.advanceTimersByTimeAsync(20)
|
||||
expect(cleanup).toHaveBeenCalledWith("second")
|
||||
vi.useRealTimers()
|
||||
await runtime.runtime.dispose()
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import * as React from "react"
|
||||
import * as ScopeRegistry from "./ScopeRegistry.js"
|
||||
|
||||
|
||||
export const ComponentTypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
|
||||
export const ComponentTypeId: unique symbol = Symbol.for("@effect-view/Component/Component")
|
||||
export type ComponentTypeId = typeof ComponentTypeId
|
||||
|
||||
/**
|
||||
@@ -416,9 +416,9 @@ export declare namespace make {
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an Effect-FC Component using the same overloads and pipeline composition style as `Effect.fn`.
|
||||
* Creates an Effect View Component using the same overloads and pipeline composition style as `Effect.fn`.
|
||||
*
|
||||
* This is the **recommended** approach for defining Effect-FC components. It provides comprehensive
|
||||
* This is the **recommended** approach for defining Effect View components. It provides comprehensive
|
||||
* support for multiple component definition patterns:
|
||||
*
|
||||
* - **Generator syntax** (yield* style): Most ergonomic and readable approach for sequential operations
|
||||
@@ -491,7 +491,7 @@ export const make: (
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an Effect-FC Component without automatic distributed tracing.
|
||||
* Creates an Effect View Component without automatic distributed tracing.
|
||||
*
|
||||
* This function provides the same API surface as `make`, but does not create automatic tracing spans.
|
||||
* It follows the exact same overload structure as `Effect.fnUntraced`.
|
||||
@@ -608,19 +608,19 @@ export const withOptions: {
|
||||
))
|
||||
|
||||
/**
|
||||
* Wraps an Effect-FC Component and converts it into a standard React function component,
|
||||
* serving as an **entrypoint** into an Effect-FC component hierarchy.
|
||||
* Wraps an Effect View Component and converts it into a standard React function component,
|
||||
* serving as an **entrypoint** into an Effect View component hierarchy.
|
||||
*
|
||||
* This is how Effect-FC components are integrated with the broader React ecosystem,
|
||||
* This is how Effect View components are integrated with the broader React ecosystem,
|
||||
* particularly when:
|
||||
* - Using client-side routers (TanStack Router, React Router, etc.)
|
||||
* - Implementing lazy-loaded or code-split routes
|
||||
* - Connecting to third-party libraries expecting standard React components
|
||||
* - Creating component boundaries between Effect-FC and non-Effect-FC code
|
||||
* - Creating component boundaries between Effect View and non-Effect View code
|
||||
*
|
||||
* The Effect runtime is obtained from the provided React Context.
|
||||
*
|
||||
* @param self - The Effect-FC Component to be rendered as a standard React component
|
||||
* @param self - The Effect View Component to be rendered as a standard React component
|
||||
* @param context - React Context providing the Effect Runtime for this component tree.
|
||||
* Create this using the `ReactRuntime` module.
|
||||
*
|
||||
@@ -6,7 +6,7 @@ import * as Lens from "./Lens.js"
|
||||
import * as View from "./View.js"
|
||||
|
||||
|
||||
export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
|
||||
export const FormTypeId: unique symbol = Symbol.for("@effect-view/Form/Form")
|
||||
export type FormTypeId = typeof FormTypeId
|
||||
|
||||
export interface Form<out P extends readonly PropertyKey[], out A, in out I = A, out ER = never, out EW = never>
|
||||
@@ -5,7 +5,7 @@ import * as Lens from "./Lens.js"
|
||||
import * as View from "./View.js"
|
||||
|
||||
|
||||
export const LensFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/LensForm")
|
||||
export const LensFormTypeId: unique symbol = Symbol.for("@effect-view/Form/LensForm")
|
||||
export type LensFormTypeId = typeof LensFormTypeId
|
||||
|
||||
export interface LensForm<in out A, in out I = A, in out RD = never, in out RE = never, out TER = never, out TEW = never, in out TRR = never, in out TRW = never>
|
||||
@@ -4,7 +4,7 @@ import * as React from "react"
|
||||
import type * as Component from "./Component.js"
|
||||
|
||||
|
||||
export const MemoizedTypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
|
||||
export const MemoizedTypeId: unique symbol = Symbol.for("@effect-view/Memoized/Memoized")
|
||||
export type MemoizedTypeId = typeof MemoizedTypeId
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import * as Lens from "./Lens.js"
|
||||
import * as View from "./View.js"
|
||||
|
||||
|
||||
export const MutationTypeId: unique symbol = Symbol.for("@effect-fc/Mutation/Mutation")
|
||||
export const MutationTypeId: unique symbol = Symbol.for("@effect-view/Mutation/Mutation")
|
||||
export type MutationTypeId = typeof MutationTypeId
|
||||
|
||||
export interface Mutation<in out K, out A, out E = never, in out R = never>
|
||||
+1
-1
@@ -7,7 +7,7 @@ import * as Mutation from "./Mutation.js"
|
||||
import * as View from "./View.js"
|
||||
|
||||
|
||||
export const MutationFormTypeId: unique symbol = Symbol.for("@effect-fc/Form/MutationForm")
|
||||
export const MutationFormTypeId: unique symbol = Symbol.for("@effect-view/Form/MutationForm")
|
||||
export type MutationFormTypeId = typeof MutationFormTypeId
|
||||
|
||||
export interface MutationForm<in out A, in out I = A, in out RD = never, in out RE = never, out MA = void, out ME = never, in out MR = never>
|
||||
@@ -5,7 +5,7 @@ import * as QueryClient from "./QueryClient.js"
|
||||
import * as View from "./View.js"
|
||||
|
||||
|
||||
export const QueryTypeId: unique symbol = Symbol.for("@effect-fc/Query/Query")
|
||||
export const QueryTypeId: unique symbol = Symbol.for("@effect-view/Query/Query")
|
||||
export type QueryTypeId = typeof QueryTypeId
|
||||
|
||||
export interface Query<in out K, out A, out E = never, in out R = never>
|
||||
+4
-4
@@ -4,7 +4,7 @@ import * as Lens from "./Lens.js"
|
||||
import type * as View from "./View.js"
|
||||
|
||||
|
||||
export const QueryClientServiceTypeId: unique symbol = Symbol.for("@effect-fc/QueryClient/QueryClientService")
|
||||
export const QueryClientServiceTypeId: unique symbol = Symbol.for("@effect-view/QueryClient/QueryClientService")
|
||||
export type QueryClientServiceTypeId = typeof QueryClientServiceTypeId
|
||||
|
||||
export interface QueryClientService extends Pipeable.Pipeable {
|
||||
@@ -27,7 +27,7 @@ export interface QueryClientService extends Pipeable.Pipeable {
|
||||
}
|
||||
|
||||
export class QueryClient extends Context.Service<QueryClient, QueryClientService>()(
|
||||
"@effect-fc/QueryClient/QueryClient"
|
||||
"@effect-view/QueryClient/QueryClient"
|
||||
) {}
|
||||
|
||||
export class QueryClientServiceImpl
|
||||
@@ -129,7 +129,7 @@ export const service = (
|
||||
export const layer = (options?: service.Options) => Layer.effect(QueryClient, service(options))
|
||||
|
||||
|
||||
export const QueryClientCacheKeyTypeId: unique symbol = Symbol.for("@effect-fc/QueryClient/QueryClientCacheKey")
|
||||
export const QueryClientCacheKeyTypeId: unique symbol = Symbol.for("@effect-view/QueryClient/QueryClientCacheKey")
|
||||
export type QueryClientCacheKeyTypeId = typeof QueryClientCacheKeyTypeId
|
||||
|
||||
export class QueryClientCacheKey
|
||||
@@ -155,7 +155,7 @@ implements Pipeable.Pipeable, Equal.Equal {
|
||||
export const isQueryClientCacheKey = (u: unknown): u is QueryClientCacheKey => Predicate.hasProperty(u, QueryClientCacheKeyTypeId)
|
||||
|
||||
|
||||
export const QueryClientCacheEntryTypeId: unique symbol = Symbol.for("@effect-fc/QueryClient/QueryClientCacheEntry")
|
||||
export const QueryClientCacheEntryTypeId: unique symbol = Symbol.for("@effect-view/QueryClient/QueryClientCacheEntry")
|
||||
export type QueryClientCacheEntryTypeId = typeof QueryClientCacheEntryTypeId
|
||||
|
||||
export class QueryClientCacheEntry
|
||||
+1
-1
@@ -5,7 +5,7 @@ import * as Component from "./Component.js"
|
||||
import * as ScopeRegistry from "./ScopeRegistry.js"
|
||||
|
||||
|
||||
export const ReactRuntimeTypeId: unique symbol = Symbol.for("@effect-fc/ReactRuntime/ReactRuntime")
|
||||
export const ReactRuntimeTypeId: unique symbol = Symbol.for("@effect-view/ReactRuntime/ReactRuntime")
|
||||
export type ReactRuntimeTypeId = typeof ReactRuntimeTypeId
|
||||
|
||||
export interface ReactRuntime<R, ER> {
|
||||
@@ -1,10 +0,0 @@
|
||||
# Effect FC Next Example
|
||||
|
||||
Minimal React example for `effect-fc-next`, Effect V4, and `effect-lens@2`.
|
||||
|
||||
```bash
|
||||
bun run dev
|
||||
```
|
||||
|
||||
The counter demonstrates a V4 `SubscriptionRef` exposed as an Effect Lens and
|
||||
rendered through an Effect-FC component.
|
||||
@@ -1,82 +0,0 @@
|
||||
import { Button, Container, Flex, Text } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect, Schema } from "effect"
|
||||
import { Component, Form, MutationForm, View } from "effect-fc-next"
|
||||
import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const RegisterSchema = Schema.Struct({
|
||||
email: Schema.String.check(
|
||||
Schema.isPattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {
|
||||
message: "Enter a valid email address",
|
||||
}),
|
||||
),
|
||||
password: Schema.String.check(
|
||||
Schema.isMinLength(5, {
|
||||
message: "Password must be at least 5 characters long",
|
||||
}),
|
||||
),
|
||||
})
|
||||
|
||||
const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("Form route unmounted"))
|
||||
yield* Console.log("Form route mounted")
|
||||
}))
|
||||
|
||||
const [form, emailField, passwordField] = yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
const form = yield* MutationForm.service({
|
||||
schema: RegisterSchema,
|
||||
initialEncodedValue: { email: "", password: "" },
|
||||
f: ([value]) => Effect.log(`Registered ${value.email}`),
|
||||
})
|
||||
|
||||
const emailField = Form.focusObjectOn(form, "email")
|
||||
const passwordField = Form.focusObjectOn(form, "password")
|
||||
|
||||
return [form, emailField, passwordField] as const
|
||||
}))
|
||||
|
||||
const [canCommit, isCommitting] = yield* View.useAll([
|
||||
form.canCommit,
|
||||
form.isCommitting,
|
||||
])
|
||||
|
||||
const TextFieldFormInput = yield* TextFieldFormInputView.use
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
|
||||
return (
|
||||
<Container width="300">
|
||||
<form onSubmit={event => {
|
||||
event.preventDefault()
|
||||
void runPromise(form.submit)
|
||||
}}>
|
||||
<Flex direction="column" gap="2">
|
||||
<TextFieldFormInput
|
||||
form={emailField}
|
||||
placeholder="Email"
|
||||
debounce="250 millis"
|
||||
/>
|
||||
<TextFieldFormInput
|
||||
form={passwordField}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
debounce="250 millis"
|
||||
/>
|
||||
<Button disabled={!canCommit || isCommitting}>
|
||||
{isCommitting ? "Submitting…" : "Submit"}
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
<Text size="2">A MutationForm validates local input, then submits it.</Text>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/form")({
|
||||
component: RegisterRouteComponent,
|
||||
})
|
||||
@@ -1,56 +0,0 @@
|
||||
import { Button, Container, Flex, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Effect, SubscriptionRef } from "effect"
|
||||
import { Component, Lens, View } from "effect-fc-next"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const TodoRouteComponent = Component.make("TodoRouteView")(function*() {
|
||||
const todosLens = yield* Component.useOnMount(() => Effect.map(
|
||||
SubscriptionRef.make<readonly string[]>([]),
|
||||
Lens.fromSubscriptionRef,
|
||||
))
|
||||
const draftLens = yield* Component.useOnMount(() => Effect.map(
|
||||
SubscriptionRef.make(""),
|
||||
Lens.fromSubscriptionRef,
|
||||
))
|
||||
|
||||
const [todos] = yield* View.useAll([todosLens])
|
||||
const [draft, setDraft] = yield* Lens.useState(draftLens)
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
const addTodo = Lens.update(todosLens, todos =>
|
||||
draft.trim() === ""
|
||||
? todos
|
||||
: [...todos, draft.trim()],
|
||||
).pipe(
|
||||
Effect.andThen(Lens.set(draftLens, "")),
|
||||
)
|
||||
|
||||
return (
|
||||
<Container width="480">
|
||||
<Flex direction="column" gap="3">
|
||||
<Text size="2">A small Effect v4 todo state example backed by a Lens.</Text>
|
||||
|
||||
<Flex gap="2">
|
||||
<TextField.Root
|
||||
value={draft}
|
||||
onChange={event => setDraft(event.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Button onClick={() => void runPromise(addTodo)}>
|
||||
Add
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{todos.map(todo => <Text key={todo}>• {todo}</Text>)}
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: TodoRouteComponent,
|
||||
})
|
||||
@@ -1,102 +0,0 @@
|
||||
import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Effect, Schema, SubscriptionRef } from "effect"
|
||||
import { HttpClient } from "effect/unstable/http"
|
||||
import { AsyncResult } from "effect/unstable/reactivity"
|
||||
import { Component, Lens, Mutation, Query, View } from "effect-fc-next"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const Post = Schema.Struct({
|
||||
userId: Schema.Int,
|
||||
id: Schema.Int,
|
||||
title: Schema.String,
|
||||
body: Schema.String,
|
||||
})
|
||||
|
||||
|
||||
interface PostResultViewProps {
|
||||
readonly result: AsyncResult.AsyncResult<typeof Post.Type, Error>
|
||||
}
|
||||
|
||||
const PostResultView = (props: PostResultViewProps) => AsyncResult.match(props.result, {
|
||||
onInitial: result => result.waiting
|
||||
? <Text>Loading...</Text>
|
||||
: <Text>No data.</Text>,
|
||||
onFailure: result => <Text>Request failed: { result.cause.toString() }</Text>,
|
||||
onSuccess: result => <>
|
||||
{result.waiting && <Text>Refreshing...</Text>}
|
||||
<Heading>{result.value.title}</Heading>
|
||||
<Text>{result.value.body}</Text>
|
||||
</>,
|
||||
})
|
||||
|
||||
const QueryRouteComponent = Component.make("QueryRouteView")(function*() {
|
||||
const [idLens, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
const keyLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(["post", 1 as number] as const))
|
||||
const idLens = Lens.focusTupleAt(keyLens, 1)
|
||||
|
||||
const query = yield* Query.service({
|
||||
key: keyLens,
|
||||
f: ([, id]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("1 second")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknownEffect(Post)),
|
||||
),
|
||||
staleTime: "10 seconds",
|
||||
})
|
||||
|
||||
const mutation = yield* Mutation.make({
|
||||
f: ([id]: [id: number]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("1 second")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknownEffect(Post)),
|
||||
),
|
||||
})
|
||||
|
||||
return [idLens, query, mutation] as const
|
||||
}))
|
||||
|
||||
const [id, setId] = yield* Lens.useState(idLens)
|
||||
const [queryState, mutationState] = yield* View.useAll([query.state, mutation.state])
|
||||
|
||||
const runSync = yield* Component.useRunSync()
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Flex direction="column" align="center" gap="2">
|
||||
<Slider
|
||||
value={[id]}
|
||||
min={1}
|
||||
max={10}
|
||||
onValueChange={([value]) => setId(value ?? 1)}
|
||||
/>
|
||||
|
||||
<PostResultView result={queryState.result} />
|
||||
|
||||
<Flex direction="row" justify="center" align="center" gap="1">
|
||||
<Button onClick={() => runSync(query.refreshView)}>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button onClick={() => runSync(query.invalidateCache)}>
|
||||
Invalidate cache
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<PostResultView result={mutationState} />
|
||||
|
||||
<Button onClick={() => runSync(mutation.mutateView([id]))}>
|
||||
Mutate
|
||||
</Button>
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/query")({
|
||||
component: QueryRouteComponent,
|
||||
})
|
||||
@@ -1,50 +1,10 @@
|
||||
# React + TypeScript + Vite
|
||||
# Effect View Example
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
Minimal React example for `effect-view`, Effect V4, and `effect-lens@2`.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||
|
||||
- Configure the top-level `parserOptions` property like this:
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
```bash
|
||||
bun run dev
|
||||
```
|
||||
|
||||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import react from 'eslint-plugin-react'
|
||||
|
||||
export default tseslint.config({
|
||||
// Set the react version
|
||||
settings: { react: { version: '18.3' } },
|
||||
plugins: {
|
||||
// Add the react plugin
|
||||
react,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended rules
|
||||
...react.configs.recommended.rules,
|
||||
...react.configs['jsx-runtime'].rules,
|
||||
},
|
||||
})
|
||||
```
|
||||
The counter demonstrates a V4 `SubscriptionRef` exposed as an Effect Lens and
|
||||
rendered through an Effect View component.
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<title>Effect View Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
{
|
||||
"name": "@effect-fc/example",
|
||||
"name": "@effect-view/example",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "tsc -b && vite build",
|
||||
"dev": "vite",
|
||||
"lint:tsc": "tsc -b --noEmit",
|
||||
"lint:biome": "biome lint",
|
||||
@@ -13,6 +14,7 @@
|
||||
"clean:modules": "rm -rf node_modules"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@effect-view/vite-plugin": "workspace:*",
|
||||
"@tanstack/react-router": "^1.170.10",
|
||||
"@tanstack/react-router-devtools": "^1.167.0",
|
||||
"@tanstack/router-plugin": "^1.168.13",
|
||||
@@ -22,21 +24,18 @@
|
||||
"globals": "^17.6.0",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"type-fest": "^5.7.0",
|
||||
"vite": "^8.0.16"
|
||||
},
|
||||
"dependencies": {
|
||||
"@effect/platform": "^0.96.1",
|
||||
"@effect/platform-browser": "^0.76.0",
|
||||
"@effect/platform-browser": "4.0.0-beta.101",
|
||||
"@radix-ui/themes": "^3.3.0",
|
||||
"@typed/id": "^0.17.2",
|
||||
"effect": "^3.21.2",
|
||||
"effect-fc": "workspace:*",
|
||||
"effect": "4.0.0-beta.101",
|
||||
"effect-view": "workspace:*",
|
||||
"react-icons": "^5.6.0"
|
||||
},
|
||||
"overrides": {
|
||||
"@types/react": "^19.2.15",
|
||||
"effect": "^3.21.2",
|
||||
"effect": "4.0.0-beta.101",
|
||||
"react": "^19.2.6"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Callout, Flex, Spinner, TextField } from "@radix-ui/themes"
|
||||
import { Array, Option, Struct } from "effect"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
import { Component, Form, View } from "effect-view"
|
||||
import type * as React from "react"
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(f
|
||||
props: TextFieldFormInputView.Props<readonly PropertyKey[], any, any, any>
|
||||
) {
|
||||
const input = yield* Form.useInput(props.form, props)
|
||||
const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
|
||||
const [issues, isValidating, isCommitting] = yield* View.useAll([
|
||||
props.form.issues,
|
||||
props.form.isValidating,
|
||||
props.form.isCommitting,
|
||||
@@ -29,7 +29,7 @@ export const TextFieldFormInputView = Component.make("TextFieldFormInputView")(f
|
||||
value={input.value}
|
||||
onChange={e => input.setValue(e.target.value)}
|
||||
disabled={isCommitting}
|
||||
{...Struct.omit(props, "form")}
|
||||
{...Struct.omit(props, ["form"])}
|
||||
>
|
||||
{isValidating &&
|
||||
<TextField.Slot side="right">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
|
||||
import { Array, Option, Struct } from "effect"
|
||||
import { Component, Form, Subscribable } from "effect-fc"
|
||||
import { Component, Form, View } from "effect-view"
|
||||
import type * as React from "react"
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalF
|
||||
props: TextFieldOptionalFormInputView.Props<readonly PropertyKey[], any, any, any>
|
||||
) {
|
||||
const input = yield* Form.useOptionalInput(props.form, props)
|
||||
const [issues, isValidating, isCommitting] = yield* Subscribable.useAll([
|
||||
const [issues, isValidating, isCommitting] = yield* View.useAll([
|
||||
props.form.issues,
|
||||
props.form.isValidating,
|
||||
props.form.isCommitting,
|
||||
@@ -29,7 +29,7 @@ export const TextFieldOptionalFormInputView = Component.make("TextFieldOptionalF
|
||||
value={input.value}
|
||||
onChange={e => input.setValue(e.target.value)}
|
||||
disabled={!input.enabled || isCommitting}
|
||||
{...Struct.omit(props, "form", "defaultValue")}
|
||||
{...Struct.omit(props, ["form", "defaultValue"])}
|
||||
>
|
||||
<TextField.Slot side="left">
|
||||
<Switch
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
import { createRouter, RouterProvider } from "@tanstack/react-router"
|
||||
import { ReactRuntime } from "effect-fc"
|
||||
import { ReactRuntime } from "effect-view"
|
||||
import { StrictMode } from "react"
|
||||
import { createRoot } from "react-dom/client"
|
||||
import { routeTree } from "./routeTree.gen"
|
||||
import { runtime } from "./runtime"
|
||||
|
||||
|
||||
const router = createRouter({ routeTree })
|
||||
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: typeof router
|
||||
}
|
||||
interface Register { router: typeof router }
|
||||
}
|
||||
|
||||
// biome-ignore lint/style/noNonNullAssertion: React entrypoint
|
||||
// biome-ignore lint/style/noNonNullAssertion: the Vite template provides this element
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<ReactRuntime.Provider runtime={runtime}>
|
||||
<RouterProvider router={router} />
|
||||
</ReactRuntime.Provider>
|
||||
</StrictMode>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -9,33 +9,16 @@
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as ResultRouteImport } from './routes/result'
|
||||
import { Route as QueryRouteImport } from './routes/query'
|
||||
import { Route as FormRouteImport } from './routes/form'
|
||||
import { Route as BlankRouteImport } from './routes/blank'
|
||||
import { Route as AsyncRouteImport } from './routes/async'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as DevMemoRouteImport } from './routes/dev/memo'
|
||||
import { Route as DevContextRouteImport } from './routes/dev/context'
|
||||
import { Route as AsyncRouteImport } from './routes/async'
|
||||
import { Route as BlankRouteImport } from './routes/blank'
|
||||
import { Route as FormRouteImport } from './routes/form'
|
||||
import { Route as LensformRouteImport } from './routes/lensform'
|
||||
import { Route as QueryRouteImport } from './routes/query'
|
||||
|
||||
const ResultRoute = ResultRouteImport.update({
|
||||
id: '/result',
|
||||
path: '/result',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const QueryRoute = QueryRouteImport.update({
|
||||
id: '/query',
|
||||
path: '/query',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const FormRoute = FormRouteImport.update({
|
||||
id: '/form',
|
||||
path: '/form',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const BlankRoute = BlankRouteImport.update({
|
||||
id: '/blank',
|
||||
path: '/blank',
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const AsyncRoute = AsyncRouteImport.update({
|
||||
@@ -43,19 +26,24 @@ const AsyncRoute = AsyncRouteImport.update({
|
||||
path: '/async',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
const BlankRoute = BlankRouteImport.update({
|
||||
id: '/blank',
|
||||
path: '/blank',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DevMemoRoute = DevMemoRouteImport.update({
|
||||
id: '/dev/memo',
|
||||
path: '/dev/memo',
|
||||
const FormRoute = FormRouteImport.update({
|
||||
id: '/form',
|
||||
path: '/form',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const DevContextRoute = DevContextRouteImport.update({
|
||||
id: '/dev/context',
|
||||
path: '/dev/context',
|
||||
const LensformRoute = LensformRouteImport.update({
|
||||
id: '/lensform',
|
||||
path: '/lensform',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const QueryRoute = QueryRouteImport.update({
|
||||
id: '/query',
|
||||
path: '/query',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
|
||||
@@ -64,20 +52,16 @@ export interface FileRoutesByFullPath {
|
||||
'/async': typeof AsyncRoute
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/lensform': typeof LensformRoute
|
||||
'/query': typeof QueryRoute
|
||||
'/result': typeof ResultRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/async': typeof AsyncRoute
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/lensform': typeof LensformRoute
|
||||
'/query': typeof QueryRoute
|
||||
'/result': typeof ResultRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
@@ -85,42 +69,15 @@ export interface FileRoutesById {
|
||||
'/async': typeof AsyncRoute
|
||||
'/blank': typeof BlankRoute
|
||||
'/form': typeof FormRoute
|
||||
'/lensform': typeof LensformRoute
|
||||
'/query': typeof QueryRoute
|
||||
'/result': typeof ResultRoute
|
||||
'/dev/context': typeof DevContextRoute
|
||||
'/dev/memo': typeof DevMemoRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/async'
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/query'
|
||||
| '/result'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
fullPaths: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
| '/'
|
||||
| '/async'
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/query'
|
||||
| '/result'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/async'
|
||||
| '/blank'
|
||||
| '/form'
|
||||
| '/query'
|
||||
| '/result'
|
||||
| '/dev/context'
|
||||
| '/dev/memo'
|
||||
to: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query'
|
||||
id: '__root__' | '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
@@ -128,40 +85,17 @@ export interface RootRouteChildren {
|
||||
AsyncRoute: typeof AsyncRoute
|
||||
BlankRoute: typeof BlankRoute
|
||||
FormRoute: typeof FormRoute
|
||||
LensformRoute: typeof LensformRoute
|
||||
QueryRoute: typeof QueryRoute
|
||||
ResultRoute: typeof ResultRoute
|
||||
DevContextRoute: typeof DevContextRoute
|
||||
DevMemoRoute: typeof DevMemoRoute
|
||||
}
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/result': {
|
||||
id: '/result'
|
||||
path: '/result'
|
||||
fullPath: '/result'
|
||||
preLoaderRoute: typeof ResultRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/query': {
|
||||
id: '/query'
|
||||
path: '/query'
|
||||
fullPath: '/query'
|
||||
preLoaderRoute: typeof QueryRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/form': {
|
||||
id: '/form'
|
||||
path: '/form'
|
||||
fullPath: '/form'
|
||||
preLoaderRoute: typeof FormRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/blank': {
|
||||
id: '/blank'
|
||||
path: '/blank'
|
||||
fullPath: '/blank'
|
||||
preLoaderRoute: typeof BlankRouteImport
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/async': {
|
||||
@@ -171,25 +105,32 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AsyncRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
'/blank': {
|
||||
id: '/blank'
|
||||
path: '/blank'
|
||||
fullPath: '/blank'
|
||||
preLoaderRoute: typeof BlankRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dev/memo': {
|
||||
id: '/dev/memo'
|
||||
path: '/dev/memo'
|
||||
fullPath: '/dev/memo'
|
||||
preLoaderRoute: typeof DevMemoRouteImport
|
||||
'/form': {
|
||||
id: '/form'
|
||||
path: '/form'
|
||||
fullPath: '/form'
|
||||
preLoaderRoute: typeof FormRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/dev/context': {
|
||||
id: '/dev/context'
|
||||
path: '/dev/context'
|
||||
fullPath: '/dev/context'
|
||||
preLoaderRoute: typeof DevContextRouteImport
|
||||
'/lensform': {
|
||||
id: '/lensform'
|
||||
path: '/lensform'
|
||||
fullPath: '/lensform'
|
||||
preLoaderRoute: typeof LensformRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/query': {
|
||||
id: '/query'
|
||||
path: '/query'
|
||||
fullPath: '/query'
|
||||
preLoaderRoute: typeof QueryRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
}
|
||||
@@ -200,10 +141,8 @@ const rootRouteChildren: RootRouteChildren = {
|
||||
AsyncRoute: AsyncRoute,
|
||||
BlankRoute: BlankRoute,
|
||||
FormRoute: FormRoute,
|
||||
LensformRoute: LensformRoute,
|
||||
QueryRoute: QueryRoute,
|
||||
ResultRoute: ResultRoute,
|
||||
DevContextRoute: DevContextRoute,
|
||||
DevMemoRoute: DevMemoRoute,
|
||||
}
|
||||
export const routeTree = rootRouteImport
|
||||
._addFileChildren(rootRouteChildren)
|
||||
|
||||
@@ -7,7 +7,7 @@ import "../index.css"
|
||||
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: Root
|
||||
component: Root,
|
||||
})
|
||||
|
||||
function Root() {
|
||||
@@ -17,6 +17,10 @@ function Root() {
|
||||
<Flex direction="row" justify="center" align="center" gap="2">
|
||||
<Link to="/">Index</Link>
|
||||
<Link to="/blank">Blank</Link>
|
||||
<Link to="/async">Async</Link>
|
||||
<Link to="/query">Query</Link>
|
||||
<Link to="/form">Form</Link>
|
||||
<Link to="/lensform">LensForm</Link>
|
||||
</Flex>
|
||||
</Container>
|
||||
|
||||
|
||||
@@ -1,30 +1,35 @@
|
||||
import { HttpClient } from "@effect/platform"
|
||||
import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Array, Effect, flow, Option, Schema } from "effect"
|
||||
import { Async, Component, Memoized } from "effect-fc"
|
||||
import { Console, Effect } from "effect"
|
||||
import { Async, Component, Memoized } from "effect-view"
|
||||
import * as React from "react"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const Post = Schema.Struct({
|
||||
userId: Schema.Int,
|
||||
id: Schema.Int,
|
||||
title: Schema.String,
|
||||
body: Schema.String,
|
||||
})
|
||||
const fetchPost = (id: number) => Effect.sleep("500 millis").pipe(
|
||||
Effect.as({
|
||||
title: `Post ${id}`,
|
||||
body: `This is the content of post ${id}.`,
|
||||
}),
|
||||
)
|
||||
|
||||
|
||||
interface AsyncFetchPostViewProps {
|
||||
readonly id: number
|
||||
}
|
||||
|
||||
class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(props: AsyncFetchPostViewProps) {
|
||||
const post = yield* Component.useOnChange(() => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("500 millis")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ props.id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknown(Post)),
|
||||
), [props.id])
|
||||
const AsyncFetchPostView = Component.make("AsyncFetchPostView")(function*(
|
||||
props: AsyncFetchPostViewProps,
|
||||
) {
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("AsyncFetchPostView unmounted"))
|
||||
yield* Console.log("AsyncFetchPostView mounted")
|
||||
}))
|
||||
|
||||
const post = yield* Component.useOnChange(
|
||||
() => fetchPost(props.id),
|
||||
[props.id],
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -34,10 +39,9 @@ class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(
|
||||
)
|
||||
}).pipe(
|
||||
Async.async,
|
||||
Async.withOptions({ defaultFallback: <Text>Default fallback</Text> }),
|
||||
Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
|
||||
Memoized.memoized,
|
||||
) {}
|
||||
|
||||
)
|
||||
|
||||
const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
|
||||
const [text, setText] = React.useState("Typing here should not trigger a refetch of the post")
|
||||
@@ -50,20 +54,22 @@ const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
|
||||
<Flex direction="column" align="stretch" gap="2">
|
||||
<TextField.Root
|
||||
value={text}
|
||||
onChange={e => setText(e.currentTarget.value)}
|
||||
onChange={event => setText(event.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Slider
|
||||
value={[id]}
|
||||
onValueChange={flow(Array.head, Option.getOrThrow, setId)}
|
||||
min={1}
|
||||
max={10}
|
||||
onValueChange={([value]) => setId(value ?? 1)}
|
||||
/>
|
||||
|
||||
<AsyncFetchPost id={id} fallback={<Text>Loading post...</Text>} />
|
||||
<AsyncFetchPost id={id} />
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/async")({
|
||||
|
||||
@@ -1,143 +1,82 @@
|
||||
import { Button, Container, Flex, Text } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
|
||||
import { Component, Form, SubmittableForm, Subscribable } from "effect-fc"
|
||||
import { Console, Effect, Schema } from "effect"
|
||||
import { Component, Form, MutationForm, View } from "effect-view"
|
||||
import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
|
||||
import { TextFieldOptionalFormInputView } from "@/lib/form/TextFieldOptionalFormInputView"
|
||||
import { DateTimeUtcFromZonedInput } from "@/lib/schema"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
const email = Schema.pattern<typeof Schema.String>(
|
||||
/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i,
|
||||
|
||||
{
|
||||
identifier: "email",
|
||||
title: "email",
|
||||
message: () => "Not an email address",
|
||||
},
|
||||
)
|
||||
|
||||
const RegisterFormSchema = Schema.Struct({
|
||||
email: Schema.String.pipe(email),
|
||||
password: Schema.String.pipe(Schema.minLength(3)),
|
||||
birth: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
|
||||
})
|
||||
|
||||
const RegisterFormSubmitSchema = Schema.Struct({
|
||||
email: Schema.transformOrFail(
|
||||
Schema.String,
|
||||
Schema.String,
|
||||
{
|
||||
decode: (input, _options, ast) => input !== "admin@admin.com"
|
||||
? ParseResult.succeed(input)
|
||||
: ParseResult.fail(new ParseResult.Type(ast, input, "This email is already in use.")),
|
||||
encode: ParseResult.succeed,
|
||||
},
|
||||
const RegisterSchema = Schema.Struct({
|
||||
email: Schema.String.check(
|
||||
Schema.isPattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {
|
||||
message: "Enter a valid email address",
|
||||
}),
|
||||
),
|
||||
password: Schema.String.check(
|
||||
Schema.isMinLength(5, {
|
||||
message: "Password must be at least 5 characters long",
|
||||
}),
|
||||
),
|
||||
password: Schema.String,
|
||||
birth: Schema.OptionFromSelf(Schema.DateTimeUtcFromSelf),
|
||||
})
|
||||
|
||||
class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
|
||||
scoped: Effect.gen(function*() {
|
||||
const form = yield* SubmittableForm.service({
|
||||
schema: RegisterFormSchema.pipe(
|
||||
Schema.compose(
|
||||
Schema.transformOrFail(
|
||||
Schema.typeSchema(RegisterFormSchema),
|
||||
Schema.typeSchema(RegisterFormSchema),
|
||||
{
|
||||
decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
|
||||
encode: ParseResult.succeed,
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
const RegisterRouteComponent = Component.make("RegisterRouteView")(function*() {
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("Form route unmounted"))
|
||||
yield* Console.log("Form route mounted")
|
||||
}))
|
||||
|
||||
initialEncodedValue: { email: "", password: "", birth: Option.none() },
|
||||
f: Effect.fnUntraced(function*([value]) {
|
||||
yield* Effect.sleep("500 millis")
|
||||
return yield* Schema.decode(RegisterFormSubmitSchema)(value)
|
||||
}),
|
||||
const [form, emailField, passwordField] = yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
const form = yield* MutationForm.service({
|
||||
schema: RegisterSchema,
|
||||
initialEncodedValue: { email: "", password: "" },
|
||||
f: ([value]) => Effect.log(`Registered ${value.email}`),
|
||||
})
|
||||
|
||||
return {
|
||||
form,
|
||||
emailField: Form.focusObjectOn(form, "email"),
|
||||
passwordField: Form.focusObjectOn(form, "password"),
|
||||
birthField: Form.focusObjectOn(form, "birth"),
|
||||
} as const
|
||||
})
|
||||
}) {}
|
||||
const emailField = Form.focusObjectOn(form, "email")
|
||||
const passwordField = Form.focusObjectOn(form, "password")
|
||||
|
||||
class RegisterFormView extends Component.make("RegisterFormView")(function*() {
|
||||
const form = yield* RegisterFormService
|
||||
const [canCommit, submitResult] = yield* Subscribable.useAll([
|
||||
form.form.canCommit,
|
||||
form.form.mutation.result,
|
||||
return [form, emailField, passwordField] as const
|
||||
}))
|
||||
|
||||
const [canCommit, isCommitting] = yield* View.useAll([
|
||||
form.canCommit,
|
||||
form.isCommitting,
|
||||
])
|
||||
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
const TextFieldFormInput = yield* TextFieldFormInputView.use
|
||||
const TextFieldOptionalFormInput = yield* TextFieldOptionalFormInputView.use
|
||||
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
|
||||
yield* Console.log("RegisterFormView mounted")
|
||||
}))
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
|
||||
return (
|
||||
<Container width="300">
|
||||
<form onSubmit={e => {
|
||||
e.preventDefault()
|
||||
void runPromise(form.form.submit)
|
||||
<form onSubmit={event => {
|
||||
event.preventDefault()
|
||||
void runPromise(form.submit)
|
||||
}}>
|
||||
<Flex direction="column" gap="2">
|
||||
<TextFieldFormInput
|
||||
form={form.emailField}
|
||||
form={emailField}
|
||||
placeholder="Email"
|
||||
debounce="250 millis"
|
||||
/>
|
||||
|
||||
<TextFieldFormInput
|
||||
form={form.passwordField}
|
||||
form={passwordField}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
debounce="250 millis"
|
||||
/>
|
||||
|
||||
<TextFieldOptionalFormInput
|
||||
type="datetime-local"
|
||||
form={form.birthField}
|
||||
defaultValue=""
|
||||
/>
|
||||
|
||||
<Button disabled={!canCommit}>Submit</Button>
|
||||
<Button disabled={!canCommit || isCommitting}>
|
||||
{isCommitting ? "Submitting…" : "Submit"}
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
|
||||
{Match.value(submitResult).pipe(
|
||||
Match.tag("Initial", () => <></>),
|
||||
Match.tag("Running", () => <Text>Submitting...</Text>),
|
||||
Match.tag("Success", () => <Text>Submitted successfully!</Text>),
|
||||
Match.tag("Failure", e => <Text>Error: {e.cause.toString()}</Text>),
|
||||
Match.exhaustive,
|
||||
)}
|
||||
<Text size="2">A MutationForm validates local input, then submits it.</Text>
|
||||
</Container>
|
||||
)
|
||||
}) {}
|
||||
|
||||
const RegisterPage = Component.make("RegisterPageView")(function*() {
|
||||
const RegisterForm = yield* Effect.provide(
|
||||
RegisterFormView.use,
|
||||
yield* Component.useLayer(RegisterFormService.Default),
|
||||
)
|
||||
|
||||
return <RegisterForm />
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
|
||||
export const Route = createFileRoute("/form")({
|
||||
component: RegisterPage
|
||||
component: RegisterRouteComponent,
|
||||
})
|
||||
|
||||
@@ -1,24 +1,56 @@
|
||||
import { Button, Container, Flex, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Effect } from "effect"
|
||||
import { Component } from "effect-fc"
|
||||
import { Effect, SubscriptionRef } from "effect"
|
||||
import { Component, Lens, View } from "effect-view"
|
||||
import { runtime } from "@/runtime"
|
||||
import { TodosState } from "@/todo/TodosState"
|
||||
import { TodosView } from "@/todo/TodosView"
|
||||
|
||||
|
||||
const TodosStateLive = TodosState.Default("todos")
|
||||
const TodoRouteComponent = Component.make("TodoRouteView")(function*() {
|
||||
const todosLens = yield* Component.useOnMount(() => Effect.map(
|
||||
SubscriptionRef.make<readonly string[]>([]),
|
||||
Lens.fromSubscriptionRef,
|
||||
))
|
||||
const draftLens = yield* Component.useOnMount(() => Effect.map(
|
||||
SubscriptionRef.make(""),
|
||||
Lens.fromSubscriptionRef,
|
||||
))
|
||||
|
||||
const Index = Component.make("IndexView")(function*() {
|
||||
const Todos = yield* Effect.provide(
|
||||
TodosView.use,
|
||||
yield* Component.useLayer(TodosStateLive),
|
||||
const [todos] = yield* View.useAll([todosLens])
|
||||
const [draft, setDraft] = yield* Lens.useState(draftLens)
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
const addTodo = Lens.update(todosLens, todos =>
|
||||
draft.trim() === ""
|
||||
? todos
|
||||
: [...todos, draft.trim()],
|
||||
).pipe(
|
||||
Effect.andThen(Lens.set(draftLens, "")),
|
||||
)
|
||||
|
||||
return <Todos />
|
||||
return (
|
||||
<Container width="480">
|
||||
<Flex direction="column" gap="3">
|
||||
<Text size="2">A small Effect v4 todo state example backed by a Lens.</Text>
|
||||
|
||||
<Flex gap="2">
|
||||
<TextField.Root
|
||||
value={draft}
|
||||
onChange={event => setDraft(event.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Button onClick={() => void runPromise(addTodo)}>
|
||||
Add
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{todos.map(todo => <Text key={todo}>• {todo}</Text>)}
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: Index
|
||||
component: TodoRouteComponent,
|
||||
})
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import { Container, Flex } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Context, Effect, Layer, Schema, Stream, SubscriptionRef } from "effect"
|
||||
import { Component, Form, Lens, LensForm } from "effect-fc-next"
|
||||
import { Component, Form, Lens, LensForm } from "effect-view"
|
||||
import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { HttpClient, type HttpClientError } from "@effect/platform"
|
||||
import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream, SubscriptionRef } from "effect"
|
||||
import { Component, ErrorObserver, Lens, Mutation, Query, Result, Subscribable } from "effect-fc"
|
||||
import { Effect, Schema, SubscriptionRef } from "effect"
|
||||
import { HttpClient } from "effect/unstable/http"
|
||||
import { AsyncResult } from "effect/unstable/reactivity"
|
||||
import { Component, Lens, Mutation, Query, View } from "effect-view"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
@@ -13,30 +14,45 @@ const Post = Schema.Struct({
|
||||
body: Schema.String,
|
||||
})
|
||||
|
||||
const ResultView = Component.make("ResultView")(function*() {
|
||||
const runPromise = yield* Component.useRunPromise()
|
||||
|
||||
interface PostResultViewProps {
|
||||
readonly result: AsyncResult.AsyncResult<typeof Post.Type, Error>
|
||||
}
|
||||
|
||||
const PostResultView = (props: PostResultViewProps) => AsyncResult.match(props.result, {
|
||||
onInitial: result => result.waiting
|
||||
? <Text>Loading...</Text>
|
||||
: <Text>No data.</Text>,
|
||||
onFailure: result => <Text>Request failed: { result.cause.toString() }</Text>,
|
||||
onSuccess: result => <>
|
||||
{result.waiting && <Text>Refreshing...</Text>}
|
||||
<Heading>{result.value.title}</Heading>
|
||||
<Text>{result.value.body}</Text>
|
||||
</>,
|
||||
})
|
||||
|
||||
const QueryRouteComponent = Component.make("QueryRouteView")(function*() {
|
||||
const [idLens, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
const idLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(1))
|
||||
const key = Stream.map(idLens.changes, id => [id] as const)
|
||||
const keyLens = Lens.fromSubscriptionRef(yield* SubscriptionRef.make(["post", 1 as number] as const))
|
||||
const idLens = Lens.focusTupleAt(keyLens, 1)
|
||||
|
||||
const query = yield* Query.service({
|
||||
key,
|
||||
f: ([id]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("500 millis")),
|
||||
key: keyLens,
|
||||
f: ([, id]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("1 second")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknown(Post)),
|
||||
Effect.andThen(Schema.decodeUnknownEffect(Post)),
|
||||
),
|
||||
staleTime: "10 seconds",
|
||||
})
|
||||
|
||||
const mutation = yield* Mutation.make({
|
||||
f: ([id]: readonly [id: number]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("500 millis")),
|
||||
f: ([id]: [id: number]) => HttpClient.HttpClient.pipe(
|
||||
Effect.tap(Effect.sleep("1 second")),
|
||||
Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
|
||||
Effect.andThen(response => response.json),
|
||||
Effect.andThen(Schema.decodeUnknown(Post)),
|
||||
Effect.andThen(Schema.decodeUnknownEffect(Post)),
|
||||
),
|
||||
})
|
||||
|
||||
@@ -44,74 +60,43 @@ const ResultView = Component.make("ResultView")(function*() {
|
||||
}))
|
||||
|
||||
const [id, setId] = yield* Lens.useState(idLens)
|
||||
const [queryResult, mutationResult] = yield* Subscribable.useAll([query.result, mutation.result])
|
||||
const [queryState, mutationState] = yield* View.useAll([query.state, mutation.state])
|
||||
|
||||
yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
|
||||
Effect.andThen(observer => observer.subscribe),
|
||||
Effect.andThen(Stream.fromQueue),
|
||||
Stream.unwrapScoped,
|
||||
Stream.runForEach(flow(
|
||||
Cause.failures,
|
||||
Chunk.findFirst(e => e._tag === "RequestError" || e._tag === "ResponseError"),
|
||||
Option.match({
|
||||
onSome: e => Console.log("ResultView HttpClient error", e),
|
||||
onNone: () => Effect.void,
|
||||
}),
|
||||
)),
|
||||
Effect.forkScoped,
|
||||
))
|
||||
const runSync = yield* Component.useRunSync()
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Flex direction="column" align="center" gap="2">
|
||||
<Slider
|
||||
value={[id]}
|
||||
onValueChange={flow(Array.head, Option.getOrThrow, setId)}
|
||||
min={1}
|
||||
max={10}
|
||||
onValueChange={([value]) => setId(value ?? 1)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
{Match.value(queryResult).pipe(
|
||||
Match.tag("Running", () => <Text>Loading...</Text>),
|
||||
Match.tag("Success", result => <>
|
||||
<Heading>{result.value.title}</Heading>
|
||||
<Text>{result.value.body}</Text>
|
||||
{Result.hasRefreshingFlag(result) && <Text>Refreshing...</Text>}
|
||||
</>),
|
||||
Match.tag("Failure", result =>
|
||||
<Text>An error has occured: {result.cause.toString()}</Text>
|
||||
),
|
||||
Match.orElse(() => <></>),
|
||||
)}
|
||||
</div>
|
||||
<PostResultView result={queryState.result} />
|
||||
|
||||
<Flex direction="row" justify="center" align="center" gap="1">
|
||||
<Button onClick={() => runPromise(query.refresh)}>Refresh</Button>
|
||||
<Button onClick={() => runPromise(query.invalidateCache)}>Invalidate cache</Button>
|
||||
<Button onClick={() => runSync(query.refreshView)}>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button onClick={() => runSync(query.invalidateCache)}>
|
||||
Invalidate cache
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<div>
|
||||
{Match.value(mutationResult).pipe(
|
||||
Match.tag("Running", () => <Text>Loading...</Text>),
|
||||
Match.tag("Success", result => <>
|
||||
<Heading>{result.value.title}</Heading>
|
||||
<Text>{result.value.body}</Text>
|
||||
{Result.hasRefreshingFlag(result) && <Text>Refreshing...</Text>}
|
||||
</>),
|
||||
Match.tag("Failure", result =>
|
||||
<Text>An error has occured: {result.cause.toString()}</Text>
|
||||
),
|
||||
Match.orElse(() => <></>),
|
||||
)}
|
||||
</div>
|
||||
<PostResultView result={mutationState} />
|
||||
|
||||
<Flex direction="row" justify="center" align="center" gap="1">
|
||||
<Button onClick={() => runPromise(Effect.andThen(Lens.get(idLens), id => mutation.mutate([id])))}>Mutate</Button>
|
||||
</Flex>
|
||||
<Button onClick={() => runSync(mutation.mutateView([id]))}>
|
||||
Mutate
|
||||
</Button>
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
})
|
||||
}).pipe(
|
||||
Component.withContext(runtime.context),
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/query")({
|
||||
component: Component.withRuntime(ResultView, runtime.context)
|
||||
component: QueryRouteComponent,
|
||||
})
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { FetchHttpClient } from "@effect/platform"
|
||||
import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
|
||||
import { DateTime, Layer } from "effect"
|
||||
import { ReactRuntime } from "effect-fc"
|
||||
import { FetchHttpClient } from "effect/unstable/http"
|
||||
import { QueryClient, ReactRuntime } from "effect-view"
|
||||
|
||||
|
||||
export const AppLive = Layer.empty.pipe(
|
||||
export const layer = Layer.empty.pipe(
|
||||
Layer.provideMerge(QueryClient.layer()),
|
||||
Layer.provideMerge(DateTime.layerCurrentZoneLocal),
|
||||
Layer.provideMerge(Clipboard.layer),
|
||||
Layer.provideMerge(Geolocation.layer),
|
||||
@@ -12,4 +13,4 @@ export const AppLive = Layer.empty.pipe(
|
||||
Layer.provideMerge(FetchHttpClient.layer),
|
||||
)
|
||||
|
||||
export const runtime = ReactRuntime.make(AppLive)
|
||||
export const runtime = ReactRuntime.make(layer)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { tanstackRouter } from "@tanstack/router-plugin/vite"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { effectView } from "@effect-view/vite-plugin"
|
||||
import path from "node:path"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
@@ -7,6 +8,7 @@ import { defineConfig } from "vite"
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
effectView(),
|
||||
tanstackRouter({
|
||||
target: "react",
|
||||
autoCodeSplitting: true,
|
||||
|
||||
@@ -3,26 +3,26 @@
|
||||
Experimental Vite Fast Refresh support for Effect View components.
|
||||
|
||||
```ts
|
||||
import { effectViewPlugin } from "@effect-view/vite-plugin"
|
||||
import { effectView } from "@effect-view/vite-plugin"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
effectViewPlugin(),
|
||||
effectView(),
|
||||
react(),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
The plugin recognizes `Component.make` and `Component.makeUntraced`
|
||||
definitions imported from `effect-fc-next`. The legacy `effect-fc` package is
|
||||
not supported. `effect-fc-next` owns the bundler-neutral refresh cell protocol;
|
||||
definitions imported from `effect-view`. The legacy `effect-fc` package is
|
||||
not supported. `effect-view` owns the bundler-neutral refresh cell protocol;
|
||||
this package is the Vite adapter that retains those cells in HMR data. The
|
||||
plugin assigns stable development IDs and self-accepts successfully
|
||||
instrumented modules.
|
||||
|
||||
The adapter-facing protocol is exported from `effect-fc-next/Refreshable`.
|
||||
The adapter-facing protocol is exported from `effect-view/Refreshable`.
|
||||
|
||||
Renaming or removing an instrumented View invalidates the module upward instead
|
||||
of leaving a stale mounted descriptor.
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"url": "git+https://github.com/Thiladev/effect-fc.git"
|
||||
"url": "git+https://github.com/Thiladev/effect-view.git"
|
||||
},
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
@@ -36,12 +36,12 @@
|
||||
"typescript": "^6.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"effect-fc-next": "workspace:*",
|
||||
"effect-view": "workspace:*",
|
||||
"vite": "^8.0.16",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"effect-fc-next": "0.1.0-beta.0",
|
||||
"effect-view": "^0.1.0",
|
||||
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user