@ethlete/query-devtools 1.0.0-next.10 → 1.0.0-next.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/fesm2022/ethlete-query-devtools-lazy.mjs +34 -20
- package/fesm2022/ethlete-query-devtools-lazy.mjs.map +1 -1
- package/fesm2022/ethlete-query-devtools-toggle.mjs +3 -3
- package/fesm2022/ethlete-query-devtools.mjs +769 -391
- package/fesm2022/ethlete-query-devtools.mjs.map +1 -1
- package/package.json +4 -4
- package/types/ethlete-query-devtools-lazy.d.ts +11 -3
- package/types/ethlete-query-devtools.d.ts +39 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Outside a development build the devtools session vault now defaults to `none`, so a plain login no longer leaves tokens in `sessionStorage`, and a vault left in either store is removed on load.
|
|
8
|
+
- Client `headers` and per-request `args.headers` accept a plain record as well as `HttpHeaders`, for secure queries too, so a client needs no `@angular/*` import to set a header.
|
|
9
|
+
|
|
10
|
+
## 1.0.0-next.11
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- The Angular peer dependency moves from 22.0.7 to 22.1.6. Angular 22.0.x is affected by
|
|
15
|
+
GHSA-hh8m-fm6v-7cvg, a sanitization bypass through directive host bindings, fixed in 22.1.0.
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- The response diff now reports a changed `Blob`, `Date`, `Map` or `Set` instead of reading two
|
|
20
|
+
of them as identical, and searching a folded slice no longer overflows on a cyclic value.
|
|
21
|
+
- The panel drops a client's Cache, Faults and Events entries once that client's injector is destroyed,
|
|
22
|
+
instead of keeping them alive for as long as one of its queries has a tombstone.
|
|
23
|
+
- Query devtools exports stop carrying live credentials: a copied report slims its args, a session export omits auth-provider bodies and redacts credential-named keys, and an unchainable secure request drops its `Authorization`.
|
|
24
|
+
- `<et-query-devtools-lazy>` renders nothing without `provideQueryDevtools()` - no floating button, no
|
|
25
|
+
shortcut, no panel download - and the now-public `isQueryDevtoolsEnabled()` is what it gates on.
|
|
26
|
+
- Devtools panel: the Settings client picker now narrows the Events tab, exports survive cyclic and non-JSON bodies, the `no auth` chip covers mocks with a query string, and copy confirmations reset again.
|
|
27
|
+
- The devtools session vault no longer uses `localStorage` outside a development build, so a deployed
|
|
28
|
+
app can mount the panel without leaving tokens and credentials behind.
|
|
29
|
+
|
|
3
30
|
## 1.0.0-next.10
|
|
4
31
|
|
|
5
32
|
### Minor Changes
|
|
@@ -2,7 +2,7 @@ import { DOCUMENT } from '@angular/common';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { inject, signal, computed, DestroyRef, ViewEncapsulation, Component } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
-
import { queryDevtoolsFaults, queryDevtoolsTokenTtls, queryDevtoolsArmedMocks, queryDevtoolsEntries, setQueryDevtoolsUiMounted } from '@ethlete/query';
|
|
5
|
+
import { isQueryDevtoolsEnabled, queryDevtoolsFaults, queryDevtoolsTokenTtls, queryDevtoolsArmedMocks, queryDevtoolsEntries, setQueryDevtoolsUiMounted } from '@ethlete/query';
|
|
6
6
|
import { fromEvent, filter, tap } from 'rxjs';
|
|
7
7
|
import { wasQueryDevtoolsOpen, QueryDevtoolsToggleComponent } from '@ethlete/query-devtools/toggle';
|
|
8
8
|
|
|
@@ -11,6 +11,9 @@ import { wasQueryDevtoolsOpen, QueryDevtoolsToggleComponent } from '@ethlete/que
|
|
|
11
11
|
* first asked for, then downloads `<et-query-devtools>` as its own chunk and hands over. Use it instead
|
|
12
12
|
* of `<et-query-devtools>` to keep the panel out of the bundle an application ships to its users.
|
|
13
13
|
*
|
|
14
|
+
* Without `provideQueryDevtools()` it renders nothing at all - no toggle, no shortcut, and the panel
|
|
15
|
+
* chunk is never requested - so it can be left mounted in a production build.
|
|
16
|
+
*
|
|
14
17
|
* Everything else is identical - the same toggle, the same `Ctrl/Cmd + Alt + Q` shortcut, and a panel
|
|
15
18
|
* that was open when the tab last stored its state comes back open without a click.
|
|
16
19
|
*
|
|
@@ -23,11 +26,16 @@ class QueryDevtoolsLazyComponent {
|
|
|
23
26
|
constructor() {
|
|
24
27
|
this.document = inject(DOCUMENT);
|
|
25
28
|
/**
|
|
26
|
-
* Whether
|
|
27
|
-
*
|
|
29
|
+
* Whether `provideQueryDevtools()` is in the application. Everything else here is gated on it - the
|
|
30
|
+
* stored view state read, the shortcut listener and the template - so a build that ships the shell
|
|
31
|
+
* without the provider renders nothing and can never load the panel.
|
|
32
|
+
*/
|
|
33
|
+
this.enabled = isQueryDevtoolsEnabled();
|
|
34
|
+
/**
|
|
35
|
+
* Whether the panel is wanted. Whether it was already open has to be answered before the panel exists,
|
|
36
|
+
* which is why the stored view state is read here rather than asked of the panel.
|
|
28
37
|
*/
|
|
29
|
-
this.
|
|
30
|
-
this.load = signal(this.restoredOpen, /* @ts-ignore */
|
|
38
|
+
this.load = signal(this.enabled && wasQueryDevtoolsOpen(), /* @ts-ignore */
|
|
31
39
|
...(ngDevMode ? [{ debugName: "load" }] : /* istanbul ignore next */ []));
|
|
32
40
|
/** A restored panel opens because it was open; one that was clicked open has to be told to. */
|
|
33
41
|
this.openOnLoad = signal(false, /* @ts-ignore */
|
|
@@ -43,6 +51,8 @@ class QueryDevtoolsLazyComponent {
|
|
|
43
51
|
queryDevtoolsArmedMocks().size > 0 ||
|
|
44
52
|
queryDevtoolsEntries().some((entry) => (entry.overrides?.list().length ?? 0) > 0), /* @ts-ignore */
|
|
45
53
|
...(ngDevMode ? [{ debugName: "tampered" }] : /* istanbul ignore next */ []));
|
|
54
|
+
if (!this.enabled)
|
|
55
|
+
return;
|
|
46
56
|
setQueryDevtoolsUiMounted(true);
|
|
47
57
|
inject(DestroyRef).onDestroy(() => setQueryDevtoolsUiMounted(false));
|
|
48
58
|
// The same shortcut the panel installs, for the one press that has to happen before it exists. Once
|
|
@@ -58,30 +68,34 @@ class QueryDevtoolsLazyComponent {
|
|
|
58
68
|
this.openOnLoad.set(true);
|
|
59
69
|
this.load.set(true);
|
|
60
70
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
63
|
-
@
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsLazyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryDevtoolsLazyComponent, isStandalone: true, selector: "et-query-devtools-lazy", ngImport: i0, template: `
|
|
73
|
+
@if (enabled) {
|
|
74
|
+
@defer (when load()) {
|
|
75
|
+
<et-query-devtools [startOpen]="openOnLoad()" />
|
|
76
|
+
} @placeholder {
|
|
77
|
+
<et-query-devtools-toggle [tampered]="tampered()" (openChange)="open()" />
|
|
78
|
+
} @loading {
|
|
79
|
+
<et-query-devtools-toggle [tampered]="tampered()" />
|
|
80
|
+
}
|
|
69
81
|
}
|
|
70
82
|
`, isInline: true, dependencies: [{ kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", inputs: ["tampered"], outputs: ["openChange"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [/* @ts-ignore */
|
|
71
83
|
import('@ethlete/query-devtools').then(m => m.QueryDevtoolsComponent)]] }); }
|
|
72
84
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.
|
|
85
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsLazyComponent, resolveDeferredDeps: () => [/* @ts-ignore */
|
|
74
86
|
import('@ethlete/query-devtools').then(m => m.QueryDevtoolsComponent)], resolveMetadata: QueryDevtoolsComponent => ({ decorators: [{
|
|
75
87
|
type: Component,
|
|
76
88
|
args: [{
|
|
77
89
|
selector: 'et-query-devtools-lazy',
|
|
78
90
|
template: `
|
|
79
|
-
@
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
91
|
+
@if (enabled) {
|
|
92
|
+
@defer (when load()) {
|
|
93
|
+
<et-query-devtools [startOpen]="openOnLoad()" />
|
|
94
|
+
} @placeholder {
|
|
95
|
+
<et-query-devtools-toggle [tampered]="tampered()" (openChange)="open()" />
|
|
96
|
+
} @loading {
|
|
97
|
+
<et-query-devtools-toggle [tampered]="tampered()" />
|
|
98
|
+
}
|
|
85
99
|
}
|
|
86
100
|
`,
|
|
87
101
|
encapsulation: ViewEncapsulation.None,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ethlete-query-devtools-lazy.mjs","sources":["../../../../libs/query-devtools/lazy/query-devtools-lazy.component.ts","../../../../libs/query-devtools/lazy/ethlete-query-devtools-lazy.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, computed, DestroyRef, inject, signal, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n queryDevtoolsArmedMocks,\n queryDevtoolsEntries,\n queryDevtoolsFaults,\n queryDevtoolsTokenTtls,\n setQueryDevtoolsUiMounted,\n} from '@ethlete/query';\nimport { filter, fromEvent, tap } from 'rxjs';\nimport { QueryDevtoolsComponent } from '@ethlete/query-devtools';\nimport { QueryDevtoolsToggleComponent, wasQueryDevtoolsOpen } from '@ethlete/query-devtools/toggle';\n\n/**\n * The query devtools behind a deferred load: renders only the floating toggle button until the panel is\n * first asked for, then downloads `<et-query-devtools>` as its own chunk and hands over. Use it instead\n * of `<et-query-devtools>` to keep the panel out of the bundle an application ships to its users.\n *\n * Everything else is identical - the same toggle, the same `Ctrl/Cmd + Alt + Q` shortcut, and a panel\n * that was open when the tab last stored its state comes back open without a click.\n *\n * @example\n * ```html\n * <et-query-devtools-lazy />\n * ```\n */\n@Component({\n selector: 'et-query-devtools-lazy',\n template: `\n @defer (when load()) {\n
|
|
1
|
+
{"version":3,"file":"ethlete-query-devtools-lazy.mjs","sources":["../../../../libs/query-devtools/lazy/query-devtools-lazy.component.ts","../../../../libs/query-devtools/lazy/ethlete-query-devtools-lazy.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, computed, DestroyRef, inject, signal, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n isQueryDevtoolsEnabled,\n queryDevtoolsArmedMocks,\n queryDevtoolsEntries,\n queryDevtoolsFaults,\n queryDevtoolsTokenTtls,\n setQueryDevtoolsUiMounted,\n} from '@ethlete/query';\nimport { filter, fromEvent, tap } from 'rxjs';\nimport { QueryDevtoolsComponent } from '@ethlete/query-devtools';\nimport { QueryDevtoolsToggleComponent, wasQueryDevtoolsOpen } from '@ethlete/query-devtools/toggle';\n\n/**\n * The query devtools behind a deferred load: renders only the floating toggle button until the panel is\n * first asked for, then downloads `<et-query-devtools>` as its own chunk and hands over. Use it instead\n * of `<et-query-devtools>` to keep the panel out of the bundle an application ships to its users.\n *\n * Without `provideQueryDevtools()` it renders nothing at all - no toggle, no shortcut, and the panel\n * chunk is never requested - so it can be left mounted in a production build.\n *\n * Everything else is identical - the same toggle, the same `Ctrl/Cmd + Alt + Q` shortcut, and a panel\n * that was open when the tab last stored its state comes back open without a click.\n *\n * @example\n * ```html\n * <et-query-devtools-lazy />\n * ```\n */\n@Component({\n selector: 'et-query-devtools-lazy',\n template: `\n @if (enabled) {\n @defer (when load()) {\n <et-query-devtools [startOpen]=\"openOnLoad()\" />\n } @placeholder {\n <et-query-devtools-toggle [tampered]=\"tampered()\" (openChange)=\"open()\" />\n } @loading {\n <et-query-devtools-toggle [tampered]=\"tampered()\" />\n }\n }\n `,\n encapsulation: ViewEncapsulation.None,\n imports: [QueryDevtoolsComponent, QueryDevtoolsToggleComponent],\n})\nexport class QueryDevtoolsLazyComponent {\n private document = inject(DOCUMENT);\n\n /**\n * Whether `provideQueryDevtools()` is in the application. Everything else here is gated on it - the\n * stored view state read, the shortcut listener and the template - so a build that ships the shell\n * without the provider renders nothing and can never load the panel.\n */\n protected enabled = isQueryDevtoolsEnabled();\n\n /**\n * Whether the panel is wanted. Whether it was already open has to be answered before the panel exists,\n * which is why the stored view state is read here rather than asked of the panel.\n */\n protected load = signal(this.enabled && wasQueryDevtoolsOpen());\n\n /** A restored panel opens because it was open; one that was clicked open has to be told to. */\n protected openOnLoad = signal(false);\n\n /**\n * Whether anything armed is changing what the app does, for the dot on the closed toggle. The panel's\n * own badge is per-query and finer-grained; this covers what can already be armed before the panel has\n * ever been loaded - overrides and mocks restored from a previous page load, and anything an app or a\n * test armed through the API.\n */\n protected tampered = computed(\n () =>\n Object.keys(queryDevtoolsFaults()).length > 0 ||\n Object.keys(queryDevtoolsTokenTtls()).length > 0 ||\n queryDevtoolsArmedMocks().size > 0 ||\n queryDevtoolsEntries().some((entry) => (entry.overrides?.list().length ?? 0) > 0),\n );\n\n constructor() {\n if (!this.enabled) return;\n\n setQueryDevtoolsUiMounted(true);\n inject(DestroyRef).onDestroy(() => setQueryDevtoolsUiMounted(false));\n\n // The same shortcut the panel installs, for the one press that has to happen before it exists. Once\n // the panel is loaded it owns the key, so this stops at the first press it handles.\n fromEvent<KeyboardEvent>(this.document, 'keydown')\n .pipe(\n filter(() => !this.load()),\n filter((e) => (e.ctrlKey || e.metaKey) && e.altKey && (e.code === 'KeyQ' || e.key.toLowerCase() === 'q')),\n tap((e) => {\n e.preventDefault();\n this.open();\n }),\n takeUntilDestroyed(),\n )\n .subscribe();\n }\n\n protected open() {\n this.openOnLoad.set(true);\n this.load.set(true);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -27,8 +27,8 @@ class QueryDevtoolsToggleComponent {
|
|
|
27
27
|
this.openChange = output();
|
|
28
28
|
this.shortcut = queryDevtoolsShortcutLabel();
|
|
29
29
|
}
|
|
30
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
31
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
30
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { attributes: { "data-et-overlay-layer": "2147483010" } }, ngImport: i0, template: `
|
|
32
32
|
<button (click)="openChange.emit()" type="button" title="Open query devtools ({{ shortcut }})">
|
|
33
33
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
34
34
|
<ellipse cx="12" cy="6" rx="7.5" ry="3" />
|
|
@@ -43,7 +43,7 @@ class QueryDevtoolsToggleComponent {
|
|
|
43
43
|
</button>
|
|
44
44
|
`, isInline: true, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsToggleComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
48
|
args: [{ selector: 'et-query-devtools-toggle', template: `
|
|
49
49
|
<button (click)="openChange.emit()" type="button" title="Open query devtools ({{ shortcut }})">
|