AML v2

.gitignore

@@ -3,7 +3,7 @@
 .DS_Store
 .env
 .clever.json
-/node_modules/
+node_modules
 addon-manifest.json
 addon-manifest-prod.json
 addon-manifest-staging.json

.pre-commit-config.yaml

@@ -78,33 +78,33 @@ repos:
       pass_filenames: false
       files: libs/connector-sqlserver/.*\.ts*$
 
-    - id: libs-serde-aml
-      name: 'libs/serde-aml'
+    - id: libs-aml
+      name: 'libs/aml'
       language: system
-      entry: bash -c 'cd libs/serde-aml && exec npm run build && exec npm test'
+      entry: bash -c 'cd libs/aml && exec npm run build && exec npm test'
       pass_filenames: false
-      files: libs/serde-aml/.*\.ts*$
+      files: libs/aml/.*\.ts*$
 
-    - id: libs-serde-dbml
-      name: 'libs/serde-dbml'
+    - id: libs-parser-dbml
+      name: 'libs/parser-dbml'
       language: system
-      entry: bash -c 'cd libs/serde-dbml && exec npm run build && exec npm test'
+      entry: bash -c 'cd libs/parser-dbml && exec npm run build && exec npm test'
       pass_filenames: false
-      files: libs/serde-dbml/.*\.ts*$
+      files: libs/parser-dbml/.*\.ts*$
 
-    - id: libs-serde-prisma
-      name: 'libs/serde-prisma'
+    - id: libs-parser-prisma
+      name: 'libs/parser-prisma'
       language: system
-      entry: bash -c 'cd libs/serde-prisma && exec npm run build && exec npm test'
+      entry: bash -c 'cd libs/parser-prisma && exec npm run build && exec npm test'
       pass_filenames: false
-      files: libs/serde-prisma/.*\.ts*$
+      files: libs/parser-prisma/.*\.ts*$
 
-    - id: libs-serde-sql
-      name: 'libs/serde-sql'
+    - id: libs-parser-sql
+      name: 'libs/parser-sql'
       language: system
-      entry: bash -c 'cd libs/serde-sql && exec npm run build && exec npm test'
+      entry: bash -c 'cd libs/parser-sql && exec npm run build && exec npm test'
       pass_filenames: false
-      files: libs/serde-sql/.*\.ts*$
+      files: libs/parser-sql/.*\.ts*$
 
     - id: mix-format
       name: 'Elixir format'

Dockerfile

@@ -87,6 +87,7 @@ RUN npm run build:docker
 COPY backend/lib lib
 
 # compile assets
+RUN cd assets && npm install
 RUN mix assets.deploy
 
 RUN mix compile

README.md

@@ -3,7 +3,7 @@
         <picture>
           <source media="(prefers-color-scheme: dark)" srcset="assets/azimutt-logo-light.png">
           <source media="(prefers-color-scheme: light)" srcset="assets/azimutt-logo-dark.png">
-          <img alt="Azimutt logo" src="assets/azimutt-logo-dark.png">
+          <img alt="Azimutt logo" src="assets/azimutt-logo-dark.png" width="500">
         </picture>
     </a>
 </p>
@@ -38,7 +38,7 @@ Azimutt started as a schema exploration tool for databases with hundreds of tabl
 
 [![Azimutt roadmap](docs/_assets/roadmap.png)](https://mm.tt/map/2434161843?t=N2yWZj1pc1)
 
-- Design your schema using [AML](docs/aml/README.md) for a fast diagramming
+- Design your schema using [AML](libs/aml/README.md) for a fast diagramming
 - Explore your database schema using search everywhere, display only useful tables/columns and follow relations
 - Query your data like never before, follow foreign keys and display entities in diagram
 - Document using table/column notes and tags and layouts and memos for use cases, features or team scopes

backend/.gitignore

@@ -31,5 +31,7 @@ azimutt-*.tar
 # In case you use Node.js/npm, you want to ignore these.
 npm-debug.log
 /node_modules/
+
 /priv/static/swagger*.json
+/assets/js/*.js
 /uploads

backend/assets/js/aml.hljs.ts

@@ -0,0 +1,26 @@
+import {HLJSApi, Language} from "highlight.js"
+
+// keep in sync with libs/aml/src/extensions/monaco.ts
+const entityRegex = /^[a-zA-Z_][a-zA-Z0-9_#]*/
+const attributeNameRegex = /^ +[a-zA-Z_][a-zA-Z0-9_#]*/
+const attributeTypeRegex = /\b(uuid|(var|n)?char2?|character( varying)?|(tiny|medium|long|ci)?text|(tiny|small|big)?int(eger)?(\d+)?|numeric|float|double( precision)?|bool(ean)?|timestamp( with(out)? time zone)?|date(time)?|time( with(out)? time zone)?|interval|json|string|number)\b/
+const notesRegex = /\|[^#\n]*/
+const commentRegex = /#.*/
+
+// see https://highlightjs.readthedocs.io/en/latest/language-guide.html
+export function language(hljs: HLJSApi): Language {
+    return {
+        name: 'aml',
+        case_insensitive: true,
+        keywords: ['namespace', 'nullable', 'pk', 'index', 'unique', 'check', 'fk', 'rel', 'type'],
+        contains: [
+            {scope: 'title', begin: entityRegex},
+            {scope: 'title.class', begin: attributeNameRegex},
+            // FIXME: {scope: 'type', beginScope: 'title.class', begin: / [a-zA-Z]+/, end: / |\(|=|\n/}, // attribute type
+            {scope: 'type', begin: attributeTypeRegex},
+            {scope: 'subst', begin: /-> |fk /, end: /[) \n]/}, // inline relation
+            {scope: 'string', begin: notesRegex},
+            {scope: 'comment', begin: commentRegex},
+        ]
+    }
+}

backend/assets/js/app.js → backend/assets/js/app.ts

@@ -20,31 +20,36 @@
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
-import Alpine from "../vendor/alpine"
-import Hljs from "../vendor/highlight.min"
-import topbar from "../vendor/topbar"
 
 // Establish Phoenix Socket and LiveView configuration.
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 
-window.hljs = Hljs;
-hljs.highlightAll();
-window.Alpine = Alpine;
-Alpine.start();
-let hooks = {};
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+import Alpine from "alpinejs"
+import Hljs from "highlight.js"
+import topbar from "topbar"
+import {language as hljsAml} from "./aml.hljs"
+
+Hljs.registerLanguage('aml', hljsAml)
+Hljs.configure({cssSelector: 'code.hljs'})
+Hljs.highlightAll()
+
+
+Alpine.start()
+const hooks = {}
+const csrfToken = document.querySelector("meta[name='csrf-token']")?.getAttribute("content")
+const liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
     hooks: hooks,
     dom: {
-        onBeforeElUpdated(from, to) {
-            if (from._x_dataStack) {
-                window.Alpine.clone(from, to);
+        onBeforeElUpdated(from: HTMLElement, to: HTMLElement): boolean {
+            if ((from as any)._x_dataStack) {
+                Alpine.cloneNode(from, to)
             }
+            return false
         },
     },
-});
+})
 
 
 // Show progress bar on live navigation and form submits
@@ -60,3 +65,10 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
+
+
+declare global {
+    export interface Window {
+        liveSocket: LiveSocket
+    }
+}

backend/assets/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@azimutt/phoenix-app",
+  "version": "0.0.1",
+  "description": "App managed by Phoenix assets and loaded in every page",
+  "author": {
+    "name": "Loïc Knuchel",
+    "email": "[email protected]",
+    "url": "https://loicknuchel.fr"
+  },
+  "license": "MIT",
+  "main": "js/app.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "alpinejs": "^3.14.1",
+    "highlight.js": "^11.10.0",
+    "topbar": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/alpinejs": "^3.13.10",
+    "@types/phoenix": "^1.6.5",
+    "@types/phoenix_live_view": "^0.18.5",
+    "typescript": "^5.5.4"
+  }
+}

backend/assets/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "es2022",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "js/**/*"
+  ]
+}