@qwik.dev/devtools 0.0.2 → 0.0.4

package/package.json

@@ -1,68 +1,49 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.0.2",
+  "version": "0.0.4",
+  "license": "MIT",
+  "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",
-  "main": "./lib/index.qwik.mjs",
+  "qwik": "./dist/component/index.qwik.mjs",
   "exports": {
     ".": {
-      "import": "./lib/index.qwik.mjs"
+      "import": "./dist/plugin/index.mjs",
+      "types": "./dist/plugin/index.d.ts"
     },
     "./component": {
-      "import": "./src/devtools.tsx"
+      "import": "./dist/component/index.qwik.mjs",
+      "require": "./dist/component/index.qwik.cjs",
+      "types": "./dist/component/lib-types/index.d.ts"
     }
   },
   "files": [
-    "src",
-    "lib",
-    "lib-types"
+    "dist/**"
   ],
-  "engines": {
-    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-  },
-  "private": false,
-  "type": "module",
   "scripts": {
-    "build": "qwik build",
-    "build.lib": "vite build --mode lib",
-    "build.types": "tsc --emitDeclarationOnly",
-    "dev:ssr": "vite --mode ssr",
-    "dev": "nodemon --watch src -e tsx,ts,css --exec 'npm run build.lib'",
-    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check .",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "release": "np",
-    "start": "vite --open --mode ssr",
-    "test": "echo \"No test specified\" && exit 0",
-    "qwik": "qwik"
+    "playground": "pnpm --filter playground dev",
+    "build": "tsx scripts/build-devtools.ts"
   },
   "peerDependencies": {
+    "vite": "^6.0.7",
     "@qwik.dev/core": "^2.0.0-alpha.4",
-    "@qwik.dev/router": "^2.0.0-alpha.4",
-    "vite": "^6.0.0"
+    "@qwik.dev/router": "^2.0.0-alpha.4"
   },
   "dependencies": {
-    "image-meta": "^0.2.1",
     "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": {
-    "@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",
-    "eslint-plugin-qwik": "2.0.0-alpha.3",
-    "np": "^8.0.4",
-    "prettier": "3.3.3",
-    "typescript": "5.4.5",
-    "vite": "5.4.10",
-    "vite-tsconfig-paths": "^4.2.1",
-    "cpy-cli": "^5.0.0"
-  }
+    "tsx": "^4.19.2",
+    "@types/node": "^22.10.5"
+  },
+  "private": false,
+  "keywords": [
+    "qwik",
+    "devtools",
+    "plugin"
+  ],
+  "packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
 }

package/lib/index.qwik.cjs

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./plugin/index.qwik.cjs");
-exports.qwikDevtools = index.qwikDevtools;

package/lib/index.qwik.mjs

@@ -1,4 +0,0 @@
-import { qwikDevtools } from "./plugin/index.qwik.mjs";
-export {
-  qwikDevtools
-};

package/lib/kit/context.qwik.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const shared = require("./shared.qwik.cjs");
-const globals = require("./globals.qwik.cjs");
-function getViteServerContext() {
-  return shared.target[globals.SERVER_CTX];
-}
-function setViteServerContext(ctx) {
-  shared.target[globals.SERVER_CTX] = ctx;
-}
-function setViteServerRpc(rpc) {
-  shared.target[globals.SERVER_RPC] = rpc;
-}
-exports.getViteServerContext = getViteServerContext;
-exports.setViteServerContext = setViteServerContext;
-exports.setViteServerRpc = setViteServerRpc;

package/lib/kit/context.qwik.mjs

@@ -1,16 +0,0 @@
-import { target } from "./shared.qwik.mjs";
-import { SERVER_CTX, SERVER_RPC } from "./globals.qwik.mjs";
-function getViteServerContext() {
-  return target[SERVER_CTX];
-}
-function setViteServerContext(ctx) {
-  target[SERVER_CTX] = ctx;
-}
-function setViteServerRpc(rpc) {
-  target[SERVER_RPC] = rpc;
-}
-export {
-  getViteServerContext,
-  setViteServerContext,
-  setViteServerRpc
-};

package/lib/kit/globals.qwik.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SERVER_CTX = "__qwik_server_ctx__";
-const SERVER_RPC = "__qwik_server_rpc__";
-exports.SERVER_CTX = SERVER_CTX;
-exports.SERVER_RPC = SERVER_RPC;

package/lib/kit/globals.qwik.mjs

@@ -1,6 +0,0 @@
-const SERVER_CTX = "__qwik_server_ctx__";
-const SERVER_RPC = "__qwik_server_rpc__";
-export {
-  SERVER_CTX,
-  SERVER_RPC
-};

package/lib/kit/server.qwik.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SuperJSON = require("superjson");
-const birpc = require("birpc");
-const constants = require("./constants.qwik.cjs");
-const context = require("./context.qwik.cjs");
-function createServerRpc(functions) {
-  const server = context.getViteServerContext();
-  const rpc = birpc.createBirpc(functions, {
-    post: (data) => server.ws.send(constants.DEVTOOLS_VITE_MESSAGING_EVENT, SuperJSON.stringify(data)),
-    on: (fn) => server.ws.on(constants.DEVTOOLS_VITE_MESSAGING_EVENT, (data) => {
-      fn(SuperJSON.parse(data));
-    }),
-    timeout: 12e4
-  });
-  context.setViteServerRpc(rpc);
-}
-exports.createServerRpc = createServerRpc;

package/lib/kit/server.qwik.mjs

@@ -1,18 +0,0 @@
-import SuperJSON from "superjson";
-import { createBirpc } from "birpc";
-import { DEVTOOLS_VITE_MESSAGING_EVENT } from "./constants.qwik.mjs";
-import { setViteServerRpc, getViteServerContext } from "./context.qwik.mjs";
-function createServerRpc(functions) {
-  const server = getViteServerContext();
-  const rpc = createBirpc(functions, {
-    post: (data) => server.ws.send(DEVTOOLS_VITE_MESSAGING_EVENT, SuperJSON.stringify(data)),
-    on: (fn) => server.ws.on(DEVTOOLS_VITE_MESSAGING_EVENT, (data) => {
-      fn(SuperJSON.parse(data));
-    }),
-    timeout: 12e4
-  });
-  setViteServerRpc(rpc);
-}
-export {
-  createServerRpc
-};

package/lib/plugin/assets/index.qwik.cjs

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fsp = require("node:fs/promises");
-const fg = require("fast-glob");
-const posix = require("node:path/posix");
-function getAssetsFunctions({ config }) {
-  let cache = null;
-  async function getAssetsFromPublicDir() {
-    const dir = posix.resolve(config.root);
-    const baseURL = config.base;
-    const publicDir = config.publicDir;
-    const relativePublicDir = publicDir === "" ? "" : `${posix.relative(dir, publicDir)}/`;
-    const files = await fg([
-      // image
-      "**/*.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)",
-      // video
-      "**/*.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)",
-      // audio
-      "**/*.(mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)",
-      // font
-      "**/*.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)",
-      // text
-      "**/*.(json|json5|jsonc|txt|text|tsx|jsx|md|mdx|mdc|markdown|yaml|yml|toml)",
-      // wasm
-      "**/*.wasm"
-    ], {
-      cwd: publicDir,
-      onlyFiles: true,
-      caseSensitiveMatch: false,
-      ignore: [
-        "**/node_modules/**",
-        "**/dist/**",
-        "**/package-lock.*",
-        "**/pnpm-lock.*",
-        "**/pnpm-workspace.*"
-      ]
-    });
-    cache = await Promise.all(files.map(async (relativePath) => {
-      const filePath = posix.resolve(publicDir, relativePath);
-      const stat = await fsp.lstat(filePath);
-      const path = relativePath.replace(relativePublicDir, "");
-      return {
-        path,
-        relativePath,
-        publicPath: posix.join(baseURL, path),
-        filePath,
-        type: guessType(relativePath),
-        size: stat.size,
-        mtime: stat.mtimeMs
-      };
-    }));
-    return cache;
-  }
-  return {
-    getAssetsFromPublicDir
-  };
-}
-function guessType(path) {
-  if (/\.(?:png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i.test(path)) return "image";
-  if (/\.(?:mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i.test(path)) return "video";
-  if (/\.(?:mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i.test(path)) return "audio";
-  if (/\.(?:woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i.test(path)) return "font";
-  if (/\.(?:json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown|ya?ml|toml)/i.test(path)) return "text";
-  if (/\.wasm/i.test(path)) return "wasm";
-  return "other";
-}
-exports.getAssetsFunctions = getAssetsFunctions;

package/lib/plugin/assets/index.qwik.mjs

@@ -1,67 +0,0 @@
-import fsp from "node:fs/promises";
-import fg from "fast-glob";
-import { resolve, relative, join } from "node:path/posix";
-function getAssetsFunctions({ config }) {
-  let cache = null;
-  async function getAssetsFromPublicDir() {
-    const dir = resolve(config.root);
-    const baseURL = config.base;
-    const publicDir = config.publicDir;
-    const relativePublicDir = publicDir === "" ? "" : `${relative(dir, publicDir)}/`;
-    const files = await fg([
-      // image
-      "**/*.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)",
-      // video
-      "**/*.(mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)",
-      // audio
-      "**/*.(mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)",
-      // font
-      "**/*.(woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)",
-      // text
-      "**/*.(json|json5|jsonc|txt|text|tsx|jsx|md|mdx|mdc|markdown|yaml|yml|toml)",
-      // wasm
-      "**/*.wasm"
-    ], {
-      cwd: publicDir,
-      onlyFiles: true,
-      caseSensitiveMatch: false,
-      ignore: [
-        "**/node_modules/**",
-        "**/dist/**",
-        "**/package-lock.*",
-        "**/pnpm-lock.*",
-        "**/pnpm-workspace.*"
-      ]
-    });
-    cache = await Promise.all(files.map(async (relativePath) => {
-      const filePath = resolve(publicDir, relativePath);
-      const stat = await fsp.lstat(filePath);
-      const path = relativePath.replace(relativePublicDir, "");
-      return {
-        path,
-        relativePath,
-        publicPath: join(baseURL, path),
-        filePath,
-        type: guessType(relativePath),
-        size: stat.size,
-        mtime: stat.mtimeMs
-      };
-    }));
-    return cache;
-  }
-  return {
-    getAssetsFromPublicDir
-  };
-}
-function guessType(path) {
-  if (/\.(?:png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i.test(path)) return "image";
-  if (/\.(?:mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i.test(path)) return "video";
-  if (/\.(?:mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i.test(path)) return "audio";
-  if (/\.(?:woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i.test(path)) return "font";
-  if (/\.(?:json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown|ya?ml|toml)/i.test(path)) return "text";
-  if (/\.wasm/i.test(path)) return "wasm";
-  return "other";
-}
-export {
-  getAssetsFunctions
-};

package/lib/plugin/index.qwik.cjs

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./rpc/index.qwik.cjs");
-require("superjson");
-require("birpc");
-const context = require("../kit/context.qwik.cjs");
-const server = require("../kit/server.qwik.cjs");
-require("dree");
-function qwikDevtools() {
-  let _config;
-  return {
-    name: "vite-plugin-qwik-devtools",
-    apply: "serve",
-    configResolved(viteConfig) {
-      _config = viteConfig;
-    },
-    transform: {
-      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';
-${code}`;
-          }
-          const match = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);
-          if (match) {
-            const bodyContent = match[1];
-            const newBodyContent = bodyContent.replace(/{!isDev && <ServiceWorkerRegister \/>}/, `{!isDev && <ServiceWorkerRegister />}
-        {isDev && <QwikDevtools />}`);
-            code = code.replace(bodyContent, newBodyContent);
-          }
-          return {
-            code,
-            map: null
-          };
-        }
-      }
-    },
-    configureServer(server$1) {
-      context.setViteServerContext(server$1);
-      const rpcFunctions = index.getServerFunctions({
-        server: server$1,
-        config: _config
-      });
-      server.createServerRpc(rpcFunctions);
-    }
-  };
-}
-exports.qwikDevtools = qwikDevtools;

package/lib/plugin/index.qwik.mjs

@@ -1,49 +0,0 @@
-import { getServerFunctions } from "./rpc/index.qwik.mjs";
-import "superjson";
-import "birpc";
-import { setViteServerContext } from "../kit/context.qwik.mjs";
-import { createServerRpc } from "../kit/server.qwik.mjs";
-import "dree";
-function qwikDevtools() {
-  let _config;
-  return {
-    name: "vite-plugin-qwik-devtools",
-    apply: "serve",
-    configResolved(viteConfig) {
-      _config = viteConfig;
-    },
-    transform: {
-      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';
-${code}`;
-          }
-          const match = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);
-          if (match) {
-            const bodyContent = match[1];
-            const newBodyContent = bodyContent.replace(/{!isDev && <ServiceWorkerRegister \/>}/, `{!isDev && <ServiceWorkerRegister />}
-        {isDev && <QwikDevtools />}`);
-            code = code.replace(bodyContent, newBodyContent);
-          }
-          return {
-            code,
-            map: null
-          };
-        }
-      }
-    },
-    configureServer(server) {
-      setViteServerContext(server);
-      const rpcFunctions = getServerFunctions({
-        server,
-        config: _config
-      });
-      createServerRpc(rpcFunctions);
-    }
-  };
-}
-export {
-  qwikDevtools
-};

package/lib/plugin/npm/index.qwik.cjs

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fsp = require("node:fs/promises");
-function getNpmFunctions({ config }) {
-  return {
-    async getQwikPackages() {
-      const pathToPackageJson = config.configFileDependencies.find((file) => file.endsWith("package.json"));
-      if (!pathToPackageJson) return [];
-      try {
-        const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
-        const pkg = JSON.parse(pkgJson);
-        return Object.entries(pkg.devDependencies).filter(([key]) => /@qwik/i.test(key));
-      } catch (error) {
-        return [];
-      }
-    }
-  };
-}
-exports.getNpmFunctions = getNpmFunctions;

package/lib/plugin/npm/index.qwik.mjs

@@ -1,19 +0,0 @@
-import fsp from "node:fs/promises";
-function getNpmFunctions({ config }) {
-  return {
-    async getQwikPackages() {
-      const pathToPackageJson = config.configFileDependencies.find((file) => file.endsWith("package.json"));
-      if (!pathToPackageJson) return [];
-      try {
-        const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
-        const pkg = JSON.parse(pkgJson);
-        return Object.entries(pkg.devDependencies).filter(([key]) => /@qwik/i.test(key));
-      } catch (error) {
-        return [];
-      }
-    }
-  };
-}
-export {
-  getNpmFunctions
-};

package/lib/plugin/routes/index.qwik.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dree = require("dree");
-function getRouteFunctions({ config }) {
-  const routesDir = `${config.root}/src/routes`;
-  return {
-    getRoutes: async () => {
-      const routes = await dree.scanAsync(routesDir, {
-        extensions: [
-          "tsx"
-        ]
-      });
-      return routes;
-    }
-  };
-}
-exports.getRouteFunctions = getRouteFunctions;

package/lib/plugin/routes/index.qwik.mjs

@@ -1,17 +0,0 @@
-import { scanAsync } from "dree";
-function getRouteFunctions({ config }) {
-  const routesDir = `${config.root}/src/routes`;
-  return {
-    getRoutes: async () => {
-      const routes = await scanAsync(routesDir, {
-        extensions: [
-          "tsx"
-        ]
-      });
-      return routes;
-    }
-  };
-}
-export {
-  getRouteFunctions
-};

package/lib/plugin/rpc/index.qwik.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../assets/index.qwik.cjs");
-const index$1 = require("../routes/index.qwik.cjs");
-const index$2 = require("../npm/index.qwik.cjs");
-function getServerFunctions(ctx) {
-  return {
-    healthCheck: () => true,
-    ...index.getAssetsFunctions(ctx),
-    ...index$1.getRouteFunctions(ctx),
-    ...index$2.getNpmFunctions(ctx)
-  };
-}
-exports.getServerFunctions = getServerFunctions;

package/lib/plugin/rpc/index.qwik.mjs

@@ -1,14 +0,0 @@
-import { getAssetsFunctions } from "../assets/index.qwik.mjs";
-import { getRouteFunctions } from "../routes/index.qwik.mjs";
-import { getNpmFunctions } from "../npm/index.qwik.mjs";
-function getServerFunctions(ctx) {
-  return {
-    healthCheck: () => true,
-    ...getAssetsFunctions(ctx),
-    ...getRouteFunctions(ctx),
-    ...getNpmFunctions(ctx)
-  };
-}
-export {
-  getServerFunctions
-};

package/lib-types/index.d.ts

@@ -1 +0,0 @@
-export { qwikDevtools } from './plugin';

package/lib-types/plugin/assets/index.d.ts

@@ -1,5 +0,0 @@
-import { ServerContext } from '../types';
-import { AssetInfo } from '../../kit/types';
-export declare function getAssetsFunctions({ config }: ServerContext): {
-    getAssetsFromPublicDir: () => Promise<AssetInfo[]>;
-};

package/lib-types/plugin/index.d.ts

@@ -1,2 +0,0 @@
-import { type Plugin } from 'vite';
-export declare function qwikDevtools(): Plugin;

package/lib-types/plugin/npm/index.d.ts

@@ -1,5 +0,0 @@
-import { ServerContext } from '../types';
-import { NpmInfo } from '../../kit/types';
-export declare function getNpmFunctions({ config }: ServerContext): {
-    getQwikPackages(): Promise<NpmInfo>;
-};

package/lib-types/plugin/routes/index.d.ts

@@ -1,5 +0,0 @@
-import { RoutesInfo } from '../../kit/types';
-import { ServerContext } from '../types';
-export declare function getRouteFunctions({ config }: ServerContext): {
-    getRoutes: () => Promise<RoutesInfo>;
-};

package/lib-types/plugin/rpc/index.d.ts

@@ -1,3 +0,0 @@
-import { ServerFunctions } from '../../kit/types';
-import { ServerContext } from '../types';
-export declare function getServerFunctions(ctx: ServerContext): ServerFunctions;

package/lib-types/plugin/types/index.d.ts

@@ -1,5 +0,0 @@
-import { ViteDevServer, ResolvedConfig } from 'vite';
-export interface ServerContext {
-    server: ViteDevServer;
-    config: ResolvedConfig;
-}