@ethlete/query-devtools 1.0.0-next.17 → 1.0.0-next.18

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.0-next.18
+
+### Minor Changes
+
+- `provideQueryDevtools({ ui: () => import('@ethlete/query-devtools/lazy') })` mounts the devtools once the app has rendered, with no template tag. `@ethlete/query-devtools/lazy` exports `mountQueryDevtools`.
+
 ## 1.0.0-next.17
 
 ### Patch Changes

package/fesm2022/ethlete-query-devtools-lazy.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT } from "@angular/common";
 import * as i0 from "@angular/core";
-import { Component, DestroyRef, ViewEncapsulation, computed, inject, signal } from "@angular/core";
+import { ApplicationRef, Component, DestroyRef, RendererFactory2, ViewEncapsulation, computed, createComponent, inject, signal } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { setQueryDevtoolsUiMounted } from "@ethlete/query";
 import { isQueryDevtoolsEnabled, isQueryDevtoolsHiddenInAutomation, queryDevtoolsArmedMocks, queryDevtoolsEntries, queryDevtoolsFaults, queryDevtoolsTokenTtls } from "@ethlete/query/devtools-contract";
@@ -111,6 +111,19 @@ i0.ɵɵngDeclareClassMetadataAsync({
 		propDecorators: null
 	})
 });
-export { QueryDevtoolsLazyComponent };
+const mountQueryDevtools = (injector) => {
+	const host = injector.get(ApplicationRef);
+	const renderer = injector.get(RendererFactory2).createRenderer(null, null);
+	const element = renderer.createElement("et-query-devtools-lazy");
+	renderer.appendChild(injector.get(DOCUMENT).body, element);
+	const ref = createComponent(QueryDevtoolsLazyComponent, {
+		environmentInjector: injector,
+		hostElement: element
+	});
+	host.attachView(ref.hostView);
+	injector.get(DestroyRef).onDestroy(() => ref.destroy());
+	return ref;
+};
+export { QueryDevtoolsLazyComponent, mountQueryDevtools };
 
 //# sourceMappingURL=ethlete-query-devtools-lazy.mjs.map

package/fesm2022/ethlete-query-devtools-lazy.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ethlete-query-devtools-lazy.mjs","names":[],"sources":["../../../../libs/query-devtools/lazy/query-devtools-lazy.component.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 { setQueryDevtoolsUiMounted } from '@ethlete/query';\nimport {\n  isQueryDevtoolsEnabled,\n  isQueryDevtoolsHiddenInAutomation,\n  queryDevtoolsArmedMocks,\n  queryDevtoolsEntries,\n  queryDevtoolsFaults,\n  queryDevtoolsTokenTtls,\n} from '@ethlete/query/devtools-contract';\nimport { filter, fromEvent, tap } from 'rxjs';\nimport { QueryDevtoolsComponent } from '@ethlete/query-devtools';\nimport {\n  isQueryDevtoolsShortcut,\n  QueryDevtoolsToggleComponent,\n  ɵwasQueryDevtoolsOpen,\n} from '@ethlete/query-devtools/toggle';\n\nlet warnedMissingProvider = false;\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. It also renders nothing in\n * a browser driven by automation (`navigator.webdriver`) unless `provideQueryDevtools({ showInAutomation: true })`.\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      } @error {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" (openChange)=\"reload()\" loadFailed />\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() && !isQueryDevtoolsHiddenInAutomation();\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) {\n      if (ngDevMode && !warnedMissingProvider && !isQueryDevtoolsEnabled()) {\n        warnedMissingProvider = true;\n        console.warn(\n          \"<et-query-devtools-lazy>: provideQueryDevtools() is not in the application providers, so the devtools render nothing. Add it to bootstrapApplication's providers.\",\n        );\n      }\n\n      return;\n    }\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(isQueryDevtoolsShortcut),\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  /** Angular never retries a failed `@defer`, so only a page load can fetch the panel chunk again. */\n  protected reload() {\n    this.document.defaultView?.location.reload();\n  }\n}\n"],"mappings":";;;;;;;;AAoBA,IAAI,wBAAwB;AAqC5B,IAAa,6BAAb,MAAa,2BAA0B;CAiCrC,cAAA;EAhCQ,KAAA,WAAW,OAAO,QAAQ;EAOxB,KAAA,UAAU,uBAAsB,KAAM,CAAC,kCAAiC;EAMxE,KAAA,OAAO,OAAO,KAAK,WAAW,sBAAqB,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;EAGtD,KAAA,aAAa,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EAQ1B,KAAA,WAAW,eAEjB,OAAO,KAAK,oBAAmB,CAAE,CAAC,CAAC,SAAS,KAC5C,OAAO,KAAK,uBAAsB,CAAE,CAAC,CAAC,SAAS,KAC/C,wBAAuB,CAAE,CAAC,OAAO,KACjC,qBAAoB,CAAE,CAAC,MAAM,WAAW,MAAM,WAAW,KAAI,CAAE,CAAC,UAAU,KAAK,CAAC,GACnF,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;EAGC,IAAI,CAAC,KAAK,SAAS;GACjB,IAAI,aAAa,CAAC,yBAAyB,CAAC,uBAAsB,GAAI;IACpE,wBAAwB;IACxB,QAAQ,KACN,mKAAmK;GAEvK;GAEA;EACF;EAEA,0BAA0B,IAAI;EAC9B,OAAO,UAAU,CAAC,CAAC,gBAAgB,0BAA0B,KAAK,CAAC;EAInE,UAAyB,KAAK,UAAU,SAAS,CAAC,CAC/C,KACC,aAAa,CAAC,KAAK,KAAI,CAAE,GACzB,OAAO,uBAAuB,GAC9B,KAAK,MAAK;GACR,EAAE,eAAc;GAChB,KAAK,KAAI;EACX,CAAC,GACD,mBAAkB,CAAE,CACrB,CACA,UAAS;CACd;CAEU,OAAI;EACZ,KAAK,WAAW,IAAI,IAAI;EACxB,KAAK,KAAK,IAAI,IAAI;CACpB;CAGU,SAAM;EACd,KAAK,SAAS,aAAa,SAAS,OAAM;CAC5C;CAvEW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAA0B,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAA1B;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAA0B,cAAA;GAAA,UAAA;GAAA,UAAA;GAAA,UAhB3B;;;;;;;;;;;;;GAYT,UAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MAEiC;IAA4B,UAAA;IAAA,QAAA,CAAA,YAAA,YAAA;IAAA,SAAA,CAAA,YAAA;GAAA,CAAA;GAAA,eAAA,GAAA,kBAAA;GAAA,wBAAA,OAAA,C;;;;AAEnD,GAAA,8BAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA0B,2BAAA,C;;;GAlBtC,MAAA;GAAU,MAAA,CAAA;IACT,UAAU;IACV,UAAU;;;;;;;;;;;;;IAaV,eAAe,kBAAkB;IACjC,SAAS,CAAC,wBAAwB,4BAA4B;GAC/D,CAAA"}
+{"version":3,"file":"ethlete-query-devtools-lazy.mjs","names":[],"sources":["../../../../libs/query-devtools/lazy/query-devtools-lazy.component.ts","../../../../libs/query-devtools/lazy/mount-query-devtools.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 { setQueryDevtoolsUiMounted } from '@ethlete/query';\nimport {\n  isQueryDevtoolsEnabled,\n  isQueryDevtoolsHiddenInAutomation,\n  queryDevtoolsArmedMocks,\n  queryDevtoolsEntries,\n  queryDevtoolsFaults,\n  queryDevtoolsTokenTtls,\n} from '@ethlete/query/devtools-contract';\nimport { filter, fromEvent, tap } from 'rxjs';\nimport { QueryDevtoolsComponent } from '@ethlete/query-devtools';\nimport {\n  isQueryDevtoolsShortcut,\n  QueryDevtoolsToggleComponent,\n  ɵwasQueryDevtoolsOpen,\n} from '@ethlete/query-devtools/toggle';\n\nlet warnedMissingProvider = false;\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. It also renders nothing in\n * a browser driven by automation (`navigator.webdriver`) unless `provideQueryDevtools({ showInAutomation: true })`.\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      } @error {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" (openChange)=\"reload()\" loadFailed />\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() && !isQueryDevtoolsHiddenInAutomation();\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) {\n      if (ngDevMode && !warnedMissingProvider && !isQueryDevtoolsEnabled()) {\n        warnedMissingProvider = true;\n        console.warn(\n          \"<et-query-devtools-lazy>: provideQueryDevtools() is not in the application providers, so the devtools render nothing. Add it to bootstrapApplication's providers.\",\n        );\n      }\n\n      return;\n    }\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(isQueryDevtoolsShortcut),\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  /** Angular never retries a failed `@defer`, so only a page load can fetch the panel chunk again. */\n  protected reload() {\n    this.document.defaultView?.location.reload();\n  }\n}\n","import { DOCUMENT } from '@angular/common';\nimport { ApplicationRef, createComponent, DestroyRef, EnvironmentInjector, RendererFactory2 } from '@angular/core';\nimport { QueryDevtoolsLazyComponent } from './query-devtools-lazy.component';\n\n/**\n * Mounts `<et-query-devtools-lazy>` on the document body and destroys it with the injector. Called by\n * `provideQueryDevtools()`; call it yourself only to mount the devtools outside a template.\n */\nexport const mountQueryDevtools = (injector: EnvironmentInjector) => {\n  const host = injector.get(ApplicationRef);\n  const renderer = injector.get(RendererFactory2).createRenderer(null, null);\n  const element = renderer.createElement('et-query-devtools-lazy');\n\n  renderer.appendChild(injector.get(DOCUMENT).body, element);\n\n  const ref = createComponent(QueryDevtoolsLazyComponent, { environmentInjector: injector, hostElement: element });\n\n  host.attachView(ref.hostView);\n  injector.get(DestroyRef).onDestroy(() => ref.destroy());\n\n  return ref;\n};\n"],"mappings":";;;;;;;;AAoBA,IAAI,wBAAwB;AAqC5B,IAAa,6BAAb,MAAa,2BAA0B;CAiCrC,cAAA;EAhCQ,KAAA,WAAW,OAAO,QAAQ;EAOxB,KAAA,UAAU,uBAAsB,KAAM,CAAC,kCAAiC;EAMxE,KAAA,OAAO,OAAO,KAAK,WAAW,sBAAqB,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;EAGtD,KAAA,aAAa,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EAQ1B,KAAA,WAAW,eAEjB,OAAO,KAAK,oBAAmB,CAAE,CAAC,CAAC,SAAS,KAC5C,OAAO,KAAK,uBAAsB,CAAE,CAAC,CAAC,SAAS,KAC/C,wBAAuB,CAAE,CAAC,OAAO,KACjC,qBAAoB,CAAE,CAAC,MAAM,WAAW,MAAM,WAAW,KAAI,CAAE,CAAC,UAAU,KAAK,CAAC,GACnF,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;EAGC,IAAI,CAAC,KAAK,SAAS;GACjB,IAAI,aAAa,CAAC,yBAAyB,CAAC,uBAAsB,GAAI;IACpE,wBAAwB;IACxB,QAAQ,KACN,mKAAmK;GAEvK;GAEA;EACF;EAEA,0BAA0B,IAAI;EAC9B,OAAO,UAAU,CAAC,CAAC,gBAAgB,0BAA0B,KAAK,CAAC;EAInE,UAAyB,KAAK,UAAU,SAAS,CAAC,CAC/C,KACC,aAAa,CAAC,KAAK,KAAI,CAAE,GACzB,OAAO,uBAAuB,GAC9B,KAAK,MAAK;GACR,EAAE,eAAc;GAChB,KAAK,KAAI;EACX,CAAC,GACD,mBAAkB,CAAE,CACrB,CACA,UAAS;CACd;CAEU,OAAI;EACZ,KAAK,WAAW,IAAI,IAAI;EACxB,KAAK,KAAK,IAAI,IAAI;CACpB;CAGU,SAAM;EACd,KAAK,SAAS,aAAa,SAAS,OAAM;CAC5C;CAvEW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAA0B,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAA1B;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAA0B,cAAA;GAAA,UAAA;GAAA,UAAA;GAAA,UAhB3B;;;;;;;;;;;;;GAYT,UAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MAEiC;IAA4B,UAAA;IAAA,QAAA,CAAA,YAAA,YAAA;IAAA,SAAA,CAAA,YAAA;GAAA,CAAA;GAAA,eAAA,GAAA,kBAAA;GAAA,wBAAA,OAAA,C;;;;AAEnD,GAAA,8BAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA0B,2BAAA,C;;;GAlBtC,MAAA;GAAU,MAAA,CAAA;IACT,UAAU;IACV,UAAU;;;;;;;;;;;;;IAaV,eAAe,kBAAkB;IACjC,SAAS,CAAC,wBAAwB,4BAA4B;GAC/D,CAAA;;;;;;AChDD,MAAa,sBAAsB,aAAiC;CAClE,MAAM,OAAO,SAAS,IAAI,cAAc;CACxC,MAAM,WAAW,SAAS,IAAI,gBAAgB,CAAC,CAAC,eAAe,MAAM,IAAI;CACzE,MAAM,UAAU,SAAS,cAAc,wBAAwB;CAE/D,SAAS,YAAY,SAAS,IAAI,QAAQ,CAAC,CAAC,MAAM,OAAO;CAEzD,MAAM,MAAM,gBAAgB,4BAA4B;EAAE,qBAAqB;EAAU,aAAa;CAAO,CAAE;CAE/G,KAAK,WAAW,IAAI,QAAQ;CAC5B,SAAS,IAAI,UAAU,CAAC,CAAC,gBAAgB,IAAI,QAAO,CAAE;CAEtD,OAAO;AACT"}

package/fesm2022/ethlete-query-devtools.mjs

@@ -4945,7 +4945,7 @@ const summarizeLocks = (options) => {
 		};
 	}).sort((a, b) => KIND_ORDER[a.kind] - KIND_ORDER[b.kind] || a.label.localeCompare(b.label));
 };
-const QUERY_DEVTOOLS_VERSION = "1.0.0-next.17";
+const QUERY_DEVTOOLS_VERSION = "1.0.0-next.18";
 const MAX_DEPTH = 6;
 const MAX_STRING = 200;
 const MAX_ARRAY_ITEMS = 2;