swapped manual dynamic chunked loader with readt-loadable

client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js

@@ -1,85 +1,11 @@
-import React from 'react';
-import QuestionBox from '../../../components/QuestionBox';
-import { Icon, Spinner } from 'coral-ui';
-import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
-import cn from 'classnames';
-import styles from './QuestionBoxBuilder.css';
+import { Spinner } from 'coral-ui';
+import Loadable from 'react-loadable';
 
-const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
-
-const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
-
-class QuestionBoxBuilder extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      loading: true,
-    };
-  }
-
-  componentWillMount() {
-    this.loadEditor();
-  }
-
-  async loadEditor() {
-    const {
-      default: MarkdownEditor,
-    } = await import(/* webpackChunkName: "markdownEditor" */
-    'coral-framework/components/MarkdownEditor');
-
-    return this.setState({
-      loading: false,
-      MarkdownEditor,
-    });
-  }
-
-  render() {
-    const {
-      questionBoxIcon,
-      questionBoxContent,
-      onContentChange,
-      onIconChange,
-    } = this.props;
-    const { loading, MarkdownEditor } = this.state;
-
-    if (loading) {
-      return <Spinner />;
-    }
-
-    return (
-      <div className={styles.root}>
-        <h4>Include an Icon</h4>
-
-        <ul className={styles.iconList}>
-          {icons.map(item => {
-            const name = typeof item === 'object' ? Object.keys(item)[0] : item;
-            const icon = typeof item === 'object' ? item[name] : item;
-            return (
-              <li className={styles.item} key={name}>
-                <button
-                  className={cn(styles.button, {
-                    [styles.buttonActive]: questionBoxIcon === name,
-                  })}
-                  onClick={() => onIconChange(name)}
-                >
-                  {typeof icon === 'string' ? <Icon name={icon} /> : icon}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-
-        <QuestionBox
-          className={styles.questionBox}
-          icon={questionBoxIcon}
-          content={questionBoxContent}
-        />
-
-        <MarkdownEditor value={questionBoxContent} onChange={onContentChange} />
-      </div>
-    );
-  }
-}
+const QuestionBoxBuilder = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: "questionBoxBuilder" */
+    './loadable/QuestionBoxBuilder'),
+  loading: Spinner,
+});
 
 export default QuestionBoxBuilder;

client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import QuestionBox from '../../../../components/QuestionBox';
+import DefaultQuestionBoxIcon from '../../../../components/DefaultQuestionBoxIcon';
+import cn from 'classnames';
+import styles from './QuestionBoxBuilder.css';
+import { Icon } from 'coral-ui';
+import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
+
+const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
+const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
+
+class QuestionBoxBuilder extends React.Component {
+  render() {
+    const {
+      questionBoxIcon,
+      questionBoxContent,
+      onContentChange,
+      onIconChange,
+    } = this.props;
+
+    return (
+      <div className={styles.root}>
+        <h4>Include an Icon</h4>
+
+        <ul className={styles.iconList}>
+          {icons.map(item => {
+            const name = typeof item === 'object' ? Object.keys(item)[0] : item;
+            const icon = typeof item === 'object' ? item[name] : item;
+            return (
+              <li className={styles.item} key={name}>
+                <button
+                  className={cn(styles.button, {
+                    [styles.buttonActive]: questionBoxIcon === name,
+                  })}
+                  onClick={() => onIconChange(name)}
+                >
+                  {typeof icon === 'string' ? <Icon name={icon} /> : icon}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <QuestionBox
+          className={styles.questionBox}
+          icon={questionBoxIcon}
+          content={questionBoxContent}
+        />
+
+        <MarkdownEditor value={questionBoxContent} onChange={onContentChange} />
+      </div>
+    );
+  }
+}
+
+export default QuestionBoxBuilder;

package.json

@@ -165,6 +165,7 @@
     "react-broadcast": "^0.6.2",
     "react-dom": "^15.4.2",
     "react-input-autosize": "^1.1.4",
+    "react-loadable": "^5.3.1",
     "react-mdl": "^1.11.0",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",

webpack.config.js

@@ -335,7 +335,8 @@ module.exports = [
     {
       output: {
         library: 'Coral',
-        // don't hash the embed.
+        // don't hash the embed, cache-busting must be completed by the requester
+        // as this lives in a static template on the embed site.
         filename: '[name].js',
       },
       plugins: [

yarn.lock

@@ -9217,6 +9217,12 @@ react-linkify@^0.2.1:
     prop-types "^15.5.8"
     tlds "^1.57.0"
 
+react-loadable@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.3.1.tgz#9699e9a08fed49bacd69caaa282034b62a76bcdd"
+  dependencies:
+    prop-types "^15.5.0"
+
 react-mdl-selectfield@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/react-mdl-selectfield/-/react-mdl-selectfield-0.2.0.tgz#36e1a97233036c057ab2bdb31ec09ad8d9988411"