@@ -38,7 +38,7 @@ import { DevtoolsContainer } from './components/DevtoolsContainer/DevtoolsContai
3838import { DevtoolsPanel } from './components/DevtoolsPanel/DevtoolsPanel' ;
3939import { Packages } from './features/Packages/Packages' ;
4040import { Inspect } from './features/inspect/Inspect' ;
41- import { ThemeToggle } from './components/ThemeToggle/ThemeToggle ' ;
41+ import { QwikThemeToggle } from './components/ThemeToggle/QwikThemeToggle ' ;
4242import { ThemeScript as QwikThemeScript } from './components/ThemeToggle/theme-script' ;
4343import { CodeBreack } from './features/CodeBreack/CodeBreack' ;
4444function getClientRpcFunctions ( ) {
@@ -60,66 +60,97 @@ export const QwikDevtools = component$(() => {
6060 isLoadingDependencies : false ,
6161 } ) ;
6262
63- useVisibleTask$ ( async ( { track } ) => {
64- const hot = await tryCreateHotContext ( undefined , [ '/' ] ) ;
63+ const clientReady = useSignal ( false ) ;
6564
65+ useVisibleTask$ ( async ( ) => {
66+ const hot = await tryCreateHotContext ( undefined , [ '/' ] ) ;
6667 if ( ! hot ) {
6768 throw new Error ( 'Vite Hot Context not connected' ) ;
6869 }
6970
7071 setViteClientContext ( hot ) ;
7172 createClientRpc ( getClientRpcFunctions ( ) ) ;
73+ clientReady . value = true ;
74+ } ) ;
7275
73- // Start loading data immediately in background
74- // Dependencies are already being preloaded on the server side
76+ useVisibleTask$ ( async ( { track } ) => {
77+ track ( ( ) => clientReady . value ) ;
78+ if ( ! clientReady . value ) return ;
7579 const rpc = getViteClientRpc ( ) ;
76- state . isLoadingDependencies = true ;
80+ try {
81+ const assets = await rpc . getAssetsFromPublicDir ( ) ;
82+ state . assets = assets ;
83+ } catch ( error ) {
84+ console . error ( 'Failed to load assets:' , error ) ;
85+ }
86+ } ) ;
7787
78- // Preload all data in parallel immediately
79- Promise . all ( [
80- rpc . getAssetsFromPublicDir ( ) ,
81- rpc . getComponents ( ) ,
82- rpc . getRoutes ( ) ,
83- rpc . getQwikPackages ( ) ,
84- rpc . getAllDependencies ( ) , // This returns server-preloaded data instantly
85- ] )
86- . then ( ( [ assets , components , routes , qwikPackages , allDeps ] ) => {
87- state . assets = assets ;
88- state . components = components ;
89-
90- const children : RoutesInfo [ ] = routes ?. children || [ ] ;
91- const directories : RoutesInfo [ ] = children . filter (
92- ( child ) => child . type === 'directory' ,
93- ) ;
94-
95- const values : RoutesInfo [ ] = [
96- {
97- relativePath : '' ,
98- name : 'index' ,
99- type : RouteType . DIRECTORY ,
100- path : '' ,
101- isSymbolicLink : false ,
102- children : undefined ,
103- } ,
104- ...directories ,
105- ] ;
106-
107- state . routes = noSerialize ( values ) ;
108- state . npmPackages = qwikPackages ;
109- state . allDependencies = allDeps ;
110- state . isLoadingDependencies = false ;
111- } )
112- . catch ( ( error ) => {
113- console . error ( 'Failed to load devtools data:' , error ) ;
114- state . isLoadingDependencies = false ;
115- } ) ;
116-
117- // Track devtools open state for other purposes if needed
118- track ( ( ) => {
119- if ( state . isOpen . value ) {
120- // Devtools is now open, data should already be loaded or loading
121- }
122- } ) ;
88+ useVisibleTask$ ( async ( { track } ) => {
89+ track ( ( ) => clientReady . value ) ;
90+ if ( ! clientReady . value ) return ;
91+ const rpc = getViteClientRpc ( ) ;
92+ try {
93+ const components = await rpc . getComponents ( ) ;
94+ state . components = components ;
95+ } catch ( error ) {
96+ console . error ( 'Failed to load components:' , error ) ;
97+ }
98+ } ) ;
99+
100+ useVisibleTask$ ( async ( { track } ) => {
101+ track ( ( ) => clientReady . value ) ;
102+ if ( ! clientReady . value ) return ;
103+ const rpc = getViteClientRpc ( ) ;
104+ try {
105+ const routes = await rpc . getRoutes ( ) ;
106+ const children : RoutesInfo [ ] = routes ?. children || [ ] ;
107+ const directories : RoutesInfo [ ] = children . filter (
108+ ( child ) => child . type === 'directory' ,
109+ ) ;
110+
111+ const values : RoutesInfo [ ] = [
112+ {
113+ relativePath : '' ,
114+ name : 'index' ,
115+ type : RouteType . DIRECTORY ,
116+ path : '' ,
117+ isSymbolicLink : false ,
118+ children : undefined ,
119+ } ,
120+ ...directories ,
121+ ] ;
122+
123+ state . routes = noSerialize ( values ) ;
124+ } catch ( error ) {
125+ console . error ( 'Failed to load routes:' , error ) ;
126+ }
127+ } ) ;
128+
129+ useVisibleTask$ ( async ( { track } ) => {
130+ track ( ( ) => clientReady . value ) ;
131+ if ( ! clientReady . value ) return ;
132+ const rpc = getViteClientRpc ( ) ;
133+ try {
134+ const qwikPackages = await rpc . getQwikPackages ( ) ;
135+ state . npmPackages = qwikPackages ;
136+ } catch ( error ) {
137+ console . error ( 'Failed to load Qwik packages:' , error ) ;
138+ }
139+ } ) ;
140+
141+ useVisibleTask$ ( async ( { track } ) => {
142+ track ( ( ) => clientReady . value ) ;
143+ if ( ! clientReady . value ) return ;
144+ const rpc = getViteClientRpc ( ) ;
145+ state . isLoadingDependencies = true ;
146+ try {
147+ const allDeps = await rpc . getAllDependencies ( ) ;
148+ state . allDependencies = allDeps ;
149+ } catch ( error ) {
150+ console . error ( 'Failed to load all dependencies:' , error ) ;
151+ } finally {
152+ state . isLoadingDependencies = false ;
153+ }
123154 } ) ;
124155
125156 return (
@@ -153,7 +184,7 @@ export const QwikDevtools = component$(() => {
153184 < HiCodeBracketSolid class = "h-5 w-5" />
154185 </ Tab >
155186 < div class = "mt-auto" >
156- < ThemeToggle />
187+ < QwikThemeToggle />
157188 </ div >
158189 </ div >
159190
0 commit comments