diff --git a/packages/docz-core/templates/imports.tpl.js b/packages/docz-core/templates/imports.tpl.js index 5cf9b3d4f..a5111798d 100644 --- 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 index bba3eb608..8dc77181e 100644 --- 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 index e6e284551..353e92250 100644 --- 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 index 5422d0730..b383f7a0a 100644 --- 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 index 876a8b29f..2cddd0b58 100644 --- a/packages/docz/src/components/DataServer.tsx +++ b/packages/docz/src/components/DataServer.tsx @@ -29,13 +29,13 @@ export class DataServer extends Component { 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 index d9761219e..cd51a8f68 100644 --- 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 & { 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 = ({ return ( - - {(entries: EntryMap, imports: ImportMap) => ( - - {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 - }, - }) - - return ( - entry && ( - - Page ? ( - - - - ) : ( - + + {({ imports }) => { + if (!imports) return + return ( + + {(entries: EntryMap) => ( + + {Object.keys(imports).map(path => { + const entry = entries && entries[path] + const AsyncComponent = withMDXComponents( + importedComponent(imports[path], { LoadingComponent }) + ) + + return ( + entry && ( + + Page ? ( + + + + ) : ( + + ) + } + /> ) - } - /> - ) - ) - })} - {NotFound && } - - )} - + ) + })} + {NotFound && } + + )} + + ) + }} + ) } diff --git a/packages/docz/src/components/ThemeConfig.tsx b/packages/docz/src/components/ThemeConfig.tsx index a0e3bf564..515db1cc4 100644 --- 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 = ({ children }) => { diff --git a/packages/docz/src/state.ts b/packages/docz/src/state.ts index c72602ab5..536a2e949 100644 --- a/packages/docz/src/state.ts +++ b/packages/docz/src/state.ts @@ -45,20 +45,12 @@ export type EntryMap = Record export type ImportMap = Record Promise> 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 index 7d54a0901..b9f1dbb3e 100644 --- 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 }) => {children} export interface ThemeProps { - db: Database + db: State imports: ImportMap wrapper?: CT hashRouter?: boolean @@ -25,6 +25,7 @@ export type ThemeReturn = (WrappedComponent: CT) => CT export type TransformFn = (config: ThemeConfig) => ThemeConfig interface ThemeContext { + imports?: ImportMap themeConfig?: ThemeConfig transform?: TransformFn } @@ -39,15 +40,12 @@ export function theme( const Theme: CT = 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 ( - - + + diff --git a/packages/docz/src/types.d.ts b/packages/docz/src/types.d.ts index 0968f3332..04cd3ec97 100644 --- 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 index 40256f365..399c2c616 100644 --- 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" } }