Skip to content

Commit e5e4177

Browse files
bjohansebasbjohansebas
committed
feat(client): paginate the overlay problems (#2359)
The overlay now shows one problem at a time, with a header row holding the problem badge and prev/next navigation (colored after the problem type), a page counter and arrow-key navigation. Each new problem set starts at its first page, accumulated runtime errors land on the newest one, and identical re-published sets (e.g. another bundle of a multi-compiler syncing) keep the current page. Enabled by default; disable with the overlay option's `paginate` extension (`?overlay={"paginate":false}`) to render the full list. Also ignore click targets re-rendered away mid-dispatch in the backdrop-dismiss listener, which otherwise closed the overlay when clicking the navigation buttons.
1 parent c48649f commit e5e4177

4 files changed

Lines changed: 290 additions & 23 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -375,16 +375,16 @@ entry: [
375375

376376
### Client options
377377

378-
| Name | Type | Default | Description |
379-
| :-----------------: | :---------------: | :--------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
380-
| `path` | `string` | `/__webpack_hmr` | Path the SSE endpoint is served at. Must match the server `hot.path`. |
381-
| `timeout` | `number` | `20000` | Reconnection / heartbeat watchdog timeout in milliseconds. |
382-
| `overlay` | `boolean\|Object` | `true` | In-page overlay for problems. Same value shape as webpack-dev-server's [`client.overlay`](https://webpack.js.org/configuration/dev-server/#overlay): a boolean, or a JSON object with `errors`, `warnings`, `runtimeErrors` (booleans or filter functions) and `trustedTypesPolicyName`. Partial objects are filled with `true`. Also accepts the webpack-dev-middleware extensions `styles` (CSS overrides for the overlay card), `ansiColors` (ANSI → HTML color map) and `openEditorEndpoint` (when set, file references become clickable and issue `GET <endpoint>?fileName=<file:line:column>`; the endpoint is provided by your server, e.g. a route calling [launch-editor](https://github.com/yyx990803/launch-editor)). |
383-
| `reload` | `boolean` | `true` | Fall back to a full page reload when an update cannot be applied through HMR (e.g. recovering from a broken build). Set to `false` to keep HMR-only. |
384-
| `logging` | `string` | `"info"` | Logger level — one of `"none"`, `"error"`, `"warn"`, `"info"`, `"log"`, `"verbose"`. Uses webpack's runtime logger. |
385-
| `name` | `string` | `""` | Restrict updates to a specific compilation name (useful with multi-compiler). |
386-
| `autoConnect` | `boolean` | `true` | Connect on load; set to `false` and call `setOptionsAndConnect()` manually. |
387-
| `dynamicPublicPath` | `boolean` | `false` | Prefix `path` with `__webpack_public_path__` at runtime. |
378+
| Name | Type | Default | Description |
379+
| :-----------------: | :---------------: | :--------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
380+
| `path` | `string` | `/__webpack_hmr` | Path the SSE endpoint is served at. Must match the server `hot.path`. |
381+
| `timeout` | `number` | `20000` | Reconnection / heartbeat watchdog timeout in milliseconds. |
382+
| `overlay` | `boolean\|Object` | `true` | In-page overlay for problems. Same value shape as webpack-dev-server's [`client.overlay`](https://webpack.js.org/configuration/dev-server/#overlay): a boolean, or a JSON object with `errors`, `warnings`, `runtimeErrors` (booleans or filter functions) and `trustedTypesPolicyName`. Partial objects are filled with `true`. Also accepts the webpack-dev-middleware extensions `styles` (CSS overrides for the overlay card), `ansiColors` (ANSI → HTML color map) and `openEditorEndpoint` (when set, file references become clickable and issue `GET <endpoint>?fileName=<file:line:column>`), `paginate` (show one problem at a time with prev/next navigation, enabled by default — disable with `{"paginate":false}`; the endpoint is provided by your server, e.g. a route calling [launch-editor](https://github.com/yyx990803/launch-editor)). |
383+
| `reload` | `boolean` | `true` | Fall back to a full page reload when an update cannot be applied through HMR (e.g. recovering from a broken build). Set to `false` to keep HMR-only. |
384+
| `logging` | `string` | `"info"` | Logger level — one of `"none"`, `"error"`, `"warn"`, `"info"`, `"log"`, `"verbose"`. Uses webpack's runtime logger. |
385+
| `name` | `string` | `""` | Restrict updates to a specific compilation name (useful with multi-compiler). |
386+
| `autoConnect` | `boolean` | `true` | Connect on load; set to `false` and call `setOptionsAndConnect()` manually. |
387+
| `dynamicPublicPath` | `boolean` | `false` | Prefix `path` with `__webpack_public_path__` at runtime. |
388388

389389
### Programmatic API
390390

@@ -434,7 +434,7 @@ import configureOverlay, {
434434

435435
const overlay = configureOverlay({
436436
// ansiColors, overlayStyles, trustedTypesPolicyName, catchRuntimeError,
437-
// openEditorEndpoint
437+
// openEditorEndpoint, paginate
438438
});
439439

440440
overlay.showProblems("errors", ["Something broke"]);

‎client-src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import stripAnsi from "./utils/strip-ansi.js";
99

1010
/**
1111
* Superset of webpack-dev-server's `client.overlay` object; `styles`,
12-
* `ansiColors` and `openEditorEndpoint` are webpack-dev-middleware extensions.
12+
* `ansiColors`, `openEditorEndpoint` and `paginate` are webpack-dev-middleware
13+
* extensions.
1314
* @typedef {object} OverlayOptions
1415
* @property {(boolean | ((error: string) => boolean))=} errors show build errors in the overlay
1516
* @property {(boolean | ((warning: string) => boolean))=} warnings show build warnings in the overlay
@@ -18,6 +19,7 @@ import stripAnsi from "./utils/strip-ansi.js";
1819
* @property {Record<string, string | number>=} styles overrides for the overlay card CSS
1920
* @property {Record<string, string | string[]>=} ansiColors overrides for ANSI → HTML color mapping
2021
* @property {string=} openEditorEndpoint endpoint the overlay calls (GET `?fileName=file:line:column`) when a file reference is clicked; empty disables it
22+
* @property {boolean=} paginate show one problem at a time with prev/next navigation
2123
*/
2224

2325
/**
@@ -273,6 +275,7 @@ function createReporter() {
273275
ansiColors: options.overlay.ansiColors,
274276
overlayStyles: options.overlay.styles,
275277
openEditorEndpoint: options.overlay.openEditorEndpoint,
278+
paginate: options.overlay.paginate,
276279
}
277280
: {
278281
catchRuntimeError: options.overlay,

0 commit comments

Comments
 (0)