diff --git a/packages/docs/docs/getting-started.md b/packages/docs/docs/getting-started.md index a6ab807..393e36b 100644 --- a/packages/docs/docs/getting-started.md +++ b/packages/docs/docs/getting-started.md @@ -35,6 +35,33 @@ Effect View is not tied to React DOM. For React Native or another renderer, install that renderer instead of `react-dom` and keep the rest of the setup the same. +## Set up hot reloading with Vite + +Install the Effect View Vite plugin to preserve component state while editing +Effect View components: + +```bash npm2yarn +npm install --save-dev @effect-view/vite-plugin +``` + +Add `effectViewPlugin()` before the React plugin in your Vite configuration: + +```ts title="vite.config.ts" +import { effectViewPlugin } from "@effect-view/vite-plugin" +import react from "@vitejs/plugin-react" +import { defineConfig } from "vite" + +export default defineConfig({ + plugins: [ + effectViewPlugin(), + react(), + ], +}) +``` + +Vite is the only bundler supported for Effect View hot reloading at the moment. +Support for other bundlers will follow. + ## Create the runtime `ReactRuntime` owns a managed Effect runtime. Define it at module scope from the diff --git a/packages/effect-fc-next/README.md b/packages/effect-fc-next/README.md index cb11b8f..7fc8b85 100644 --- a/packages/effect-fc-next/README.md +++ b/packages/effect-fc-next/README.md @@ -136,9 +136,6 @@ Effect View is renderer-independent and does not require `react-dom`. Effect View is currently beta software. The main APIs are available, but breaking changes and rough edges are still possible before a stable release. -React Fast Refresh does not yet recognize Effect View component definitions, so -changes to them currently require a page reload; ordinary React components are -unaffected (currently being worked on). Issues, ideas, and contributions are welcome on [GitHub](https://github.com/Thiladev/effect-view). diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md index 65b9f09..8eb6160 100644 --- a/packages/vite-plugin/README.md +++ b/packages/vite-plugin/README.md @@ -33,7 +33,6 @@ removing, or changing a hook call resets the Effect View implementation. Add ## Current limitations -- Vite is the only supported bundler. - Definitions must be top-level variable, class, or default-export declarations. - Hook signature analysis is conservative and based on `useX` call syntax. diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 74c9c4b..1fc14c6 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -1,7 +1,7 @@ { "name": "@effect-view/vite-plugin", "description": "Vite Fast Refresh support for Effect View components", - "version": "0.0.0", + "version": "0.0.1", "type": "module", "files": [ "./README.md", @@ -23,7 +23,7 @@ } }, "scripts": { - "lint:tsc": "tsc --noEmit", + "lint:tsc": "tsc -b --noEmit", "lint:biome": "biome lint", "test": "vitest run", "build": "tsc -b tsconfig.build.json",