Download an archive of a directory and its contents from the virtual …

…filesystem in the webR application (#450)

* Resize canvas device in empty environment

Avoids leaking `devices` and `idx` into the global environment.

* Switch to COEP: credentialless

* Add viewer output message to webr support package

* Add HTML widget viewer to webR application

* Update NEWS.md

* Directory archive download in webR application

* Update NEWS.md

* Update flake.nix for package-lock.json

NEWS.md

@@ -16,6 +16,8 @@
 
 * Printing a HTML element or HTML widget in the webR application app now shows the HTML content in an embedded viewer `iframe` (#384, #431). With thanks to @timelyportfolio for the basic [implementation method](https://www.jsinr.me/2024/01/10/selfcontained-htmlwidgets/).
 
+* The webR application now allows users to download an archive of a directory and its contents from the virtual filesystem (#388).
+
 ## Breaking changes
 
 * The `ServiceWorker` communication channel has been deprecated. Users should use the `SharedArrayBuffer` channel where cross-origin isolation is possible, or otherwise use the `PostMessage` channel. For the moment the `ServiceWorker` channel can still be used, but emits a warning at start up. The channel will be removed entirely in a future version of webR.

flake.nix

@@ -26,7 +26,7 @@
             #     cd src; prefetch-npm-deps package-lock.json
             srcNpmDeps = pkgs.fetchNpmDeps {
               src = "${self}/src";
-              hash = "sha256-x8eIcRezS58dDDj6gxNFvFjnad2L3snxVWgnj2CLTHw=";
+              hash = "sha256-FgkBQyaMKHHjSsXvFu6Raj6gegslbvyBT1SvNz52UdY=";
             };
 
             inherit system;

src/esbuild.ts

@@ -45,7 +45,7 @@ function build(input: string, output: string, platform: esbuild.Platform, minify
 
 const outputs = {
   browser: [
-    build('repl/App.tsx', '../dist/repl.mjs', 'neutral', prod),
+    build('repl/App.tsx', '../dist/repl.mjs', 'browser', prod),
     build('webR/chan/serviceworker.ts', '../dist/webr-serviceworker.js', 'browser', false),
     build('webR/webr-worker.ts', '../dist/webr-worker.js', 'node', false),
     build('webR/webr-main.ts', '../dist/webr.mjs', 'neutral', prod),

src/package.json

@@ -63,6 +63,7 @@
     "classnames": "^2.2.6",
     "codemirror": "^6.0.1",
     "codemirror-lang-r": "^0.1.0-2",
+    "jszip": "^3.10.1",
     "lezer-r": "^0.1.1",
     "lightningcss": "^1.21.5",
     "prop-types": "^15.7.2",

src/repl/components/Files.tsx

@@ -5,6 +5,7 @@ import { Panel } from 'react-resizable-panels';
 import { WebR, WebRError } from '../../webR/webr-main';
 import type { FSNode } from '../../webR/webr-main';
 import { FilesInterface } from '../App';
+import JSZip from 'jszip';
 import './Files.css';
 
 const FolderIcon = ({ isOpen }: { isOpen: boolean }) => isOpen
@@ -55,6 +56,31 @@ export function Files({
   const uploadButtonRef = React.useRef<HTMLButtonElement | null>(null);
   const downloadButtonRef = React.useRef<HTMLButtonElement | null>(null);
 
+  /* Take an `INode` selected from the tree in the UI and create a zip archive
+  * of the contents. Directories are added to the archive recursively.
+  */
+  const zipFromFSNode = async (zip: JSZip, node: INode) => {
+    if (!zip || !node || !treeData) {
+      return;
+    }
+
+    if (node.children && node.children.length > 0) {
+      const dir = zip.folder(node.name);
+      await Promise.all(node.children.map((childId) => {
+        const child = treeData.find((value) => value.id === childId);
+        return zipFromFSNode(dir!, child!);
+      }));
+    } else {
+      const name = node.name;
+      const path = getNodePath(node);
+      await webR.FS.readFile(path).then((data) => {
+        zip.file(name, data, { binary: true });
+      }).catch((error: Error) => {
+        console.warn(`Problem encountered when creating archive: "${error.message}".`);
+      });
+    }
+  };
+
   const nodeRenderer: ITreeViewProps['nodeRenderer'] = ({
     element,
     isExpanded,
@@ -109,20 +135,29 @@ export function Files({
   };
 
   const onDownload: React.MouseEventHandler<HTMLButtonElement> = () => {
-    if (!selectedNode) {
-      return;
-    }
-    const path = getNodePath(selectedNode);
-    void webR.FS.readFile(path).then((data) => {
-      const filename = selectedNode.name;
+    const doDownload = (filename: string, data: ArrayBufferView) => {
       const blob = new Blob([data], { type: 'application/octet-stream' });
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
-      link.download = filename;
+      link.download = filename.replace(/[/\\<>:"|?*]/, '_');
       link.href = url;
       link.click();
       link.remove();
-    });
+    };
+
+    if (!selectedNode) {
+      return;
+    } else if (isFileSelected) {
+      const path = getNodePath(selectedNode);
+      void webR.FS.readFile(path).then((data) => doDownload(selectedNode.name, data));
+    } else {
+      void (async () => {
+        const zip = new JSZip();
+        await zipFromFSNode(zip, selectedNode);
+        const data = await zip.generateAsync({type : "uint8array"});
+        doDownload(`${selectedNode.name}.zip`, data);
+      })();
+    }
   };
 
   const onOpen = async () => {
@@ -268,9 +303,10 @@ export function Files({
             ref={downloadButtonRef}
             onClick={onDownload}
             className="download-file"
-            disabled={!selectedNode || !isFileSelected}
+            disabled={!selectedNode}
           >
-            <Fa.FaFileDownload aria-hidden="true" className="icon" /> Download file
+            <Fa.FaFileDownload aria-hidden="true" className="icon" />
+            Download {isFileSelected ? "file" : "directory"}
           </button>
           <button
             onClick={() => { void onOpen(); }}