feat: add initial gatsby integration (#630)

* chore(docz-example-gatsby): add initial structure

* fix(docz-example-gatsby): entry find on layout

* chore: add Link component as prop of theme

* chore: enable eslint on vscode config

* chore: update dependencies

* chore: update dependencies

* fix(docz-core): correct websocket url on template

* chore(docz-core): change entries data format

* chore: some adjusts to fit with gatsby

* feat(docz-example-gatsby): add gatsby poc

* feat(gatsby-theme-docz): add initial version

* fix(gatsby-theme-docz): remove build script

* fix(gatsby-theme-docz): add plugin to compile theme files

* chore: update dependencies

* fix(docz-theme-default): use tippy for tooltip

* chore: update dependencies

* fix(docz-theme-default): add hash on menu heading

* fix(docz): add shouldComponentUpdate for Theme

* fix(gatsby-theme-docz): json parse database

* chore(gatsby-theme-docz): remove some dependency

* fix(docz-theme-default): extend sidebar to the bottom of the page (#609)

* fix(docz-core): public path

Author: pedronauck

.vscode/launch.json

@@ -2,7 +2,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "docz dev",
+      "name": "Docz dev",
       "type": "node",
       "request": "launch",
       "protocol": "inspector",
@@ -14,7 +14,7 @@
       "sourceMaps": false
     },
     {
-      "name": "docz build",
+      "name": "Docz build",
       "type": "node",
       "request": "launch",
       "protocol": "inspector",
@@ -23,6 +23,30 @@
       "args": ["build"],
       "stopOnEntry": false,
       "sourceMaps": false
+    },
+    {
+      "name": "Gatsby develop",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "cwd": "${workspaceFolder}/examples/gatsby",
+      "args": ["develop"],
+      "stopOnEntry": false,
+      "runtimeArgs": ["--nolazy"],
+      "sourceMaps": false
+    },
+    {
+      "name": "Gatsby build",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "cwd": "${workspaceFolder}/examples/gatsby",
+      "args": ["build"],
+      "stopOnEntry": false,
+      "runtimeArgs": ["--nolazy"],
+      "sourceMaps": false
     }
   ]
 }

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "eslint.enable": false,
   "javascript.validate.enable": false,
   "typescript.tsdk": "node_modules/typescript/lib"
 }

core/docz-core/package.json

@@ -23,16 +23,16 @@
     "@babel/core": "7.2.2",
     "@babel/polyfill": "7.2.5",
     "@babel/runtime": "^7.3.1",
-    "@mdx-js/loader": "^0.16.6",
+    "@mdx-js/loader": "^0.17.0",
     "@sindresorhus/slugify": "^0.8.0",
     "@svgr/webpack": "^4.1.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-export-metadata": "^0.13.4",
-    "babel-plugin-named-asset-import": "^0.3.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-plugin-named-asset-import": "^0.3.1",
+    "babel-preset-react-app": "^7.0.1",
     "cache-loader": "^2.0.1",
     "chalk": "^2.4.2",
-    "chokidar": "^2.0.4",
+    "chokidar": "^2.1.1",
     "common-tags": "^1.8.0",
     "deepmerge": "^3.1.0",
     "detect-port": "^1.3.0",
@@ -49,19 +49,20 @@
     "get-pkg-repo": "^4.1.0",
     "html-minifier": "^3.5.21",
     "humanize-string": "^1.0.2",
+    "immer": "^2.0.0",
     "load-cfg": "^0.13.3",
     "lodash": "^4.17.11",
     "mini-html-webpack-plugin": "^0.2.3",
     "p-reduce": "^1.0.0",
     "pretty-error": "^2.1.1",
-    "react-dev-utils": "^7.0.1",
-    "react-docgen": "^2.21.0",
+    "react-dev-utils": "^7.0.3",
+    "react-docgen": "^3.0.0",
     "react-docgen-actual-name-handler": "0.13.5",
     "react-docgen-external-proptypes-handler": "^1.0.2",
     "react-docgen-imported-proptype-handler": "^1.0.4",
     "react-docgen-typescript": "^1.12.3",
-    "react-hot-loader": "^4.6.3",
-    "recast": "^0.16.2",
+    "react-hot-loader": "^4.6.5",
+    "recast": "^0.17.3",
     "rehype-docz": "^0.13.5",
     "rehype-slug": "^2.0.2",
     "remark-docz": "^0.13.3",
@@ -70,32 +71,32 @@
     "resolve": "^1.10.0",
     "signale": "^1.3.0",
     "source-map-loader": "^0.2.4",
-    "terser-webpack-plugin": "^1.2.1",
-    "thread-loader": "^2.1.1",
+    "terser-webpack-plugin": "^1.2.2",
+    "thread-loader": "^2.1.2",
     "titleize": "^1.0.1",
-    "typescript": "^3.2.4",
+    "typescript": "^3.3.3",
     "url-loader": "^1.1.2",
-    "webpack": "^4.29.0",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-chain": "^5.1.0",
+    "webpack": "^4.29.3",
+    "webpack-bundle-analyzer": "^3.0.4",
+    "webpack-chain": "^5.2.0",
     "webpack-dev-server": "^3.1.14",
     "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.4",
     "webpackbar": "^3.1.5",
-    "ws": "^6.1.2",
-    "yargs": "^12.0.5"
+    "ws": "^6.1.3",
+    "yargs": "^13.1.0"
   },
   "devDependencies": {
     "@types/chokidar": "^1.7.5",
-    "@types/express": "^4.16.0",
+    "@types/express": "^4.16.1",
     "@types/html-minifier": "^3.5.2",
     "@types/p-reduce": "^1.0.0",
     "@types/resolve": "^0.0.8",
-    "@types/webpack": "^4.4.23",
+    "@types/webpack": "^4.4.24",
     "@types/webpack-chain": "^5.0.0",
-    "@types/webpack-dev-server": "^3.1.1",
+    "@types/webpack-dev-server": "^3.1.2",
     "@types/ws": "^6.0.1",
-    "@types/yargs": "^12.0.5",
+    "@types/yargs": "^12.0.8",
     "cpy": "^7.0.1"
   }
 }

core/docz-core/src/bundler/devserver.ts

@@ -10,8 +10,7 @@ import { ServerHooks } from '../lib/Bundler'
 
 export const devServerConfig = (hooks: ServerHooks, args: Args) => {
   const srcPath = path.resolve(paths.root, args.src)
-  const publicDirPath = path.resolve(paths.root, args.public)
-  const publicDir = path.join(paths.root, publicDirPath)
+  const publicDir = path.resolve(paths.root, args.public)
   const nonExistentDir = path.resolve(__dirname, 'non-existent')
 
   return {

core/docz-core/src/bundler/plugins.ts

@@ -54,15 +54,12 @@ export const injections = (config: Config, args: Args, env: Env) => {
   const { stringify } = JSON
   const base = paths.servedPath(args.base)
   const plugin = require('webpack/lib/DefinePlugin')
-  const websocketUrl = `ws://${args.websocketHost}:${args.websocketPort}`
-  const isDev = env !== 'production'
 
   config.plugin('injections').use(plugin, [
     {
       ...getClientEnvironment(base).stringified,
       NODE_ENV: stringify(env),
       DOCZ_BASE_URL: args.hashRouter ? stringify('/') : stringify(base),
-      DOCZ_WEBSOCKET_URL: stringify(isDev && websocketUrl),
       DOCZ_HASH_ROUTER: stringify(args.hashRouter || false),
     },
   ])

core/docz-core/src/config/docz.ts

@@ -3,6 +3,7 @@ import { Arguments } from 'yargs'
 import { omit } from 'lodash/fp'
 import { load, loadFrom } from 'load-cfg'
 import detectPort from 'detect-port'
+import merge from 'lodash/merge'
 
 import * as paths from '../config/paths'
 import { BabelRC } from '../config/babel'
@@ -15,33 +16,47 @@ const htmlContext = {
   favicon: 'https://cdn-std.dprcdn.net/files/acc_649651/LUKiMl',
 }
 
-export const parseConfig = async (argv: Arguments<Argv>): Promise<Config> => {
-  const port = await detectPort(argv.port)
-  const websocketPort = await detectPort(argv.websocketPort)
+export const doczRcBaseConfig = {
+  htmlContext,
+  themeConfig: {},
+  docgenConfig: {},
+  modifyBundlerConfig: (config: any) => config,
+  modifyBabelRc: (babelrc: BabelRC) => babelrc,
+  onCreateWebpackChain: () => null,
+  menu: [],
+  plugins: [],
+  mdPlugins: [],
+  hastPlugins: [],
+  ignore: [
+    'readme.md',
+    'changelog.md',
+    'code_of_conduct.md',
+    'contributing.md',
+    'license.md',
+  ],
+}
+
+export const getBaseConfig = (
+  argv: Arguments<Argv>,
+  custom?: Partial<Config>
+): Config => {
   const initial = omit<Arguments<Argv>, any>(toOmit, argv)
+  const base = { ...initial, ...doczRcBaseConfig }
+  return merge(base, custom) as Config
+}
 
-  const defaultConfig: any = {
-    ...initial,
+export const parseConfig = async (
+  argv: Arguments<Argv>,
+  custom?: Partial<Config>
+): Promise<Config> => {
+  const port = await detectPort(argv.port)
+  const websocketPort = await detectPort(argv.websocketPort)
+  const defaultConfig = getBaseConfig(argv, {
     port,
     websocketPort,
     htmlContext,
-    menu: [],
-    plugins: [],
-    mdPlugins: [],
-    hastPlugins: [],
-    ignore: [
-      'readme.md',
-      'changelog.md',
-      'code_of_conduct.md',
-      'contributing.md',
-      'license.md',
-    ],
-    themeConfig: {},
-    docgenConfig: {},
-    modifyBundlerConfig: (config: any) => config,
-    modifyBabelRc: (babelrc: BabelRC) => babelrc,
-    onCreateWebpackChain: () => null,
-  }
+    ...custom,
+  })
 
   const config = argv.config
     ? loadFrom<Config>(path.resolve(argv.config), defaultConfig)

core/docz-core/src/index.ts

@@ -2,10 +2,14 @@
 export { cli } from './cli'
 
 /** config exports */
-export { parseConfig } from './config/docz'
-export { Config } from './config/argv'
+export { parseConfig, getBaseConfig } from './config/docz'
+export { Config, setArgs } from './config/argv'
 export { BabelRC } from './config/babel'
 
+/** states */
+import * as states from './states'
+export { states }
+
 /** lib exports */
 export { Plugin, createPlugin } from './lib/Plugin'
 export { DataServer } from './lib/DataServer'

core/docz-core/src/lib/DataServer.ts

@@ -1,10 +1,10 @@
 import * as fs from 'fs-extra'
-import { isFunction } from 'lodash/fp'
+import { get, isFunction } from 'lodash/fp'
 
 import * as paths from '../config/paths'
 
 export interface Params {
-  state: Record<string, any>
+  getState: () => Record<string, any>
   setState: (key: string, val: any) => void
 }
 
@@ -39,13 +39,14 @@ export class DataServer {
 
   public async start(): Promise<void> {
     const setState = (key: string, val: any) => this.setState(key, val)
+    const getState = () => this.getState()
 
     await Promise.all(
       Array.from(this.states).map(async state => {
         if (!isFunction(state.start)) return
         return state.start({
           setState,
-          state: this.mapToObject(this.state),
+          getState,
         })
       })
     )
@@ -62,11 +63,18 @@ export class DataServer {
     return () => this.listeners.clear()
   }
 
+  public getState(): Map<string, any> {
+    return this.mapToObject(this.state)
+  }
+
   private setState(key: string, val: any): void {
-    this.state.set(key, val)
+    const prev = get(key, this.getState())
+    const next = typeof val === 'function' ? val(prev) : val
+
+    this.state.set(key, next)
     this.writeDbFile()
     this.listeners.forEach(listener => {
-      listener({ type: `state.${key}`, payload: val })
+      listener({ type: `state.${key}`, payload: next })
     })
   }
 

core/docz-core/src/lib/Entries.ts

@@ -41,7 +41,6 @@ const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
     theme,
     isProd: !dev,
     wrapper: config.wrapper,
-    hashRouter: config.hashRouter,
     websocketUrl,
   })
 

core/docz-core/src/states/entries.ts

@@ -1,8 +1,10 @@
 import * as path from 'path'
 import chokidar from 'chokidar'
 import equal from 'fast-deep-equal'
+import { get } from 'lodash/fp'
 import { touch, compiled } from 'docz-utils/lib/fs'
 
+import { mapToArray } from './props'
 import { Params, State } from '../lib/DataServer'
 import { Entries, EntryMap, fromTemplates } from '../lib/Entries'
 import { Config } from '../config/argv'
@@ -16,12 +18,12 @@ const writeImports = async (map: EntryMap): Promise<void> => {
 }
 
 const updateEntries = (entries: Entries) => async (p: Params) => {
-  const old = p.state.entries
+  const prev = get('entries', p.getState())
   const map = await entries.get()
 
-  if (map && !equal(old, map)) {
+  if (map && !equal(prev, map)) {
     await writeImports(map)
-    p.setState('entries', map)
+    p.setState('entries', mapToArray(map))
   }
 }