ThilawynandJulien Valverdé
4b712de788
## 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
25 lines
631 B
TypeScript
25 lines
631 B
TypeScript
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
|
|
})
|