@tanstack/query-devtools 5.0.0-alpha.86 → 5.0.0-alpha.88

package/dist/source/index.jsx

@@ -1,88 +0,0 @@
-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/dist/source/theme.js

@@ -1,304 +0,0 @@
-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/dist/source/utils.jsx

@@ -1,77 +0,0 @@
-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/dist/types/Context.d.ts

@@ -1,28 +0,0 @@
-import type { Query, QueryClient, onlineManager } from '@tanstack/query-core';
-type XPosition = 'left' | 'right';
-type YPosition = 'top' | 'bottom';
-export type DevtoolsPosition = XPosition | YPosition;
-export type DevtoolsButtonPosition = `${YPosition}-${XPosition}`;
-export interface DevToolsErrorType {
-    /**
-     * The name of the error.
-     */
-    name: string;
-    /**
-     * How the error is initialized.
-     */
-    initializer: (query: Query) => Error;
-}
-export interface QueryDevtoolsProps {
-    readonly client: QueryClient;
-    queryFlavor: string;
-    version: string;
-    onlineManager: typeof onlineManager;
-    buttonPosition?: DevtoolsButtonPosition;
-    position?: DevtoolsPosition;
-    initialIsOpen?: boolean;
-    errorTypes?: DevToolsErrorType[];
-}
-export declare const QueryDevtoolsContext: import("solid-js").Context<QueryDevtoolsProps>;
-export declare function useQueryDevtoolsContext(): QueryDevtoolsProps;
-export {};

package/dist/types/Devtools.d.ts

@@ -1,22 +0,0 @@
-import type { QueryDevtoolsProps } from './Context';
-import type { Query } from '@tanstack/query-core';
-import type { StorageObject, StorageSetter } from '@solid-primitives/storage';
-import type { Component, JSX } from 'solid-js';
-interface DevtoolsPanelProps {
-    localStore: StorageObject<string>;
-    setLocalStore: StorageSetter<string, unknown>;
-}
-interface QueryStatusProps {
-    label: string;
-    color: 'green' | 'yellow' | 'gray' | 'blue' | 'purple';
-    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<{
-    query: Query;
-}>;
-export declare const QueryStatusCount: Component;
-export declare const QueryStatus: Component<QueryStatusProps>;

package/dist/types/Explorer.d.ts

@@ -1,21 +0,0 @@
-/**
- * Chunk elements in the array by size
- *
- * when the array cannot be chunked evenly by size, the last chunk will be
- * filled with the remaining elements
- *
- * @example
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
- */
-export declare function chunkArray<T extends {
-    label: string;
-    value: unknown;
-}>(array: T[], size: number): T[][];
-type ExplorerProps = {
-    copyable?: boolean;
-    label: string;
-    value: unknown;
-    defaultExpanded?: string[];
-};
-export default function Explorer(props: ExplorerProps): import("solid-js").JSX.Element;
-export {};

package/dist/types/fonts.d.ts

@@ -1 +0,0 @@
-export declare const loadFonts: () => void;

package/dist/types/icons/index.d.ts

@@ -1,11 +0,0 @@
-export declare function Search(): import("solid-js").JSX.Element;
-export declare function ChevronDown(): import("solid-js").JSX.Element;
-export declare function ArrowUp(): import("solid-js").JSX.Element;
-export declare function ArrowDown(): import("solid-js").JSX.Element;
-export declare function Wifi(): import("solid-js").JSX.Element;
-export declare function Offline(): import("solid-js").JSX.Element;
-export declare function Settings(): import("solid-js").JSX.Element;
-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;

package/dist/types/index.d.ts

@@ -1,29 +0,0 @@
-import type { QueryClient, onlineManager as TonlineManager } from '@tanstack/query-core';
-import type { DevtoolsComponent } from './Devtools';
-import type { DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition, QueryDevtoolsProps } from './Context';
-import type { Signal } from 'solid-js';
-export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType };
-export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
-}
-declare class TanstackQueryDevtools {
-    client: Signal<QueryClient>;
-    onlineManager: typeof TonlineManager;
-    queryFlavor: string;
-    version: string;
-    isMounted: boolean;
-    buttonPosition: Signal<DevtoolsButtonPosition | undefined>;
-    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;
-    setPosition(position: DevtoolsPosition): void;
-    setInitialIsOpen(isOpen: boolean): void;
-    setErrorTypes(errorTypes: DevToolsErrorType[]): void;
-    setClient(client: QueryClient): void;
-    mount<T extends HTMLElement>(el: T): void;
-    unmount(): void;
-}
-export { TanstackQueryDevtools };