From 4692cc8d9802975c78e6fe0886b37de7811afb4e Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Thu, 11 May 2017 02:26:06 -0700 Subject: [PATCH] Add dynamic polyfills for older browsers (#2985) Fixes #2941 --- app/javascript/mastodon/main.js | 32 ++++++++++++++++++++++++++++ app/javascript/mastodon/polyfills.js | 18 ++++++++++++++++ app/javascript/packs/application.js | 30 ++++++-------------------- package.json | 4 ++++ yarn.lock | 20 +++++++++++------ 5 files changed, 74 insertions(+), 30 deletions(-) create mode 100644 app/javascript/mastodon/main.js create mode 100644 app/javascript/mastodon/polyfills.js diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js new file mode 100644 index 0000000000..31bf1bff2d --- /dev/null +++ b/app/javascript/mastodon/main.js @@ -0,0 +1,32 @@ +require('font-awesome/css/font-awesome.css'); +require('../styles/application.scss'); + +function onDomContentLoaded(callback) { + if (document.readyState !== 'loading') { + callback(); + } else { + document.addEventListener('DOMContentLoaded', callback); + } +} + +function main() { + const Mastodon = require('mastodon/containers/mastodon').default; + const React = require('react'); + const ReactDOM = require('react-dom'); + const Rails = require('rails-ujs'); + window.Perf = require('react-addons-perf'); + + Rails.start(); + + require.context('../images/', true); + require.context('../../assets/stylesheets/', false, /custom.*\.scss$/); + + onDomContentLoaded(() => { + const mountNode = document.getElementById('mastodon'); + const props = JSON.parse(mountNode.getAttribute('data-props')); + + ReactDOM.render(, mountNode); + }); +} + +export default main diff --git a/app/javascript/mastodon/polyfills.js b/app/javascript/mastodon/polyfills.js new file mode 100644 index 0000000000..266a0020cc --- /dev/null +++ b/app/javascript/mastodon/polyfills.js @@ -0,0 +1,18 @@ +import 'intl'; +import 'intl/locale-data/jsonp/en.js'; +import 'es6-symbol/implement'; +import includes from 'array-includes'; +import assign from 'object-assign'; +import isNaN from 'is-nan'; + +if (!Array.prototype.includes) { + includes.shim(); +} + +if (!Object.assign) { + Object.assign = assign; +} + +if (!Number.isNaN) { + Number.isNaN = isNaN; +} diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 367b7e76a9..06f47b6b05 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1,25 +1,9 @@ -import Mastodon from 'mastodon/containers/mastodon'; -import React from 'react'; -import ReactDOM from 'react-dom'; -import Rails from 'rails-ujs'; -import 'font-awesome/css/font-awesome.css'; -import '../styles/application.scss'; +import main from '../mastodon/main'; -if (!window.Intl) { - require('intl'); - require('intl/locale-data/jsonp/en.js'); +if (!window.Intl || !Object.assign || !Number.isNaN || + !window.Symbol || !Array.prototype.includes) { + // load polyfills dynamically + import('../mastodon/polyfills').then(main); +} else { + main(); } - -window.Perf = require('react-addons-perf'); - -Rails.start(); - -require.context('../images/', true); -require.context('../../assets/stylesheets/', false, /custom.*\.scss$/); - -document.addEventListener('DOMContentLoaded', () => { - const mountNode = document.getElementById('mastodon'); - const props = JSON.parse(mountNode.getAttribute('data-props')); - - ReactDOM.render(, mountNode); -}); diff --git a/package.json b/package.json index bfabdfeceb..8fb6557bb8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "url": "https://github.com/tootsuite/mastodon.git" }, "dependencies": { + "array-includes": "^3.0.3", "autoprefixer": "^6.7.7", "axios": "^0.15.3", "babel-cli": "^6.23.0", @@ -47,6 +48,7 @@ "emojione": "^2.2.7", "emojione-picker": "^2.2.1", "es6-promise": "^3.2.1", + "es6-symbol": "^3.1.1", "escape-html": "^1.0.3", "eventsource": "^0.2.1", "express": "^4.14.1", @@ -57,10 +59,12 @@ "http-link-header": "^0.8.0", "immutable": "^3.8.1", "intl": "^1.2.5", + "is-nan": "^1.2.1", "js-yaml": "^3.8.3", "lodash": "^4.17.4", "node-sass": "^4.5.2", "npmlog": "^4.0.2", + "object-assign": "^4.1.1", "path-complete-extname": "^0.1.0", "pg": "^6.1.2", "postcss-loader": "^1.3.3", diff --git a/yarn.lock b/yarn.lock index b38b94cfb4..8f43a47751 100644 --- a/yarn.lock +++ b/yarn.lock @@ -260,12 +260,12 @@ array-flatten@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2" -array-includes@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.2.tgz#7c867b4d1235c2b5687c874f3344bff4e002beba" +array-includes@^3.0.2, array-includes@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d" dependencies: define-properties "^1.1.2" - es-abstract "^1.5.0" + es-abstract "^1.7.0" array-union@^1.0.1: version "1.0.2" @@ -2417,7 +2417,7 @@ error-ex@^1.2.0: dependencies: is-arrayish "^0.2.1" -es-abstract@^1.3.2, es-abstract@^1.4.3, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.7.0: +es-abstract@^1.3.2, es-abstract@^1.4.3, es-abstract@^1.5.1, es-abstract@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.7.0.tgz#dfade774e01bfcd97f96180298c449c8623fb94c" dependencies: @@ -3516,6 +3516,12 @@ is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4: jsonpointer "^4.0.0" xtend "^4.0.0" +is-nan@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.2.1.tgz#9faf65b6fb6db24b7f5c0628475ea71f988401e2" + dependencies: + define-properties "^1.1.1" + is-number@^2.0.2, is-number@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f" @@ -4442,7 +4448,7 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@4.1.0, object-assign@^4.0.1: +object-assign@4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0" @@ -4450,7 +4456,7 @@ object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" -object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"