Skip to content

Commit 93285dd

Browse files
committed
docs: list the new inspectors and fix the extra devframes and transfer cache notes
Add performance and build to the PangularInspector type, replace the placeholder extra devframe example with a runnable one, describe the reserved id check as the hub now runs it, and say which transfer cache exclusions withPangular({transferCache}) can change.
1 parent 61ac246 commit 93285dd

2 files changed

Lines changed: 21 additions & 5 deletions

File tree

‎apps/docs/src/content/getting-started/configuration.md‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,9 @@ type PangularInspector =
105105
| 'analog'
106106
| 'capacitor'
107107
| 'errors'
108-
| 'plugins';
108+
| 'plugins'
109+
| 'performance'
110+
| 'build';
109111

110112
type PangularAction =
111113
'forms' | 'router' | 'ngrx' | 'http' | 'analog' | 'components' | 'tanstackQuery' | 'plugins';
@@ -297,14 +299,28 @@ It is off by default because it starts processes on your machine. A value other
297299

298300
`extraDevframes` is an option of the Express hub and the Vite plugin only. It mounts other devframes on the hub that serves Pangular Inspector, so a team's own devtools or another library's devframe sit next to the Pangular docks without a second server. It takes the same input as `initHub({ devframes })` from `@devframes/hub`: devframe definitions, `{ devframe, dock }` entries to change a dock, promises and functions that return them.
299301

302+
This one adds a devframe with one RPC function. `defineDevframe` comes from the `devframe` package, which the hub runs on:
303+
300304
```ts
305+
import {defineDevframe} from 'devframe';
301306
import {initPangularHub} from '@pangular-inspector/devtools/hub';
302-
import {acmeDevframe} from '@acme/devtools';
303307

304-
const devtools = initPangularHub({extraDevframes: [acmeDevframe]});
308+
const teamTools = defineDevframe({
309+
id: 'team-tools',
310+
name: 'Team tools',
311+
version: '1.0.0',
312+
packageName: 'team-tools',
313+
homepage: 'https://example.com/team-tools',
314+
description: "The team's own devtools",
315+
setup(ctx) {
316+
ctx.rpc.register({name: 'team-tools:ping', type: 'static', handler: () => 'pong'});
317+
},
318+
});
319+
320+
const devtools = initPangularHub({extraDevframes: [teamTools]});
305321
```
306322

307-
The extra devframes run behind the same origin check, request gate and one-time code as Pangular Inspector. An entry with the id `pangular` would replace Pangular Inspector, so it is dropped with a warning, and a value that is not an array is ignored with a warning.
323+
The extra devframes run behind the same origin check, request gate and one-time code as Pangular Inspector. The hub mounts Pangular Inspector under the id `pangular`, so an entry with that id is dropped with a warning. That includes a devframe a promise or a function resolves to, which is checked once it resolves; the other entries keep their order. A value that is not an array is ignored with a warning.
308324

309325
### LAN address
310326

‎apps/docs/src/content/inspectors/ssr-http.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ The tab checks the TransferState after each server response, so **cached** is wh
147147
Every `HttpClient` request, tagged **SSR** or **Client**, and the page's own `fetch()` calls. Each row shows the method, the URL, the page that made it, the status, the time, and notes:
148148

149149
- **fetch()**: the page called `fetch()` itself, not through `HttpClient`, for example a library or a plain `await fetch(...)`. See [Native fetch calls](#native-fetch-calls).
150-
- **transfer cache**: the TransferState cache answered it. Only client requests get it, because the server never reads the cache; a server call shows its [transfer cache outcome](#transfer-cache-outcome) instead. A client request counts as a hit only when its method, response type, URL, body and params match the entry Angular stored, and Angular would cache it: no `transferCache: false`, auth headers, credentials or no-cache request.
150+
- **transfer cache**: the TransferState cache answered it. Only client requests get it, because the server never reads the cache; a server call shows its [transfer cache outcome](#transfer-cache-outcome) instead. A client request counts as a hit only when its method, response type, URL, body and params match the entry Angular stored, and Angular would cache it: no `transferCache: false`, and by default no auth headers, credentials or no-cache request. `withPangular({transferCache})` changes those defaults with `includeRequestsWithAuthHeaders`, `includeRequestsWithCredentials` and `includeNonCacheableRequests`; see [Transfer cache options](#transfer-cache-options).
151151
- **delayed N ms**: a fault rule held it back.
152152
- **mocked**: a fault rule answered it with a status below 400.
153153
- **faulted**: a fault rule failed it with a status of 400 or more, or with a network error (status 0, shown as **ERR**).

0 commit comments

Comments
 (0)