playground: print text for node (#353)

Author: hardfist

website/theme/components/Playground/Editor.tsx

@@ -34,6 +34,55 @@ export const Editor = ({
   const divEl = useRef<HTMLDivElement>(null);
   const editorRef =
     useRef<import('monaco-editor').editor.IStandaloneCodeEditor>(null);
+  const urlUpdateTimer = useRef<number | null>(null);
+
+  function decodeParam(value: string | null): string | null {
+    if (!value) return null;
+    try {
+      return decodeURIComponent(value);
+    } catch {
+      return value;
+    }
+  }
+
+  function getInitialCode(): string {
+    if (typeof window === 'undefined') {
+      return ['let a: any;', 'a.b = 10;'].join('\n');
+    }
+    const { search, hash } = window.location;
+    const searchParams = new URLSearchParams(search);
+    // URLSearchParams.get already decodes percent-encoding
+    const fromSearch = searchParams.get('code');
+    if (fromSearch != null) return fromSearch;
+    // Also support hash like #code=...
+    if (hash && hash.startsWith('#')) {
+      const hashParams = new URLSearchParams(hash.slice(1));
+      const fromHash = hashParams.get('code');
+      if (fromHash != null) return fromHash;
+    }
+    return ['let a: any;', 'a.b = 10;'].join('\n');
+  }
+
+  function scheduleSerializeToUrl(value: string) {
+    if (typeof window === 'undefined') return;
+    if (urlUpdateTimer.current) {
+      window.clearTimeout(urlUpdateTimer.current);
+      urlUpdateTimer.current = null;
+    }
+    urlUpdateTimer.current = window.setTimeout(() => {
+      try {
+        const url = new URL(window.location.href);
+        url.searchParams.set('code', value);
+        // Remove any code=... from hash if present to avoid ambiguity
+        if (url.hash && url.hash.includes('code=')) {
+          url.hash = '';
+        }
+        window.history.replaceState(null, '', url.toString());
+      } catch {
+        // ignore URL update errors
+      }
+    }, 300);
+  }
   // get value from editor using forwardRef
   React.useImperativeHandle(ref, () => ({
     getValue: () => editorRef.current?.getValue(),
@@ -68,15 +117,24 @@ export const Editor = ({
     }
 
     const editor = monaco.editor.create(divEl.current, {
-      value: ['let a: any;', 'a.b = 10;'].join('\n'),
+      value: getInitialCode(),
       language: 'typescript',
       automaticLayout: true,
       scrollBeyondLastLine: false,
     });
+    // Ensure ref is set before first onChange so parent can read value
+    editorRef.current = editor;
+    // Trigger initial onChange + URL sync with initial value
+    {
+      const initialVal = editor.getValue() || '';
+      onChange(initialVal);
+      scheduleSerializeToUrl(initialVal);
+    }
     editor.onDidChangeModelContent(() => {
-      onChange(editor.getValue() || '');
+      const val = editor.getValue() || '';
+      onChange(val);
+      scheduleSerializeToUrl(val);
     });
-    editorRef.current = editor;
 
     return () => {
       editor.dispose();

website/theme/components/Playground/ResultPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './ResultPanel.css';
 
 export interface Diagnostic {
@@ -25,7 +25,61 @@ type TabType = 'lint' | 'fixed' | 'ast' | 'type';
 export const ResultPanel: React.FC<ResultPanelProps> = props => {
   const { diagnostics, ast, error, initialized, fixedCode, typeInfo, loading } =
     props;
-  const [activeTab, setActiveTab] = useState<TabType>('lint');
+  const [activeTab, setActiveTab] = useState<TabType>(() => {
+    if (typeof window === 'undefined') return 'lint';
+    const params = new URLSearchParams(window.location.search);
+    let tab = params.get('tab');
+    if (!tab && window.location.hash) {
+      const hashParams = new URLSearchParams(window.location.hash.slice(1));
+      tab = hashParams.get('tab');
+    }
+    if (tab === 'lint' || tab === 'ast' || tab === 'fixed' || tab === 'type') {
+      return tab as TabType;
+    }
+    return 'lint';
+  });
+
+  // Keep the URL in sync with the selected tab
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const url = new URL(window.location.href);
+      url.searchParams.set('tab', activeTab);
+      if (url.hash && new URLSearchParams(url.hash.slice(1)).has('tab')) {
+        url.hash = '';
+      }
+      window.history.replaceState(null, '', url.toString());
+    } catch {
+      // ignore URL update errors
+    }
+  }, [activeTab]);
+
+  // Respond to browser navigation updating the tab
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const handler = () => {
+      try {
+        const params = new URLSearchParams(window.location.search);
+        let tab = params.get('tab');
+        if (!tab && window.location.hash) {
+          const hashParams = new URLSearchParams(window.location.hash.slice(1));
+          tab = hashParams.get('tab');
+        }
+        if (
+          tab === 'lint' ||
+          tab === 'ast' ||
+          tab === 'fixed' ||
+          tab === 'type'
+        ) {
+          setActiveTab(tab as TabType);
+        }
+      } catch {
+        // ignore
+      }
+    };
+    window.addEventListener('popstate', handler);
+    return () => window.removeEventListener('popstate', handler);
+  }, []);
 
   return (
     <div className="result-panel">

website/theme/components/Playground/index.tsx

@@ -1,4 +1,4 @@
-import React, { use, useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import * as Rslint from '@rslint/wasm';
 import { Editor, EditorRef } from './Editor';
 import { ResultPanel, Diagnostic } from './ResultPanel';
@@ -67,6 +67,7 @@ const Playground: React.FC = () => {
         end: number;
         name?: string;
         children?: ASTNode[];
+        text?: string;
       }
 
       // Generate AST
@@ -75,11 +76,13 @@ const Playground: React.FC = () => {
         const buffer = Uint8Array.from(atob(astBuffer), c => c.charCodeAt(0));
         const source = new RemoteSourceFile(buffer, new TextDecoder());
         // Convert a RemoteNode (from tsgo/rslint-api) to a minimal ESTree node
+
         function RemoteNodeToEstree(node: Node): ASTNode {
           return {
             type: SyntaxKind[node.kind],
             start: node.pos,
             end: node.end,
+            text: node.text,
             children: node.forEachChild((child: Node) => {
               return RemoteNodeToEstree(child);
             }),
@@ -100,9 +103,7 @@ const Playground: React.FC = () => {
     }
   }
 
-  useEffect(() => {
-    runLint();
-  }, []);
+  // Initial lint is triggered by Editor's initial onChange
 
   return (
     <div className="playground-container">