feat(website): #171, add parse tree visualizer in panel

src/baseSQLWorker.ts

@@ -3,6 +3,7 @@ import { worker } from './fillers/monaco-editor-core';
 import { Suggestions, ParseError, EntityContext } from 'dt-sql-parser';
 import { Position } from './fillers/monaco-editor-core';
 import { SemanticContext } from 'dt-sql-parser/dist/parser/common/types';
+import type { SerializedTreeNode } from './languageService';
 
 export interface ICreateData {
 	languageId: string;
@@ -24,14 +25,43 @@ export abstract class BaseSQLWorker {
 		return Promise.resolve([]);
 	}
 
-	async parserTreeToString(code: string): Promise<string> {
-		if (code) {
-			const parser = this.parser.createParser(code);
-			const parseTree = parser.program();
-			const result = parseTree.toStringTree(parser);
-			return Promise.resolve(result);
+	async getSerializedParseTree(code: string): Promise<SerializedTreeNode | null> {
+		if (!code) return Promise.resolve(null);
+
+		const parser = this.parser.createParser(code);
+		const parseTree = parser.program();
+		const ruleNames = parser.ruleNames;
+		const tokenTypeMap = parser.getTokenTypeMap();
+		const tokenNameMap = new Map();
+
+		for (const [name, tokenType] of tokenTypeMap.entries()) {
+			tokenNameMap.set(tokenType, name);
+		}
+
+		function serializeNode(node: any): SerializedTreeNode | null {
+			if (!node) return null;
+
+			const isRuleNode = !node.symbol;
+
+			const serializedNode: SerializedTreeNode = {
+				ruleName: isRuleNode ? ruleNames[node.ruleIndex] : node.constructor.name,
+				text: isRuleNode
+					? ''
+					: tokenNameMap.get(node.symbol.tokenSource?.type) + ': ' + node.symbol.text,
+				children: []
+			};
+
+			for (let i = 0; i < node.getChildCount(); i++) {
+				const child = node.getChild(i);
+				if (child) {
+					serializedNode.children.push(serializeNode(child)!);
+				}
+			}
+
+			return serializedNode;
 		}
-		return Promise.resolve('');
+
+		return Promise.resolve(serializeNode(parseTree));
 	}
 
 	async doCompletion(code: string, position: Position): Promise<Suggestions | null> {

src/languageService.ts

@@ -7,6 +7,12 @@ import { WorkerManager } from './workerManager';
 import { BaseSQLWorker } from './baseSQLWorker';
 import { Position, Uri, editor } from './fillers/monaco-editor-core';
 
+export interface SerializedTreeNode {
+	ruleName: string;
+	text?: string;
+	children: SerializedTreeNode[];
+}
+
 export class LanguageService<T extends BaseSQLWorker = BaseSQLWorker> {
 	private workerClients: Map<string, WorkerManager<T>> = new Map();
 
@@ -20,13 +26,13 @@ export class LanguageService<T extends BaseSQLWorker = BaseSQLWorker> {
 		});
 	}
 
-	public parserTreeToString(language: string, model: editor.IReadOnlyModel | string) {
+	public getSerializedParseTree(language: string, model: editor.IReadOnlyModel | string) {
 		const text = typeof model === 'string' ? model : model.getValue();
 		const uri = typeof model === 'string' ? void 0 : model.uri;
 
 		const clientWorker = this.getClientWorker(language, uri as Uri);
 		return clientWorker.then((worker) => {
-			return worker.parserTreeToString(text);
+			return worker.getSerializedParseTree(text);
 		});
 	}
 

website/package.json

@@ -23,10 +23,14 @@
 		"react-dom": "^18.2.0",
 		"reflect-metadata": "^0.1.13",
 		"tsyringe": "^4.8.0",
+		"html-to-image": "^1.11.13",
 		"vscode-oniguruma": "^2.0.1",
-		"vscode-textmate": "^9.2.0"
+		"vscode-textmate": "^9.2.0",
+		"@xyflow/react": "^12.4.2",
+		"dagre": "^0.8.5"
 	},
 	"devDependencies": {
+		"@types/dagre": "^0.7.52",
 		"@types/node": "^20.2.5",
 		"@types/react": "^18.0.37",
 		"@types/react-dom": "^18.0.11",