Add dynamic polyfills for older browsers (#2985)

Fixes #2941

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(<Mastodon {...props} />, mountNode);
+  });
+}
+
+export default main

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;
+}

app/javascript/packs/application.js

@@ -1,25 +1,9 @@
-import Mastodon from 'mastodon/containers/mastodon';
+import main from '../mastodon/main';
-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';
 
-if (!window.Intl) {
+if (!window.Intl || !Object.assign || !Number.isNaN ||
-  require('intl');
+    !window.Symbol || !Array.prototype.includes) {
-  require('intl/locale-data/jsonp/en.js');
+  // 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(<Mastodon {...props} />, mountNode);
-});

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",

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:
+array-includes@^3.0.2, array-includes@^3.0.3:
-  version "3.0.2"
+  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.2.tgz#7c867b4d1235c2b5687c874f3344bff4e002beba"
+  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"