Skip to content

Commit bc5d125

Browse files
autofix-ci[bot]autofix-ci[bot]
authored
ci: apply automated fixes
1 parent 2332b61 commit bc5d125

File tree

15 files changed

+211
-123
lines changed

15 files changed

+211
-123
lines changed

‎packages/devtools/src/components/content-panel.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { Show } from 'solid-js'
2-
import { useDetachedWindowControls, useDevtoolsSettings } from '../context/use-devtools-context'
2+
import {
3+
useDetachedWindowControls,
4+
useDevtoolsSettings,
5+
} from '../context/use-devtools-context'
36
import { useStyles } from '../styles/use-styles'
47
import type { JSX } from 'solid-js/jsx-runtime'
58

‎packages/devtools/src/components/main-panel.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import clsx from 'clsx'
2-
import { useDetachedWindowControls, useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
2+
import {
3+
useDetachedWindowControls,
4+
useDevtoolsSettings,
5+
useHeight,
6+
} from '../context/use-devtools-context'
37
import { useStyles } from '../styles/use-styles'
48
import { TANSTACK_DEVTOOLS } from '../utils/storage'
59
import type { Accessor, JSX } from 'solid-js'
610

7-
811
export const MainPanel = (props: {
912
isOpen: Accessor<boolean>
1013
children: JSX.Element
@@ -18,7 +21,7 @@ export const MainPanel = (props: {
1821
<div
1922
id={TANSTACK_DEVTOOLS}
2023
style={{
21-
height: isDetached ? window.innerHeight + "px" : height() + 'px',
24+
height: isDetached ? window.innerHeight + 'px' : height() + 'px',
2225
}}
2326
class={clsx(
2427
styles().devtoolsPanelContainer(settings().panelLocation, isDetached),

‎packages/devtools/src/components/tabs.tsx‎

Lines changed: 68 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import clsx from 'clsx'
22
import { For } from 'solid-js'
33
import { useStyles } from '../styles/use-styles'
4-
import { useDetachedWindowControls, useDevtoolsState } from '../context/use-devtools-context'
4+
import {
5+
useDetachedWindowControls,
6+
useDevtoolsState,
7+
} from '../context/use-devtools-context'
58
import { tabs } from '../tabs'
6-
import { TANSTACK_DEVTOOLS_DETACHED_OWNER, TANSTACK_DEVTOOLS_IS_DETACHED, setSessionItem, setStorageItem, } from '../utils/storage'
9+
import {
10+
TANSTACK_DEVTOOLS_DETACHED_OWNER,
11+
TANSTACK_DEVTOOLS_IS_DETACHED,
12+
setSessionItem,
13+
setStorageItem,
14+
} from '../utils/storage'
715

816
interface TabsProps {
917
toggleOpen: () => void
@@ -12,18 +20,19 @@ interface TabsProps {
1220
export const Tabs = (props: TabsProps) => {
1321
const styles = useStyles()
1422
const { state, setState } = useDevtoolsState()
15-
const { setDetachedWindowOwner, detachedWindowOwner, detachedWindow } = useDetachedWindowControls()
23+
const { setDetachedWindowOwner, detachedWindowOwner, detachedWindow } =
24+
useDetachedWindowControls()
1625
const handleDetachment = () => {
1726
const rdtWindow = window.open(
1827
window.location.href,
19-
"",
20-
`popup,width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`
28+
'',
29+
`popup,width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
2130
)
2231

2332
if (rdtWindow) {
2433
setDetachedWindowOwner(true)
25-
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, "true")
26-
setSessionItem(TANSTACK_DEVTOOLS_DETACHED_OWNER, "true")
34+
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, 'true')
35+
setSessionItem(TANSTACK_DEVTOOLS_DETACHED_OWNER, 'true')
2736
rdtWindow.TDT_MOUNTED = true
2837
}
2938
}
@@ -40,37 +49,60 @@ export const Tabs = (props: TabsProps) => {
4049
</button>
4150
)}
4251
</For>
43-
{!detachedWindow && <div style={{
44-
"margin-top": "auto"
45-
}}>
46-
{!detachedWindowOwner() && <button
47-
type="button"
48-
class={clsx(styles().tab, 'detach')}
49-
onClick={handleDetachment}
52+
{!detachedWindow && (
53+
<div
54+
style={{
55+
'margin-top': 'auto',
56+
}}
5057
>
51-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"><path d="M2 10h6V4" /><path d="m2 4 6 6" /><path d="M21 10V7a2 2 0 0 0-2-2h-7" /><path d="M3 14v2a2 2 0 0 0 2 2h3" /><rect x="12" y="14" width="10" height="7" rx="1" /></svg>
52-
</button>}
53-
<button
54-
type="button"
55-
class={clsx(styles().tab, 'close')}
56-
onClick={() => props.toggleOpen()}
57-
>
58-
<svg
59-
xmlns="http://www.w3.org/2000/svg"
60-
width="24"
61-
height="24"
62-
viewBox="0 0 24 24"
63-
fill="none"
64-
stroke="currentColor"
65-
stroke-width="2"
66-
stroke-linecap="round"
67-
stroke-linejoin="round"
58+
{!detachedWindowOwner() && (
59+
<button
60+
type="button"
61+
class={clsx(styles().tab, 'detach')}
62+
onClick={handleDetachment}
63+
>
64+
<svg
65+
xmlns="http://www.w3.org/2000/svg"
66+
width="24"
67+
height="24"
68+
viewBox="0 0 24 24"
69+
fill="none"
70+
stroke="currentColor"
71+
stroke-width="2"
72+
stroke-linecap="round"
73+
stroke-linejoin="round"
74+
class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"
75+
>
76+
<path d="M2 10h6V4" />
77+
<path d="m2 4 6 6" />
78+
<path d="M21 10V7a2 2 0 0 0-2-2h-7" />
79+
<path d="M3 14v2a2 2 0 0 0 2 2h3" />
80+
<rect x="12" y="14" width="10" height="7" rx="1" />
81+
</svg>
82+
</button>
83+
)}
84+
<button
85+
type="button"
86+
class={clsx(styles().tab, 'close')}
87+
onClick={() => props.toggleOpen()}
6888
>
69-
<path d="M18 6 6 18" />
70-
<path d="m6 6 12 12" />
71-
</svg>
72-
</button>
73-
</div>}
89+
<svg
90+
xmlns="http://www.w3.org/2000/svg"
91+
width="24"
92+
height="24"
93+
viewBox="0 0 24 24"
94+
fill="none"
95+
stroke="currentColor"
96+
stroke-width="2"
97+
stroke-linecap="round"
98+
stroke-linejoin="round"
99+
>
100+
<path d="M18 6 6 18" />
101+
<path d="m6 6 12 12" />
102+
</svg>
103+
</button>
104+
</div>
105+
)}
74106
</div>
75107
)
76108
}

‎packages/devtools/src/context/devtools-context.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import {
1010
setSessionItem,
1111
setStorageItem,
1212
} from '../utils/storage'
13-
import { checkIsDetached, checkIsDetachedOwner, checkIsDetachedWindow } from '../utils/detached'
13+
import {
14+
checkIsDetached,
15+
checkIsDetachedOwner,
16+
checkIsDetachedWindow,
17+
} from '../utils/detached'
1418
import { useRemoveBody } from '../hooks/detached/use-remove-body'
1519
import { initialState } from './devtools-store'
1620
import type { DevtoolsStore } from './devtools-store'
@@ -99,12 +103,12 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
99103
const setIsDetachedIfRequired = () => {
100104
const isDetachedWindow = checkIsDetachedWindow()
101105
if (!isDetachedWindow && window.TDT_MOUNTED) {
102-
setSessionItem(TANSTACK_DEVTOOLS_DETACHED, "true")
106+
setSessionItem(TANSTACK_DEVTOOLS_DETACHED, 'true')
103107
}
104108
}
105109

106110
const resetIsDetachedCheck = () => {
107-
setStorageItem(TANSTACK_DEVTOOLS_CHECK_DETACHED, "false")
111+
setStorageItem(TANSTACK_DEVTOOLS_CHECK_DETACHED, 'false')
108112
}
109113

110114
const detachedModeSetup = () => {

‎packages/devtools/src/context/devtools-store.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export type DevtoolsStore = {
5555
activeTab: TabName
5656
height: number
5757
activePlugin?: string | undefined
58-
persistOpen: boolean,
58+
persistOpen: boolean
5959
}
6060
detachedWindowOwner?: boolean
6161
detachedWindow?: boolean

‎packages/devtools/src/devtools.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ import {
77
usePersistOpen,
88
} from './context/use-devtools-context'
99
import { useDisableTabbing } from './hooks/use-disable-tabbing'
10-
import { TANSTACK_DEVTOOLS, TANSTACK_DEVTOOLS_DETACHED_OWNER, TANSTACK_DEVTOOLS_IS_DETACHED, setSessionItem, setStorageItem, } from './utils/storage'
10+
import {
11+
TANSTACK_DEVTOOLS,
12+
TANSTACK_DEVTOOLS_DETACHED_OWNER,
13+
TANSTACK_DEVTOOLS_IS_DETACHED,
14+
setSessionItem,
15+
setStorageItem,
16+
} from './utils/storage'
1117
import { Trigger } from './components/trigger'
1218
import { MainPanel } from './components/main-panel'
1319
import { ContentPanel } from './components/content-panel'
@@ -19,7 +25,8 @@ import { useWindowListener } from './hooks/use-event-listener'
1925
import { useCheckIfStillDetached } from './hooks/detached/use-check-if-still-detached'
2026

2127
export default function DevTools() {
22-
const { detachedWindowOwner, isDetached, setDetachedWindowOwner } = useDetachedWindowControls()
28+
const { detachedWindowOwner, isDetached, setDetachedWindowOwner } =
29+
useDetachedWindowControls()
2330
const { settings } = useDevtoolsSettings()
2431
const { setHeight } = useHeight()
2532
const { persistOpen, setPersistOpen } = usePersistOpen()
@@ -152,7 +159,7 @@ export default function DevTools() {
152159

153160
createEffect(() => {
154161
if (isDetached) {
155-
useWindowListener("resize", () => {
162+
useWindowListener('resize', () => {
156163
setHeight(window.innerHeight)
157164
})
158165
}
@@ -165,14 +172,15 @@ export default function DevTools() {
165172
isOpen={() => false}
166173
setIsOpen={() => {
167174
setDetachedWindowOwner(false)
168-
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, "false")
169-
setSessionItem(TANSTACK_DEVTOOLS_DETACHED_OWNER, "false")
175+
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, 'false')
176+
setSessionItem(TANSTACK_DEVTOOLS_DETACHED_OWNER, 'false')
170177
}}
171178
/>
172179
</Show>
173180
<Show
174181
when={
175-
!detachedWindowOwner() && (settings().requireUrlFlag
182+
!detachedWindowOwner() &&
183+
(settings().requireUrlFlag
176184
? window.location.search.includes(settings().urlFlag)
177185
: true)
178186
}

‎packages/devtools/src/hooks/detached/use-check-if-still-detached.ts‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
2-
import { createEffect, onCleanup, } from "solid-js"
1+
import { createEffect, onCleanup } from 'solid-js'
32
import {
43
TANSTACK_DEVTOOLS_CHECK_DETACHED,
54
TANSTACK_DEVTOOLS_DETACHED,
65
TANSTACK_DEVTOOLS_DETACHED_OWNER,
76
TANSTACK_DEVTOOLS_IS_DETACHED,
87
getBooleanFromStorage,
98
setStorageItem,
10-
} from "../../utils/storage"
11-
import { getExistingStateFromStorage } from "../../context/devtools-context.jsx"
12-
import { useDevtoolsContext } from "../../context/use-devtools-context"
9+
} from '../../utils/storage'
10+
import { getExistingStateFromStorage } from '../../context/devtools-context.jsx'
11+
import { useDevtoolsContext } from '../../context/use-devtools-context'
1312

1413
export const useCheckIfStillDetached = () => {
1514
const context = useDevtoolsContext()
@@ -19,35 +18,39 @@ export const useCheckIfStillDetached = () => {
1918
if (e.key !== TANSTACK_DEVTOOLS_CHECK_DETACHED) {
2019
return
2120
}
22-
const isDetached = getBooleanFromStorage(TANSTACK_DEVTOOLS_IS_DETACHED);
21+
const isDetached = getBooleanFromStorage(TANSTACK_DEVTOOLS_IS_DETACHED)
2322
if (!isDetached) {
2423
return
2524
}
26-
const shouldCheckDetached = getBooleanFromStorage(TANSTACK_DEVTOOLS_CHECK_DETACHED)
25+
const shouldCheckDetached = getBooleanFromStorage(
26+
TANSTACK_DEVTOOLS_CHECK_DETACHED,
27+
)
2728

2829
// If the detached window is unloaded we want to check if it is still there
2930
if (shouldCheckDetached) {
3031
setTimeout(() => {
3132
// On reload the detached window will set the flag back to false so we can check if it is still detached
32-
const isNotDetachedAnymore = getBooleanFromStorage(TANSTACK_DEVTOOLS_CHECK_DETACHED)
33+
const isNotDetachedAnymore = getBooleanFromStorage(
34+
TANSTACK_DEVTOOLS_CHECK_DETACHED,
35+
)
3336
// The window hasn't set it back to true so it is not detached anymore and we clean all the detached state
3437
if (isNotDetachedAnymore) {
35-
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, "false")
36-
setStorageItem(TANSTACK_DEVTOOLS_CHECK_DETACHED, "false")
38+
setStorageItem(TANSTACK_DEVTOOLS_IS_DETACHED, 'false')
39+
setStorageItem(TANSTACK_DEVTOOLS_CHECK_DETACHED, 'false')
3740
sessionStorage.removeItem(TANSTACK_DEVTOOLS_DETACHED_OWNER)
3841
sessionStorage.removeItem(TANSTACK_DEVTOOLS_DETACHED)
3942
const state = getExistingStateFromStorage()
40-
context.setStore(prev => ({
43+
context.setStore((prev) => ({
4144
...prev,
4245
...state,
43-
plugins: prev.plugins
46+
plugins: prev.plugins,
4447
}))
4548
}
4649
}, 200)
4750
}
4851
}
4952
createEffect(() => {
50-
window.addEventListener("storage", checkDetachment)
51-
onCleanup(() => window.removeEventListener("storage", checkDetachment))
52-
},)
53+
window.addEventListener('storage', checkDetachment)
54+
onCleanup(() => window.removeEventListener('storage', checkDetachment))
55+
})
5356
}

‎packages/devtools/src/hooks/detached/use-remove-body.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
2-
import { createEffect } from "solid-js"
3-
import { useStyles } from "../../styles/use-styles"
4-
import type { DevtoolsStore } from "../../context/devtools-store"
1+
import { createEffect } from 'solid-js'
2+
import { useStyles } from '../../styles/use-styles'
3+
import type { DevtoolsStore } from '../../context/devtools-store'
54

65
export const useRemoveBody = (state: DevtoolsStore) => {
76
const styles = useStyles()
@@ -10,9 +9,8 @@ export const useRemoveBody = (state: DevtoolsStore) => {
109
return
1110
}
1211

13-
const coverEl = document.createElement("div")
12+
const coverEl = document.createElement('div')
1413
coverEl.classList.add(styles().cover)
1514
document.body.appendChild(coverEl)
16-
1715
})
1816
}

‎packages/devtools/src/hooks/detached/use-reset-detachment-check.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
2-
import { useDetachedWindowControls } from "../../context/use-devtools-context"
3-
import { TANSTACK_DEVTOOLS_CHECK_DETACHED, setStorageItem, } from "../../utils/storage"
4-
import { useWindowListener } from "../use-event-listener"
1+
import { useDetachedWindowControls } from '../../context/use-devtools-context'
2+
import {
3+
TANSTACK_DEVTOOLS_CHECK_DETACHED,
4+
setStorageItem,
5+
} from '../../utils/storage'
6+
import { useWindowListener } from '../use-event-listener'
57
// called on windows unmount
68
export const useResetDetachmentCheck = () => {
79
const { isDetached } = useDetachedWindowControls()
810

9-
useWindowListener("unload", () => setStorageItem(TANSTACK_DEVTOOLS_CHECK_DETACHED, "true"), isDetached)
11+
useWindowListener(
12+
'unload',
13+
() => setStorageItem(TANSTACK_DEVTOOLS_CHECK_DETACHED, 'true'),
14+
isDetached,
15+
)
1016
}

0 commit comments

Comments
 (0)