fix(docz): using context for imports to prevent disposed hmr

doczjs · Aug 2, 2018 · b37284c · b37284c
1 parent cf7ad21
commit b37284c
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 77 deletions.
diff --git a/packages/docz-core/templates/imports.tpl.js b/packages/docz-core/templates/imports.tpl.js
@@ -1,4 +1,4 @@
-export default {
+export const imports = {
   <% entries.forEach(function(entry) { %>'<%- entry.filepath %>': () =>
     import(/* webpackPrefetch: true, webpackChunkName: "<%- entry.slug %>" */ '<%- entry.filepath %>'),<% }) %>
 }
diff --git a/packages/docz-core/templates/root.tpl.js b/packages/docz-core/templates/root.tpl.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { hot } from 'react-hot-loader'
 import Theme from '<%- theme %>'
-import imports from './imports'
+
+import { imports } from './imports'
 import db from './db.json'
 
 <% if (wrapper) {%>import Wrapper from '<%- wrapper %>'<%}%>

diff --git a/packages/docz-plugin-css/package.json b/packages/docz-plugin-css/package.json
@@ -32,10 +32,10 @@
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.2",
     "optimize-css-assets-webpack-plugin": "^5.0.0",
-    "postcss": "^7.0.1",
-    "postcss-flexbugs-fixes": "^4.0.0",
+    "postcss": "^7.0.2",
+    "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^2.1.6",
-    "sass-loader": "^7.0.3",
+    "sass-loader": "^7.1.0",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -33,10 +33,10 @@
     "pretty": "^2.0.0",
     "prop-types": "15.6.2",
     "re-resizable": "^4.7.1",
-    "react": "^16.2.0",
+    "react": "^16.4.2",
     "react-adopt": "^0.6.0",
     "react-breakpoints": "^3.0.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.4.2",
     "react-emotion": "^9.2.6",
     "react-feather": "^1.1.1",
     "react-lightweight-tooltip": "^1.0.0",

diff --git a/packages/docz/src/components/DataServer.tsx b/packages/docz/src/components/DataServer.tsx
@@ -29,13 +29,13 @@ export class DataServer extends Component<DataServerProps> {
 
       if (message.type === 'state.entries') {
         state.mutate((draft: State) => {
-          if (draft.db) draft.db.entries = message.payload
+          if (draft) draft.entries = message.payload
         })
       }
 
       if (message.type === 'state.config') {
         state.mutate((draft: State) => {
-          if (draft.db) draft.db.config = message.payload
+          if (draft) draft.config = message.payload
         })
       }
     }

diff --git a/packages/docz/src/components/DocPreview.tsx b/packages/docz/src/components/DocPreview.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
 import { Fragment, SFC, ComponentType as CT } from 'react'
 import { Switch, Route, RouteComponentProps } from 'react-router-dom'
-import { MDXProvider } from '@mdx-js/tag'
 import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
-import Loadable from 'react-loadable'
+import { MDXProvider } from '@mdx-js/tag'
+import importedComponent from 'react-imported-component'
 
-import { state, State, Entry, EntryMap, ImportMap } from '../state'
+import { state, State, Entry, EntryMap } from '../state'
+import { themeContext } from '../theme'
 
 export type PageProps = RouteComponentProps<any> & {
   doc: Entry
@@ -67,13 +68,7 @@ const defaultComponents: ComponentsMap = {
   page: Identity,
 }
 
-export const importsSelector = state.createSelector(
-  (state: State) => state.imports
-)
-
-export const entriesSelector = state.createSelector(
-  (state: State) => state.db.entries
-)
+export const entriesSelector = state.createSelector((s: State) => s.entries)
 
 export interface DocPreviewProps {
   components: ComponentsMap
@@ -93,43 +88,45 @@ export const DocPreview: SFC<DocPreviewProps> = ({
 
   return (
     <MDXProvider components={components}>
-      <state.Consumer select={[entriesSelector, importsSelector]}>
-        {(entries: EntryMap, imports: ImportMap) => (
-          <Switch>
-            {Object.keys(imports).map(path => {
-              const entry = entries && entries[path]
-              const AsyncComponent: any = Loadable({
-                loader: imports[path],
-                loading: LoadingComponent,
-                render(loaded: any, props): React.ReactNode {
-                  const Component = withMDXComponents(loaded.default)
-                  return <Component {...props} doc={entry} />
-                },
-              })
-
-              return (
-                entry && (
-                  <Route
-                    exact
-                    key={entry.id}
-                    path={entry.route}
-                    render={props =>
-                      Page ? (
-                        <Page {...props} doc={entry}>
-                          <AsyncComponent />
-                        </Page>
-                      ) : (
-                        <AsyncComponent {...props} />
+      <themeContext.Consumer>
+        {({ imports }) => {
+          if (!imports) return <LoadingComponent />
+          return (
+            <state.Consumer select={[entriesSelector]}>
+              {(entries: EntryMap) => (
+                <Switch>
+                  {Object.keys(imports).map(path => {
+                    const entry = entries && entries[path]
+                    const AsyncComponent = withMDXComponents(
+                      importedComponent(imports[path], { LoadingComponent })
+                    )
+
+                    return (
+                      entry && (
+                        <Route
+                          exact
+                          key={entry.id}
+                          path={entry.route}
+                          render={props =>
+                            Page ? (
+                              <Page {...props} doc={entry}>
+                                <AsyncComponent />
+                              </Page>
+                            ) : (
+                              <AsyncComponent {...props} />
+                            )
+                          }
+                        />
                       )
-                    }
-                  />
-                )
-              )
-            })}
-            {NotFound && <Route component={NotFound} />}
-          </Switch>
-        )}
-      </state.Consumer>
+                    )
+                  })}
+                  {NotFound && <Route component={NotFound} />}
+                </Switch>
+              )}
+            </state.Consumer>
+          )
+        }}
+      </themeContext.Consumer>
     </MDXProvider>
   )
 }
diff --git a/packages/docz/src/components/ThemeConfig.tsx b/packages/docz/src/components/ThemeConfig.tsx
@@ -10,7 +10,7 @@ export interface ThemeConfigProps {
 }
 
 export const configSelector = state.createSelector(
-  (state: State) => state.db.config
+  (state: State) => state.config
 )
 
 export const ThemeConfig: SFC<ThemeConfigProps> = ({ children }) => {

diff --git a/packages/docz/src/state.ts b/packages/docz/src/state.ts
@@ -45,20 +45,12 @@ export type EntryMap = Record<string, Entry>
 export type ImportMap = Record<string, () => Promise<MSXImport>>
 export type TransformFn = (config: Config) => Config
 
-export interface Database {
+export interface State {
   config: Config
   entries: EntryMap
 }
 
-export interface State {
-  db: Database
-  imports: ImportMap
-}
-
 export const state = createState({
-  imports: {},
-  db: {
-    config: {},
-    entries: {},
-  },
+  config: {},
+  entries: {},
 })
diff --git a/packages/docz/src/theme.tsx b/packages/docz/src/theme.tsx
@@ -7,13 +7,13 @@ import createContext from 'create-react-context'
 
 import { ErrorBoundary } from './components/ErrorBoundary'
 import { DataServer } from './components/DataServer'
-import { state, Database, ThemeConfig, ImportMap } from './state'
+import { state, State, ThemeConfig, ImportMap } from './state'
 
 declare var BASE_URL: any
 const DefaultWrapper: SFC = ({ children }) => <Fragment>{children}</Fragment>
 
 export interface ThemeProps {
-  db: Database
+  db: State
   imports: ImportMap
   wrapper?: CT
   hashRouter?: boolean
@@ -25,6 +25,7 @@ export type ThemeReturn = (WrappedComponent: CT) => CT<ThemeProps>
 export type TransformFn = (config: ThemeConfig) => ThemeConfig
 
 interface ThemeContext {
+  imports?: ImportMap
   themeConfig?: ThemeConfig
   transform?: TransformFn
 }
@@ -39,15 +40,12 @@ export function theme(
     const Theme: CT<ThemeProps> = props => {
       const { wrapper: Wrapper = DefaultWrapper, hashRouter = false } = props
       const Router = hashRouter ? HashRouter : BrowserRouter
-      const initialState = {
-        db: props.db,
-        imports: props.imports,
-      }
+      const themeState = { themeConfig, transform, imports: props.imports }
 
       return (
         <ErrorBoundary>
-          <themeContext.Provider value={{ themeConfig, transform }}>
-            <state.Provider initialState={initialState}>
+          <themeContext.Provider value={themeState}>
+            <state.Provider initialState={props.db}>
               <DataServer websocketUrl={props.websocketUrl}>
                 <Router basename={BASE_URL}>
                   <Wrapper>

diff --git a/packages/docz/src/types.d.ts b/packages/docz/src/types.d.ts
@@ -4,5 +4,4 @@ declare module '@mdx-js/tag/dist/mdx-provider'
 declare module 'array-sort'
 declare module 'capitalize'
 declare module 'react-router-hash-link'
-declare module 'pascalcase'
 declare module 'react-copy-write'
diff --git a/packages/load-cfg/package.json b/packages/load-cfg/package.json
@@ -28,6 +28,6 @@
   },
   "devDependencies": {
     "@types/find-up": "^2.1.1",
-    "@types/node": "^10.5.4"
+    "@types/node": "^10.5.5"
   }
 }