docs(Examples): use React Source Render

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -9,10 +9,10 @@ import { examplePathToHash, getFormattedHash, repoURL, scrollToAnchor } from 'do
 import CarbonAdNative from 'docs/src/components/CarbonAd/CarbonAdNative'
 
 import ComponentControls from '../ComponentControls'
-import ComponentExampleRenderExample from './ComponentExampleRenderExample'
+import ComponentExampleRenderEditor from './ComponentExampleRenderEditor'
 import ComponentExampleRenderHtml from './ComponentExampleRenderHtml'
+import ComponentExampleRenderSource from './ComponentExampleRenderSource'
 import ComponentExampleTitle from './ComponentExampleTitle'
-import renderExampleSourceCode from './renderExampleSourceCode'
 
 const childrenStyle = {
   paddingTop: 0,
@@ -55,18 +55,11 @@ class ComponentExample extends PureComponent {
     const { examplePath } = this.props
     this.anchorName = examplePathToHash(examplePath)
 
-    const sourceCode = this.getOriginalSourceCode()
-
-    const { error, exampleElement, htmlMarkup } = renderExampleSourceCode(examplePath, sourceCode)
-
     this.setState({
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
       showCode: this.isActiveHash(),
-      error,
-      htmlMarkup,
-      exampleElement,
-      sourceCode,
+      sourceCode: this.getOriginalSourceCode(),
     })
   }
 
@@ -110,14 +103,6 @@ class ComponentExample extends PureComponent {
     scrollToAnchor()
   }
 
-  removeHash = () => {
-    const { history, location } = this.props
-
-    history.replace(location.pathname)
-
-    this.clearActiveState()
-  }
-
   handleDirectLinkClick = () => {
     this.setHashAndScroll()
     copyToClipboard(window && window.location.href)
@@ -187,25 +172,17 @@ class ComponentExample extends PureComponent {
   }
 
   handleChangeCode = _.debounce((sourceCode) => {
-    const { examplePath } = this.props
-    const { error, htmlMarkup, exampleElement } = renderExampleSourceCode(examplePath, sourceCode)
-
-    const newState = { error, sourceCode }
+    this.setState({ sourceCode })
+  }, 30)
 
-    // preserve the last good render if there is an error
-    if (!error) {
-      newState.htmlMarkup = htmlMarkup
-      newState.exampleElement = exampleElement
-    }
+  handleRenderError = error => this.setState({ error })
 
-    this.setState(newState)
-  }, 30)
+  handleRenderSuccess = (error, { markup }) => this.setState({ error, htmlMarkup: markup })
 
   render() {
     const { children, description, examplePath, suiVersion, title } = this.props
     const {
       error,
-      exampleElement,
       handleMouseLeave,
       handleMouseMove,
       htmlMarkup,
@@ -276,12 +253,17 @@ class ComponentExample extends PureComponent {
               className={`rendered-example ${this.getKebabExamplePath()}`}
               style={renderedExampleStyle}
             >
-              {exampleElement}
+              <ComponentExampleRenderSource
+                examplePath={examplePath}
+                onError={this.handleRenderError}
+                onSuccess={this.handleRenderSuccess}
+                sourceCode={sourceCode}
+              />
             </Grid.Column>
             {(showCode || showHTML) && (
               <Grid.Column width={16} style={editorStyle}>
                 {showCode && (
-                  <ComponentExampleRenderExample
+                  <ComponentExampleRenderEditor
                     editorId={`${this.getKebabExamplePath()}-jsx`}
                     githubEditHref={this.getGithubEditHref()}
                     originalValue={this.getOriginalSourceCode()}

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderExample.js → docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderEditor.js

@@ -29,7 +29,7 @@ const menuStyle = {
 
 const disabledStyle = { opacity: 0.5, pointerEvents: 'none' }
 
-class ComponentExampleRenderExample extends PureComponent {
+class ComponentExampleRenderEditor extends PureComponent {
   state = {}
 
   static propTypes = {
@@ -137,12 +137,12 @@ class ComponentExampleRenderExample extends PureComponent {
         <Editor id={editorId} value={value} onChange={onChange} />
         {error && (
           <Segment color='red' basic secondary inverted style={errorStyle}>
-            {error}
+            {error.toString()}
           </Segment>
         )}
       </div>
     )
   }
 }
 
-export default updateForKeys(['value'])(ComponentExampleRenderExample)
+export default updateForKeys(['value'])(ComponentExampleRenderEditor)

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js

@@ -0,0 +1,64 @@
+import faker from 'faker'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React from 'react'
+import SourceRender from 'react-source-render'
+import * as SUIR from 'semantic-ui-react'
+
+import { updateForKeys } from 'docs/src/hoc'
+
+const babelConfig = {
+  presets: [
+    [
+      'env',
+      {
+        targets: {
+          browsers: ['last 4 versions', 'not dead'],
+        },
+      },
+    ],
+    ['stage-1', { decoratorsLegacy: true }],
+  ],
+}
+
+//     if (module === 'COMMON') {
+//       const componentPath = examplePath
+//         .split(__PATH_SEP__)
+//         .splice(0, 2)
+//         .join(__PATH_SEP__)
+//       COMMON = require(`docs/src/examples/${componentPath}/common`)
+//     } else if (module === 'WIREFRAME') {
+//       WIREFRAME = require('docs/src/examples/behaviors/Visibility/Wireframe').default
+
+const externals = {
+  faker,
+  lodash: _,
+  react: React,
+  'semantic-ui-react': SUIR,
+}
+
+const resolver = (importPath, { examplePath }) => {
+  if (externals[importPath]) return externals[importPath]
+
+  throw new Error('UNHANDLED IMPORT')
+}
+
+const ComponentExampleRenderSource = ({ examplePath, onError, onSuccess, sourceCode }) => (
+  <SourceRender
+    babelConfig={babelConfig}
+    examplePath={examplePath}
+    onError={onError}
+    onSuccess={onSuccess}
+    resolver={resolver}
+    source={sourceCode}
+  />
+)
+
+ComponentExampleRenderSource.propTypes = {
+  examplePath: PropTypes.string.isRequired,
+  onError: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
+  sourceCode: PropTypes.string.isRequired,
+}
+
+export default updateForKeys(['sourceCode'])(ComponentExampleRenderSource)

package.json

@@ -139,6 +139,7 @@
     "react-hot-loader": "^4.3.3",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "react-source-render": "^1.1.0",
     "react-static": "^5.9.7",
     "react-static-routes": "^1.0.0",
     "react-test-renderer": "^16.0.0",

yarn.lock

@@ -3755,6 +3755,10 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
+deepmerge@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.1.tgz#e862b4e45ea0555072bf51e7fd0d9845170ae768"
+
 default-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
@@ -5031,6 +5035,10 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
+fast-memoize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
+
 fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
@@ -9274,7 +9282,7 @@ promisify-call@^2.0.2:
   dependencies:
     with-callback "^1.0.2"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -9636,6 +9644,15 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-source-render@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-1.1.0.tgz#2512701be38f834c0cf8d75516cc909f27a56e99"
+  dependencies:
+    deepmerge "^2.1.1"
+    fast-deep-equal "^2.0.1"
+    fast-memoize "^2.5.1"
+    prop-types "^15.6.2"
+
 react-static-routes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-static-routes/-/react-static-routes-1.0.0.tgz#73882f1569498d7ce5b4b1d4057ff642b1eea40c"