Add Effect v4 support, Fast Refresh tooling, and revamped docs #56
@@ -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
|
install that renderer instead of `react-dom` and keep the rest of the setup the
|
||||||
same.
|
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
|
## Create the runtime
|
||||||
|
|
||||||
`ReactRuntime` owns a managed Effect runtime. Define it at module scope from the
|
`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
|
Effect View is currently beta software. The main APIs are available, but
|
||||||
breaking changes and rough edges are still possible before a stable release.
|
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
|
Issues, ideas, and contributions are welcome on
|
||||||
[GitHub](https://github.com/Thiladev/effect-view).
|
[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
|
## Current limitations
|
||||||
|
|
||||||
- Vite is the only supported bundler.
|
|
||||||
- Definitions must be top-level variable, class, or default-export
|
- Definitions must be top-level variable, class, or default-export
|
||||||
declarations.
|
declarations.
|
||||||
- Hook signature analysis is conservative and based on `useX` call syntax.
|
- Hook signature analysis is conservative and based on `useX` call syntax.
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "@effect-view/vite-plugin",
|
"name": "@effect-view/vite-plugin",
|
||||||
"description": "Vite Fast Refresh support for Effect View components",
|
"description": "Vite Fast Refresh support for Effect View components",
|
||||||
"version": "0.0.0",
|
"version": "0.0.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"files": [
|
"files": [
|
||||||
"./README.md",
|
"./README.md",
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint:tsc": "tsc --noEmit",
|
"lint:tsc": "tsc -b --noEmit",
|
||||||
"lint:biome": "biome lint",
|
"lint:biome": "biome lint",
|
||||||
"test": "vitest run",
|
"test": "vitest run",
|
||||||
"build": "tsc -b tsconfig.build.json",
|
"build": "tsc -b tsconfig.build.json",
|
||||||
|
|||||||
Reference in New Issue
Block a user