variant with preact instead of vanilla js

.gitignore

@@ -1,4 +1,2 @@
 dist/
 node_modules/
-
-*.local*

index.html

@@ -6,11 +6,7 @@
   </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>

main.go

@@ -20,65 +20,8 @@ func main() {
 	log.Fatal(server.ListenAndServe())
 }
 
-type Store interface {
-	Count() (int, error)
-	Increment() (int, error)
-	Decrement() (int, error)
-}
-
-const StoreFilename = "store.local.json"
-
-type fileStore struct {
-	Counter int `json:"counter"`
-}
-
-func (db *fileStore) Count() (int, error) {
-	if err := readOrCreateJson(StoreFilename, db); err != nil {
-		return 0, err
-	}
-
-	return db.Counter, nil
-}
-
-func (db *fileStore) Increment() (int, error) {
-	if err := readOrCreateJson(StoreFilename, db); err != nil {
-		return 0, err
-	}
-
-	db.Counter++
-
-	if err := writeJson(StoreFilename, db); err != nil {
-		return 0, err
-	}
-
-	return db.Counter, nil
-}
-
-func (db *fileStore) Decrement() (int, error) {
-	if err := readOrCreateJson(StoreFilename, db); err != nil {
-		return 0, err
-	}
-
-	db.Counter--
-
-	if err := writeJson(StoreFilename, db); err != nil {
-		return 0, err
-	}
-
-	return db.Counter, nil
-}
-
 func setupRoutes(mux *http.ServeMux) {
-	var db Store = &fileStore{Counter: 0}
-	{
-		initialCount, err := db.Count()
-		if err != nil {
-			log.Fatalf(`Unable to create store: %v`, err)
-			return
-		}
-
-		log.Printf(`Store correctly initialized, count: %v`, initialCount)
-	}
+	counter := 0
 
 	// API Routes
 
@@ -103,14 +46,9 @@ func setupRoutes(mux *http.ServeMux) {
 			return
 		}
 
-		count, err := db.Count()
-		if err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
-
 		w.Header().Set("Content-Type", "application/json")
-		if err := json.NewEncoder(w).Encode(count); err != nil {
+		err := json.NewEncoder(w).Encode(counter)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
@@ -122,14 +60,11 @@ func setupRoutes(mux *http.ServeMux) {
 			return
 		}
 
-		newCount, err := db.Increment()
-		if err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		counter++
 
 		w.Header().Set("Content-Type", "application/json")
-		if err := json.NewEncoder(w).Encode(newCount); err != nil {
+		err := json.NewEncoder(w).Encode(counter)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
@@ -141,14 +76,11 @@ func setupRoutes(mux *http.ServeMux) {
 			return
 		}
 
-		newCount, err := db.Decrement()
-		if err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		counter--
 
 		w.Header().Set("Content-Type", "application/json")
-		if err := json.NewEncoder(w).Encode(newCount); err != nil {
+		err := json.NewEncoder(w).Encode(counter)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}

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'))

utils.go

@@ -1,40 +0,0 @@
-package main
-
-import (
-	"encoding/json"
-	"os"
-)
-
-func readOrCreateJson(filename string, value any) error {
-	f, err := os.Open(filename)
-	if err != nil {
-		if os.IsNotExist(err) {
-			return writeJson(filename, value)
-		}
-
-		return err
-	}
-	defer f.Close()
-
-	if json.NewDecoder(f).Decode(value); err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func writeJson(filename string, value any) error {
-	f, err := os.Create(filename)
-	if err != nil {
-		return err
-	}
-	defer f.Close()
-
-	enc := json.NewEncoder(f)
-	enc.SetIndent("", "    ")
-	if err := enc.Encode(value); err != nil {
-		return err
-	}
-
-	return nil
-}

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()],
 })