chore: update dependencies to version 2.0.0-beta.15 and refactor RenderTree component for improved performance

Author: JerryWu1234

package.json

@@ -3,7 +3,6 @@
   "license": "MIT",
   "description": "Qwik devtools monorepo",
   "scripts": {
-    "dev": "pnpm --filter plugin build && MODE=dev pnpm --parallel dev",
     "playground": "MODE=dev DEBUG=qwik:devtools:* pnpm --filter playground dev",
     "build": "tsx scripts/build-devtools.ts",
     "change": "changeset",

packages/devtools/package.json

@@ -24,8 +24,8 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@qwik.dev/core": "2.0.0-beta.11",
-    "@qwik.dev/router": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "vite": "7.1.3",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.1.14",

packages/kit/package.json

@@ -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.11",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "np": "^8.0.4",
     "prettier": "3.3.3",
     "typescript": "5.4.5",

packages/playgrounds/package.json

@@ -29,14 +29,14 @@
   "devDependencies": {
     "@devtools/plugin": "workspace:*",
     "@devtools/ui": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
-    "@qwik.dev/router": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "@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.11",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
     "vite": "7.1.3",

packages/plugin/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/types": "^7.26.7",
     "@devtools/kit": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",

packages/ui/package.json

@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@devtools/plugin": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.1.14",
     "tailwindcss": "^4.1.14"
@@ -53,7 +53,7 @@
     "cpy-cli": "^5.0.0",
     "dree": "^5.1.5",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-alpha.9",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "nodemon": "^3.1.9",
     "np": "^8.0.4",
     "postcss": "^8.4.39",

packages/ui/src/components/Tree/filterVnode.ts

@@ -6,12 +6,12 @@ import {
   _vnode_getFirstChild,
   _vnode_isMaterialized,
   _vnode_isVirtualVNode,
-  QRL,
 } from '@qwik.dev/core/internal';
 import { normalizeName } from './vnode';
 import { htmlContainer } from '../../utils/location';
 import { TreeNode } from './Tree';
 import { QRENDERFN, QTYPE } from '@devtools/kit';
+import { QRLInternal } from '../../features/RenderTree/types';
 
 let index = 0;
 
@@ -65,7 +65,7 @@ function buildTreeRecursive(
           // We skip the QTYPE prop as it's for internal use.
           if (key === QTYPE) return;
 
-          const value = container.getHostProp(currentVNode!, key) as QRL;
+          const value = container.getHostProp(currentVNode!, key) as QRLInternal;
           // Update the underlying VNode props array and the new object's props.
           currentVNode?.setProp(key, value);
           vnodeObject.props![key] = currentVNode?.getAttr(key);

packages/ui/src/features/CodeBreack/HtmlParser.tsx

@@ -6,7 +6,7 @@ import {
   useStyles$,
 } from '@qwik.dev/core';
 import { _getDomContainer, _vnode_toString } from '@qwik.dev/core/internal';
-import { createHighlighter } from 'shiki';
+import { getHighlighter } from '../../utils/shiki';
 
 export const HtmlParser = component$(() => {
   useStyles$(`
@@ -73,10 +73,7 @@ export const HtmlParser = component$(() => {
       return;
     }
     if (!shikiRef.value) {
-      shikiRef.value = await createHighlighter({
-        themes: ['nord'],
-        langs: ['html'],
-      });
+      shikiRef.value = await getHighlighter();
     }
     highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, {
       lang: 'html',
@@ -98,7 +95,7 @@ export const HtmlParser = component$(() => {
         <div class="min-h-0 flex-1 flex-col space-y-3 p-3">
           <textarea
             value={inputHtml.value}
-            onInput$={(e, t) =>
+            onInput$={(e: InputEvent, t: HTMLTextAreaElement) =>
               (inputHtml.value = (t as HTMLTextAreaElement).value)
             }
             placeholder="Paste HTML and click to parse/format."

packages/ui/src/features/CodeBreack/StateParser.tsx

@@ -6,7 +6,7 @@ import {
   useStyles$,
 } from '@qwik.dev/core';
 import { _dumpState, _preprocessState } from '@qwik.dev/core/internal';
-import { createHighlighter } from 'shiki';
+import { getHighlighter } from '../../utils/shiki';
 
 export const StateParser = component$(() => {
   useStyles$(`
@@ -87,10 +87,7 @@ export const StateParser = component$(() => {
       return;
     }
     if (!shikiRef.value) {
-      shikiRef.value = await createHighlighter({
-        themes: ['nord'],
-        langs: ['json'],
-      });
+      shikiRef.value = await getHighlighter();
     }
     highlightedState.value = shikiRef.value.codeToHtml(stateResult.value, {
       lang: 'json',
@@ -112,7 +109,7 @@ export const StateParser = component$(() => {
         <div class="min-h-0 flex-1 flex-col space-y-3 p-3">
           <textarea
             value={inputState.value}
-            onInput$={(e, t) =>
+            onInput$={(e: InputEvent, t: HTMLTextAreaElement) =>
               (inputState.value = (t as HTMLTextAreaElement).value)
             }
             placeholder="Paste Qwik state and click to parse/format."