feat(wasm): Switch to TypeScript & named exports

BREAKING CHANGES: Named exports are used for CJS
rollup · May 1, 2020 · eb596bf · eb596bf
1 parent 96e0900
commit eb596bf
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 94 deletions.
diff --git a/packages/wasm/README.md b/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 });
 

diff --git a/packages/wasm/package.json b/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",
@@ -46,6 +46,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 +62,7 @@
   "contributors": [
     "Jamen Marz <jamenmarz+gh@gmail.com>",
     "Colin Eberhardt <colin.eberhardt@gmail.com>"
-  ]
+  ],
+  "module": "dist/index.es.js",
+  "types": "types/index.d.ts"
 }
diff --git a/packages/wasm/rollup.config.js b/packages/wasm/rollup.config.js
@@ -1,13 +1,15 @@
-const { builtinModules } = require('module');
+import typescript from '@rollup/plugin-typescript';
 
-const pkg = require('./package.json');
-
-const dependencies = Object.keys(pkg.dependencies || {});
+import pkg from './package.json';
 
 export default [
   {
-    input: 'src/index.js',
-    output: { exports: 'named', file: 'dist/index.js', format: 'cjs' },
-    external: [...builtinModules, ...dependencies]
+    input: 'src/index.ts',
+    plugins: [typescript()],
+    external: ['fs', 'path'],
+    output: [
+      { format: 'cjs', file: pkg.main, exports: 'named' },
+      { format: 'esm', file: pkg.module }
+    ]
   }
 ];
diff --git a/packages/wasm/src/index.js b/packages/wasm/src/index.js
diff --git a/packages/wasm/test/test.js b/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) => {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/util/test.d.ts b/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'];

diff --git a/util/test.js b/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' });