@@ -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
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user