Super simple reactive state management with fine-grained reactive DOM elements.
- 💎 Zero dependencies
- ⚡ No compilation required
- 🏄 Super-Easy reactive concepts (signal, effect, derive)
- 🍀 No magic, you create components that are simple HTMLElements
- 🌼 Just a few lines of code
- 🐣 Only a single HTMLElement wrapper to enable a fine-grained reactivity on Element properties
- 💄 Some helper functions to easily create common reactive HTMLElement such as
Div,PandSpan.
You can find some examples here: Examples
This is a simple increment counter component
const { signal, Div, H2, Button, Span, d } = require("doom-reactive-state")
const App = () => {
const [count, setCount] = signal(0)
const onclick = () => setCount(count() + 1)
return Div([
H2(['Count: ', Span(d`${count}`)]),
Button({ onclick }, 'increment'),
])
}
document.body.appendChild(App())- Create a file called index.js
const { signal, effect } = require("doom-reactive-state") const [count, setCount] = signal(1) setInterval(() => setCount(count() + 1), 1000) effect(() => console.log(count()))
- Run the file with node
node index.js - You will see that every second the incremented number will be printed
You can load the script from the github release url and start use it right away.
<html>
<head>
<!-- other stuff -->
<script src="https://github.com/AlessioCoser/doom-reactive-state/releases/download/1.1.1/doom-reactive-state.global.js"></script>
</head>
<body>
<script type="application/javascript">
function HelloWorldApp() {
return doom.Span("Hello World!")
}
document.body.appendChild(HelloWorldApp());
</script>
</body>
</html>npm test
this runs an application present in dev folder with vite
npm run dev
If I want to publish the new 0.0.1 version I need to create and push a new 0.0.1 tag:
git tag 0.0.1
git push --tagsThe Github Action will take care to publish the package with the tag name as version