From 0ec77c5b3ee78ea499eb4c118eea35703bb7e5b1 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Thu, 11 May 2017 02:26:06 -0700 Subject: 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 | 32 ++++++++------------------------ 3 files changed, 58 insertions(+), 24 deletions(-) create mode 100644 app/javascript/mastodon/main.js create mode 100644 app/javascript/mastodon/polyfills.js (limited to 'app') 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(, 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(, mountNode); -}); -- cgit