@qwik.dev/devtools 0.0.6 → 0.1.1

package/README.md

@@ -0,0 +1,66 @@
+# Qwik DevTools
+
+![Qwik DevTools](https://raw.github.com/QwikDev/devtools/main/assets/screenshot.png)
+
+Enhance your Qwik development experience with DevTools that provide real-time insights into your application, dependencies, and setup.
+
+## Installation
+
+> Qwik DevTools requires **Qwik v2.0.0-alpha.4 or higher**.
+
+```shell copy
+npm install @qwik.dev/devtools -D
+```
+
+```shell copy
+pnpm add @qwik.dev/devtools -D
+```
+
+```shell copy
+yarn add @qwik.dev/devtools -D
+```
+
+## Setup
+
+Add the plugin to your `vite.config.(m)ts`:
+
+```ts copy
+import { qwikDevtools } from '@qwik.dev/devtools';
+
+export default defineConfig({
+  plugins: [
+    qwikRouter(),
+    qwikVite(),
+    tsconfigPaths(),
+    qwikDevtools(), // 👈 Add the plugin here
+  ],
+});
+```
+
+## Features
+
+- 🔍 Route Explorer
+- ⚡️ Dependency Explorer
+- 📊 Asset Explorer
+- 🐞 Debug Tools
+
+## Contribution Guide
+
+Please refer to the [Contribution Guide](./CONTRIBUTING.md). Sharing feedback and feature request with GitHub issues is welcome.
+
+## Community
+
+Join our vibrant community:
+
+- 🐦 Follow [@QwikDev](https://twitter.com/QwikDev) on Twitter
+- 💬 Join our [Discord](https://qwik.dev/chat) community
+- 🌐 Check out [other community groups](https://qwik.dev/ecosystem/#community)
+
+## Related Links
+
+- [📚 Qwik Documentation](https://qwik.dev/)
+- [💬 Discord Chat](https://qwik.dev/chat)
+- [⭐️ Qwik GitHub](https://github.com/QwikDev/qwik)
+- [🐦 @QwikDev](https://twitter.com/QwikDev)
+- [⚡️ Vite](https://vitejs.dev/)
+

package/dist/plugin/index.cjs

@@ -12,6 +12,7 @@ const node_path = require('node:path');
 const node_os = require('node:os');
 const node_crypto = require('node:crypto');
 require('node:fs');
+const child_process = require('child_process');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -9464,6 +9465,22 @@ function getRouteFunctions({ config }) {
   };
 }
 
+async function detectPackageManager(projectRoot) {
+  try {
+    if (await fsp__default.access(require$$0__default$1.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) {
+      return "pnpm";
+    }
+    if (await fsp__default.access(require$$0__default$1.join(projectRoot, "yarn.lock")).then(() => true).catch(() => false)) {
+      return "yarn";
+    }
+    if (await fsp__default.access(require$$0__default$1.join(projectRoot, "package-lock.json")).then(() => true).catch(() => false)) {
+      return "npm";
+    }
+    return "pnpm";
+  } catch {
+    return "pnpm";
+  }
+}
 function getNpmFunctions({ config }) {
   return {
     async getQwikPackages() {
@@ -9480,6 +9497,28 @@ function getNpmFunctions({ config }) {
       } catch (error) {
         return [];
       }
+    },
+    async installPackage(packageName, isDev = true) {
+      try {
+        const projectRoot = require$$0__default$1.dirname(config.configFileDependencies[0]);
+        const pm = await detectPackageManager(projectRoot);
+        const devFlag = isDev ? pm === "npm" ? "--save-dev" : "-D" : "";
+        const command = {
+          npm: `npm install ${devFlag} ${packageName}`,
+          pnpm: `pnpm add ${devFlag} ${packageName}`,
+          yarn: `yarn add ${devFlag} ${packageName}`
+        }[pm];
+        child_process.execSync(command, {
+          cwd: projectRoot,
+          stdio: "pipe"
+        });
+        return { success: true };
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : "Unknown error occurred"
+        };
+      }
     }
   };
 }

package/dist/plugin/index.mjs

@@ -10,6 +10,7 @@ import { resolve as resolve$1, relative as relative$1, basename, extname } from
 import { homedir } from 'node:os';
 import { createHash } from 'node:crypto';
 import 'node:fs';
+import { execSync } from 'child_process';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -9452,6 +9453,22 @@ function getRouteFunctions({ config }) {
   };
 }
 
+async function detectPackageManager(projectRoot) {
+  try {
+    if (await fsp.access(require$$0$1.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) {
+      return "pnpm";
+    }
+    if (await fsp.access(require$$0$1.join(projectRoot, "yarn.lock")).then(() => true).catch(() => false)) {
+      return "yarn";
+    }
+    if (await fsp.access(require$$0$1.join(projectRoot, "package-lock.json")).then(() => true).catch(() => false)) {
+      return "npm";
+    }
+    return "pnpm";
+  } catch {
+    return "pnpm";
+  }
+}
 function getNpmFunctions({ config }) {
   return {
     async getQwikPackages() {
@@ -9468,6 +9485,28 @@ function getNpmFunctions({ config }) {
       } catch (error) {
         return [];
       }
+    },
+    async installPackage(packageName, isDev = true) {
+      try {
+        const projectRoot = require$$0$1.dirname(config.configFileDependencies[0]);
+        const pm = await detectPackageManager(projectRoot);
+        const devFlag = isDev ? pm === "npm" ? "--save-dev" : "-D" : "";
+        const command = {
+          npm: `npm install ${devFlag} ${packageName}`,
+          pnpm: `pnpm add ${devFlag} ${packageName}`,
+          yarn: `yarn add ${devFlag} ${packageName}`
+        }[pm];
+        execSync(command, {
+          cwd: projectRoot,
+          stdio: "pipe"
+        });
+        return { success: true };
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : "Unknown error occurred"
+        };
+      }
     }
   };
 }

package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const DevtoolsButton = core.component$(({ state }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: {
+      "fixed bottom-4 right-4 flex h-9 w-9 origin-center cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md transition-all duration-300 ease-in-out": true,
+      "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": 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: "h-5 w-5 opacity-90 drop-shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-100"
+    })
+  });
+});
+exports.DevtoolsButton = DevtoolsButton;

package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+const DevtoolsButton = component$(({ state }) => {
+  return /* @__PURE__ */ jsx("div", {
+    class: {
+      "fixed bottom-4 right-4 flex h-9 w-9 origin-center cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md transition-all duration-300 ease-in-out": true,
+      "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": state.isOpen
+    },
+    onClick$: () => state.isOpen = !state.isOpen,
+    children: /* @__PURE__ */ jsx("img", {
+      width: 20,
+      height: 20,
+      src: "https://qwik.dev/logos/qwik-logo.svg",
+      alt: "Qwik Logo",
+      class: "h-5 w-5 opacity-90 drop-shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-100"
+    })
+  });
+});
+export {
+  DevtoolsButton
+};

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const DevtoolsContainer = core.component$(() => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "fixed bottom-0 right-0 z-[9999] font-sans",
+    "q:slot": "content",
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+  });
+});
+exports.DevtoolsContainer = DevtoolsContainer;

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+const DevtoolsContainer = component$(() => {
+  return /* @__PURE__ */ jsx("div", {
+    class: "fixed bottom-0 right-0 z-[9999] font-sans",
+    "q:slot": "content",
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  DevtoolsContainer
+};

package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const DevtoolsPanel = core.component$(({ state }) => {
+  const panelRef = core.useSignal();
+  core.useTask$(({ cleanup }) => {
+    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.jsx("div", {
+    ref: panelRef,
+    class: "fixed bottom-8 right-6 flex h-[50vh] w-full translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out md:w-3/5",
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+  });
+});
+exports.DevtoolsPanel = DevtoolsPanel;

package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useTask$, Slot } from "@qwik.dev/core";
+const DevtoolsPanel = component$(({ state }) => {
+  const panelRef = useSignal();
+  useTask$(({ cleanup }) => {
+    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__ */ jsx("div", {
+    ref: panelRef,
+    class: "fixed bottom-8 right-6 flex h-[50vh] w-full translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out md:w-3/5",
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  DevtoolsPanel
+};

package/dist/ui/components/Tab/Tab.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 Tab = core.component$(({ state, id, title }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    onClick$: () => state.activeTab = id,
+    title,
+    class: {
+      "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
+      "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white": state.activeTab !== id,
+      "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35": state.activeTab === id
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+  });
+});
+exports.Tab = Tab;

package/dist/ui/components/Tab/Tab.qwik.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+const Tab = component$(({ state, id, title }) => {
+  return /* @__PURE__ */ jsx("button", {
+    onClick$: () => state.activeTab = id,
+    title,
+    class: {
+      "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
+      "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white": state.activeTab !== id,
+      "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35": state.activeTab === id
+    },
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  Tab
+};

package/dist/ui/components/TabContent/TabContent.qwik.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const TabContent = core.component$(() => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "flex items-center justify-between border-b border-zinc-700 pb-4",
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
+          name: "title"
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
+        name: "content"
+      })
+    ]
+  });
+});
+exports.TabContent = TabContent;

package/dist/ui/components/TabContent/TabContent.qwik.mjs

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+const TabContent = component$(() => {
+  return /* @__PURE__ */ jsxs("div", {
+    class: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "flex items-center justify-between border-b border-zinc-700 pb-4",
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "title"
+        })
+      }),
+      /* @__PURE__ */ jsx(Slot, {
+        name: "content"
+      })
+    ]
+  });
+});
+export {
+  TabContent
+};

package/dist/ui/components/TabTitle/TabTitle.qwik.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const TabTitle = core.component$(({ title }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", {
+    class: "text-xl font-semibold",
+    children: title
+  });
+});
+exports.TabTitle = TabTitle;

package/dist/ui/components/TabTitle/TabTitle.qwik.mjs

@@ -0,0 +1,11 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+const TabTitle = component$(({ title }) => {
+  return /* @__PURE__ */ jsx("h3", {
+    class: "text-xl font-semibold",
+    children: title
+  });
+});
+export {
+  TabTitle
+};