From f1283e993ddaed059f467ca99e213dc472a1e5f0 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Sun, 26 May 2019 17:53:23 +0200 Subject: [PATCH] chore(docs): make HMR working properly (#1370) * chore(docs): make HMR working properly * wip * wip * wip * wip * fix typo * fix TS error --- docs/src/app.tsx | 3 +- .../ComponentExample/ComponentExample.tsx | 102 ++++++++---------- docs/src/components/ExternalExampleLayout.tsx | 35 +++--- docs/src/index.tsx | 46 ++------ docs/src/routes.tsx | 36 ++++--- docs/src/utils/exampleContexts.ts | 19 +++- package.json | 2 +- packages/internal-tooling/babel/index.js | 2 +- yarn.lock | 36 +++++-- 9 files changed, 136 insertions(+), 145 deletions(-) diff --git a/docs/src/app.tsx b/docs/src/app.tsx index 814294ef6..35aa4adc9 100644 --- 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 { } } -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 index 4d87356cc..1d0fdaa75 100644 --- 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 { - return ( - - {({ error }) => - error && ( - - 
{error.toString()}
- - ) - } - - ) - } - - renderHTML = () => { - const { showCode } = this.state - if (!showCode) return null - - return ( - - {props => ( -
- - -
- )} - - ) - } - renderVariables = () => { const { showVariables } = this.state if (!showVariables) return undefined @@ -537,39 +507,53 @@ class ComponentExample extends React.Component - { - return ( - + 
{error.toString()}
+ + )} + {showCode && ( +
+ + +
+ )} + {this.renderVariables()} + +
+ + )} diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx index d65397156..69493b2ec 100644 --- a/docs/src/components/ExternalExampleLayout.tsx +++ b/docs/src/components/ExternalExampleLayout.tsx @@ -59,28 +59,21 @@ class ExternalExampleLayout extends React.Component< return ( - ( - - - {({ element, error }) => ( - <> - {element} - {/* This block allows to see issues with examples as visual regressions. */} - {error && ( -
{error.toString()}
- )} - - )} - - + + {({ element, error }) => ( + <> + {element} + {/* This block allows to see issues with examples as visual regressions. */} + {error &&
{error.toString()}
} + )} - /> + ) } diff --git a/docs/src/index.tsx b/docs/src/index.tsx index c3c357c85..8fe61bde6 100644 --- 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( - - - , - 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( + + + , + mountNode, +) diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx index e17270dc8..94437f259 100644 --- 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 = () => ( @@ -35,74 +47,74 @@ const Router = () => ( exact key="/prototype-chat-pane" path="/prototype-chat-pane" - component={require('./prototypes/chatPane/index').default} + component={ChatPanePrototype} />, , , , , , , , , , , , , ]} diff --git a/docs/src/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts index 4f201b51a..4121e1e14 100644 --- 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 index dc715f115..a9bbd6ef9 100644 --- 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 index efe4eab58..c7c86cadd 100644 --- 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: { diff --git a/yarn.lock b/yarn.lock index 65429f0da..71f4c245f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -718,6 +718,13 @@ dependencies: regenerator-runtime "^0.12.0" +"@babel/runtime@^7.4.5": + version "7.4.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" + integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/standalone@^7.3.2": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.4.4.tgz#a40fbed37254e0a6dd55ea2db142c7b357fc4299" @@ -4414,12 +4421,12 @@ 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@3.1.0, deepmerge@^3.1.0: +deepmerge@3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.1.0.tgz#a612626ce4803da410d77554bfd80361599c034d" integrity sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg== -deepmerge@^2.0.1: +deepmerge@^2.0.1, 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== @@ -11398,6 +11405,11 @@ react-element-to-jsx-string@^14.0.2: is-plain-object "2.0.4" stringify-object "3.2.2" +react-fast-compare@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + react-fela@^10.2.0: version "10.2.0" resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-10.2.0.tgz#dd702239e228847b5ac6504a62fdea8bcd8f9650" @@ -11492,15 +11504,16 @@ react-side-effect@^1.0.2: exenv "^1.2.1" shallowequal "^1.0.1" -react-source-render@2.0.0-beta.6: - version "2.0.0-beta.6" - resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-2.0.0-beta.6.tgz#d83a530ae914922517bd88207dc11fddb3622d70" - integrity sha512-6umjXJE8ijGjjnOGmnlU2Iwk0v3BLGz+G2+/oUoPbxM6zutEur6aXCUB/Rsf5c88LfGOM6vwNrgR7D6NaY5/4A== +react-source-render@3.0.0-3: + version "3.0.0-3" + resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-3.0.0-3.tgz#6d624fc8489f2b3bdf6c2234e224edc82c570488" + integrity sha512-l/xnrmdwV2VKEWG/dmSB6gaeCgDFdXrPP/glNuMLJDInejwNzv3Gs8wgzwGSAlSp4JPCrQmxiQq/59LC2CdSOQ== dependencies: - deepmerge "^3.1.0" - fast-memoize "^2.5.1" + "@babel/runtime" "^7.4.5" + deepmerge "^2.2.1" prop-types "^15.6.2" - react-is "^16.8.1" + react-fast-compare "^2.0.4" + react-is "^16.6.3" react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.5: version "16.8.6" @@ -11793,6 +11806,11 @@ regenerator-runtime@^0.12.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.0.tgz#8052ac952d85b10f3425192cd0c53f45cf65c6cb" integrity sha512-SpV2LhF5Dm9UYMEprB3WwsBnWwqTrmjrm2UZb42cl2G02WVGgx7Mg8aa9pdLEKp6hZ+/abcMc2NxKA8f02EG2w== +regenerator-runtime@^0.13.2: + version "0.13.2" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447" + integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA== + regenerator-transform@^0.13.4: version "0.13.4" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.4.tgz#18f6763cf1382c69c36df76c6ce122cc694284fb"