fix: divide deps and new build

Author: byte-barista

package.json

@@ -1,10 +1,42 @@
 {
-  "name": "devtools",
-  "version": "1.0.0",
+  "name": "@qwik.dev/devtools",
+  "version": "0.0.3",
   "license": "MIT",
+  "main": "./dist/plugin/index.mjs",
+  "description": "Qwik devtools package",
+  "qwik": "./dist/component/index.qwik.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/plugin/index.mjs",
+      "types": "./dist/plugin/index.d.ts"
+    },
+    "./component": {
+      "import": "./dist/component/index.qwik.mjs",
+      "require": "./dist/component/index.qwik.cjs",
+      "types": "./dist/component/lib-types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
-    "build:devtools": "pnpm --filter @qwik.dev/devtools build",
-    "playground": "pnpm --filter playground dev"
+    "playground": "pnpm --filter playground dev",
+    "build:devtools": "tsx scripts/build-devtools.ts"
+  },
+  "peerDependencies": {
+    "vite": "^6.0.7",
+    "@qwik.dev/core": "^2.0.0-alpha.4"
+  },
+  "dependencies": {
+    "birpc": "^0.2.19",
+    "superjson": "^2.2.2",
+    "dree": "^5.1.5",
+    "@qwikest/icons": "^0.0.13",
+    "vite-hot-client": "^0.2.4"
+  },
+  "devDependencies": {
+    "tsx": "^4.19.2",
+    "@types/node": "^22.10.5"
   },
   "private": false,
   "keywords": [

packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@qwik.dev/devtools",
-  "version": "0.0.3",
+  "name": "@devtools/component",
+  "version": "1.0.0",
   "description": "Qwik devtools package",
   "main": "./lib/index.qwik.mjs",
   "exports": {
@@ -9,7 +9,6 @@
     }
   },
   "files": [
-    "src",
     "lib",
     "lib-types"
   ],
@@ -35,19 +34,15 @@
   },
   "peerDependencies": {
     "@qwik.dev/core": "^2.0.0-alpha.4",
-    "vite": "^6.0.0"
+    "@qwik.dev/router": "^2.0.0-alpha.4"
   },
-  "dependencies": {
-    "image-meta": "^0.2.1",
+  "devDependencies": {
+    "@devtools/kit": "workspace:*",
     "birpc": "^0.2.19",
-    "perfect-debounce": "^1.0.0",
-    "fast-glob": "^3.3.2",
     "superjson": "^2.2.2",
     "dree": "^5.1.5",
     "@qwikest/icons": "^0.0.13",
-    "vite-hot-client": "^0.2.4"
-  },
-  "devDependencies": {
+    "vite-hot-client": "^0.2.4",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",

packages/devtools/src/devtools.tsx

@@ -22,9 +22,10 @@ import {
   type AssetInfo,
   type RoutesInfo,
   RouteType,
-} from './kit';
+} from '@devtools/kit';
 import styles from './devtools.css?inline';
-import { getCurrentLocation } from './utils/location';
+import { useLocation } from '@qwik.dev/router';
+
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true,
@@ -49,7 +50,7 @@ export const QwikDevtools = component$(() => {
     routes: undefined,
   });
   const panelRef = useSignal<HTMLDivElement>();
-  const location = getCurrentLocation();
+  const location = useLocation();
 
   // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(async ({ cleanup, track }) => {
@@ -371,7 +372,10 @@ export const QwikDevtools = component$(() => {
                         <div class="col-route">
                           <span
                             class={
-                              location === `/${route.relativePath}`
+                              (location.url.pathname === '/' &&
+                                route.relativePath === '') ||
+                              location.url.pathname ===
+                                `/${route.relativePath}/`
                                 ? 'active-route'
                                 : ''
                             }

packages/devtools/src/index.ts

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

packages/devtools/tsconfig.json

@@ -7,16 +7,16 @@
     "jsx": "react-jsx",
     "jsxImportSource": "@qwik.dev/core",
     "strict": true,
-    "declaration": true,
     "declarationDir": "lib-types",
-    "resolveJsonModule": true,
     "moduleResolution": "Bundler",
+    "declaration": true,
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "isolatedModules": true,
     "types": ["vite/client"],
     "paths": {
-      "@qwik/devtools-kit": ["../../packages/devtools-kit"]
+      "@devtools/kit": ["../kit/src/index.ts"]
     }
   },
   "include": ["src"]

packages/devtools/vite.config.mts

@@ -25,8 +25,8 @@ export default defineConfig(() => {
         // externalize deps that shouldn't be bundled into the library
         external: [
           /^node:.*/,
-          ...excludeAll(dependencies),
           ...excludeAll(peerDependencies),
+          ...excludeAll(dependencies),
         ],
       },
     },

packages/kit/build.config.ts

@@ -0,0 +1,10 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  entries: ['src/index'],
+  externals: [],
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+});

packages/kit/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@devtools/kit",
+  "version": "1.0.0",
+  "description": "Qwik devtools package",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "private": false,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "superjson": "^2.2.2",
+    "birpc": "^0.2.19",
+    "dree": "^5.1.5"
+  },
+  "peerDependencies": {
+    "vite": "^6.0.7"
+  },
+  "devDependencies": {
+    "@types/eslint": "8.56.10",
+    "unbuild": "^3.2.0",
+    "@types/node": "20.14.11",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/parser": "7.16.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-qwik": "2.0.0-alpha.3",
+    "np": "^8.0.4",
+    "prettier": "3.3.3",
+    "typescript": "5.4.5",
+    "vite-tsconfig-paths": "^4.2.1",
+    "cpy-cli": "^5.0.0"
+  }
+}

packages/devtools/src/kit/client.ts packages/kit/src/client.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "strict": true
+  }
+}

packages/devtools/src/kit/constants.ts packages/kit/src/constants.ts

@@ -27,7 +27,8 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@qwik.dev/devtools": "workspace:*",
+    "@devtools/plugin": "workspace:*",
+    "@devtools/component": "workspace:*",
     "@qwik.dev/core": "^2.0.0-alpha.4",
     "@qwik.dev/router": "^2.0.0-alpha.3",
     "@types/eslint": "8.56.10",
@@ -38,10 +39,7 @@
     "eslint-plugin-qwik": "2.0.0-alpha.3",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
-    "vite": "5.4.10",
-    "vite-tsconfig-paths": "^4.2.1",
-    "vite-hot-client": "^0.2.4",
-    "birpc": "^0.2.19",
-    "dree": "^5.1.5"
+    "vite": "^6.0.7",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }

packages/devtools/src/kit/context.ts packages/kit/src/context.ts

@@ -6,7 +6,7 @@ import { qwikVite } from '@qwik.dev/core/optimizer';
 import { qwikRouter } from '@qwik.dev/router/vite';
 import { defineConfig, ResolvedConfig, type UserConfig, Plugin } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { qwikDevtools } from '@qwik.dev/devtools';
+import { qwikDevtools } from '@devtools/plugin';
 import pkg from './package.json';
 type PkgDep = Record<string, string>;
 const { dependencies = {}, devDependencies = {} } = pkg as any as {

packages/devtools/src/kit/globals.ts packages/kit/src/globals.ts

@@ -0,0 +1,16 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  entries: ['./src/index.ts'],
+  externals: ['vite'],
+  declaration: true,
+  clean: true,
+  failOnWarn: false,
+  rollup: {
+    output: {
+      dir: '../../dist/plugin',
+    },
+    inlineDependencies: true,
+    emitCJS: true,
+  },
+});

packages/devtools/src/kit/index.ts packages/kit/src/index.ts

@@ -0,0 +1,39 @@
+{
+  "name": "@devtools/plugin",
+  "version": "1.0.0",
+  "description": "Qwik devtools plugin",
+  "main": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "unbuild",
+    "stub": "tsup --watch"
+  },
+  "devDependencies": {
+    "@devtools/kit": "workspace:*",
+    "dree": "^5.1.5",
+    "fast-glob": "^3.3.2",
+    "image-meta": "^0.2.1",
+    "birpc": "^0.2.19",
+    "vite": "^6.0.7",
+    "unbuild": "^3.2.0",
+    "tsup": "^8.3.5",
+    "@types/eslint": "8.56.10",
+    "@types/node": "20.14.11",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/parser": "7.16.1",
+    "eslint": "8.57.0",
+    "np": "^8.0.4",
+    "prettier": "3.3.3",
+    "typescript": "5.4.5",
+    "cpy-cli": "^5.0.0"
+  }
+}

packages/devtools/src/kit/server.ts packages/kit/src/server.ts

@@ -2,7 +2,7 @@ import fsp from 'node:fs/promises';
 import fg from 'fast-glob';
 import { resolve, relative, join } from 'node:path/posix';
 import { ServerContext } from '../types';
-import { AssetType, AssetInfo } from '../../kit/types';
+import { AssetType, AssetInfo } from '@devtools/kit';
 
 // const defaultAllowedExtensions = [
 //   'png',

packages/devtools/src/kit/shared.ts packages/kit/src/shared.ts

@@ -1,6 +1,6 @@
 import { ResolvedConfig, type Plugin } from 'vite';
 import { getServerFunctions } from './rpc';
-import { createServerRpc, setViteServerContext } from '../kit';
+import { createServerRpc, setViteServerContext } from '@devtools/kit';
 
 export function qwikDevtools(): Plugin {
   let _config: ResolvedConfig;
@@ -13,12 +13,15 @@ export function qwikDevtools(): Plugin {
     transform: {
       order: 'pre',
       handler(code, id) {
+        const isDev = _config.env.DEV;
+
         // Only transform the root component file
         if (id.endsWith('root.tsx')) {
+          const importPath = '@qwik.dev/devtools/component';
           // Check if QwikDevtools import already exists
-          if (!code.includes('@qwik.dev/devtools')) {
+          if (!code.includes(importPath)) {
             // Add import for QwikDevtools using the correct package name
-            code = `import { QwikDevtools } from '@qwik.dev/devtools';\n${code}`;
+            code = `import { QwikDevtools } from '${importPath}';\n${code}`;
           }
 
           // Find the closing body tag and inject the QwikDevtools component before it

packages/devtools/src/kit/types.ts packages/kit/src/types.ts

@@ -1,12 +1,12 @@
 import { ServerContext } from '../types';
 import fsp from 'node:fs/promises';
-import { NpmInfo } from '../../kit/types';
+import { NpmInfo } from '@devtools/kit';
 
 export function getNpmFunctions({ config }: ServerContext) {
   return {
     async getQwikPackages(): Promise<NpmInfo> {
-      const pathToPackageJson = config.configFileDependencies.find((file) =>
-        file.endsWith('package.json'),
+      const pathToPackageJson = config.configFileDependencies.find(
+        (file: string) => file.endsWith('package.json'),
       );
       if (!pathToPackageJson) return [];
 

packages/kit/tsconfig.json

@@ -1,4 +1,4 @@
-import { RoutesInfo } from '../../kit/types';
+import { RoutesInfo } from '@devtools/kit';
 import { ServerContext } from '../types';
 import { scanAsync } from 'dree';
 

packages/playgrounds/package.json

@@ -1,4 +1,4 @@
-import { ServerFunctions } from '../../kit/types';
+import { ServerFunctions } from '@devtools/kit';
 import { getAssetsFunctions } from '../assets';
 import { ServerContext } from '../types';
 import { getRouteFunctions } from '../routes';

packages/playgrounds/vite.config.mts

@@ -1,4 +1,4 @@
-import { ViteDevServer, ResolvedConfig } from 'vite';
+import { type ViteDevServer, type ResolvedConfig } from 'vite';
 
 export interface ServerContext {
   server: ViteDevServer;

packages/plugin/build.config.ts

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "declaration": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "types": ["vite/client"],
+    "paths": {
+      "@devtools/kit": ["../../packages/devtools-kit"]
+    }
+  },
+  "include": ["src"],
+}
+