From 59982d4329cfe13d90453363a1238322de31ec9f Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Thu, 22 Mar 2018 17:29:38 -0600 Subject: [PATCH] swapped manual dynamic chunked loader with readt-loadable --- .../components/QuestionBoxBuilder.js | 90 ++----------------- .../{ => loadable}/QuestionBoxBuilder.css | 0 .../components/loadable/QuestionBoxBuilder.js | 56 ++++++++++++ package.json | 1 + webpack.config.js | 3 +- yarn.lock | 6 ++ 6 files changed, 73 insertions(+), 83 deletions(-) rename client/coral-embed-stream/src/tabs/configure/components/{ => loadable}/QuestionBoxBuilder.css (100%) create mode 100644 client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js index ae60770d4..e87e7b321 100644 --- a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js +++ b/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 = ; - -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 ; - } - - return ( -
-

Include an Icon

- -
    - {icons.map(item => { - const name = typeof item === 'object' ? Object.keys(item)[0] : item; - const icon = typeof item === 'object' ? item[name] : item; - return ( -
  • - -
    • - ); - })} -
- - - - -
- ); - } -} +const QuestionBoxBuilder = Loadable({ + loader: () => + import(/* webpackChunkName: "questionBoxBuilder" */ + './loadable/QuestionBoxBuilder'), + loading: Spinner, +}); export default QuestionBoxBuilder; diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css b/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.css similarity index 100% rename from client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css rename to client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.css diff --git a/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js new file mode 100644 index 000000000..837de1280 --- /dev/null +++ b/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 = ; +const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote']; + +class QuestionBoxBuilder extends React.Component { + render() { + const { + questionBoxIcon, + questionBoxContent, + onContentChange, + onIconChange, + } = this.props; + + return ( +
+

Include an Icon

+ +
    + {icons.map(item => { + const name = typeof item === 'object' ? Object.keys(item)[0] : item; + const icon = typeof item === 'object' ? item[name] : item; + return ( +
  • + +
    • + ); + })} +
+ + + + +
+ ); + } +} + +export default QuestionBoxBuilder; diff --git a/package.json b/package.json index a807d3321..a3d5f665e 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.js b/webpack.config.js index 184107491..d6f216d02 100644 --- a/webpack.config.js +++ b/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: [ diff --git a/yarn.lock b/yarn.lock index 342529006..fd501351e 100644 --- a/yarn.lock +++ b/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"