Merge pull request #5 from Teamwork/feat-cleanup

Clean up bundle

README.md

@@ -10,7 +10,7 @@ Public components to enhance your interaction with Teamwork
 
 ```html
 <!-- You can also use https://cdn.teamwork.com/public/{tag}/login-button.js for a specific version -->
-<script src="https://cdn.teamwork.com/public/latest/login-button.js"></script>
+<script type="module" src="https://cdn.teamwork.com/public/latest/login-button.js"></script>
 <teamwork-login-button
   redirectURI="https://www.myapp.com/"
   clientID="myClientID"

package.json

@@ -55,11 +55,13 @@
     "karma-chai": "^0.1.0",
     "karma-mocha": "^1.3.0",
     "lit-analyzer": "^1.1.9",
+    "magic-string": "^0.25.7",
     "mocha": "^7.1.1",
     "prettier": "^2.0.4",
     "rimraf": "^3.0.2",
     "rollup": "^1.32.1",
     "rollup-plugin-filesize": "^7.0.0",
+    "rollup-plugin-minify-html-literals": "^1.2.5",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^5.3.0",
     "web-component-analyzer": "^1.0.3"

rollup.config.js

@@ -16,6 +16,8 @@ import filesize from 'rollup-plugin-filesize';
 import { terser } from 'rollup-plugin-terser';
 import resolve from 'rollup-plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
+import minifyHTML from 'rollup-plugin-minify-html-literals';
+import cleanLicenses from './utils/rollup-clean-licenses';
 
 export default {
   input: 'src/login-button.js',
@@ -32,6 +34,7 @@ export default {
   plugins: [
     replace({ 'Reflect.decorate': 'undefined' }),
     resolve(),
+    minifyHTML(),
     terser({
       module: true,
       warnings: true,
@@ -41,6 +44,7 @@ export default {
         },
       },
     }),
+    cleanLicenses(),
     filesize({
       showBrotliSize: true,
     }),

utils/rollup-clean-licenses.js

@@ -0,0 +1,34 @@
+import MagicString from 'magic-string';
+/**
+ * Rollup plugin that removes all license banners of source files.
+ * This is necessary to avoid having the license comment repeated in the output.
+ */
+let polymerLicense = null;
+
+export default function () {
+  return {
+    name: 'clean-licenses',
+    transform(code) {
+      const newContent = new MagicString(code);
+      const regex = new RegExp(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm);
+      [...code.matchAll(regex)].forEach((match) => {
+        if (match[0].indexOf('http://polymer.github.io/LICENSE.txt') > -1) {
+          if (!polymerLicense) [polymerLicense] = match;
+          newContent.overwrite(match.index, match.index + match[0].length, '\n\n');
+        }
+      });
+      return {
+        code: newContent.toString(),
+        map: newContent.generateMap({ hires: true }),
+      };
+    },
+    renderChunk(code) {
+      const newContent = new MagicString(code);
+      if (polymerLicense) newContent.prependLeft(0, polymerLicense);
+      return {
+        code: newContent.toString(),
+        map: newContent.generateMap({ hires: true }),
+      };
+    },
+  };
+}