fix(docz-core): use webpack-dev-server instead of webpack-serve

Author: pedronauck

examples/typescript/tsconfig.json

@@ -4,8 +4,7 @@
     "outDir": "dist",
     "rootDir": "src",
     "declaration": true,
-    "types": ["node"],
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules/**"]

package.json

@@ -36,12 +36,10 @@
     "@commitlint/config-conventional": "^7.1.2",
     "@commitlint/config-lerna-scopes": "^7.2.1",
     "@types/chokidar": "^1.7.5",
-    "@types/connect-history-api-fallback": "^1.3.1",
     "@types/del": "^3.0.1",
     "@types/find-up": "^2.1.1",
     "@types/fs-extra": "^5.0.4",
     "@types/html-webpack-plugin": "^3.2.0",
-    "@types/koa": "^2.0.47",
     "@types/lodash": "^4.14.119",
     "@types/lodash.flatten": "^4.4.4",
     "@types/lodash.flattendepth": "^4.7.4",
@@ -56,6 +54,7 @@
     "@types/resolve": "^0.0.8",
     "@types/webpack": "^4.4.21",
     "@types/webpack-chain": "^5.0.0",
+    "@types/webpack-dev-server": "^3.1.1",
     "@types/ws": "^6.0.1",
     "@types/yargs": "^12.0.1",
     "all-contributors-cli": "^5.4.1",

packages/babel-preset-docz/tsconfig.json

@@ -4,8 +4,7 @@
     "outDir": "dist",
     "rootDir": "src",
     "declaration": true,
-    "types": ["node"],
-    "typeRoots": ["node_modules/@types", "src/types"]
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types", "src/types"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules/**"]

packages/docz-core/librc.js

@@ -11,12 +11,16 @@ const copy = (files, dest) => ({
 })
 
 module.exports = {
+  plugins: [copy('templates/*.{js,html,json}', 'dist/templates')],
   external: Object.keys(pkg.dependencies).concat([
     'crypto',
+    'react-dev-utils/errorOverlayMiddleware',
+    'react-dev-utils/evalSourceMapMiddleware',
     'react-dev-utils/FileSizeReporter',
     'react-dev-utils/formatWebpackMessages',
+    'react-dev-utils/ignoredFiles',
     'react-dev-utils/printBuildError',
+    'react-dev-utils/WebpackDevServerUtils',
     'react-dom/server',
   ]),
-  plugins: [copy('templates/*.{js,html,json}', 'dist/templates')],
 }

packages/docz-core/package.json

@@ -38,7 +38,6 @@
     "chalk": "^2.4.1",
     "chokidar": "^2.0.4",
     "common-tags": "^1.8.0",
-    "connect-history-api-fallback": "^1.5.0",
     "cpy": "^7.0.1",
     "deepmerge": "^3.0.0",
     "detect-port": "^1.3.0",
@@ -55,11 +54,7 @@
     "happypack": "^5.0.0",
     "html-minifier": "^3.5.21",
     "humanize-string": "^1.0.2",
-    "koa": "^2.6.2",
-    "koa-connect": "^2.0.1",
-    "koa-mount": "^4.0.0",
     "koa-range": "^0.3.0",
-    "koa-static": "^5.0.0",
     "load-cfg": "^0.12.16",
     "lodash.get": "^4.4.2",
     "mini-html-webpack-plugin": "^0.2.3",
@@ -81,10 +76,9 @@
     "webpack": "^4.27.1",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-chain": "^5.0.1",
+    "webpack-dev-server": "^3.1.10",
     "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.4",
-    "webpack-serve": "^2.0.3",
-    "webpack-serve-overlay": "^0.3.0",
     "webpackbar": "^3.1.4",
     "ws": "^6.1.2",
     "yargs": "^12.0.5"

packages/docz-core/src/Bundler.ts

@@ -1,32 +1,29 @@
 import * as path from 'path'
 import logger from 'signale'
+import WebpackDevServer from 'webpack-dev-server'
 
 import { Plugin } from './Plugin'
 
 import { Config as Args, Env } from './commands/args'
 import { getBabelConfig, BabelRC } from './utils/babel-config'
 import * as paths from './config/paths'
 
-export interface Server {
-  app: any
-  on: (event: string, cb: (server: any) => void) => void
-  close: () => void
-}
-
 export interface ServerHooks {
+  onPreCreateApp<A>(app: A): void
   onCreateApp<A>(app: A): void
   OnServerListening<S>(server: S): void
 }
 
 export interface BundlerServer {
-  start(): Promise<Server>
+  start(): Promise<WebpackDevServer>
 }
 
 export type ConfigFn<C> = (babelrc: BabelRC) => Promise<C>
 export type BuildFn<C> = (config: C, dist: string, publicDir: string) => void
-
-export type ServerFnReturn = BundlerServer | Promise<BundlerServer>
-export type ServerFn<C> = (config: C, hooks: ServerHooks) => ServerFnReturn
+export type ServerFn<C> = (
+  config: C,
+  hooks: ServerHooks
+) => BundlerServer | Promise<BundlerServer>
 
 export interface BundlerConstructor<Config> {
   args: Args
@@ -54,16 +51,23 @@ export class Bundler<C = ConfigObj> {
     this.builder = build
   }
 
-  public async getConfig(env: Env): Promise<C> {
+  public async mountConfig(env: Env): Promise<C> {
+    const { plugins } = this.args
+    const isDev = env !== 'production'
+    const reduce = Plugin.reduceFromPlugins<C>(plugins)
     const babelConfig = await getBabelConfig(this.args, env)
-    const config = this.mountConfig(await this.config(babelConfig), env)
+    const userConfig = await this.config(babelConfig)
+    const config = reduce('modifyBundlerConfig', userConfig, isDev, this.args)
 
-    return this.args.modifyBundlerConfig(config, !this.isProd(env), this.args)
+    return this.args.modifyBundlerConfig(config, isDev, this.args)
   }
 
-  public async createServer(config: C): Promise<BundlerServer> {
+  public async createApp(config: C): Promise<BundlerServer> {
     const run = Plugin.runPluginsMethod(this.args.plugins)
     const hooks = {
+      onPreCreateApp<A>(app: A): void {
+        run('onPreCreateApp', app)
+      },
       onCreateApp<A>(app: A): void {
         run('onCreateApp', app)
       },
@@ -90,15 +94,4 @@ export class Bundler<C = ConfigObj> {
 
     await this.builder(config, dist, publicDir)
   }
-
-  private mountConfig(config: C, env: Env): any {
-    const { plugins } = this.args
-    const reduce = Plugin.reduceFromPlugins<C>(plugins)
-
-    return reduce('modifyBundlerConfig', config, !this.isProd(env), this.args)
-  }
-
-  private isProd(env: Env): boolean {
-    return env === 'production'
-  }
 }

packages/docz-core/src/Plugin.ts

@@ -13,6 +13,7 @@ export type ModifyBundlerConfig<C = any> = (
 ) => C
 export type ModifyBabelRC = (babelrc: BabelRC, args: Config) => BabelRC
 export type ModifyFiles = (files: string[], args: Config) => string[]
+export type onPreCreateApp = <A>(app: A) => void
 export type onCreateApp = <A>(app: A) => void
 export type OnServerListening = <S>(server: S) => void
 export type OnPreBuild = (args: Config) => void
@@ -25,6 +26,7 @@ export interface PluginFactory {
   modifyBundlerConfig?: ModifyBundlerConfig
   modifyBabelRc?: ModifyBabelRC
   modifyFiles?: ModifyFiles
+  onPreCreateApp?: onPreCreateApp
   onCreateApp?: onCreateApp
   onServerListening?: OnServerListening
   onPreBuild?: OnPreBuild
@@ -86,6 +88,7 @@ export class Plugin<C = any> implements PluginFactory {
   public readonly modifyBundlerConfig?: ModifyBundlerConfig<C>
   public readonly modifyBabelRc?: ModifyBabelRC
   public readonly modifyFiles?: ModifyFiles
+  public readonly onPreCreateApp?: onPreCreateApp
   public readonly onCreateApp?: onCreateApp
   public readonly onServerListening?: OnServerListening
   public readonly onPreBuild?: OnPreBuild
@@ -98,6 +101,7 @@ export class Plugin<C = any> implements PluginFactory {
     this.modifyBundlerConfig = p.modifyBundlerConfig
     this.modifyBabelRc = p.modifyBabelRc
     this.modifyFiles = p.modifyFiles
+    this.onPreCreateApp = p.onPreCreateApp
     this.onCreateApp = p.onCreateApp
     this.onServerListening = p.onServerListening
     this.onPreBuild = p.onPreBuild

packages/docz-core/src/commands/args.ts

@@ -64,8 +64,6 @@ export interface Argv {
   port: number
   websocketPort: number
   websocketHost: string
-  hotPort: number
-  hotHost: string
   native: boolean
   codeSandbox: boolean
   /* template args */
@@ -179,14 +177,6 @@ export const args = (env: Env) => (yargs: any) => {
     type: 'number',
     default: getEnv('docz.port', 3000),
   })
-  yargs.positional('hotHost', {
-    type: 'string',
-    default: getEnv('docz.hot.host', '127.0.0.1'),
-  })
-  yargs.positional('hotPort', {
-    type: 'number',
-    default: getEnv('docz.hot.port', 60757),
-  })
   yargs.positional('websocketHost', {
     type: 'string',
     default: getEnv('docz.websocket.host', '127.0.0.1'),

packages/docz-core/src/commands/build.ts

@@ -15,6 +15,7 @@ export const build = async (args: Config) => {
   const entries = new Entries(config)
 
   const bundler = webpack(config, env)
+  const bundlerConfig = await bundler.mountConfig(env)
   const run = Plugin.runPluginsMethod(config.plugins)
   const dataServer = new DataServer()
 
@@ -25,7 +26,7 @@ export const build = async (args: Config) => {
     await dataServer.init()
 
     await run('onPreBuild', config)
-    await bundler.build(await bundler.getConfig(env))
+    await bundler.build(bundlerConfig)
     await run('onPostBuild', config)
     await dataServer.close()
   } catch (err) {

packages/docz-core/src/commands/dev.ts

@@ -15,20 +15,13 @@ export const dev = async (args: Config) => {
   const env = envDotProp.get('node.env')
   const config = await loadConfig(args)
   const port = await detectPort(config.port)
-  const hotPort = await detectPort(config.hotPort)
   const websocketPort = await detectPort(config.websocketPort)
-
-  envDotProp.set(
-    'webpack.server.overlay.ws.url',
-    `ws://${config.hotHost}:${hotPort}`
-  )
-
-  const newConfig = { ...config, websocketPort, hotPort, port }
+  const newConfig = { ...config, websocketPort, port }
   const bundler = webpack(newConfig, env)
   const entries = new Entries(config)
 
-  const bundlerConfig = await bundler.getConfig(env)
-  const server = await bundler.createServer(bundlerConfig)
+  const bundlerConfig = await bundler.mountConfig(env)
+  const app = await bundler.createApp(bundlerConfig)
 
   try {
     await Entries.writeApp(newConfig, true)
@@ -37,12 +30,8 @@ export const dev = async (args: Config) => {
     process.exit(1)
   }
 
-  const instance = await server.start()
-  const dataServer = new DataServer(
-    instance.app.server,
-    websocketPort,
-    config.websocketHost
-  )
+  const server = await app.start()
+  const dataServer = new DataServer(server, websocketPort, config.websocketHost)
 
   dataServer.register([
     states.config(newConfig),
@@ -60,7 +49,7 @@ export const dev = async (args: Config) => {
   const signals: any = ['SIGINT', 'SIGTERM']
   for (const sig of signals) {
     process.on(sig, async () => {
-      instance.close()
+      server.close()
       process.exit()
     })
   }

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

@@ -77,9 +77,6 @@ export const getClientEnvironment = (publicUrl: string) => {
         // only be used as an escape hatch. Normally you would put images into the `src`
         // and `import` them in code to get their
         PUBLIC_URL: publicUrl,
-        WEBPACK_SERVE_OVERLAY_WS_URL: envDotProp.get(
-          'webpack.server.overlay.ws.url'
-        ),
       }
     )
   const stringified = {

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

@@ -30,6 +30,7 @@ export interface Paths {
   appPublic: string
   appNodeModules: string
   appPackageJson: string
+  appYarnLock: string
   ownNodeModules: string
 
   getDist: (dest: string) => string
@@ -53,6 +54,7 @@ export const cache = path.resolve(docz, 'cache/')
 export const appPublic = path.resolve(docz, 'public/')
 export const appNodeModules = resolveApp('node_modules')
 export const appPackageJson = resolveApp('package.json')
+export const appYarnLock = resolveOwn('yarn.lock')
 export const ownNodeModules = resolveOwn('node_modules')
 
 export const getDist = (dest: string) => path.join(root, dest)

packages/docz-core/src/types.d.ts

@@ -1,40 +1,39 @@
-declare module '@mdx-js/mdxast'
 declare module '@mdx-js/mdx'
+declare module '@mdx-js/mdxast'
 declare module '@sindresorhus/slugify'
-declare module 'babylon'
+declare module 'art-template'
 declare module 'babel-traverse'
-declare module 'env-dot-prop'
+declare module 'babylon'
 declare module 'chokidar'
+declare module 'common-tags'
+declare module 'detect-port'
+declare module 'env-dot-prop'
 declare module 'find-up'
-declare module 'humanize-string'
+declare module 'friendly-errors-webpack-plugin'
 declare module 'get-pkg-repo'
-declare module 'titleize'
-declare module 'strip-indent'
-declare module 'unist-util-remove'
+declare module 'happypack'
 declare module 'hast-util-to-string'
 declare module 'html-minifer'
-declare module 'mini-html-webpack-plugin'
-declare module 'happypack'
-declare module 'common-tags'
-declare module 'remark-frontmatter'
-declare module 'remark-parse/lib/block-elements.json'
-declare module 'rehype-slug'
-declare module 'rehype-autolink-headings'
-declare module 'art-template'
-declare module 'friendly-errors-webpack-plugin'
-declare module 'webpack-manifest-plugin'
-declare module 'terser-webpack-plugin'
+declare module 'humanize-string'
 declare module 'lodash.get'
-declare module 'signale'
-declare module 'webpackbar'
-declare module 'webpack-serve'
-declare module 'koa-mount'
-declare module 'koa-range'
-declare module 'koa-connect'
-declare module 'koa-static'
-declare module 'detect-port'
+declare module 'mini-html-webpack-plugin'
+declare module 'p-reduce'
+declare module 'react-dev-utils/errorOverlayMiddleware'
+declare module 'react-dev-utils/evalSourceMapMiddleware'
 declare module 'react-dev-utils/FileSizeReporter'
 declare module 'react-dev-utils/formatWebpackMessages'
+declare module 'react-dev-utils/ignoredFiles'
 declare module 'react-dev-utils/printBuildError'
+declare module 'react-dev-utils/WebpackDevServerUtils'
+declare module 'rehype-autolink-headings'
+declare module 'rehype-slug'
+declare module 'remark-frontmatter'
+declare module 'remark-parse/lib/block-elements.json'
+declare module 'signale'
+declare module 'strip-indent'
+declare module 'terser-webpack-plugin'
+declare module 'titleize'
+declare module 'unist-util-remove'
 declare module 'webpack-bundle-analyzer'
-declare module 'p-reduce'
+declare module 'webpack-manifest-plugin'
+declare module 'webpackbar'