Add boilerplate for AML preview

Author: loicknuchel

extensions/vscode-aml/README.md

@@ -16,7 +16,11 @@ This Visual Studio Code extension provides language support for [AML](https://az
 
 ## Roadmap
 
-- Add parsing errors and auto-complete
+- Add parsing errors
+- auto-complete
+- quick-fixes (code actions)
+- Go-to-definition for relations (cf https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.DocumentSymbolProvider.html)
+- hover info
 - Add diagram preview & Open in Azimutt
 - Add AML support in Markdown
 - Connect to a database
@@ -35,7 +39,7 @@ Here are some interesting VS Code documentation you may find helpful:
 
 - [VS Code extension get started](https://code.visualstudio.com/api/get-started/your-first-extension).
 - [Language Configuration Guide](https://code.visualstudio.com/api/language-extensions/language-configuration-guide)
-- [Syntax Highlight Guide](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)
+- [Syntax Highlight Guide](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide) & [Semantic Highlight Guide](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide)
 - [Snippet Guide](https://code.visualstudio.com/api/language-extensions/snippet-guide)
 
 Tips:

extensions/vscode-aml/package.json

@@ -60,34 +60,47 @@
     ],
     "commands": [
       {
-        "command": "vscode-aml.fromJson",
+        "command": "aml.fromJson",
         "category": "AML",
         "title": "convert JSON to AML"
       },
       {
-        "command": "vscode-aml.fromSQL",
+        "command": "aml.fromSQL",
         "category": "AML",
         "title": "convert SQL to AML"
       },
       {
-        "command": "vscode-aml.convert",
+        "command": "aml.convert",
         "category": "AML",
         "title": "convert AML to"
+      },
+      {
+        "command": "aml.preview",
+        "category": "AML",
+        "title": "preview AML",
+        "icon": "$(open-preview)"
       }
     ],
     "menus": {
       "commandPalette": [
         {
-          "command": "vscode-aml.fromJson",
-          "when": "editorLangId == json"
+          "when": "editorLangId == json",
+          "command": "aml.fromJson"
         },
         {
-          "command": "vscode-aml.fromSQL",
-          "when": "editorLangId == sql"
+          "when": "editorLangId == sql",
+          "command": "aml.fromSQL"
         },
         {
-          "command": "vscode-aml.convert",
-          "when": "editorLangId == aml"
+          "when": "editorLangId == aml",
+          "command": "aml.convert"
+        }
+      ],
+      "editor/title": [
+        {
+          "when": "editorLangId == aml",
+          "command": "aml.preview",
+          "group": "navigation"
         }
       ]
     }

extensions/vscode-aml/src/web/extension.ts

@@ -1,4 +1,4 @@
-import vscode, {TextDocument, TextEditor, TextEditorEdit} from "vscode";
+import vscode, {TextDocument, TextEditor, TextEditorEdit, ViewColumn, WebviewPanel} from "vscode";
 import {ParserError, ParserErrorLevel} from "@azimutt/models";
 import {generateSql, parseSql} from "@azimutt/parser-sql";
 import {
@@ -14,10 +14,26 @@ import {
 } from "@azimutt/aml";
 
 export function activate(context: vscode.ExtensionContext) {
+	let previewPanel: WebviewPanel | undefined = undefined
 	context.subscriptions.push(
-		vscode.commands.registerTextEditorCommand('vscode-aml.fromJson', (editor: TextEditor, edit: TextEditorEdit) => convertJson(editor, edit)),
-		vscode.commands.registerTextEditorCommand('vscode-aml.fromSQL', (editor: TextEditor, edit: TextEditorEdit) => convertSql(editor, edit)),
-		vscode.commands.registerTextEditorCommand('vscode-aml.convert', (editor: TextEditor, edit: TextEditorEdit) => convertAml(editor, edit))
+		vscode.commands.registerTextEditorCommand('aml.fromJson', (editor: TextEditor, edit: TextEditorEdit) => convertJson(editor, edit)),
+		vscode.commands.registerTextEditorCommand('aml.fromSQL', (editor: TextEditor, edit: TextEditorEdit) => convertSql(editor, edit)),
+		vscode.commands.registerTextEditorCommand('aml.convert', (editor: TextEditor, edit: TextEditorEdit) => convertAml(editor, edit)),
+		vscode.commands.registerTextEditorCommand('aml.preview', (editor: TextEditor, edit: TextEditorEdit) => {
+			vscode.window.showInformationMessage('aml.preview called')
+			if (editor.document.languageId !== 'aml') {
+				vscode.window.showErrorMessage('Needs AML file to preview it.')
+				return
+			}
+			const viewColumn = editor.viewColumn ? editor.viewColumn + 1 : ViewColumn.Two
+			if (!previewPanel) {
+				previewPanel = vscode.window.createWebviewPanel('aml-preview', 'Preview AML', {viewColumn, preserveFocus: true}, {localResourceRoots: []})
+				previewPanel.onDidDispose(() => previewPanel = undefined, null, context.subscriptions)
+			}
+			updateAmlPreview(editor.document, previewPanel, viewColumn)
+			// TODO: update preview when editor text changes or when editor changes to another aml (with debounce)
+			// vscode.window.onDidChangeActiveTextEditor((editor: TextEditor) => {})
+		})
 	)
 }
 
@@ -101,6 +117,28 @@ async function convertAml(editor: TextEditor, edit: TextEditorEdit): Promise<voi
 	}
 }
 
+function updateAmlPreview(doc: TextDocument, panel: WebviewPanel, col: ViewColumn) {
+	panel.title = 'Preview ' + doc.fileName
+	panel.webview.html = buildAmlPreview(doc.getText())
+	if (panel.viewColumn !== col) {
+		panel.reveal(col)
+	}
+}
+
+function buildAmlPreview(aml: string): string {
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AML preview</title>
+</head>
+<body>
+    <pre>${aml}</pre>
+</body>
+</html>`;
+}
+
 async function openFile(lang: string, content: string): Promise<TextDocument> {
 	const doc: TextDocument = await vscode.workspace.openTextDocument({language: lang, content: content})
 	await vscode.window.showTextDocument(doc)
@@ -124,5 +162,6 @@ function formatErrorLevel(level: ParserErrorLevel): string {
 		case 'warning': return '[WARN]'
 		case 'info': return '[INFO]'
 		case 'hint': return '[HINT]'
+		default: return '[ERR] '
 	}
 }