feat(docz-core): add indexHtml property on project configuration

doczjs · Jun 10, 2018 · 6bb5167 · 6bb5167
1 parent 3d25836
commit 6bb5167
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 35 deletions.
diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
@@ -51,10 +51,8 @@
     "load-cfg": "^0.1.2-beta.1",
     "lodash.get": "^4.4.2",
     "prettier": "^1.13.5",
-    "react": "^16.4.0",
     "react-dev-utils": "^5.0.1",
     "react-docgen-typescript-loader": "^2.1.0",
-    "react-dom": "^16.4.0",
     "react-hot-loader": "4.3.0",
     "remark-frontmatter": "^1.2.0",
     "remark-parse": "^5.0.0",
@@ -90,8 +88,6 @@
     "@types/lodash.get": "^4.4.3",
     "@types/node": "10.3.2",
     "@types/prettier": "^1.13.0",
-    "@types/react": "^16.3.17",
-    "@types/react-dom": "^16.0.6",
     "@types/resolve": "^0.0.8",
     "@types/webpack": "^4.4.0",
     "@types/webpack-chain": "^4.8.0",

diff --git a/packages/docz-core/src/Entries.tsx b/packages/docz-core/src/Entries.tsx
@@ -1,29 +1,29 @@
-import * as React from 'react'
 import * as fs from 'fs-extra'
 import * as glob from 'fast-glob'
 import * as path from 'path'
-import { renderToString } from 'react-dom/server'
 
 import * as paths from './config/paths'
 import { touch, compiled } from './utils/fs'
 
 import { Entry, parseMdx } from './Entry'
 import { Plugin } from './Plugin'
 import { Config } from './commands/args'
-import { Html } from './components/Html'
 
 const fromTemplates = (file: string) => path.join(paths.templates, file)
 
+const getHtmlFilepath = (indexHtml: string | undefined) =>
+  indexHtml ? path.join(paths.root, indexHtml) : fromTemplates('index.tpl.html')
+
 const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
-  const { plugins, title, description, theme } = config
+  const { plugins, title, description, theme, indexHtml } = config
   const props = Plugin.propsOfPlugins(plugins)
-  const html = renderToString(<Html title={title} description={description} />)
 
   const onPreRenders = props('onPreRender')
   const onPostRenders = props('onPostRender')
 
   const root = await compiled(fromTemplates('root.tpl.js'))
   const js = await compiled(fromTemplates('index.tpl.js'))
+  const html = await compiled(getHtmlFilepath(indexHtml))
 
   const rawRootJs = root({
     theme,
@@ -37,9 +37,14 @@ const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
     onPostRenders,
   })
 
+  const rawIndexHtml = html({
+    title,
+    description,
+  })
+
   await touch(paths.rootJs, rawRootJs)
   await touch(paths.indexJs, rawIndexJs)
-  await touch(paths.indexHtml, `<!DOCTYPE html>${html}`)
+  await touch(paths.indexHtml, rawIndexHtml)
 }
 
 const writeImports = async (map: EntryMap): Promise<void> => {

diff --git a/packages/docz-core/src/commands/args.ts b/packages/docz-core/src/commands/args.ts
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Plugin } from '../Plugin'
 
 export interface Argv {
@@ -20,6 +19,8 @@ export interface Argv {
   title: string
   description: string
   theme: string
+  wrapper?: string
+  indexHtml?: string
 }
 
 export interface ThemeConfig {
@@ -31,7 +32,6 @@ export interface Config extends Argv {
   mdPlugins: any[]
   hastPlugins: any[]
   themeConfig: ThemeConfig
-  wrapper?: React.ComponentType<any>
   modifyBundlerConfig<C>(config: C, dev: boolean): C
 }
 
@@ -75,6 +75,12 @@ export const args = (yargs: any) => {
     type: 'boolean',
     default: true,
   })
+  yargs.positional('wrapper', {
+    type: 'string',
+  })
+  yargs.positional('indexHtml', {
+    type: 'string',
+  })
   yargs.positional('debug', {
     type: 'boolean',
     default: process.env.DEBUG || false,

diff --git a/packages/docz-core/src/components/Html.tsx b/packages/docz-core/src/components/Html.tsx
diff --git a/packages/docz-core/templates/index.tpl.html b/packages/docz-core/templates/index.tpl.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="{{ description }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{{ title }}</title>
+  </head>
+  <body>
+    <div id="root" />
+  </body>
+</html>
diff --git a/yarn.lock b/yarn.lock
@@ -6583,7 +6583,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@15.6.1, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies: