@qwik.dev/devtools 0.0.1

package/src/plugin/assets/index.ts

@@ -0,0 +1,126 @@
+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';
+
+// const defaultAllowedExtensions = [
+//   'png',
+//   'jpg',
+//   'jpeg',
+//   'gif',
+//   'svg',
+//   'webp',
+//   'ico',
+//   'mp4',
+//   'ogg',
+//   'mp3',
+//   'wav',
+//   'mov',
+//   'mkv',
+//   'mpg',
+//   'txt',
+//   'ttf',
+//   'woff',
+//   'woff2',
+//   'eot',
+//   'json',
+//   'js',
+//   'jsx',
+//   'ts',
+//   'tsx',
+//   'md',
+//   'mdx',
+//   'vue',
+//   'webm',
+// ];
+
+export function getAssetsFunctions({ config }: ServerContext) {
+  let cache: AssetInfo[] | null = null;
+
+  async function getAssetsFromPublicDir() {
+    const dir = resolve(config.root);
+    const baseURL = config.base;
+
+    // publicDir in ResolvedConfig is an absolute path
+    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);
+        // remove public prefix to resolve vite assets warning
+        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: string): AssetType {
+  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';
+}

package/src/plugin/index.ts

@@ -0,0 +1,50 @@
+import { ResolvedConfig, type Plugin } from 'vite';
+import { getServerFunctions } from './rpc';
+import { createServerRpc, setViteServerContext } from '../kit';
+
+export function qwikDevtools(): Plugin {
+  let _config: ResolvedConfig;
+  return {
+    name: 'vite-plugin-qwik-devtools',
+    apply: 'serve',
+    configResolved(viteConfig) {
+      _config = viteConfig;
+    },
+    transform: {
+      order: 'pre',
+      handler(code, id) {
+        // Only transform the root component file
+        if (id.endsWith('root.tsx')) {
+          // Check if QwikDevtools import already exists
+          if (!code.includes('@qwik.dev/devtools/component')) {
+            // Add import for QwikDevtools using the correct package name
+            code = `import { QwikDevtools } from '@qwik.dev/devtools/component';\n${code}`;
+          }
+
+          // Find the closing body tag and inject the QwikDevtools component before it
+          const match = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);
+          if (match) {
+            const bodyContent = match[1];
+            const newBodyContent = bodyContent.replace(
+              /{!isDev && <ServiceWorkerRegister \/>}/,
+              `{!isDev && <ServiceWorkerRegister />}\n        {isDev && <QwikDevtools />}`,
+            );
+            code = code.replace(bodyContent, newBodyContent);
+          }
+
+          return {
+            code,
+            map: null,
+          };
+        }
+      },
+    },
+    configureServer(server) {
+      setViteServerContext(server);
+
+      const rpcFunctions = getServerFunctions({ server, config: _config });
+
+      createServerRpc(rpcFunctions);
+    },
+  };
+}

package/src/plugin/npm/index.ts

@@ -0,0 +1,24 @@
+import { ServerContext } from '../types';
+import fsp from 'node:fs/promises';
+import { NpmInfo } from '../../kit/types';
+
+export function getNpmFunctions({ config }: ServerContext) {
+  return {
+    async getQwikPackages(): Promise<NpmInfo> {
+      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<string>(pkg.devDependencies).filter(([key]) =>
+          /@qwik/i.test(key),
+        );
+      } catch (error) {
+        return [];
+      }
+    },
+  };
+}

package/src/plugin/routes/index.ts

@@ -0,0 +1,16 @@
+import { RoutesInfo } from '../../kit/types';
+import { ServerContext } from '../types';
+import { scanAsync } from 'dree';
+
+export function getRouteFunctions({ config }: ServerContext) {
+  const routesDir = `${config.root}/src/routes`;
+  return {
+    getRoutes: async (): Promise<RoutesInfo> => {
+      const routes = await scanAsync(routesDir, {
+        extensions: ['tsx'],
+      });
+
+      return routes;
+    },
+  };
+}

package/src/plugin/rpc/index.ts

@@ -0,0 +1,14 @@
+import { ServerFunctions } from '../../kit/types';
+import { getAssetsFunctions } from '../assets';
+import { ServerContext } from '../types';
+import { getRouteFunctions } from '../routes';
+import { getNpmFunctions } from '../npm';
+
+export function getServerFunctions(ctx: ServerContext): ServerFunctions {
+  return {
+    healthCheck: () => true,
+    ...getAssetsFunctions(ctx),
+    ...getRouteFunctions(ctx),
+    ...getNpmFunctions(ctx),
+  };
+}

package/src/plugin/types/index.ts

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

package/src/root.tsx

@@ -0,0 +1,15 @@
+import { QwikDevtools } from './devtools';
+
+export default () => {
+  return (
+    <>
+      <head>
+        <meta charset="utf-8" />
+        <title>Qwik Blank App</title>
+      </head>
+      <body>
+        <QwikDevtools />
+      </body>
+    </>
+  );
+};