@qwik.dev/devtools 0.0.5 → 0.1.0

package/dist/component/devtools.qwik.cjs

@@ -1,537 +0,0 @@
-"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;