variant with preact instead of vanilla js

index.html

@@ -3,15 +3,10 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GDG Talk Counter</title>
-    <link rel="stylesheet" href="/src/style.css">
   </head>
   <body>
     <h1>GDG Counter Website</h1>
-    <div class="app">
-      <div id="counter-value">???</div>
-      <button id="btn-decrement">Decrementa</button>  
-      <button id="btn-increment">Incrementa</button>
-    </div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

package.json

@@ -6,6 +6,10 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@preact/preset-vite": "^2.5.0",
         "vite": "^3.2.3"
+    },
+    "dependencies": {
+        "preact": "^10.13.0"
     }
 }

src/main.js

@@ -1,27 +0,0 @@
-const counterElement = document.querySelector('#counter-value')
-const incrementButton = document.querySelector('#btn-increment')
-const decrementButton = document.querySelector('#btn-decrement')
-
-function updateCounter(value) {
-    counterElement.textContent = `Counter: ${value}`
-}
-
-incrementButton.addEventListener('click', async () => {
-    const res = await fetch('/api/increment', { method: 'POST' })
-    const data = await res.json()
-    updateCounter(data)
-})
-
-decrementButton.addEventListener('click', async () => {
-    const res = await fetch('/api/decrement', { method: 'POST' })
-    const data = await res.json()
-    updateCounter(data)
-})
-
-async function main() {
-    const res = await fetch('/api/value')
-    const data = await res.json()
-    updateCounter(data)
-}
-
-main()

src/main.jsx

@@ -0,0 +1,38 @@
+import { render } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+
+const App = ({}) => {
+    const [counter, setCounter] = useState(0)
+
+    useEffect(() => {
+        fetch('/api/value')
+            .then(res => res.json())
+            .then(count => setCounter(count))
+    }, [])
+
+    return (
+        <>
+            <div>{counter}</div>
+            <button
+                onClick={() => {
+                    fetch('/api/decrement', { method: 'POST' })
+                        .then(res => res.json())
+                        .then(count => setCounter(count))
+                }}
+            >
+                Decrementa
+            </button>
+            <button
+                onClick={() => {
+                    fetch('/api/increment', { method: 'POST' })
+                        .then(res => res.json())
+                        .then(count => setCounter(count))
+                }}
+            >
+                Incrementa
+            </button>
+        </>
+    )
+}
+
+render(<App />, document.querySelector('#app'))

src/style.css

@@ -1,72 +0,0 @@
-*,
-*::before,
-*::after {
-    font-family: inherit;
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    font-family: 'Open Sans', sans-serif;
-
-    display: flex;
-    flex-direction: column;
-
-    align-items: center;
-}
-
-h1 {
-    text-align: center;
-    font-weight: 700;
-}
-
-.app {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.5rem;
-}
-
-#counter-value {
-    grid-column: span 2;
-
-    place-self: center;
-
-    font-weight: 200;
-    font-size: 32px;
-
-    padding: 1rem 0;
-}
-
-button {
-    /* box-shadow: 0 0 4px 0 #00000018, 0 0 32px 0 #00000010; */
-
-    border: 1px solid #d4d4d4;
-    background: linear-gradient(to bottom, #f8f8f8 0%, #f0f0f0 50%, #d8d8d8 100%);
-
-    color: #333;
-
-    font-size: 15px;
-    font-weight: 400;
-
-    border-radius: 0.5rem;
-    height: 2rem;
-    padding: 0 1rem;
-
-    cursor: pointer;
-
-    transition: all 250ms ease-in-out;
-}
-
-button:hover {
-    /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */
-
-    border: 1px solid #d0d0d0;
-    background: linear-gradient(to bottom, #fdfdfd 0%, #ededed 40%, #ededed 60%, #d0d0d0 100%);
-}
-
-button:active {
-    /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */
-
-    border: 1px solid #c8c8c8;
-    background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 50%, #c8c8c8 100%);
-}

vite.config.js

@@ -1,3 +1,4 @@
+import preactPlugin from '@preact/preset-vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
@@ -7,4 +8,5 @@ export default defineConfig({
             '/api': 'http://localhost:4000/',
         },
     },
+    plugins: [preactPlugin()],
 })