✨ Compile SystemJS output to ES5

This is currently done less optimally than possible but works alright.

Author: NeoLegends

.babelrc

@@ -1,3 +1,13 @@
 {
-    "sourceType": "module"
+    "presets": [
+        ["env", {
+            "modules": false,
+            "targets": {
+                "browsers": "> 1%, last 2 versions, Firefox ESR, not dead"
+            }
+        }]
+    ],
+    "plugins": [
+        "syntax-dynamic-import"
+    ]
 }

package.json

@@ -32,6 +32,7 @@
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-saga": "^0.16.0",
+    "regenerator-runtime": "^0.11.1",
     "reselect": "^3.0.1",
     "systemjs": "^0.21.3"
   },
@@ -40,11 +41,14 @@
     "@polymer/paper-dialog": "^3.0.0-pre.12",
     "@types/lodash-es": "^4.17.0",
     "@types/spotify-web-playback-sdk": "^0.1.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-preset-env": "^1.7.0",
     "bundlesize": "^0.17.0",
     "connect-history-api-fallback": "^1.5.0",
     "firebase-bolt": "^0.8.2",
     "raven-js": "^3.24.0",
     "rollup": "^0.59.1",
+    "rollup-plugin-babel": "^3.0.4",
     "rollup-plugin-babel-minify": "^5.0.0",
     "rollup-plugin-browsersync": "^0.2.6",
     "rollup-plugin-commonjs": "^9.1.0",
@@ -54,15 +58,17 @@
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-typescript2": "^0.14.0",
+    "rollup-plugin-uglify": "^4.0.0",
     "spotify-web-api-js": "^0.24.0",
     "tslint": "^5.8.0",
     "typescript": "^2.6.2",
-    "typescript-lit-html-plugin": "^0.2.0"
+    "typescript-lit-html-plugin": "^0.2.0",
+    "uglify-js": "^3.3.28"
   },
   "scripts": {
     "build": "NODE_ENV=production rollup -c && npm run copy",
     "check-size": "bundlesize",
-    "copy": "mkdir -p build/node_modules/@webcomponents && cp -R node_modules/systemjs build/node_modules/systemjs && cp -R node_modules/@webcomponents/webcomponentsjs build/node_modules/@webcomponents/webcomponentsjs && cp -R assets/* build && cp src/index.html build",
+    "copy": "mkdir -p build/node_modules/@webcomponents && cp -R node_modules/regenerator-runtime build/node_modules/regenerator-runtime && cp -R node_modules/systemjs build/node_modules/systemjs && cp -R node_modules/@webcomponents/webcomponentsjs build/node_modules/@webcomponents/webcomponentsjs && cp -R assets/* build && cp src/index.html build",
     "fix": "tslint -p tsconfig.json --fix",
     "lint": "tslint -p tsconfig.json",
     "prepare-env": "node prepare-env.js",

rollup.config.js

@@ -1,15 +1,17 @@
+import minifyLit from '@mraerino/rollup-plugin-minifyliterals';
 import historyApi from 'connect-history-api-fallback';
 import * as fs from 'fs';
+import babel from 'rollup-plugin-babel';
 import minify from 'rollup-plugin-babel-minify';
+import browsersync from 'rollup-plugin-browsersync';
 import cjs from 'rollup-plugin-commonjs';
 import copy from 'rollup-plugin-copy';
 import nodeBuiltins from 'rollup-plugin-node-builtins';
 import nodeGlobals from 'rollup-plugin-node-globals';
 import nodeResolve from 'rollup-plugin-node-resolve';
-import typescript from 'rollup-plugin-typescript2';
-import minifyLit from '@mraerino/rollup-plugin-minifyliterals';
-import browsersync from 'rollup-plugin-browsersync';
 import replace from 'rollup-plugin-replace';
+import typescript from 'rollup-plugin-typescript2';
+import { uglify } from 'rollup-plugin-uglify';
 import path from 'path';
 
 const distTarget = './build';
@@ -24,7 +26,7 @@ if (!fs.existsSync('build')) {
     fs.mkdirSync('build');
 }
 
-const plugins = [
+const basePlugins = [
     replace({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
     }),
@@ -58,45 +60,52 @@ const plugins = [
     typescript(),
     cjs(),
     nodeGlobals(), // WARNING: Never move above CommonJS plugin!
-    isProduction ? minifyLit({
+    isProduction && minifyLit({
         include: ['src/entry.ts', 'src/{components,views}/**', 'node_modules/@polymer/{paper,iron}-*/**'],
         includeExtension: ['.ts', '.js'],
         literals: false,
         htmlminifier: {
             minifyCSS: true, // causes some kind of trouble currently
             collapseWhitespace: true
         }
-    }) : null,
-    isProduction ? minify({ comments: false }) : null,
-    !!process.env.ROLLUP_WATCH ? browsersync({
-        port: process.env.PORT || 3000,
-        server: {
-            baseDir: dist(),
-            middleware: [historyApi()]
-        },
-        open: false,
-        ui: false
-    }) : null,
-].filter(plugin => plugin !== null);
+    }),
+];
 
 const baseOptions = {
     input: [src('index.ts'), src('views/view-party.ts'), src('views/view-tv.ts')],
     experimentalDynamicImport: true,
     experimentalCodeSplitting: true,
-    plugins,
     onwarn: err => console.error(err.toString()),
     watch: { include: 'src/**/*' },
 };
 
 export default [{
     ...baseOptions,
+    plugins: [
+        ...basePlugins,
+        // isProduction && minify({ comments: false }),
+        !!process.env.ROLLUP_WATCH && browsersync({
+            port: process.env.PORT || 3000,
+            server: {
+                baseDir: dist(),
+                middleware: [historyApi()]
+            },
+            open: false,
+            ui: false
+        }),
+    ].filter(plugin => plugin),
     output: {
         dir: dist('module'),
         format: 'es',
         sourcemap: true,
     },
 }, {
     ...baseOptions,
+    plugins: [
+        ...basePlugins,
+        babel(),
+        isProduction && uglify(),
+    ].filter(plugin => plugin),
     output: {
         dir: dist('nomodule'),
         format: 'system',

src/index.html

@@ -72,6 +72,15 @@ <h1><span class="flash">⚡️</span> Oh, no! Unsupported Browser!</h1>
 
     <!-- Polyfills -->
     <script class="scripts" src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
+            type="text/javascript"
+            nomodule>
+    </script>
+    <script src="/node_modules/regenerator-runtime/runtime.js"
+            type="text/javascript"
+            class="scripts"
+            nomodule>
+    </script>
 
     <!-- ES6 Module Code -->
     <script src="/module/index.ts.js" type="module" class="scripts"></script>