diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..093ea073 --- /dev/null +++ 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 index c9ff1d6b..197864aa 100644 --- 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 index 6dd8b2aa..e79d6469 100644 --- 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,63 +26,65 @@ 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(), @@ -89,13 +92,23 @@ export default { }, 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 index 54345cae..e7d956da 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,7 @@ Festify - + @@ -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; - } -
-

⚡️ Oh, no! Unsupported Browser!

-

- Seems like you're using an unsupported browser. Please use a modern one to use Festify. - Google Chrome, - Firefox - or Safari are really - good choices. Any other browser that is based on one of them (like Opera) is also going - to work well. -

-
+ + + + - - document.getElementsByClassName('no-es6').item(0).style.display = 'block'; - document.getElementById('entry').remove(); - document.getElementById('loader').remove(); - } + + + - - -