Files
effect-view/packages/vite-plugin/README.md
T
Thilawyn 4b712de788
Publish / publish (push) Successful in 3m23s
Lint / lint (push) Successful in 48s
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
2026-07-27 04:11:42 +02:00

42 lines
1.4 KiB
Markdown

# `@effect-view/vite-plugin`
Experimental Vite Fast Refresh support for Effect View components.
```ts
import { effectView } from "@effect-view/vite-plugin"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [
effectView(),
react(),
],
})
```
The plugin recognizes `Component.make` and `Component.makeUntraced`
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-view/Refreshable`.
Renaming or removing an instrumented View invalidates the module upward instead
of leaving a stale mounted descriptor.
React state is retained when the ordered hook signature is unchanged. Adding,
removing, or changing a hook call resets the Effect View implementation. Add
`// @refresh reset` to a module to reset its Views on every update.
## Current limitations
- Definitions must be top-level variable, class, or default-export
declarations.
- Hook signature analysis is conservative and based on `useX` call syntax.
- Changing a descriptor's trait pipeline during a refresh is not guaranteed to
preserve state.
- Source maps for the injected transform are not generated yet.