@qwik.dev/devtools 0.1.1 → 0.2.0

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

@@ -0,0 +1,247 @@
+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 "../../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
+  }
+};
+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)
+        });
+      } else if (name === "customhook") {
+        return toTree({
+          [`let ${item?.variableName} = Scope `]: item.data[CAPTURE_REF_KEY]
+        });
+      } else {
+        return toTree({
+          [`let ${item?.variableName} =`]: item.data
+        });
+      }
+    }).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 [${variableName.join(", ")}]`;
+}
+function buildTree() {
+  return getData();
+}
+function clearAll() {
+  for (const key of Object.keys(qSeqs)) {
+    qSeqs[key].set.clear();
+  }
+}
+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
+    ];
+  }
+  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;
+  }
+  return qrl?.[CHUNK_KEY];
+}
+function getQrlChunkName(qrl) {
+  const splitPoint = "_component";
+  return qrl?.[CHUNK_KEY]?.split(splitPoint)?.[0];
+}
+export {
+  buildTree,
+  clearAll,
+  findAllQrl,
+  findMatchVarfromScope,
+  formatData,
+  getData,
+  getHookFilterList,
+  getQrlChunkName,
+  getQrlPath
+};

package/dist/ui/features/RenderTree/transfromqseq.qwik.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const type = require("../../utils/type.qwik.cjs");
+let nodeIdCounter = 0;
+const objectToTree = (obj, parentPath = "") => {
+  if (!obj || typeof obj !== "object") {
+    return [];
+  }
+  const result = [];
+  if (Array.isArray(obj)) {
+    return obj.map((item, index) => {
+      return createTreeNode(item, `[${index}]`);
+    }).filter(Boolean);
+  }
+  Object.entries(obj).forEach(([key, value]) => {
+    const node = createTreeNode(value, key);
+    if (node) {
+      result.push(node);
+    }
+  });
+  return result;
+};
+function createTreeNode(value, key, path) {
+  const node = createTreeNodeObj(key);
+  if (value === null || value === void 0) {
+    node.label = `${key}: ${value}`;
+    node.elementType = "null";
+    return node;
+  }
+  if (typeof value === "boolean") {
+    node.label = `${key}: ${value}`;
+    node.elementType = "boolean";
+    return node;
+  }
+  if (typeof value === "number") {
+    node.label = `${key}: ${value}`;
+    node.elementType = "number";
+    return node;
+  }
+  if (typeof value === "string") {
+    node.label = `${key}: "${value}"`;
+    node.elementType = "string";
+    return node;
+  }
+  if (typeof value === "function") {
+    node.label = `${key}: ƒ()`;
+    node.elementType = "function";
+    if (value.name) {
+      node.label = `${key}: ƒ ${value.name}()`;
+    }
+    return node;
+  }
+  if (Array.isArray(value)) {
+    node.label = `${key}: Array[${value.length}]`;
+    node.elementType = "array";
+    node.children = value.map((item, index) => {
+      return createTreeNode(item, index.toString());
+    }).filter(Boolean);
+    return node;
+  }
+  if (typeof value === "object") {
+    if (value.constructor.name !== "Object") {
+      node.label = `${key}: Class {${value.constructor.name}}`;
+      node.elementType = "object";
+      if (type.isValue(value)) {
+        node.children = [
+          createTreeNode(value.value, "value")
+        ];
+      }
+    } else {
+      const keys = Object.keys(value);
+      node.label = `${key}: Object {${keys.length}}`;
+      node.elementType = "object";
+      node.children = Object.entries(value).map(([childKey, childValue]) => {
+        return createTreeNode(childValue, childKey);
+      }).filter(Boolean);
+    }
+    return node;
+  }
+  return null;
+}
+const createTreeNodeObj = (label, children = []) => {
+  return {
+    id: `node-${nodeIdCounter++}`,
+    label,
+    props: {},
+    children
+  };
+};
+exports.createTreeNodeObj = createTreeNodeObj;
+exports.objectToTree = objectToTree;

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

@@ -0,0 +1,91 @@
+import { isValue } from "../../utils/type.qwik.mjs";
+let nodeIdCounter = 0;
+const objectToTree = (obj, parentPath = "") => {
+  if (!obj || typeof obj !== "object") {
+    return [];
+  }
+  const result = [];
+  if (Array.isArray(obj)) {
+    return obj.map((item, index) => {
+      return createTreeNode(item, `[${index}]`);
+    }).filter(Boolean);
+  }
+  Object.entries(obj).forEach(([key, value]) => {
+    const node = createTreeNode(value, key);
+    if (node) {
+      result.push(node);
+    }
+  });
+  return result;
+};
+function createTreeNode(value, key, path) {
+  const node = createTreeNodeObj(key);
+  if (value === null || value === void 0) {
+    node.label = `${key}: ${value}`;
+    node.elementType = "null";
+    return node;
+  }
+  if (typeof value === "boolean") {
+    node.label = `${key}: ${value}`;
+    node.elementType = "boolean";
+    return node;
+  }
+  if (typeof value === "number") {
+    node.label = `${key}: ${value}`;
+    node.elementType = "number";
+    return node;
+  }
+  if (typeof value === "string") {
+    node.label = `${key}: "${value}"`;
+    node.elementType = "string";
+    return node;
+  }
+  if (typeof value === "function") {
+    node.label = `${key}: ƒ()`;
+    node.elementType = "function";
+    if (value.name) {
+      node.label = `${key}: ƒ ${value.name}()`;
+    }
+    return node;
+  }
+  if (Array.isArray(value)) {
+    node.label = `${key}: Array[${value.length}]`;
+    node.elementType = "array";
+    node.children = value.map((item, index) => {
+      return createTreeNode(item, index.toString());
+    }).filter(Boolean);
+    return node;
+  }
+  if (typeof value === "object") {
+    if (value.constructor.name !== "Object") {
+      node.label = `${key}: Class {${value.constructor.name}}`;
+      node.elementType = "object";
+      if (isValue(value)) {
+        node.children = [
+          createTreeNode(value.value, "value")
+        ];
+      }
+    } else {
+      const keys = Object.keys(value);
+      node.label = `${key}: Object {${keys.length}}`;
+      node.elementType = "object";
+      node.children = Object.entries(value).map(([childKey, childValue]) => {
+        return createTreeNode(childValue, childKey);
+      }).filter(Boolean);
+    }
+    return node;
+  }
+  return null;
+}
+const createTreeNodeObj = (label, children = []) => {
+  return {
+    id: `node-${nodeIdCounter++}`,
+    label,
+    props: {},
+    children
+  };
+};
+export {
+  createTreeNodeObj,
+  objectToTree
+};

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

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
 const core = require("@qwik.dev/core");
-const router = require("@qwik.dev/router");
 const Routes = core.component$(({ state }) => {
-  const location = router.useLocation();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "overflow-hidden rounded-xl border border-white/10",
+    class: "flex-1 overflow-hidden rounded-xl border border-border",
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: "grid grid-cols-4 gap-4 bg-white/[0.03] p-4 text-sm font-medium",
+        class: "grid grid-cols-4 gap-4 bg-card-item-bg p-4 text-sm font-medium",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", {
             children: "Route Path"
@@ -29,29 +27,29 @@ const Routes = core.component$(({ state }) => {
         const children = route.children || [];
         const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
         return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          class: "grid grid-cols-4 gap-4 border-t border-white/10 p-4 text-sm hover:bg-white/[0.02]",
+          class: "grid grid-cols-4 gap-4 border-t border-border p-4 text-sm hover:bg-card-item-hover-bg",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", {
               children: /* @__PURE__ */ jsxRuntime.jsx("span", {
                 class: {
-                  "text-emerald-400": location.url.pathname === "/" && route.relativePath === "" || location.url.pathname === `/${route.relativePath}/`
+                  "text-accent": location.pathname === "/" && route.relativePath === "" || location.pathname === `/${route.relativePath}/`
                 },
                 children: route.relativePath === "" ? "/" : `/${route.relativePath}/`
               })
             }),
             /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "text-zinc-400",
+              class: "text-muted-foreground",
               children: route.name
             }),
             /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "text-zinc-400",
+              class: "text-muted-foreground",
               children: "-"
             }),
             /* @__PURE__ */ jsxRuntime.jsx("div", {
               children: /* @__PURE__ */ jsxRuntime.jsx("span", {
                 class: {
-                  "text-emerald-400": layout && i > 0,
-                  "text-zinc-400": !layout || i === 0
+                  "text-accent": layout && i > 0,
+                  "text-muted-foreground": !layout || i === 0
                 },
                 children: layout && i > 0 ? `${route.relativePath}/layout` : "default"
               })

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

@@ -1,13 +1,11 @@
 import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$ } from "@qwik.dev/core";
-import { useLocation } from "@qwik.dev/router";
 const Routes = component$(({ state }) => {
-  const location = useLocation();
   return /* @__PURE__ */ jsxs("div", {
-    class: "overflow-hidden rounded-xl border border-white/10",
+    class: "flex-1 overflow-hidden rounded-xl border border-border",
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: "grid grid-cols-4 gap-4 bg-white/[0.03] p-4 text-sm font-medium",
+        class: "grid grid-cols-4 gap-4 bg-card-item-bg p-4 text-sm font-medium",
         children: [
           /* @__PURE__ */ jsx("div", {
             children: "Route Path"
@@ -27,29 +25,29 @@ 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-white/10 p-4 text-sm hover:bg-white/[0.02]",
+          class: "grid grid-cols-4 gap-4 border-t border-border p-4 text-sm hover:bg-card-item-hover-bg",
           children: [
             /* @__PURE__ */ jsx("div", {
               children: /* @__PURE__ */ jsx("span", {
                 class: {
-                  "text-emerald-400": location.url.pathname === "/" && route.relativePath === "" || location.url.pathname === `/${route.relativePath}/`
+                  "text-accent": location.pathname === "/" && route.relativePath === "" || location.pathname === `/${route.relativePath}/`
                 },
                 children: route.relativePath === "" ? "/" : `/${route.relativePath}/`
               })
             }),
             /* @__PURE__ */ jsx("div", {
-              class: "text-zinc-400",
+              class: "text-muted-foreground",
               children: route.name
             }),
             /* @__PURE__ */ jsx("div", {
-              class: "text-zinc-400",
+              class: "text-muted-foreground",
               children: "-"
             }),
             /* @__PURE__ */ jsx("div", {
               children: /* @__PURE__ */ jsx("span", {
                 class: {
-                  "text-emerald-400": layout && i > 0,
-                  "text-zinc-400": !layout || i === 0
+                  "text-accent": layout && i > 0,
+                  "text-muted-foreground": !layout || i === 0
                 },
                 children: layout && i > 0 ? `${route.relativePath}/layout` : "default"
               })

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const constant = require("./constant.qwik.cjs");
+const Inspect = core.component$(() => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "flex-1 overflow-hidden",
+    children: /* @__PURE__ */ jsxRuntime.jsx("iframe", {
+      src: `${location.href}${constant.inspectorLink}`,
+      width: "100%",
+      height: "100%",
+      id: "inspect_qwik"
+    })
+  });
+});
+exports.Inspect = Inspect;

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

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

package/dist/ui/features/inspect/constant.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const inspectorLink = "__inspect/";
+exports.inspectorLink = inspectorLink;

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

@@ -0,0 +1,4 @@
+const inspectorLink = "__inspect/";
+export {
+  inspectorLink
+};