Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(devtools): Add framework agnostic devtools draft #5347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TkDodo merged 15 commits into from
May 2, 2023
Merged

feat(devtools): Add framework agnostic devtools draft #5347

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2019cb6
feat(devtools): Add framework agnostic devtools draft
Apr 29, 2023
cfa183d
Fix test
Apr 29, 2023
c8f13a6
Move query-devtools build before react-query-devtools
Apr 29, 2023
c6dae00
Fix dimensions bug & add isInitialOpen props
Apr 29, 2023
3f0c50f
Fix isOpen state
Apr 29, 2023
4410152
Add devtools cutom errorTypes option
Apr 30, 2023
5145a4c
Add explicit close button
May 1, 2023
dad1c06
Add keyboard focus for tooltips
May 1, 2023
9f1d33a
Add query-core to query-devtools peerDependencies
May 1, 2023
7289416
Update pnpm lock file
May 1, 2023
9233321
Merge branch 'alpha' into framework-agnostic-devtools
TkDodo May 1, 2023
0d198ba
Add overflow hidden to hide filters on top view
May 1, 2023
76cbfe0
Revert overflow hidden - causing other issues
May 1, 2023
a276517
Update documentation
May 1, 2023
bedc0db
Fix validate-packages script
May 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix dimensions bug & add isInitialOpen props
  • Loading branch information
Aryan Deora committed Apr 30, 2023
commit c6dae00eec2219f4a4bca44048d8828f220f14f5
34 changes: 13 additions & 21 deletions packages/query-devtools/src/Devtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const BUTTON_POSITION: DevtoolsButtonPosition = 'bottom-right'
const POSITION: DevtoolsPosition = 'bottom'
const INITIAL_IS_OPEN = false
const DEFAULT_HEIGHT = 500
const DEFAULT_WIDTH = 400
const DEFAULT_WIDTH = 500
const DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0]
const DEFAULT_SORT_ORDER = 1

Expand Down Expand Up @@ -302,14 +302,6 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
let queriesContainerRef!: HTMLDivElement
let panelRef!: HTMLDivElement

// onMount(() => {
// createResizeObserver(queriesContainerRef, ({ width, height }, el) => {
// if (el === queriesContainerRef) {
// setQueryContainerWidth(width);
// }
// });
// });

onMount(() => {
createResizeObserver(panelRef, ({ width }, el) => {
if (el === panelRef) {
Expand Down Expand Up @@ -343,11 +335,11 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
height:
position() === 'bottom' || position() === 'top'
? `${props.localStore.height || DEFAULT_HEIGHT}px`
: undefined,
: 'auto',
width:
position() === 'right' || position() === 'left'
? `${props.localStore.width || DEFAULT_WIDTH}px`
: undefined,
: 'auto',
}}
ref={panelRef}
aria-label="Tanstack query devtools"
Expand Down Expand Up @@ -1117,9 +1109,9 @@ const getStyles = () => {
border-radius: 9999px;
background-color: transparent;
border: none;
height: 48px;
height: 40px;
display: flex;
width: 48px;
width: 40px;
overflow: hidden;
cursor: pointer;
outline: none;
Expand All @@ -1143,20 +1135,20 @@ const getStyles = () => {
}
`,
'devtoolsBtn-position-bottom-right': css`
bottom: 16px;
right: 16px;
bottom: 12px;
right: 12px;
`,
'devtoolsBtn-position-bottom-left': css`
bottom: 16px;
left: 16px;
bottom: 12px;
left: 12px;
`,
'devtoolsBtn-position-top-left': css`
top: 16px;
left: 16px;
top: 12px;
left: 12px;
`,
'devtoolsBtn-position-top-right': css`
top: 16px;
right: 16px;
top: 12px;
right: 12px;
`,
'panel-position-top': css`
top: 0;
Expand Down
6 changes: 5 additions & 1 deletion packages/react-query-devtools/src/devtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function ReactQueryDevtools(
): React.ReactElement | null {
const queryClient = useQueryClient()
const ref = useRef<HTMLDivElement>(null)
const { buttonPosition, position } = props
const { buttonPosition, position, initialIsOpen } = props
const [devtools] = useState(
new TanstackQueryDevtools({
Comment on lines +45 to +46
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo Apr 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should probably be a function:

useState(() => new TanstackQueryDevtools(...))

Copy link
Copy Markdown
Contributor Author

@ardeora ardeora Apr 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah my bad! My brain is breaking switching my react brain on and off 😆

client: props.client || queryClient,
Expand All @@ -59,6 +59,10 @@ export function ReactQueryDevtools(
}
}, [position, devtools])

useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false)
}, [initialIsOpen, devtools])

useEffect(() => {
if (ref.current) {
devtools.mount(ref.current)
Expand Down