https://github.com/zweifisch/revelte
$state() and $effect() for react
https://github.com/zweifisch/revelte
react swc-plugin
Last synced: 3 months ago
JSON representation
$state() and $effect() for react
- Host: GitHub
- URL: https://github.com/zweifisch/revelte
- Owner: zweifisch
- License: mit
- Created: 2024-11-15T02:25:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-02T00:50:16.000Z (over 1 year ago)
- Last Synced: 2025-05-29T02:43:15.952Z (about 1 year ago)
- Topics: react, swc-plugin
- Language: Rust
- Homepage:
- Size: 82 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# revelte
`$state()` and `$effect()` for react
```jsx
import type {} from 'revelte'
function App() {
let count = $state(0)
$effect(() => {
console.log(`count: ${count}`)
})
return
count += 1}>{count}
}
```
## Why
You get immutable state for free:
```jsx
state.foo.bar += 1
```
instead of
```jsx
setState({...state, foo: {...state.foo, bar: state.foo.bar + 1}})
```
## Setup
```sh
npm create vite@latest my-react-app -- --template react-swc-ts
cd my-react-app
npm i -D revelte
```
in `vite.config.ts` add `revelte` as a plugin:
```js
export default defineConfig({
plugins: [react({plugins: [['revelte', {}]]})],
})
```
```sh
npm run dev
```
## When will state be updated
- reassigning $state variables, like `count = newVal`
- mutating object $state variables, like `foo.bar = newVal`
- mutating arrays, including `push`, `pop`, `unshift`, `shift`, `splice`, `fill`, `reverse`, `sort` and `copyWithin`
- always operate directly on the original $state object, otherwise state won't change
Instead of:
```js
let state = $state({count: 1})
const {count} = state
count += 1
```
Use:
```js
state.count += 1
```
## How does it work
Code are rewritten to use `useState` and `useEffect`, so there is almost no runtime overhead.