add simple counter javascript example

AlessioCoser · Mar 23, 2024 · b76994f · b76994f
1 parent 3537cde
commit b76994f
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 0 deletions.
diff --git a/examples/simple-counter-javascript/.gitignore b/examples/simple-counter-javascript/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+dist
+build
+.DS_Store
+.parcel-cache
+package-lock.json
diff --git a/examples/simple-counter-javascript/index.html b/examples/simple-counter-javascript/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer type="module" src="./index.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/simple-counter-javascript/index.js 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
@@ -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
@@ -0,0 +1,5 @@
+# doom-reactive-state Example: Async count history with typescript
+
+1. `npm install`
+2. `npm start`
+3. open `http://localhost:1234`