From b11ac88692ad7a8765b0b15e6d7a882d171ffe81 Mon Sep 17 00:00:00 2001 From: Akihiko Odaki Date: Tue, 18 Jul 2017 07:19:02 +0900 Subject: [PATCH] Require any modules after loading polyfill in entry points (#4231) app/javascript/mastodon/main.js delayed the execution of modules, but other entry points didn't. That leads to failure in executing modules, which requires those polyfills. Strictly enforce the rule to require any modules after loading polyfill in entry points. --- app/javascript/mastodon/main.js | 11 ++--- app/javascript/packs/about.js | 8 +-- app/javascript/packs/application.js | 5 +- app/javascript/packs/public.js | 75 ++++++++++++++--------------- 4 files changed, 49 insertions(+), 50 deletions(-) diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js index cc422c10991..a7fc22a00fb 100644 --- a/app/javascript/mastodon/main.js +++ b/app/javascript/mastodon/main.js @@ -1,12 +1,14 @@ +import * as OfflinePluginRuntime from 'offline-plugin/runtime'; +import * as WebPushSubscription from './web_push_subscription'; +import Mastodon from 'mastodon/containers/mastodon'; +import React from 'react'; +import ReactDOM from 'react-dom'; import ready from './ready'; const perf = require('./performance'); function main() { perf.start('main()'); - const Mastodon = require('mastodon/containers/mastodon').default; - const React = require('react'); - const ReactDOM = require('react-dom'); if (window.history && history.replaceState) { const { pathname, search, hash } = window.location; @@ -23,9 +25,6 @@ function main() { ReactDOM.render(, mountNode); if (process.env.NODE_ENV === 'production') { // avoid offline in dev mode because it's harder to debug - const OfflinePluginRuntime = require('offline-plugin/runtime'); - const WebPushSubscription = require('./web_push_subscription'); - OfflinePluginRuntime.install(); WebPushSubscription.register(); } diff --git a/app/javascript/packs/about.js b/app/javascript/packs/about.js index 7b8ab5e5d85..6705377c10e 100644 --- a/app/javascript/packs/about.js +++ b/app/javascript/packs/about.js @@ -1,12 +1,11 @@ -import TimelineContainer from '../mastodon/containers/timeline_container'; -import React from 'react'; -import ReactDOM from 'react-dom'; import loadPolyfills from '../mastodon/load_polyfills'; -import ready from '../mastodon/ready'; require.context('../images/', true); function loaded() { + const TimelineContainer = require('../mastodon/containers/timeline_container').default; + const React = require('react'); + const ReactDOM = require('react-dom'); const mountNode = document.getElementById('mastodon-timeline'); if (mountNode !== null) { @@ -16,6 +15,7 @@ function loaded() { } function main() { + const ready = require('../mastodon/ready').default; ready(loaded); } diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 63c5d62720f..116632dea70 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1,6 +1,7 @@ -import main from '../mastodon/main'; import loadPolyfills from '../mastodon/load_polyfills'; -loadPolyfills().then(main).catch(e => { +loadPolyfills().then(() => { + require('../mastodon/main').default(); +}).catch(e => { console.error(e); }); diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 371e0f44533..ce79836d661 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -1,44 +1,43 @@ -import { length } from 'stringz'; -import IntlRelativeFormat from 'intl-relativeformat'; -import { delegate } from 'rails-ujs'; -import emojify from '../mastodon/emoji'; -import { getLocale } from '../mastodon/locales'; import loadPolyfills from '../mastodon/load_polyfills'; -import ready from '../mastodon/ready'; - -const { localeData } = getLocale(); -localeData.forEach(IntlRelativeFormat.__addLocaleData); - -function loaded() { - const locale = document.documentElement.lang; - const dateTimeFormat = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - }); - const relativeFormat = new IntlRelativeFormat(locale); - - [].forEach.call(document.querySelectorAll('.emojify'), (content) => { - content.innerHTML = emojify(content.innerHTML); - }); - - [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { - const datetime = new Date(content.getAttribute('datetime')); - const formattedDate = dateTimeFormat.format(datetime); - content.title = formattedDate; - content.textContent = formattedDate; - }); - - [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { - const datetime = new Date(content.getAttribute('datetime')); - content.textContent = relativeFormat.format(datetime);; - }); -} function main() { - ready(loaded); + const { length } = require('stringz'); + const IntlRelativeFormat = require('intl-relativeformat').default; + const { delegate } = require('rails-ujs'); + const emojify = require('../mastodon/emoji').default; + const { getLocale } = require('../mastodon/locales'); + const ready = require('../mastodon/ready').default; + + const { localeData } = getLocale(); + localeData.forEach(IntlRelativeFormat.__addLocaleData); + + ready(() => { + const locale = document.documentElement.lang; + const dateTimeFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }); + const relativeFormat = new IntlRelativeFormat(locale); + + [].forEach.call(document.querySelectorAll('.emojify'), (content) => { + content.innerHTML = emojify(content.innerHTML); + }); + + [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + const formattedDate = dateTimeFormat.format(datetime); + content.title = formattedDate; + content.textContent = formattedDate; + }); + + [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + content.textContent = relativeFormat.format(datetime);; + }); + }); delegate(document, '.video-player video', 'click', ({ target }) => { if (target.paused) {