chore(docs): make HMR working properly (#1370)

* chore(docs): make HMR working properly * wip * wip * wip * wip * fix typo * fix TS error
microsoft · May 26, 2019 · f1283e9 · f1283e9
1 parent 37ebb61
commit f1283e9
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 145 deletions.
diff --git a/docs/src/app.tsx b/docs/src/app.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { hot } from 'react-hot-loader/root'
 import { Provider, themes } from '@stardust-ui/react'
 
 import { mergeThemes } from 'src/lib'
@@ -40,4 +41,4 @@ class App extends React.Component<any, ThemeContextData> {
   }
 }
 
-export default App
+export default hot(App)
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -400,36 +400,6 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     ) : null
   }
 
-  renderError = () => {
-    return (
-      <SourceRender.Consumer>
-        {({ error }) =>
-          error && (
-            <Segment inverted color="red">
-              <pre style={{ whiteSpace: 'pre-wrap' }}>{error.toString()}</pre>
-            </Segment>
-          )
-        }
-      </SourceRender.Consumer>
-    )
-  }
-
-  renderHTML = () => {
-    const { showCode } = this.state
-    if (!showCode) return null
-
-    return (
-      <SourceRender.Consumer>
-        {props => (
-          <div {...props}>
-            <Divider fitted />
-            <CodeSnippet fitted label="Rendered HTML" mode="html" value={props.markup} />
-          </div>
-        )}
-      </SourceRender.Consumer>
-    )
-  }
-
   renderVariables = () => {
     const { showVariables } = this.state
     if (!showVariables) return undefined
@@ -537,39 +507,53 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
             <SourceRender
               babelConfig={babelConfig}
               source={currentCode}
-              render={this.renderElement}
               renderHtml={showCode}
               resolver={importResolver}
               themeName={themeName}
+              wrap={this.renderElement}
+              unstable_hot
             >
-              <Provider.Consumer
-                render={({ siteVariables }) => {
-                  return (
-                    <Segment
-                      className={`rendered-example ${this.getKebabExamplePath()}`}
-                      styles={{
-                        padding: '2rem',
-                        color: siteVariables.bodyColor,
-                        backgroundColor: siteVariables.bodyBackground,
-                        ...(showTransparent && {
-                          backgroundImage:
-                            'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
-                          backgroundRepeat: 'repeat',
-                        }),
-                      }}
-                    >
-                      <SourceRender.Consumer>{({ element }) => element}</SourceRender.Consumer>
-                    </Segment>
-                  )
-                }}
-              />
-              <Segment styles={{ padding: 0 }}>
-                {this.renderSourceCode()}
-                {this.renderError()}
-                {this.renderHTML()}
-                {this.renderVariables()}
-              </Segment>
-              <div style={{ paddingBottom: '10px' }} />
+              {({ element, error, markup }) => (
+                <>
+                  <Provider.Consumer
+                    render={({ siteVariables }) => {
+                      return (
+                        <Segment
+                          className={`rendered-example ${this.getKebabExamplePath()}`}
+                          styles={{
+                            padding: '2rem',
+                            color: siteVariables.bodyColor,
+                            backgroundColor: siteVariables.bodyBackground,
+                            ...(showTransparent && {
+                              backgroundImage:
+                                'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQoU2NkYGAwZkAD////RxdiYBwKCv///4/hGUZGkNNRAeMQUAgAtxof+nLDzyUAAAAASUVORK5CYII=")',
+                              backgroundRepeat: 'repeat',
+                            }),
+                          }}
+                        >
+                          {element}
+                        </Segment>
+                      )
+                    }}
+                  />
+                  <Segment styles={{ padding: 0 }}>
+                    {this.renderSourceCode()}
+                    {error && (
+                      <Segment inverted color="red">
+                        <pre style={{ whiteSpace: 'pre-wrap' }}>{error.toString()}</pre>
+                      </Segment>
+                    )}
+                    {showCode && (
+                      <div>
+                        <Divider fitted />
+                        <CodeSnippet fitted label="Rendered HTML" mode="html" value={markup} />
+                      </div>
+                    )}
+                    {this.renderVariables()}
+                  </Segment>
+                  <div style={{ paddingBottom: '10px' }} />
+                </>
+              )}
             </SourceRender>
           </KnobProvider>
         </Flex.Item>

diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx
@@ -59,28 +59,21 @@ class ExternalExampleLayout extends React.Component<
 
     return (
       <Provider key={this.state.renderId} theme={theme}>
-        <Provider.Consumer
-          render={({ siteVariables }) => (
-            <SourceRender
-              babelConfig={babelConfig}
-              source={exampleSource.js}
-              renderHtml={false}
-              resolver={importResolver}
-            >
-              <SourceRender.Consumer>
-                {({ element, error }) => (
-                  <>
-                    {element}
-                    {/* This block allows to see issues with examples as visual regressions. */}
-                    {error && (
-                      <div style={{ fontSize: '5rem', color: 'red' }}>{error.toString()}</div>
-                    )}
-                  </>
-                )}
-              </SourceRender.Consumer>
-            </SourceRender>
+        <SourceRender
+          babelConfig={babelConfig}
+          source={exampleSource.js}
+          renderHtml={false}
+          resolver={importResolver}
+          unstable_hot
+        >
+          {({ element, error }) => (
+            <>
+              {element}
+              {/* This block allows to see issues with examples as visual regressions. */}
+              {error && <div style={{ fontSize: '5rem', color: 'red' }}>{error.toString()}</div>}
+            </>
           )}
-        />
+        </SourceRender>
       </Provider>
     )
   }

diff --git a/docs/src/index.tsx b/docs/src/index.tsx
@@ -3,46 +3,12 @@ import * as ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 import App from './app'
 
-// ----------------------------------------
-// Rendering
-// ----------------------------------------
-
 const mountNode = document.createElement('div')
 document.body.appendChild(mountNode)
 
-const render = NewApp =>
-  ReactDOM.render(
-    <AppContainer>
-      <NewApp />
-    </AppContainer>,
-    mountNode,
-  )
-
-// ----------------------------------------
-// HMR
-// ----------------------------------------
-
-if (__DEV__) {
-  // When the application source code changes, re-render the whole thing.
-  if (module.hot) {
-    module.hot.accept('./app', () => {
-      // restore scroll
-      const { scrollLeft, scrollTop } = document.scrollingElement!
-      ReactDOM.unmountComponentAtNode(mountNode)
-
-      try {
-        render(require('./app').default)
-        document.scrollingElement!.scrollTop = scrollTop
-        document.scrollingElement!.scrollLeft = scrollLeft
-      } catch (e) {
-        console.error(e)
-      }
-    })
-  }
-}
-
-// ----------------------------------------
-// Start the app
-// ----------------------------------------
-
-render(App)
+ReactDOM.render(
+  <AppContainer>
+    <App />
+  </AppContainer>,
+  mountNode,
+)
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
@@ -21,6 +21,18 @@ import AccessibilityBehaviors from './views/AccessibilityBehaviors'
 import FocusZone from './views/FocusZone'
 import FocusTrapZone from './views/FocusTrapZone'
 import AutoFocusZone from './views/AutoFocusZone'
+import ChatPanePrototype from './prototypes/chatPane'
+import ChatMessagesPrototype from './prototypes/chatMessages'
+import AsyncShorthandPrototype from './prototypes/AsyncShorthand'
+import EmployeeCardPrototype from './prototypes/employeeCard'
+import MeetingOptionsPrototype from './prototypes/meetingOptions'
+import SearchPagePrototype from './prototypes/SearchPage'
+import MentionsPrototype from './prototypes/mentions'
+import DropdownsPrototype from './prototypes/dropdowns'
+import PopupsPrototype from './prototypes/popups'
+import IconViewerPrototype from './prototypes/IconViewer'
+import MenuButtonPrototype from './prototypes/MenuButton'
+import AlertsPrototype from './prototypes/alerts'
 
 const Router = () => (
   <BrowserRouter basename={__BASENAME__}>
@@ -35,74 +47,74 @@ const Router = () => (
             exact
             key="/prototype-chat-pane"
             path="/prototype-chat-pane"
-            component={require('./prototypes/chatPane/index').default}
+            component={ChatPanePrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-chat-messages"
             path="/prototype-chat-messages"
-            component={require('./prototypes/chatMessages/index').default}
+            component={ChatMessagesPrototype}
           />,
           ,
           <DocsLayout
             exact
             key="/prototype-async-shorthand"
             path="/prototype-async-shorthand"
-            component={require('./prototypes/AsyncShorthand/index').default}
+            component={AsyncShorthandPrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-employee-card"
             path="/prototype-employee-card"
-            component={require('./prototypes/employeeCard/index').default}
+            component={EmployeeCardPrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-meeting-options"
             path="/prototype-meeting-options"
-            component={require('./prototypes/meetingOptions/index').default}
+            component={MeetingOptionsPrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-search-page"
             path="/prototype-search-page"
-            component={require('./prototypes/SearchPage/index').default}
+            component={SearchPagePrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-mentions"
             path="/prototype-mentions"
-            component={require('./prototypes/mentions/index').default}
+            component={MentionsPrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-dropdowns"
             path="/prototype-dropdowns"
-            component={require('./prototypes/dropdowns/index').default}
+            component={DropdownsPrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-popups"
             path="/prototype-popups"
-            component={require('./prototypes/popups/index').default}
+            component={PopupsPrototype}
           />,
           <DocsLayout
             exact
             key="/icon-viewer"
             path="/icon-viewer"
-            component={require('./prototypes/IconViewer/index').default}
+            component={IconViewerPrototype}
           />,
           <DocsLayout
             exact
             key="/menu-button"
             path="/menu-button"
-            component={require('./prototypes/MenuButton/index').default}
+            component={MenuButtonPrototype}
           />,
           <DocsLayout
             exact
             key="/prototype-alerts"
             path="/prototype-alerts"
-            component={require('./prototypes/alerts/index').default}
+            component={AlertsPrototype}
           />,
         ]}
         <DocsLayout exact path="/faq" component={FAQ} />

diff --git a/docs/src/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts
@@ -15,8 +15,25 @@ export const examplePlaygroundContext = require.context(
 /**
  * The Webpack Context for doc site example sources.
  */
-export const exampleSourcesContext = require.context(
+//                          It's required for a hot reload
+// eslint-disable-next-line import/no-mutable-exports
+export let exampleSourcesContext = require.context(
   'docs/src/exampleSources/',
   true,
   /.source.json$/,
 )
+
+// ----------------------------------------
+// HMR
+// ----------------------------------------
+
+if (__DEV__) {
+  // When the application source code changes, re-render the whole thing.
+  if (module.hot) {
+    // We need this to catch cases unhandled by RHL
+    // https://github.com/webpack/webpack/issues/834#issuecomment-76590576
+    module.hot.accept(exampleSourcesContext.id, () => {
+      exampleSourcesContext = require.context('docs/src/exampleSources/', true, /.source.json$/)
+    })
+  }
+}
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "react-markdown": "^4.0.8",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
-    "react-source-render": "2.0.0-beta.6",
+    "react-source-render": "3.0.0-3",
     "react-test-renderer": "^16.8.5",
     "react-vis": "^1.11.6",
     "request-promise-native": "^1.0.5",

diff --git a/packages/internal-tooling/babel/index.js b/packages/internal-tooling/babel/index.js
@@ -10,7 +10,7 @@ module.exports = {
     '@babel/plugin-transform-runtime',
   ],
   env: {
-    delelopment: {
+    development: {
       plugins: ['react-hot-loader/babel'],
     },
     test: {