feat(docz-core): add webpack-serve-overlay as error overlay

doczjs · Jul 30, 2018 · 263badf · 263badf
1 parent 1ac1ea8
commit 263badf
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 4 deletions.
diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
@@ -86,6 +86,7 @@
     "webpack-hot-client": "^4.1.1",
     "webpack-manifest-plugin": "^2.0.3",
     "webpack-serve": "^2.0.2",
+    "webpack-serve-overlay": "^0.2.2",
     "webpack-serve-waitpage": "^1.0.1",
     "webpackbar": "^2.6.1",
     "ws": "^6.0.0",

diff --git a/packages/docz-core/src/Entries.tsx b/packages/docz-core/src/Entries.tsx
@@ -30,13 +30,14 @@ const writeAppFiles = async (config: Config, dev: boolean): Promise<void> => {
   const root = await compiled(fromTemplates('root.tpl.js'))
   const js = await compiled(fromTemplates('index.tpl.js'))
   const html = await compiled(getHtmlFilepath(indexHtml))
+  const websocketUrl = `ws://${config.websocketHost}:${config.websocketPort}`
 
   const rawRootJs = root({
     theme,
     isProd: !dev,
     wrapper: config.wrapper,
     hashRouter: config.hashRouter,
-    websocketUrl: `ws://${config.websocketHost}:${config.websocketPort}`,
+    websocketUrl,
   })
 
   const rawIndexJs = js({

diff --git a/packages/docz-core/src/bundlers/webpack/config.ts b/packages/docz-core/src/bundlers/webpack/config.ts
@@ -237,6 +237,11 @@ export const createConfig = (args: Args, env: Env) => (
     {
       BASE_URL: JSON.stringify(base),
       NODE_ENV: JSON.stringify(env),
+      'process.env': {
+        WEBPACK_SERVE_OVERLAY_WS_URL: JSON.stringify(
+          `ws://${args.hotHost}:${args.hotPort}`
+        ),
+      },
     },
   ])
 

diff --git a/packages/docz-core/src/bundlers/webpack/devserver.ts b/packages/docz-core/src/bundlers/webpack/devserver.ts
@@ -33,6 +33,8 @@ export const devServerConfig = (
     hotClient: {
       reload: false,
       logLevel: logLevel('error'),
+      host: args.hotHost,
+      port: args.hotPort,
     },
     add: (app: Koa, middleware: any, options: any) => {
       middleware.webpack()

diff --git a/packages/docz-core/src/commands/args.ts b/packages/docz-core/src/commands/args.ts
@@ -36,6 +36,8 @@ export interface Argv {
   port: number
   websocketPort: number
   websocketHost: string
+  hotPort: number
+  hotHost: string
   /* template args */
   title: string
   description: string
@@ -122,6 +124,14 @@ export const args = (yargs: any) => {
     type: 'number',
     default: getEnv('port', 3000),
   })
+  yargs.positional('hotHost', {
+    type: 'string',
+    default: getEnv('hot.host', '127.0.0.1'),
+  })
+  yargs.positional('hotPort', {
+    type: 'number',
+    default: getEnv('hot.port', 8090),
+  })
   yargs.positional('websocketHost', {
     type: 'string',
     default: getEnv('websocket.host', '127.0.0.1'),

diff --git a/packages/docz-core/src/commands/dev.ts b/packages/docz-core/src/commands/dev.ts
@@ -15,14 +15,19 @@ export const dev = async (args: Config) => {
   const config = loadConfig(args)
   const port = await detectPort(config.port)
   const websocketPort = await detectPort(config.websocketPort)
+  const hotPort = await detectPort(config.hotPort)
   const entries = new Entries(config)
 
-  const bundler = webpack({ ...config, port }, env)
+  envDotProp.set(
+    'webpack.server.overlay.ws.url',
+    `ws://${config.hotHost}:${hotPort}`
+  )
+
+  const newConfig = { ...config, websocketPort, hotPort, port }
+  const bundler = webpack(newConfig, env)
   const bundlerConfig = await bundler.getConfig(env)
   const server = await bundler.createServer(bundlerConfig)
   const { app } = await server.start()
-
-  const newConfig = { ...config, websocketPort }
   const dataServer = new DataServer({
     server: app.server,
     config: newConfig,

diff --git a/packages/docz-core/templates/index.tpl.js b/packages/docz-core/templates/index.tpl.js
@@ -1,3 +1,4 @@
+<% if (!isProd) {%>import 'webpack-serve-overlay'<%}%>
 import React from 'react'
 import ReactDOM from 'react-dom'
 

diff --git a/yarn.lock b/yarn.lock
@@ -2292,6 +2292,10 @@ ansi-escapes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
 
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -6740,6 +6744,10 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-entities@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+
 html-minifier@^3.2.3, html-minifier@^3.4.3:
   version "3.5.15"
   resolved "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.15.tgz#f869848d4543cbfd84f26d5514a2a87cbf9a05e0"
@@ -12971,6 +12979,13 @@ webpack-manifest-plugin@^2.0.3:
     lodash ">=3.5 <5"
     tapable "^1.0.0"
 
+webpack-serve-overlay@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/webpack-serve-overlay/-/webpack-serve-overlay-0.2.2.tgz#f67857d07b5cb751c84731c531199a32a325b94c"
+  dependencies:
+    ansi-html "0.0.7"
+    html-entities "^1.2.1"
+
 webpack-serve-waitpage@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/webpack-serve-waitpage/-/webpack-serve-waitpage-1.0.1.tgz#8aee5bf8aafcf997c72a74fc48ae1c495001fde9"