feat: add functioa (#42)

* feat(ui): integrate devtools plugin and add dark mode support

* Add light and dark mode support using Tailwind CSS

* Fix ThemeToggle component and update vite.config.mts for server configuration

* refactor(ui): remove unused CSS variables and streamline theme configuration

Simplify the global CSS and Tailwind configuration by removing unused variables and consolidating theme-related settings. This improves maintainability and reduces redundancy in the codebase.

* refactor(vite): remove dev server host and port config

* refactor(vite): remove dev server host and port config

The host, port, and allowedHosts configurations were removed from the dev server settings to simplify the configuration and rely on Vite's default behavior. This change reduces unnecessary customization and aligns with standard Vite practices.

* feat(theme): implement theme switching with persistence

- Add theme script for initial theme detection and application
- Update global.css with theme variables and dark mode selector
- Refactor ThemeToggle component to use localStorage for theme persistence
- Modify vite config to handle build-specific alias configuration
- Add type definitions path to package.json
```

The commit message follows the guidelines by:
1. Using "feat" type since it introduces new theme functionality
2. Including "(theme)" scope as it's clearly theme-related
3. Keeping description under 50 chars and starting with lowercase
4. Adding a body that summarizes the key changes without repeating the subject
5. Using imperative mood throughout
6. Focusing on the significant functional changes rather than every detail

* style(ui): standardize code formatting and fix linting issues

- Normalize quotes from single to double quotes
- Fix missing semicolons and newlines
- Reorder tailwind classes consistently
- Remove unused useDark hook
- Update theme script to be more reliable
- Apply prettier formatting across the codebase

* refactor(theme): simplify theme handling and remove unused code

- Remove ThemeScript component and inline theme script logic in devtools
- Remove unused useDark hook from ThemeToggle
- Simplify theme toggle logic by removing dark state check

* fix(devtools): remove unused ThemeScript import and fix panel visibility condition

- Remove unused ThemeScript import to clean up dependencies
- Fix devtools panel visibility to only show when state.isOpen.value is true

* style: enforce single quotes in codebase and update prettier config

Update all double quotes to single quotes across the codebase for consistency. Added 'singleQuote: true' to prettier configuration to enforce this style. This change improves code style consistency and aligns with the project's linting rules.

* refactor(theme): consolidate theme handling and cleanup

- Rename theme storage key for compatibility with vite-plugin-inspect
- Extract theme script logic into separate component
- Remove unused imports and simplify ThemeToggle component
- Replace inline script with ThemeScript component in devtools

* feat(ThemeToggle): add auto theme option and improve theme handling

- Add 'auto' theme option that follows system preference
- Replace button with select dropdown for theme selection
- Improve theme script to handle auto theme case
- Fix extra space in search input styling

* formate

* feat(ui): add ThemeToggle component with persistent theme selection

* fix situation which didn't set default value

* chore: update @qwik.dev/core and @qwik.dev/router to beta versions, upgrade rollup to 4.41.1, and update peer dependencies

* refactor(ThemeToggle): remove console logs and improve type annotation in useTask

* fix

* FIX: add animation when icon switching

* format

* optimize

* refactor(Overview): enhance click handling for navigation and improve code structure

* init render tree function

* layout render interface

* delete redundant code, and

* feat: enhance Tree component with state management and vnode utilities

* feat: refactor Tree and RenderTree components for improved state management and rendering logic

* feat: integrate htmlContainer utility for improved DOM handling in RenderTree and filterVnode

* refactor: clean up imports and improve code formatting across multiple components

* feat: enhance Tree and RenderTree components with improved node handling and rendering logic

* feat: improve code consistency and readability across Tree, filterVnode, and RenderTree components

* feat: add signal management and enhance button interaction in Button and RenderTree components

* feat: enhance Button and Tree components with improved state management, rendering logic, and new signal handling capabilities

* feat: update Button and RenderTree components with enhanced click handling, state management, and improved tree node creation logic

* feat: enhance Button component with new hooks, context management, and improved styling; update RenderTree and filterVnode for better state handling and type detection

* feat: update dependencies to latest versions, including Qwik and Vite; enhance devtools integration in playgrounds and improve code consistency across components

* feat: enhance RenderTree and formatTreeData components with improved signal, task, and computed data handling; refactor vnode and filterVnode for better code clarity

* feat: add isHover prop to Tree and TreeNode components for enhanced hover state management; refactor formatTreeData to improve data handling and naming consistency

* feat: enhance RenderTree and formatTreeData with new props and listen data handling; update type utilities for better type detection

* feat: add qwikDevtools plugin and enhance server functions with new module retrieval capabilities; update .gitignore and Vite configuration for improved development experience

* feat: update ServerFunctions to include getModulesByPathIds for improved module retrieval; refactor RenderTree and formatTreeData for enhanced data handling and integration with new module fetching logic

* refactor: clean up Button component by removing commented code and improving hook usage; streamline context and resource handling for better readability

* refactor: streamline node click handling in RenderTree by utilizing a type map for improved data formatting and clarity; enhance props processing for better readability

* refactor: remove commented code in RenderTree to improve code clarity and maintainability

* refactor: remove commented code in RenderTree to enhance code clarity and maintainability

* refactor: simplify RenderTree component by removing unnecessary return statement and optimizing JSX structure for improved readability

* feat: integrate Shiki for syntax highlighting in RenderTree component; enhance code rendering with dynamic language detection and improved styling

* refactor: optimize data retrieval in formatTreeData by replacing forEach with for...of loop for improved performance and readability

* refactor: update RenderTree and formatTreeData to standardize naming conventions and improve tree node creation logic; enhance signal and task handling for better clarity

---------

Co-authored-by: openhands <openhands@all-hands.dev>

Author: JerryWu1234

.gitignore

@@ -62,4 +62,5 @@ testem.log
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+.vite-inspect

packages/devtools/package.json

@@ -21,9 +21,9 @@
     "README.md"
   ],
   "peerDependencies": {
-    "vite": "^6.2.6",
-    "@qwik.dev/core": "^2.0.0-beta.1",
-    "@qwik.dev/router": "^2.0.0-beta.1"
+    "vite": "7.0.4",
+    "@qwik.dev/core": "2.0.0-beta.5",
+    "@qwik.dev/router": "2.0.0-beta.5"
   },
   "dependencies": {
     "birpc": "^0.2.19",

packages/kit/src/server.ts

@@ -11,7 +11,7 @@ export function createServerRpc(functions: ServerFunctions) {
     post: (data) =>
       server.ws.send(DEVTOOLS_VITE_MESSAGING_EVENT, SuperJSON.stringify(data)),
     on: (fn) =>
-      server.ws.on(DEVTOOLS_VITE_MESSAGING_EVENT, (data) => {
+      server.ws.on(DEVTOOLS_VITE_MESSAGING_EVENT, (data: any) => {
         fn(SuperJSON.parse(data));
       }),
     timeout: 120_000,

packages/kit/src/types.ts

@@ -16,6 +16,11 @@ export interface ServerFunctions {
     packageName: string,
     isDev?: boolean,
   ) => Promise<{ success: boolean; error?: string }>;
+  getModulesByPathIds: (pathIds: string | string[]) => Promise<{
+    pathId: string;
+    modules: any;
+    error?: string;
+  }[]>;
 }
 
 export type ServerRpc = BirpcReturn<ClientFunctions, ServerFunctions>;

packages/playgrounds/package.json

@@ -29,17 +29,17 @@
   "devDependencies": {
     "@devtools/plugin": "workspace:*",
     "@devtools/ui": "workspace:*",
-    "@qwik.dev/core": "^2.0.0-beta.1",
-    "@qwik.dev/router": "^2.0.0-beta.1",
+    "@qwik.dev/core": "2.0.0-beta.5",
+    "@qwik.dev/router": "2.0.0-beta.5",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-alpha.9",
+    "eslint-plugin-qwik": "2.0.0-beta.5",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
-    "vite": "^6.2.6",
+    "vite": "7.0.4",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

packages/playgrounds/src/components/Button/Button.tsx

@@ -1,8 +1,148 @@
-import { component$, useStore } from '@qwik.dev/core';
+import { 
+  component$, 
+  useStore,
+  useSignal, 
+  useTask$, 
+  useComputed$, 
+  $,
+  useContext,
+  useContextProvider,
+  useId,
+  useOnDocument,
+  useOnWindow,
+  useResource$,
+  useStyles$,
+  useStylesScoped$,
+  createContextId,
+  Resource
+} from '@qwik.dev/core';
+import { _getDomContainer, isServer, useVisibleTask$ } from '@qwik.dev/core/internal';
+import type { QRL } from '@qwik.dev/core';
+
+const ButtonContext = createContextId<{ theme: string; size: string }>('button-context');
+
+interface ButtonProps {
+  class?: string;
+  onClick$?: QRL<() => void>;
+}
+
+export default component$<ButtonProps>(({ class: className = '', onClick$ }) => {
 
-export default component$(() => {
   const store = useStore({
     count: 0,
   });
-  return <button>Click me {store.count}</button>;
+  const signal = useSignal('111');
+  
+
+  useTask$(({ track }) => {
+    track(() => store.count);
+    signal.value = '33333'
+  })
+
+  useVisibleTask$(({ track }) => {
+    track(() => store.count);
+    signal.value = '2227'
+  })
+
+  const qwikContainer = useComputed$(() => {
+    try {
+      if(isServer){
+        return null
+      }
+      const htmlElement = document.documentElement;
+      return _getDomContainer(htmlElement);
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  });
+
+  const asyncComputedValue = useComputed$(() => {
+    return `Async computed: ${store.count}`;
+  });
+
+  useContextProvider(ButtonContext, {
+    theme: 'primary',
+    size: 'large'
+  });
+  const context = useContext(ButtonContext);
+
+  const buttonId = useId();
+
+  useOnDocument('keydown', $(() => {
+    console.log('Document keydown event');
+  }));
+
+  useOnWindow('resize', $(() => {
+    console.log('Window resized');
+  }));
+
+  const resourceData = useResource$(async ({ track }) => {
+    track(() => store.count);
+    await new Promise(resolve => setTimeout(resolve, 200));
+    return {
+      message: `Resource data for count: ${store.count}`,
+      timestamp: Date.now()
+    };
+  });
+
+  useStyles$(`
+    .custom-button {
+      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    .custom-button:hover {
+      transform: scale(1.05);
+    }
+  `);
+
+  useStylesScoped$(`
+    .scoped-button {
+      background: linear-gradient(45deg, #667eea, #764ba2);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+  `);
+
+  const handleClick = $(async () => {
+    store.count++;
+    console.log('Button clicked! Count:', store.count);
+    
+    if (onClick$) {
+      await onClick$();
+    }
+  });
+
+  return (
+    <div>
+      <button 
+        id={buttonId}
+        class={`${className} custom-button scoped-button`}
+        onClick$={handleClick}
+      >
+        Click me {store.count}{signal.value}{qwikContainer?.value?.qManifestHash}
+      </button>
+      
+      <div style="margin-top: 10px; font-size: 12px; color: #666;">
+        <div>Async Computed: {asyncComputedValue.value}</div>
+        <div>Context: {context?.theme} - {context?.size}</div>
+        <div>Button ID: {buttonId}</div>
+        <Resource
+          value={resourceData}
+          onPending={() => <div>Loading resource...</div>}
+          onResolved={(data) => <div>Resource: {data.message}</div>}
+          onRejected={(error) => <div>Error: {error.message}</div>}
+        />
+        <div>Count: {store.count}, Signal: {signal.value}</div>
+      </div>
+    </div>
+  );
 });

packages/playgrounds/src/routes/index.tsx

@@ -18,7 +18,9 @@ export default component$(() => {
       <div>
         <Link href="/blog">Blog</Link>
       </div>
-      <Button />
+      <Button  data-testid="button" class='bg-red-500' onClick$={() => {
+        console.log('Button clicked! Count:', count.value);
+      }}/>
     </>
   );
 });

packages/plugin/package.json

@@ -41,7 +41,7 @@
     "np": "^8.0.4",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
-    "vite": "^6.2.6",
+    "vite": "7.0.4",
     "vite-plugin-inspect": "^11.0.0"
   }
 }

packages/plugin/src/index.ts

@@ -14,13 +14,13 @@ const generate = _generate.default;
 
 export function qwikDevtools(): Plugin[] {
   let _config: ResolvedConfig;
+  const qwikData = new Map<string, any>();
   const qwikDevtoolsPlugin: Plugin = {
     name: 'vite-plugin-qwik-devtools',
     apply: 'serve',
     configResolved(viteConfig) {
       _config = viteConfig;
-    },
-  
+    }, 
     transform: {
       order: 'pre',
       handler(code, id) {
@@ -56,9 +56,9 @@ export function qwikDevtools(): Plugin[] {
       },
     },
     configureServer(server) {
-      setViteServerContext(server);
+      setViteServerContext(server as any);
 
-      const rpcFunctions = getServerFunctions({ server, config: _config });
+      const rpcFunctions = getServerFunctions({ server, config: _config, qwikData });
 
       createServerRpc(rpcFunctions);
     },

packages/plugin/src/inspect/index.ts

@@ -1,9 +1,41 @@
 import { ServerContext } from "../types";
 
-export function getInspectFunctions(ctx: ServerContext) {
+export function getModulesContent(ctx: ServerContext) {
   return {
-    getComponentInfo: async (file: string, id: string) => {
-      return { file, id };
+    getModulesByPathIds: async (pathIds: string | string[]) => {
+        let pathIdsList: string[] = [];
+
+        let isAddRoot = (pathId: string) => pathId.includes(ctx.config.root) || pathId.includes('/@fs') ? pathId : `${ctx.config.root}${pathId}`
+        if(!pathIds || pathIds.length === 0){
+          return []
+        }
+
+        if(Array.isArray(pathIds)){
+          pathIdsList = pathIds
+        }else{
+          pathIdsList = [pathIds]
+        }
+        const modules = await Promise.all(pathIdsList.map(async (pathId) => {
+          try {
+            const modules = await ctx.server.transformRequest(isAddRoot(pathId));
+            return {
+              pathId,
+              modules
+            };
+          } catch (error) {
+            console.log(`Failed to transform request for ${pathId}:`, error);
+            return {
+              pathId,
+              modules: null,
+              error: error instanceof Error ? error.message : String(error)
+            };
+          }
+        }));
+
+        if (modules.length > 0) {
+          return modules;
+        }
+        return [];  
     },
   };
 }