qwik-labs: fix devtools json

Author: wmertens

packages/qwik-labs/compiled-string-plugin.ts

@@ -0,0 +1,49 @@
+import type { Plugin } from 'vite';
+
+const isCompiledStringId = (id: string) => /[?&]compiled-string/.test(id);
+
+export function compiledStringPlugin(): Plugin {
+  return {
+    name: 'compiled-string-plugin',
+
+    resolveId(id) {
+      // Keep the full id if it has our query param
+      if (isCompiledStringId(id)) {
+        return id;
+      }
+      return null;
+    },
+
+    async load(id) {
+      if (isCompiledStringId(id)) {
+        // Extract the actual file path without the query parameter
+        const filePath = id.split('?')[0];
+
+        try {
+          // Let Rollup load the file content with side effects explicitly preserved
+          const result = await this.load({
+            id: filePath,
+            moduleSideEffects: true, // Explicitly mark as having side effects
+          });
+
+          if (!result) {
+            throw new Error(`Failed to load file: ${filePath}`);
+          }
+
+          // The code already contains the "// @preserve-side-effects" comment
+          // which should help preserve side effects, but we'll ensure the resulting
+          // string maintains that marker
+
+          return {
+            code: `export default ${JSON.stringify(result.code)};`,
+            map: null,
+          };
+        } catch (error) {
+          console.error(`Error processing ${filePath}:`, error);
+          return null;
+        }
+      }
+      return null;
+    },
+  };
+}

packages/qwik-labs/src-vite/insights/index.ts

@@ -5,7 +5,7 @@ import { join } from 'node:path';
 import { resolve } from 'path';
 import { type PluginOption } from 'vite';
 
-const logWarn = (message?: any, ...rest) => {
+const logWarn = (message?: any, ...rest: any[]) => {
   // eslint-disable-next-line no-console
   console.warn('\x1b[33m%s\x1b[0m', `qwikInsight()[WARN]: ${message}`, ...rest);
 };

packages/qwik-labs/src/devtools/index.ts

@@ -1,3 +1,2 @@
-import { qwikJsonDebug, runQwikJsonDebug } from './json';
-
-export const devtoolsJsonSRC = `${runQwikJsonDebug}\n${qwikJsonDebug}\nrunQwikJsonDebug(window, document, qwikJsonDebug);`;
+// @ts-expect-error compiled-string-plugin
+export { default as devtoolsJsonSRC } from './json?compiled-string';

packages/qwik-labs/src/devtools/json.ts

@@ -1,6 +1,12 @@
 // IMPORTANT: This file should have no external imports!!!
+// It runs in the browser and is compiled to a string
 
-export function runQwikJsonDebug(window: Window, document: Document, debug: typeof qwikJsonDebug) {
+// required for side effects
+export {};
+
+runQwikJsonDebug(window, document, qwikJsonDebug);
+
+function runQwikJsonDebug(window: Window, document: Document, debug: typeof qwikJsonDebug) {
   const parseQwikJSON = () => {
     const rawData = JSON.parse(document.querySelector('script[type="qwik/json"]')!.textContent!);
     const derivedFns =
@@ -20,11 +26,7 @@ export function runQwikJsonDebug(window: Window, document: Document, debug: type
   }
 }
 
-export function qwikJsonDebug(
-  document: Document,
-  qwikJson: QwikJson,
-  derivedFns: Function[]
-): DebugState {
+function qwikJsonDebug(document: Document, qwikJson: QwikJson, derivedFns: Function[]): DebugState {
   class Base {
     constructor(
       public __id: number,
@@ -434,7 +436,7 @@ export function qwikJsonDebug(
   }
 }
 
-export interface QwikJson {
+interface QwikJson {
   refs: Record<string, string>;
   ctx: Record<
     string,
@@ -448,34 +450,34 @@ export interface QwikJson {
   objs: Array<QwikJsonObjsPrimitives | QwikJsonObjsObj>;
   subs: Array<Array<string>>;
 }
-export type QwikJsonObjsPrimitives = string | boolean | number | null;
-export type QwikJsonObjsObj = Record<string, QwikJsonObjsPrimitives>;
+type QwikJsonObjsPrimitives = string | boolean | number | null;
+type QwikJsonObjsObj = Record<string, QwikJsonObjsPrimitives>;
 
-export interface Base {
+interface Base {
   __id: number;
   __backRefs: any[];
 }
 
-export interface QRL extends Base {
+interface QRL extends Base {
   chunk: string;
   symbol: string;
   capture: any[];
 }
 
-export interface QRefs {
+interface QRefs {
   element: Element;
   refMap: any[];
   listeners: Listener[];
 }
 
-export interface Listener {
+interface Listener {
   event: string;
   qrl: QRL;
 }
 
-export interface SubscriberEffect {}
+interface SubscriberEffect {}
 
-export interface QContext {
+interface QContext {
   element: Node | null;
   props: Record<string, any> | null;
   componentQrl: QRL | null;
@@ -486,39 +488,9 @@ export interface QContext {
   scopeIds: string[] | null;
 }
 
-export interface DebugState {
+interface DebugState {
   refs: Record<string, QRefs>;
   ctx: Record<string, QContext>;
   objs: any[];
   subs: unknown;
 }
-
-export type QwikType =
-  | 'string'
-  | 'number'
-  | 'bigint'
-  | 'boolean'
-  | 'function'
-  | 'undefined'
-  | 'object'
-  | 'symbol'
-  // Qwik custom types
-  | 'QRL'
-  | 'Signal'
-  | 'SignalWrapper'
-  | 'Task'
-  | 'Resource'
-  | 'URL'
-  | 'Date'
-  | 'Regex'
-  | 'Error'
-  | 'DerivedSignal'
-  | 'FormData'
-  | 'URLSearchParams'
-  | 'Component'
-  | 'NoFiniteNumber'
-  | 'JSXNode'
-  | 'BigInt'
-  | 'Set'
-  | 'Map'
-  | 'Document';

packages/qwik-labs/tsconfig.json

@@ -19,5 +19,6 @@
       "@qwik-client-manifest": ["../../qwik/src/server/server-modules.d.ts"]
     }
   },
-  "include": ["src"]
+  "include": ["."],
+  "exclude": ["node_modules", "lib"]
 }

packages/qwik-labs/vite.config.mts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import dtsPlugin from 'vite-plugin-dts';
+import { compiledStringPlugin } from './compiled-string-plugin';
 
 export default defineConfig(() => {
   return {
@@ -15,6 +16,6 @@ export default defineConfig(() => {
         external: ['zod'],
       },
     },
-    plugins: [qwikVite(), dtsPlugin()],
+    plugins: [qwikVite(), dtsPlugin(), compiledStringPlugin()],
   };
 });