Merge pull request #13 from jonluca/feat/only-changes

Create web version of build for vite & rollup

Author: pimterry

.gitignore

@@ -106,4 +106,5 @@ dist
 # Rust:
 /target
 /pkg
-/pkg.*/
+/pkg.*/
+.idea/

README.md

@@ -16,15 +16,17 @@ This is battle-tested, in production use in both node & browsers as part of [HTT
 npm install brotli-wasm
 ```
 
-You should be able to import this directly into Node, as normal, or into a browser using any bundler that supports ES modules & webassembly (e.g. Webpack v4 or v5).
+You should be able to import this directly into Node, as normal, or in a browser using any bundler that supports ES modules & webassembly (e.g. Webpack v4 or v5, Vite, Rollup, and most others).
 
-The browser build supports both sync (v4 or v5 syncWebAssembly mode) and async (v5 asyncWebAssembly) builds. When imported in a browser build the module always exports a _promise_, not a fixed value, as this is a requirement for synchronous builds, and you will need to `await` this after import.
+For each target (node.js, commonjs bundlers & ESM bundlers) this module exports a different WASM file & setup, with a slightly different entrypoint. These entrypoints all expose a consistent default-export API, in addition to some other exports that may vary (e.g. Node exposes the brotli methods synchronously, while browsers always require an `await` due to WASM limitations).
 
-In both builds, the module exposes two methods:
+In all builds (after waiting for the exported promise in browsers) the module exposes two core methods:
 
 * `compress(Buffer, [options])` - compresses a buffer using Brotli, returning the compressed buffer. An optional options object can be provided. The only currently supported option is `quality`: a number between 1 and 11.
 * `decompress(Buffer)` - decompresses a buffer using Brotli, returning the original raw data.
 
+### Usage
+
 In node.js:
 
 ```javascript
@@ -39,7 +41,7 @@ console.log(Buffer.from(decompressedData).toString('utf8')); // Prints 'some inp
 In browsers:
 
 ```javascript
-import * as brotliPromise from 'brotli-wasm';
+import brotliPromise from 'brotli-wasm'; // Import the default export
 
 const brotli = await brotliPromise; // Import is async in browsers due to wasm requirements!
 
@@ -49,9 +51,9 @@ const decompressedData = brotli.decompress(compressedData);
 console.log(Buffer.from(decompressedData).toString('utf8')); // Prints 'some input'
 ```
 
-You'll need a [browser Buffer polyfill](https://www.npmjs.com/package/browserify-zlib) for the above, or you can do the same using TextEncoder/Decoder instead if you prefer.
+The package itself has no runtime dependencies, but you will need a [browser Buffer polyfill](https://www.npmjs.com/package/browserify-zlib) for the above example code, or you can do the same using TextEncoder/Decoder instead if you prefer.
 
-If you want to support node & browsers with the same code, you can use the latter `await` form here everywhere (since awaiting the fixed value in node just returns the value as-is).
+If you want to support node & browsers with the same code, you can use the `await` form with the default export everywhere.
 
 ## Alternatives
 

build.js

@@ -19,4 +19,10 @@ shell.rm('pkg.bundler/{LICENSE,package.json,README.md,.gitignore}');
 shell.rm('-rf', 'pkg');
 shell.exec('wasm-pack build --target nodejs');
 shell.mv('pkg', 'pkg.node');
-shell.rm('pkg.node/{LICENSE,package.json,README.md,.gitignore}');
+shell.rm('pkg.node/{LICENSE,package.json,README.md,.gitignore}');
+
+// Create the web output
+shell.rm('-rf', 'pkg');
+shell.exec('wasm-pack build --target web');
+shell.mv('pkg', 'pkg.web');
+shell.rm('pkg.web/{LICENSE,package.json,README.md,.gitignore}');

index.browser.js

@@ -3,5 +3,10 @@
 // allow synchronous import of WebAssembly from an entrypoint.
 module.exports = import("./pkg.bundler/brotli_wasm.js");
 
-// We don't want to do this for _all_ usage, because dynamic import isn't
-// supported in older node versions.
+// In addition, we provide a default export with the same value, for compatibility
+// with the pure ESM web bundle:
+module.exports.default = module.exports;
+
+// Without this, ts-loader gets annoyed by imports for the pure type. Clear ts-loader bug,
+// but this is a quick & easy fix on our end:
+module.exports.BrotliWasmType = undefined;

index.d.ts

@@ -0,0 +1,9 @@
+import * as BrotliWasm from './pkg.node/brotli_wasm';
+
+// Re-export the core API - although this will only work OOTB for node usage.
+export * from './pkg.node/brotli_wasm';
+
+declare const promisedValue: Promise<typeof BrotliWasm>;
+export default promisedValue;
+
+export type BrotliWasmType = typeof BrotliWasm;

index.node.js

@@ -0,0 +1,6 @@
+// In Node, everything is conveniently available synchronously.
+const nodePkg = require('./pkg.node/brotli_wasm');
+module.exports = nodePkg;
+
+// In addition though, we provide a default export, to match the pure ESM web bundle:
+module.exports.default = Promise.resolve(nodePkg);

index.web.js

@@ -0,0 +1,5 @@
+// In pure ESM web bundles, you must call init() and wait for the promised result before you can
+// call any module methods. To make that as easy as possible, this module directly exposes the
+// init() promise result, and returns the methods at the end of the promise.
+import init, * as brotliWasm from "./pkg.web/brotli_wasm";
+export default init().then(() => brotliWasm);

karma-esm.conf.js

@@ -0,0 +1,33 @@
+// Karma-vite breaks Karma in Node <14, and browser tests don't depend on Node versions, so
+// we just skip the tests in those environments.
+const nodeMajorVersion = parseInt(process.versions.node.split('.'));
+if (nodeMajorVersion <= 14) {
+    console.log('Skipping browser tests in old node version');
+    process.exit(0);
+}
+
+module.exports = function(config) {
+    config.set({
+        frameworks: ['mocha', 'chai', 'vite'],
+        files: [
+            {
+              pattern: 'test/**/*.spec.ts',
+              type: 'module',
+              watched: false,
+              served: false,
+            }
+        ],
+        mime: {
+            'text/x-typescript': ['ts']
+        },
+        reporters: ['spec'],
+        port: 9876,
+        logLevel: config.LOG_INFO,
+
+        browsers: ['ChromeHeadless'],
+
+        autoWatch: false,
+        singleRun: true,
+        concurrency: Infinity
+    });
+};

karma.conf.js renamed to karma-webpack.conf.js

@@ -1,8 +1,14 @@
+// Karma-vite breaks Karma in Node <14, and browser tests don't depend on Node versions, so
+// we just skip the tests in those environments.
+const nodeMajorVersion = parseInt(process.versions.node.split('.'));
+if (nodeMajorVersion <= 14) {
+    console.log('Skipping browser tests in old node version');
+    process.exit(0);
+}
+
 const tmp = require('tmp');
 tmp.setGracefulCleanup();
 
-const webpack = require('webpack');
-
 const outputDir = tmp.dirSync({ unsafeCleanup: true }).name;
 
 module.exports = function(config) {
@@ -38,17 +44,12 @@ module.exports = function(config) {
             resolve: {
                 extensions: ['.ts', '.js'],
                 fallback: {
-                    buffer: require.resolve('buffer/')
+                    crypto: false
                 }
             },
             experiments: {
                 asyncWebAssembly: true
             },
-            plugins: [
-                new webpack.ProvidePlugin({
-                    Buffer: ['buffer', 'Buffer'],
-                })
-            ],
             output: {
                 path: outputDir
             }

package.json

@@ -2,22 +2,36 @@
   "name": "brotli-wasm",
   "version": "1.2.0",
   "description": "A reliable compressor and decompressor for Brotli, supporting node & browsers via wasm",
-  "main": "./pkg.node/brotli_wasm.js",
-  "types": "./pkg.node/brotli_wasm.d.ts",
+  "types": "./index.d.ts",
+  "main": "./index.node.js",
   "browser": "./index.browser.js",
+  "exports": {
+    ".": {
+      "import": "./index.web.js",
+      "browser": "./index.browser.js",
+      "require": "./index.node.js",
+      "default": "./index.web.js"
+    }
+  },
   "sideEffects": false,
   "files": [
     "pkg.node",
     "pkg.bundler",
-    "index.browser.js"
+    "pkg.web",
+    "index.node.js",
+    "index.browser.js",
+    "index.web.js",
+    "index.d.ts"
   ],
   "scripts": {
     "build": "node ./build.js",
     "pretest": "npm run build",
-    "test": "npm run test:node && npm run test:browser",
-    "test:node": "TS_NODE_FILES=true mocha -r ts-node/register 'test/**/*.spec.ts'",
-    "test:browser": "karma start",
-    "test:browser:debug": "npm run test:browser -- --single-run=false --browsers Chrome"
+    "test": "npm run test:node && npm run test:esm && npm run test:webpack",
+    "test:node": "ts-mocha -p test/tsconfig.json 'test/**/*.spec.ts'",
+    "test:webpack": "karma start ./karma-webpack.conf.js",
+    "test:esm": "karma start ./karma-esm.conf.js",
+    "test:webpack:debug": "npm run test:webpack -- --single-run=false --browsers Chrome",
+    "test:esm:debug": "npm run test:esm -- --single-run=false --browsers Chrome"
   },
   "repository": {
     "type": "git",
@@ -36,9 +50,15 @@
   },
   "homepage": "https://github.com/httptoolkit/brotli-wasm#readme",
   "devDependencies": {
+    "@peculiar/webcrypto": "^1.4.0",
+    "@types/atob": "^2.1.2",
+    "@types/btoa": "^1.2.3",
     "@types/chai": "^4.2.18",
     "@types/mocha": "^8.2.2",
     "@types/node": "^15.6.0",
+    "@types/text-encoding": "0.0.36",
+    "atob": "^2.1.2",
+    "btoa": "^1.2.1",
     "buffer": "^6.0.3",
     "chai": "^4.3.4",
     "karma": "^6.3.2",
@@ -48,13 +68,16 @@
     "karma-sourcemap-loader": "^0.3.8",
     "karma-spec-reporter": "0.0.32",
     "karma-typescript": "^5.5.1",
+    "karma-vite": "^1.0.1",
     "karma-webpack": "^5.0.0",
     "mocha": "^8.4.0",
     "shelljs": "^0.8.4",
+    "text-encoding": "^0.7.0",
     "ts-loader": "^9.2.1",
+    "ts-mocha": "^10.0.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.4",
-    "wasm-pack": "^0.9.1",
+    "wasm-pack": "^0.10.3",
     "webpack": "^5.37.1"
   }
 }