Add dynamic polyfills for older browsers (#2985)

Fixes #2941

3 files changed, 58 insertions, 24 deletions

diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js
new file mode 100644
index 000000000..31bf1bff2
--- /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(<Mastodon {...props} />, mountNode);
+  });
+}
+
+export default main
diff --git a/app/javascript/mastodon/polyfills.js b/app/javascript/mastodon/polyfills.js
new file mode 100644
index 000000000..266a0020c
--- /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 367b7e76a..06f47b6b0 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';
-
-if (!window.Intl) {
-  require('intl');
-  require('intl/locale-data/jsonp/en.js');
+import main from '../mastodon/main';
+
+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(<Mastodon {...props} />, mountNode);
-});