From 9938389a0dc23a37294b5e9d156e144ec0b22552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B3=E9=88=9E?= <jim60105@gmail.com>
Date: Mon, 16 Oct 2023 11:05:24 +0000
Subject: [PATCH] chore: Migrate from Service Workers to ES Modules

---
 index.js          | 116 +++++++++++++++++++++++++---------------------
 package-lock.json |   6 +--
 package.json      |   5 +-
 wrangler.toml     |   3 +-
 4 files changed, 70 insertions(+), 60 deletions(-)

diff --git a/index.js b/index.js
index cc9c5d8..48744f3 100644
--- a/index.js
+++ b/index.js
@@ -2,57 +2,65 @@ const { badgen } = require('badgen');
 
 const CounterName = 'Counter1';
 
-addEventListener('fetch', event => {
-  event.respondWith(handleRequest(event.request));
-});
-
-/**
- * Respond with svg badge
- * @param {Request} request
- */
-async function handleRequest(request) {
-  // Get the value from D1
-  let count = await ViewCounter.prepare(
-    'SELECT * FROM ViewCounter WHERE Name = ?1',
-  )
-    .bind(CounterName)
-    .first('Value');
-
-  // Value + 1, also handle the case when the value is null
-  ++count;
-  console.log(count);
-
-  // Update the value to D1
-  var result = await db
-    .prepare('UPDATE ViewCounter SET Value = ?1 WHERE Name = ?2')
-    .bind(count, CounterName)
-    .run();
-
-  console.log(result);
-
-  // Get the query parameters
-  const { searchParams } = new URL(request.url);
-  let label = searchParams.get('label') || 'Views';
-  let labelColor = searchParams.get('labelColor') || '555';
-  let color = searchParams.get('color') || 'blue';
-  let style = searchParams.get('style') || 'flat';
-  let scale = searchParams.get('scale') || 1;
-
-  // Generate the svg string
-  const svgString = badgen({
-    label: label,
-    labelColor: labelColor,
-    color: color,
-    style: style,
-    scale: scale,
-    status: count.toString(),
-  });
-  return new Response(svgString, {
-    headers: {
-      'content-type': 'image/svg+xml;charset=utf-8',
-      'access-control-allow-origin': '*',
-      'Cache-Control':
-        'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0',
-    },
-  });
-}
+export default {
+  async fetch(request, env, ctx) {
+    // Get the value from D1
+    let count = await env.ViewCounter.prepare(
+      'SELECT * FROM ViewCounter WHERE Name = ?1',
+    )
+      .bind(CounterName)
+      .first('Value');
+
+    // If the value is null, insert a new record
+    if (!count) {
+      count = 1;
+
+      var result = await env.ViewCounter.prepare(
+        'INSERT INTO ViewCounter (Name, Value) VALUES (?1, ?2)',
+      )
+        .bind(CounterName, count)
+        .run();
+      console.log('Insert result', result);
+    } else {
+      // Value++
+      count++;
+
+      // Update the value to D1
+      var result = await env.ViewCounter.prepare(
+        'UPDATE ViewCounter SET Value = ?1 WHERE Name = ?2',
+      )
+        .bind(count, CounterName)
+        .run();
+      console.log('Update result', result);
+    }
+    console.log('Count', count);
+
+    // Get the query parameters
+    const { searchParams } = new URL(request.url);
+    let label = searchParams.get('label') || 'Views';
+    let labelColor = searchParams.get('labelColor') || '555';
+    let color = searchParams.get('color') || 'blue';
+    let style = searchParams.get('style') || 'flat';
+    let scale = searchParams.get('scale') || 1;
+
+    // Generate the svg string
+    const svgString = badgen({
+      label: label,
+      labelColor: labelColor,
+      color: color,
+      style: style,
+      scale: scale,
+      status: count.toString(),
+    });
+    console.log('SVG', svgString);
+
+    return new Response(svgString, {
+      headers: {
+        'content-type': 'image/svg+xml;charset=utf-8',
+        'access-control-allow-origin': '*',
+        'Cache-Control':
+          'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0',
+      },
+    });
+  },
+};
diff --git a/package-lock.json b/package-lock.json
index 5a1d777..27a6c0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,9 @@
       }
     },
     "node_modules/badgen": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/badgen/-/badgen-3.2.2.tgz",
-      "integrity": "sha512-MfBNhOzp+qbTg/3BAeaK1g+VE3uZ0CRfqMyrfyI3JUBz7b+DwxrZbYQdz5JQnibRih9YOVzXuVJl3A3xaWXfFQ=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/badgen/-/badgen-3.2.3.tgz",
+      "integrity": "sha512-svDuwkc63E/z0ky3drpUppB83s/nlgDciH9m+STwwQoWyq7yCgew1qEfJ+9axkKdNq7MskByptWUN9j1PGMwFA=="
     },
     "node_modules/prettier": {
       "version": "1.19.1",
diff --git a/package.json b/package.json
index e0064ea..6ab5b53 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,9 @@
   "description": "A template for kick starting a Cloudflare Workers project",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "format": "prettier --write '**/*.{js,css,json,md}'"
+    "deploy": "export NO_D1_WARNING=true && wrangler deploy",
+    "dev": "wrangler dev",
+    "format": "prettier --config .prettierrc.json --write **/*.{ts,js}"
   },
   "author": "Aveek Saha <aveek.s98@gmail.com>",
   "license": "MIT",
diff --git a/wrangler.toml b/wrangler.toml
index 477209d..89ca64c 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -1,8 +1,9 @@
 name = "view-counter"
 
-compatibility_date = "2023-10-16"
+compatibility_date = "2023-07-24"
 main = "index.js"
 
+send_metrics = false
 workers_dev = true
 
 [[d1_databases]]