@tanstack/query-devtools 5.0.0-alpha.53 → 5.0.0-alpha.54

package/build/source/index.jsx

@@ -0,0 +1,88 @@
+import { render } from 'solid-js/web';
+import { createSignal, lazy } from 'solid-js';
+class TanstackQueryDevtools {
+    client;
+    onlineManager;
+    queryFlavor;
+    version;
+    isMounted = false;
+    buttonPosition;
+    position;
+    initialIsOpen;
+    errorTypes;
+    Component;
+    dispose;
+    constructor(config) {
+        const { client, queryFlavor, version, onlineManager, buttonPosition, position, initialIsOpen, errorTypes, } = config;
+        this.client = createSignal(client);
+        this.queryFlavor = queryFlavor;
+        this.version = version;
+        this.onlineManager = onlineManager;
+        this.buttonPosition = createSignal(buttonPosition);
+        this.position = createSignal(position);
+        this.initialIsOpen = createSignal(initialIsOpen);
+        this.errorTypes = createSignal(errorTypes);
+    }
+    setButtonPosition(position) {
+        this.buttonPosition[1](position);
+    }
+    setPosition(position) {
+        this.position[1](position);
+    }
+    setInitialIsOpen(isOpen) {
+        this.initialIsOpen[1](isOpen);
+    }
+    setErrorTypes(errorTypes) {
+        this.errorTypes[1](errorTypes);
+    }
+    setClient(client) {
+        this.client[1](client);
+    }
+    mount(el) {
+        if (this.isMounted) {
+            throw new Error('Devtools is already mounted');
+        }
+        const dispose = render(() => {
+            const [btnPosition] = this.buttonPosition;
+            const [pos] = this.position;
+            const [isOpen] = this.initialIsOpen;
+            const [errors] = this.errorTypes;
+            const [queryClient] = this.client;
+            let Devtools;
+            if (this.Component) {
+                Devtools = this.Component;
+            }
+            else {
+                Devtools = lazy(() => import('./Devtools'));
+                this.Component = Devtools;
+            }
+            return (<Devtools queryFlavor={this.queryFlavor} version={this.version} onlineManager={this.onlineManager} {...{
+                get client() {
+                    return queryClient();
+                },
+                get buttonPosition() {
+                    return btnPosition();
+                },
+                get position() {
+                    return pos();
+                },
+                get initialIsOpen() {
+                    return isOpen();
+                },
+                get errorTypes() {
+                    return errors();
+                },
+            }}/>);
+        }, el);
+        this.isMounted = true;
+        this.dispose = dispose;
+    }
+    unmount() {
+        if (!this.isMounted) {
+            throw new Error('Devtools is not mounted');
+        }
+        this.dispose?.();
+        this.isMounted = false;
+    }
+}
+export { TanstackQueryDevtools };

package/build/source/theme.js

@@ -0,0 +1,304 @@
+const ShadowVariants = {
+    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px 0 color, 0 1px 2px -1px color',
+    md: '0 4px 6px -1px color, 0 2px 4px -2px color',
+    lg: '0 10px 15px -3px color, 0 4px 6px -4px color',
+    xl: '0 20px 25px -5px color, 0 8px 10px -6px color',
+    '2xl': '0 25px 50px -12px color',
+    inner: 'inset 0 2px 4px 0 color',
+    none: 'none',
+};
+const getShadow = (variant, color = '') => {
+    return ShadowVariants[variant].replace(/color/g, color);
+};
+const Shadow = {
+    xs: (color = 'rgb(0 0 0 / 0.1)') => getShadow('xs', color),
+    sm: (color = 'rgb(0 0 0 / 0.1)') => getShadow('sm', color),
+    md: (color = 'rgb(0 0 0 / 0.1)') => getShadow('md', color),
+    lg: (color = 'rgb(0 0 0 / 0.1)') => getShadow('lg', color),
+    xl: (color = 'rgb(0 0 0 / 0.1)') => getShadow('xl', color),
+    '2xl': (color = 'rgb(0 0 0 / 0.25)') => getShadow('2xl', color),
+    inner: (color = 'rgb(0 0 0 / 0.05)') => getShadow('inner', color),
+    none: () => getShadow('none'),
+};
+export const tokens = {
+    colors: {
+        inherit: 'inherit',
+        current: 'currentColor',
+        transparent: 'transparent',
+        black: '#000000',
+        white: '#ffffff',
+        neutral: {
+            50: '#f9fafb',
+            100: '#f2f4f7',
+            200: '#eaecf0',
+            300: '#d0d5dd',
+            400: '#98a2b3',
+            500: '#667085',
+            600: '#475467',
+            700: '#344054',
+            800: '#1d2939',
+            900: '#101828',
+        },
+        darkGray: {
+            50: '#525c7a',
+            100: '#49536e',
+            200: '#414962',
+            300: '#394056',
+            400: '#313749',
+            500: '#292e3d',
+            600: '#212530',
+            700: '#191c24',
+            800: '#111318',
+            900: '#0b0d10',
+        },
+        gray: {
+            50: '#f9fafb',
+            100: '#f2f4f7',
+            200: '#eaecf0',
+            300: '#d0d5dd',
+            400: '#98a2b3',
+            500: '#667085',
+            600: '#475467',
+            700: '#344054',
+            800: '#1d2939',
+            900: '#101828',
+        },
+        blue: {
+            25: '#F5FAFF',
+            50: '#EFF8FF',
+            100: '#D1E9FF',
+            200: '#B2DDFF',
+            300: '#84CAFF',
+            400: '#53B1FD',
+            500: '#2E90FA',
+            600: '#1570EF',
+            700: '#175CD3',
+            800: '#1849A9',
+            900: '#194185',
+        },
+        green: {
+            25: '#F6FEF9',
+            50: '#ECFDF3',
+            100: '#D1FADF',
+            200: '#A6F4C5',
+            300: '#6CE9A6',
+            400: '#32D583',
+            500: '#12B76A',
+            600: '#039855',
+            700: '#027A48',
+            800: '#05603A',
+            900: '#054F31',
+        },
+        red: {
+            25: '#FFFBFA',
+            50: '#FEF3F2',
+            100: '#FEE4E2',
+            200: '#FECDCA',
+            300: '#FDA29B',
+            400: '#F97066',
+            500: '#F04438',
+            600: '#D92D20',
+            700: '#B42318',
+            800: '#912018',
+            900: '#7A271A',
+        },
+        yellow: {
+            25: '#FFFCF5',
+            50: '#FFFAEB',
+            100: '#FEF0C7',
+            200: '#FEDF89',
+            300: '#FEC84B',
+            400: '#FDB022',
+            500: '#F79009',
+            600: '#DC6803',
+            700: '#B54708',
+            800: '#93370D',
+            900: '#7A2E0E',
+        },
+        purple: {
+            25: '#FAFAFF',
+            50: '#F4F3FF',
+            100: '#EBE9FE',
+            200: '#D9D6FE',
+            300: '#BDB4FE',
+            400: '#9B8AFB',
+            500: '#7A5AF8',
+            600: '#6938EF',
+            700: '#5925DC',
+            800: '#4A1FB8',
+            900: '#3E1C96',
+        },
+        teal: {
+            25: '#F6FEFC',
+            50: '#F0FDF9',
+            100: '#CCFBEF',
+            200: '#99F6E0',
+            300: '#5FE9D0',
+            400: '#2ED3B7',
+            500: '#15B79E',
+            600: '#0E9384',
+            700: '#107569',
+            800: '#125D56',
+            900: '#134E48',
+        },
+        pink: {
+            25: '#fdf2f8',
+            50: '#fce7f3',
+            100: '#fbcfe8',
+            200: '#f9a8d4',
+            300: '#f472b6',
+            400: '#ec4899',
+            500: '#db2777',
+            600: '#be185d',
+            700: '#9d174d',
+            800: '#831843',
+            900: '#500724',
+        },
+        cyan: {
+            25: '#ecfeff',
+            50: '#cffafe',
+            100: '#a5f3fc',
+            200: '#67e8f9',
+            300: '#22d3ee',
+            400: '#06b6d4',
+            500: '#0891b2',
+            600: '#0e7490',
+            700: '#155e75',
+            800: '#164e63',
+            900: '#083344',
+        },
+    },
+    alpha: {
+        100: 'ff',
+        90: 'e5',
+        80: 'cc',
+        70: 'b3',
+        60: '99',
+        50: '80',
+        40: '66',
+        30: '4d',
+        20: '33',
+        10: '1a',
+        0: '00',
+    },
+    font: {
+        size: {
+            '2xs': '0.625rem',
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '1.875rem',
+            '4xl': '2.25rem',
+            '5xl': '3rem',
+            '6xl': '3.75rem',
+            '7xl': '4.5rem',
+            '8xl': '6rem',
+            '9xl': '8rem',
+        },
+        lineHeight: {
+            xs: '1rem',
+            sm: '1.25rem',
+            md: '1.5rem',
+            lg: '1.75rem',
+            xl: '1.75rem',
+            '2xl': '2rem',
+            '3xl': '2.25rem',
+            '4xl': '2.5rem',
+            '5xl': '1',
+            '6xl': '1',
+            '7xl': '1',
+            '8xl': '1',
+            '9xl': '1',
+        },
+        weight: {
+            thin: '100',
+            extralight: '200',
+            light: '300',
+            normal: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+            extrabold: '800',
+            black: '900',
+        },
+    },
+    breakpoints: {
+        xs: '320px',
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+    },
+    border: {
+        radius: {
+            none: '0px',
+            xs: '0.125rem',
+            sm: '0.25rem',
+            md: '0.375rem',
+            lg: '0.5rem',
+            xl: '0.75rem',
+            '2xl': '1rem',
+            '3xl': '1.5rem',
+            full: '9999px',
+        },
+    },
+    size: {
+        0: '0px',
+        0.25: '0.0625rem',
+        0.5: '0.125rem',
+        1: '0.25rem',
+        1.5: '0.375rem',
+        2: '0.5rem',
+        2.5: '0.625rem',
+        3: '0.75rem',
+        3.5: '0.875rem',
+        4: '1rem',
+        4.5: '1.125rem',
+        5: '1.25rem',
+        6: '1.5rem',
+        7: '1.75rem',
+        8: '2rem',
+        9: '2.25rem',
+        10: '2.5rem',
+        11: '2.75rem',
+        12: '3rem',
+        14: '3.5rem',
+        16: '4rem',
+        20: '5rem',
+        24: '6rem',
+        28: '7rem',
+        32: '8rem',
+        36: '9rem',
+        40: '10rem',
+        44: '11rem',
+        48: '12rem',
+        52: '13rem',
+        56: '14rem',
+        60: '15rem',
+        64: '16rem',
+        72: '18rem',
+        80: '20rem',
+        96: '24rem',
+    },
+    shadow: Shadow,
+    zIndices: {
+        hide: -1,
+        auto: 'auto',
+        base: 0,
+        docked: 10,
+        dropdown: 1000,
+        sticky: 1100,
+        banner: 1200,
+        overlay: 1300,
+        modal: 1400,
+        popover: 1500,
+        skipLink: 1600,
+        toast: 1700,
+        tooltip: 1800,
+    },
+};

package/build/source/utils.jsx

@@ -0,0 +1,77 @@
+import { serialize } from 'superjson';
+export function getQueryStatusLabel(query) {
+    return query.state.fetchStatus === 'fetching'
+        ? 'fetching'
+        : !query.getObserversCount()
+            ? 'inactive'
+            : query.state.fetchStatus === 'paused'
+                ? 'paused'
+                : query.isStale()
+                    ? 'stale'
+                    : 'fresh';
+}
+export const queryStatusLabels = [
+    'fresh',
+    'stale',
+    'paused',
+    'inactive',
+    'fetching',
+];
+export function getSidedProp(prop, side) {
+    return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
+}
+export function getQueryStatusColor({ queryState, observerCount, isStale, }) {
+    return queryState.fetchStatus === 'fetching'
+        ? 'blue'
+        : !observerCount
+            ? 'gray'
+            : queryState.fetchStatus === 'paused'
+                ? 'purple'
+                : isStale
+                    ? 'yellow'
+                    : 'green';
+}
+export function getQueryStatusColorByLabel(label) {
+    return label === 'fresh'
+        ? 'green'
+        : label === 'stale'
+            ? 'yellow'
+            : label === 'paused'
+                ? 'purple'
+                : label === 'inactive'
+                    ? 'gray'
+                    : 'blue';
+}
+/**
+ * Displays a string regardless the type of the data
+ * @param {unknown} value Value to be stringified
+ * @param {boolean} beautify Formats json to multiline
+ */
+export const displayValue = (value, beautify = false) => {
+    const { json } = serialize(value);
+    return JSON.stringify(json, null, beautify ? 2 : undefined);
+};
+const getStatusRank = (q) => q.state.fetchStatus !== 'idle'
+    ? 0
+    : !q.getObserversCount()
+        ? 3
+        : q.isStale()
+            ? 2
+            : 1;
+const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
+const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+const statusAndDateSort = (a, b) => {
+    if (getStatusRank(a) === getStatusRank(b)) {
+        return dateSort(a, b);
+    }
+    return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+};
+export const sortFns = {
+    status: statusAndDateSort,
+    'query hash': queryHashSort,
+    'last updated': dateSort,
+};
+export const convertRemToPixels = (rem) => {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+export const convertPixelsToRem = (px) => px / convertRemToPixels(1);

package/build/{lib → types}/Context.d.ts

@@ -26,4 +26,3 @@ export interface QueryDevtoolsProps {
 export declare const QueryDevtoolsContext: import("solid-js").Context<QueryDevtoolsProps>;
 export declare function useQueryDevtoolsContext(): QueryDevtoolsProps;
 export {};
-//# sourceMappingURL=Context.d.ts.map

package/build/{lib → types}/Devtools.d.ts

@@ -12,6 +12,7 @@ interface QueryStatusProps {
     count: number;
 }
 export declare const DevtoolsComponent: Component<QueryDevtoolsProps>;
+export default DevtoolsComponent;
 export declare const Devtools: () => JSX.Element;
 export declare const DevtoolsPanel: Component<DevtoolsPanelProps>;
 export declare const QueryRow: Component<{
@@ -19,5 +20,3 @@ export declare const QueryRow: Component<{
 }>;
 export declare const QueryStatusCount: Component;
 export declare const QueryStatus: Component<QueryStatusProps>;
-export {};
-//# sourceMappingURL=Devtools.d.ts.map

package/build/{lib → types}/Explorer.d.ts

@@ -19,4 +19,3 @@ type ExplorerProps = {
 };
 export default function Explorer(props: ExplorerProps): import("solid-js").JSX.Element;
 export {};
-//# sourceMappingURL=Explorer.d.ts.map

package/build/{lib → types}/fonts.d.ts

@@ -1,2 +1 @@
 export declare const loadFonts: () => void;
-//# sourceMappingURL=fonts.d.ts.map

package/build/{lib → types}/icons/index.d.ts

@@ -9,4 +9,3 @@ export declare function Copier(): import("solid-js").JSX.Element;
 export declare function CopiedCopier(): import("solid-js").JSX.Element;
 export declare function ErrorCopier(): import("solid-js").JSX.Element;
 export declare function TanstackLogo(): import("solid-js").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/build/{lib → types}/index.d.ts

@@ -1,4 +1,5 @@
 import type { QueryClient, onlineManager as TonlineManager } from '@tanstack/query-core';
+import type { DevtoolsComponent } from './Devtools';
 import type { DevtoolsButtonPosition, DevtoolsPosition, QueryDevtoolsProps, DevToolsErrorType } from './Context';
 import type { Signal } from 'solid-js';
 export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType };
@@ -14,6 +15,7 @@ declare class TanstackQueryDevtools {
     position: Signal<DevtoolsPosition | undefined>;
     initialIsOpen: Signal<boolean | undefined>;
     errorTypes: Signal<DevToolsErrorType[] | undefined>;
+    Component: typeof DevtoolsComponent | undefined;
     dispose?: () => void;
     constructor(config: TanstackQueryDevtoolsConfig);
     setButtonPosition(position: DevtoolsButtonPosition): void;
@@ -25,4 +27,3 @@ declare class TanstackQueryDevtools {
     unmount(): void;
 }
 export { TanstackQueryDevtools };
-//# sourceMappingURL=index.d.ts.map

package/build/{lib → types}/theme.d.ts

@@ -294,4 +294,3 @@ export type ThemeColorsAll = {
 }[keyof ThemeConfigType['colors']];
 export type AtomicThemeColors = 'white' | 'black' | 'transparent' | 'current' | 'inherit';
 export type ThemeColors = Exclude<ThemeColorsAll, AtomicThemeColors>;
-//# sourceMappingURL=theme.d.ts.map

package/build/{lib → types}/utils.d.ts

@@ -1,13 +1,15 @@
 import type { Query } from '@tanstack/query-core';
-export declare function getQueryStatusLabel(query: Query): "fetching" | "paused" | "inactive" | "stale" | "fresh";
+import type { DevtoolsPosition } from './Context';
+export declare function getQueryStatusLabel(query: Query): "inactive" | "paused" | "fetching" | "stale" | "fresh";
 export declare const queryStatusLabels: readonly ["fresh", "stale", "paused", "inactive", "fetching"];
 export type IQueryStatusLabel = (typeof queryStatusLabels)[number];
+export declare function getSidedProp<T extends string>(prop: T, side: DevtoolsPosition): `${T}Left` | `${T}Right` | `${T}Top` | `${T}Bottom`;
 export declare function getQueryStatusColor({ queryState, observerCount, isStale, }: {
     queryState: Query['state'];
     observerCount: number;
     isStale: boolean;
-}): "blue" | "gray" | "purple" | "yellow" | "green";
-export declare function getQueryStatusColorByLabel(label: IQueryStatusLabel): "blue" | "gray" | "purple" | "yellow" | "green";
+}): "blue" | "gray" | "green" | "purple" | "yellow";
+export declare function getQueryStatusColorByLabel(label: IQueryStatusLabel): "blue" | "gray" | "green" | "purple" | "yellow";
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified
@@ -19,4 +21,3 @@ export declare const sortFns: Record<string, SortFn>;
 export declare const convertRemToPixels: (rem: number) => number;
 export declare const convertPixelsToRem: (px: number) => number;
 export {};
-//# sourceMappingURL=utils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.0.0-alpha.53",
+  "version": "5.0.0-alpha.54",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -11,16 +11,20 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "build/lib/index.d.ts",
-  "main": "build/lib/index.cjs",
-  "module": "build/lib/index.js",
+  "types": "build/types/index.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
   "exports": {
     ".": {
-      "types": "./build/lib/index.d.ts",
-      "solid": "./build/lib/index.js",
-      "import": "./build/lib/index.js",
-      "require": "./build/lib/index.cjs",
-      "default": "./build/lib/index.cjs"
+      "types": "./build/types/index.d.ts",
+      "solid": "./build/source/index.jsx",
+      "import": "./build/esm/index.js",
+      "browser": {
+        "import": "./build/esm/index.js",
+        "require": "./build/cjs/index.js"
+      },
+      "require": "./build/cjs/index.js",
+      "node": "./build/cjs/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -40,6 +44,7 @@
   },
   "devDependencies": {
     "@tanstack/query-core": "^5.0.0-alpha.43",
+    "rollup-preset-solid": "^2.0.1",
     "vite-plugin-solid": "^2.5.0"
   },
   "scripts": {
@@ -48,7 +53,9 @@
     "test:types": "tsc --noEmit",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "build": "pnpm build:rollup && pnpm build:types",
+    "test:build": "publint",
+    "build": "pnpm build:rollup && pnpm rename-build-dir",
+    "rename-build-dir": "rimraf ./build && mv ./dist ./build",
     "build:rollup": "rollup --config rollup.config.js",
     "build:types": "tsc --emitDeclarationOnly"
   }

package/src/Devtools.tsx

@@ -20,6 +20,7 @@ import {
   getQueryStatusColorByLabel,
   sortFns,
   convertRemToPixels,
+  getSidedProp,
 } from './utils'
 import {
   ArrowDown,
@@ -82,6 +83,8 @@ export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
   )
 }
 
+export default DevtoolsComponent
+
 export const Devtools = () => {
   loadFonts()
 
@@ -315,6 +318,42 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
     setSettingsOpen(false)
   }
 
+  createEffect(() => {
+    const rootContainer = panelRef.parentElement?.parentElement?.parentElement
+    if (!rootContainer) return
+    const styleProp = getSidedProp(
+      'padding',
+      props.localStore.position as DevtoolsPosition,
+    )
+    const isVertical =
+      props.localStore.position === 'left' ||
+      props.localStore.position === 'right'
+    const previousPaddings = (({
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }) => ({
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }))(rootContainer.style)
+
+    rootContainer.style[styleProp] = `${
+      isVertical ? props.localStore.width : props.localStore.height
+    }px`
+
+    onCleanup(() => {
+      Object.entries(previousPaddings).forEach(([property, previousValue]) => {
+        rootContainer.style[property as keyof typeof previousPaddings] =
+          previousValue
+      })
+    })
+  })
+
   return (
     <aside
       // Some context for styles here
@@ -1200,6 +1239,7 @@ const getStyles = () => {
         font-family: 'Inter', sans-serif;
         color: ${colors.gray[300]};
         box-sizing: border-box;
+        text-transform: none;
       }
     `,
     'devtoolsBtn-position-bottom-right': css`