fix: update type definitions and improve theme script import in devtools (#75)

Author: JerryWu1234

.changeset/moody-terms-punch.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+fix: update type definitions and improve theme script import in devtools

packages/devtools/package.json

@@ -13,7 +13,7 @@
     "./ui": {
       "import": "./dist/ui/index.qwik.mjs",
       "require": "./dist/ui/index.qwik.cjs",
-      "types": "./dist/ui/lib-types/index.d.ts"
+      "types": "./dist/ui/lib-types/ui/src/index.d.ts"
     }
   },
   "files": [

packages/plugin/src/index.ts

@@ -5,6 +5,7 @@ import VueInspector from 'vite-plugin-inspect'
 import useCollectHooksSource from './utils/useCollectHooks'
 import { parseQwikCode } from './parse/parse';
 import { startPreloading } from './npm/index';
+import updateConf from './utils/updateConf';
 
 
 export function qwikDevtools(): Plugin[] {
@@ -41,7 +42,7 @@ export function qwikDevtools(): Plugin[] {
     },
     configResolved(viteConfig) {
       _config = viteConfig;
-      
+      updateConf(_config);
       // Start preloading as early as possible, right after config is resolved
       if (!preloadStarted) {
         preloadStarted = true;

packages/plugin/src/utils/updateConf.ts

@@ -0,0 +1,45 @@
+import { ResolvedConfig } from "vite";
+
+function updateConf(conf: ResolvedConfig) {
+  const pkg = '@qwik.dev/devtools';
+
+  // Ensure ssr exists
+  // Some environments may have optional ssr in typed config
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  conf.ssr = conf.ssr ?? ({} as typeof conf.ssr);
+
+  const current = conf.ssr?.noExternal as unknown;
+
+  // If noExternal is not set (undefined/false), initialize as array
+  if (!current) {
+    conf.ssr.noExternal = [pkg];
+    return conf;
+  }
+
+  // If already true (do not externalize anything), nothing to do
+  if (current === true) {
+    return conf;
+  }
+
+  // If it's an array of entries, append if missing
+  if (Array.isArray(current)) {
+    if (!current.includes(pkg)) {
+      current.push(pkg);
+    }
+    return conf;
+  }
+
+  // If it's a string, convert to array and append
+  if (typeof current === 'string') {
+    conf.ssr.noExternal = current === pkg ? [pkg] : [current, pkg];
+    return conf;
+  }
+
+  // For other shapes (e.g., RegExp), preserve and extend via array wrapper
+  // This keeps existing behavior while ensuring our package is included
+  conf.ssr.noExternal = [current as never, pkg] as unknown as typeof conf.ssr.noExternal;
+  return conf;
+}
+
+export default updateConf;

packages/ui/src/devtools.tsx

@@ -39,7 +39,7 @@ import { DevtoolsPanel } from './components/DevtoolsPanel/DevtoolsPanel';
 import { Packages } from './features/Packages/Packages';
 import { Inspect } from './features/inspect/Inspect';
 import { ThemeToggle } from './components/ThemeToggle/ThemeToggle';
-import { ThemeScript } from './components/ThemeToggle/theme-script';
+import { ThemeScript as QwikThemeScript } from './components/ThemeToggle/theme-script';
 import { CodeBreack } from './features/CodeBreack/CodeBreack';
 function getClientRpcFunctions() {
   return {
@@ -124,7 +124,7 @@ export const QwikDevtools = component$(() => {
 
   return (
     <>
-      <ThemeScript />
+      <QwikThemeScript />
       <DevtoolsContainer>
         <DevtoolsButton state={state} />