Skip to content

Commit 36676d2

Browse files
author
Aryan Deora
committed
feat(query-devtools): Lazyload Query Devtools Core
1 parent 110b4df commit 36676d2

File tree

7 files changed

+381
-43
lines changed

7 files changed

+381
-43
lines changed

‎packages/query-devtools/package.json‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,20 @@
1111
"url": "https://github.com/sponsors/tannerlinsley"
1212
},
1313
"type": "module",
14-
"types": "build/lib/index.d.ts",
15-
"main": "build/lib/index.cjs",
16-
"module": "build/lib/index.js",
14+
"types": "build/types/index.d.ts",
15+
"main": "build/cjs/index.js",
16+
"module": "build/esm/index.js",
1717
"exports": {
1818
".": {
19-
"types": "./build/lib/index.d.ts",
20-
"solid": "./build/lib/index.js",
21-
"import": "./build/lib/index.js",
22-
"require": "./build/lib/index.cjs",
23-
"default": "./build/lib/index.cjs"
19+
"types": "./build/types/index.d.ts",
20+
"solid": "./build/source/index.jsx",
21+
"import": "./build/esm/index.js",
22+
"browser": {
23+
"import": "./build/esm/index.js",
24+
"require": "./build/cjs/index.js"
25+
},
26+
"require": "./build/cjs/index.js",
27+
"node": "./build/cjs/index.js"
2428
},
2529
"./package.json": "./package.json"
2630
},
@@ -31,7 +35,8 @@
3135
"test:lib": "vitest run --coverage",
3236
"test:lib:dev": "pnpm run test:lib --watch",
3337
"test:build": "publint",
34-
"build": "pnpm build:rollup && pnpm build:types",
38+
"build": "pnpm build:rollup && pnpm rename-build-dir",
39+
"rename-build-dir": "rimraf ./build && mv ./dist ./build",
3540
"build:rollup": "rollup --config rollup.config.js",
3641
"build:types": "tsc --emitDeclarationOnly"
3742
},
@@ -51,6 +56,7 @@
5156
},
5257
"devDependencies": {
5358
"@tanstack/query-core": "^5.0.0-alpha.43",
59+
"rollup-preset-solid": "^2.0.1",
5460
"vite-plugin-solid": "^2.5.0"
5561
}
5662
}

‎packages/query-devtools/rollup.config.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
// @ts-check
2+
import withSolid from 'rollup-preset-solid'
23

3-
import { defineConfig } from 'rollup'
4-
import { buildConfigs } from '../../scripts/getRollupConfig.js'
4+
const config = withSolid({
5+
input: 'src/index.tsx',
6+
targets: ['esm', 'cjs'],
7+
})
58

6-
export default defineConfig(
7-
buildConfigs({
8-
name: 'query-devtools',
9-
outputFile: 'index',
10-
entryFile: './src/index.tsx',
11-
forceBundle: true,
12-
bundleDeps: true,
13-
}),
14-
)
9+
if (!Array.isArray(config)) {
10+
config.external = []
11+
}
12+
13+
export default config

‎packages/query-devtools/src/Devtools.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
getQueryStatusColorByLabel,
2121
sortFns,
2222
convertRemToPixels,
23+
getSidedProp,
2324
} from './utils'
2425
import {
2526
ArrowDown,
@@ -82,6 +83,8 @@ export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
8283
)
8384
}
8485

86+
export default DevtoolsComponent
87+
8588
export const Devtools = () => {
8689
loadFonts()
8790

@@ -315,6 +318,42 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
315318
setSettingsOpen(false)
316319
}
317320

321+
createEffect(() => {
322+
const rootContainer = panelRef.parentElement?.parentElement?.parentElement
323+
if (!rootContainer) return
324+
const styleProp = getSidedProp(
325+
'padding',
326+
props.localStore.position as DevtoolsPosition,
327+
)
328+
const isVertical =
329+
props.localStore.position === 'left' ||
330+
props.localStore.position === 'right'
331+
const previousPaddings = (({
332+
padding,
333+
paddingTop,
334+
paddingBottom,
335+
paddingLeft,
336+
paddingRight,
337+
}) => ({
338+
padding,
339+
paddingTop,
340+
paddingBottom,
341+
paddingLeft,
342+
paddingRight,
343+
}))(rootContainer.style)
344+
345+
rootContainer.style[styleProp] = `${
346+
isVertical ? props.localStore.width : props.localStore.height
347+
}px`
348+
349+
onCleanup(() => {
350+
Object.entries(previousPaddings).forEach(([property, previousValue]) => {
351+
rootContainer.style[property as keyof typeof previousPaddings] =
352+
previousValue
353+
})
354+
})
355+
})
356+
318357
return (
319358
<aside
320359
// Some context for styles here
@@ -1200,6 +1239,7 @@ const getStyles = () => {
12001239
font-family: 'Inter', sans-serif;
12011240
color: ${colors.gray[300]};
12021241
box-sizing: border-box;
1242+
text-transform: none;
12031243
}
12041244
`,
12051245
'devtoolsBtn-position-bottom-right': css`

‎packages/query-devtools/src/Explorer.tsx‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { displayValue } from './utils'
2-
import * as superjson from 'superjson'
2+
import { stringify } from 'superjson'
33
import { css, cx } from '@emotion/css'
44
import { tokens } from './theme'
55
import { createMemo, createSignal, Index, Match, Show, Switch } from 'solid-js'
@@ -77,23 +77,21 @@ const CopyButton = (props: { value: unknown }) => {
7777
onClick={
7878
copyState() === 'NoCopy'
7979
? () => {
80-
navigator.clipboard
81-
.writeText(superjson.stringify(props.value))
82-
.then(
83-
() => {
84-
setCopyState('SuccessCopy')
85-
setTimeout(() => {
86-
setCopyState('NoCopy')
87-
}, 1500)
88-
},
89-
(err) => {
90-
console.error('Failed to copy: ', err)
91-
setCopyState('ErrorCopy')
92-
setTimeout(() => {
93-
setCopyState('NoCopy')
94-
}, 1500)
95-
},
96-
)
80+
navigator.clipboard.writeText(stringify(props.value)).then(
81+
() => {
82+
setCopyState('SuccessCopy')
83+
setTimeout(() => {
84+
setCopyState('NoCopy')
85+
}, 1500)
86+
},
87+
(err) => {
88+
console.error('Failed to copy: ', err)
89+
setCopyState('ErrorCopy')
90+
setTimeout(() => {
91+
setCopyState('NoCopy')
92+
}, 1500)
93+
},
94+
)
9795
}
9896
: undefined
9997
}

‎packages/query-devtools/src/index.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type {
22
QueryClient,
33
onlineManager as TonlineManager,
44
} from '@tanstack/query-core'
5-
import { DevtoolsComponent } from './Devtools'
5+
import type { DevtoolsComponent } from './Devtools'
66
import { render } from 'solid-js/web'
77
import type {
88
DevtoolsButtonPosition,
@@ -11,7 +11,7 @@ import type {
1111
DevToolsErrorType,
1212
} from './Context'
1313
import type { Signal } from 'solid-js'
14-
import { createSignal } from 'solid-js'
14+
import { createSignal, lazy } from 'solid-js'
1515

1616
export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }
1717
export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {}
@@ -26,6 +26,7 @@ class TanstackQueryDevtools {
2626
position: Signal<DevtoolsPosition | undefined>
2727
initialIsOpen: Signal<boolean | undefined>
2828
errorTypes: Signal<DevToolsErrorType[] | undefined>
29+
Component: typeof DevtoolsComponent | undefined
2930
dispose?: () => void
3031

3132
constructor(config: TanstackQueryDevtoolsConfig) {
@@ -79,8 +80,18 @@ class TanstackQueryDevtools {
7980
const [isOpen] = this.initialIsOpen
8081
const [errors] = this.errorTypes
8182
const [queryClient] = this.client
83+
84+
let Devtools: typeof DevtoolsComponent
85+
86+
if (this.Component) {
87+
Devtools = this.Component
88+
} else {
89+
Devtools = lazy(() => import('./Devtools'))
90+
this.Component = Devtools
91+
}
92+
8293
return (
83-
<DevtoolsComponent
94+
<Devtools
8495
queryFlavor={this.queryFlavor}
8596
version={this.version}
8697
onlineManager={this.onlineManager}

‎packages/query-devtools/src/utils.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Query } from '@tanstack/query-core'
2-
import * as superjson from 'superjson'
2+
import { serialize } from 'superjson'
3+
import type { DevtoolsPosition } from './Context'
34

45
export function getQueryStatusLabel(query: Query) {
56
return query.state.fetchStatus === 'fetching'
@@ -22,6 +23,15 @@ export const queryStatusLabels = [
2223
] as const
2324
export type IQueryStatusLabel = (typeof queryStatusLabels)[number]
2425

26+
export function getSidedProp<T extends string>(
27+
prop: T,
28+
side: DevtoolsPosition,
29+
) {
30+
return `${prop}${
31+
side.charAt(0).toUpperCase() + side.slice(1)
32+
}` as `${T}${Capitalize<DevtoolsPosition>}`
33+
}
34+
2535
export function getQueryStatusColor({
2636
queryState,
2737
observerCount,
@@ -60,7 +70,7 @@ export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
6070
* @param {boolean} beautify Formats json to multiline
6171
*/
6272
export const displayValue = (value: unknown, beautify: boolean = false) => {
63-
const { json } = superjson.serialize(value)
73+
const { json } = serialize(value)
6474

6575
return JSON.stringify(json, null, beautify ? 2 : undefined)
6676
}

0 commit comments

Comments
 (0)