Festify · NeoLegends · Apr 18, 2018 · May 3, 2018 · May 3, 2018 · May 7, 2018
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,13 @@
+{
+    "presets": [
+        ["env", {
+            "modules": false,
+            "targets": {
+                "browsers": "> 1%, last 2 versions, Firefox ESR, not dead"
+            }
+        }]
+    ],
+    "plugins": [
+        "syntax-dynamic-import"
+    ]
+}
diff --git a/package.json b/package.json
@@ -32,13 +32,17 @@
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-saga": "^0.16.0",
-    "reselect": "^3.0.1"
+    "regenerator-runtime": "^0.11.1",
+    "reselect": "^3.0.1",
+    "systemjs": "^0.21.3"
   },
   "devDependencies": {
     "@mraerino/rollup-plugin-minifyliterals": "^1.2.0",
     "@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",
@@ -49,28 +53,30 @@
     "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-copy": "^0.2.3",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.1.0",
+    "rollup-plugin-node-globals": "^1.2.1",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-typescript2": "^0.15.0",
-    "rollup-plugin-visualizer": "^0.8.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",
+    "build": "NODE_ENV=production rollup -c && npm run copy",
     "check-size": "bundlesize",
+    "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",
-    "serve": "rollup -c --watch"
+    "serve": "npm run copy && rollup -c --watch"
   },
   "bundlesize": [
     {
-      "path": "build/index.js",
-      "maxSize": "250 kb"
+      "path": "build/module/entry.ts.js",
+      "maxSize": "60 kb"
     }
   ]
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,16 +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 nodeGlobals from 'rollup-plugin-node-globals';
 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 visualizer from 'rollup-plugin-visualizer';
+import typescript from 'rollup-plugin-typescript2';
+import { uglify } from 'rollup-plugin-uglify';
 import path from 'path';
 
 const distTarget = './build';
@@ -25,77 +26,89 @@ if (!fs.existsSync('build')) {
     fs.mkdirSync('build');
 }
 
-export default {
-    input: src('index.ts'),
-    output: {
-        file: dist('index.js'),
-        format: 'iife',
-        sourcemap: true,
-    },
-    plugins: [
-        replace({
-            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-        }),
-        nodeBuiltins(),
-        nodeResolve({
-            module: true,
-            jsnext: true,
-            browser: true,
-            customResolveOptions: {
-                packageFilter: pkg => {
-                    if (pkg['module']) {
-                        pkg['main'] = pkg['module'];
-                    } else if (pkg['jsnext:main']) {
-                        pkg['main'] = pkg['jsnext:main'];
-                    }
+const basePlugins = [
+    replace({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    }),
+    nodeBuiltins(),
+    nodeResolve({
+        module: true,
+        jsnext: true,
+        browser: true,
+        customResolveOptions: {
+            packageFilter: pkg => {
+                if (pkg['module']) {
+                    pkg['main'] = pkg['module'];
+                } else if (pkg['jsnext:main']) {
+                    pkg['main'] = pkg['jsnext:main'];
+                }
 
-                    const fixedPackages = [
-                        '@firebase/app',
-                        '@firebase/database',
-                        '@firebase/functions',
-                        '@firebase/util',
-                    ];
-                    if (fixedPackages.indexOf(pkg.name) !== -1) {
-                        pkg['browser'] = pkg.module;
-                    }
+                const fixedPackages = [
+                    '@firebase/app',
+                    '@firebase/database',
+                    '@firebase/functions',
+                    '@firebase/util',
+                ];
+                if (fixedPackages.indexOf(pkg.name) !== -1) {
+                    pkg['browser'] = pkg.module;
+                }
 
-                    return pkg;
-                },
+                return pkg;
             },
-        }),
-        typescript(),
-        copy({
-            'node_modules/@webcomponents/webcomponentsjs': dist('node_modules/@webcomponents/webcomponentsjs'),
-            'assets': dist(''),
-            [src('index.html')]: dist('index.html'),
-        }),
-        cjs(),
-        nodeGlobals(),
-        isProduction ? minifyLit({
-            include: ['src/app.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({
+        },
+    }),
+    typescript(),
+    cjs(),
+    nodeGlobals(), // WARNING: Never move above CommonJS plugin!
+    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
+        }
+    }),
+];
+
+const baseOptions = {
+    input: [src('index.ts'), src('views/view-party.ts'), src('views/view-tv.ts')],
+    experimentalDynamicImport: true,
+    experimentalCodeSplitting: true,
+    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
-        }) : null,
-        visualizer({
-            filename: 'build/stats.html',
         }),
-    ].filter(plugin => plugin !== null),
-    onwarn: err => console.error(err.toString()),
-    watch: {
-        include: 'src/**/*'
-    }
-};
+    ].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',
+        sourcemap: true,
+    },
+}];
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
     <title>Festify</title>
     <meta name="description" content="Use this site to join a Festify Party and vote for tracks in the queue.">
 
-    <link rel="preload" as="script" href="/index.js">
+    <!-- <link rel="preload" as="script" href="/module/index.ts.js"> -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@@ -27,53 +27,35 @@
             margin: 0;
             min-height: 100vh;
         }
-
-        .no-es6 {
-            color: white;
-            display: none;
-            margin: auto;
-            max-width: 700px;
-            text-align: center;
-        }
-
-        .no-es6 .flash {
-            color: yellow;
-        }
-
-        .no-es6 a {
-            color: white;
-        }
     </style>
 </head>
 <body>
     <app-shell></app-shell>
 
-    <div class="no-es6">
-        <h1><span class="flash">⚡️</span> Oh, no! Unsupported Browser!</h1>
-        <p>
-            Seems like you're using an unsupported browser. Please use a modern one to use Festify.
-            <a href="https://www.google.com/chrome/" alt="Download Google Chrome">Google Chrome</a>,
-            <a href="https://www.mozilla.org/firefox/" alt="Download Mozilla Firefox">Firefox</a>
-            or <a href="https://www.apple.com/safari/" alt="Download Safari">Safari</a> are really
-            good choices. Any other browser that is based on one of them (like Opera) is also going
-            to work well.
-        </p>
-    </div>
+    <!-- Polyfills -->
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
+            type="text/javascript">
+    </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"
+            nomodule>
+    </script>
 
-    <script>
-        try {
-            eval('"use strict"; class ES6CompatTestClass {}; const test = () => {}; function* iterator() { yield 1; }');
-        } catch (e) {
-            console.error("Your browser doesn't support ES6 classes, ES6 generators or arrow functions (or all of them). Please upgrade to a modern one.");
+    <!-- ES6 Module Code -->
+    <script src="/module/index.ts.js" type="module"></script>
 
-            document.getElementsByClassName('no-es6').item(0).style.display = 'block';
-            document.getElementById('entry').remove();
-            document.getElementById('loader').remove();
-        }
+    <!-- SystemJS Module Code -->
+    <script src="/node_modules/systemjs/dist/system-production.js"
+            type="text/javascript"
+            nomodule>
+    </script>
+    <script type="text/javascript" nomodule>
+        System.import('/nomodule/index.ts.js');
     </script>
-
-    <script id="loader" src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script id="entry" src="/index.js"></script>
 
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/src/index.ts b/src/index.ts
@@ -1,14 +1,16 @@
 // tslint:disable:ordered-imports
 
-// tslint:disable-next-line:no-reference
+/* tslint:disable-next-line:no-reference */
 /// <reference path="../node_modules/@types/spotify-web-playback-sdk/index.d.ts"/>
-
 declare global {
     interface Window {
         ShadyCSS?: {
             nativeCss: boolean;
             nativeShadow: boolean;
         };
+        WebComponents: {
+            ready?: boolean;
+        };
     }
 }
 

diff --git a/src/sagas/index.ts b/src/sagas/index.ts
@@ -7,6 +7,7 @@ import partyDataSaga from './party-data';
 import toastSaga from './toast';
 import searchSaga from './view-party-search';
 
+import viewAppShellSaga from './view-app-shell';
 import viewHomeSaga from './view-home';
 import viewQueueSaga from './view-party-queue';
 import viewSettingsSaga from './view-party-settings';
@@ -22,6 +23,7 @@ export default [
     searchSaga,
     toastSaga,
 
+    viewAppShellSaga,
     viewHomeSaga,
     viewQueueSaga,
     viewSettingsSaga,

diff --git a/src/sagas/view-app-shell.ts b/src/sagas/view-app-shell.ts
@@ -0,0 +1,33 @@
+import { goBack, Location, LOCATION_CHANGED } from '@mraerino/redux-little-router-reactless';
+import { put, takeEvery } from 'redux-saga/effects';
+
+import { showToast } from '../actions';
+import { Views } from '../routing';
+
+let prevView: Views;
+function* lazyLoadViews(ac: Location) {
+    if (!ac.payload.result) {
+        return;
+    }
+
+    const view: Views = ac.payload.result.view;
+    if (view === Views.Home || view === prevView) {
+        return;
+    }
+
+    prevView = view;
+    try {
+        if (view === Views.Party) {
+            yield import('../views/view-party');
+        } else {
+            yield import('../views/view-tv');
+        }
+    } catch (err) {
+        yield put(showToast(`Failed to load ${view === Views.Party ? 'queue' : 'TV mode'}. Please try again.`));
+        yield put(goBack());
+    }
+}
+
+export default function*() {
+    yield takeEvery(LOCATION_CHANGED, lazyLoadViews);
+}