Merge pull request #48 from alesgenova/build

Improve the build process

.github/workflows/publish.yaml

@@ -12,7 +12,6 @@ jobs:
         node-version: '12.x'
         registry-url: 'https://registry.npmjs.org'
     - run: npm ci
-    - run: npm run build
     - run: npm publish
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

demo/child.js

@@ -1,8 +1,4 @@
-import {
-  ChildHandshake,
-  WindowMessenger,
-  DebugMessenger,
-} from './post-me.esm.js';
+import { ChildHandshake, WindowMessenger, DebugMessenger } from './post-me.mjs';
 
 const debugNamespace = `post-me:${window.name}`;
 debug.enable(debugNamespace);

demo/parent.js

@@ -3,7 +3,7 @@ import {
   WindowMessenger,
   WorkerMessenger,
   DebugMessenger,
-} from './post-me.esm.js';
+} from './post-me.mjs';
 
 debug.enable(
   'post-me:parent0,post-me:parent1,post-me:parent2,post-me:parent3,post-me:parentW'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "post-me",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Use web Workers and other Windows through a simple Promise API",
   "author": {
     "name": "Alessandro Genova",
@@ -14,17 +14,24 @@
     "url": "https://github.com/alesgenova/post-me/issues",
     "email": "ales.genova@gmail.com"
   },
-  "main": "dist/index.js",
-  "browser": "dist/index.min.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "exports": {
+    "import": "./dist/index.esnext.mjs",
+    "require": "./dist/index.js"
+  },
+  "module": "./dist/index.es5.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "rollup -c && uglifyjs dist/index.js -o dist/index.min.js && tsc --emitDeclarationOnly",
-    "build:demo": "npm run build && node scripts/build-demo.js www",
+    "build": "npm run build:src && npm run build:min && npm run build:types",
+    "build:src": "rollup -c",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:min": "uglifyjs dist/index.js -o dist/index.min.js",
+    "build:demo": "npm run build:src && node scripts/build-demo.js www",
+    "prepublishOnly": "npm run build",
     "demo": "npm run build:demo && npx serve www",
     "deploy:demo": "npm run build:demo && gh-pages -d www",
     "test": "jest --coverage tests",
@@ -79,4 +86,4 @@
     "typescript",
     "postmate"
   ]
-}
+}

rollup.config.js

@@ -1,28 +1,35 @@
 import typescript from '@rollup/plugin-typescript';
-import babel from '@rollup/plugin-babel';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
 
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: 'dist/index.esm.js',
-        format: 'esm'
-      }
-    ],
-    plugins: [typescript({ target: 'esnext', module: 'esnext', declaration: false })]
-  },
-  {
-    input: 'dist/index.esm.js',
-    output: [
-      {
-        name: 'PostMe',
-        file: 'dist/index.js',
-        format: 'umd'
-      }
-    ],
-    plugins: [
-      babel({ presets: ['@babel/preset-env'], babelHelpers: 'inline' }),
-    ]
-  }
-]
+export default {
+  input: 'src/index.ts',
+  output: [
+    // ES Module, straight TS to JS compilation
+    {
+      file: 'dist/index.esnext.mjs',
+      format: 'esm'
+    },
+    // ES Module, transpiled to ES5
+    {
+      file: 'dist/index.es5.mjs',
+      format: 'esm',
+      plugins: [
+        getBabelOutputPlugin({
+          presets: [['@babel/preset-env', { modules: false }]]
+        })
+      ]
+    },
+    // UMD, transpiled to ES5
+    {
+      file: 'dist/index.js',
+      format: 'esm',
+      plugins: [
+        getBabelOutputPlugin({
+          moduleId: 'PostMe',
+          presets: [['@babel/preset-env', { modules: 'umd' }]],
+        })
+      ]
+    }
+  ],
+  plugins: [typescript({ target: 'esnext', module: 'esnext', declaration: false })]
+}

scripts/build-demo.js

@@ -14,6 +14,6 @@ if (fs.existsSync(destination)) {
 
 fs.mkdirSync(destination);
 
-fs.copySync('dist/index.esm.js', `${destination}/post-me.esm.js`);
-fs.copySync('dist/index.min.js', `${destination}/post-me.js`);
+fs.copySync('dist/index.es5.mjs', `${destination}/post-me.mjs`);
+fs.copySync('dist/index.js', `${destination}/post-me.js`);
 fs.copySync('demo', destination);

src/messenger.ts

@@ -68,28 +68,27 @@ interface Postable {
 }
 
 export class BareMessenger implements Messenger {
-  _postable: Postable;
+  postMessage: (message: any, transfer?: Transferable[]) => void;
+  addMessageListener: (listener: MessageListener) => ListenerRemover;
 
   constructor(postable: Postable) {
-    this._postable = postable;
-  }
+    this.postMessage = (message, transfer = []) => {
+      postable.postMessage(message, transfer);
+    };
 
-  postMessage(message: any, transfer: Transferable[] = []) {
-    this._postable.postMessage(message, transfer);
-  }
+    this.addMessageListener = (listener) => {
+      const outerListener = (event: MessageEvent) => {
+        listener(event);
+      };
 
-  addMessageListener(listener: MessageListener): ListenerRemover {
-    const outerListener = (event: MessageEvent) => {
-      listener(event);
-    };
+      postable.addEventListener('message', outerListener);
 
-    this._postable.addEventListener('message', outerListener);
+      const removeListener = () => {
+        postable.removeEventListener('message', outerListener);
+      };
 
-    const removeListener = () => {
-      this._postable.removeEventListener('message', outerListener);
+      return removeListener;
     };
-
-    return removeListener;
   }
 }
 

tests/index.spec.ts

@@ -58,7 +58,6 @@ const childMethods: ChildMethods = {
   throws: () => Promise.reject(new Error('Oh no! - child')),
   ping: (s) => s,
   slowSum: (x, y, onStart, onProgress) => {
-    console.log('ONSTART', onStart);
     onStart(-1);
     return new Promise((resolve) => {
       const nIterations = 5;