feat: Add a simple UI to the build server

commontoolsinc · cdata · May 23, 2024 · May 20, 2024 · May 20, 2024 · May 21, 2024
commit aae56e8924449cee911919e94bd24ecc1dd0e6c0
diff --git a/typescript/package-lock.json b/typescript/package-lock.json
diff --git a/typescript/packages/usuba-sw/src/index.ts b/typescript/packages/usuba-sw/src/index.ts
@@ -6,14 +6,14 @@ self.addEventListener('install', (_event) => {
 });
 
 self.addEventListener('fetch', async (event: FetchEvent) => {
-  console.log('Usuba sees a fetch event!');
   if (event.request.method !== 'GET') {
     return;
   }
 
   const requestUrl = new URL(event.request.url);
 
   if (requestUrl.pathname.startsWith('/module/transpiled')) {
+    console.log('Pulling generated artifact from cache...');
     event.respondWith(
       (async () => {
         const cache = await caches.open('v0/modules/transpiled');
@@ -26,6 +26,7 @@ self.addEventListener('fetch', async (event: FetchEvent) => {
       })()
     );
   } else if (requestUrl.pathname.startsWith('/module/on-demand')) {
+    console.log('On-demand module generation detected...');
     requestUrl.pathname.split('/').slice(2);
 
     const [ext, witBase64, sourceCodeBase64] = requestUrl.pathname
@@ -90,7 +91,7 @@ self.addEventListener('fetch', async (event: FetchEvent) => {
             });
 
             for (const [filename, bytes] of files) {
-              console.log(filename);
+              console.log('Caching artifact:', filename);
               const blob = new Blob([bytes], {
                 type: filename.endsWith('.wasm')
                   ? 'application/wasm'

diff --git a/typescript/packages/usuba-sw/tsconfig.tsbuildinfo b/typescript/packages/usuba-sw/tsconfig.tsbuildinfo
diff --git a/typescript/packages/usuba-ui/index.html b/typescript/packages/usuba-ui/index.html
@@ -5,9 +5,27 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Usuba</title>
+  <link rel="stylesheet" href="/shoelace/dist/themes/light.css" />
+  <link rel="stylesheet" href="/shoelace/dist/themes/dark.css" />
+  <link rel="stylesheet" href="/styles.css" />
 </head>
 
 <body>
+  <section id="specifier">
+    <sl-select aria-label="Language" label="Language" value="js">
+      <sl-option aria-selected="true" value="js">JavaScript</sl-option>
+      <sl-option disabled value="py">Python</sl-option>
+      <sl-option disabled value="rs">Rust</sl-option>
+    </sl-select>
+    <sl-input aria-readonly="true" readonly label="Module specifier"></sl-input>
+    <sl-copy-button label="Copy to smizmar"></sl-copy-button>
+  </section>
+  <section id="code">
+    <sl-textarea label="WIT" resize="none" rows="16" spellcheck="false">
+    </sl-textarea>
+    <sl-textarea label="Source Code" resize="none" rows="16" spellcheck="false">
+    </sl-textarea>
+  </section>
 
   <script type="module">
     if ("serviceWorker" in navigator) {
@@ -29,35 +47,7 @@
     }
   </script>
 
-  <script type="module">
-    // Example component IDL
-    const witComponentDefinition = `
-package example:hello;
-world hello {
-  export hello: func() -> string;
-}`;
-
-    // JavaScript implementation
-    const javascriptSourceCode = `
-export function hello() {
-  return 'Hello, ShmavaScript!'
-}`;
-
-    // Base64-encode all sources
-    const witBase64 = btoa(witComponentDefinition);
-    const javascriptBase64 = btoa(javascriptSourceCode);
-
-    console.log(witBase64);
-
-    const { hello } = await import(
-      /* @vite-ignore */
-      `/module/on-demand/js/${witBase64}/${javascriptBase64}`
-    );
-
-    // Prints "Hello, JavaScript!" to the console
-    console.log("Message from a JavaScript Wasm Component:", hello());
-  </script>
-
+  <script type="module" src="./src/index.ts"></script>
 </body>
 
 </html>
diff --git a/typescript/packages/usuba-ui/package.json b/typescript/packages/usuba-ui/package.json
@@ -17,7 +17,9 @@
     "url": "https://github.com/commontoolsinc/labs/issues"
   },
   "homepage": "https://github.com/commontoolsinc/labs#readme",
-  "dependencies": {},
+  "dependencies": {
+    "@shoelace-style/shoelace": "^2.15.1"
+  },
   "devDependencies": {
     "@commontools/usuba-sw": "^0.0.1",
     "typescript": "^5.2.2",
@@ -32,4 +34,4 @@
       "command": "vite build"
     }
   }
-}
+}
diff --git a/typescript/packages/usuba-ui/public/shoelace b/typescript/packages/usuba-ui/public/shoelace
@@ -0,0 +1 @@
+../../../node_modules/@shoelace-style/shoelace
diff --git a/typescript/packages/usuba-ui/public/styles.css b/typescript/packages/usuba-ui/public/styles.css
@@ -0,0 +1,36 @@
+body {
+  font-family: var(--sl-font-sans, sans-serif);
+  padding: 1em;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+sl-textarea {
+  min-height: 360px;
+  flex: 1;
+}
+sl-textarea::part(textarea) {
+  font-family: var(--sl-font-mono, mono);
+  font-size: 0.85rem;
+}
+
+sl-input {
+  flex: 1;
+}
+
+#specifier {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 1em;
+  gap: 1em;
+  margin-right: 1em;
+}
+
+#code {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+}