Small changes

azimuttapp · Nov 26, 2024 · df43b0c · df43b0c
1 parent 313509b
commit df43b0c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 32 deletions.
diff --git a/extensions/vscode-aml/CHANGELOG.md b/extensions/vscode-aml/CHANGELOG.md
@@ -6,8 +6,21 @@ Check [Keep a Changelog](http://keepachangelog.com) for recommendations on how t
 
 ## [Unreleased]
 
+### Added
+
+- AML conversion commands from/to SQL, JSON, DOT, Mermaid and more
+
+
+## 0.1.1 - 2024-11-25
+
+### Changed
+
+- Improve syntax highlighting to color schema and entities when both present
+- Fix AML icon for `.aml` files
+- Improve README and fix image link
+
 
-## 0.1.0
+## 0.1.0 - 2024-11-25
 
 ### Added
 

diff --git a/extensions/vscode-aml/README.md b/extensions/vscode-aml/README.md
@@ -13,6 +13,8 @@ A VS Code extension to design database schemas using [AML](https://azimutt.app/a
 
 - Syntax highlight and suggestions for AML code (`.aml` files)
 - Symbol navigation in AML
+- convert AML to PostgreSQL, JSON, DOT, Mermaid, Markdown (Command Palette)
+- convert SQL and JSON to AML (Command Palette)
 
 
 ## 💡 Usage
@@ -40,8 +42,6 @@ posts | store all posts
 ## 📋 Roadmap
 
 - diagram preview + open in Azimutt
-- convert AML to PostgreSQL, JSON, DOT, Mermaid, Markdown (Command Palette)
-- convert SQL and JSON to AML (Command Palette)
 - Add parsing errors ([createDiagnosticCollection](https://code.visualstudio.com/api/references/vscode-api#languages.createDiagnosticCollection)?)
 - auto-complete (cf [registerCompletionItemProvider](https://microsoft.github.io/monaco-editor/typedoc/functions/languages.registerCompletionItemProvider.html))
 - rename (cf [registerRenameProvider](https://microsoft.github.io/monaco-editor/typedoc/functions/languages.registerRenameProvider.html))
@@ -83,10 +83,14 @@ Tips:
 
 ## 🚀 Publication
 
-[Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
+[Publish extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code marketplace:
+
+- Update `package.json` version and `CHANGELOG.md`
+- Package the extension: `vsce package`
+- Publish the extension: `vsce publish`
+
+Tips:
 
+- Install vsce with `npm install -g @vscode/vsce`
 - Get Personal Access Token from [azimutt](https://dev.azure.com/azimutt)
 - Manage extension from the [marketplace](https://marketplace.visualstudio.com/manage/publishers/azimutt)
-- package the extension: `vsce package`
-- publish the extension: `vsce publish`
-- if needed, install vsce: `npm install -g @vscode/vsce`
diff --git a/extensions/vscode-aml/package-lock.json b/extensions/vscode-aml/package-lock.json
diff --git a/extensions/vscode-aml/src/web/aml.ts b/extensions/vscode-aml/src/web/aml.ts
@@ -1,5 +1,6 @@
 import {Database, ParserResult} from "@azimutt/models";
 
+// dynamic import to use ESM libs in a CommonJS package (required by VS Code extension)
 const amlLib = import("@azimutt/aml");
 const sqlLib = import("@azimutt/parser-sql");
 

diff --git a/extensions/vscode-aml/src/web/extension.ts b/extensions/vscode-aml/src/web/extension.ts
@@ -1,17 +1,4 @@
 import vscode, {ExtensionContext, TextEditor} from "vscode";
-// import {ParserError, ParserErrorLevel} from "@azimutt/models";
-/*import {generateSql, parseSql} from "@azimutt/parser-sql";
-import {
-    Database,
-    generateAml,
-    generateDot,
-    generateJsonDatabase,
-    generateMarkdown,
-    generateMermaid,
-    parseAml,
-    parseJsonDatabase,
-    ParserResult
-} from "@azimutt/aml";*/
 import {newAml} from "./new";
 import {convertAmlToDialect, convertJsonToAml, convertSqlToAml} from "./convert";
 import {AmlDocumentSymbolProvider} from "./symbols";

diff --git a/extensions/vscode-aml/src/web/preview.ts b/extensions/vscode-aml/src/web/preview.ts
@@ -6,6 +6,8 @@ import vscode, {
     ViewColumn,
     WebviewPanel
 } from "vscode";
+import {Database} from "@azimutt/models";
+import {generateMermaid, parseAml} from "./aml";
 import {debounce} from "./utils";
 
 let previewPanel: WebviewPanel | undefined = undefined
@@ -43,19 +45,19 @@ export function previewAml(editor: TextEditor, context: ExtensionContext) {
 }
 
 const updateAmlPreview = debounce((document: TextDocument, panel: WebviewPanel) => updateAmlPreviewReal(document, panel), 300)
-const updateAmlPreviewReal = (document: TextDocument, panel: WebviewPanel) => {
-    const html = buildAmlPreview(document.getText())
-    if (html) {
+async function updateAmlPreviewReal(document: TextDocument, panel: WebviewPanel) {
+    const input = document.getText()
+    const res = await parseAml(input)
+    if (res.result) {
         panel.title = 'Preview ' + document.fileName.split('/').pop()
-        panel.webview.html = html
+        panel.webview.html = await buildAmlPreview(input, res.result)
         if (!panel.visible) {panel.reveal(ViewColumn.Beside, true)}
     }
 }
 
-function buildAmlPreview(aml: string): string | undefined {
-    // const res = parseAml(aml)
-    // const content = res.result ? generateMermaid(res.result) : aml // TODO: render mermaid as svg
-    const content = aml.trim()
+async function buildAmlPreview(input: string, db: Database): Promise<string> {
+    // const darkMode = vscode.window.activeColorTheme.kind === ColorThemeKind.Dark
+    const mermaidCode = await generateMermaid(db)
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -64,8 +66,8 @@ function buildAmlPreview(aml: string): string | undefined {
     <title>AML preview</title>
 </head>
 <body>
-    <a href="${openInAzimuttUrl(aml)}" target="_blank">Open in Azimutt</a>
-    <pre>${content}</pre>
+    <a href="${openInAzimuttUrl(input)}" target="_blank">Open in Azimutt</a>
+    <pre>${mermaidCode}</pre>
 </body>
 </html>`
 }