@tanstack/angular-query-experimental 5.100.8 → 5.100.10
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/devtools/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { QueryClient } from '@tanstack/query-core';
|
|
2
|
-
import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools';
|
|
2
|
+
import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } from '@tanstack/query-devtools';
|
|
3
3
|
import { DevtoolsFeature } from '../providers.js';
|
|
4
4
|
/**
|
|
5
5
|
* Options for configuring withDevtools.
|
|
@@ -69,6 +69,11 @@ export interface DevtoolsOptions {
|
|
|
69
69
|
* Set this to true to hide disabled queries from the devtools panel.
|
|
70
70
|
*/
|
|
71
71
|
hideDisabledQueries?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
|
|
74
|
+
* Defaults to 'system'.
|
|
75
|
+
*/
|
|
76
|
+
theme?: Theme;
|
|
72
77
|
/**
|
|
73
78
|
* Whether the developer tools should load.
|
|
74
79
|
* - `auto`- (Default) Lazily loads devtools when in development mode. Skips loading in production mode.
|
|
@@ -58,7 +58,8 @@ const withDevtools = (withDevtoolsFn, options = {}) => queryFeature("Devtools",
|
|
|
58
58
|
position,
|
|
59
59
|
errorTypes,
|
|
60
60
|
buttonPosition,
|
|
61
|
-
initialIsOpen
|
|
61
|
+
initialIsOpen,
|
|
62
|
+
theme
|
|
62
63
|
} = devtoolsOptions();
|
|
63
64
|
if (!shouldLoadTools) {
|
|
64
65
|
devtools && destroyDevtools();
|
|
@@ -70,6 +71,7 @@ const withDevtools = (withDevtoolsFn, options = {}) => queryFeature("Devtools",
|
|
|
70
71
|
errorTypes && devtools.setErrorTypes(errorTypes);
|
|
71
72
|
buttonPosition && devtools.setButtonPosition(buttonPosition);
|
|
72
73
|
typeof initialIsOpen === "boolean" && devtools.setInitialIsOpen(initialIsOpen);
|
|
74
|
+
theme && devtools.setTheme(theme);
|
|
73
75
|
return;
|
|
74
76
|
}
|
|
75
77
|
import("@tanstack/query-devtools").then((queryDevtools) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"with-devtools.mjs","sources":["../../src/devtools/with-devtools.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common'\nimport {\n DestroyRef,\n ENVIRONMENT_INITIALIZER,\n InjectionToken,\n Injector,\n PLATFORM_ID,\n computed,\n effect,\n inject,\n isDevMode,\n} from '@angular/core'\nimport { QueryClient, noop, onlineManager } from '@tanstack/query-core'\nimport { queryFeature } from '../providers'\nimport type { Signal } from '@angular/core'\nimport type {\n DevtoolsOptions,\n WithDevtools,\n WithDevtoolsFn,\n WithDevtoolsOptions,\n} from './types'\nimport type { TanstackQueryDevtools } from '@tanstack/query-devtools'\n\n/**\n * Internal token used to prevent double providing of devtools in child injectors\n */\nconst DEVTOOLS_PROVIDED = new InjectionToken('', {\n factory: () => ({\n isProvided: false,\n }),\n})\n\n/**\n * Internal token for providing devtools options\n */\nconst DEVTOOLS_OPTIONS_SIGNAL = new InjectionToken<Signal<DevtoolsOptions>>('')\n\n/**\n * Enables developer tools in Angular development builds.\n *\n * **Example**\n *\n * ```ts\n * export const appConfig: ApplicationConfig = {\n * providers: [\n * provideTanStackQuery(new QueryClient(), withDevtools())\n * ]\n * }\n * ```\n * The devtools will be rendered in `<body>`.\n *\n * If you need more control over when devtools are loaded, you can use the `loadDevtools` option.\n *\n * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.\n * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.\n * @param options - Additional options for configuring `withDevtools`.\n * @returns A set of providers for use with `provideTanStackQuery`.\n * @see {@link provideTanStackQuery}\n * @see {@link DevtoolsOptions}\n */\nexport const withDevtools: WithDevtools = (\n withDevtoolsFn?: WithDevtoolsFn,\n options: WithDevtoolsOptions = {},\n) =>\n queryFeature('Devtools', [\n {\n provide: DEVTOOLS_OPTIONS_SIGNAL,\n useFactory: (...deps: Array<any>) =>\n computed(() => withDevtoolsFn?.(...deps) ?? {}),\n deps: options.deps || [],\n },\n {\n // Do not use provideEnvironmentInitializer while Angular < v19 is supported\n provide: ENVIRONMENT_INITIALIZER,\n multi: true,\n useFactory: () => {\n const devtoolsProvided = inject(DEVTOOLS_PROVIDED)\n if (\n !isPlatformBrowser(inject(PLATFORM_ID)) ||\n devtoolsProvided.isProvided\n )\n return noop\n\n devtoolsProvided.isProvided = true\n let injectorIsDestroyed = false\n inject(DestroyRef).onDestroy(() => (injectorIsDestroyed = true))\n\n return () => {\n const injectedClient = inject(QueryClient, {\n optional: true,\n })\n const destroyRef = inject(DestroyRef)\n const devtoolsOptions = inject(DEVTOOLS_OPTIONS_SIGNAL)\n const injector = inject(Injector)\n\n let devtools: TanstackQueryDevtools | null = null\n let el: HTMLElement | null = null\n\n const shouldLoadToolsSignal = computed(() => {\n const { loadDevtools } = devtoolsOptions()\n return typeof loadDevtools === 'boolean'\n ? loadDevtools\n : isDevMode()\n })\n\n const getResolvedQueryClient = () => {\n const client = devtoolsOptions().client ?? injectedClient\n if (!client) {\n throw new Error('No QueryClient found')\n }\n return client\n }\n\n const destroyDevtools = () => {\n devtools?.unmount()\n el?.remove()\n devtools = null\n }\n\n effect(\n () => {\n const shouldLoadTools = shouldLoadToolsSignal()\n const {\n client,\n position,\n errorTypes,\n buttonPosition,\n initialIsOpen,\n } = devtoolsOptions()\n\n if (!shouldLoadTools) {\n // Destroy or do nothing\n devtools && destroyDevtools()\n return\n }\n\n if (devtools) {\n // Update existing devtools config\n client && devtools.setClient(client)\n position && devtools.setPosition(position)\n errorTypes && devtools.setErrorTypes(errorTypes)\n buttonPosition && devtools.setButtonPosition(buttonPosition)\n typeof initialIsOpen === 'boolean' &&\n devtools.setInitialIsOpen(initialIsOpen)\n return\n }\n\n // Create devtools\n import('@tanstack/query-devtools')\n .then((queryDevtools) => {\n // As this code runs async, the injector could have been destroyed\n if (injectorIsDestroyed) return\n\n devtools = new queryDevtools.TanstackQueryDevtools({\n ...devtoolsOptions(),\n client: getResolvedQueryClient(),\n queryFlavor: 'Angular Query',\n version: '5',\n onlineManager,\n })\n\n el = document.body.appendChild(document.createElement('div'))\n el.classList.add('tsqd-parent-container')\n devtools.mount(el)\n\n destroyRef.onDestroy(destroyDevtools)\n })\n .catch((error) => {\n console.error(\n 'Install @tanstack/query-devtools or reinstall without --omit=optional.',\n error,\n )\n })\n },\n { injector },\n )\n }\n },\n },\n ])\n"],"names":[],"mappings":";;;;AA0BA,MAAM,oBAAoB,IAAI,eAAe,IAAI;AAAA,EAC/C,SAAS,OAAO;AAAA,IACd,YAAY;AAAA,EAAA;AAEhB,CAAC;AAKD,MAAM,0BAA0B,IAAI,eAAwC,EAAE;AAyBvE,MAAM,eAA6B,CACxC,gBACA,UAA+B,CAAA,MAE/B,aAAa,YAAY;AAAA,EACvB;AAAA,IACE,SAAS;AAAA,IACT,YAAY,IAAI,SACd,SAAS,OAAM,iDAAiB,GAAG,UAAS,EAAE;AAAA,IAChD,MAAM,QAAQ,QAAQ,CAAA;AAAA,EAAC;AAAA,EAEzB;AAAA;AAAA,IAEE,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY,MAAM;AAChB,YAAM,mBAAmB,OAAO,iBAAiB;AACjD,UACE,CAAC,kBAAkB,OAAO,WAAW,CAAC,KACtC,iBAAiB;AAEjB,eAAO;AAET,uBAAiB,aAAa;AAC9B,UAAI,sBAAsB;AAC1B,aAAO,UAAU,EAAE,UAAU,MAAO,sBAAsB,IAAK;AAE/D,aAAO,MAAM;AACX,cAAM,iBAAiB,OAAO,aAAa;AAAA,UACzC,UAAU;AAAA,QAAA,CACX;AACD,cAAM,aAAa,OAAO,UAAU;AACpC,cAAM,kBAAkB,OAAO,uBAAuB;AACtD,cAAM,WAAW,OAAO,QAAQ;AAEhC,YAAI,WAAyC;AAC7C,YAAI,KAAyB;AAE7B,cAAM,wBAAwB,SAAS,MAAM;AAC3C,gBAAM,EAAE,aAAA,IAAiB,gBAAA;AACzB,iBAAO,OAAO,iBAAiB,YAC3B,eACA,UAAA;AAAA,QACN,CAAC;AAED,cAAM,yBAAyB,MAAM;AACnC,gBAAM,SAAS,kBAAkB,UAAU;AAC3C,cAAI,CAAC,QAAQ;AACX,kBAAM,IAAI,MAAM,sBAAsB;AAAA,UACxC;AACA,iBAAO;AAAA,QACT;AAEA,cAAM,kBAAkB,MAAM;AAC5B,+CAAU;AACV,mCAAI;AACJ,qBAAW;AAAA,QACb;AAEA;AAAA,UACE,MAAM;AACJ,kBAAM,kBAAkB,sBAAA;AACxB,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA,IACE,gBAAA;AAEJ,gBAAI,CAAC,iBAAiB;AAEpB,0BAAY,gBAAA;AACZ;AAAA,YACF;AAEA,gBAAI,UAAU;AAEZ,wBAAU,SAAS,UAAU,MAAM;AACnC,0BAAY,SAAS,YAAY,QAAQ;AACzC,4BAAc,SAAS,cAAc,UAAU;AAC/C,gCAAkB,SAAS,kBAAkB,cAAc;AAC3D,qBAAO,kBAAkB,aACvB,SAAS,iBAAiB,aAAa;AACzC;AAAA,YACF;AAGA,mBAAO,0BAA0B,EAC9B,KAAK,CAAC,kBAAkB;AAEvB,kBAAI,oBAAqB;AAEzB,yBAAW,IAAI,cAAc,sBAAsB;AAAA,gBACjD,GAAG,gBAAA;AAAA,gBACH,QAAQ,uBAAA;AAAA,gBACR,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT;AAAA,cAAA,CACD;AAED,mBAAK,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AAC5D,iBAAG,UAAU,IAAI,uBAAuB;AACxC,uBAAS,MAAM,EAAE;AAEjB,yBAAW,UAAU,eAAe;AAAA,YACtC,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,sBAAQ;AAAA,gBACN;AAAA,gBACA;AAAA,cAAA;AAAA,YAEJ,CAAC;AAAA,UACL;AAAA,UACA,EAAE,SAAA;AAAA,QAAS;AAAA,MAEf;AAAA,IACF;AAAA,EAAA;AAEJ,CAAC;"}
|
|
1
|
+
{"version":3,"file":"with-devtools.mjs","sources":["../../src/devtools/with-devtools.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common'\nimport {\n DestroyRef,\n ENVIRONMENT_INITIALIZER,\n InjectionToken,\n Injector,\n PLATFORM_ID,\n computed,\n effect,\n inject,\n isDevMode,\n} from '@angular/core'\nimport { QueryClient, noop, onlineManager } from '@tanstack/query-core'\nimport { queryFeature } from '../providers'\nimport type { Signal } from '@angular/core'\nimport type {\n DevtoolsOptions,\n WithDevtools,\n WithDevtoolsFn,\n WithDevtoolsOptions,\n} from './types'\nimport type { TanstackQueryDevtools } from '@tanstack/query-devtools'\n\n/**\n * Internal token used to prevent double providing of devtools in child injectors\n */\nconst DEVTOOLS_PROVIDED = new InjectionToken('', {\n factory: () => ({\n isProvided: false,\n }),\n})\n\n/**\n * Internal token for providing devtools options\n */\nconst DEVTOOLS_OPTIONS_SIGNAL = new InjectionToken<Signal<DevtoolsOptions>>('')\n\n/**\n * Enables developer tools in Angular development builds.\n *\n * **Example**\n *\n * ```ts\n * export const appConfig: ApplicationConfig = {\n * providers: [\n * provideTanStackQuery(new QueryClient(), withDevtools())\n * ]\n * }\n * ```\n * The devtools will be rendered in `<body>`.\n *\n * If you need more control over when devtools are loaded, you can use the `loadDevtools` option.\n *\n * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.\n * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.\n * @param options - Additional options for configuring `withDevtools`.\n * @returns A set of providers for use with `provideTanStackQuery`.\n * @see {@link provideTanStackQuery}\n * @see {@link DevtoolsOptions}\n */\nexport const withDevtools: WithDevtools = (\n withDevtoolsFn?: WithDevtoolsFn,\n options: WithDevtoolsOptions = {},\n) =>\n queryFeature('Devtools', [\n {\n provide: DEVTOOLS_OPTIONS_SIGNAL,\n useFactory: (...deps: Array<any>) =>\n computed(() => withDevtoolsFn?.(...deps) ?? {}),\n deps: options.deps || [],\n },\n {\n // Do not use provideEnvironmentInitializer while Angular < v19 is supported\n provide: ENVIRONMENT_INITIALIZER,\n multi: true,\n useFactory: () => {\n const devtoolsProvided = inject(DEVTOOLS_PROVIDED)\n if (\n !isPlatformBrowser(inject(PLATFORM_ID)) ||\n devtoolsProvided.isProvided\n )\n return noop\n\n devtoolsProvided.isProvided = true\n let injectorIsDestroyed = false\n inject(DestroyRef).onDestroy(() => (injectorIsDestroyed = true))\n\n return () => {\n const injectedClient = inject(QueryClient, {\n optional: true,\n })\n const destroyRef = inject(DestroyRef)\n const devtoolsOptions = inject(DEVTOOLS_OPTIONS_SIGNAL)\n const injector = inject(Injector)\n\n let devtools: TanstackQueryDevtools | null = null\n let el: HTMLElement | null = null\n\n const shouldLoadToolsSignal = computed(() => {\n const { loadDevtools } = devtoolsOptions()\n return typeof loadDevtools === 'boolean'\n ? loadDevtools\n : isDevMode()\n })\n\n const getResolvedQueryClient = () => {\n const client = devtoolsOptions().client ?? injectedClient\n if (!client) {\n throw new Error('No QueryClient found')\n }\n return client\n }\n\n const destroyDevtools = () => {\n devtools?.unmount()\n el?.remove()\n devtools = null\n }\n\n effect(\n () => {\n const shouldLoadTools = shouldLoadToolsSignal()\n const {\n client,\n position,\n errorTypes,\n buttonPosition,\n initialIsOpen,\n theme,\n } = devtoolsOptions()\n\n if (!shouldLoadTools) {\n // Destroy or do nothing\n devtools && destroyDevtools()\n return\n }\n\n if (devtools) {\n // Update existing devtools config\n client && devtools.setClient(client)\n position && devtools.setPosition(position)\n errorTypes && devtools.setErrorTypes(errorTypes)\n buttonPosition && devtools.setButtonPosition(buttonPosition)\n typeof initialIsOpen === 'boolean' &&\n devtools.setInitialIsOpen(initialIsOpen)\n theme && devtools.setTheme(theme)\n return\n }\n\n // Create devtools\n import('@tanstack/query-devtools')\n .then((queryDevtools) => {\n // As this code runs async, the injector could have been destroyed\n if (injectorIsDestroyed) return\n\n devtools = new queryDevtools.TanstackQueryDevtools({\n ...devtoolsOptions(),\n client: getResolvedQueryClient(),\n queryFlavor: 'Angular Query',\n version: '5',\n onlineManager,\n })\n\n el = document.body.appendChild(document.createElement('div'))\n el.classList.add('tsqd-parent-container')\n devtools.mount(el)\n\n destroyRef.onDestroy(destroyDevtools)\n })\n .catch((error) => {\n console.error(\n 'Install @tanstack/query-devtools or reinstall without --omit=optional.',\n error,\n )\n })\n },\n { injector },\n )\n }\n },\n },\n ])\n"],"names":[],"mappings":";;;;AA0BA,MAAM,oBAAoB,IAAI,eAAe,IAAI;AAAA,EAC/C,SAAS,OAAO;AAAA,IACd,YAAY;AAAA,EAAA;AAEhB,CAAC;AAKD,MAAM,0BAA0B,IAAI,eAAwC,EAAE;AAyBvE,MAAM,eAA6B,CACxC,gBACA,UAA+B,CAAA,MAE/B,aAAa,YAAY;AAAA,EACvB;AAAA,IACE,SAAS;AAAA,IACT,YAAY,IAAI,SACd,SAAS,OAAM,iDAAiB,GAAG,UAAS,EAAE;AAAA,IAChD,MAAM,QAAQ,QAAQ,CAAA;AAAA,EAAC;AAAA,EAEzB;AAAA;AAAA,IAEE,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY,MAAM;AAChB,YAAM,mBAAmB,OAAO,iBAAiB;AACjD,UACE,CAAC,kBAAkB,OAAO,WAAW,CAAC,KACtC,iBAAiB;AAEjB,eAAO;AAET,uBAAiB,aAAa;AAC9B,UAAI,sBAAsB;AAC1B,aAAO,UAAU,EAAE,UAAU,MAAO,sBAAsB,IAAK;AAE/D,aAAO,MAAM;AACX,cAAM,iBAAiB,OAAO,aAAa;AAAA,UACzC,UAAU;AAAA,QAAA,CACX;AACD,cAAM,aAAa,OAAO,UAAU;AACpC,cAAM,kBAAkB,OAAO,uBAAuB;AACtD,cAAM,WAAW,OAAO,QAAQ;AAEhC,YAAI,WAAyC;AAC7C,YAAI,KAAyB;AAE7B,cAAM,wBAAwB,SAAS,MAAM;AAC3C,gBAAM,EAAE,aAAA,IAAiB,gBAAA;AACzB,iBAAO,OAAO,iBAAiB,YAC3B,eACA,UAAA;AAAA,QACN,CAAC;AAED,cAAM,yBAAyB,MAAM;AACnC,gBAAM,SAAS,kBAAkB,UAAU;AAC3C,cAAI,CAAC,QAAQ;AACX,kBAAM,IAAI,MAAM,sBAAsB;AAAA,UACxC;AACA,iBAAO;AAAA,QACT;AAEA,cAAM,kBAAkB,MAAM;AAC5B,+CAAU;AACV,mCAAI;AACJ,qBAAW;AAAA,QACb;AAEA;AAAA,UACE,MAAM;AACJ,kBAAM,kBAAkB,sBAAA;AACxB,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA,IACE,gBAAA;AAEJ,gBAAI,CAAC,iBAAiB;AAEpB,0BAAY,gBAAA;AACZ;AAAA,YACF;AAEA,gBAAI,UAAU;AAEZ,wBAAU,SAAS,UAAU,MAAM;AACnC,0BAAY,SAAS,YAAY,QAAQ;AACzC,4BAAc,SAAS,cAAc,UAAU;AAC/C,gCAAkB,SAAS,kBAAkB,cAAc;AAC3D,qBAAO,kBAAkB,aACvB,SAAS,iBAAiB,aAAa;AACzC,uBAAS,SAAS,SAAS,KAAK;AAChC;AAAA,YACF;AAGA,mBAAO,0BAA0B,EAC9B,KAAK,CAAC,kBAAkB;AAEvB,kBAAI,oBAAqB;AAEzB,yBAAW,IAAI,cAAc,sBAAsB;AAAA,gBACjD,GAAG,gBAAA;AAAA,gBACH,QAAQ,uBAAA;AAAA,gBACR,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT;AAAA,cAAA,CACD;AAED,mBAAK,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AAC5D,iBAAG,UAAU,IAAI,uBAAuB;AACxC,uBAAS,MAAM,EAAE;AAEjB,yBAAW,UAAU,eAAe;AAAA,YACtC,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,sBAAQ;AAAA,gBACN;AAAA,gBACA;AAAA,cAAA;AAAA,YAEJ,CAAC;AAAA,UACL;AAAA,UACA,EAAE,SAAA;AAAA,QAAS;AAAA,MAEf;AAAA,IACF;AAAA,EAAA;AAEJ,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/angular-query-experimental",
|
|
3
|
-
"version": "5.100.
|
|
3
|
+
"version": "5.100.10",
|
|
4
4
|
"description": "Signals for managing, caching and syncing asynchronous and remote data in Angular",
|
|
5
5
|
"author": "Arnoud de Vries",
|
|
6
6
|
"license": "MIT",
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
},
|
|
62
62
|
"sideEffects": false,
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@tanstack/query-core": "5.100.
|
|
64
|
+
"@tanstack/query-core": "5.100.10"
|
|
65
65
|
},
|
|
66
66
|
"optionalDependencies": {
|
|
67
|
-
"@tanstack/query-devtools": "5.100.
|
|
67
|
+
"@tanstack/query-devtools": "5.100.10"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"@angular/common": ">=16.0.0",
|