@qwik.dev/devtools 0.0.1

package/src/devtools.tsx

@@ -0,0 +1,411 @@
+import {
+  component$,
+  useSignal,
+  useStore,
+  useVisibleTask$,
+  noSerialize,
+  NoSerialize,
+  useStyles$,
+} from '@qwik.dev/core';
+import { tryCreateHotContext } from 'vite-hot-client';
+import {
+  HiBoltOutline,
+  HiCubeOutline,
+  HiPhotoOutline,
+} from '@qwikest/icons/heroicons';
+import { LuFolderTree } from '@qwikest/icons/lucide';
+import {
+  createClientRpc,
+  getViteClientRpc,
+  setViteClientContext,
+  type NpmInfo,
+  type AssetInfo,
+  type RoutesInfo,
+  RouteType,
+} from './kit';
+// import { useLocation } from '@qwik.dev/router';
+import styles from './devtools.css?inline';
+function getClientRpcFunctions() {
+  return {
+    healthCheck: () => true,
+  };
+}
+
+interface State {
+  isOpen: boolean;
+  activeTab: 'overview' | 'components' | 'routes' | 'state' | 'assets';
+  npmPackages: NpmInfo;
+  assets: AssetInfo[];
+  routes: NoSerialize<RoutesInfo[]>;
+}
+
+export const QwikDevtools = component$(() => {
+  useStyles$(styles);
+  const state = useStore<State>({
+    isOpen: false,
+    activeTab: 'overview',
+    npmPackages: [],
+    assets: [],
+    routes: undefined,
+  });
+  const panelRef = useSignal<HTMLDivElement>();
+  const location = {
+    url: {
+      pathname: '/',
+    },
+  };
+
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(async ({ cleanup, track }) => {
+    const hot = await tryCreateHotContext(undefined, ['/']);
+
+    if (!hot) {
+      throw new Error('Vite Hot Context not connected');
+    }
+
+    setViteClientContext(hot);
+    createClientRpc(getClientRpcFunctions());
+
+    track(() => {
+      if (state.isOpen) {
+        const rpc = getViteClientRpc();
+        rpc.getAssetsFromPublicDir().then((data) => {
+          state.assets = data;
+        });
+        rpc.getRoutes().then((data: RoutesInfo) => {
+          const children: RoutesInfo[] = data.children || [];
+          const directories: RoutesInfo[] = children.filter(
+            (child) => child.type === 'directory',
+          );
+
+          const values: RoutesInfo[] = [
+            {
+              relativePath: '',
+              name: 'index',
+              type: RouteType.DIRECTORY,
+              path: '',
+              isSymbolicLink: false,
+              children: undefined,
+            },
+            ...directories,
+          ];
+
+          console.log(values, noSerialize(values));
+
+          state.routes = noSerialize(values);
+        });
+
+        rpc.getQwikPackages().then((data: NpmInfo) => {
+          state.npmPackages = data;
+        });
+      }
+    });
+
+    // Add keyboard shortcut to toggle devtools
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === '`' && e.metaKey) {
+        state.isOpen = !state.isOpen;
+      }
+      // Add Escape key to close
+      if (e.key === 'Escape' && state.isOpen) {
+        state.isOpen = false;
+      }
+    };
+
+    // Handle click outside
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        state.isOpen &&
+        panelRef.value &&
+        !panelRef.value.contains(e.target as Node)
+      ) {
+        state.isOpen = false;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    window.addEventListener('mousedown', handleClickOutside);
+
+    cleanup(() => {
+      window.removeEventListener('keydown', handleKeyPress);
+      window.removeEventListener('mousedown', handleClickOutside);
+    });
+  });
+
+  return (
+    <div
+      class={{
+        'devtools-container': true,
+        'devtools-open': state.isOpen,
+      }}
+    >
+      <div
+        class={{
+          'devtools-toggle': true,
+          'is-open': state.isOpen,
+        }}
+        onClick$={() => (state.isOpen = !state.isOpen)}
+      >
+        <img
+          width={20}
+          height={20}
+          src="https://qwik.dev/logos/qwik-logo.svg"
+          alt="Qwik Logo"
+          class="toggle-icon"
+        />
+      </div>
+
+      {state.isOpen && (
+        <div ref={panelRef} class="devtools-panel">
+          <div class="devtools-tabs">
+            <button
+              class={{ 'tab-active': state.activeTab === 'overview' }}
+              onClick$={() => (state.activeTab = 'overview')}
+              title="Overview"
+            >
+              <HiBoltOutline width={20} height={20} />
+            </button>
+            <button
+              class={{ 'tab-active': state.activeTab === 'components' }}
+              onClick$={() => (state.activeTab = 'components')}
+              title="Components"
+            >
+              <HiCubeOutline width={20} height={20} />
+            </button>
+            <button
+              class={{ 'tab-active': state.activeTab === 'routes' }}
+              onClick$={() => (state.activeTab = 'routes')}
+              title="Routes"
+            >
+              <LuFolderTree width={20} height={20} />
+            </button>
+            <button
+              class={{ 'tab-active': state.activeTab === 'state' }}
+              onClick$={() => (state.activeTab = 'state')}
+              title="State"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7zm0 2a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5z"
+                  fill="currentColor"
+                />
+                <path d="M8 20v1h8v-1H8z" fill="currentColor" />
+              </svg>
+            </button>
+            <button
+              class={{ 'tab-active': state.activeTab === 'assets' }}
+              onClick$={() => (state.activeTab = 'assets')}
+              title="Assets"
+            >
+              <HiPhotoOutline width={20} height={20} />
+            </button>
+          </div>
+          <div class="devtools-content">
+            {state.activeTab === 'overview' && (
+              <div class="tab-content overview">
+                <div class="header-section">
+                  <div class="title-container">
+                    <img
+                      width={32}
+                      height={32}
+                      src="https://qwik.dev/logos/qwik-logo.svg"
+                      alt="Qwik Logo"
+                      class="qwik-logo"
+                    />
+                    <h1>Qwik DevTools</h1>
+                  </div>
+                  <div class="version">
+                    v
+                    {state.npmPackages.find(([name]) =>
+                      name.includes('core'),
+                    )?.[1] || '0.0.0'}
+                  </div>
+                </div>
+                <div class="metrics-grid">
+                  <div class="metric-card">
+                    <div class="metric-icon">
+                      <LuFolderTree class="icon" />
+                    </div>
+                    <div class="metric-content">
+                      <div class="metric-value">{state.routes?.length}</div>
+                      <div class="metric-label">pages</div>
+                    </div>
+                  </div>
+
+                  <div class="metric-card">
+                    <div class="metric-icon">
+                      <HiCubeOutline class="icon" />
+                    </div>
+                    <div class="metric-content">
+                      <div class="metric-value">{state.assets.length}</div>
+                      <div class="metric-label">components</div>
+                    </div>
+                  </div>
+
+                  <div class="metric-card">
+                    <div class="metric-icon">
+                      <HiPhotoOutline class="icon" />
+                    </div>
+                    <div class="metric-content">
+                      <div class="metric-value">{state.assets.length || 0}</div>
+                      <div class="metric-label">assets</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="packages-section">
+                  <h3>Installed Packages</h3>
+                  <div class="packages-grid">
+                    {state.npmPackages.map(([name, version]) => (
+                      <div key={name} class="package-item">
+                        <div class="package-name">{name}</div>
+                        <div class="package-version">v{version}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div class="performance-section">
+                  <h3>Performance</h3>
+                  <div class="performance-metrics">
+                    <div class="perf-item">
+                      <span>SSR to full load</span>
+                      <span class="perf-value">-</span>
+                    </div>
+                    <div class="perf-item">
+                      <span>Page load</span>
+                      <span class="perf-value">-</span>
+                    </div>
+                    <div class="perf-item">
+                      <span>Navigation</span>
+                      <span class="perf-value">-</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            {state.activeTab === 'assets' && (
+              <div class="tab-content assets">
+                <div class="header-section">
+                  <h3>Public Assets</h3>
+                  <div class="assets-stats">
+                    <span class="stat-item">
+                      Total Size:{' '}
+                      {(
+                        state.assets?.reduce(
+                          (acc, asset) => acc + asset.size,
+                          0,
+                        ) / 1024
+                      ).toFixed(2)}{' '}
+                      KB
+                    </span>
+                    <span class="stat-item">
+                      Count: {state.assets?.length || 0}
+                    </span>
+                  </div>
+                </div>
+                <div class="assets-grid">
+                  {state.assets?.map((asset) => {
+                    const isImage = asset.path.match(
+                      /\.(jpg|jpeg|png|gif|svg|webp)$/i,
+                    );
+                    const fileExt = asset.path.split('.').pop()?.toUpperCase();
+
+                    return (
+                      <div class="asset-card" key={asset.filePath}>
+                        {isImage ? (
+                          <div class="asset-preview">
+                            <img
+                              width={176}
+                              height={176}
+                              src={asset.publicPath}
+                              alt={asset.path}
+                            />
+                          </div>
+                        ) : (
+                          <div class="file-preview">
+                            <span class="file-ext">{fileExt}</span>
+                          </div>
+                        )}
+                        <div class="asset-info">
+                          <div class="asset-path" title={asset.path}>
+                            {asset.path.split('/').pop()}
+                          </div>
+                          <div class="asset-meta">
+                            <span class="asset-size">
+                              {(asset.size / 1024).toFixed(2)} KB
+                            </span>
+                            <span class="asset-type">{fileExt}</span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+            {state.activeTab === 'components' && (
+              <div class="tab-content">
+                <h3>Components</h3>
+              </div>
+            )}
+            {state.activeTab === 'routes' && (
+              <div class="tab-content">
+                <h3>Application Routes</h3>
+                <div class="routes-table">
+                  <div class="table-header">
+                    <div class="col-route">Route Path</div>
+                    <div class="col-route">Name</div>
+                    <div class="col-route">Middleware</div>
+                    <div class="col-route">Layout</div>
+                  </div>
+                  {state.routes?.map((route, i) => {
+                    const children = route.children || [];
+                    const layout =
+                      route.relativePath !== '' &&
+                      route.type === 'directory' &&
+                      children.find((child) => child.name.startsWith('layout'));
+
+                    return (
+                      <div class="table-row" key={route.relativePath}>
+                        <div class="col-route">
+                          <span
+                            class={
+                              location.url.pathname ===
+                              `/${route.relativePath}/`
+                                ? 'active-route'
+                                : ''
+                            }
+                          >
+                            {route.relativePath === ''
+                              ? '/'
+                              : `/${route.relativePath}/`}
+                          </span>
+                        </div>
+                        <div class="col-route">{route.name}</div>
+                        <div class="col-route">-</div>
+                        <div class="col-route">
+                          <span class={layout && i > 0 ? 'custom-layout' : ''}>
+                            {layout && i > 0
+                              ? `${route.relativePath}/layout`
+                              : 'default'}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, type RenderOptions } from "@qwik.dev/core";
+import Root from "./root";
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

package/src/entry.ssr.tsx

@@ -0,0 +1,25 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { manifest } from "@qwik-client-manifest";
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@qwik.dev/core/server";
+import Root from "./root";
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+  });
+}

package/src/index.ts

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

package/src/kit/client.ts

@@ -0,0 +1,21 @@
+import SuperJSON from 'superjson';
+import { ClientFunctions, ServerFunctions } from './types';
+import { createBirpc } from 'birpc';
+import { DEVTOOLS_VITE_MESSAGING_EVENT } from './constants';
+import { getViteClientContext, setViteClientRpc } from './context';
+
+export function createClientRpc(functions: ClientFunctions) {
+  const client = getViteClientContext();
+
+  const rpc = createBirpc<ServerFunctions, ClientFunctions>(functions, {
+    post: (data) =>
+      client.send(DEVTOOLS_VITE_MESSAGING_EVENT, SuperJSON.stringify(data)),
+    on: (fn) =>
+      client.on(DEVTOOLS_VITE_MESSAGING_EVENT, (data) => {
+        fn(SuperJSON.parse(data));
+      }),
+    timeout: 120_000,
+  });
+
+  setViteClientRpc(rpc);
+}

package/src/kit/constants.ts

@@ -0,0 +1 @@
+export const DEVTOOLS_VITE_MESSAGING_EVENT = 'qwik_tools:vite_messaging_event';

package/src/kit/context.ts

@@ -0,0 +1,42 @@
+import { target } from './shared';
+import {
+  ViteClientContext,
+  CLIENT_CTX,
+  SERVER_CTX,
+  ViteServerContext,
+  SERVER_RPC,
+  CLIENT_RPC,
+} from './globals';
+import { ServerRpc, ClientRpc } from './types';
+
+export function getViteClientContext(): ViteClientContext {
+  return target[CLIENT_CTX];
+}
+
+export function setViteClientContext(ctx: ViteClientContext) {
+  target[CLIENT_CTX] = ctx;
+}
+
+export function getViteServerContext() {
+  return target[SERVER_CTX];
+}
+
+export function setViteServerContext(ctx: ViteServerContext) {
+  target[SERVER_CTX] = ctx;
+}
+
+export function getViteServerRpc() {
+  return target[SERVER_RPC];
+}
+
+export function setViteServerRpc(rpc: ServerRpc) {
+  target[SERVER_RPC] = rpc;
+}
+
+export function getViteClientRpc() {
+  return target[CLIENT_RPC];
+}
+
+export function setViteClientRpc(rpc: ClientRpc) {
+  target[CLIENT_RPC] = rpc;
+}

package/src/kit/globals.ts

@@ -0,0 +1,22 @@
+import { ViteDevServer } from 'vite';
+import { ClientRpc, ServerRpc } from './types';
+
+interface EventEmitter {
+  on: (name: string, handler: (data: any) => void) => void;
+  send: (name: string, ...args: any[]) => void;
+}
+
+export interface ViteClientContext extends EventEmitter {}
+export type ViteServerContext = ViteDevServer;
+
+export const CLIENT_CTX = '__qwik_client_ctx__';
+export const SERVER_CTX = '__qwik_server_ctx__';
+export const SERVER_RPC = '__qwik_server_rpc__';
+export const CLIENT_RPC = '__qwik_client_rpc__';
+
+declare global {
+  var __qwik_client_ctx__: ViteClientContext;
+  var __qwik_server_ctx__: ViteServerContext;
+  var __qwik_server_rpc__: ServerRpc;
+  var __qwik_client_rpc__: ClientRpc;
+}

package/src/kit/index.ts

@@ -0,0 +1,4 @@
+export * from './client';
+export * from './server';
+export * from './context';
+export * from './types';

package/src/kit/server.ts

@@ -0,0 +1,21 @@
+import SuperJSON from 'superjson';
+import { ClientFunctions, ServerFunctions } from './types';
+import { createBirpc } from 'birpc';
+import { DEVTOOLS_VITE_MESSAGING_EVENT } from './constants';
+import { setViteServerRpc, getViteServerContext } from './context';
+
+export function createServerRpc(functions: ServerFunctions) {
+  const server = getViteServerContext();
+
+  const rpc = createBirpc<ClientFunctions, ServerFunctions>(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: 120_000,
+  });
+
+  setViteServerRpc(rpc);
+}

package/src/kit/shared.ts

@@ -0,0 +1,11 @@
+export const target = (
+  typeof window !== 'undefined'
+    ? window
+    : typeof globalThis !== 'undefined'
+      ? globalThis
+      : // eslint-disable-next-line no-restricted-globals
+        typeof global !== 'undefined'
+        ? // eslint-disable-next-line no-restricted-globals
+          global
+        : {}
+) as typeof globalThis;

package/src/kit/types.ts

@@ -0,0 +1,48 @@
+import { BirpcReturn } from 'birpc';
+import { type Dree } from 'dree';
+export { Type as RouteType } from 'dree';
+
+export interface ClientFunctions {
+  healthCheck(): boolean;
+}
+
+export interface ServerFunctions {
+  healthCheck(): boolean;
+  getAssetsFromPublicDir: () => Promise<AssetInfo[]>;
+  getRoutes: () => any;
+  getQwikPackages: () => Promise<[string, string][]>;
+}
+
+export type ServerRpc = BirpcReturn<ClientFunctions, ServerFunctions>;
+export type ClientRpc = BirpcReturn<ServerFunctions, ClientFunctions>;
+
+export type AssetType =
+  | 'image'
+  | 'font'
+  | 'video'
+  | 'audio'
+  | 'text'
+  | 'json'
+  | 'wasm'
+  | 'other';
+
+export interface AssetInfo {
+  path: string;
+  type: AssetType;
+  publicPath: string;
+  relativePath: string;
+  filePath: string;
+  size: number;
+  mtime: number;
+}
+
+export interface ImageMeta {
+  width: number;
+  height: number;
+  orientation?: number;
+  type?: string;
+  mimeType?: string;
+}
+
+export type RoutesInfo = Dree;
+export type NpmInfo = [string, string][];