Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

Commit

Permalink
chore(docs): make HMR working properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@layershifter
layershifter committed May 22, 2019
1 parent 63cf45c commit 6cda6b4
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 106 deletions.
3 changes: 2 additions & 1 deletion docs/src/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -40,4 +41,4 @@ class App extends React.Component<any, ThemeContextData> {
}
}

export default App
export default hot(App)
104 changes: 44 additions & 60 deletions docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
35 changes: 14 additions & 21 deletions docs/src/components/ExternalExampleLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
3 changes: 1 addition & 2 deletions docs/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
36 changes: 24 additions & 12 deletions docs/src/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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__}>
Expand All @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 27 additions & 9 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 6cda6b4

Please sign in to comment.