feat(docz-theme-default): start logic to create theme feature

doczjs · Apr 15, 2018 · 900cf2b · 900cf2b
1 parent 05ac064
commit 900cf2b
Show file tree

Hide file tree

Showing 16 changed files with 230 additions and 74 deletions.
diff --git a/examples/basic/.babelrc b/examples/basic/.babelrc
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "playgrodd": "../../packages/playgrood/build/main",
+        "playgrodd-theme-default": "../../packages/playgrood/build/main/theme/default.js"
+      }
+    }]
+  ]
+}
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -9,6 +9,7 @@
     "playgrodd": "^0.0.1"
   },
   "devDependencies": {
+    "babel-plugin-module-resolver": "^3.1.0",
     "babel-preset-react": "^6.24.1"
   }
 }
diff --git a/packages/playgrood/package.json b/packages/playgrood/package.json
@@ -21,11 +21,13 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "babylon": "^6.18.0",
+    "create-react-context": "^0.2.1",
     "express": "^4.16.3",
     "fast-glob": "^2.2.0",
     "history": "^4.7.2",
     "mkdirp": "^0.5.1",
     "parcel-bundler": "^1.6.2",
+    "parcel-plugin-bundle-manifest": "^0.1.0",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -39,6 +41,7 @@
     "@types/express": "^4.11.1",
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^9.4.7",
+    "@types/react": "^16.0.40",
     "@types/react-dom": "^16.0.4",
     "@types/react-router-dom": "^4.2.5",
     "@types/trash": "^4.3.0",

diff --git a/packages/playgrood/src/components/AsyncRoute.tsx b/packages/playgrood/src/components/AsyncRoute.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import { IComponent } from '../utils/components'
+
+export interface IAsyncRouteProps {
+  component: IComponent
+}
+
+export interface IAsyncRouteState {
+  render(): JSX.Element | null
+}
+
+export class AsyncRoute extends React.Component<
+  IAsyncRouteProps,
+  IAsyncRouteState
+> {
+  constructor(props: any, ctx: any) {
+    super(props, ctx)
+
+    this.state = {
+      render: () => null,
+    }
+  }
+
+  async componentDidMount() {
+    const { name } = this.props.component
+    const { importFn } = window.__PLAYGRODD_COMPONENTS__[`${name}`]
+    const { doc: render } = await importFn
+
+    this.setState({ render })
+  }
+
+  render() {
+    return (
+      <Route
+        exact
+        path={this.props.component.route}
+        render={this.state.render}
+      />
+    )
+  }
+}
diff --git a/packages/playgrood/src/components/Html.tsx b/packages/playgrood/src/components/Html.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 
-import { IComponent } from '../utils/components'
+import { IComponents } from '../utils/components'
 
 export interface IHtmlProps {
-  components: IComponent[]
+  components: IComponents
 }
 
 export const Html: React.SFC<IHtmlProps> = ({ components }) => {
@@ -15,12 +15,12 @@ export const Html: React.SFC<IHtmlProps> = ({ components }) => {
         <title>playgrodd</title>
         <body>
           <div id="root" />
-          <script src="./index.jsx" />
           <script
             dangerouslySetInnerHTML={{
-              __html: `window.__PLAYGRODD_COMPONENTS__ = ${stringifiedComps}`,
+              __html: `window.__PLAYGRODD_COMPONENTS__ = ${stringifiedComps};`,
             }}
           />
+          <script src="./index.jsx" />
         </body>
       </head>
     </html>

diff --git a/packages/playgrood/src/components/Playgrodd.tsx b/packages/playgrood/src/components/Playgrodd.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Router } from 'react-router-dom'
+import { createBrowserHistory, History } from 'history'
+import createContext from 'create-react-context'
+
+export const history: History = createBrowserHistory()
+export const PlaygroddContext = createContext({})
+
+export interface IPlaygroddState {
+  components: any
+}
+
+export class Playgrodd extends React.Component<{}, IPlaygroddState> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      components: {},
+    }
+  }
+
+  setComponents = () =>
+    this.setState({ components: window.__PLAYGRODD_COMPONENTS__ })
+
+  componentDidMount() {
+    window.addEventListener('load', this.setComponents, false)
+  }
+
+  render() {
+    return (
+      <Router history={history}>
+        <PlaygroddContext.Provider value={this.state.components}>
+          {this.props.children}
+        </PlaygroddContext.Provider>
+      </Router>
+    )
+  }
+}
diff --git a/packages/playgrood/src/components/Preview.tsx b/packages/playgrood/src/components/Preview.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import { IComponents } from '../utils/components'
+import { PlaygroddContext } from '../components/Playgrodd'
+import { AsyncRoute } from '../components/AsyncRoute'
+
+export const Preview: React.SFC = () => (
+  <PlaygroddContext.Consumer>
+    {(components: IComponents) =>
+      Object.values(components).map(component => (
+        <AsyncRoute key={component.id} component={component} />
+      ))
+    }
+  </PlaygroddContext.Consumer>
+)
diff --git a/packages/playgrood/src/index.ts b/packages/playgrood/src/index.ts
@@ -0,0 +1,2 @@
+export { Preview } from './components/Preview'
+export { Playgrodd } from './components/Playgrodd'
diff --git a/packages/playgrood/src/server.tsx b/packages/playgrood/src/server.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react'
 import express, { Request, Response } from 'express'
 import { Arguments } from 'yargs'
-import { renderToString } from 'react-dom/server'
+import { renderToStaticMarkup } from 'react-dom/server'
 
 import { componentsFromPattern } from './utils/components'
 import { createBundle, DIST_PATH } from './utils/bundle'
-import { generateEntry } from './utils/entry'
+import { generateMain } from './utils/generate-main'
 
 import { Html } from './components/Html'
 
 exports.server = async ({ files: pattern }: Arguments) => {
   const app = express()
   const components = componentsFromPattern(pattern)
-  const html = renderToString(<Html components={components} />)
-  const entry = generateEntry(components)
+  const html = renderToStaticMarkup(<Html components={components} />)
 
-  const bundle = await createBundle(html, entry)
+  const main = generateMain(components)
+  const bundle = await createBundle(html, main)
 
   app.use(express.static(DIST_PATH))
   app.use('/*', async (req: Request, res: Response) => {

diff --git a/packages/playgrood/src/theme/default.tsx b/packages/playgrood/src/theme/default.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+
+import { Playgrodd } from '../components/Playgrodd'
+import { Preview } from '../components/Preview'
+
+export const App = () => (
+  <Playgrodd>
+    <ul>
+      <li>
+        <Link to="/src/Alert">Alert</Link>
+      </li>
+      <li>
+        <Link to="/src/Button">Button</Link>
+      </li>
+    </ul>
+    <Preview />
+  </Playgrodd>
+)
diff --git a/packages/playgrood/src/types.d.ts b/packages/playgrood/src/types.d.ts
@@ -2,3 +2,9 @@ declare module 'parcel-bundler' {
   var Bundler: any
   export default Bundler
 }
+
+interface Window {
+  __PLAYGRODD_COMPONENTS__: any
+}
+
+declare var window: Window
diff --git a/packages/playgrood/src/utils/bundle.ts b/packages/playgrood/src/utils/bundle.ts
@@ -33,10 +33,10 @@ const tempFile = (filepath: string, content: string) =>
     }
   })
 
-export const createBundle = async (html: string, entry: string) => {
+export const createBundle = async (html: string, main: string) => {
   await trash(DIST_PATH)
   await trash(THEME_PATH)
-  await tempFile(INDEX_JS, entry)
+  await tempFile(INDEX_JS, main)
   await tempFile(INDEX_HTML, html)
 
   const bundler = new Bundler(INDEX_HTML, {

diff --git a/packages/playgrood/src/utils/components.ts b/packages/playgrood/src/utils/components.ts
@@ -11,6 +11,11 @@ export interface IComponent {
   readonly route: string
   readonly name: string | null
   readonly hasManifest: boolean
+  readonly importFn?: any
+}
+
+export interface IComponents {
+  readonly [key: string]: IComponent
 }
 
 const ROOT_PATH = fs.realpathSync(process.cwd())
@@ -33,7 +38,7 @@ const parseEntry = (entry: string) => {
   const ast = convertToAst(entry)
   const manifest = findManifest(ast)
   const name = nameOnManifest(manifest)
-  const route = path.join(path.parse(entry).dir, name || '')
+  const route = `/${path.join(path.parse(entry).dir, name || '')}`
   const filepath = path.join(ROOT_PATH, entry)
 
   return {
@@ -45,13 +50,14 @@ const parseEntry = (entry: string) => {
   }
 }
 
-const filterByManifest = (component: IComponent) => !!component.hasManifest
+const reduceEntries = (obj: Object, entry: IComponent) =>
+  entry.hasManifest ? { ...obj, [`${entry.name}`]: entry } : obj
 
-export const componentsFromPattern = (pattern: string): IComponent[] => {
+export const componentsFromPattern = (pattern: string): IComponents => {
   const ignoreGlob = '!node_modules'
   const entries: string[] = glob.sync(
     Array.isArray(pattern) ? [...pattern, ignoreGlob] : [pattern, ignoreGlob]
   )
 
-  return entries.map(parseEntry).filter(filterByManifest)
+  return entries.map(parseEntry).reduce(reduceEntries, {})
 }
diff --git a/packages/playgrood/src/utils/entry.ts b/packages/playgrood/src/utils/entry.ts
diff --git a/packages/playgrood/src/utils/generate-main.ts b/packages/playgrood/src/utils/generate-main.ts
@@ -0,0 +1,21 @@
+import { IComponents } from './components'
+
+const mapImports = (components: IComponents) =>
+  Object.values(components).map(
+    ({ name, filepath }) =>
+      `window.__PLAYGRODD_COMPONENTS__.${name}.importFn = import('${filepath}')`
+  )
+
+export const generateMain = (components: IComponents) =>
+  `import 'babel-polyfill'
+
+  ${mapImports(components).join('\n')}
+
+  import * as React from 'react'
+  import { render } from 'react-dom'
+  import { App } from 'playgrodd-theme-default'
+
+  render(
+    <App />,
+    document.querySelector('#root')
+  )`