Build the operator data into the Worker so it doesn't have to be load…

…ed on page-load

public/js/index.js

@@ -1,36 +1,35 @@
 (() => {
   const initTable = () => {
-    fetch('data/operators.csv')
-      .then(r => r.text())
-      .then(d3.csvParse)
-      .then(data => {
-        const table = document.querySelector('[data-js-table]')
-        const tbody = table.querySelector('tbody')
-        const columns = Array.from(table.querySelectorAll('th')).map(th => th.getAttribute('data-column'))
-
-        data.forEach(d => {
-          const tr = document.createElement('tr')
-          tr.setAttribute('data-status', d.status.split(' ').join('-'))
-
-          columns.forEach(name => {
-            const td = document.createElement('td')
-            td.setAttribute('data-column', name)
-            td.innerText = d[name]
-
-            if (name === 'asn') {
-              td.setAttribute('data-value', d[name])
-            }
-
-            if (name === 'status') {
-              td.setAttribute('data-value', [, 'safe', 'partially safe', 'unsafe'].indexOf(d[name]))
-            }
-
-            tr.appendChild(td)
-          })
-
-          tbody.appendChild(tr)
-        })
+    // OPERATORS is injected by the Worker serving this site
+    // Use `wrangler dev` to preview
+    const data = d3.csvParse(OPERATORS)
+
+    const table = document.querySelector('[data-js-table]')
+    const tbody = table.querySelector('tbody')
+    const columns = Array.from(table.querySelectorAll('th')).map(th => th.getAttribute('data-column'))
+
+    data.forEach(d => {
+      const tr = document.createElement('tr')
+      tr.setAttribute('data-status', d.status.split(' ').join('-'))
+
+      columns.forEach(name => {
+        const td = document.createElement('td')
+        td.setAttribute('data-column', name)
+        td.innerText = d[name]
+
+        if (name === 'asn') {
+          td.setAttribute('data-value', d[name])
+        }
+
+        if (name === 'status') {
+          td.setAttribute('data-value', [, 'safe', 'partially safe', 'unsafe'].indexOf(d[name]))
+        }
+
+        tr.appendChild(td)
       })
+
+      tbody.appendChild(tr)
+    })
   }
 
   const setupASNColumnToggle = () => {

workers-site/index.js

@@ -1,4 +1,5 @@
 import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+import OPERATORS from '../public/data/operators.csv'
 
 /**
  * The DEBUG flag will do two things that help during development:
@@ -41,6 +42,13 @@ async function handleEvent(event) {
         bypassCache: true,
       }
     }
+
+    if (url.pathname === "/" || url.pathname === "/index.html"){
+      const page = await getAssetFromKV(event, options)
+
+      return new HTMLRewriter().on('head', new StringInjector("OPERATORS", OPERATORS)).transform(page)
+    }
+
     return await getAssetFromKV(event, options)
   } catch (e) {
     // if an error is thrown try to serve the asset at 404.html
@@ -58,6 +66,27 @@ async function handleEvent(event) {
   }
 }
 
+class StringInjector {
+  constructor(name, body) {
+    this.name = name
+    this.body = body
+  }
+
+  element(element){
+    element.prepend(`
+    <script>
+      ${ this.name } = \`${ this.escapeQuotes(this.body) }\`;
+    </script>
+    `, {
+      html: true
+    })
+  }
+
+  escapeQuotes(value) {
+    return value.replace(/\`/g, '\\\`')
+  }
+}
+
 /**
  * Here's one example of how to modify a request to
  * remove a specific prefix, in this case `/docs` from

workers-site/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@cloudflare/kv-asset-handler": "^0.0.9"
+    "@cloudflare/kv-asset-handler": "^0.0.9",
+    "raw-loader": "^4.0.0"
   }
 }

workers-site/webpack.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  target: "webworker",
+  entry: "./index.js",
+  context: __dirname,
+  module: {
+    rules: [
+      {
+        test: /\.csv$/i,
+        use: 'raw-loader',
+      },
+    ],
+  },
+}

wrangler.toml

@@ -4,6 +4,7 @@ account_id = "04cb62d57d02b212c133288d8e42f84c"
 workers_dev = false
 route = "isbgpsafeyet.com/*"
 zone_id = "72a2ccd3f2b1c26c23d134d8d1a70a5d"
+webpack_config = "workers-site/webpack.config.js"
 
 [site]
 bucket = "./public"