transcend-io · bencmbrook · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022
diff --git a/README.md b/README.md
@@ -527,13 +527,12 @@ On Amazon S3, this means adding the following line to your bucket policy, inside
 
 ```ts
 // Set only the base URL by passing a string
-penumbra.setWorkerLocation('/penumbra-workers/');
+penumbra.setWorkerLocation('/penumbra-workers/worker.penumbra.js');
 
 // Set all worker URLs by passing a WorkerLocation object
 penumbra.setWorkerLocation({
   base: '/penumbra-workers/',
   penumbra: 'worker.penumbra.js',
-  StreamSaver: 'StreamSaver.js',
 });
 
 // Set a single worker's location

diff --git a/build.js b/build.js
@@ -0,0 +1,54 @@
+const {
+  NodeGlobalsPolyfillPlugin,
+} = require('@esbuild-plugins/node-globals-polyfill');
+
+const { build } = require('esbuild');
+
+/**
+ * @type {import('esbuild').BuildOptions}
+ */
+const sharedOptions = {
+  entryPoints: ['./src/index.ts', './src/worker.penumbra.js'],
+  sourcemap: true,
+  bundle: true,
+};
+
+/**
+ * @type {import('esbuild').BuildOptions}
+ */
+const browserOptions = {
+  platform: 'browser',
+  plugins: [
+    NodeGlobalsPolyfillPlugin({
+      process: true,
+      buffer: true,
+    }),
+  ],
+  define: {
+    global: 'globalThis',
+  },
+};
+
+/**
+ * @type {import('esbuild').BuildOptions}
+ */
+const cjsOptions = {
+  ...sharedOptions,
+  ...browserOptions,
+  format: 'iife',
+  minify: true,
+  outdir: './dist/cjs/',
+  globalName: 'penumbra',
+};
+build(cjsOptions).catch(() => process.exit(1));
+
+/**
+ * @type {import('esbuild').BuildOptions}
+ */
+const esmOptions = {
+  ...sharedOptions,
+  ...browserOptions,
+  format: 'esm',
+  outdir: './dist/esm/',
+};
+build(esmOptions).catch(() => process.exit(1));
diff --git a/demo/index.html → demo/cjs.html b/demo/index.html → demo/cjs.html
@@ -30,8 +30,8 @@ <h1>Penumbra Tests</h1>
         const demo = penumbra.cloneNode();
 
         penumbra.dataset.penumbra = '';
-        penumbra.dataset.worker = `worker.penumbra.js?${cacheBuster}`;
-        penumbra.src = `main.penumbra.js?${cacheBuster}`;
+        penumbra.dataset.worker = `/dist/cjs/worker.penumbra.js?${cacheBuster}`;
+        penumbra.src = `/dist/cjs/index.js?${cacheBuster}`;
         demo.src = `demo.js?${cacheBuster}`;
 
         scripts.appendChild(demo);

diff --git a/demo/demo.js b/demo/demo.js
@@ -2,7 +2,6 @@
 const view = self;
 
 const tests = [];
-const results = [];
 let failures = 0;
 const logger = console;
 
@@ -55,8 +54,8 @@ const onReady = async (
           );
           return false;
         }
-        const cacheBuster = Math.random().toString(10).slice(2);
-        await penumbra.setWorkerLocation(`worker.penumbra.js?${cacheBuster}`);
+        // const cacheBuster = Math.random().toString(10).slice(2);
+        // await penumbra.setWorkerLocation(`worker.penumbra.js?${cacheBuster}`);
         const NYT = {
           url: 'https://s3-us-west-2.amazonaws.com/bencmbrook/NYT.txt.enc',
           filePrefix: 'NYT',

diff --git a/demo/esm.html b/demo/esm.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Penumbra Tests</title>
+    <meta charset="UTF-8" />
+    <!--<link rel="stylesheet" type="text/css" href="style.css" />-->
+  </head>
+
+  <body>
+    <div id="app">
+      <h1>Penumbra Tests</h1>
+    </div>
+    <div>
+      <p>Open your console (Option+Command+I) to view test results.</p>
+    </div>
+    <script type="module">
+      const cacheBuster = Math.random().toString(10).slice(2);
+      const { penumbra } = await import(`/dist/esm/index.js?${cacheBuster}`);
+      // ESM workers blocked by Firefox support
+      penumbra.setWorkerLocation(`/dist/cjs/worker.penumbra.js?${cacheBuster}`);
+      const demo = document.createElement('script');
+      demo.src = `demo.js?${cacheBuster}`;
+      document.body.appendChild(demo);
+    </script>
+  </body>
+</html>
diff --git a/example/index.html b/example/index.html
@@ -36,7 +36,7 @@ <h2>The data below is downloaded and decrypted</h2>
     <script src="jsAnimation.js"></script>
     <script src="files.js"></script>
     <script src="displayTable.js"></script>
-    <script src="main.penumbra.js" async defer></script>
+    <script src="/dist/cjs/index.js" async defer></script>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/example/index.js b/example/index.js
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable require-jsdoc */
-
 // This is all of the Penumbra-relevant code:
 const onReady = async (
   { detail: { penumbra } } = {

diff --git a/netlify.toml b/netlify.toml
diff --git a/package.json b/package.json
@@ -1,9 +1,17 @@
 {
   "name": "@transcend-io/penumbra",
-  "version": "5.3.2",
+  "version": "6.0.0",
   "description": "Crypto streams for the browser.",
-  "main": "dist/main.penumbra.js",
-  "types": "ts-build/src/index.d.ts",
+  "main": "./dist/node/cjs/index.js",
+  "module": "./dist/node/esm/index.js",
+  "jsdelivr": "./dist/cjs/index.js",
+  "unpkg": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "browser": {
+    "./dist/cjs/index.js": "./dist/cjs/index.js",
+    "./dist/esm/index.js": "./dist/esm/index.js",
+    "stream": "stream-browserify"
+  },
   "directories": {
     "example": "example"
   },
@@ -21,18 +29,21 @@
     "####### Linting #######": "",
     "lint": "yarn pnpify eslint src --ext .ts",
     "####### Start #########": "",
-    "start:example": "yarn build:example && http-server example/build/ --port 8080 -o",
-    "start:demo": "yarn build:demo && http-server demo/build/ --port 8081 -o",
+    "start:example": "yarn build:dist && open http://localhost:8080/example && http-server --port 8080",
+    "start:demo": "yarn build:dist && open http://localhost:8081/demo/cjs.html && http-server --port 8081",
+    "start:demo:esm": "yarn build:dist && open http://localhost:8081/demo/esm.html && http-server --port 8081",
     "####### Testing #######": "",
     "test:interactive": "yarn start:demo",
+    "test:interactive:esm": "yarn start:demo:esm",
     "test:local": "karma start karma.local.js",
     "test:local:rebuild": "yarn && karma start karma.local.js",
     "test:browserstack": "karma start karma.browserstack.js",
     "####### Build #######": "",
     "clean": "rimraf dist && rimraf ts-build && rimraf coverage",
-    "build": "yarn clean && mkdir -p dist && webpack --config webpack.prod.js && tsc",
-    "build:example": "rimraf example/build && yarn build && mkdir -p example/build && cp example/*.* example/build/ && cp -a dist/. example/build/",
-    "build:demo": "rimraf demo/build && yarn build && mkdir -p demo/build && cp demo/*.* demo/build/ && cp -a dist/. demo/build/",
+    "build": "yarn clean && yarn build:dist && yarn build:types",
+    "build:dist": "yarn node build.js",
+    "build:example": "yarn build:dist",
+    "build:types": "tsc --emitDeclarationOnly --declaration --project tsconfig.json",
     "webpack:watch": "yarn clean && webpack --config webpack.dev.js --watch"
   },
   "repository": {
@@ -55,7 +66,6 @@
   },
   "files": [
     "dist/**/*",
-    "ts-build/**/*",
     "src/**/*",
     "tsconfig.json"
   ],
@@ -66,28 +76,28 @@
     "comlink": "^4.3.1",
     "core-js": "^3.22.8",
     "crypto-browserify": "^3.12.0",
-    "mime-types": "^2.1.35",
+    "mime": "^3.0.0",
     "promise.allsettled": "^1.0.5",
     "streamsaver": "^2.0.6",
     "typedarray-to-buffer": "^4.0.0",
-    "web-streams-node": "^0.4.0",
     "web-streams-polyfill": "^3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-typescript": "^7.17.12",
-    "@types/mime-types": "^2.1.1",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@types/mime": "^2.0.3",
     "@types/node": "^17.0.40",
     "@types/tape": "^4.13.2",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "@yarnpkg/pnpify": "^3.1.3",
     "@yarnpkg/sdks": "^2.6.2",
     "babel-loader": "^8.2.5",
-    "buffer": "^6.0.3",
     "depcheck": "^1.4.3",
+    "esbuild": "^0.14.43",
     "eslint": "^8.17.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^2.7.1",

diff --git a/src/@types/worker-loader/index.d.ts b/src/@types/worker-loader/index.d.ts
@@ -1,10 +1,6 @@
 /** Webpack worker-loader type setup */
-declare module 'worker-loader!*' {
+declare module 'web-worker:*' {
   /** Worker */
-  class WebpackWorker extends Worker {
-    /** Webpack's Worker constructor */
-    public constructor();
-  }
-
-  export default WebpackWorker;
+  class PenumbraWebWorker extends Worker {}
+  export default PenumbraWebWorker;
 }
diff --git a/src/API.ts b/src/API.ts
@@ -5,7 +5,7 @@ import {
   RemoteReadableStream,
   RemoteWritableStream,
 } from '@transcend-io/remote-web-streams';
-import mime from 'mime-types';
+import { getExtension } from 'mime';
 import { streamSaver } from './streamsaver';
 import { ReadableStream } from './streams';
 
@@ -178,7 +178,7 @@ function save(
     'stream' in files ? (files as unknown as PenumbraFile) : files[0];
   const [
     filename,
-    extension = file.mimetype ? mime.extension(file.mimetype) : '',
+    extension = file.mimetype ? `.${getExtension(file.mimetype)}` : '',
   ] = (fileName || file.filePrefix || DEFAULT_FILENAME)
     .split(/(\.\w+\s*$)/) // split filename extension
     .filter(Boolean); // filter empty matches

diff --git a/src/settings.ts b/src/settings.ts
@@ -1,5 +1,3 @@
-export const settings = (
-  document.currentScript ||
-  document.querySelector('script[data-penumbra]') ||
-  ({ dataset: {} } as HTMLScriptElement)
-).dataset;
+export const settings =
+  (document.currentScript || document.querySelector('script[data-penumbra]'))
+    ?.dataset || ({} as DOMStringMap);
diff --git a/src/types.ts b/src/types.ts
@@ -291,8 +291,6 @@ export interface WorkerLocation {
   base: URL;
   /** The location of the Penumbra Worker script */
   penumbra: URL;
-  /** The location of the StreamSaver ServiceWorker script */
-  StreamSaver: URL;
 }
 
 /**

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -8,6 +8,5 @@ export { default as getTextFromRS } from './getTextFromRS';
 export { default as toBuff } from './toBuff';
 export { default as blobCache } from './blobCache';
 export { default as isViewableText } from './isViewableText';
-export { default as intoStream } from './intoStream';
 export { default as isNumber } from './isNumber';
 export { default as throwOutside } from './throwOutside';
diff --git a/src/utils/intoStream.ts b/src/utils/intoStream.ts
diff --git a/src/workers.ts b/src/workers.ts
@@ -24,10 +24,9 @@ import { settings } from './settings';
  */
 const DEFAULT_WORKERS = {
   penumbra: 'worker.penumbra.js',
-  StreamSaver: 'streamsaver.penumbra.serviceworker.js',
 };
 
-const SHOULD_LOG_EVENTS = process.env.PENUMBRA_LOG_START === 'true';
+const SHOULD_LOG_EVENTS = process?.env?.PENUMBRA_LOG_START === 'true';
 
 // //// //
 // Init //
@@ -104,14 +103,13 @@ export function getWorkerLocation(): WorkerLocation {
     penumbra: settings.worker || DEFAULT_WORKERS.penumbra,
     ...(typeof config === 'object' ? config : {}),
   };
-  const { base, penumbra, StreamSaver } = options;
+  const { base, penumbra } = options;
 
   const context = resolve(base || scriptUrl);
 
   return {
     base: context,
     penumbra: new URL(penumbra, context),
-    StreamSaver: new URL(StreamSaver, context),
   };
 }
 
@@ -148,8 +146,11 @@ let workerID = 0;
 export async function createPenumbraWorker(
   url: URL | string,
 ): Promise<PenumbraWorker> {
-  const worker = new Worker(url /* , { type: 'module' } */);
   const id = workerID++;
+  const worker = new Worker(url, {
+    // type: 'module', // waiting on Firefox
+    name: `penumbra-worker-${id}`,
+  });
   const penumbraWorker: PenumbraWorker = {
     worker,
     id,
@@ -267,7 +268,6 @@ view.addEventListener('beforeunload', cleanup);
  * penumbra.setWorkerLocation({
  *   base: '/penumbra-workers/',
  *   penumbra: 'worker.penumbra.js',
- *   StreamSaver: 'StreamSaver.js',
  * });
  * // Set a single worker's location
  * penumbra.setWorkerLocation({decrypt: 'penumbra.decrypt.js'});

diff --git a/src/zip.ts b/src/zip.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 import allSettled from 'promise.allsettled';
 import { Writer } from '@transcend-io/conflux';
-import mime from 'mime-types';
+import { getExtension } from 'mime';
 import { streamSaver } from './streamsaver';
 import { PenumbraFile, ZipOptions } from './types';
 import { isNumber, emitZipProgress, emitZipCompletion } from './utils';
@@ -209,7 +209,7 @@ export class PenumbraZipWriter extends EventTarget {
           }
           const [
             filename,
-            extension = mimetype ? mime.extension(mimetype) : '',
+            extension = mimetype ? `.${getExtension(mimetype)}` : '',
           ] = name
             .split(/(\.\w+\s*$)/) // split filename extension
             .filter(Boolean); // filter empty matches