@qwik.dev/devtools 0.2.0 → 0.2.2

package/dist/ui/features/RenderTree/formatTreeData.qwik.mjs

@@ -1,247 +1,222 @@
-import { objectToTree, createTreeNodeObj } from "./transfromqseq.qwik.mjs";
 import "../../node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
-import { CHUNK_KEY, QRL_KEY, COMPUTED_QRL_KEY, CAPTURE_REF_KEY } from "../../packages/kit/src/constants.qwik.mjs";
+import { CAPTURE_REF_KEY, QRL_KEY, COMPUTED_QRL_KEY } from "../../packages/kit/src/constants.qwik.mjs";
 import "../../node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.mjs";
-const schedule = (value) => {
-  return objectToTree(value);
-};
-const qSeqs = {
-  props: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  listens: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useStore: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useSignal: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useContext: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useId: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useStyles: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useStylesScoped: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useConstant: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useTask: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useVisibleTask: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useComputed: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useAsyncComputed: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useErrorBoundary: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useServerData: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useSerializer: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useResource: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: false
-  },
-  useContextProvider: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  render: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: false
-  },
-  useLocation: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useNavigate: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  usePreventNavigate: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: false
-  },
-  useContent: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  useDocumentHead: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
-  },
-  customhook: {
-    set: /* @__PURE__ */ new Set(),
-    toTree: schedule,
-    display: true
+import debug from "../../_virtual/browser.qwik.mjs";
+import { TreeBuilder } from "./TreeBuilder.qwik.mjs";
+import { HOOK_TYPES, HIDDEN_HOOKS, QRL_HOOKS } from "./types.qwik.mjs";
+const log = debug("qwik:devtools:renderTree");
+class HookStore {
+  constructor() {
+    this.store = this.createStore();
+    this.treeBuilder = new TreeBuilder();
   }
-};
-function formatData(type, data) {
-  qSeqs[type].set.add(data);
-}
-function getData() {
-  return Object.entries(qSeqs).map(([name, { set, toTree, display }]) => {
-    const arr = [
-      ...set
-    ].map((item) => {
-      if (name === "props" || name === "listens" || name === "render") {
-        return toTree(item.data);
-      } else if (name === "useTask" || name === "useVisibleTask") {
-        return toTree({
-          [`let ${item?.variableName} =`]: findMatchVarfromScope(item)
+  createStore() {
+    const store = {};
+    for (const hookType of HOOK_TYPES) {
+      store[hookType] = {
+        set: /* @__PURE__ */ new Set(),
+        visible: !HIDDEN_HOOKS.includes(hookType)
+      };
+    }
+    return store;
+  }
+  // ==========================================================================
+  // Data Management
+  // ==========================================================================
+  /**
+  * Add data to the store for a specific hook type
+  */
+  add(type, data) {
+    this.store[type].set.add(data);
+  }
+  /**
+  * Clear all stored hook data
+  */
+  clear() {
+    for (const entry of Object.values(this.store)) {
+      entry.set.clear();
+    }
+  }
+  /**
+  * Reset the entire store
+  */
+  reset() {
+    this.store = this.createStore();
+  }
+  /**
+  * Get entries for a specific hook type
+  */
+  getEntries(type) {
+    return [
+      ...this.store[type].set
+    ];
+  }
+  /**
+  * Check if a hook type has entries
+  */
+  hasEntries(type) {
+    return this.store[type].set.size > 0;
+  }
+  // ==========================================================================
+  // Visibility Management
+  // ==========================================================================
+  /**
+  * Set visibility for a hook type
+  */
+  setVisibility(type, visible) {
+    this.store[type].visible = visible;
+  }
+  /**
+  * Check if a hook type is visible
+  */
+  isVisible(type) {
+    return this.store[type].visible;
+  }
+  /**
+  * Get filter list for UI
+  */
+  getFilterList() {
+    return HOOK_TYPES.filter((type) => this.hasEntries(type) && this.isVisible(type)).map((key) => ({
+      key,
+      display: this.store[key].visible
+    }));
+  }
+  // ==========================================================================
+  // Tree Building
+  // ==========================================================================
+  /**
+  * Build tree nodes from all stored hook data
+  */
+  buildTree() {
+    const result = [];
+    for (const hookType of HOOK_TYPES) {
+      if (!this.hasEntries(hookType) || !this.isVisible(hookType)) continue;
+      const nodes = this.transformEntries(hookType);
+      if (nodes.length > 0) {
+        result.push(this.treeBuilder.createGroupNode(hookType, nodes));
+      }
+    }
+    return result;
+  }
+  transformEntries(hookType) {
+    const entries = this.getEntries(hookType);
+    return entries.map((entry) => this.transformEntry(hookType, entry)).flat();
+  }
+  transformEntry(hookType, entry) {
+    const typedEntry = entry;
+    switch (hookType) {
+      case "props":
+      case "listens":
+      case "render":
+        return this.treeBuilder.objectToTree(typedEntry.data);
+      case "useTask":
+      case "useVisibleTask": {
+        const scopeVars = this.findScopeVariables(typedEntry);
+        return this.treeBuilder.objectToTree({
+          [`let ${typedEntry.variableName ?? hookType} =`]: scopeVars
         });
-      } else if (name === "customhook") {
-        return toTree({
-          [`let ${item?.variableName} = Scope `]: item.data[CAPTURE_REF_KEY]
+      }
+      case "customhook": {
+        const captureRef = typedEntry.data?.[CAPTURE_REF_KEY];
+        return this.treeBuilder.objectToTree({
+          [`let ${typedEntry.variableName ?? "customhook"} = Scope `]: captureRef
         });
-      } else {
-        return toTree({
-          [`let ${item?.variableName} =`]: item.data
+      }
+      default:
+        return this.treeBuilder.objectToTree({
+          [`let ${typedEntry.variableName ?? hookType} =`]: typedEntry.data
         });
+    }
+  }
+  findScopeVariables(item) {
+    const targets = item.data?.[CAPTURE_REF_KEY];
+    if (!targets) return "Scope []";
+    const variableNames = [];
+    for (const entry of Object.values(this.store)) {
+      for (const storedEntry of entry.set) {
+        const entryData = storedEntry;
+        const data = entryData?.data ?? entryData;
+        if (!data) continue;
+        const match = targets.find((target) => target === data);
+        if (match && entryData.variableName) {
+          variableNames.push(entryData.variableName);
+        }
       }
-    }).flat();
-    if (display === false) return null;
-    return arr.length > 0 ? createTreeNodeObj(name, arr) : null;
-  }).filter(Boolean);
-}
-function findMatchVarfromScope(item) {
-  const targets = item?.data[CAPTURE_REF_KEY];
-  const variableName = [];
-  if (!targets) return [];
-  for (const { set } of Object.values(qSeqs)) {
-    for (const entry of set) {
-      const data = entry?.data ?? entry;
-      if (!data) continue;
-      const varName = targets.find((target) => target === data);
-      varName && variableName.push(entry?.variableName);
     }
+    return `Scope [${variableNames.join(", ")}]`;
   }
-  return `Scope [${variableName.join(", ")}]`;
-}
-function buildTree() {
-  return getData();
-}
-function clearAll() {
-  for (const key of Object.keys(qSeqs)) {
-    qSeqs[key].set.clear();
+  // ==========================================================================
+  // QRL Path Utilities
+  // ==========================================================================
+  /**
+  * Find all QRL paths for code lookup
+  */
+  findAllQrlPaths() {
+    const paths = [];
+    for (const hookType of QRL_HOOKS) {
+      const entries = this.getEntries(hookType);
+      for (const entry of entries) {
+        const extracted = this.extractQrlPath(hookType, entry);
+        if (extracted) {
+          if (Array.isArray(extracted)) {
+            paths.push(...extracted.filter(Boolean));
+          } else {
+            paths.push(extracted);
+          }
+        }
+      }
+    }
+    log("findAllQrlPaths return: %O", paths);
+    return paths.filter(Boolean);
   }
-}
-function getHookFilterList() {
-  return Object.keys(qSeqs).filter((usename) => qSeqs[usename].set.size > 0 && qSeqs[usename].display).map((key) => ({
-    key,
-    display: qSeqs[key].display
-  }));
-}
-function getRawDataObj() {
-  const result = {};
-  for (const [name, { set }] of Object.entries(qSeqs)) {
-    result[name] = [
-      ...set
-    ];
+  extractQrlPath(hookType, entry) {
+    if (hookType === "listens") {
+      const data2 = entry.data ?? entry;
+      return Object.values(data2).map((v) => v?.$chunk$).filter((v) => typeof v === "string");
+    }
+    if (hookType === "render") {
+      const renderFn = entry.data?.render ?? entry;
+      return QrlUtils.getPath(renderFn);
+    }
+    const data = entry.data ?? entry;
+    const qrlObj = data[QRL_KEY] ?? data[COMPUTED_QRL_KEY];
+    return QrlUtils.getPath(qrlObj);
   }
-  return result;
 }
-function findAllQrl() {
-  const list = [
-    "useTask",
-    "useVisibleTask",
-    "useComputed",
-    "useAsyncComputed",
-    "useServerData",
-    "useSerializer",
-    "render",
-    "listens"
-  ];
-  const rawData = getRawDataObj();
-  const result = list.map((item) => {
-    return rawData[item].map((entry) => {
-      if (item === "listens") {
-        return Object.values(entry.data || entry).map((v) => v?.[CHUNK_KEY]);
-      } else if (item === "render") {
-        return getQrlPath(entry.data.render || entry);
-      } else {
-        const qrlObj = (entry.data || entry)[QRL_KEY] || (entry.data || entry)[COMPUTED_QRL_KEY];
-        return getQrlPath(qrlObj);
-      }
-    });
-  });
-  console.log("findAllQrl", result.flat(2).filter(Boolean));
-  return result.flat(2).filter(Boolean);
-}
-function getQrlPath(qrl) {
-  if (qrl?.dev) {
-    return qrl?.dev.filename;
+class QrlUtils {
+  /**
+  * Get the file path from a QRL object.
+  * In dev mode, uses dev.file; in production, uses $chunk$.
+  */
+  static getPath(qrl) {
+    if (!qrl) return null;
+    if (qrl.dev) return qrl.dev.file;
+    return qrl.$chunk$;
+  }
+  /**
+  * Get the chunk name from a QRL for component identification
+  */
+  static getChunkName(qrl) {
+    const splitPoint = "_component";
+    const chunk = qrl.$chunk$;
+    return chunk?.split(splitPoint)?.[0] ?? "";
+  }
+  /**
+  * Normalize raw qseq data with parsed structure metadata
+  */
+  static normalizeData(qseq, parsed) {
+    return qseq.map((item, index) => ({
+      data: item,
+      ...parsed[index]
+    }));
   }
-  return qrl?.[CHUNK_KEY];
 }
-function getQrlChunkName(qrl) {
-  const splitPoint = "_component";
-  return qrl?.[CHUNK_KEY]?.split(splitPoint)?.[0];
+const hookStore = new HookStore();
+function getHookStore() {
+  return hookStore;
 }
 export {
-  buildTree,
-  clearAll,
-  findAllQrl,
-  findMatchVarfromScope,
-  formatData,
-  getData,
-  getHookFilterList,
-  getQrlChunkName,
-  getQrlPath
+  HookStore,
+  QrlUtils,
+  getHookStore
 };

package/dist/ui/features/RenderTree/types.qwik.mjs

@@ -0,0 +1,50 @@
+const HOOK_TYPES = [
+  // Variable declaration hooks
+  "useStore",
+  "useSignal",
+  "useContext",
+  "useId",
+  "useStyles",
+  "useStylesScoped",
+  "useConstant",
+  "useComputed",
+  "useAsyncComputed",
+  "useErrorBoundary",
+  "useServerData",
+  "useSerializer",
+  "useLocation",
+  "useNavigate",
+  "useContent",
+  "useDocumentHead",
+  // Expression statement hooks
+  "useTask",
+  "useVisibleTask",
+  "useResource",
+  "useContextProvider",
+  "usePreventNavigate",
+  // Special types
+  "props",
+  "listens",
+  "render",
+  "customhook"
+];
+const HIDDEN_HOOKS = [
+  "useResource",
+  "usePreventNavigate",
+  "render"
+];
+const QRL_HOOKS = [
+  "useTask",
+  "useVisibleTask",
+  "useComputed",
+  "useAsyncComputed",
+  "useServerData",
+  "useSerializer",
+  "render",
+  "listens"
+];
+export {
+  HIDDEN_HOOKS,
+  HOOK_TYPES,
+  QRL_HOOKS
+};

package/dist/ui/features/Routes/Routes.qwik.mjs

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$ } from "@qwik.dev/core";
 const Routes = component$(({ state }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: "flex-1 overflow-hidden rounded-xl border border-border",
+    class: "border-border flex-1 overflow-hidden rounded-xl border",
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: "grid grid-cols-4 gap-4 bg-card-item-bg p-4 text-sm font-medium",
+        class: "bg-card-item-bg grid grid-cols-4 gap-4 p-4 text-sm font-medium",
         children: [
           /* @__PURE__ */ jsx("div", {
             children: "Route Path"
@@ -25,7 +25,7 @@ const Routes = component$(({ state }) => {
         const children = route.children || [];
         const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
         return /* @__PURE__ */ jsxs("div", {
-          class: "grid grid-cols-4 gap-4 border-t border-border p-4 text-sm hover:bg-card-item-hover-bg",
+          class: "border-border hover:bg-card-item-hover-bg grid grid-cols-4 gap-4 border-t p-4 text-sm",
           children: [
             /* @__PURE__ */ jsx("div", {
               children: /* @__PURE__ */ jsx("span", {

package/dist/ui/features/inspect/Inspect.qwik.mjs

@@ -3,7 +3,7 @@ import { component$ } from "@qwik.dev/core";
 import { inspectorLink } from "./constant.qwik.mjs";
 const Inspect = component$(() => {
   return /* @__PURE__ */ jsx("div", {
-    class: "flex-1 overflow-hidden",
+    class: "h-full flex-1 overflow-hidden",
     children: /* @__PURE__ */ jsx("iframe", {
       src: `${location.href}${inspectorLink}`,
       width: "100%",