Merge pull request #29 from silx-kit/up-h5web

Upgrade H5Web to v9 + support JSON export

app/App.tsx

@@ -1,23 +1,22 @@
 import { Suspense, useEffect, useState } from 'react';
 import { useEventListener } from '@react-hookz/web';
-import { FileInfo, Message } from './models';
-import { isFileInfoMessage } from './utils';
 import Viewer from './Viewer';
 import { ErrorBoundary } from 'react-error-boundary';
+import { vscode } from './vscode-api';
+import { MessageType, type Message, type FileInfo } from '../src/models';
 
 function App() {
   const [fileInfo, setFileInfo] = useState<FileInfo>();
 
   useEventListener(window, 'message', (evt: MessageEvent<Message>) => {
     const { data: message } = evt;
-    if (isFileInfoMessage(message)) {
+    if (message.type === MessageType.FileInfo) {
       setFileInfo(message.data);
     }
   });
 
   useEffect(() => {
-    const vscode = acquireVsCodeApi();
-    vscode.postMessage({ type: 'ready' });
+    vscode.postMessage({ type: MessageType.Ready });
   }, []);
 
   if (!fileInfo) {

app/Viewer.tsx

@@ -1,8 +1,8 @@
 import { App } from '@h5web/app';
 import { H5WasmProvider } from '@h5web/h5wasm';
-import { FileInfo } from './models';
 import { suspend } from 'suspend-react';
-import { MAX_SIZE_IN_BYTES } from './utils';
+import { MAX_SIZE_IN_BYTES, getExportURL } from './utils';
+import { type FileInfo } from '../src/models.js';
 
 interface Props {
   fileInfo: FileInfo;
@@ -23,7 +23,11 @@ function Viewer(props: Props) {
   }, [fileInfo]);
 
   return (
-    <H5WasmProvider filename={fileInfo.name} buffer={buffer}>
+    <H5WasmProvider
+      filename={fileInfo.name}
+      buffer={buffer}
+      getExportURL={getExportURL}
+    >
       <App />
     </H5WasmProvider>
   );

app/tsconfig.json

@@ -14,6 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true
   }
 }

app/utils.ts

@@ -1,10 +1,24 @@
-import { FileInfo, Message } from './models';
+import type { GetExportURL } from '@h5web/app';
+import { MessageType } from '../src/models.js';
+import { vscode } from './vscode-api.js';
 
 // 2 GB = 2 * 1024 * 1024 * 1024 B
 export const MAX_SIZE_IN_BYTES = 2147483648;
 
-export function isFileInfoMessage(
-  message: Message
-): message is Message<FileInfo> {
-  return message.type === 'FileInfo';
-}
+export const getExportURL: GetExportURL = (format, dataset, __, value) => {
+  if (format === 'json') {
+    return async () => {
+      vscode.postMessage({
+        type: MessageType.Export,
+        data: {
+          format,
+          name: dataset.name,
+          payload: JSON.stringify(value, null, 2),
+        },
+      });
+      return new Blob(); // doesn't matter as long as it's not falsy
+    };
+  }
+
+  return undefined;
+};

app/vite-env.d.ts

@@ -1,7 +1 @@
 /// <reference types="vite/client" />
-
-interface VsCodeApi {
-  postMessage(message: any): void;
-}
-
-declare function acquireVsCodeApi(): VsCodeApi;

app/vscode-api.ts

@@ -0,0 +1 @@
+export const vscode = acquireVsCodeApi();

package.json

@@ -26,7 +26,7 @@
   "engines": {
     "node": "18.x",
     "pnpm": ">=8.6.0",
-    "vscode": ">=1.46.0"
+    "vscode": ">=1.47.0"
   },
   "activationEvents": [
     "onCustomEditor:h5web.viewer"
@@ -66,8 +66,8 @@
     "pub": "pnpx vsce publish --no-dependencies"
   },
   "dependencies": {
-    "@h5web/app": "8.0.0",
-    "@h5web/h5wasm": "8.0.0",
+    "@h5web/app": "9.0.0",
+    "@h5web/h5wasm": "9.0.0",
     "@react-hookz/web": "15.0.1",
     "axios": "0.27.2",
     "normalize.css": "8.0.1",
@@ -80,11 +80,12 @@
     "@types/node": "^18.15.11",
     "@types/react": "^17.0.58",
     "@types/react-dom": "^17.0.19",
-    "@types/vscode": "~1.46.0",
+    "@types/vscode": "~1.47.0",
+    "@types/vscode-webview": "~1.57.2",
     "@vitejs/plugin-react": "1.3.2",
     "esbuild": "0.14.49",
     "prettier": "2.8.7",
-    "typescript": "4.7.3",
+    "typescript": "5.2.2",
     "vite": "2.9.13"
   }
 }

src/H5WebViewer.ts

@@ -5,9 +5,13 @@ import {
   Uri,
   Webview,
   WebviewPanel,
+  window,
   workspace,
 } from 'vscode';
 import { join, basename } from 'path';
+import { writeFileSync } from 'fs';
+import { Message, MessageType } from './models';
+import path = require('path');
 
 export default class H5WebViewer
   implements CustomReadonlyEditorProvider<CustomDocument>
@@ -38,17 +42,39 @@ export default class H5WebViewer
 
     webview.html = await this.getHtmlForWebview(webview);
 
-    webview.onDidReceiveMessage(async (evt) => {
-      if (evt.type === 'ready') {
+    webview.onDidReceiveMessage(async (evt: Message) => {
+      if (evt.type === MessageType.Ready) {
         const { size } = await workspace.fs.stat(document.uri);
+
         webview.postMessage({
-          type: 'FileInfo',
+          type: MessageType.FileInfo,
           data: {
             uri: webview.asWebviewUri(document.uri).toString(),
             name: basename(document.uri.fsPath),
             size,
           },
         });
+
+        return;
+      }
+
+      if (evt.type === MessageType.Export) {
+        const { format, name, payload } = evt.data;
+
+        const defaultUri = Uri.file(
+          path.join(path.dirname(document.uri.fsPath), `${name}.${format}`)
+        );
+
+        const saveUri = await window.showSaveDialog({
+          defaultUri,
+          title: `Export to ${format.toUpperCase()}`,
+        });
+
+        if (saveUri) {
+          writeFileSync(saveUri.fsPath, payload);
+        }
+
+        return;
       }
     });
   }

src/models.ts

@@ -0,0 +1,24 @@
+import { ExportFormat } from '@h5web/app';
+
+export type Message =
+  | { type: MessageType.Ready }
+  | { type: MessageType.FileInfo; data: FileInfo }
+  | { type: MessageType.Export; data: Export };
+
+export enum MessageType {
+  Ready = 'Ready',
+  FileInfo = 'FileInfo',
+  Export = 'Export',
+}
+
+export interface FileInfo {
+  uri: string;
+  name: string;
+  size: number;
+}
+
+export interface Export {
+  format: ExportFormat;
+  name: string;
+  payload: string;
+}