Created the inital setup and the devtools skeleton#2
Conversation
|
@tanstack/devtools-example-react-basic • @tanstack/devtools-example-solid-basic commit: |
…into feat/add_shell
| mount<T extends HTMLElement>(el: T) { | ||
| if (this.#isMounted) { | ||
| throw new Error('Devtools is already mounted') | ||
| } | ||
| const mountTo = el | ||
| const dispose = render(() => { | ||
| this.#Component = lazy(() => import('./devtools')) | ||
|
|
||
| const Devtools = this.#Component | ||
|
|
||
| return ( | ||
| <DevtoolsProvider plugins={this.#plugins} config={this.#options}> | ||
| <Portal mount={mountTo}> | ||
| <Devtools /> | ||
| </Portal> | ||
| </DevtoolsProvider> | ||
| ) | ||
| }, mountTo) | ||
|
|
||
| this.#isMounted = true | ||
| this.#dispose = dispose | ||
| } |
There was a problem hiding this comment.
I'm not sure if we should let the users mount it to an element, or just mount it to document.body ourselves.
| } | ||
| }) | ||
| }) | ||
| useDisableTabbing(isOpen) |
There was a problem hiding this comment.
as a lifetime react enjoyer I'm not sure if there's a convention on creating custom "hooks" in solid, should I just call them as pure functions, like disablePadding or createDisablePadding?
| { | ||
| "path": "packages/devtools/dist/esm/index.js", | ||
| "limit": "6 KB" | ||
| "limit": "20 KB" |
There was a problem hiding this comment.
do we have some target for this?
There was a problem hiding this comment.
Kinda unnecessary for this library since it should not get included in prod builds by default. But we can keep it to help catch any accidental import of some dependency. We can feel free to change it whenever.
| defaultOpen: false, | ||
| hideUntilHover: false, | ||
| position: 'bottom-right', | ||
| panelLocation: 'bottom', | ||
| openHotkey: 'shift+a', | ||
| requireUrlFlag: false, | ||
| urlFlag: 'tanstack-devtools', |
There was a problem hiding this comment.
most of these have to be added in, I'll work on that next after the PR is merged
| createRoot(el).render( | ||
| <QueryClientProvider client={queryClient}> | ||
| <ReactQueryDevtoolsPanel /> | ||
| </QueryClientProvider>, |
There was a problem hiding this comment.
this approach causes a console error that we're rendering to a root that's already rendered in the console, and createPortal doesn't work, at least it seems as though it doesn't. any ideas?
There was a problem hiding this comment.
Perhaps using a shadowDOM? You would have to be careful not to accidentally mount another one though ...
There was a problem hiding this comment.
Is there a React way of doing it or?
KevinVandy
left a comment
KevinVandy
left a comment
There was a problem hiding this comment.
approving so that you can merge to main when you feel appropriate
3 participants
Added the following functionality:
full-demo.mp4