WIP: feat(bindgen): Generate typescript demo app

InsightSoftwareConsortium · Jun 27, 2023 · 6d05ffb · 6d05ffb
1 parent d40a036
commit 6d05ffb
Show file tree

Hide file tree

Showing 7 changed files with 460 additions and 47 deletions.
diff --git a/packages/compress-stringify/typescript/cypress/tsconfig.json b/packages/compress-stringify/typescript/cypress/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*.ts"
+  ],
+  "compilerOptions": {
+    "noEmit": false,
+    "sourceMap": false,
+    "inlineSourceMap": true,
+    "types": ["cypress"]
+  },
+}
diff --git a/src/bindgen/typescript-resources/demo-index.html b/src/bindgen/typescript-resources/demo-index.html
@@ -3,23 +3,36 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./logo.svg" />
-    <link rel="stylesheet" href="./style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><bindgenPackageName></title>
+    <link rel="stylesheet" href="./style.css" />
+    <link
+    rel="stylesheet"
+    media="(prefers-color-scheme:light)"
+    href="/shoelace/themes/light.css"
+  />
+  <link
+    rel="stylesheet"
+    media="(prefers-color-scheme:dark)"
+    href="/shoelace/themes/dark.css"
+    onload="document.documentElement.classList.add('sl-theme-dark');"
+  />
+  <script type="module" src="/shoelace/shoelace.js"></script>
+    <title>@bindgenPackageName@</title>
   </head>
   <body>
     <div id="app">
       <a href="https://wasm.itk.org/" target="_blank">
         <img src="./logo.svg" class="logo vanilla" alt="ITK Wasm logo" />
       </a>
-      <h1><bindgenPackageName></h1>
+      <h1>@bindgenPackageName@</h1>
         package
-      <div class="card">
-        <h2>functions</h2>
-        <ul id="pipeline-functions-list">
-
-        </ul>
-      </div>
+      <!-- <div class="card"> -->
+      <h2>functions</h2>
+      <sl-tab-group>
+@pipelinesFunctionsTabs@
+@bindgenFunctions@
+      <!-- </div> -->
+      </sl-tab-group>
       <p class="read-the-docs">
         Click on the ITK Wasm logo to learn more
       </p>

diff --git a/src/bindgen/typescript-resources/demo.css b/src/bindgen/typescript-resources/demo.css
@@ -64,10 +64,6 @@ li {
   padding: 2em;
 }
 
-.read-the-docs {
-  color: #888;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

diff --git a/src/bindgen/typescript-resources/demo.ts b/src/bindgen/typescript-resources/demo.ts
@@ -1,18 +1,30 @@
-import * as <bindgenBundleNameCamelCase> from '../../dist/bundles/<bindgenBundleName>.js'
-<bindgenBundleNameCamelCase>.setPipelinesBaseUrl('/pipelines')
+import * as @bindgenBundleNameCamelCase@ from '../../dist/bundles/@bindgenBundleName@.js'
 
-const packageFunctions = []
-for (const [key, val] of Object.entries(<bindgenBundleNameCamelCase>)) {
-  if (typeof val == 'function') {
-    packageFunctions.push(key)
-  }
+// Use local, vendored WebAssembly module assets
+const pipelinesBaseUrl: string | URL = new URL('/pipelines', document.location.origin).href
+@bindgenBundleNameCamelCase@.setPipelinesBaseUrl(pipelinesBaseUrl)
+const pipelineWorkerUrl: string | URL | null = new URL('/web-workers/pipeline.worker.js', document.location.origin).href
+@bindgenBundleNameCamelCase@.setPipelineWorkerUrl(pipelineWorkerUrl)
+
+
+// ------------------------------------------------------------------------------------
+// Utilities
+
+function downloadFile(content, filename) {
+  const url = URL.createObjectURL(new Blob([content]))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename || 'download'
+  document.body.appendChild(a)
+  function clickHandler(event) {
+    setTimeout(() => {
+      URL.revokeObjectURL(url)
+      a.removeEventListener('click', clickHandler)
+    }, 200)
+  };
+  a.addEventListener('click', clickHandler, false)
+  a.click()
+  return a
 }
 
-const pipelineFunctionsList = document.getElementById('pipeline-functions-list')
-pipelineFunctionsList.innerHTML = `
-<li>
-  ${packageFunctions.join('</li>\n<li>')}
-</li>
-`
-console.log(packageFunctions)
-console.log(<bindgenBundleNameCamelCase>)
+@bindgenFunctionLogic@
diff --git a/src/bindgen/typescript-resources/template.package.json b/src/bindgen/typescript-resources/template.package.json
@@ -30,14 +30,15 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "itk-wasm": "^1.0.0-b.117"
+    "itk-wasm": "^1.0.0-b.118"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.1.1",
+    "@shoelace-style/shoelace": "^2.5.2",
     "@types/node": "^20.2.5",
     "debug": "^4.3.4",
     "rollup": "^3.9.0",
@@ -47,7 +48,7 @@
     "supports-color": "^9.3.1",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
-    "vite": "^4.0.4",
-    "vite-plugin-static-copy": "^0.13.0"
+    "vite": "^4.3.3",
+    "vite-plugin-static-copy": "^0.14.0"
   }
 }
diff --git a/src/bindgen/typescript-resources/vite.config.js b/src/bindgen/typescript-resources/vite.config.js
@@ -8,12 +8,18 @@ export default defineConfig({
     outDir: '../../demo',
     emptyOutDir: true,
   },
+  rollupOptions: {
+    external: [
+      "/shoelace/shoelace.js",
+    ]
+  },
   plugins: [
     // put lazy loaded JavaScript and Wasm bundles in dist directory
     viteStaticCopy({
       targets: [
         { src: '../../dist/pipelines/*', dest: 'pipelines' },
         { src: '../../dist/web-workers/*', dest: 'web-workers' },
+        { src: '../../node_modules/@shoelace-style/shoelace/dist/*', dest: 'shoelace/' },
       ],
     })
   ],