@tanstack/angular-query-experimental
Version:
Signals for managing, caching and syncing asynchronous and remote data in Angular
1 lines • 7.9 kB
Source Map (JSON)
{"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,EACd;AACF,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,EACxB;AAAA,EACA;AAAA;AAAA,IAEE,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY,MAAM;AACV,YAAA,mBAAmB,OAAO,iBAAiB;AACjD,UACE,CAAC,kBAAkB,OAAO,WAAW,CAAC,KACtC,iBAAiB;AAEV,eAAA;AAET,uBAAiB,aAAa;AAC9B,UAAI,sBAAsB;AAC1B,aAAO,UAAU,EAAE,UAAU,MAAO,sBAAsB,IAAK;AAE/D,aAAO,MAAM;AACL,cAAA,iBAAiB,OAAO,aAAa;AAAA,UACzC,UAAU;AAAA,QAAA,CACX;AACK,cAAA,aAAa,OAAO,UAAU;AAC9B,cAAA,kBAAkB,OAAO,uBAAuB;AAChD,cAAA,WAAW,OAAO,QAAQ;AAEhC,YAAI,WAAyC;AAC7C,YAAI,KAAyB;AAEvB,cAAA,wBAAwB,SAAS,MAAM;AACrC,gBAAA,EAAE,aAAa,IAAI,gBAAgB;AACzC,iBAAO,OAAO,iBAAiB,YAC3B,eACA,UAAU;AAAA,QAAA,CACf;AAED,cAAM,yBAAyB,MAAM;AAC7B,gBAAA,SAAS,kBAAkB,UAAU;AAC3C,cAAI,CAAC,QAAQ;AACL,kBAAA,IAAI,MAAM,sBAAsB;AAAA,UAAA;AAEjC,iBAAA;AAAA,QACT;AAEA,cAAM,kBAAkB,MAAM;AAC5B,+CAAU;AACV,mCAAI;AACO,qBAAA;AAAA,QACb;AAEA;AAAA,UACE,MAAM;AACJ,kBAAM,kBAAkB,sBAAsB;AACxC,kBAAA;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,gBACE,gBAAgB;AAEpB,gBAAI,CAAC,iBAAiB;AAEpB,0BAAY,gBAAgB;AAC5B;AAAA,YAAA;AAGF,gBAAI,UAAU;AAEF,wBAAA,SAAS,UAAU,MAAM;AACvB,0BAAA,SAAS,YAAY,QAAQ;AAC3B,4BAAA,SAAS,cAAc,UAAU;AAC7B,gCAAA,SAAS,kBAAkB,cAAc;AAC3D,qBAAO,kBAAkB,aACvB,SAAS,iBAAiB,aAAa;AACzC;AAAA,YAAA;AAIF,mBAAO,0BAA0B,EAC9B,KAAK,CAAC,kBAAkB;AAEvB,kBAAI,oBAAqB;AAEd,yBAAA,IAAI,cAAc,sBAAsB;AAAA,gBACjD,GAAG,gBAAgB;AAAA,gBACnB,QAAQ,uBAAuB;AAAA,gBAC/B,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT;AAAA,cAAA,CACD;AAED,mBAAK,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AACzD,iBAAA,UAAU,IAAI,uBAAuB;AACxC,uBAAS,MAAM,EAAE;AAEjB,yBAAW,UAAU,eAAe;AAAA,YAAA,CACrC,EACA,MAAM,CAAC,UAAU;AACR,sBAAA;AAAA,gBACN;AAAA,gBACA;AAAA,cACF;AAAA,YAAA,CACD;AAAA,UACL;AAAA,UACA,EAAE,SAAS;AAAA,QACb;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}