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.

diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js
index cc422c10991596386b821a2febbbeb2049951a00..a7fc22a00fbef4689dae7be8d91b8d4906d894b1 100644 (file)
--- 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(<Mastodon {...props} />, 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 7b8ab5e5d8593d992ed7aeeff27a96d7a5029859..6705377c10ed8b7844f49adc2f02505448dff798 100644 (file)
--- 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 63c5d62720f25d916c02b95811f2d6661e9c0e71..116632dea704a860b7c3881e203f189f5f4612ac 100644 (file)
--- 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 371e0f4453341a5adee1220bb4c97b658eaed5d8..ce79836d6615a87e43310810b01eac9bec74ab99 100644 (file)
--- 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 main() {
+  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;
 
-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);
+  const { localeData } = getLocale();
+  localeData.forEach(IntlRelativeFormat.__addLocaleData);
 
-  [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
-    content.innerHTML = emojify(content.innerHTML);
-  });
+  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('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('.emojify'), (content) => {
+      content.innerHTML = emojify(content.innerHTML);
+    });
 
-  [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
-    const datetime = new Date(content.getAttribute('datetime'));
-    content.textContent = relativeFormat.format(datetime);;
-  });
-}
+    [].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;
+    });
 
-function main() {
-  ready(loaded);
+    [].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) {