@ethlete/query-devtools 1.0.0-next.5 → 1.0.0-next.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.0-next.6
+
+### Patch Changes
+
+- [#3067](https://github.com/ethlete-io/ethdk/pull/3067) [`e271c58`](https://github.com/ethlete-io/ethdk/commit/e271c58ffc395075a5c4496abf34b34568855276) Thanks [@github-actions](https://github.com/apps/github-actions)! - Query devtools: the value explorer shows the headers a `headers` provider hands the request, instead of an `fn(headerProvider)` row.
+
 ## 1.0.0-next.5
 
 ### Patch Changes

package/fesm2022/ethlete-query-devtools.mjs

@@ -290,14 +290,20 @@ const isHeadersValue = (value) => !!value &&
     'getAll' in value &&
     typeof value.getAll === 'function' &&
     'lazyInit' in value;
+const HEADERS_KEY = 'headers';
 /**
  * How to render `value` if it is one of the built-ins the explorer knows, or `null` for anything it
- * should keep treating as a plain object or array.
+ * should keep treating as a plain object or array. `key` is the name the value sits under; a
+ * `headers` function is called so the row shows the headers it hands the request.
  */
-const exoticOf = (value) => {
-    // A header provider is the case in practice; `String(fn)` would dump its whole source into the row.
-    if (typeof value === 'function')
+const exoticOf = (value, key) => {
+    if (typeof value === 'function') {
+        const provided = key === HEADERS_KEY && value.length === 0 ? providedHeaders(value) : null;
+        if (provided)
+            return { typeName: 'HttpHeaders', entries: headerEntries(provided) };
+        // `String(fn)` would dump the whole source of the function into the row.
         return { typeName: 'fn', display: value.name || 'anonymous' };
+    }
     if (!value || typeof value !== 'object')
         return null;
     if (value instanceof Date) {
@@ -337,6 +343,20 @@ const exoticOf = (value) => {
     }
     return null;
 };
+/**
+ * The headers a `headers` provider hands the request, or `null` if it hands anything else. A secure
+ * query resolves its access token inside such a provider and throws while no token is available yet -
+ * both cases keep the plain `fn` row.
+ */
+const providedHeaders = (provider) => {
+    try {
+        const value = provider();
+        return isHeadersValue(value) ? value : null;
+    }
+    catch {
+        return null;
+    }
+};
 /**
  * The headers an `HttpHeaders` actually holds, as `name: value` pairs. A header set more than once
  * joins on `, ` the way the wire format does.
@@ -717,10 +737,10 @@ const kindOf = (value) => {
         return 'array';
     return typeof value;
 };
-const entriesOf = (value) => {
+const entriesOf = (value, key) => {
     if (Array.isArray(value))
         return value.map((v, i) => ({ k: String(i), v }));
-    const exotic = exoticOf(value);
+    const exotic = exoticOf(value, key);
     if (exotic)
         return exotic.entries ?? [];
     if (value && typeof value === 'object') {
@@ -786,7 +806,7 @@ class QueryDevtoolsJsonComponent {
         ...(ngDevMode ? [{ debugName: "annotations" }] : /* istanbul ignore next */ []));
         this.kind = computed(() => kindOf(this.value()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
-        this.exotic = computed(() => exoticOf(this.value()), /* @ts-ignore */
+        this.exotic = computed(() => exoticOf(this.value(), this.nodeKey()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "exotic" }] : /* istanbul ignore next */ []));
         /** One annotation covers every element of an array, so the lookup path forgets which index this is. */
         this.shapePath = computed(() => this.path()
@@ -798,12 +818,20 @@ class QueryDevtoolsJsonComponent {
         ...(ngDevMode ? [{ debugName: "annotation" }] : /* istanbul ignore next */ []));
         this.annotationTitle = computed(() => `Declared in the API description as ${this.annotation()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "annotationTitle" }] : /* istanbul ignore next */ []));
-        /** A `Date` or a `File` is object-typed but has nothing to expand into, so it renders as a leaf. */
-        this.isContainer = computed(() => (this.kind() === 'array' || this.kind() === 'object') && !this.exotic()?.display, /* @ts-ignore */
+        /**
+         * A `Date` is object-typed but has nothing to expand into, so it renders as a leaf. A resolved
+         * header provider is the other way round: a function that does expand.
+         */
+        this.isContainer = computed(() => {
+            const exotic = this.exotic();
+            if (exotic)
+                return !!exotic.entries;
+            return this.kind() === 'array' || this.kind() === 'object';
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isContainer" }] : /* istanbul ignore next */ []));
         /** The entries this node covers: the container's own, or just the window a chunk stands for. */
         this.ownEntries = computed(() => {
-            const entries = entriesOf(this.value());
+            const entries = entriesOf(this.value(), this.nodeKey());
             const chunk = this.chunk();
             return chunk ? entries.slice(chunk.start, chunk.end) : entries;
         }, /* @ts-ignore */
@@ -844,7 +872,7 @@ class QueryDevtoolsJsonComponent {
         /** Only slices that actually contain a match unfold while searching, so a filter stays cheap. */
         this.chunkHasHit = computed(() => {
             const term = this.search();
-            return !!term && this.ownEntries().some(({ k, v }) => k.toLowerCase().includes(term) || matchesDeep(v, term));
+            return (!!term && this.ownEntries().some((entry) => entry.k.toLowerCase().includes(term) || matchesDeep(entry, term)));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chunkHasHit" }] : /* istanbul ignore next */ []));
         this.effectiveExpanded = computed(() => {
@@ -895,7 +923,7 @@ class QueryDevtoolsJsonComponent {
             return count ? `{…} ${count}` : '{}';
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
-        this.display = computed(() => displayOf(this.value()), /* @ts-ignore */
+        this.display = computed(() => displayOf(this.value(), this.nodeKey()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
         this.keyHit = computed(() => {
             const term = this.search();
@@ -1239,8 +1267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], chunk: [{ type: i0.Input, args: [{ isSignal: true, alias: "chunk", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], expandedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedPaths", required: false }] }], collapsedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedPaths", required: false }] }], toggleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleFn", required: false }] }], jsonPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "jsonPath", required: false }] }], parentKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKind", required: false }] }], overrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrides", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }] } });
 // Below the component: an interpolated template literal above an inline template breaks the Angular
 // language service for the whole template (see `ethlete/no-template-literal-before-inline-template`).
-const displayOf = (value) => {
-    const exotic = exoticOf(value);
+const displayOf = (value, key) => {
+    const exotic = exoticOf(value, key);
     if (exotic?.display)
         return `${exotic.typeName}(${exotic.display})`;
     switch (kindOf(value)) {
@@ -1268,11 +1296,13 @@ const buildChunks = (entries, window) => {
     return chunks;
 };
 /** Whether a search term appears anywhere in a subtree - used to keep non-matching slices folded. */
-const matchesDeep = (value, term) => {
-    if (!value || typeof value !== 'object' || exoticOf(value)?.display) {
-        return displayOf(value).toLowerCase().includes(term);
+const matchesDeep = (entry, term) => {
+    const { k, v } = entry;
+    const exotic = exoticOf(v, k);
+    if (exotic ? !exotic.entries : !v || typeof v !== 'object') {
+        return displayOf(v, k).toLowerCase().includes(term);
     }
-    return entriesOf(value).some(({ k, v }) => k.toLowerCase().includes(term) || matchesDeep(v, term));
+    return entriesOf(v, k).some((child) => child.k.toLowerCase().includes(term) || matchesDeep(child, term));
 };
 
 const QUERY_DEVTOOLS_HOST = new InjectionToken('QUERY_DEVTOOLS_HOST');
@@ -3205,7 +3235,7 @@ const summarizeLocks = (options) => {
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/query-devtools` this build was cut from. */
-const QUERY_DEVTOOLS_VERSION = '1.0.0-next.5';
+const QUERY_DEVTOOLS_VERSION = '1.0.0-next.6';
 
 /* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
 const WORKSPACE_ID = 'wrk_ethlete_query_devtools';