@qwik.dev/devtools 0.1.2 → 0.2.1

package/dist/plugin/index.js

@@ -7210,6 +7210,44 @@ function getRouteFunctions({ config }) {
 
 //#endregion
 //#region src/npm/index.ts
+const packageCache = new Map();
+const CACHE_TTL = 1e3 * 60 * 30;
+let preloadedDependencies = null;
+let isPreloading = false;
+let preloadPromise = null;
+function getCachedPackage(name) {
+	const cached = packageCache.get(name);
+	if (cached && Date.now() - cached.timestamp < CACHE_TTL) return cached.data;
+	packageCache.delete(name);
+	return null;
+}
+function setCachedPackage(name, data) {
+	packageCache.set(name, {
+		data,
+		timestamp: Date.now()
+	});
+}
+async function findNearestFileUp(startDir, fileName) {
+	try {
+		let currentDir = path.resolve(startDir);
+		for (let i = 0; i < 100; i++) {
+			const candidate = path.join(currentDir, fileName);
+			const exists = await fsp.access(candidate).then(() => true).catch(() => false);
+			if (exists) return candidate;
+			const parent = path.dirname(currentDir);
+			if (parent === currentDir) break;
+			currentDir = parent;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}
+function getProjectStartDirFromConfig(config) {
+	if (config?.root) return config.root;
+	if (config?.configFile) return path.dirname(config.configFile);
+	return process.cwd();
+}
 async function detectPackageManager(projectRoot) {
 	try {
 		if (await fsp.access(path.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) return "pnpm";
@@ -7220,10 +7258,139 @@ async function detectPackageManager(projectRoot) {
 		return "pnpm";
 	}
 }
+const preloadDependencies = async (config) => {
+	if (preloadedDependencies) {
+		console.log("[Qwik DevTools] Dependencies already preloaded");
+		return preloadedDependencies;
+	}
+	if (isPreloading && preloadPromise) {
+		console.log("[Qwik DevTools] Preloading already in progress...");
+		return preloadPromise;
+	}
+	isPreloading = true;
+	console.log("[Qwik DevTools] Starting to preload dependencies...");
+	preloadPromise = (async () => {
+		const startDir = getProjectStartDirFromConfig(config);
+		const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
+		if (!pathToPackageJson) {
+			preloadedDependencies = [];
+			isPreloading = false;
+			console.log("[Qwik DevTools] No package.json found");
+			return [];
+		}
+		try {
+			const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
+			const pkg = JSON.parse(pkgJson);
+			const allDeps = {
+				...pkg.dependencies || {},
+				...pkg.devDependencies || {},
+				...pkg.peerDependencies || {}
+			};
+			const dependencies = Object.entries(allDeps);
+			const cachedPackages = [];
+			const uncachedDependencies = [];
+			for (const [name, version] of dependencies) {
+				const cached = getCachedPackage(name);
+				if (cached) cachedPackages.push({
+					...cached,
+					version
+				});
+				else uncachedDependencies.push([name, version]);
+			}
+			if (uncachedDependencies.length === 0) {
+				preloadedDependencies = cachedPackages;
+				isPreloading = false;
+				return cachedPackages;
+			}
+			const batchSize = 100;
+			const batches = [];
+			for (let i = 0; i < uncachedDependencies.length; i += batchSize) batches.push(uncachedDependencies.slice(i, i + batchSize));
+			const fetchedPackages = [];
+			console.log(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`);
+			const allBatchPromises = batches.map(async (batch) => {
+				const batchPromises = batch.map(async ([name, version]) => {
+					try {
+						const controller = new AbortController();
+						const timeoutId = setTimeout(() => controller.abort(), 5e3);
+						const response = await fetch(`https://registry.npmjs.org/${name}`, {
+							headers: { "Accept": "application/json" },
+							signal: controller.signal
+						});
+						clearTimeout(timeoutId);
+						if (!response.ok) throw new Error(`HTTP ${response.status}`);
+						const packageData = await response.json();
+						const latestVersion = packageData["dist-tags"]?.latest || version;
+						const versionData = packageData.versions?.[latestVersion] || packageData.versions?.[version];
+						let repositoryUrl = versionData?.repository?.url || packageData.repository?.url;
+						if (repositoryUrl) repositoryUrl = repositoryUrl.replace(/^git\+/, "").replace(/^ssh:\/\/git@/, "https://").replace(/\.git$/, "");
+						let iconUrl = null;
+						if (packageData.logo) iconUrl = packageData.logo;
+						else if (name.startsWith("@")) {
+							const scope = name.split("/")[0].substring(1);
+							iconUrl = `https://avatars.githubusercontent.com/${scope}?size=64`;
+						} else if (repositoryUrl?.includes("github.com")) {
+							const repoMatch = repositoryUrl.match(/github\.com\/([^\/]+)/);
+							if (repoMatch) iconUrl = `https://avatars.githubusercontent.com/${repoMatch[1]}?size=64`;
+						}
+						const packageInfo = {
+							name,
+							version,
+							description: versionData?.description || packageData.description || "No description available",
+							author: versionData?.author || packageData.author,
+							homepage: versionData?.homepage || packageData.homepage,
+							repository: repositoryUrl,
+							npmUrl: `https://www.npmjs.com/package/${name}`,
+							iconUrl
+						};
+						setCachedPackage(name, packageInfo);
+						return packageInfo;
+					} catch (error) {
+						const basicInfo = {
+							name,
+							version,
+							description: "No description available",
+							npmUrl: `https://www.npmjs.com/package/${name}`,
+							iconUrl: null
+						};
+						setCachedPackage(name, basicInfo);
+						return basicInfo;
+					}
+				});
+				const batchResults = await Promise.allSettled(batchPromises);
+				return batchResults.filter((result) => result.status === "fulfilled").map((result) => result.value);
+			});
+			const allBatchResults = await Promise.all(allBatchPromises);
+			for (const batchResult of allBatchResults) fetchedPackages.push(...batchResult);
+			const allPackages = [...cachedPackages, ...fetchedPackages];
+			preloadedDependencies = allPackages;
+			isPreloading = false;
+			console.log(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`);
+			return allPackages;
+		} catch (error) {
+			console.error("[Qwik DevTools] ✗ Failed to preload dependencies:", error);
+			preloadedDependencies = [];
+			isPreloading = false;
+			return [];
+		}
+	})();
+	return preloadPromise;
+};
+async function startPreloading({ config }) {
+	const startTime = Date.now();
+	console.log("[Qwik DevTools] 🚀 Initiating dependency preload (background)...");
+	preloadDependencies(config).then(() => {
+		const duration = ((Date.now() - startTime) / 1e3).toFixed(2);
+		console.log(`[Qwik DevTools] ⚡ Preload completed in ${duration}s`);
+	}).catch((err) => {
+		console.error("[Qwik DevTools] ✗ Preload failed:", err);
+	});
+	return Promise.resolve();
+}
 function getNpmFunctions({ config }) {
 	return {
 		async getQwikPackages() {
-			const pathToPackageJson = config.configFileDependencies.find((file) => file.endsWith("package.json"));
+			const startDir = getProjectStartDirFromConfig(config);
+			const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
 			if (!pathToPackageJson) return [];
 			try {
 				const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
@@ -7233,9 +7400,23 @@ function getNpmFunctions({ config }) {
 				return [];
 			}
 		},
+		async getAllDependencies() {
+			if (preloadedDependencies) {
+				console.log("[Qwik DevTools] Returning preloaded dependencies");
+				return preloadedDependencies;
+			}
+			if (isPreloading && preloadPromise) {
+				console.log("[Qwik DevTools] Waiting for preload to complete...");
+				return preloadPromise;
+			}
+			console.log("[Qwik DevTools] Warning: Preload not started, starting now...");
+			return preloadDependencies(config);
+		},
 		async installPackage(packageName, isDev = true) {
 			try {
-				const projectRoot = path.dirname(config.configFileDependencies[0]);
+				const startDir = getProjectStartDirFromConfig(config);
+				const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
+				const projectRoot = pathToPackageJson ? path.dirname(pathToPackageJson) : startDir;
 				const pm = await detectPackageManager(projectRoot);
 				const devFlag = isDev ? pm === "npm" ? "--save-dev" : "-D" : "";
 				const command = {
@@ -7964,7 +8145,7 @@ function defaultSerialize(i) {
 	return i;
 }
 const defaultDeserialize = defaultSerialize;
-const { clearTimeout, setTimeout: setTimeout$1 } = globalThis;
+const { clearTimeout: clearTimeout$1, setTimeout: setTimeout$1 } = globalThis;
 const random = Math.random.bind(Math);
 function createBirpc(functions, options) {
 	const { post, on, off = () => {}, eventNames = [], serialize: serialize$1 = defaultSerialize, deserialize: deserialize$1 = defaultDeserialize, resolver, bind = "rpc", timeout = DEFAULT_TIMEOUT } = options;
@@ -8058,7 +8239,7 @@ function createBirpc(functions, options) {
 			const { i: ack, r: result, e: error } = msg;
 			const promise$1 = rpcPromiseMap.get(ack);
 			if (promise$1) {
-				clearTimeout(promise$1.timeoutId);
+				clearTimeout$1(promise$1.timeoutId);
 				if (error) promise$1.reject(error);
 				else promise$1.resolve(result);
 			}
@@ -8570,28 +8751,56 @@ function getServerFunctions(ctx) {
 //#region src/utils/useCollectHooks.ts
 const useCollectHooks = `import { $, useSignal, useVisibleTask$ } from "@qwik.dev/core"
 export const useCollectHooks = (src) => {
-  const hooksList = useSignal([])
+  const hooksList = useSignal(new Set())
   useVisibleTask$(({ track }) => {
     const newdata  = track(() => hooksList.value);
     if(!window.QWIK_DEVTOOLS_GLOBAL_STATE) {
       window.QWIK_DEVTOOLS_GLOBAL_STATE = {}
-      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = newdata || []
+      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = [...newdata]
     }else {
-      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = newdata
+      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = [...newdata]
     }
-  })
+  }, { strategy: 'document-ready'})
   return $((args) => {
-    hooksList.value.push(args)
+    if(hooksList.value.has(args)) {
+      return
+    }
+    hooksList.value.add(args)
   })
 }
 `;
 var useCollectHooks_default = useCollectHooks;
 
+//#endregion
+//#region src/utils/updateConf.ts
+function updateConf(conf) {
+	const pkg = "@qwik.dev/devtools";
+	conf.ssr = conf.ssr ?? {};
+	const current = conf.ssr?.noExternal;
+	if (!current) {
+		conf.ssr.noExternal = [pkg];
+		return conf;
+	}
+	if (current === true) return conf;
+	if (Array.isArray(current)) {
+		if (!current.includes(pkg)) current.push(pkg);
+		return conf;
+	}
+	if (typeof current === "string") {
+		conf.ssr.noExternal = current === pkg ? [pkg] : [current, pkg];
+		return conf;
+	}
+	conf.ssr.noExternal = [current, pkg];
+	return conf;
+}
+var updateConf_default = updateConf;
+
 //#endregion
 //#region src/index.ts
 function qwikDevtools() {
 	let _config;
 	const qwikData = new Map();
+	let preloadStarted = false;
 	const qwikDevtoolsPlugin = {
 		name: "vite-plugin-qwik-devtools",
 		apply: "serve",
@@ -8602,11 +8811,18 @@ function qwikDevtools() {
 		load(id) {
 			if (id === `/${VIRTUAL_QWIK_DEVTOOLS_KEY}` || id === VIRTUAL_QWIK_DEVTOOLS_KEY || id === `\u0000${VIRTUAL_QWIK_DEVTOOLS_KEY}` || id === `/@id/${VIRTUAL_QWIK_DEVTOOLS_KEY}`) return {
 				code: useCollectHooks_default,
-				map: null
+				map: { mappings: "" }
 			};
 		},
 		configResolved(viteConfig) {
 			_config = viteConfig;
+			updateConf_default(_config);
+			if (!preloadStarted) {
+				preloadStarted = true;
+				startPreloading({ config: _config }).catch((err) => {
+					console.error("[Qwik DevTools] Failed to start preloading:", err);
+				});
+			}
 		},
 		transform: {
 			order: "pre",
@@ -8616,7 +8832,7 @@ function qwikDevtools() {
 					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 });
 				}
 				if (id.endsWith("root.tsx")) {
@@ -8635,7 +8851,7 @@ function qwikDevtools() {
 				}
 				return {
 					code,
-					map: null
+					map: { mappings: "" }
 				};
 			}
 		},

package/dist/ui/_virtual/index.qwik.mjs

@@ -1,5 +1,7 @@
-import { __require as requireReactDom } from "../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/index.qwik.mjs";
-var reactDomExports = requireReactDom();
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.qwik.mjs";
+import { __require as requireBraceExpansion } from "../node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.qwik.mjs";
+var braceExpansionExports = requireBraceExpansion();
+const expand = /* @__PURE__ */ getDefaultExportFromCjs(braceExpansionExports);
 export {
-  reactDomExports as r
+  expand as default
 };

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.mjs

@@ -2,9 +2,12 @@ import { jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, Slot } from "@qwik.dev/core";
 const DevtoolsContainer = component$(() => {
   return /* @__PURE__ */ jsx("div", {
-    class: "fixed bottom-0 right-0 z-[9999] font-sans",
-    "q:slot": "content",
-    children: /* @__PURE__ */ jsx(Slot, {})
+    class: "qwik-devtools",
+    children: /* @__PURE__ */ jsx("div", {
+      class: "fixed bottom-0 right-0 z-[9999] font-sans",
+      "q:slot": "content",
+      children: /* @__PURE__ */ jsx(Slot, {})
+    })
   });
 });
 export {

package/dist/ui/components/Tab/Tab.qwik.mjs

@@ -6,7 +6,7 @@ const Tab = component$(({ state, id, title }) => {
     title,
     class: {
       "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
-      "bg-foreground/5 hover:bg-foreground/10 text-muted-foreground hover:bg-primary-hover hover:text-foreground": state.activeTab !== id,
+      "bg-transparent hover:bg-foreground/5 text-muted-foreground hover:text-foreground": state.activeTab !== id,
       "shadow-accent/35 bg-accent text-white shadow-lg": state.activeTab === id
     },
     children: /* @__PURE__ */ jsx(Slot, {})

package/dist/ui/components/TabContent/TabContent.qwik.mjs

@@ -10,8 +10,11 @@ const TabContent = component$(() => {
           name: "title"
         })
       }),
-      /* @__PURE__ */ jsx(Slot, {
-        name: "content"
+      /* @__PURE__ */ jsx("div", {
+        class: "flex-1 overflow-y-auto pb-6",
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "content"
+        })
       })
     ]
   });

package/dist/ui/components/ThemeToggle/{ThemeToggle.qwik.mjs → QwikThemeToggle.qwik.mjs}

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from "@qwik.dev/core/jsx-runtime";
 import { component$, useStyles$, event$, isServer } from "@qwik.dev/core";
 import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
-import { HiSunOutline, HiMoonOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { BsBrilliance } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
+import { HiSunOutline, HiMoonOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { BsBrilliance } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
 import themeTogglecss from "./themToggle.css.qwik.mjs";
 const getTheme = () => {
   if (isServer) {
@@ -23,7 +23,7 @@ const setTheme = (theme) => {
   }
   localStorage.setItem(themeStorageKey, theme);
 };
-const ThemeToggle = component$(() => {
+const QwikThemeToggle = component$(() => {
   useStyles$(themeTogglecss);
   const onClick$ = event$(() => {
     let currentTheme = getTheme();
@@ -31,8 +31,8 @@ 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);
   });
@@ -58,7 +58,7 @@ const ThemeToggle = component$(() => {
   });
 });
 export {
-  ThemeToggle,
+  QwikThemeToggle,
   getTheme,
   setTheme
 };

package/dist/ui/components/Tree/Tree.qwik.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
 import { component$, useSignal, $ } from "@qwik.dev/core";
-import { HiChevronUpMini } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { HiChevronUpMini } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
 const TreeNodeComponent = component$((props) => {
   const isExpanded = useSignal(props.expandLevel <= props.level);
   const hasChildren = props.node.children && props.node.children.length > 0;
@@ -40,26 +40,46 @@ const TreeNodeComponent = component$((props) => {
   return /* @__PURE__ */ jsxs("div", {
     class: "w-full",
     children: [
-      /* @__PURE__ */ jsxs("div", {
+      /* @__PURE__ */ jsx("div", {
         style: {
           paddingLeft: `${props.level * props.gap}px`
         },
-        class: `flex w-full cursor-pointer items-center rounded-md p-1 transition-colors duration-150 
-                ${isActive ? "bg-primary  text-white " : "hover:bg-primary-hover "}`,
+        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "border border-emerald-300 bg-emerald-100 font-semibold text-emerald-700 dark:border-emerald-700/40 dark:bg-emerald-900/30 dark:text-emerald-300" : ""}`,
         onClick$: handleNodeClick,
-        children: [
-          hasChildren ? /* @__PURE__ */ jsx(HiChevronUpMini, {
-            class: `mr-2 h-4 w-4 flex-shrink-0 transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
-          }) : /* @__PURE__ */ jsx("div", {
-            class: "mr-2 w-4 flex-shrink-0"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "cursor-pointer whitespace-nowrap text-sm",
-            children: props.renderNode ? /* @__PURE__ */ jsx(Fragment, {
-              children: props.renderNode(props.node)
-            }) : `<${props.node.label || props.node.name} ${iterateProps(props.node.props || {})}>`
-          })
-        ]
+        children: /* @__PURE__ */ jsxs("div", {
+          class: `inline-flex items-center rounded-md  px-2 py-1`,
+          children: [
+            hasChildren ? /* @__PURE__ */ jsx(HiChevronUpMini, {
+              class: `mr-2 h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
+            }) : /* @__PURE__ */ jsx("div", {
+              class: "mr-2 w-4 flex-shrink-0"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "cursor-pointer whitespace-nowrap text-sm",
+              children: props.renderNode ? /* @__PURE__ */ jsx(Fragment, {
+                children: props.renderNode(props.node)
+              }) : /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-foreground/70",
+                    children: "<"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "text-violet-400 dark:text-violet-300",
+                    children: props.node.label || props.node.name
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    class: "text-muted-foreground",
+                    children: [
+                      ` ${iterateProps(props.node.props || {})}`,
+                      ">"
+                    ]
+                  })
+                ]
+              })
+            })
+          ]
+        })
       }),
       hasChildren ? props.animate ? /* @__PURE__ */ jsx("div", {
         class: `overflow-hidden transition-all ease-in-out`,

package/dist/ui/components/Tree/filterVnode.qwik.mjs

@@ -1,4 +1,4 @@
-import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getProps, _vnode_getAttr, _vnode_getFirstChild, _vnode_isMaterialized, _vnode_getNextSibling } from "@qwik.dev/core/internal";
+import { _vnode_isVirtualVNode, _vnode_getAttrKeys, _vnode_getFirstChild, _vnode_isMaterialized } from "@qwik.dev/core/internal";
 import { normalizeName } from "./vnode.qwik.mjs";
 import { htmlContainer } from "../../utils/location.qwik.mjs";
 import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
@@ -38,8 +38,8 @@ function buildTreeRecursive(vnode, materialize) {
       _vnode_getAttrKeys(currentVNode).forEach((key) => {
         if (key === QTYPE) return;
         const value = container.getHostProp(currentVNode, key);
-        _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);
         if (key === QRENDERFN) {
           vnodeObject.label = normalizeName(value.getSymbol());
           vnodeObject.name = normalizeName(value.getSymbol());
@@ -57,7 +57,7 @@ function buildTreeRecursive(vnode, materialize) {
         result.push(...buildTreeRecursive(firstChild));
       }
     }
-    currentVNode = _vnode_getNextSibling(currentVNode);
+    currentVNode = currentVNode.nextSibling;
   }
   return result;
 }