Pass supported plugins through JSON script tag

.github/workflows/lint-build.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install pnpm ⚙️
         uses: pnpm/action-setup@v2
         with:
-          version: 8.x
+          version: 9.x
 
       - name: Restore cache 📌
         uses: actions/cache@v3
@@ -56,7 +56,7 @@ jobs:
       - name: Install pnpm ⚙️
         uses: pnpm/action-setup@v2
         with:
-          version: 8.x
+          version: 9.x
 
       - name: Restore cache 📌
         uses: actions/cache@v3

app/Viewer.tsx

@@ -10,7 +10,6 @@ interface Props {
 
 function Viewer(props: Props) {
   const { fileInfo } = props;
-  const { supportedPlugins } = fileInfo;
 
   const buffer = suspend(async () => {
     const res = await fetch(fileInfo.uri);
@@ -22,7 +21,7 @@ function Viewer(props: Props) {
       filename={fileInfo.name}
       buffer={buffer}
       getExportURL={getExportURL}
-      getPlugin={async (name) => getPlugin(supportedPlugins[name])}
+      getPlugin={getPlugin}
     >
       <App />
     </H5WasmProvider>

app/utils.ts

@@ -1,10 +1,29 @@
-import type { GetExportURL } from '@h5web/app';
+import { assertNonNull, type GetExportURL } from '@h5web/app';
 import { MessageType } from '../src/models.js';
 import { vscode } from './vscode-api.js';
+import type { Plugin } from '@h5web/h5wasm';
+
+const pluginsScriptElem = document.getElementById('plugins');
+assertNonNull(pluginsScriptElem);
+
+const PLUGINS = JSON.parse(pluginsScriptElem.innerHTML);
 
 // 2 GB = 2 * 1024 * 1024 * 1024 B
 export const MAX_SIZE_IN_BYTES = 2147483648;
 
+export async function getPlugin(
+  name: Plugin
+): Promise<ArrayBuffer | undefined> {
+  const url = PLUGINS[name];
+
+  if (!url) {
+    return undefined;
+  }
+
+  const response = await fetch(url);
+  return response.arrayBuffer();
+}
+
 export const getExportURL: GetExportURL = (
   format,
   dataset,
@@ -56,14 +75,3 @@ export const getExportURL: GetExportURL = (
 
   return undefined;
 };
-
-export async function getPlugin(
-  url: string | undefined
-): Promise<ArrayBuffer | undefined> {
-  if (!url) {
-    return undefined;
-  }
-
-  const response = await fetch(url);
-  return response.arrayBuffer();
-}

package.json

@@ -25,7 +25,7 @@
   ],
   "engines": {
     "node": "20.x",
-    "pnpm": "8.x",
+    "pnpm": "9.x",
     "vscode": ">=1.86.0"
   },
   "contributes": {

src/H5WebViewer.ts

@@ -48,22 +48,15 @@ export default class H5WebViewer
         const name = basename(document.uri.fsPath);
         const { size } = await workspace.fs.stat(document.uri);
 
-        const supportedPlugins = Object.fromEntries(
-          Object.entries(PLUGINS).map(([name, relativePath]) => {
-            const pluginUri = Uri.joinPath(extensionUri, 'out', relativePath);
-            return [name, webview.asWebviewUri(pluginUri).toString()];
-          })
-        );
-
         webview.postMessage({
           type: MessageType.FileInfo,
-          data: { uri, name, size, supportedPlugins },
+          data: { uri, name, size },
         });
 
         function watcher() {
           webview.postMessage({
             type: MessageType.FileInfo,
-            data: { uri, name, size, supportedPlugins },
+            data: { uri, name, size },
           });
         }
 
@@ -97,7 +90,7 @@ export default class H5WebViewer
   }
 
   private async getHtmlForWebview(webview: Webview): Promise<string> {
-    const { extensionPath } = this.context;
+    const { extensionPath, extensionUri } = this.context;
     const { cspSource } = webview;
 
     const manifest = require(join(extensionPath, 'dist/manifest.json'));
@@ -110,6 +103,15 @@ export default class H5WebViewer
     const jsUri = webview.asWebviewUri(jsPathOnDisk);
     const cssUri = webview.asWebviewUri(cssPathOnDisk);
 
+    const plugins = JSON.stringify(
+      Object.fromEntries(
+        Object.entries(PLUGINS).map(([name, relativePath]) => {
+          const pluginUri = Uri.joinPath(extensionUri, 'out', relativePath);
+          return [name, webview.asWebviewUri(pluginUri).toString()];
+        })
+      )
+    );
+
     /*
      * CSP policy:
      * - `connect-src data:` allows download URLs generated by `getExportURL` when exporting datasets/slices
@@ -126,6 +128,7 @@ export default class H5WebViewer
         >
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<title>H5Web</title>
+        <script id="plugins" type="application/json">${plugins}</script>
         <script type="module" src="${jsUri}"></script>
         <link rel="stylesheet" href="${cssUri}">
 			</head>

src/models.ts

@@ -16,7 +16,6 @@ export interface FileInfo {
   uri: string;
   name: string;
   size: number;
-  supportedPlugins: Record<Plugin, string>;
 }
 
 export interface Export {