feat(wasm): Switch to TypeScript & named exports

packages/wasm/README.md

@@ -30,7 +30,7 @@ npm install @rollup/plugin-wasm --save-dev
 Create a `rollup.config.js` [configuration file](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:
 
 ```js
-import wasm from '@rollup/plugin-wasm';
+import { wasm } from '@rollup/plugin-wasm';
 
 export default {
   input: 'src/index.js',
@@ -66,9 +66,9 @@ int main() {
 Compile the file using `emscripten`, or the online [WasmFiddle](https://wasdk.github.io/WasmFiddle//) tool. Then import and instantiate the resulting file:
 
 ```js
-import wasm from './sample.wasm';
+import sample from './sample.wasm';
 
-wasm({ ...imports }).then(({ instance }) => {
+sample({ ...imports }).then(({ instance }) => {
   console.log(instance.exports.main());
 });
 ```
@@ -90,7 +90,7 @@ wasm({
 This means that the exports can be accessed immediately.
 
 ```js
-import module from './sample.wasm';
+import sample from './sample.wasm';
 
 const instance = sample({ ...imports });
 

packages/wasm/package.json

@@ -10,7 +10,7 @@
   "author": "Jamen Marz <jamenmarz+gh@gmail.com>",
   "homepage": "https://github.com/rollup/plugins/tree/master/packages/wasm/#readme",
   "bugs": "https://github.com/rollup/plugins/issues",
-  "main": "dist/index",
+  "main": "dist/index.js",
   "scripts": {
     "build": "rollup -c",
     "ci:coverage": "nyc pnpm run test && nyc report --reporter=text-lcov > coverage.lcov",
@@ -29,6 +29,7 @@
   },
   "files": [
     "dist",
+    "types",
     "README.md",
     "LICENSE"
   ],
@@ -46,6 +47,7 @@
     "rollup": "^1.20.0||^2.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^4.1.1",
     "del-cli": "^3.0.0",
     "rollup": "^2.0.0",
     "source-map": "^0.7.3"
@@ -61,5 +63,7 @@
   "contributors": [
     "Jamen Marz <jamenmarz+gh@gmail.com>",
     "Colin Eberhardt <colin.eberhardt@gmail.com>"
-  ]
+  ],
+  "module": "dist/index.es.js",
+  "types": "types/index.d.ts"
 }

packages/wasm/rollup.config.js

@@ -1,13 +1,9 @@
-const { builtinModules } = require('module');
+import typescript from '@rollup/plugin-typescript';
+import { createConfig } from '../../shared/rollup.config';
 
-const pkg = require('./package.json');
+import pkg from './package.json';
 
-const dependencies = Object.keys(pkg.dependencies || {});
-
-export default [
-  {
-    input: 'src/index.js',
-    output: { exports: 'named', file: 'dist/index.js', format: 'cjs' },
-    external: [...builtinModules, ...dependencies]
-  }
-];
+export default {
+  ...createConfig(pkg),
+  plugins: [typescript()],
+}

packages/wasm/src/index.js → packages/wasm/src/index.ts

@@ -1,9 +1,11 @@
 import { readFile } from 'fs';
 import { resolve } from 'path';
 
-export default function wasm(options = {}) {
-  options = Object.assign({}, options); // eslint-disable-line no-param-reassign
+import { Plugin } from 'rollup';
 
+import { RollupWasmOptions } from '../types';
+
+export function wasm(options: RollupWasmOptions = {}): Plugin {
   const syncFiles = (options.sync || []).map((x) => resolve(x));
 
   return {
@@ -49,13 +51,15 @@ export default function wasm(options = {}) {
       }
     `.trim(),
 
-    // eslint-disable-next-line consistent-return
     transform(code, id) {
       if (code && /\.wasm$/.test(id)) {
         const src = Buffer.from(code, 'binary').toString('base64');
         const sync = syncFiles.indexOf(id) !== -1;
         return `export default function(imports){return _loadWasmModule(${+sync}, '${src}', imports)}`;
       }
+      return null;
     }
   };
 }
+
+export default wasm;

packages/wasm/test/test.js

@@ -1,19 +1,14 @@
 import { rollup } from 'rollup';
 import test from 'ava';
 
-// eslint-disable-next-line no-unused-vars, import/no-unresolved, import/extensions
-import wasm from '../dist/index';
+import { getCode } from '../../../util/test';
 
-const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
+import wasm from '../';
 
-const generateCode = async (bundle) => {
-  const { output } = await bundle.generate({ format: 'cjs' });
-  const [{ code }] = output;
-  return code;
-};
+const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
 
 const testBundle = async (t, bundle) => {
-  const code = await generateCode(bundle);
+  const code = await getCode(bundle);
   const func = new AsyncFunction('t', `let result;\n\n${code}\n\nreturn result;`);
   return func(t);
 };
@@ -75,7 +70,7 @@ try {
       input: 'test/fixtures/worker.js',
       plugins: [wasm()]
     });
-    const code = await generateCode(bundle);
+    const code = await getCode(bundle);
     const executeWorker = () => {
       const worker = new Worker(code, { eval: true });
       return new Promise((resolve, reject) => {

packages/wasm/types/index.d.ts

@@ -0,0 +1,14 @@
+import { Plugin } from 'rollup';
+
+export interface RollupWasmOptions {
+  /**
+   * Specifies an array of strings that each represent a WebAssembly file to load synchronously.
+   */
+  sync?: readonly string[];
+}
+
+/**
+ * 🍣 A Rollup which allows importing and bundling [WebAssembly modules](http://webassembly.org).
+ */
+export function wasm(options?: RollupWasmOptions): Plugin;
+export default wasm;

shared/rollup.config.js

@@ -0,0 +1,25 @@
+import { builtinModules } from 'module';
+
+/**
+ * Create a base rollup config
+ * @param {*} pkg Imported package.json
+ * @returns {import('rollup').RollupOptions}
+ */
+export function createConfig(pkg) {
+  return {
+    input: 'src/index.ts',
+    external: Object.keys(pkg.dependencies || {}).concat(builtinModules),
+    output: [
+      {
+        format: 'cjs',
+        file: pkg.main,
+        exports: 'named',
+        footer: 'module.exports = Object.assign(exports.default, exports);'
+      },
+      {
+        format: 'esm',
+        file: pkg.module
+      }
+    ]
+  };
+}

util/test.d.ts

@@ -3,8 +3,8 @@ import { RollupBuild, OutputOptions, OutputChunk, OutputAsset } from 'rollup';
 import { Assertions } from 'ava';
 
 interface GetCode {
-  (bundle: RollupBuild, outputOptions: OutputOptions, allFiles?: false): Promise<string>;
-  (bundle: RollupBuild, outputOptions: OutputOptions, allFiles: true): Promise<
+  (bundle: RollupBuild, outputOptions?: OutputOptions | null, allFiles?: false): Promise<string>;
+  (bundle: RollupBuild, outputOptions: OutputOptions | null | undefined, allFiles: true): Promise<
     Array<{
       code: OutputChunk['code'] | undefined;
       fileName: OutputChunk['fileName'] | OutputAsset['fileName'];

util/test.js

@@ -1,6 +1,6 @@
 /**
  * @param {import('rollup').RollupBuild} bundle
- * @param {import('rollup').OutputOptions} outputOptions
+ * @param {import('rollup').OutputOptions} [outputOptions]
  */
 const getCode = async (bundle, outputOptions, allFiles = false) => {
   const { output } = await bundle.generate(outputOptions || { format: 'cjs' });