Remove codesplitting

reactjs · Apr 18, 2018 · e63b05b · e63b05b
1 parent e252aae
commit e63b05b
Showing 1 changed file with 16 additions and 37 deletions.
diff --git a/examples/src/components/ExampleItem.js b/examples/src/components/ExampleItem.js
@@ -1,27 +1,16 @@
 import React, { Component } from 'react';
 import T from 'prop-types';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; // eslint-disable-line
+import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live';
 import classNames from 'classnames';
 
-let ReactLive;
-
 const scope = { Tabs, Tab, TabList, TabPanel };
 
 export default class ExampleItem extends Component {
   state = {
     editorOpen: false,
-    liveLoaded: false,
   };
 
-  constructor(props) {
-    super(props);
-
-    import('react-live').then(Live => {
-      ReactLive = Live;
-      this.setState({ liveLoaded: true });
-    });
-  }
-
   toggleCheckbox({ target: { name, checked } }) {
     this.setState({
       [name]: checked,
@@ -40,34 +29,11 @@ export default class ExampleItem extends Component {
     return <div className="hint">{this.props.hint}</div>;
   }
 
-  renderLiveEditor() {
-    if (!this.state.liveLoaded) return null;
-
+  render() {
     const { editorOpen } = this.state;
     const editorClassNames = classNames('live-editor', {
       'live-editor--visible': editorOpen,
     });
-
-    return (
-      <ReactLive.LiveProvider
-        mountStylesheet={false}
-        scope={scope}
-        code={this.props.code}
-        noInline
-      >
-        <ReactLive.LiveError />
-        <div className="live-preview">
-          <div className={editorClassNames}>
-            <ReactLive.LiveEditor ignoreTabKey />
-          </div>
-          <ReactLive.LivePreview />
-        </div>
-      </ReactLive.LiveProvider>
-    );
-  }
-
-  render() {
-    const { editorOpen } = this.state;
     const formId = `editorOpen${this.props.label.replace(' ', '_')}`;
 
     return (
@@ -86,7 +52,20 @@ export default class ExampleItem extends Component {
           </label>
         </h3>
         {this.renderHint()}
-        {this.renderLiveEditor()}
+        <LiveProvider
+          mountStylesheet={false}
+          scope={scope}
+          code={this.props.code}
+          noInline
+        >
+          <LiveError />
+          <div className="live-preview">
+            <div className={editorClassNames}>
+              <LiveEditor ignoreTabKey />
+            </div>
+            <LivePreview />
+          </div>
+        </LiveProvider>
       </div>
     );
   }