@qwik.dev/devtools 0.2.2 → 0.2.3

package/dist/plugin/index.js

@@ -8030,171 +8030,199 @@ var import_src = __toESM(require_src(), 1);
 //#endregion
 //#region src/npm/index.ts
 const log$4 = (0, import_src.debug)("qwik:devtools:npm");
-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()
-	});
+let dependenciesStatus = {
+	phase: "idle",
+	loaded: 0,
+	total: 0,
+	startedAt: null,
+	finishedAt: null
+};
+async function fileExists(filePath) {
+	try {
+		await fsp.access(filePath);
+		return true;
+	} catch {
+		return false;
+	}
 }
-async function findNearestFileUp(startDir, fileName) {
+async function readJsonFile(filePath) {
 	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;
+		const content = await fsp.readFile(filePath, "utf-8");
+		return JSON.parse(content);
 	} catch {
 		return null;
 	}
 }
+async function findNearestFileUp(startDir, fileName) {
+	let currentDir = path.resolve(startDir);
+	for (let i = 0; i < 100; i++) {
+		const candidate = path.join(currentDir, fileName);
+		if (await fileExists(candidate)) return candidate;
+		const parent = path.dirname(currentDir);
+		if (parent === currentDir) break;
+		currentDir = parent;
+	}
+	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";
-		if (await fsp.access(path.join(projectRoot, "yarn.lock")).then(() => true).catch(() => false)) return "yarn";
-		if (await fsp.access(path.join(projectRoot, "package-lock.json")).then(() => true).catch(() => false)) return "npm";
-		return "pnpm";
-	} catch {
-		return "pnpm";
-	}
+function nodeModulesPackageJsonPath(projectRoot, name) {
+	return path.join(projectRoot, "node_modules", ...name.split("/"), "package.json");
+}
+function normalizeRepositoryUrl(repository) {
+	const url = typeof repository === "string" ? repository : repository?.url;
+	if (!url || typeof url !== "string") return void 0;
+	return url.replace(/^git\+/, "").replace(/^ssh:\/\/git@/, "https://").replace(/\.git$/, "");
 }
-const preloadDependencies = async (config) => {
-	if (preloadedDependencies) {
-		log$4("[Qwik DevTools] Dependencies already preloaded");
-		return preloadedDependencies;
+function guessIconUrl(name, repositoryUrl) {
+	if (name.startsWith("@")) {
+		const scope = name.split("/")[0].substring(1);
+		return `https://avatars.githubusercontent.com/${scope}?size=64`;
 	}
-	if (isPreloading && preloadPromise) {
-		log$4("[Qwik DevTools] Preloading already in progress...");
-		return preloadPromise;
+	if (repositoryUrl?.includes("github.com")) {
+		const match$1 = repositoryUrl.match(/github\.com\/([^\/]+)/);
+		if (match$1) return `https://avatars.githubusercontent.com/${match$1[1]}?size=64`;
 	}
+	return null;
+}
+function deferToEventLoop() {
+	return new Promise((resolve$2) => setImmediate(resolve$2));
+}
+async function mapLimit(items, concurrency, fn) {
+	if (items.length === 0) return [];
+	const results = new Array(items.length);
+	let cursor = 0;
+	const workers = Array.from({ length: Math.min(concurrency, items.length) }, async () => {
+		while (true) {
+			const i = cursor++;
+			if (i >= items.length) return;
+			results[i] = await fn(items[i], i);
+		}
+	});
+	await Promise.all(workers);
+	return results;
+}
+async function detectPackageManager(projectRoot) {
+	if (await fileExists(path.join(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
+	if (await fileExists(path.join(projectRoot, "yarn.lock"))) return "yarn";
+	if (await fileExists(path.join(projectRoot, "package-lock.json"))) return "npm";
+	return "pnpm";
+}
+async function phase1LocalIndex(projectRoot, deps) {
+	const localConcurrency = 16;
+	return mapLimit(deps, localConcurrency, async ([name, requestedVersion]) => {
+		const pkgJsonPath = nodeModulesPackageJsonPath(projectRoot, name);
+		const installedPkg = await readJsonFile(pkgJsonPath);
+		const version = installedPkg?.version || requestedVersion;
+		const repository = normalizeRepositoryUrl(installedPkg?.repository);
+		const iconUrl = guessIconUrl(name, repository);
+		const info = {
+			name,
+			version,
+			description: installedPkg?.description || "No description available",
+			author: installedPkg?.author,
+			homepage: installedPkg?.homepage,
+			repository,
+			npmUrl: `https://www.npmjs.com/package/${name}`,
+			iconUrl
+		};
+		dependenciesStatus.loaded++;
+		if (dependenciesStatus.loaded % 50 === 0) await deferToEventLoop();
+		return info;
+	});
+}
+async function phase2BackgroundEnrich(deps) {
+	const targets = deps.filter((p$1) => !p$1.repository || !p$1.iconUrl || p$1.description === "No description available");
+	const enrichConcurrency = 6;
+	await mapLimit(targets, enrichConcurrency, async (p$1) => {
+		const repo = normalizeRepositoryUrl(p$1.repository);
+		if (repo && repo !== p$1.repository) p$1.repository = repo;
+		if (!p$1.iconUrl) p$1.iconUrl = guessIconUrl(p$1.name, p$1.repository);
+		if (!p$1.repository || p$1.description === "No description available") try {
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), 1500);
+			const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(p$1.name)}/${encodeURIComponent(p$1.version)}`, {
+				headers: { Accept: "application/json" },
+				signal: controller.signal
+			});
+			clearTimeout(timeoutId);
+			if (res.ok) {
+				const data = await res.json();
+				if (!p$1.repository) p$1.repository = normalizeRepositoryUrl(data?.repository);
+				if (p$1.description === "No description available" && data?.description) p$1.description = data.description;
+				if (!p$1.iconUrl) p$1.iconUrl = guessIconUrl(p$1.name, p$1.repository);
+			}
+		} catch {}
+		await deferToEventLoop();
+		return p$1;
+	});
+}
+async function preloadDependencies(config) {
+	if (preloadedDependencies) return preloadedDependencies;
+	if (isPreloading && preloadPromise) return preloadPromise;
 	isPreloading = true;
-	log$4("[Qwik DevTools] Starting to preload dependencies...");
+	dependenciesStatus = {
+		phase: "phase1",
+		loaded: 0,
+		total: 0,
+		startedAt: Date.now(),
+		finishedAt: null
+	};
 	preloadPromise = (async () => {
 		const startDir = getProjectStartDirFromConfig(config);
-		const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
-		if (!pathToPackageJson) {
+		const packageJsonPath = await findNearestFileUp(startDir, "package.json");
+		if (!packageJsonPath) {
 			preloadedDependencies = [];
+			dependenciesStatus.phase = "done";
+			dependenciesStatus.finishedAt = Date.now();
 			isPreloading = false;
-			log$4("[Qwik DevTools] No package.json found");
 			return [];
 		}
+		const projectRoot = path.dirname(packageJsonPath);
+		const pkg = await readJsonFile(packageJsonPath);
+		const allDeps = {
+			...pkg?.dependencies || {},
+			...pkg?.devDependencies || {},
+			...pkg?.peerDependencies || {}
+		};
+		const entries = Object.entries(allDeps);
+		dependenciesStatus.total = entries.length;
 		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 = [];
-			log$4(`[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;
-			log$4(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`);
-			return allPackages;
-		} catch (error) {
-			log$4("[Qwik DevTools] ✗ Failed to preload dependencies:", error);
+			const list = await phase1LocalIndex(projectRoot, entries);
+			preloadedDependencies = list;
+			dependenciesStatus.phase = "phase2";
+			(async () => {
+				try {
+					await phase2BackgroundEnrich(list);
+					dependenciesStatus.phase = "done";
+				} catch (e) {
+					dependenciesStatus.phase = "error";
+					dependenciesStatus.error = e instanceof Error ? e.message : String(e);
+				} finally {
+					dependenciesStatus.finishedAt = Date.now();
+					isPreloading = false;
+				}
+			})();
+			log$4(`[Qwik DevTools] ✓ Phase1 preloaded ${list.length} dependencies (local-first)`);
+			return list;
+		} catch (e) {
 			preloadedDependencies = [];
+			dependenciesStatus.phase = "error";
+			dependenciesStatus.error = e instanceof Error ? e.message : String(e);
+			dependenciesStatus.finishedAt = Date.now();
 			isPreloading = false;
+			log$4("[Qwik DevTools] ✗ Failed to preload dependencies (local-first):", e);
 			return [];
 		}
 	})();
 	return preloadPromise;
-};
+}
 async function startPreloading({ config }) {
 	const startTime = Date.now();
 	log$4("[Qwik DevTools] 🚀 Initiating dependency preload (background)...");
@@ -8213,8 +8241,7 @@ function getNpmFunctions({ config }) {
 			const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
 			if (!pathToPackageJson) return [];
 			try {
-				const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
-				const pkg = JSON.parse(pkgJson);
+				const pkg = await readJsonFile(pathToPackageJson);
 				return Object.entries(pkg.devDependencies).filter(([key]) => /@qwik/i.test(key));
 			} catch (error) {
 				return [];
@@ -8225,12 +8252,26 @@ function getNpmFunctions({ config }) {
 				log$4("[Qwik DevTools] Returning preloaded dependencies");
 				return preloadedDependencies;
 			}
-			if (isPreloading && preloadPromise) {
-				log$4("[Qwik DevTools] Waiting for preload to complete...");
-				return preloadPromise;
-			}
+			if (isPreloading) return [];
 			log$4("[Qwik DevTools] Warning: Preload not started, starting now...");
-			return preloadDependencies(config);
+			preloadDependencies(config);
+			return [];
+		},
+		async getDependenciesStatus() {
+			return dependenciesStatus;
+		},
+		async refreshDependencies() {
+			preloadedDependencies = null;
+			isPreloading = false;
+			preloadPromise = null;
+			dependenciesStatus = {
+				phase: "idle",
+				loaded: 0,
+				total: 0,
+				startedAt: null,
+				finishedAt: null
+			};
+			preloadDependencies(config);
 		},
 		async installPackage(packageName, isDev = true) {
 			try {
@@ -9810,11 +9851,6 @@ const __qwik_perf_init_csr__ = () => {
 const __qwik_perf_get_ssr_store__ = () =>
   typeof process !== 'undefined' && process ? process : globalThis;
 
-const __qwik_perf_to_error__ = (err) => ({
-  name: (err && err.name) || 'Error',
-  message: err && err.message ? String(err.message) : String(err),
-});
-
 const __qwik_perf_next_id__ = (perf) => {
   perf._id = (perf._id || 0) + 1;
   return perf._id;
@@ -9936,31 +9972,17 @@ function componentQrl(qrl, options) {
   if(qrl.dev){
     viteId = qrl.dev.file.replace(/[^/]*$/, qrl.dev.displayName);
   }
-  try {
-    const result = originalComponentQrl(qrl, options);
-    const duration = performance.now() - start;
-    __qwik_perf_commit_componentqrl__({
-      component,
-      phase,
-      duration,
-      start,  
-      viteId,
-      end: start + duration,
-    });
-    return result;
-  } catch (err) {
-    const duration = performance.now() - start;
-    __qwik_perf_commit_componentqrl__({
-      component,
-      phase,
-      duration,
-      start,
-      viteId,
-      end: start + duration,
-      error: __qwik_perf_to_error__(err),
-    });
-    throw err;
-  }
+  const result = originalComponentQrl(qrl, options);
+  const duration = performance.now() - start;
+  __qwik_perf_commit_componentqrl__({
+    component,
+    phase,
+    duration,
+    start,  
+    viteId,
+    end: start + duration,
+  });
+  return result;
 }
 
 export { componentQrl };
@@ -10089,40 +10111,50 @@ const perfLazyWrapperPreamble = `${perfRuntime_default}
 
 // [qwik-component-proxy] Render function wrapper
 const __qwik_wrap__ = (fn, name, viteId) => {
+  if (typeof fn !== 'function') return fn;
   let renderCount = 0;
-  return function (...args) {
+
+  function wrapped(...args) {
     renderCount += 1;
     const phase = __qwik_perf_is_server__() ? 'ssr' : 'csr';
     const start = performance.now();
 
-    try {
-      const result = fn.apply(this, args);
-      const duration = performance.now() - start;
-      __qwik_perf_commit__({
-        component: name,
-        phase,
-        duration,
-        start,
-        end: start + duration,
-        viteId,
-        renderCount,
-      });
-      return result;
-    } catch (err) {
-      const duration = performance.now() - start;
-      __qwik_perf_commit__({
-        component: name,
-        phase,
-        duration,
-        start,
-        end: start + duration,
-        error: __qwik_perf_to_error__(err),
-        viteId,
-        renderCount,
-      });
-      throw err;
-    }
+    const result = fn.apply(this, args);
+    const duration = performance.now() - start;
+    __qwik_perf_commit__({
+      component: name,
+      phase,
+      duration,
+      start,
+      end: start + duration,
+      viteId,
+      renderCount,
+    });
+    return result;
+  }
+
+  // Preserve Qwik-compiler metadata attached to the original function.
+  // (No try/catch per request; avoid touching special function props.)
+  const skip = {
+    length: true,
+    name: true,
+    arguments: true,
+    caller: true,
+    prototype: true,
   };
+
+  const descriptors = Object.getOwnPropertyDescriptors(fn);
+  for (const key of Object.keys(descriptors)) {
+    if (skip[key]) continue;
+    Object.defineProperty(wrapped, key, descriptors[key]);
+  }
+
+  for (const sym of Object.getOwnPropertySymbols(fn)) {
+    const desc = Object.getOwnPropertyDescriptor(fn, sym);
+    if (desc) Object.defineProperty(wrapped, sym, desc);
+  }
+
+  return wrapped;
 };
 `;
 var perfLazyWrapperPreamble_default = perfLazyWrapperPreamble;

package/dist/ui/devtools.qwik.mjs

@@ -32,6 +32,21 @@ function getClientRpcFunctions() {
     healthCheck: () => true
   };
 }
+function toDevtoolsRoutes(routes) {
+  const children = routes?.children || [];
+  const directories = children.filter((child) => child.type === re.DIRECTORY);
+  return [
+    {
+      relativePath: "",
+      name: "index",
+      type: re.DIRECTORY,
+      path: "",
+      isSymbolicLink: false,
+      children: void 0
+    },
+    ...directories
+  ];
+}
 const QwikDevtools = component$(() => {
   useStyles$(globalCss);
   const state = useStore({
@@ -44,7 +59,6 @@ const QwikDevtools = component$(() => {
     allDependencies: [],
     isLoadingDependencies: false
   });
-  const clientReady = useSignal(false);
   useVisibleTask$(async () => {
     const hot = await tryCreateHotContext(void 0, [
       "/"
@@ -54,78 +68,43 @@ const QwikDevtools = component$(() => {
     }
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
-    clientReady.value = true;
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const assets = await rpc.getAssetsFromPublicDir();
-      state.assets = assets;
-    } catch (error) {
-      log("Failed to load assets:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const components = await rpc.getComponents();
-      state.components = components;
-    } catch (error) {
-      log("Failed to load components:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const routes = await rpc.getRoutes();
-      const children = routes?.children || [];
-      const directories = children.filter((child) => child.type === "directory");
-      const values = [
-        {
-          relativePath: "",
-          name: "index",
-          type: re.DIRECTORY,
-          path: "",
-          isSymbolicLink: false,
-          children: void 0
-        },
-        ...directories
-      ];
-      state.routes = noSerialize(values);
-    } catch (error) {
-      log("Failed to load routes:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const qwikPackages = await rpc.getQwikPackages();
-      state.npmPackages = qwikPackages;
-    } catch (error) {
-      log("Failed to load Qwik packages:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
     const rpc = getViteClientRpc();
+    const group1 = Promise.allSettled([
+      rpc.getAssetsFromPublicDir(),
+      rpc.getComponents(),
+      rpc.getRoutes(),
+      rpc.getQwikPackages()
+    ]);
     state.isLoadingDependencies = true;
-    try {
-      const allDeps = await rpc.getAllDependencies();
+    const depsPromise = rpc.getAllDependencies().then((allDeps) => {
       state.allDependencies = allDeps;
-    } catch (error) {
+    }).catch((error) => {
       log("Failed to load all dependencies:", error);
-    } finally {
+    }).finally(() => {
       state.isLoadingDependencies = false;
+    });
+    const [assetsRes, componentsRes, routesRes, packagesRes] = await group1;
+    if (assetsRes.status === "fulfilled") {
+      state.assets = assetsRes.value;
+    } else {
+      log("Failed to load assets:", assetsRes.reason);
+    }
+    if (componentsRes.status === "fulfilled") {
+      state.components = componentsRes.value;
+    } else {
+      log("Failed to load components:", componentsRes.reason);
+    }
+    if (routesRes.status === "fulfilled") {
+      state.routes = noSerialize(toDevtoolsRoutes(routesRes.value));
+    } else {
+      log("Failed to load routes:", routesRes.reason);
+    }
+    if (packagesRes.status === "fulfilled") {
+      state.npmPackages = packagesRes.value;
+    } else {
+      log("Failed to load Qwik packages:", packagesRes.reason);
     }
+    await depsPromise;
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [

package/dist/ui/lib-types/kit/src/types.d.ts

@@ -12,6 +12,15 @@ export interface ServerFunctions {
     getRoutes: () => any;
     getQwikPackages: () => Promise<[string, string][]>;
     getAllDependencies: () => Promise<any[]>;
+    getDependenciesStatus: () => Promise<{
+        phase: 'idle' | 'phase1' | 'phase2' | 'done' | 'error';
+        loaded: number;
+        total: number;
+        startedAt: number | null;
+        finishedAt: number | null;
+        error?: string;
+    }>;
+    refreshDependencies: () => Promise<void>;
     installPackage: (packageName: string, isDev?: boolean) => Promise<{
         success: boolean;
         error?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
   "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",