feat(docz-core): use html template as component

doczjs · Jun 9, 2018 · b7a2dc0 · b7a2dc0
1 parent 2fbedd3
commit b7a2dc0
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 189 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "devDependencies": {
     "del": "^3.0.0",
     "lerna": "^2.11.0",
-    "libundler": "^1.6.4",
+    "libundler": "^1.7.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.13.5",
     "trash-cli": "^1.4.0",

diff --git a/packages/docz-core/librc.js b/packages/docz-core/librc.js
@@ -6,6 +6,7 @@ module.exports = {
     'react-dev-utils/FileSizeReporter',
     'react-dev-utils/formatWebpackMessages',
     'react-dev-utils/printBuildError',
+    'react-dom/server',
   ]),
   plugins: [
     copy([

diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
@@ -51,8 +51,10 @@
     "load-cfg": "^0.1.2-beta.0",
     "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",
@@ -88,6 +90,8 @@
     "@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.ts → packages/docz-core/src/Entries.tsx b/packages/docz-core/src/Entries.ts → packages/docz-core/src/Entries.tsx
@@ -1,30 +1,30 @@
+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, readIfExist } from './utils/fs'
+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 fromDocz = (file: string) => path.join(paths.docz, file)
 
 const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
   const { plugins, title, description, theme } = config
   const props = Plugin.propsOfPlugins(plugins)
+  const html = renderToString(<Html title={title} description={description} />)
 
   const wrappers = props('wrapper')
   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(fromTemplates('index.tpl.html'))
-  const head = await readIfExist(fromDocz('_head.html'))
-  const scripts = await readIfExist(fromDocz('_scripts.html'))
 
   const rawRootJs = root({
     theme,
@@ -38,16 +38,9 @@ const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
     onPostRenders,
   })
 
-  const rawIndexHtml = html({
-    title,
-    description,
-    head: head ? head.trimRight() : '',
-    scripts: scripts ? scripts.trimRight() : '',
-  })
-
   await touch(paths.rootJs, rawRootJs)
   await touch(paths.indexJs, rawIndexJs)
-  await touch(paths.indexHtml, rawIndexHtml)
+  await touch(paths.indexHtml, `<!DOCTYPE html>${html}`)
 }
 
 const writeImports = async (map: EntryMap): Promise<void> => {

diff --git a/packages/docz-core/src/components/Html.tsx b/packages/docz-core/src/components/Html.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SFC } from 'react'
+
+export interface HtmlProps {
+  title: string
+  description: string
+}
+
+export const Html: SFC<HtmlProps> = ({ title, description }) => (
+  <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 httpEquiv="X-UA-Compatible" content="ie=edge" />
+      <title>{title}</title>
+    </head>
+    <body>
+      <div id="root" />
+    </body>
+  </html>
+)
diff --git a/packages/docz-core/templates/index.tpl.html b/packages/docz-core/templates/index.tpl.html