chore: Migrate from Service Workers to ES Modules

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',
+      },
+    });
+  },
+};

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 <[email protected]>",
   "license": "MIT",

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]]