From 6358af5d04ee27076b58a8b61465439049bb7971 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Fri, 20 Sep 2019 23:17:52 -0700 Subject: [PATCH] feat: add legacy build (#1502) * feat: add legacy build * service worker should also be in ES5 * fixup --- CONTRIBUTING.md | 6 + bin/build-inline-script.js | 8 +- package.json | 7 +- src/routes/_actions/timeline.js | 2 + src/routes/_api/timelines.js | 1 + src/routes/_components/NavShortcuts.html | 3 + src/routes/_components/SvgIcon.html | 11 +- src/routes/_components/SvgIconLegacy.html | 36 + .../dialog/components/MediaAltEditor.html | 34 +- src/routes/_store/store.js | 4 +- src/routes/_utils/asyncPolyfills.js | 4 + src/routes/_utils/loadPolyfills.js | 4 +- webpack/client.config.js | 32 +- webpack/legacyBabel.config.js | 34 + webpack/server.config.js | 6 +- webpack/service-worker.config.js | 7 + webpack/shared.config.js | 33 +- yarn.lock | 725 +++++++++++++++++- 18 files changed, 889 insertions(+), 68 deletions(-) create mode 100644 src/routes/_components/SvgIconLegacy.html create mode 100644 webpack/legacyBabel.config.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 794bf6da..35a748ab 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -137,6 +137,12 @@ updating the `fixtures/` should make that a no-op. There are also some unit tests that run in Node using Mocha. You can find them in `tests/unit` and run them using `yarn run test-unit`. +## Legacy build + +Pinafore also offers a "legacy" build designed for older browsers. To build this version, use: + + LEGACY=1 yarn build + ## Debugging Webpack The Webpack Bundle Analyzer `report.html` and `stats.json` are available publicly via e.g.: diff --git a/bin/build-inline-script.js b/bin/build-inline-script.js index 42270eb8..2e30051a 100644 --- a/bin/build-inline-script.js +++ b/bin/build-inline-script.js @@ -6,6 +6,7 @@ import { rollup } from 'rollup' import { terser } from 'rollup-plugin-terser' import replace from 'rollup-plugin-replace' import fromPairs from 'lodash-es/fromPairs' +import babel from 'rollup-plugin-babel' import { themes } from '../src/routes/_static/themes' const writeFile = promisify(fs.writeFile) @@ -22,9 +23,14 @@ export async function buildInlineScript () { 'process.browser': true, 'process.env.THEME_COLORS': JSON.stringify(themeColors) }), + process.env.LEGACY && babel({ + runtimeHelpers: true, + presets: ['@babel/preset-env'] + }), terser({ mangle: true, - compress: true + compress: true, + ecma: 8 }) ] }) diff --git a/package.json b/package.json index 02b82187..29ca7b0f 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,10 @@ "build-now-json": "node -r esm ./bin/build-now-json.js" }, "dependencies": { - "@babel/core": "^7.5.5", + "@babel/core": "^7.6.0", + "@babel/plugin-transform-runtime": "^7.6.0", + "@babel/preset-env": "^7.6.0", + "@babel/runtime": "^7.6.0", "@webcomponents/custom-elements": "^1.2.4", "babel-loader": "^8.0.6", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", @@ -71,6 +74,7 @@ "glob": "^7.1.4", "indexeddb-getall-shim": "^1.3.5", "intersection-observer": "^0.7.0", + "intl": "^1.2.5", "localstorage-memory": "^1.0.3", "lodash-es": "^4.17.15", "lodash-webpack-plugin": "^0.11.5", @@ -88,6 +92,7 @@ "remount": "^0.11.0", "requestidlecallback": "^0.3.0", "rollup": "^1.19.4", + "rollup-plugin-babel": "^4.3.3", "rollup-plugin-replace": "^2.2.0", "rollup-plugin-terser": "^5.1.1", "sapper": "nolanlawson/sapper#for-pinafore-14", diff --git a/src/routes/_actions/timeline.js b/src/routes/_actions/timeline.js index 298d5bb3..b849ce8e 100644 --- a/src/routes/_actions/timeline.js +++ b/src/routes/_actions/timeline.js @@ -81,6 +81,7 @@ export async function addTimelineItemSummaries (instanceName, timelineName, newS } async function fetchTimelineItemsAndPossiblyFallBack () { + console.log('fetchTimelineItemsAndPossiblyFallBack') mark('fetchTimelineItemsAndPossiblyFallBack') const { currentTimeline, @@ -96,6 +97,7 @@ async function fetchTimelineItemsAndPossiblyFallBack () { } export async function setupTimeline () { + console.log('setupTimeline') mark('setupTimeline') // If we don't have any item summaries, or if the current item summaries are stale // (i.e. via offline mode), then we need to re-fetch diff --git a/src/routes/_api/timelines.js b/src/routes/_api/timelines.js index ba06c950..93afc038 100644 --- a/src/routes/_api/timelines.js +++ b/src/routes/_api/timelines.js @@ -68,6 +68,7 @@ export async function getTimeline (instanceName, accessToken, timeline, maxId, s url += '?' + paramsString(params) + console.log('fetching url', url) const items = await get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT }) if (timeline === 'direct') { diff --git a/src/routes/_components/NavShortcuts.html b/src/routes/_components/NavShortcuts.html index 167dbd72..a3b8c359 100644 --- a/src/routes/_components/NavShortcuts.html +++ b/src/routes/_components/NavShortcuts.html @@ -24,6 +24,9 @@ Shortcut }, methods: { + oncreate () { + console.log('nav shortcuts') + }, goto, async showShortcutHelpDialog () { const showShortcutHelpDialog = await importShowShortcutHelpDialog() diff --git a/src/routes/_components/SvgIcon.html b/src/routes/_components/SvgIcon.html index 1e08d933..07492c36 100644 --- a/src/routes/_components/SvgIcon.html +++ b/src/routes/_components/SvgIcon.html @@ -18,19 +18,14 @@ }), store: () => store, computed: { - inline: ({ href }) => { - // filled in during build - return process.env.INLINE_SVGS.includes(href) - } + inline: ({ href }) => process.env.INLINE_SVGS.includes(href) }, methods: { animate (animation) { const { reduceMotion } = this.store.get() - if (!animation || reduceMotion) { - return + if (animation && !reduceMotion) { + animate(this.refs.svg, animation) } - const svg = this.refs.svg - animate(svg, animation) } } } diff --git a/src/routes/_components/SvgIconLegacy.html b/src/routes/_components/SvgIconLegacy.html new file mode 100644 index 00000000..c086edc0 --- /dev/null +++ b/src/routes/_components/SvgIconLegacy.html @@ -0,0 +1,36 @@ + + + {@html html} + + diff --git a/src/routes/_components/dialog/components/MediaAltEditor.html b/src/routes/_components/dialog/components/MediaAltEditor.html index e1d1d564..ed35ebb7 100644 --- a/src/routes/_components/dialog/components/MediaAltEditor.html +++ b/src/routes/_components/dialog/components/MediaAltEditor.html @@ -20,21 +20,24 @@ max={mediaAltCharLimit} style="width: 100%; text-align: right;" /> - + - {extractButtonText} - - + {/if}