UNPKG

@tanstack/angular-query-experimental

Version:

Signals for managing, caching and syncing asynchronous and remote data in Angular

tanstack.com/query

TanStack/query

1 lines • 8.01 kB
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;"}