feat(docs): add vnode tree & state to html tab

Author: Varixo

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;

packages/docs/src/repl/repl-output-panel.tsx

@@ -5,12 +5,50 @@ import { ReplOutputSymbols } from './repl-output-symbols';
 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 } from '../../../qwik/src/core/shared/shared-serialization.ts';
+import { vnode_toString } from '../../../qwik/src/core/client/vnode.ts';
 
 export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => {
   const diagnosticsLen = useComputed$(
     () => store.diagnostics.length + store.monacoDiagnostics.length
   );
 
+  const domContainerFromResultHtml = useComputed$(() => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(store.htmlResult.rawHtml, 'text/html');
+    return _getDomContainer(doc.documentElement);
+  });
+
+  const parsedState = useComputed$(() => {
+    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';
+  });
+
+  const vdomTree = useComputed$(() => {
+    const container = domContainerFromResultHtml.value;
+    return vnode_toString.call(
+      container.rootVNode as any,
+      Number.MAX_SAFE_INTEGER,
+      '',
+      true,
+      false,
+      false
+    );
+  });
+
   return (
     <div class="repl-panel repl-output-panel">
       <ReplTabButtons>
@@ -103,8 +141,19 @@ 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} />
+            </div>
+            <div>
+              <span class="code-block-info">Parsed State</span>
+              <CodeBlock language="clike" code={parsedState.value} />
+            </div>
+            <div>
+              <span class="code-block-info">VNode Tree</span>
+              <CodeBlock language="markup" code={vdomTree.value} />
+            </div>
           </div>
         ) : null}
 

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);

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%;
 }

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: [],

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,9 +121,15 @@ export interface ReplResult extends ReplMessageBase {
   events: ReplEvent[];
 }
 
+export interface ReplHTMLResult {
+  rawHtml: string;
+  prettyHtml: string;
+}
+
 export type OutputPanel =
   | 'app'
   | 'html'
+  | 'state'
   | 'symbols'
   | 'clientBundles'
   | 'serverModules'

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);

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,

packages/qwik/src/core/client/types.ts

@@ -69,7 +69,7 @@ export interface QDocument extends Document {
  *       converted into separate text nodes.
  *   - If Element: It means that the element tag attributes have not yet been read from the DOM.
  *
- * Inflation and materialization are not the same, they are two independent things.
+ * Inflation and materialization are not the same, they are two independent things.-
  *
  * @internal
  */

packages/qwik/src/core/client/vnode.ts

@@ -1723,7 +1723,8 @@ export function vnode_toString(
   depth: number = 20,
   offset: string = '',
   materialize: boolean = false,
-  siblings = false
+  siblings = false,
+  colorize: boolean = true
 ): string {
   let vnode = this;
   if (depth === 0) {
@@ -1736,6 +1737,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 +1752,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 +1789,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 --!>');
       }