Merge pull request #7588 from QwikDev/v2-docs-improv

wmertens · web-flow · commit d7421f125eb2 · 2025-05-14T11:05:48.000+02:00
feat(docs): add vnode tree &amp; state to html tab
diff --git a/packages/docs/src/components/code-block/code-block.tsx b/packages/docs/src/components/code-block/code-block.tsx
@@ -15,7 +15,7 @@ import styles from './code-block.css?inline';
 import { CopyCode } from '../copy-code/copy-code-block';
 interface CodeBlockProps {
   path?: string;
-  language?: 'markup' | 'css' | 'javascript' | 'json' | 'jsx' | 'tsx';
+  language?: 'markup' | 'css' | 'javascript' | 'json' | 'jsx' | 'tsx' | 'clike';
   code: string;
   pathInView$?: QRL<(name: string) => void>;
   observerRootId?: string;
diff --git a/packages/docs/src/repl/repl-output-panel.tsx b/packages/docs/src/repl/repl-output-panel.tsx
@@ -1,16 +1,68 @@
 import { component$, useComputed$ } from '@qwik.dev/core';
 import { CodeBlock } from '../components/code-block/code-block';
 import { ReplOutputModules } from './repl-output-modules';
-import { ReplOutputSymbols } from './repl-output-symbols';
+import { ReplOutputSegments } from './repl-output-segments';
 import { ReplTabButton } from './repl-tab-button';
 import { ReplTabButtons } from './repl-tab-buttons';
 import type { ReplAppInput, ReplStore } from './types';
+import { _deserialize, _getDomContainer } from '@qwik.dev/core/internal';
+import { _dumpState, _preprocessState, _vnode_toString } from '@qwik.dev/core/internal';
 
 export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => {
   const diagnosticsLen = useComputed$(
     () => store.diagnostics.length + store.monacoDiagnostics.length
   );
 
+  const domContainerFromResultHtml = useComputed$(() => {
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(store.htmlResult.rawHtml, 'text/html');
+      return _getDomContainer(doc.documentElement);
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  });
+
+  const parsedState = useComputed$(() => {
+    try {
+      const container = domContainerFromResultHtml.value;
+      const doc = container!.element;
+      const qwikStates = doc.querySelectorAll('script[type="qwik/state"]');
+      if (qwikStates.length !== 0) {
+        const data = qwikStates[qwikStates.length - 1];
+        const origState = JSON.parse(data?.textContent || '[]');
+        _preprocessState(origState, container as any);
+        return origState
+          ? _dumpState(origState, false, '', null)
+              //remove first new line
+              .replace(/\n/, '')
+          : 'No state found';
+      }
+      return 'No state found';
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  });
+
+  const vdomTree = useComputed$(() => {
+    try {
+      const container = domContainerFromResultHtml.value;
+      return _vnode_toString.call(
+        container!.rootVNode as any,
+        Number.MAX_SAFE_INTEGER,
+        '',
+        true,
+        false,
+        false
+      );
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  });
+
   return (
     <div class="repl-panel repl-output-panel">
       <ReplTabButtons>
@@ -34,10 +86,10 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
 
         {store.enableClientOutput ? (
           <ReplTabButton
-            text="Symbols"
-            isActive={store.selectedOutputPanel === 'symbols'}
+            text="Segments"
+            isActive={store.selectedOutputPanel === 'segments'}
             onClick$={async () => {
-              store.selectedOutputPanel = 'symbols';
+              store.selectedOutputPanel = 'segments';
             }}
           />
         ) : null}
@@ -103,13 +155,31 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
         </div>
 
         {store.selectedOutputPanel === 'html' ? (
-          <div class="output-result output-html">
-            <CodeBlock language="markup" code={store.html} />
+          <div class="output-result output-html flex flex-col gap-2">
+            <div>
+              <span class="code-block-info">HTML</span>
+              <CodeBlock
+                language="markup"
+                code={store.htmlResult.prettyHtml || store.htmlResult.rawHtml}
+              />
+            </div>
+            {parsedState.value ? (
+              <div>
+                <span class="code-block-info">Parsed State</span>
+                <CodeBlock language="clike" code={parsedState.value} />
+              </div>
+            ) : null}
+            {vdomTree.value ? (
+              <div>
+                <span class="code-block-info">VNode Tree</span>
+                <CodeBlock language="markup" code={vdomTree.value} />
+              </div>
+            ) : null}
           </div>
         ) : null}
 
-        {store.selectedOutputPanel === 'symbols' ? (
-          <ReplOutputSymbols outputs={store.transformedModules} />
+        {store.selectedOutputPanel === 'segments' ? (
+          <ReplOutputSegments outputs={store.transformedModules} />
         ) : null}
 
         {store.selectedOutputPanel === 'clientBundles' ? (
diff --git a/packages/docs/src/repl/repl-output-segments.tsx b/packages/docs/src/repl/repl-output-segments.tsx
@@ -3,7 +3,7 @@ import type { TransformModule } from '@qwik.dev/core/optimizer';
 import { CodeBlock } from '../components/code-block/code-block';
 const FILE_MODULE_DIV_ID = 'file-modules-symbol';
 
-export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps) => {
+export const ReplOutputSegments = component$(({ outputs }: ReplOutputSegmentsProps) => {
   const selectedPath = useSignal(outputs.length ? outputs[0].path : '');
   const pathInView$ = $((path: string) => {
     selectedPath.value = path;
@@ -12,7 +12,7 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
   return (
     <div class="output-result output-modules">
       <div class="file-tree">
-        <div class="file-tree-header">Symbols</div>
+        <div class="file-tree-header">Segments</div>
         <div class="file-tree-items">
           {outputs.map((o, i) => (
             <div key={o.path}>
@@ -68,6 +68,6 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
   );
 });
 
-interface ReplOutputSymbolsProps {
+interface ReplOutputSegmentsProps {
   outputs: TransformModule[];
 }
diff --git a/packages/docs/src/repl/repl-output-update.ts b/packages/docs/src/repl/repl-output-update.ts
@@ -30,12 +30,13 @@ const matchByPath = (a: any, b: any) => a.path === b.path;
 
 export const updateReplOutput = async (store: ReplStore, result: ReplResult) => {
   deepUpdate(store.diagnostics, result.diagnostics);
+  if (store.htmlResult.rawHtml !== result.htmlResult.rawHtml) {
+    store.htmlResult.rawHtml = result.htmlResult.rawHtml;
+    store.htmlResult.prettyHtml = result.htmlResult.prettyHtml;
+  }
 
   if (result.diagnostics.length === 0) {
-    if (store.html !== result.html) {
-      store.html = result.html;
-    }
-
+    deepUpdate(store.htmlResult, result.htmlResult);
     deepUpdate(store.transformedModules, result.transformedModules, matchByPath);
     deepUpdate(store.clientBundles, result.clientBundles, matchByPath);
     deepUpdate(store.ssrModules, result.ssrModules, matchByPath);
diff --git a/packages/docs/src/repl/repl.css b/packages/docs/src/repl/repl.css
@@ -199,6 +199,15 @@
   overflow: auto;
 }
 
+.output-html .code-block-info {
+  display: block;
+  font-weight: bold;
+  background-color: rgb(33 104 170 / 15%);
+  padding: 5px 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .output-html pre {
   height: 100%;
 }
diff --git a/packages/docs/src/repl/repl.tsx b/packages/docs/src/repl/repl.tsx
@@ -27,7 +27,10 @@ export const Repl = component$((props: ReplProps) => {
       clientId: Math.round(Math.random() * Number.MAX_SAFE_INTEGER)
         .toString(36)
         .toLowerCase(),
-      html: '',
+      htmlResult: {
+        rawHtml: '',
+        prettyHtml: '',
+      },
       transformedModules: [],
       clientBundles: [],
       ssrModules: [],
diff --git a/packages/docs/src/repl/types.ts b/packages/docs/src/repl/types.ts
@@ -27,7 +27,7 @@ export interface ReplInputOptions extends Omit<QwikRollupPluginOptions, 'srcDir'
 
 export interface ReplStore {
   clientId: string;
-  html: string;
+  htmlResult: ReplHTMLResult;
   transformedModules: TransformModule[];
   clientBundles: ReplModuleOutput[];
   ssrModules: ReplModuleOutput[];
@@ -112,7 +112,7 @@ export interface ReplEvent {
 export interface ReplResult extends ReplMessageBase {
   type: 'result';
   buildId: number;
-  html: string;
+  htmlResult: ReplHTMLResult;
   transformedModules: TransformModule[];
   clientBundles: ReplModuleOutput[];
   ssrModules: ReplModuleOutput[];
@@ -121,10 +121,16 @@ export interface ReplResult extends ReplMessageBase {
   events: ReplEvent[];
 }
 
+export interface ReplHTMLResult {
+  rawHtml: string;
+  prettyHtml: string;
+}
+
 export type OutputPanel =
   | 'app'
   | 'html'
-  | 'symbols'
+  | 'state'
+  | 'segments'
   | 'clientBundles'
   | 'serverModules'
   | 'diagnostics';
diff --git a/packages/docs/src/repl/worker/app-ssr-html.ts b/packages/docs/src/repl/worker/app-ssr-html.ts
@@ -82,7 +82,7 @@ export const appSsrHtml = async (options: ReplInputOptions, cache: Cache, result
   console.error = error;
   console.debug = debug;
 
-  result.html = ssrResult.html;
+  result.htmlResult.rawHtml = ssrResult.html;
 
   result.events.push({
     kind: 'pause',
@@ -94,12 +94,12 @@ export const appSsrHtml = async (options: ReplInputOptions, cache: Cache, result
 
   if (options.buildMode !== 'production') {
     try {
-      const html = await self.prettier?.format(result.html, {
+      const html = await self.prettier?.format(result.htmlResult.rawHtml, {
         parser: 'html',
         plugins: self.prettierPlugins,
       });
       if (html) {
-        result.html = html;
+        result.htmlResult.prettyHtml = html;
       }
     } catch (e) {
       console.error(e);
diff --git a/packages/docs/src/repl/worker/app-update.ts b/packages/docs/src/repl/worker/app-update.ts
@@ -15,7 +15,10 @@ export const appUpdate = async (
     type: 'result',
     clientId,
     buildId: options.buildId,
-    html: '',
+    htmlResult: {
+      rawHtml: '',
+      prettyHtml: '',
+    },
     transformedModules: [],
     clientBundles: [],
     manifest: undefined,
diff --git a/packages/qwik/src/core/client/vnode.ts b/packages/qwik/src/core/client/vnode.ts
@@ -1718,12 +1718,14 @@ export const vnode_getNode = (vnode: VNode | null): Element | Text | null => {
   return vnode[TextVNodeProps.node]!;
 };
 
+/** @internal */
 export function vnode_toString(
   this: VNode | null,
   depth: number = 20,
   offset: string = '',
   materialize: boolean = false,
-  siblings = false
+  siblings = false,
+  colorize: boolean = true
 ): string {
   let vnode = this;
   if (depth === 0) {
@@ -1736,6 +1738,8 @@ export function vnode_toString(
     return 'undefined';
   }
   const strings: string[] = [];
+  const NAME_COL_PREFIX = '\x1b[34m';
+  const NAME_COL_SUFFIX = '\x1b[0m';
   do {
     if (vnode_isTextVNode(vnode)) {
       strings.push(qwikDebugToString(vnode_getText(vnode)));
@@ -1749,12 +1753,16 @@ export function vnode_toString(
         }
       });
       const name =
-        VirtualTypeName[vnode_getAttr(vnode, DEBUG_TYPE) || VirtualType.Virtual] ||
-        VirtualTypeName[VirtualType.Virtual];
+        (colorize ? NAME_COL_PREFIX : '') +
+        (VirtualTypeName[vnode_getAttr(vnode, DEBUG_TYPE) || VirtualType.Virtual] ||
+          VirtualTypeName[VirtualType.Virtual]) +
+        (colorize ? NAME_COL_SUFFIX : '');
       strings.push('<' + name + attrs.join('') + '>');
       const child = vnode_getFirstChild(vnode);
       child &&
-        strings.push('  ' + vnode_toString.call(child, depth - 1, offset + '  ', true, true));
+        strings.push(
+          '  ' + vnode_toString.call(child, depth - 1, offset + '  ', true, true, colorize)
+        );
       strings.push('</' + name + '>');
     } else if (vnode_isElementVNode(vnode)) {
       const tag = vnode_getElementName(vnode);
@@ -1782,7 +1790,9 @@ export function vnode_toString(
       if (vnode_isMaterialized(vnode) || materialize) {
         const child = vnode_getFirstChild(vnode);
         child &&
-          strings.push('  ' + vnode_toString.call(child, depth - 1, offset + '  ', true, true));
+          strings.push(
+            '  ' + vnode_toString.call(child, depth - 1, offset + '  ', true, true, colorize)
+          );
       } else {
         strings.push('  <!-- not materialized --!>');
       }
diff --git a/packages/qwik/src/core/internal.ts b/packages/qwik/src/core/internal.ts
diff --git a/packages/qwik/src/core/qwik.core.api.md b/packages/qwik/src/core/qwik.core.api.md
diff --git a/packages/qwik/src/core/shared/shared-serialization.ts b/packages/qwik/src/core/shared/shared-serialization.ts
diff --git a/packages/qwik/src/core/shared/types.ts b/packages/qwik/src/core/shared/types.ts
