Merge pull request #15 from vegarringdal/build-script

chore: more modules in build

Author: kyr0

README.md

@@ -7,7 +7,7 @@ At the time of the creation of this readme, the API `customElements.define(...)`
 
 - [Codesandbox](https://codesandbox.io/s/custom-elements-hmr-polyfill-4vd3o)
 
-## How to install?
+## How to install it?
 
 - `npm install custom-elements-hmr-polyfill`
 
@@ -99,15 +99,35 @@ Polyfills for these API's must be applied *before* you apply this polyfill.
 
 None. This polyfill is 100% web standard compliant. 
 
-The previously existing limitation of `observedAttributes` being immutable has been polyfilled using a `MutationObserver` lately. 
-
 For reference see: [W3C/WhatWG standard limitation of Web Component re-definition](https://github.com/w3c/webcomponents/issues/829).
 
+### Distribution formats
+
+The bundled npm package contains the following formats:
+- IIFE (`.iife.js`)
+- AMD (`.amd.js`)
+- Common JS (`.cjs.js`)
+- ES Module (`.mjs`)
+- SystemJS (`.system.js`)
+- UMD (`.umd.js`)
+
+You can find single file outputs in `dist/custom-elements-hmr-polyfill.*`, i.e. `dist/custom-elements-hmr-polyfill.iife.js`.
+
+Furthermore, multiple file outputs are available in `dist/*/**/*.js`. i.e. `dist/AMD/**/*.js`.
+- `AMD`
+- `CommonJS`
+- `ES6`
+- `ES2015`
+- `ESNext`
+- `System`
+- `UMD`
+
 ## Advanced: How to start the sample code (of this repo)?
 
 - `npm run bootstrap`
 - `npm start`
 
-## How to build a dist version of this polyfill?
+## How to transpile and bundle this polyfill on your own?
 
+- `npm run bootstrap`
 - `npm build`

fuse.js

@@ -1,5 +1,5 @@
 const { fusebox, sparky } = require('fuse-box');
-const { pluginTypeChecker } = require('fuse-box-typechecker');
+const { pluginTypeChecker, TypeChecker } = require('fuse-box-typechecker');
 
 class Context {
     getConfig() {
@@ -37,3 +37,38 @@ task('default', async ctx => {
     const fuse = ctx.getConfig();
     await fuse.runDev();
 });
+
+const build = (target) => {
+    const checker = require('fuse-box-typechecker').TypeChecker({
+        tsConfigOverride: {
+            compilerOptions: {
+                outDir: `./dist/${target}`,
+                rootDir: `./src/package`,
+                target: 'es2018',
+                module: target,
+                lib: ['es2017', 'dom'],
+                emitDecoratorMetadata: true,
+                sourceMap: true,
+                declaration: true,
+                importHelpers: true,
+                experimentalDecorators: true
+            },
+            exclude: ['dist', 'node_modules', 'src/sample']
+        },
+        basePath: `./`,
+        name: `Building ${target}`
+    });
+
+    checker.printSettings();
+    let result = checker.inspectOnly();
+    checker.printOnly(result);
+    
+    console.log(`  -> Emitting js`);
+    const x = result.oldProgram.emit();
+};
+
+task('build', async ctx => {
+    ['CommonJS', 'AMD', 'System', 'UMD', 'ES6', 'ES2015', 'ESNext'].forEach(target => {
+        build(target);
+    });
+});