From f096bfc04eae1d34a1629924cfcaf04af57d3674 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Tue, 13 Nov 2018 17:47:33 +0100
Subject: [PATCH 01/10] chore(Editor): fix editor

---
 .../ComponentExample/ComponentExample.tsx     | 152 ++++++++----------
 docs/src/index.ejs                            |   2 +
 package.json                                  |   2 +
 yarn.lock                                     |  27 +++-
 4 files changed, 93 insertions(+), 90 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index dbf0a29314..6a19b7cf49 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -2,14 +2,14 @@ import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router'
-import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import * as copyToClipboard from 'copy-to-clipboard'
+import SourceRender from 'react-source-render'
 import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
 import { Provider, themes } from '@stardust-ui/react'
+import * as Stardust from '@stardust-ui/react'
 
 import { examplePathToHash, getFormattedHash, knobsContext, scrollToAnchor } from 'docs/src/utils'
-import evalTypeScript from 'docs/src/utils/evalTypeScript'
 import { callable, doesNodeContainClick, pxToRem, constants } from 'src/lib'
 import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
 import ComponentControls from '../ComponentControls'
@@ -31,7 +31,6 @@ interface ComponentExampleState {
   knobs: Object
   themeName: string
   componentVariables: Object
-  exampleElement?: JSX.Element
   handleMouseLeave?: () => void
   handleMouseMove?: () => void
   sourceCode: string
@@ -56,6 +55,14 @@ const codeTypeApiButtonLabels: { [key in SourceCodeType]: string } = {
   shorthand: 'Shorthand API',
 }
 
+const imports = {
+  lodash: _,
+  react: React,
+  '@stardust-ui/react': Stardust,
+}
+
+const importResolver = importName => imports[importName]
+
 /**
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the the raw `code` code block.
@@ -101,16 +108,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const { examplePath } = this.props
     this.sourceCodeMgr = new SourceCodeManager(examplePath)
     this.anchorName = examplePathToHash(examplePath)
-    const exampleElement = this.renderExampleFromCode(this.sourceCodeMgr.currentCode)
 
     this.setState({
-      exampleElement,
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
       showCode: this.isActiveHash(),
       showHTML: false,
       sourceCode: this.sourceCodeMgr.currentCode,
-      markup: renderToStaticMarkup(exampleElement),
     })
   }
 
@@ -125,7 +129,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     }
     const { themeName } = nextProps
     if (this.state.themeName !== themeName) {
-      this.setState({ themeName }, this.renderSourceCode)
+      this.setState({ themeName })
     }
   }
 
@@ -220,9 +224,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
     const { showRtl } = this.state
 
-    this.setState({ showRtl: !showRtl }, () => {
-      this.renderSourceCode()
-    })
+    this.setState({ showRtl: !showRtl })
   }
 
   private handleShowCodeClick = e => {
@@ -264,7 +266,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private resetJSX = () => {
     if (this.sourceCodeMgr.originalCodeHasChanged && confirm('Lose your changes?')) {
       this.sourceCodeMgr.resetToOriginalCode()
-      this.updateAndRenderSourceCode()
     }
   }
 
@@ -278,15 +279,43 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
   private hasKnobs = () => _.includes(knobsContext.keys(), this.getKnobsFilename())
 
-  private setErrorDebounced = _.debounce(error => {
-    this.setState({ error })
-  }, 800)
+  private renderExampleFromCode = (): JSX.Element => {
+    const { sourceCode } = this.state
+
+    console.log('TEST', {
+      sourceCode,
+    })
 
-  private renderExampleFromCode = (code: string): JSX.Element => {
-    const Example = code != null ? evalTypeScript(code) : this.renderMissingExample()
-    return _.isFunction(Example) ? this.renderWithProvider(Example) : Example
+    if (sourceCode == null) {
+      return this.renderMissingExample()
+    }
+
+    const { showRtl, componentVariables, themeName } = this.state
+    const theme = themes[themeName]
+
+    const newTheme: ThemeInput = {
+      componentVariables: mergeThemeVariables(theme.componentVariables, {
+        [this.getDisplayName()]: componentVariables,
+      }),
+      rtl: showRtl,
+    }
+
+    return (
+      <Provider theme={newTheme}>
+        <SourceRender
+          knobs={this.getKnobsValue()}
+          onError={this.onError}
+          onSuccess={this.onSuccess}
+          source={sourceCode}
+          resolver={importResolver}
+        />
+      </Provider>
+    )
   }
 
+  private onSuccess = (e, { markup }) => this.setState({ markup, error: null })
+  private onError = error => this.setState({ error: error.toString() })
+
   private renderMissingExample = (): JSX.Element => {
     const missingExamplePath = `./docs/src/examples/${this.sourceCodeMgr.currentPath}.tsx`
     return (
@@ -297,40 +326,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     )
   }
 
-  private renderSourceCode = _.debounce(() => {
-    try {
-      const exampleElement = this.renderExampleFromCode(this.state.sourceCode)
-
-      if (!React.isValidElement(exampleElement)) {
-        this.setErrorDebounced(
-          `Default export is not a valid React element. Check the example syntax.`,
-        )
-      } else {
-        // immediately render a null error
-        // but also ensure the last debounced error call is a null error
-        const error = undefined
-        this.setErrorDebounced(error)
-        this.setState({
-          error,
-          exampleElement,
-          markup: renderToStaticMarkup(exampleElement),
-        })
-      }
-    } catch (err) {
-      this.setErrorDebounced(err.message)
-    }
-  }, 250)
-
   private handleKnobChange = knobs => {
-    this.setState(
-      prevState => ({
-        knobs: {
-          ...prevState.knobs,
-          ...knobs,
-        },
-      }),
-      this.renderSourceCode,
-    )
+    this.setState(prevState => ({
+      knobs: {
+        ...prevState.knobs,
+        ...knobs,
+      },
+    }))
   }
 
   private getKnobsComponent = () => {
@@ -357,36 +359,12 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
   private getDisplayName = () => this.props.examplePath.split('/')[1]
 
-  private renderWithProvider(ExampleComponent) {
-    const { showRtl, componentVariables, themeName } = this.state
-    const theme = themes[themeName]
-
-    const newTheme: ThemeInput = {
-      componentVariables: mergeThemeVariables(theme.componentVariables, {
-        [this.getDisplayName()]: componentVariables,
-      }),
-      rtl: showRtl,
-    }
-
-    return (
-      <Provider theme={newTheme}>
-        <ExampleComponent knobs={this.getKnobsValue()} />
-      </Provider>
-    )
-  }
-
   private handleChangeCode = (sourceCode: string) => {
-    this.sourceCodeMgr.currentCode = sourceCode
-    this.updateAndRenderSourceCode()
-  }
-
-  private updateAndRenderSourceCode = () => {
-    this.setState({ sourceCode: this.sourceCodeMgr.currentCode }, this.renderSourceCode)
+    this.setState({ sourceCode })
   }
 
   private setApiCodeType = (codeType: SourceCodeType) => {
-    this.sourceCodeMgr.codeType = codeType
-    this.updateAndRenderSourceCode()
+    // TODO:
   }
 
   private renderApiCodeMenu = (): JSX.Element => {
@@ -395,8 +373,8 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
     const menuItems = [SourceCodeType.shorthand, SourceCodeType.normal].map(codeType => {
       // we disable the menu button for Children API in case we don't have the example for it
-      const disabled =
-        codeType === SourceCodeType.normal && !this.sourceCodeMgr.isCodeValidForType(codeType)
+      const disabled = true
+      codeType === SourceCodeType.normal && !this.sourceCodeMgr.isCodeValidForType(codeType)
 
       return {
         active: this.sourceCodeMgr.codeType === codeType,
@@ -596,15 +574,12 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   private handleVariableChange = (component, variable) => (e, { value }) => {
-    this.setState(
-      state => ({
-        componentVariables: {
-          ...state.componentVariables,
-          [variable]: value,
-        },
-      }),
-      this.renderSourceCode,
-    )
+    this.setState(state => ({
+      componentVariables: {
+        ...state.componentVariables,
+        [variable]: value,
+      },
+    }))
   }
 
   public render() {
@@ -612,7 +587,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const {
       handleMouseLeave,
       handleMouseMove,
-      exampleElement,
       isHovering,
       showCode,
       showHTML,
@@ -706,7 +680,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                     }),
                   }}
                 >
-                  {exampleElement}
+                  {this.renderExampleFromCode()}
                 </Grid.Column>
               )
             }}
diff --git a/docs/src/index.ejs b/docs/src/index.ejs
index e5f209d11f..7e19b48165 100644
--- a/docs/src/index.ejs
+++ b/docs/src/index.ejs
@@ -33,6 +33,8 @@
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/umd/react<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom-server.browser<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.1.0/babel.min.js"></script>
   <style>
     html, body {
       background: #f7f7f7;
diff --git a/package.json b/package.json
index dddb11701e..96cf469e26 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "what-input": "^5.1.2"
   },
   "devDependencies": {
+    "@babel/standalone": "7.1.0",
     "@types/classnames": "^2.2.4",
     "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
@@ -150,6 +151,7 @@
     "react-hot-loader": "^4.1.3",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
+    "react-source-render": "^1.2.0",
     "react-test-renderer": "^16.0.0",
     "recast": "^0.15.1",
     "rimraf": "^2.6.1",
diff --git a/yarn.lock b/yarn.lock
index 27980d5403..9c525a961b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26,6 +26,11 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
+"@babel/standalone@7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.1.0.tgz#d79774a17e8df4a53def891864882f5d81c42001"
+  integrity sha512-3yROQ+PlAAi2uf3Crpdl11hhrYDQ6af+uNmrpLn26WTSdGkOubMXvJKKmHMmiSm2MlOUVrqyotudpQS3hL9UBg==
+
 "@fimbul/bifrost@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@fimbul/bifrost/-/bifrost-0.11.0.tgz#83cacc21464198b12e3cc1c2204ae6c6d7afd158"
@@ -2093,6 +2098,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
@@ -3007,6 +3017,11 @@ fast-loops@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.0.1.tgz#a3d33e71654a7e6e67d7c2de0fee4ea11c6f2526"
   integrity sha512-1MA7cT6Q/o1JnhyNCcxuBqZHeIHf784ZjyjayZwwj7X7nRDkCS2qoj6vUh961yxEJP1aldrYrY7+DC/xOdv05A==
 
+fast-memoize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
+  integrity sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==
+
 fb-watchman@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
@@ -7328,7 +7343,7 @@ prompts@^0.1.9:
     clorox "^1.0.3"
     sisteransi "^0.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -7663,6 +7678,16 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-source-render@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-1.2.0.tgz#5ee994fef2b7ce5a5dd591139e2db860339189e5"
+  integrity sha512-OGRNPATQ3ep3UAN3KMVblh+6EJBeGmussOwD6VlIH/XbKU2jTT4c3yjteSrjrtpTTioAFIQZ16WG/F3UisXSrA==
+  dependencies:
+    deepmerge "^2.2.1"
+    fast-deep-equal "^2.0.1"
+    fast-memoize "^2.5.1"
+    prop-types "^15.6.2"
+
 react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"

From 22a4a8e4db40f73a3b7b995d3f701fb51d8cc42d Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Thu, 15 Nov 2018 16:18:19 +0100
Subject: [PATCH 02/10] wip

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx       | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 6a19b7cf49..f9f8bab74c 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -506,6 +506,11 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
         </Divider>
         <div style={{ padding: '1rem', filter: 'grayscale()' } as React.CSSProperties}>
           <Editor
+            // TODO: using an editor to display HTML is heavy...
+            // Investigate: https://github.com/ajaxorg/ace/blob/master/demo/static-highlighter/server.js
+            // 1. just use a div with HTML
+            // 2. print with prettier
+            // 3. highlight it
             mode="html"
             showGutter={false}
             showCursor={false}

From 80a65992383682f72fc4da448f41277df20896ce Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Tue, 27 Nov 2018 16:18:08 +0200
Subject: [PATCH 03/10] regenerate lock

---
 yarn.lock | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index ace544e02e..9b9f381eff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,6 +34,11 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
+"@babel/standalone@7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.1.0.tgz#d79774a17e8df4a53def891864882f5d81c42001"
+  integrity sha512-3yROQ+PlAAi2uf3Crpdl11hhrYDQ6af+uNmrpLn26WTSdGkOubMXvJKKmHMmiSm2MlOUVrqyotudpQS3hL9UBg==
+
 "@fimbul/bifrost@^0.15.0":
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/@fimbul/bifrost/-/bifrost-0.15.0.tgz#f3a48dee3046681e926c1f970f0b1a67e29e088e"
@@ -2296,6 +2301,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
@@ -3186,6 +3196,11 @@ fast-loops@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.0.1.tgz#a3d33e71654a7e6e67d7c2de0fee4ea11c6f2526"
   integrity sha512-1MA7cT6Q/o1JnhyNCcxuBqZHeIHf784ZjyjayZwwj7X7nRDkCS2qoj6vUh961yxEJP1aldrYrY7+DC/xOdv05A==
 
+fast-memoize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
+  integrity sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==
+
 fb-watchman@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
@@ -7886,6 +7901,16 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-source-render@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-1.2.0.tgz#5ee994fef2b7ce5a5dd591139e2db860339189e5"
+  integrity sha512-OGRNPATQ3ep3UAN3KMVblh+6EJBeGmussOwD6VlIH/XbKU2jTT4c3yjteSrjrtpTTioAFIQZ16WG/F3UisXSrA==
+  dependencies:
+    deepmerge "^2.2.1"
+    fast-deep-equal "^2.0.1"
+    fast-memoize "^2.5.1"
+    prop-types "^15.6.2"
+
 react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"

From 2fe2e572f9aa630f7983c63145d74811ea0a4958 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Wed, 28 Nov 2018 17:10:47 +0200
Subject: [PATCH 04/10] update react-source-render, create render config
 restore functionality

---
 .../ComponentExample/ComponentExample.tsx     | 232 ++++++++----------
 .../src/components/Playground/renderConfig.ts |  26 ++
 docs/src/index.ejs                            |   4 +-
 package.json                                  |   2 +-
 webpack.config.ts                             |   1 +
 yarn.lock                                     |   9 +-
 6 files changed, 142 insertions(+), 132 deletions(-)
 create mode 100644 docs/src/components/Playground/renderConfig.ts

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index f9f8bab74c..d2184f8712 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -7,11 +7,11 @@ import * as copyToClipboard from 'copy-to-clipboard'
 import SourceRender from 'react-source-render'
 import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
 import { Provider, themes } from '@stardust-ui/react'
-import * as Stardust from '@stardust-ui/react'
 
 import { examplePathToHash, getFormattedHash, knobsContext, scrollToAnchor } from 'docs/src/utils'
 import { callable, doesNodeContainClick, pxToRem, constants } from 'src/lib'
 import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
+import { babelConfig, importResolver } from 'docs/src/components/Playground/renderConfig'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
 import ContributionPrompt from '../ContributionPrompt'
@@ -31,13 +31,10 @@ interface ComponentExampleState {
   knobs: Object
   themeName: string
   componentVariables: Object
-  handleMouseLeave?: () => void
-  handleMouseMove?: () => void
+  handleMouseLeave: () => void
+  handleMouseMove: () => void
   sourceCode: string
-  markup: string
-  error?: string
   showCode: boolean
-  showHTML: boolean
   showRtl: boolean
   showTransparent: boolean
   showVariables: boolean
@@ -55,14 +52,6 @@ const codeTypeApiButtonLabels: { [key in SourceCodeType]: string } = {
   shorthand: 'Shorthand API',
 }
 
-const imports = {
-  lodash: _,
-  react: React,
-  '@stardust-ui/react': Stardust,
-}
-
-const importResolver = importName => imports[importName]
-
 /**
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the the raw `code` code block.
@@ -74,14 +63,14 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private kebabExamplePath: string
   private KnobsComponent: any
 
-  public state: ComponentExampleState = {
+  state = {
     knobs: {},
     themeName: 'teams',
     componentVariables: {},
+    handleMouseLeave: _.noop,
+    handleMouseMove: _.noop,
     sourceCode: '',
-    markup: '',
     showCode: false,
-    showHTML: false,
     showRtl: false,
     showTransparent: false,
     showVariables: false,
@@ -113,7 +102,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
       showCode: this.isActiveHash(),
-      showHTML: false,
       sourceCode: this.sourceCodeMgr.currentCode,
     })
   }
@@ -136,16 +124,15 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private clearActiveState = () => {
     this.setState({
       showCode: false,
-      showHTML: false,
       showRtl: false,
       showVariables: false,
     })
   }
 
   private isActiveState = () => {
-    const { showCode, showHTML, showVariables } = this.state
+    const { showCode, showVariables } = this.state
 
-    return showCode || showHTML || showVariables
+    return showCode || showVariables
   }
 
   private isActiveHash = () => this.anchorName === getFormattedHash(this.props.location.hash)
@@ -207,18 +194,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     }
   }
 
-  handleShowHTML = (shouldShowHTML: boolean) => {
-    if (shouldShowHTML !== this.state.showHTML) {
-      this.setState({ showHTML: shouldShowHTML }, this.updateHash)
-    }
-  }
-
-  handleShowHTMLInactive = (e: Event) => {
-    if (this.clickedOutsideComponent(e)) {
-      this.handleShowHTML(false)
-    }
-  }
-
   private handleShowRtlClick = e => {
     e.preventDefault()
 
@@ -266,6 +241,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private resetJSX = () => {
     if (this.sourceCodeMgr.originalCodeHasChanged && confirm('Lose your changes?')) {
       this.sourceCodeMgr.resetToOriginalCode()
+      this.updateAndRenderSourceCode()
     }
   }
 
@@ -282,10 +258,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private renderExampleFromCode = (): JSX.Element => {
     const { sourceCode } = this.state
 
-    console.log('TEST', {
-      sourceCode,
-    })
-
     if (sourceCode == null) {
       return this.renderMissingExample()
     }
@@ -302,20 +274,11 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
     return (
       <Provider theme={newTheme}>
-        <SourceRender
-          knobs={this.getKnobsValue()}
-          onError={this.onError}
-          onSuccess={this.onSuccess}
-          source={sourceCode}
-          resolver={importResolver}
-        />
+        <SourceRender.Consumer>{({ element }) => element}</SourceRender.Consumer>
       </Provider>
     )
   }
 
-  private onSuccess = (e, { markup }) => this.setState({ markup, error: null })
-  private onError = error => this.setState({ error: error.toString() })
-
   private renderMissingExample = (): JSX.Element => {
     const missingExamplePath = `./docs/src/examples/${this.sourceCodeMgr.currentPath}.tsx`
     return (
@@ -360,11 +323,17 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private getDisplayName = () => this.props.examplePath.split('/')[1]
 
   private handleChangeCode = (sourceCode: string) => {
-    this.setState({ sourceCode })
+    this.sourceCodeMgr.currentCode = sourceCode
+    this.updateAndRenderSourceCode()
+  }
+
+  private updateAndRenderSourceCode = () => {
+    this.setState({ sourceCode: this.sourceCodeMgr.currentCode })
   }
 
   private setApiCodeType = (codeType: SourceCodeType) => {
-    // TODO:
+    this.sourceCodeMgr.codeType = codeType
+    this.updateAndRenderSourceCode()
   }
 
   private renderApiCodeMenu = (): JSX.Element => {
@@ -373,8 +342,8 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
     const menuItems = [SourceCodeType.shorthand, SourceCodeType.normal].map(codeType => {
       // we disable the menu button for Children API in case we don't have the example for it
-      const disabled = true
-      codeType === SourceCodeType.normal && !this.sourceCodeMgr.isCodeValidForType(codeType)
+      const disabled =
+        codeType === SourceCodeType.normal && !this.sourceCodeMgr.isCodeValidForType(codeType)
 
       return {
         active: this.sourceCodeMgr.codeType === codeType,
@@ -472,56 +441,63 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   private renderError = () => {
-    const { error } = this.state
-
-    if (!error) return null
-
     return (
-      <Segment size="small" color="red" basic inverted padded secondary>
-        <pre>{error}</pre>
-      </Segment>
+      <SourceRender.Consumer>
+        {({ error }) =>
+          error && (
+            <Segment size="small" color="red" basic inverted padded secondary>
+              <pre>{error.toString()}</pre>
+            </Segment>
+          )
+        }
+      </SourceRender.Consumer>
     )
   }
 
   private renderHTML = () => {
-    const { error, showCode, markup } = this.state
-    if (error || !showCode) return null
-
-    // add new lines between almost all adjacent elements
-    // moves inline elements to their own line
-    const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<')
-
-    const beautifiedHTML = html(preFormattedHTML, {
-      indent_size: 2,
-      indent_char: ' ',
-      wrap_attributes: 'auto',
-      wrap_attributes_indent_size: 2,
-      end_with_newline: false,
-    })
+    const { showCode } = this.state
+    if (!showCode) return null
 
     return (
-      <div>
-        <Divider inverted horizontal>
-          <span style={{ opacity: 0.5 }}>HTML</span>
-        </Divider>
-        <div style={{ padding: '1rem', filter: 'grayscale()' } as React.CSSProperties}>
-          <Editor
-            // TODO: using an editor to display HTML is heavy...
-            // Investigate: https://github.com/ajaxorg/ace/blob/master/demo/static-highlighter/server.js
-            // 1. just use a div with HTML
-            // 2. print with prettier
-            // 3. highlight it
-            mode="html"
-            showGutter={false}
-            showCursor={false}
-            readOnly
-            highlightActiveLine={false}
-            id={`${this.getKebabExamplePath()}-html`}
-            onOutsideClick={this.handleShowHTMLInactive}
-            value={beautifiedHTML}
-          />
-        </div>
-      </div>
+      <SourceRender.Consumer>
+        {({ markup }) => {
+          // add new lines between almost all adjacent elements
+          // moves inline elements to their own line
+          const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<')
+
+          const beautifiedHTML = html(preFormattedHTML, {
+            indent_size: 2,
+            indent_char: ' ',
+            wrap_attributes: 'auto',
+            wrap_attributes_indent_size: 2,
+            end_with_newline: false,
+          })
+
+          return (
+            <div>
+              <Divider inverted horizontal>
+                <span style={{ opacity: 0.5 }}>HTML</span>
+              </Divider>
+              <div style={{ padding: '1rem', filter: 'grayscale()' } as React.CSSProperties}>
+                <Editor
+                  // TODO: using an editor to display HTML is heavy...
+                  // Investigate: https://github.com/ajaxorg/ace/blob/master/demo/static-highlighter/server.js
+                  // 1. just use a div with HTML
+                  // 2. print with prettier
+                  // 3. highlight it
+                  mode="html"
+                  showGutter={false}
+                  showCursor={false}
+                  readOnly
+                  highlightActiveLine={false}
+                  id={`${this.getKebabExamplePath()}-html`}
+                  value={beautifiedHTML}
+                />
+              </div>
+            </div>
+          )
+        }}
+      </SourceRender.Consumer>
     )
   }
 
@@ -594,10 +570,10 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       handleMouseMove,
       isHovering,
       showCode,
-      showHTML,
       showRtl,
       showTransparent,
       showVariables,
+      sourceCode,
     } = this.state
 
     const isActive = this.isActiveHash() || this.isActiveState()
@@ -650,7 +626,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   onShowVariables={this.handleShowVariablesClick}
                   onShowTransparent={this.handleShowTransparentClick}
                   showCode={showCode}
-                  showHTML={showHTML}
                   showRtl={showRtl}
                   showTransparent={showTransparent}
                   showVariables={showVariables}
@@ -667,35 +642,42 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
             </Grid.Column>
           )}
 
-          <Provider.Consumer
-            render={({ siteVariables }) => {
-              return (
-                <Grid.Column
-                  width={16}
-                  dir={showRtl ? 'rtl' : undefined}
-                  className={`rendered-example ${this.getKebabExamplePath()}`}
-                  style={{
-                    padding: '2rem',
-                    color: siteVariables.bodyColor,
-                    backgroundColor: siteVariables.bodyBackground,
-                    ...(showTransparent && {
-                      backgroundImage:
-                        'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
-                      backgroundRepeat: 'repeat',
-                    }),
-                  }}
-                >
-                  {this.renderExampleFromCode()}
-                </Grid.Column>
-              )
-            }}
-          />
-          <Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
-            {this.renderJSX()}
-            {this.renderError()}
-            {this.renderHTML()}
-            {this.renderVariables()}
-          </Grid.Column>
+          <SourceRender
+            babelConfig={babelConfig}
+            source={sourceCode}
+            renderHtml={showCode}
+            resolver={importResolver}
+          >
+            <Provider.Consumer
+              render={({ siteVariables }) => {
+                return (
+                  <Grid.Column
+                    width={16}
+                    dir={showRtl ? 'rtl' : undefined}
+                    className={`rendered-example ${this.getKebabExamplePath()}`}
+                    style={{
+                      padding: '2rem',
+                      color: siteVariables.bodyColor,
+                      backgroundColor: siteVariables.bodyBackground,
+                      ...(showTransparent && {
+                        backgroundImage:
+                          'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
+                        backgroundRepeat: 'repeat',
+                      }),
+                    }}
+                  >
+                    {this.renderExampleFromCode()}
+                  </Grid.Column>
+                )
+              }}
+            />
+            <Grid.Column width={16} style={{ padding: 0, background: EDITOR_BACKGROUND_COLOR }}>
+              {this.renderJSX()}
+              {this.renderError()}
+              {this.renderHTML()}
+              {this.renderVariables()}
+            </Grid.Column>
+          </SourceRender>
         </Grid>
         <Divider section horizontal />
       </Visibility>
diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts
new file mode 100644
index 0000000000..a3e99a3d50
--- /dev/null
+++ b/docs/src/components/Playground/renderConfig.ts
@@ -0,0 +1,26 @@
+import * as _ from 'lodash'
+import * as React from 'react'
+import * as Stardust from '@stardust-ui/react'
+
+export const babelConfig = {
+  plugins: [['transform-typescript', { isTSX: true }]],
+  presets: [
+    [
+      'env',
+      {
+        targets: {
+          browsers: ['last 4 versions', 'not dead'],
+        },
+      },
+    ],
+    ['stage-1', { decoratorsLegacy: true }],
+  ],
+}
+
+const imports = {
+  '@stardust-ui/react': Stardust,
+  lodash: _,
+  react: React,
+}
+
+export const importResolver = importName => imports[importName]
diff --git a/docs/src/index.ejs b/docs/src/index.ejs
index 7e19b48165..41a7f88b47 100644
--- a/docs/src/index.ejs
+++ b/docs/src/index.ejs
@@ -34,7 +34,9 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom-server.browser<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.1.0/babel.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.1.0/babel.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/preset-env-standalone@7.0.0/babel-preset-env.js"></script>
+
   <style>
     html, body {
       background: #f7f7f7;
diff --git a/package.json b/package.json
index 59dd3f5907..720d5575c8 100644
--- a/package.json
+++ b/package.json
@@ -154,7 +154,7 @@
     "react-hot-loader": "^4.1.3",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
-    "react-source-render": "^1.2.0",
+    "react-source-render": "^2.0.0-beta.0",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
diff --git a/webpack.config.ts b/webpack.config.ts
index 8862a1724c..f3d399d645 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -25,6 +25,7 @@ const webpackConfig: any = {
   },
   devtool: config.compiler_devtool,
   externals: {
+    '@babel/standalone': 'Babel',
     'anchor-js': 'AnchorJS',
     'prop-types': 'PropTypes',
     react: 'React',
diff --git a/yarn.lock b/yarn.lock
index 9b9f381eff..b2ed2a6e77 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7901,13 +7901,12 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-source-render@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-1.2.0.tgz#5ee994fef2b7ce5a5dd591139e2db860339189e5"
-  integrity sha512-OGRNPATQ3ep3UAN3KMVblh+6EJBeGmussOwD6VlIH/XbKU2jTT4c3yjteSrjrtpTTioAFIQZ16WG/F3UisXSrA==
+react-source-render@^2.0.0-beta.0:
+  version "2.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.0.tgz#d026f37030f54409e622160620434ae124b8e513"
+  integrity sha512-BczP1+BkAIz60sZ/PU0KJzBrOe7lfEPJGScYOTwDWFY6tqoh+GAwpWWa3y0FzRgTlSYQlmfaaZMbPqegmQJURg==
   dependencies:
     deepmerge "^2.2.1"
-    fast-deep-equal "^2.0.1"
     fast-memoize "^2.5.1"
     prop-types "^15.6.2"
 

From 9d152b5dc9d2270c4fba2178a74d1ad0e2ae2897 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Wed, 28 Nov 2018 17:15:07 +0200
Subject: [PATCH 05/10] remove preset

---
 docs/src/components/Playground/renderConfig.ts | 1 -
 docs/src/index.ejs                             | 4 ++--
 package.json                                   | 2 +-
 yarn.lock                                      | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts
index a3e99a3d50..955e826711 100644
--- a/docs/src/components/Playground/renderConfig.ts
+++ b/docs/src/components/Playground/renderConfig.ts
@@ -13,7 +13,6 @@ export const babelConfig = {
         },
       },
     ],
-    ['stage-1', { decoratorsLegacy: true }],
   ],
 }
 
diff --git a/docs/src/index.ejs b/docs/src/index.ejs
index 41a7f88b47..8cba2cc46f 100644
--- a/docs/src/index.ejs
+++ b/docs/src/index.ejs
@@ -34,8 +34,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom-server.browser<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.1.0/babel.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@babel/preset-env-standalone@7.0.0/babel-preset-env.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/preset-env-standalone@7/babel-preset-env.js"></script>
 
   <style>
     html, body {
diff --git a/package.json b/package.json
index 720d5575c8..86fe29119e 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "what-input": "^5.1.2"
   },
   "devDependencies": {
-    "@babel/standalone": "7.1.0",
+    "@babel/standalone": "^7.1.0",
     "@types/classnames": "^2.2.4",
     "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
diff --git a/yarn.lock b/yarn.lock
index b2ed2a6e77..321ea8a1e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,7 +34,7 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
-"@babel/standalone@7.1.0":
+"@babel/standalone@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.1.0.tgz#d79774a17e8df4a53def891864882f5d81c42001"
   integrity sha512-3yROQ+PlAAi2uf3Crpdl11hhrYDQ6af+uNmrpLn26WTSdGkOubMXvJKKmHMmiSm2MlOUVrqyotudpQS3hL9UBg==

From 2a63d2bed2830c803a9a4040ca8c8675f4951a1d Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Wed, 28 Nov 2018 17:17:46 +0200
Subject: [PATCH 06/10] remove todo

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx       | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index d2184f8712..ba9f861777 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -480,11 +480,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
               </Divider>
               <div style={{ padding: '1rem', filter: 'grayscale()' } as React.CSSProperties}>
                 <Editor
-                  // TODO: using an editor to display HTML is heavy...
-                  // Investigate: https://github.com/ajaxorg/ace/blob/master/demo/static-highlighter/server.js
-                  // 1. just use a div with HTML
-                  // 2. print with prettier
-                  // 3. highlight it
                   mode="html"
                   showGutter={false}
                   showCursor={false}

From 20f7f230fc1104ae06d9de67b2954bbfb7b966ff Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Wed, 28 Nov 2018 17:19:44 +0200
Subject: [PATCH 07/10] remove obsolete util

---
 docs/src/utils/evalTypeScript.ts | 111 -------------------------------
 1 file changed, 111 deletions(-)
 delete mode 100644 docs/src/utils/evalTypeScript.ts

diff --git a/docs/src/utils/evalTypeScript.ts b/docs/src/utils/evalTypeScript.ts
deleted file mode 100644
index 8242575f4d..0000000000
--- a/docs/src/utils/evalTypeScript.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import * as Stardust from '@stardust-ui/react'
-import * as _ from 'lodash'
-import * as ts from 'typescript'
-
-/**
- * Converts import statement to expression by converting the module name in
- * upper snake case and declaring variables for the named bindings. The relative
- * imports have special converting strategy.
- *
- * import * as React from "react"; => const React = REACT;
- * import { Component1, Component2 } from "module"; => const {Component1, Component2} = MODULE;
- */
-export const convertImportStatementToExpression = (node: ts.ImportDeclaration) => {
-  const MODULE = _.snakeCase((node.moduleSpecifier as ts.Identifier).text).toUpperCase()
-  return _.cond([
-    // import * as React from 'react' => const React = REACT
-    [
-      ts.isNamespaceImport,
-      (namedBindings: ts.NamespaceImport) => {
-        return `\nconst ${namedBindings.name.escapedText} = ${MODULE};\n`
-      },
-    ],
-
-    // import { Component1, Component2 } from "module"; => const {Component1, Component2} = MODULE;
-    [
-      ts.isNamedImports,
-      (namedBindings: ts.NamedImports) => {
-        const imports = namedBindings.elements.map(item => item.name.escapedText)
-        return `const {${imports.join()}} = ${MODULE};\n`
-      },
-    ],
-  ])(node.importClause!.namedBindings)
-}
-
-/**
- * Transpiles TypeScript to executable JavaScript.
- */
-const transpileTypeScript = (sourceCode): string => {
-  // TODO(zuko): remove this once we get rid of synthetic default imports
-  sourceCode = sourceCode.replace(/import (\w+)/g, 'import * as $1') // tslint:disable-line
-
-  const inMemorySourceFile = ts.createSourceFile(
-    'example.ts',
-    sourceCode,
-    ts.ScriptTarget.Latest,
-    false,
-  )
-
-  let transformedCode = sourceCode
-  ts.forEachChild(inMemorySourceFile, (node: ts.Node) => {
-    let replacementCode
-    switch (node.kind) {
-      case ts.SyntaxKind.ImportDeclaration:
-        replacementCode = convertImportStatementToExpression(node as ts.ImportDeclaration)
-        transformedCode = transformedCode.replace(
-          sourceCode.substr(node.pos, node.end - node.pos),
-          replacementCode,
-        )
-        break
-      case ts.SyntaxKind.ExportAssignment:
-        replacementCode = `return ${(node as any).expression.escapedText}`
-        transformedCode = transformedCode.replace(
-          sourceCode.substr(node.pos, node.end - node.pos),
-          replacementCode,
-        )
-        break
-    }
-  })
-
-  const IIFE = `;(function () { ${transformedCode} })()`
-  return ts.transpile(IIFE, {
-    jsx: ts.JsxEmit.React,
-    module: ts.ModuleKind.CommonJS,
-    allowSyntheticDefaultImports: true,
-  })
-}
-
-interface ExecutionSandboxGlobals {
-  REACT: any
-  REACT_DOM: any
-  STARDUST_UI_REACT: any
-  LODASH: any
-}
-/**
- * Executes JavaScript code within our sandbox. Returns the result of the
- * last evaluated expression.
- */
-const execute = (
-  code,
-  { REACT, REACT_DOM, STARDUST_UI_REACT, LODASH }: ExecutionSandboxGlobals,
-) => {
-  return eval(code) // tslint:disable-line
-}
-
-/**
- * Evaluates TypeScript source code by transpiling it to JavaScript and then
- * executing it within our sandbox, which provides a suite of global variables.
- */
-const evalTypeScript = (sourceCode): any => {
-  const transpiledCode = transpileTypeScript(sourceCode)
-  return execute(transpiledCode, {
-    REACT: React,
-    REACT_DOM: ReactDOM,
-    STARDUST_UI_REACT: Stardust,
-    LODASH: _,
-  })
-}
-
-export default evalTypeScript

From 7ec79ab0f6297268d3fa3d21dc075271a33d9e22 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Wed, 28 Nov 2018 20:13:54 +0200
Subject: [PATCH 08/10] fix broken things

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx    | 6 +++---
 docs/src/components/Playground/renderConfig.ts            | 2 +-
 .../Label/Content/LabelExampleIcon.shorthand.tsx          | 2 +-
 .../Label/Content/LabelExampleIconPosition.shorthand.tsx  | 2 +-
 package.json                                              | 2 +-
 yarn.lock                                                 | 8 ++++----
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index ba9f861777..160de2f203 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -564,6 +564,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       handleMouseLeave,
       handleMouseMove,
       isHovering,
+      knobs,
       showCode,
       showRtl,
       showTransparent,
@@ -589,8 +590,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
           }),
     }
 
-    const knobs = this.renderKnobs()
-
     return (
       <Visibility
         once={false}
@@ -628,7 +627,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                 />
               </div>
             </div>
-            {knobs}
+            {this.renderKnobs()}
           </Grid.Column>
 
           {children && (
@@ -639,6 +638,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
           <SourceRender
             babelConfig={babelConfig}
+            knobs={knobs}
             source={sourceCode}
             renderHtml={showCode}
             resolver={importResolver}
diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts
index 955e826711..c816b88ecf 100644
--- a/docs/src/components/Playground/renderConfig.ts
+++ b/docs/src/components/Playground/renderConfig.ts
@@ -3,7 +3,7 @@ import * as React from 'react'
 import * as Stardust from '@stardust-ui/react'
 
 export const babelConfig = {
-  plugins: [['transform-typescript', { isTSX: true }]],
+  plugins: ['proposal-class-properties', ['transform-typescript', { isTSX: true }]],
   presets: [
     [
       'env',
diff --git a/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
index 804d24c52e..71071a9432 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-const LabelExampleIconShorthand = <Label content="Label with icon" icon="close" />
+const LabelExampleIconShorthand = () => <Label content="Label with icon" icon="close" />
 
 export default LabelExampleIconShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
index f2b9ca1184..7d7dcf0513 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-const LabelExampleIconPositionShorthand = (
+const LabelExampleIconPositionShorthand = () => (
   <Label content="Have a coffee!" icon="coffee" iconPosition="start" />
 )
 
diff --git a/package.json b/package.json
index 061697535a..cc08dbc196 100644
--- a/package.json
+++ b/package.json
@@ -154,7 +154,7 @@
     "react-hot-loader": "^4.1.3",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
-    "react-source-render": "^2.0.0-beta.0",
+    "react-source-render": "^2.0.0-beta.2",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 321ea8a1e1..0465776df4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7901,10 +7901,10 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-source-render@^2.0.0-beta.0:
-  version "2.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.0.tgz#d026f37030f54409e622160620434ae124b8e513"
-  integrity sha512-BczP1+BkAIz60sZ/PU0KJzBrOe7lfEPJGScYOTwDWFY6tqoh+GAwpWWa3y0FzRgTlSYQlmfaaZMbPqegmQJURg==
+react-source-render@^2.0.0-beta.2:
+  version "2.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.2.tgz#0e891c1826c6043fc78f72c1ef53417e084ef9c9"
+  integrity sha512-Itj03X7SNzSY7EML+LsPas5SCDtEWR3nmTknzZMaoxiFBza3JKoWjlx1PIfjEu6KS+Vc2BN08+vE+dX14WtENA==
   dependencies:
     deepmerge "^2.2.1"
     fast-memoize "^2.5.1"

From 80a390c2d246f72fd520818953d2938fd9a64d91 Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Wed, 28 Nov 2018 20:38:34 +0200
Subject: [PATCH 09/10] bump dependency

---
 package.json |  2 +-
 yarn.lock    | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index cc08dbc196..3c57d42dc8 100644
--- a/package.json
+++ b/package.json
@@ -154,7 +154,7 @@
     "react-hot-loader": "^4.1.3",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
-    "react-source-render": "^2.0.0-beta.2",
+    "react-source-render": "^2.0.0-beta.3",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 0465776df4..4632e24e78 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7846,7 +7846,7 @@ react-is@^16.4.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
   integrity sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==
 
-react-is@^16.6.1:
+react-is@^16.6.1, react-is@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
@@ -7901,14 +7901,15 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-source-render@^2.0.0-beta.2:
-  version "2.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.2.tgz#0e891c1826c6043fc78f72c1ef53417e084ef9c9"
-  integrity sha512-Itj03X7SNzSY7EML+LsPas5SCDtEWR3nmTknzZMaoxiFBza3JKoWjlx1PIfjEu6KS+Vc2BN08+vE+dX14WtENA==
+react-source-render@^2.0.0-beta.3:
+  version "2.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.3.tgz#9a871c7a5cfd50f994a3b96315e0e46c427df09a"
+  integrity sha512-mYip/OnYs1e2DEjR7TkRpBRkotjpGL40D3ZvlExYlzKZVMIgveYpzdZKzzBESiXHB9e1GHELBbKPUlU8zx8kIQ==
   dependencies:
     deepmerge "^2.2.1"
     fast-memoize "^2.5.1"
     prop-types "^15.6.2"
+    react-is "^16.6.3"
 
 react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
   version "16.4.1"

From 8502a199b1966f417f5390e3c8e0713d7a7d71aa Mon Sep 17 00:00:00 2001
From: olfedias <olfedias@microsoft.com>
Date: Fri, 30 Nov 2018 15:52:10 +0200
Subject: [PATCH 10/10] fix review comments

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 160de2f203..904164e5da 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -197,9 +197,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   private handleShowRtlClick = e => {
     e.preventDefault()
 
-    const { showRtl } = this.state
-
-    this.setState({ showRtl: !showRtl })
+    this.setState(prevState => ({ showRtl: !prevState.showRtl }))
   }
 
   private handleShowCodeClick = e => {
@@ -463,7 +461,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
         {({ markup }) => {
           // add new lines between almost all adjacent elements
           // moves inline elements to their own line
-          const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<')
+          const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span)/g, '>\n<')
 
           const beautifiedHTML = html(preFormattedHTML, {
             indent_size: 2,