Skip to content

Commit aae56e8

Browse files
cdatacdata
committed
feat: Add a simple UI to the build server
1 parent 9c13e80 commit aae56e8

File tree

8 files changed

+266
-34
lines changed

8 files changed

+266
-34
lines changed

‎typescript/package-lock.json‎

Lines changed: 155 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎typescript/packages/usuba-sw/src/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ self.addEventListener('install', (_event) => {
66
});
77

88
self.addEventListener('fetch', async (event: FetchEvent) => {
9-
console.log('Usuba sees a fetch event!');
109
if (event.request.method !== 'GET') {
1110
return;
1211
}
1312

1413
const requestUrl = new URL(event.request.url);
1514

1615
if (requestUrl.pathname.startsWith('/module/transpiled')) {
16+
console.log('Pulling generated artifact from cache...');
1717
event.respondWith(
1818
(async () => {
1919
const cache = await caches.open('v0/modules/transpiled');
@@ -26,6 +26,7 @@ self.addEventListener('fetch', async (event: FetchEvent) => {
2626
})()
2727
);
2828
} else if (requestUrl.pathname.startsWith('/module/on-demand')) {
29+
console.log('On-demand module generation detected...');
2930
requestUrl.pathname.split('/').slice(2);
3031

3132
const [ext, witBase64, sourceCodeBase64] = requestUrl.pathname
@@ -90,7 +91,7 @@ self.addEventListener('fetch', async (event: FetchEvent) => {
9091
});
9192

9293
for (const [filename, bytes] of files) {
93-
console.log(filename);
94+
console.log('Caching artifact:', filename);
9495
const blob = new Blob([bytes], {
9596
type: filename.endsWith('.wasm')
9697
? 'application/wasm'

‎typescript/packages/usuba-sw/tsconfig.tsbuildinfo‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎typescript/packages/usuba-ui/index.html‎

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,27 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Usuba</title>
8+
<link rel="stylesheet" href="/shoelace/dist/themes/light.css" />
9+
<link rel="stylesheet" href="/shoelace/dist/themes/dark.css" />
10+
<link rel="stylesheet" href="/styles.css" />
811
</head>
912

1013
<body>
14+
<section id="specifier">
15+
<sl-select aria-label="Language" label="Language" value="js">
16+
<sl-option aria-selected="true" value="js">JavaScript</sl-option>
17+
<sl-option disabled value="py">Python</sl-option>
18+
<sl-option disabled value="rs">Rust</sl-option>
19+
</sl-select>
20+
<sl-input aria-readonly="true" readonly label="Module specifier"></sl-input>
21+
<sl-copy-button label="Copy to smizmar"></sl-copy-button>
22+
</section>
23+
<section id="code">
24+
<sl-textarea label="WIT" resize="none" rows="16" spellcheck="false">
25+
</sl-textarea>
26+
<sl-textarea label="Source Code" resize="none" rows="16" spellcheck="false">
27+
</sl-textarea>
28+
</section>
1129

1230
<script type="module">
1331
if ("serviceWorker" in navigator) {
@@ -29,35 +47,7 @@
2947
}
3048
</script>
3149

32-
<script type="module">
33-
// Example component IDL
34-
const witComponentDefinition = `
35-
package example:hello;
36-
world hello {
37-
export hello: func() -> string;
38-
}`;
39-
40-
// JavaScript implementation
41-
const javascriptSourceCode = `
42-
export function hello() {
43-
return 'Hello, ShmavaScript!'
44-
}`;
45-
46-
// Base64-encode all sources
47-
const witBase64 = btoa(witComponentDefinition);
48-
const javascriptBase64 = btoa(javascriptSourceCode);
49-
50-
console.log(witBase64);
51-
52-
const { hello } = await import(
53-
/* @vite-ignore */
54-
`/module/on-demand/js/${witBase64}/${javascriptBase64}`
55-
);
56-
57-
// Prints "Hello, JavaScript!" to the console
58-
console.log("Message from a JavaScript Wasm Component:", hello());
59-
</script>
60-
50+
<script type="module" src="./src/index.ts"></script>
6151
</body>
6252

6353
</html>

‎typescript/packages/usuba-ui/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
"url": "https://github.com/commontoolsinc/labs/issues"
1818
},
1919
"homepage": "https://github.com/commontoolsinc/labs#readme",
20-
"dependencies": {},
20+
"dependencies": {
21+
"@shoelace-style/shoelace": "^2.15.1"
22+
},
2123
"devDependencies": {
2224
"@commontools/usuba-sw": "^0.0.1",
2325
"typescript": "^5.2.2",
@@ -32,4 +34,4 @@
3234
"command": "vite build"
3335
}
3436
}
35-
}
37+
}

‎typescript/packages/usuba-ui/public/shoelace‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../../node_modules/@shoelace-style/shoelace

‎typescript/packages/usuba-ui/public/styles.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body {
2+
font-family: var(--sl-font-sans, sans-serif);
3+
padding: 1em;
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
sl-textarea {
11+
min-height: 360px;
12+
flex: 1;
13+
}
14+
sl-textarea::part(textarea) {
15+
font-family: var(--sl-font-mono, mono);
16+
font-size: 0.85rem;
17+
}
18+
19+
sl-input {
20+
flex: 1;
21+
}
22+
23+
#specifier {
24+
display: flex;
25+
flex-direction: row;
26+
align-items: center;
27+
margin-bottom: 1em;
28+
gap: 1em;
29+
margin-right: 1em;
30+
}
31+
32+
#code {
33+
display: flex;
34+
flex-direction: row;
35+
gap: 1em;
36+
}

0 commit comments

Comments
 (0)