@ethlete/query 6.0.0-next.50 → 6.0.0-next.51

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/query
 
+## 6.0.0-next.51
+
+### Patch Changes
+
+- The devtools pills' stylesheet now carries the application's `CSP_NONCE`, so it passes a strict `style-src`.
+
 ## 6.0.0-next.50
 
 ### Patch Changes

package/fesm2022/ethlete-query.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ApplicationRef, untracked, effect, Injector, runInInjectionContext, DestroyRef, computed, InjectionToken, EnvironmentInjector, ElementRef, ErrorHandler, createEnvironmentInjector, signal, linkedSignal, isDevMode, PLATFORM_ID, resource, DOCUMENT, VERSION, provideEnvironmentInitializer, afterNextRender, makeEnvironmentProviders, assertInInjectionContext, ChangeDetectorRef, ViewContainerRef, TemplateRef, Input, Directive, input, Pipe, ViewEncapsulation, Component, NgZone } from '@angular/core';
+import { inject, ApplicationRef, untracked, effect, Injector, runInInjectionContext, DestroyRef, computed, InjectionToken, EnvironmentInjector, ElementRef, ErrorHandler, createEnvironmentInjector, signal, linkedSignal, isDevMode, PLATFORM_ID, resource, DOCUMENT, VERSION, provideEnvironmentInitializer, CSP_NONCE, afterNextRender, makeEnvironmentProviders, assertInInjectionContext, ChangeDetectorRef, ViewContainerRef, TemplateRef, Input, Directive, input, Pipe, ViewEncapsulation, Component, NgZone } from '@angular/core';
 import { UrlTree, Router, RedirectCommand, ActivatedRoute } from '@angular/router';
 import { Observable, defer, from, filter, Subject, Subscription, throwError, of, timer, switchMap, tap, retry, catchError, EMPTY as EMPTY$1, take, takeUntil, finalize, mergeMap, toArray, map, race, NEVER, merge, takeWhile, firstValueFrom, concatMap, fromEvent, throttleTime, interval, startWith, pairwise, BehaviorSubject, combineLatest, ReplaySubject, distinctUntilChanged, shareReplay, withLatestFrom, debounceTime } from 'rxjs';
 import { defineStaticProvider, RuntimeError, clamp, randomId, defineRootProvider, isObject, injectUnsavedChangesCoordinator, injectRoute, getCookie, setCookie, deleteCookie, CORE_VERSION, createDestroy, computedTillTruthy, defineProvider, toProvideFn, toInjectFn, nextFrame, injectQueryParams, injectQueryParamChanges, clone, equal, ET_PROPERTY_REMOVED, previousSignalValue } from '@ethlete/core';
@@ -8332,16 +8332,20 @@ let envState = null;
 let authState = null;
 /** What the pill on the page renders, or `null` while there is none. */
 let renderedKey = null;
+let providedNonce = null;
+/** Until the application provides `CSP_NONCE`, falls back to where Angular's own default reads it from. */
+const nonceOf = (doc) => providedNonce ?? doc.body?.querySelector('[ngCspNonce]')?.getAttribute('ngCspNonce') ?? null;
 /**
  * Everything the pill renders, as one string. Every access-token rotation syncs the session pill
  * again, and a rebuild would close an open dropdown under whoever opened it - so a sync that renders
  * the same thing must leave the DOM alone. Whatever `render()` reads has to be in here. The callbacks
  * are not: they are new objects on every sync, and they read their own state when they run.
  */
-const keyOf$1 = (switches, rows, collapsed) => JSON.stringify([
+const keyOf$1 = (switches, rows, collapsed, nonce) => JSON.stringify([
     switches,
     rows.map(({ name, current, tabLocal, options }) => [name, current, tabLocal, options]),
     collapsed,
+    nonce,
 ]);
 const buildAuthRow = (doc, row) => {
     const pill = doc.createElement('div');
@@ -8421,9 +8425,10 @@ const render = (doc) => {
     const production = switches.some((apiSwitch) => resolvedEnvOf(apiSwitch, storedOf(apiSwitch))?.production === true);
     // A production pick unfolds the pills whatever is stored: the warning is the point of the pill.
     const collapsed = !production && readCollapsed();
+    const nonce = nonceOf(doc);
     const paints = (switches.length > 0 || rows.length > 0) && queryDevtoolsPillsAllowed();
     const key = paints
-        ? keyOf$1(switches.map((apiSwitch) => [apiSwitch, storedOf(apiSwitch)]), rows, collapsed)
+        ? keyOf$1(switches.map((apiSwitch) => [apiSwitch, storedOf(apiSwitch)]), rows, collapsed, nonce)
         : null;
     const painted = doc.getElementById(HOST_ID);
     if (painted && key !== null && key === renderedKey)
@@ -8438,6 +8443,8 @@ const render = (doc) => {
     // host application's page and must be as isolated from its global CSS (resets, Tailwind) as possible.
     const shadow = host.attachShadow({ mode: 'open' });
     const style = doc.createElement('style');
+    if (nonce)
+        style.setAttribute('nonce', nonce);
     style.textContent = STYLE;
     shadow.append(style);
     if (collapsed)
@@ -8486,6 +8493,14 @@ const renderPills = () => {
     else
         doc.addEventListener('DOMContentLoaded', () => render(doc), { once: true });
 };
+/**
+ * Hands the pills the application's `CSP_NONCE`, so their stylesheet passes a strict `style-src`.
+ * @internal
+ */
+const setQueryDevtoolsPillNonce = (nonce) => {
+    providedNonce = nonce;
+    renderPills();
+};
 /**
  * Declares the API env part of the pill. Called by `setQueryDevtoolsApiEnvs()`.
  * @internal
@@ -10512,7 +10527,7 @@ const armQueryDevtoolsOverrideTransfer = (recorder, ops) => {
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/query` this build was cut from. */
-const QUERY_VERSION = '6.0.0-next.50';
+const QUERY_VERSION = '6.0.0-next.51';
 
 /** How deep a schema is expanded before a nested branch is given up on. */
 const MAX_DEPTH = 12;
@@ -11795,6 +11810,7 @@ const ONE_TIME_OPTIONS = ['about', 'apiEnvs', 'authAccounts', 'responseHistory',
 // repeating timer, so it is never stable and the pills would never go.
 const settleThePillsOnFirstRender = () => provideEnvironmentInitializer(() => {
     const destroyRef = inject(DestroyRef);
+    setQueryDevtoolsPillNonce(inject(CSP_NONCE, { optional: true }));
     afterNextRender(() => {
         const settle = setTimeout(markQueryDevtoolsAppSettled, PILL_SETTLE_GRACE_MS);
         destroyRef.onDestroy(() => clearTimeout(settle));