doom-reactive-state
v1.1.1
Published
Super simple reactive state management with fine-grained reactive DOM elements.
Downloads
623
Readme
Doom Reactive State
Super simple reactive state management with fine-grained reactive DOM elements.
Features
- :gem: Zero dependencies
- :zap: No compilation required
- :surfer: Super-Easy reactive concepts (signal, effect, derive)
- :four_leaf_clover: No magic, you create components that are simple HTMLElements
- :blossom: Just a few lines of code
- :hatching_chick: Only a single HTMLElement wrapper to enable a fine-grained reactivity on Element properties
- :lipstick: Some helper functions to easily create common reactive HTMLElement such as
Div,PandSpan.
Examples
You can find some examples here: Examples
Getting Started
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())With Node.js - only pure reactive state
- 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
Use it directly inside the HTML
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>Contributing
Run Tests
npm testRun Dev
this runs an application present in dev folder with vite
npm run devPublish a new package version
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