@qwik.dev/devtools 0.0.2 → 0.0.4

package/dist/component/devtools.qwik.cjs

@@ -0,0 +1,537 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const index = require("./node_modules/.pnpm/vite-hot-client@0.2.4_vite@5.4.10_@types_node@20.14.11_/node_modules/vite-hot-client/dist/index.qwik.cjs");
+const hi_qwik = require("./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.cjs");
+const lu_qwik = require("./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.cjs");
+const client = require("./packages/kit/src/client.qwik.cjs");
+require("./node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.cjs");
+const context = require("./packages/kit/src/context.qwik.cjs");
+const index_esm = require("./node_modules/.pnpm/dree@5.1.5/node_modules/dree/bundled/lib/esm/index.esm.qwik.cjs");
+const devtools = require("./devtools.css.qwik.cjs");
+const router = require("@qwik.dev/router");
+function getClientRpcFunctions() {
+  return {
+    healthCheck: () => true
+  };
+}
+const QwikDevtools = core.component$(() => {
+  core.useStyles$(devtools);
+  const state = core.useStore({
+    isOpen: false,
+    activeTab: "overview",
+    npmPackages: [],
+    assets: [],
+    routes: void 0
+  });
+  const panelRef = core.useSignal();
+  const location = router.useLocation();
+  core.useVisibleTask$(async ({ cleanup, track }) => {
+    const hot = await index.tryCreateHotContext(void 0, [
+      "/"
+    ]);
+    if (!hot) {
+      throw new Error("Vite Hot Context not connected");
+    }
+    context.setViteClientContext(hot);
+    client.createClientRpc(getClientRpcFunctions());
+    track(() => {
+      if (state.isOpen) {
+        const rpc = context.getViteClientRpc();
+        rpc.getAssetsFromPublicDir().then((data) => {
+          state.assets = data;
+        });
+        rpc.getRoutes().then((data) => {
+          const children = data.children || [];
+          const directories = children.filter((child) => child.type === "directory");
+          const values = [
+            {
+              relativePath: "",
+              name: "index",
+              type: index_esm.Type.DIRECTORY,
+              path: "",
+              isSymbolicLink: false,
+              children: void 0
+            },
+            ...directories
+          ];
+          state.routes = core.noSerialize(values);
+        });
+        rpc.getQwikPackages().then((data) => {
+          state.npmPackages = data;
+        });
+      }
+    });
+    const handleKeyPress = (e) => {
+      if (e.key === "`" && e.metaKey) {
+        state.isOpen = !state.isOpen;
+      }
+      if (e.key === "Escape" && state.isOpen) {
+        state.isOpen = false;
+      }
+    };
+    const handleClickOutside = (e) => {
+      if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
+        state.isOpen = false;
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    window.addEventListener("mousedown", handleClickOutside);
+    cleanup(() => {
+      window.removeEventListener("keydown", handleKeyPress);
+      window.removeEventListener("mousedown", handleClickOutside);
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: {
+      "devtools-container": true,
+      "devtools-open": state.isOpen
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: {
+          "devtools-toggle": true,
+          "is-open": state.isOpen
+        },
+        onClick$: () => state.isOpen = !state.isOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+          width: 20,
+          height: 20,
+          src: "https://qwik.dev/logos/qwik-logo.svg",
+          alt: "Qwik Logo",
+          class: "toggle-icon"
+        })
+      }),
+      state.isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        ref: panelRef,
+        class: "devtools-panel",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "devtools-tabs",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "overview"
+                },
+                onClick$: () => state.activeTab = "overview",
+                title: "Overview",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiBoltOutline, {
+                  width: 20,
+                  height: 20
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "components"
+                },
+                onClick$: () => state.activeTab = "components",
+                title: "Components",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
+                  width: 20,
+                  height: 20
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "routes"
+                },
+                onClick$: () => state.activeTab = "routes",
+                title: "Routes",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
+                  width: 20,
+                  height: 20
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "state"
+                },
+                onClick$: () => state.activeTab = "state",
+                title: "State",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                      d: "M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7zm0 2a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5z",
+                      fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                      d: "M8 20v1h8v-1H8z",
+                      fill: "currentColor"
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "assets"
+                },
+                onClick$: () => state.activeTab = "assets",
+                title: "Assets",
+                children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
+                  width: 20,
+                  height: 20
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "devtools-content",
+            children: [
+              state.activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "tab-content overview",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "header-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "title-container",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("img", {
+                            width: 32,
+                            height: 32,
+                            src: "https://qwik.dev/logos/qwik-logo.svg",
+                            alt: "Qwik Logo",
+                            class: "qwik-logo"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("h1", {
+                            children: "Qwik DevTools"
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "version",
+                        children: [
+                          "v",
+                          state.npmPackages.find(([name]) => name.includes("core"))?.[1] || "0.0.0"
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "metrics-grid",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "metric-card",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "metric-icon",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lu_qwik.LuFolderTree, {
+                              class: "icon"
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "metric-content",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-value",
+                                children: state.routes?.length
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-label",
+                                children: "pages"
+                              })
+                            ]
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "metric-card",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "metric-icon",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiCubeOutline, {
+                              class: "icon"
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "metric-content",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-value",
+                                children: state.assets.length
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-label",
+                                children: "components"
+                              })
+                            ]
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "metric-card",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "metric-icon",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiPhotoOutline, {
+                              class: "icon"
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "metric-content",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-value",
+                                children: state.assets.length || 0
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-label",
+                                children: "assets"
+                              })
+                            ]
+                          })
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "packages-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                        children: "Installed Packages"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        class: "packages-grid",
+                        children: state.npmPackages.map(([name, version]) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                          class: "package-item",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "package-name",
+                              children: name
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                              class: "package-version",
+                              children: [
+                                "v",
+                                version
+                              ]
+                            })
+                          ]
+                        }, name))
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "performance-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                        children: "Performance"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "performance-metrics",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "perf-item",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                children: "SSR to full load"
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: "perf-value",
+                                children: "-"
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "perf-item",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                children: "Page load"
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: "perf-value",
+                                children: "-"
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "perf-item",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                children: "Navigation"
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: "perf-value",
+                                children: "-"
+                              })
+                            ]
+                          })
+                        ]
+                      })
+                    ]
+                  })
+                ]
+              }),
+              state.activeTab === "assets" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "tab-content assets",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "header-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                        children: "Public Assets"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "assets-stats",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                            class: "stat-item",
+                            children: [
+                              "Total Size:",
+                              " ",
+                              (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
+                              " ",
+                              "KB"
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                            class: "stat-item",
+                            children: [
+                              "Count: ",
+                              state.assets?.length || 0
+                            ]
+                          })
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "assets-grid",
+                    children: state.assets?.map((asset) => {
+                      const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+                      const fileExt = asset.path.split(".").pop()?.toUpperCase();
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "asset-card",
+                        children: [
+                          isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "asset-preview",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+                              width: 176,
+                              height: 176,
+                              src: asset.publicPath,
+                              alt: asset.path
+                            })
+                          }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "file-preview",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                              class: "file-ext",
+                              children: fileExt
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "asset-info",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "asset-path",
+                                title: asset.path,
+                                children: asset.path.split("/").pop()
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                                class: "asset-meta",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                                    class: "asset-size",
+                                    children: [
+                                      (asset.size / 1024).toFixed(2),
+                                      " KB"
+                                    ]
+                                  }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                    class: "asset-type",
+                                    children: fileExt
+                                  })
+                                ]
+                              })
+                            ]
+                          })
+                        ]
+                      }, asset.filePath);
+                    })
+                  })
+                ]
+              }),
+              state.activeTab === "components" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "tab-content",
+                children: /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                  children: "Components"
+                })
+              }),
+              state.activeTab === "routes" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "tab-content",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                    children: "Application Routes"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "routes-table",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "table-header",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Route Path"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Name"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Middleware"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Layout"
+                          })
+                        ]
+                      }),
+                      state.routes?.map((route, i) => {
+                        const children = route.children || [];
+                        const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
+                        return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                          class: "table-row",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: location.url.pathname === "/" && route.relativePath === "" || location.url.pathname === `/${route.relativePath}/` ? "active-route" : "",
+                                children: route.relativePath === "" ? "/" : `/${route.relativePath}/`
+                              })
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: route.name
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: "-"
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: layout && i > 0 ? "custom-layout" : "",
+                                children: layout && i > 0 ? `${route.relativePath}/layout` : "default"
+                              })
+                            })
+                          ]
+                        }, route.relativePath);
+                      })
+                    ]
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+exports.QwikDevtools = QwikDevtools;