Update dev server

jakeboone02 · Jul 27, 2023 · fc375ad · fc375ad
1 parent 248abbe
commit fc375ad
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 17 deletions.
diff --git a/main.html b/main.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -19,28 +19,58 @@
         display: flex;
         flex-direction: row;
         gap: 1rem;
+        margin-bottom: 0.5rem;
+      }
+      #round {
+        width: 3rem;
       }
     </style>
   </head>
   <body>
     <h1>numeric-quantity</h1>
-    <h3>Input</h3>
+    <h3>Demo</h3>
     <div id="input">
-      <input type="text" autofocus /><span>=></span>
+      <input type="text" autofocus value="12.14" /><span>=></span>
       <div id="result"></div>
     </div>
+    <div id="options">
+      <div>
+        <label
+          ><input type="checkbox" id="allowTrailingInvalid" checked /><code
+            >allowTrailingInvalid</code
+          ></label
+        >
+      </div>
+      <div>
+        <label
+          ><input type="checkbox" id="romanNumerals" checked /><code
+            >romanNumerals</code
+          ></label
+        >
+      </div>
+      <div><code>round</code> <input type="number" id="round" value="3" /></div>
+    </div>
     <h3>Tests</h3>
     <div id="app"></div>
     <script type="module" src="/src/dev.ts"></script>
     <script>
-      const eventListener = e =>
-        (document.getElementById('result').innerText = numericQuantity(
-          e.target.value,
-          { allowTrailingInvalid: true, romanNumerals: true }
-        ));
+      const updateResult = () => {
+        const allowTrailingInvalid = document.getElementById(
+          'allowTrailingInvalid'
+        ).checked;
+        const romanNumerals = document.getElementById('romanNumerals').checked;
+        const round = document.getElementById('round').valueAsNumber;
+        document.getElementById('result').innerText = numericQuantity(
+          document.querySelector('#input>input').value,
+          { allowTrailingInvalid, romanNumerals, round }
+        );
+      };
       for (const event of ['keyup', 'change']) {
-        document.querySelector('input').addEventListener(event, eventListener);
+        document
+          .querySelectorAll('input')
+          .forEach(el => el.addEventListener(event, updateResult));
       }
+      setTimeout(updateResult, 500);
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "numerals"
   ],
   "scripts": {
-    "start": "bun ./server.ts",
+    "start": "bun --hot ./server.ts",
     "build": "tsup",
     "test": "jest",
     "watch": "jest --watch",

diff --git a/server.ts b/server.ts
@@ -3,14 +3,21 @@ import open from 'open';
 
 const port = process.env.PORT ?? 3000;
 
-const dev = (await Bun.build({ entrypoints: ['./src/dev.ts'] })).outputs[0];
-
-setTimeout(() => open(`http://localhost:${port}`), 500);
+declare global {
+  var opened: boolean;
+}
+globalThis.opened ??= false;
+if (!globalThis.opened) {
+  setTimeout(() => open(`http://localhost:${port}`), 500);
+}
+globalThis.opened = true;
 
 export default {
-  fetch(req: Request) {
+  async fetch(req: Request) {
     const reqAsURL = new URL(req.url);
     if (reqAsURL.pathname.endsWith('dev.ts')) {
+      const dev = (await Bun.build({ entrypoints: ['./src/dev.ts'] }))
+        .outputs[0];
       return new Response(dev);
     }
     return new Response(Bun.file('./main.html'));

diff --git a/src/dev.ts b/src/dev.ts
@@ -27,9 +27,9 @@ for (const [title, tests] of Object.entries(numericQuantityTests)) {
     const tdCall = document.createElement('td');
     const tdResult = document.createElement('td');
     const tdPassFail = document.createElement('td');
-    tdCall.innerText = `numericQuantity(${JSON.stringify(test)}${
-      opts ? `, ${JSON.stringify(opts)}` : ''
-    })`;
+    tdCall.innerText = `numericQuantity(${
+      ['string', 'object'].includes(typeof test) ? JSON.stringify(test) : test
+    }${typeof opts !== 'undefined' ? `, ${JSON.stringify(opts)}` : ''})`;
     tdResult.innerText = `${result}`;
     tdPassFail.innerText = pass ? '✅' : '❌';
     testTR.appendChild(tdCall);