From 6cda6b43b11ba057c63a153f72541fa33d6a5065 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 22 May 2019 13:57:51 +0200 Subject: [PATCH 1/7] chore(docs): make HMR working properly --- docs/src/app.tsx | 3 +- .../ComponentExample/ComponentExample.tsx | 104 ++++++++---------- docs/src/components/ExternalExampleLayout.tsx | 35 +++--- docs/src/index.tsx | 3 +- docs/src/routes.tsx | 36 ++++-- package.json | 2 +- yarn.lock | 36 ++++-- 7 files changed, 113 insertions(+), 106 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..718d3d057 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash' import * as React from 'react' import { RouteComponentProps, withRouter } from 'react-router' import * as copyToClipboard from 'copy-to-clipboard' -import SourceRender from 'react-source-render' +import SourceRender from 'react-source-render/dist-web' import { Divider, @@ -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..8565de074 100644 --- a/docs/src/index.tsx +++ b/docs/src/index.tsx @@ -28,10 +28,9 @@ if (__DEV__) { module.hot.accept('./app', () => { // restore scroll const { scrollLeft, scrollTop } = document.scrollingElement! - ReactDOM.unmountComponentAtNode(mountNode) try { - render(require('./app').default) + render(App) document.scrollingElement!.scrollTop = scrollTop document.scrollingElement!.scrollLeft = scrollLeft } catch (e) { 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/package.json b/package.json index cc342582e..985763fe2 100644 --- a/package.json +++ b/package.json @@ -113,7 +113,7 @@ "react-hot-loader": "^4.8.2", "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-2", "react-test-renderer": "^16.8.5", "react-vis": "^1.11.6", "request-promise-native": "^1.0.5", diff --git a/yarn.lock b/yarn.lock index b9cddcf4f..eed98ac8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -685,6 +685,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.3.2" resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.3.2.tgz#0395f807a728201af306994f7cd27d1f3a671ff6" @@ -4476,12 +4483,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== @@ -11634,6 +11641,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" @@ -11727,15 +11739,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-2: + version "3.0.0-2" + resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-3.0.0-2.tgz#a147753c86d8560644c417f6e5e8d8430dde5868" + integrity sha512-ct26efgKnWpCHEfOEdyxo1xC5+2IyupiXUm0Z6diFw2UnNPjnXUQ9uSKK3UMV+qmodScMYYGLJIAJ532DvF0Hg== 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" @@ -12020,6 +12033,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" From 2256c6670c35f7b7ef0773c67b1a2a3716d4bf5d Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 May 2019 10:59:10 +0200 Subject: [PATCH 2/7] wip --- docs/src/index.tsx | 45 +++++-------------------------- docs/src/utils/exampleContexts.ts | 16 ++++++++++- 2 files changed, 21 insertions(+), 40 deletions(-) diff --git a/docs/src/index.tsx b/docs/src/index.tsx index 8565de074..8fe61bde6 100644 --- a/docs/src/index.tsx +++ b/docs/src/index.tsx @@ -3,45 +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! - - try { - render(App) - 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/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts index 4f201b51a..44a1c474f 100644 --- a/docs/src/utils/exampleContexts.ts +++ b/docs/src/utils/exampleContexts.ts @@ -15,8 +15,22 @@ export const examplePlaygroundContext = require.context( /** * The Webpack Context for doc site example sources. */ -export const exampleSourcesContext = require.context( +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 + module.hot.accept(exampleSourcesContext.id, () => { + exampleSourcesContext = require.context('docs/src/exampleSources/', true, /.source.json$/) + }) + } +} From dfb6ec20cbf201f941b17bc1c92520a8efa7b447 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 May 2019 15:53:39 +0200 Subject: [PATCH 3/7] wip --- docs/src/utils/exampleContexts.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts index 44a1c474f..8d4448903 100644 --- a/docs/src/utils/exampleContexts.ts +++ b/docs/src/utils/exampleContexts.ts @@ -15,6 +15,7 @@ export const examplePlaygroundContext = require.context( /** * The Webpack Context for doc site example sources. */ +// eslint-disable-next-line import/no-mutable-exports export let exampleSourcesContext = require.context( 'docs/src/exampleSources/', true, @@ -29,6 +30,7 @@ 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$/) }) From 40b3b472596600cc11b19f43cb2328ecbaa9a6c4 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 May 2019 15:55:09 +0200 Subject: [PATCH 4/7] wip --- docs/src/utils/exampleContexts.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts index 8d4448903..4121e1e14 100644 --- a/docs/src/utils/exampleContexts.ts +++ b/docs/src/utils/exampleContexts.ts @@ -15,6 +15,7 @@ export const examplePlaygroundContext = require.context( /** * The Webpack Context for doc site example sources. */ +// It's required for a hot reload // eslint-disable-next-line import/no-mutable-exports export let exampleSourcesContext = require.context( 'docs/src/exampleSources/', From 08ae0adbbe67d0f0f17eba9735553a64e49091a2 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 May 2019 15:56:57 +0200 Subject: [PATCH 5/7] wip --- .../ComponentDoc/ComponentExample/ComponentExample.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 718d3d057..1d0fdaa75 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash' import * as React from 'react' import { RouteComponentProps, withRouter } from 'react-router' import * as copyToClipboard from 'copy-to-clipboard' -import SourceRender from 'react-source-render/dist-web' +import SourceRender from 'react-source-render' import { Divider, From 5cabad47cc065b8c36ac77d8ae0a5163d9c422b2 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 May 2019 16:40:18 +0200 Subject: [PATCH 6/7] fix typo --- packages/internal-tooling/babel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/internal-tooling/babel/index.js b/packages/internal-tooling/babel/index.js index ab20d4953..c8685b7c9 100644 --- a/packages/internal-tooling/babel/index.js +++ b/packages/internal-tooling/babel/index.js @@ -6,7 +6,7 @@ module.exports = { ], plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'], env: { - delelopment: { + development: { plugins: ['react-hot-loader/babel'], }, test: { From ef109b568a20f3c2a8c97c428e5c32aea4922e66 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 23 May 2019 16:51:36 +0200 Subject: [PATCH 7/7] fix TS error --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 3f92a2447..678006d1c 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,7 @@ "react-hot-loader": "^4.8.2", "react-router": "^4.1.2", "react-router-dom": "^4.1.2", - "react-source-render": "3.0.0-2", + "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/yarn.lock b/yarn.lock index 8a91c6ab7..4f2c5b60d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11432,10 +11432,10 @@ react-side-effect@^1.0.2: exenv "^1.2.1" shallowequal "^1.0.1" -react-source-render@3.0.0-2: - version "3.0.0-2" - resolved "https://registry.yarnpkg.com/react-source-render/-/react-source-render-3.0.0-2.tgz#a147753c86d8560644c417f6e5e8d8430dde5868" - integrity sha512-ct26efgKnWpCHEfOEdyxo1xC5+2IyupiXUm0Z6diFw2UnNPjnXUQ9uSKK3UMV+qmodScMYYGLJIAJ532DvF0Hg== +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: "@babel/runtime" "^7.4.5" deepmerge "^2.2.1"