chore: update package versions and add CodeBreack feature (#73)

JerryWu1234 · web-flow · commit 321b9293de41 · 2025-10-21T10:07:24.000+02:00
diff --git a/.changeset/proud-ears-wonder.md b/.changeset/proud-ears-wonder.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+chore: update package versions and add CodeBreack feature
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -21,8 +21,8 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@qwik.dev/core": "2.0.0-beta.9",
-    "@qwik.dev/router": "2.0.0-beta.9",
+    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/router": "2.0.0-beta.11",
     "vite": "7.1.3"
   },
   "dependencies": {
diff --git a/packages/kit/package.json b/packages/kit/package.json
@@ -22,7 +22,7 @@
     "superjson": "^2.2.2"
   },
   "peerDependencies": {
-    "vite": "^6.2.6"
+    "vite": "^7.1.3"
   },
   "devDependencies": {
     "@types/eslint": "8.56.10",
@@ -31,7 +31,7 @@
     "@typescript-eslint/parser": "7.16.1",
     "cpy-cli": "^5.0.0",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-beta.9",
+    "eslint-plugin-qwik": "2.0.0-beta.11",
     "np": "^8.0.4",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
diff --git a/packages/playgrounds/package.json b/packages/playgrounds/package.json
@@ -29,14 +29,14 @@
   "devDependencies": {
     "@devtools/plugin": "workspace:*",
     "@devtools/ui": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.9",
-    "@qwik.dev/router": "2.0.0-beta.9",
+    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/router": "2.0.0-beta.11",
     "@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-beta.9",
+    "eslint-plugin-qwik": "2.0.0-beta.11",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
     "vite": "7.1.3",
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/types": "^7.26.7",
     "@devtools/kit": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.9",
+    "@qwik.dev/core": "2.0.0-beta.11",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",
diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts
@@ -35,7 +35,7 @@ export function qwikDevtools(): Plugin[] {
       ) {
         return {
           code: useCollectHooksSource,
-          map: null,
+          map: { mappings: '' },
         };
       }
     },
@@ -57,8 +57,11 @@ export function qwikDevtools(): Plugin[] {
         // Ensure virtual import is present at the very top once when a component$ is present
         if (id.endsWith('.tsx') && code.includes('component$')) {
           if (!code.includes(VIRTUAL_QWIK_DEVTOOLS_KEY)) {
+           
             const importLine = `import { ${INNER_USE_HOOK} } from '${VIRTUAL_QWIK_DEVTOOLS_KEY}';\n`
             code = importLine + code
+          }else {
+            console.log('importing virtual qwik devtools', VIRTUAL_QWIK_DEVTOOLS_KEY, code);
           }
           code = parseQwikCode(code, {path: id})
         }
@@ -88,7 +91,7 @@ export function qwikDevtools(): Plugin[] {
 
        return {
           code,
-          map: null,
+          map: { mappings: '' },
         };
       },
     },
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@devtools/plugin": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.9"
+    "@qwik.dev/core": "2.0.0-beta.11"
   },
   "devDependencies": {
     "@devtools/kit": "workspace:*",
diff --git a/packages/ui/src/components/ThemeToggle/ThemeToggle.tsx b/packages/ui/src/components/ThemeToggle/ThemeToggle.tsx
@@ -37,10 +37,8 @@ export const ThemeToggle = component$(() => {
       currentTheme = 'light';
     } else if (currentTheme === 'light') {
       currentTheme = 'auto';
-    } else {
-      currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'light'
-        : 'dark';
+    } else if (currentTheme === 'auto') {
+      currentTheme = 'dark';
     }
     setTheme(currentTheme);
   });
diff --git a/packages/ui/src/components/Tree/filterVnode.ts b/packages/ui/src/components/Tree/filterVnode.ts
@@ -2,11 +2,8 @@ import {
   _ElementVNode,
   _VirtualVNode,
   _VNode,
-  _vnode_getAttr,
   _vnode_getAttrKeys,
   _vnode_getFirstChild,
-  _vnode_getNextSibling,
-  _vnode_getProps,
   _vnode_isMaterialized,
   _vnode_isVirtualVNode,
   QRL,
@@ -70,10 +67,8 @@ function buildTreeRecursive(
 
           const value = container.getHostProp(currentVNode!, key) as QRL;
           // Update the underlying VNode props array and the new object's props.
-          _vnode_getProps(currentVNode!)[
-            _vnode_getProps(currentVNode!).indexOf(key) + 1
-          ] = value;
-          vnodeObject.props![key] = _vnode_getAttr(currentVNode!, key);
+          currentVNode?.setProp(key, value);
+          vnodeObject.props![key] = currentVNode?.getAttr(key);
 
           // Special handling to set the label from the render function's symbol.
           if (key === QRENDERFN) {
@@ -106,7 +101,7 @@ function buildTreeRecursive(
     }
 
     // Move to the next sibling in the tree.
-    currentVNode = _vnode_getNextSibling(currentVNode);
+    currentVNode = currentVNode.nextSibling as _VNode | null;
   }
 
   return result;
diff --git a/packages/ui/src/devtools.tsx b/packages/ui/src/devtools.tsx
@@ -12,6 +12,8 @@ import {
   HiPhotoOutline,
   HiMegaphoneMini,
   HiCubeOutline,
+
+  HiCodeBracketSolid
 } from '@qwikest/icons/heroicons';
 import { BsDiagram3 } from '@qwikest/icons/bootstrap';
 import { LuFolderTree } from '@qwikest/icons/lucide';
@@ -38,6 +40,7 @@ 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 { CodeBreack } from './features/CodeBreack/CodeBreack';
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true,
@@ -146,7 +149,9 @@ export const QwikDevtools = component$(() => {
               <Tab state={state} id="inspect" title="inspect">
                 <HiMegaphoneMini class="h-5 w-5" />
               </Tab>
-
+              <Tab state={state} id="codeBreack" title="codeBreack">
+                < HiCodeBracketSolid class="h-5 w-5" />
+              </Tab>
               <div class="mt-auto">
                 <ThemeToggle />
               </div>
@@ -211,6 +216,12 @@ export const QwikDevtools = component$(() => {
                   <RenderTree q:slot="content" />
                 </TabContent>
               )}
+              {state.activeTab === 'codeBreack' && (
+                <TabContent>
+                  <TabTitle title="codeBreack" q:slot="title" />
+                  <CodeBreack q:slot="content" />
+                </TabContent>
+              )}
             </div>
           </DevtoolsPanel>
         )}
diff --git a/packages/ui/src/features/CodeBreack/CodeBreack.tsx b/packages/ui/src/features/CodeBreack/CodeBreack.tsx
@@ -0,0 +1,59 @@
+import { component$, useSignal, useStyles$ } from '@qwik.dev/core';
+import { StateParser } from './StateParser';
+import { HtmlParser } from './HtmlParser';
+
+type ParserTab = 'state' | 'html';
+
+export const CodeBreack = component$(() => {
+  useStyles$(`
+  .code-output-container {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+  .code-output-container > div {
+    width: fit-content;
+    min-width: 100%;
+  }
+  .code-output-container pre[class*='language-'] {
+    margin: 0;
+    min-width: max-content;
+  }
+  `);
+
+  const currentTab = useSignal<ParserTab>('state');
+
+
+  return (
+    <div class="space-y-6 h-full overflow-hidden">
+      {/* Segmented Navigation */}
+      <div class="flex justify-center">
+        <div class="inline-flex rounded-xl border border-border bg-background p-0.5">
+          <button
+            onClick$={() => (currentTab.value = 'state')}
+            class={{
+              'px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors': true,
+              'bg-accent text-white shadow': currentTab.value === 'state',
+              'text-muted-foreground hover:bg-foreground/5': currentTab.value !== 'state',
+            }}
+          >
+            State Parser
+          </button>
+          <button
+            onClick$={() => (currentTab.value = 'html')}
+            class={{
+              'px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors': true,
+              'bg-accent text-white shadow': currentTab.value === 'html',
+              'text-muted-foreground hover:bg-foreground/5': currentTab.value !== 'html',
+            }}
+          >
+            HTML Parser
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {currentTab.value === 'state' && <StateParser />}
+      {currentTab.value === 'html' && <HtmlParser />}
+    </div>
+  );
+});
diff --git a/packages/ui/src/features/CodeBreack/HtmlParser.tsx b/packages/ui/src/features/CodeBreack/HtmlParser.tsx
@@ -0,0 +1,121 @@
+import { $, component$, useSignal, useVisibleTask$, useStyles$ } from '@qwik.dev/core';
+import { _getDomContainer, _vnode_toString } from '@qwik.dev/core/internal';
+import { createHighlighter } from 'shiki';
+
+export const HtmlParser = component$(() => {
+  useStyles$(`
+    pre.shiki { overflow: auto; padding: 10px; height: 100%; }
+  `);
+  const inputHtml = useSignal('');
+  const parsingTime = useSignal<number | null>(null);
+  const htmlResult = useSignal<string>('');
+  const highlightedHtml = useSignal<string>('');
+
+  const onParseHtml$ = $(() => {
+    if (!inputHtml.value.trim()) {
+      parsingTime.value = null;
+      htmlResult.value = '// Paste HTML on the left to parse';
+      return;
+    }
+
+    const startTime = performance.now();
+
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(inputHtml.value, 'text/html');
+      let output = '';
+      try {
+        const container = _getDomContainer(doc.documentElement);
+        if (container) {
+          output += '// Qwik Container Found:\n';
+          output += `- Container Type: ${container.qContainer}\n`;
+          output += `- Manifest Hash: ${container.qManifestHash}\n\n`;
+          try {
+            const vdomTree = _vnode_toString.call(
+              container!.rootVNode as any,
+              Number.MAX_SAFE_INTEGER,
+              '',
+              true,
+              false,
+              false
+            );
+            output += '// VNode Tree:\n' + vdomTree + '\n\n';
+          } catch (vnodeErr) {
+            output += '// VNode parsing error: ' + vnodeErr + '\n\n';
+          }
+        } else {
+          output = '// No Qwik container found in the HTML';
+        }
+      } catch (containerErr) {
+        output = '// No Qwik container found or error: ' + containerErr;
+      }
+      parsingTime.value = performance.now() - startTime;
+      htmlResult.value = output;
+      return;
+    } catch (error) {
+      parsingTime.value = performance.now() - startTime;
+      htmlResult.value = `// Error parsing HTML: ${error instanceof Error ? error.message : 'Invalid HTML format'}\n\n// Raw input:\n${inputHtml.value}`;
+      return;
+    }
+  });
+
+  const shikiRef = useSignal<any>(null);
+  useVisibleTask$(async ({ track }) => {
+    track(() => htmlResult.value);
+    if (!htmlResult.value) {
+      highlightedHtml.value = '';
+      return;
+    }
+    if (!shikiRef.value) {
+      shikiRef.value = await createHighlighter({ themes: ['nord'], langs: ['html'] });
+    }
+    highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, { lang: 'html', theme: 'nord' });
+  });
+
+  return (
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div class="rounded-xl border border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col">
+        <div class="flex items-center justify-between border-b border-border p-3">
+          <div class="text-sm font-medium">Input HTML</div>
+          {parsingTime.value !== null && (
+            <span class="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
+              {parsingTime.value}ms
+            </span>
+          )}
+        </div>
+        <div class="p-3 space-y-3 flex-1 min-h-0 flex-col">
+          <textarea
+            value={inputHtml.value}
+            onInput$={(e, t) => (inputHtml.value = (t as HTMLTextAreaElement).value)}
+            placeholder="Paste HTML and click to parse/format."
+            class="h-full min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background p-3 font-mono text-sm"
+          />
+          <div class="flex items-center gap-3">
+            <button
+              onClick$={onParseHtml$}
+              class="bg-accent hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white"
+            >
+              Parse HTML
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col">
+        <div class="flex items-center justify-between border-b border-border p-3">
+          <div class="text-sm font-medium">VNode Tree</div>
+          {parsingTime.value !== null && (
+            <span class="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
+              {parsingTime.value}ms
+            </span>
+          )}
+        </div>
+        <div class="flex-1 min-h-0 h-full">
+          <pre class="overflow-auto h-full" dangerouslySetInnerHTML={highlightedHtml.value || ''} />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+
diff --git a/packages/ui/src/features/CodeBreack/StateParser.tsx b/packages/ui/src/features/CodeBreack/StateParser.tsx
diff --git a/packages/ui/src/types/state.ts b/packages/ui/src/types/state.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@qwik.dev/devtools': patch
 +---
++
 +chore: update package versions and add CodeBreack feature