diff --git a/examples/simple-counter-javascript/.gitignore b/examples/simple-counter-javascript/.gitignore new file mode 100644 index 0000000..c569ae5 --- /dev/null +++ b/examples/simple-counter-javascript/.gitignore @@ -0,0 +1,6 @@ +node_modules +dist +build +.DS_Store +.parcel-cache +package-lock.json \ No newline at end of file diff --git a/examples/simple-counter-javascript/index.html b/examples/simple-counter-javascript/index.html new file mode 100644 index 0000000..b08d197 --- /dev/null +++ b/examples/simple-counter-javascript/index.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/examples/simple-counter-javascript/index.js b/examples/simple-counter-javascript/index.js new file mode 100644 index 0000000..27993d0 --- /dev/null +++ b/examples/simple-counter-javascript/index.js @@ -0,0 +1,27 @@ +import { signal, h, Div, H2, Button, derive } from 'doom-reactive-state' + +const App = () => { + // this is a non-reactive component it's out of the renderer loop since it isn't wrapped with the `effect` function + // here we can instantiate the state + const [count, setCount] = signal(0) + + const increment = () => setCount(count() + 1) + + const countText = derive('', () => `${count()}`) + + // only the changed attributes of the component will be updated + return Div({ children: [ + // only functions inside objects listen to the state changes + H2({ className: 'a-class', children: [ + 'Count: ', + // all properties or text-children we want to react to changes must be functions + h('span', { children: [countText] }) + ]}), + // you can avoid the element reacting for a specific property: see children property, we pass it directly without any function + Button({ onclick: increment, children: ['increment'] }), + ]}) +} + +// no need to use magic stuff to attach components to the dom, +// we always return a DOM Element from our components +document.body.appendChild(App()) diff --git a/examples/simple-counter-javascript/package.json b/examples/simple-counter-javascript/package.json new file mode 100644 index 0000000..b5d248e --- /dev/null +++ b/examples/simple-counter-javascript/package.json @@ -0,0 +1,15 @@ +{ + "name": "simple-counter-javascript", + "scripts": { + "start": "parcel index.html" + }, + "author": "Alessio Coser", + "license": "MIT", + "devDependencies": { + "parcel": "^2.8.0", + "typescript": "^4.9.3" + }, + "dependencies": { + "doom-reactive-state": "^0.3.1" + } +} diff --git a/examples/simple-counter-javascript/readme.md b/examples/simple-counter-javascript/readme.md new file mode 100644 index 0000000..f74986c --- /dev/null +++ b/examples/simple-counter-javascript/readme.md @@ -0,0 +1,5 @@ +# doom-reactive-state Example: Async count history with typescript + +1. `npm install` +2. `npm start` +3. open `http://localhost:1234` \ No newline at end of file