@qwik.dev/devtools 0.0.1 → 0.0.3

package/lib/plugin/index.qwik.cjs

@@ -18,8 +18,8 @@ function qwikDevtools() {
       order: "pre",
       handler(code, id) {
         if (id.endsWith("root.tsx")) {
-          if (!code.includes("@qwik.dev/devtools/component")) {
-            code = `import { QwikDevtools } from '@qwik.dev/devtools/component';
+          if (!code.includes("@qwik.dev/devtools")) {
+            code = `import { QwikDevtools } from '@qwik.dev/devtools';
 ${code}`;
           }
           const match = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);

package/lib/plugin/index.qwik.mjs

@@ -16,8 +16,8 @@ function qwikDevtools() {
       order: "pre",
       handler(code, id) {
         if (id.endsWith("root.tsx")) {
-          if (!code.includes("@qwik.dev/devtools/component")) {
-            code = `import { QwikDevtools } from '@qwik.dev/devtools/component';
+          if (!code.includes("@qwik.dev/devtools")) {
+            code = `import { QwikDevtools } from '@qwik.dev/devtools';
 ${code}`;
           }
           const match = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);

package/lib/utils/location.qwik.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@qwik.dev/core");
+function getCurrentLocation() {
+  if (!core.isBrowser) return "";
+  if (window.location.pathname === "/") return "/";
+  return window.location.pathname.slice(0, -1);
+}
+exports.getCurrentLocation = getCurrentLocation;

package/lib/utils/location.qwik.mjs

@@ -0,0 +1,9 @@
+import { isBrowser } from "@qwik.dev/core";
+function getCurrentLocation() {
+  if (!isBrowser) return "";
+  if (window.location.pathname === "/") return "/";
+  return window.location.pathname.slice(0, -1);
+}
+export {
+  getCurrentLocation
+};

package/lib-types/index.d.ts

@@ -1 +1,2 @@
 export { qwikDevtools } from './plugin';
+export { QwikDevtools } from './devtools';

package/lib-types/utils/location.d.ts

@@ -0,0 +1 @@
+export declare function getCurrentLocation(): string;

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Qwik devtools package",
   "main": "./lib/index.qwik.mjs",
   "exports": {
     ".": {
       "import": "./lib/index.qwik.mjs"
-    },
-    "./component": {
-      "import": "./src/devtools.tsx"
     }
   },
   "files": [
@@ -38,7 +35,6 @@
   },
   "peerDependencies": {
     "@qwik.dev/core": "^2.0.0-alpha.4",
-    "@qwik.dev/router": "^2.0.0-alpha.4",
     "vite": "^6.0.0"
   },
   "dependencies": {
@@ -52,8 +48,6 @@
     "vite-hot-client": "^0.2.4"
   },
   "devDependencies": {
-    "@qwik.dev/core": "^2.0.0-alpha.4",
-    "@qwik.dev/router": "^2.0.0-alpha.4",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",

package/src/devtools.tsx

@@ -23,8 +23,8 @@ import {
   type RoutesInfo,
   RouteType,
 } from './kit';
-// import { useLocation } from '@qwik.dev/router';
 import styles from './devtools.css?inline';
+import { getCurrentLocation } from './utils/location';
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true,
@@ -49,11 +49,7 @@ export const QwikDevtools = component$(() => {
     routes: undefined,
   });
   const panelRef = useSignal<HTMLDivElement>();
-  const location = {
-    url: {
-      pathname: '/',
-    },
-  };
+  const location = getCurrentLocation();
 
   // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(async ({ cleanup, track }) => {
@@ -90,8 +86,6 @@ export const QwikDevtools = component$(() => {
             ...directories,
           ];
 
-          console.log(values, noSerialize(values));
-
           state.routes = noSerialize(values);
         });
 
@@ -377,8 +371,7 @@ export const QwikDevtools = component$(() => {
                         <div class="col-route">
                           <span
                             class={
-                              location.url.pathname ===
-                              `/${route.relativePath}/`
+                              location === `/${route.relativePath}`
                                 ? 'active-route'
                                 : ''
                             }

package/src/index.ts

@@ -1 +1,2 @@
 export { qwikDevtools } from './plugin';
+export { QwikDevtools } from './devtools';

package/src/plugin/index.ts

@@ -16,9 +16,9 @@ export function qwikDevtools(): Plugin {
         // Only transform the root component file
         if (id.endsWith('root.tsx')) {
           // Check if QwikDevtools import already exists
-          if (!code.includes('@qwik.dev/devtools/component')) {
+          if (!code.includes('@qwik.dev/devtools')) {
             // Add import for QwikDevtools using the correct package name
-            code = `import { QwikDevtools } from '@qwik.dev/devtools/component';\n${code}`;
+            code = `import { QwikDevtools } from '@qwik.dev/devtools';\n${code}`;
           }
 
           // Find the closing body tag and inject the QwikDevtools component before it

package/src/utils/location.ts

@@ -0,0 +1,9 @@
+import { isBrowser } from '@qwik.dev/core';
+
+export function getCurrentLocation() {
+  if (!isBrowser) return '';
+
+  if (window.location.pathname === '/') return '/';
+
+  return window.location.pathname.slice(0, -1);
+}