feat(arch): converted parser from jison to langium

demos/architecture.html

@@ -69,7 +69,7 @@
     <pre class="mermaid">
       architecture
         service db(database)[Database]
-        service s3(storage)[Storage]
+        service s3(disk)[Storage]
         service serv1(server)[Server 1]
         service serv2(server)[Server 2]
         service disk(disk)[Disk]

packages/mermaid/src/diagrams/architecture/architectureDb.ts

@@ -3,7 +3,6 @@ import type {
   ArchitectureDB,
   ArchitectureService,
   ArchitectureGroup,
-  ArchitectureDirection,
   ArchitectureEdge,
   ArchitectureDirectionPairMap,
   ArchitectureDirectionPair,
@@ -47,21 +46,20 @@ const clear = (): void => {
   commonClear();
 };
 
-const addService = function (id: string, opts: Omit<ArchitectureService, 'id' | 'edges'> = {}) {
-  const { icon, in: inside, title } = opts;
+const addService = function ({id, icon, in: parent, title}: Omit<ArchitectureService, "edges">) {
   if (state.records.registeredIds[id] !== undefined) {
     throw new Error(`The service id [${id}] is already in use by another ${state.records.registeredIds[id]}`);
   }
-  if (inside !== undefined) {
-    if (id === inside) {
+  if (parent !== undefined) {
+    if (id === parent) {
       throw new Error(`The service [${id}] cannot be placed within itself`);
     }
-    if (state.records.registeredIds[inside] === undefined) {
+    if (state.records.registeredIds[parent] === undefined) {
       throw new Error(
         `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
       );
     }
-    if (state.records.registeredIds[inside] === 'service') {
+    if (state.records.registeredIds[parent] === 'service') {
       throw new Error(`The service [${id}]'s parent is not a group`);
     }
   }
@@ -73,27 +71,27 @@ const addService = function (id: string, opts: Omit<ArchitectureService, 'id' |
     icon,
     title,
     edges: [],
-    in: inside,
+    in: parent,
   };
 };
 
 const getServices = (): ArchitectureService[] => Object.values(state.records.services);
 
-const addGroup = function (id: string, opts: Omit<ArchitectureGroup, 'id'> = {}) {
-  const { icon, in: inside, title } = opts;
+const addGroup = function ({id, icon, in: parent, title}: ArchitectureGroup) {
+  // const { icon, in: inside, title } = opts;
   if (state.records.registeredIds[id] !== undefined) {
     throw new Error(`The group id [${id}] is already in use by another ${state.records.registeredIds[id]}`);
   }
-  if (inside !== undefined) {
-    if (id === inside) {
+  if (parent !== undefined) {
+    if (id === parent) {
       throw new Error(`The group [${id}] cannot be placed within itself`);
     }
-    if (state.records.registeredIds[inside] === undefined) {
+    if (state.records.registeredIds[parent] === undefined) {
       throw new Error(
         `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
       );
     }
-    if (state.records.registeredIds[inside] === 'service') {
+    if (state.records.registeredIds[parent] === 'service') {
       throw new Error(`The group [${id}]'s parent is not a group`);
     }
   }
@@ -104,7 +102,7 @@ const addGroup = function (id: string, opts: Omit<ArchitectureGroup, 'id'> = {})
     id,
     icon,
     title,
-    in: inside,
+    in: parent,
   });
 };
 const getGroups = (): ArchitectureGroup[] => {
@@ -112,13 +110,8 @@ const getGroups = (): ArchitectureGroup[] => {
 };
 
 const addEdge = function (
-  lhsId: string,
-  lhsDir: ArchitectureDirection,
-  rhsId: string,
-  rhsDir: ArchitectureDirection,
-  opts: Omit<ArchitectureEdge, 'lhsId' | 'lhsDir' | 'rhsId' | 'rhsDir'> = {}
+  {lhsId, rhsId, lhsDir, rhsDir, lhsInto, rhsInto, title}: ArchitectureEdge
 ) {
-  const { title, lhsInto: lhsInto, rhsInto: rhsInto } = opts;
   if (!isArchitectureDirection(lhsDir)) {
     throw new Error(
       `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${lhsDir}`

packages/mermaid/src/diagrams/architecture/architectureDiagram.ts

@@ -1,6 +1,5 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: JISON doesn't support types
-import parser from './parser/architecture.jison';
+import { parser } from './architectureParser.js';
 import { db } from './architectureDb.js';
 import styles from './architectureStyles.js';
 import { renderer } from './architectureRenderer.js';

packages/mermaid/src/diagrams/architecture/architectureParser.ts

@@ -0,0 +1,23 @@
+import type { Architecture } from '@mermaid-js/parser';
+import { parse } from '@mermaid-js/parser';
+import { log } from '../../logger.js';
+import type { ParserDefinition } from '../../diagram-api/types.js';
+import { populateCommonDb } from '../common/populateCommonDb.js';
+import type { ArchitectureDB } from './architectureTypes.js';
+import { db } from './architectureDb.js';
+
+const populateDb = (ast: Architecture, db: ArchitectureDB) => {
+  populateCommonDb(ast, db);
+  ast.groups.map(db.addGroup);
+  ast.services.map(db.addService);
+  // @ts-ignore TODO our parser guarantees the type is L/R/T/B and not string. How to change to union type?
+  ast.edges.map(db.addEdge);
+};
+
+export const parser: ParserDefinition = {
+  parse: async (input: string): Promise<void> => {
+    const ast: Architecture = await parse('architecture', input);
+    log.debug(ast);
+    populateDb(ast, db);
+  },
+};

packages/mermaid/src/diagrams/architecture/architectureStyles.ts

@@ -18,9 +18,8 @@ const genSections: DiagramStylesProvider = (options) => {
   for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
     const sw = '' + (17 - 3 * i);
     sections += `
-    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
-      i - 1
-    } polygon, .section-${i - 1} path  {
+    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${i - 1
+      } polygon, .section-${i - 1} path  {
       fill: ${options['cScale' + i]};
     }
     .section-${i - 1} text {

packages/mermaid/src/diagrams/architecture/architectureTypes.ts

@@ -168,16 +168,12 @@ export interface ArchitectureEdge {
 
 export interface ArchitectureDB extends DiagramDB {
   clear: () => void;
-  addService: (id: string, opts: Omit<ArchitectureService, 'id'>) => void;
+  addService: (service: Omit<ArchitectureService, "edges">) => void;
   getServices: () => ArchitectureService[];
-  addGroup: (id: string, opts: Omit<ArchitectureGroup, 'id'>) => void;
+  addGroup: (group: ArchitectureGroup) => void;
   getGroups: () => ArchitectureGroup[];
   addEdge: (
-    lhsId: string,
-    lhsDir: ArchitectureDirection,
-    rhsId: string,
-    rhsDir: ArchitectureDirection,
-    opts: Omit<ArchitectureEdge, 'lhsId' | 'lhsDir' | 'rhsId' | 'rhsDir'>
+    edge: ArchitectureEdge
   ) => void;
   getEdges: () => ArchitectureEdge[];
   setElementForId: (id: string, element: D3Element) => void;

packages/mermaid/src/diagrams/architecture/parser/architecture.jison

@@ -1,3 +1,4 @@
+// TODO: delete file
 %lex
 %options case-insensitive
 

packages/parser/langium-config.json

@@ -15,6 +15,11 @@
       "id": "pie",
       "grammar": "src/language/pie/pie.langium",
       "fileExtensions": [".mmd", ".mermaid"]
+    },
+    {
+      "id": "architecture",
+      "grammar": "src/language/architecture/architecture.langium",
+      "fileExtensions": [".mmd", ".mermaid"]
     }
   ],
   "mode": "production",

packages/parser/src/language/architecture/architecture.langium

@@ -0,0 +1,40 @@
+grammar Architecture
+import "../common/common";
+
+entry Architecture:
+    NEWLINE*
+    "architecture"
+    (
+    NEWLINE* TitleAndAccessibilities
+    | NEWLINE* Statement*
+    | NEWLINE*
+    )
+;
+
+fragment Statement:
+    groups+=Group
+    | services+=Service
+    | edges+=Edge
+;
+
+fragment Arrow:
+    lhsInto?=ARROW_INTO? lhsDir=ARROW_DIRECTION '--' rhsDir=ARROW_DIRECTION rhsInto?=ARROW_INTO?
+;
+
+Group:
+    'group' id=ARCH_ID icon=ARCH_ICON? title=ARCH_TITLE? ('in' in=ARCH_ID)? EOL
+;
+
+Service:
+    'service' id=ARCH_ID icon=ARCH_ICON? title=ARCH_TITLE? ('in' in=ARCH_ID)? EOL
+;
+
+Edge:
+    lhsId=ARCH_ID Arrow rhsId=ARCH_ID EOL
+;
+
+terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
+terminal ARCH_ID: /[\w]+/;
+terminal ARCH_ICON: /\([\w]+\)/;
+terminal ARCH_TITLE: /\[[\w ]+\]/;
+terminal ARROW_INTO: /\(|\)/;

packages/parser/src/language/architecture/index.ts

@@ -0,0 +1 @@
+export * from './module.js';

packages/parser/src/language/architecture/module.ts

@@ -0,0 +1,74 @@
+import type {
+  DefaultSharedCoreModuleContext,
+  LangiumCoreServices,
+  LangiumSharedCoreServices,
+  Module,
+  PartialLangiumCoreServices,
+} from 'langium';
+import {
+  EmptyFileSystem,
+  createDefaultCoreModule,
+  createDefaultSharedCoreModule,
+  inject,
+} from 'langium';
+
+import { MermaidGeneratedSharedModule, ArchitectureGeneratedModule } from '../generated/module.js';
+import { ArchitectureTokenBuilder } from './tokenBuilder.js';
+import { ArchitectureValueConverter } from './valueConverter.js';
+
+/**
+ * Declaration of `Architecture` services.
+ */
+type ArchitectureAddedServices = {
+  parser: {
+    TokenBuilder: ArchitectureTokenBuilder;
+    ValueConverter: ArchitectureValueConverter;
+  };
+};
+
+/**
+ * Union of Langium default services and `Architecture` services.
+ */
+export type ArchitectureServices = LangiumCoreServices & ArchitectureAddedServices;
+
+/**
+ * Dependency injection module that overrides Langium default services and
+ * contributes the declared `Architecture` services.
+ */
+export const ArchitectureModule: Module<ArchitectureServices, PartialLangiumCoreServices & ArchitectureAddedServices> = {
+  parser: {
+    TokenBuilder: () => new ArchitectureTokenBuilder(),
+    ValueConverter: () => new ArchitectureValueConverter(),
+  },
+};
+
+/**
+ * Create the full set of services required by Langium.
+ *
+ * First inject the shared services by merging two modules:
+ *  - Langium default shared services
+ *  - Services generated by langium-cli
+ *
+ * Then inject the language-specific services by merging three modules:
+ *  - Langium default language-specific services
+ *  - Services generated by langium-cli
+ *  - Services specified in this file
+ * @param context - Optional module context with the LSP connection
+ * @returns An object wrapping the shared services and the language-specific services
+ */
+export function createArchitectureServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): {
+  shared: LangiumSharedCoreServices;
+  Architecture: ArchitectureServices;
+} {
+  const shared: LangiumSharedCoreServices = inject(
+    createDefaultSharedCoreModule(context),
+    MermaidGeneratedSharedModule
+  );
+  const Architecture: ArchitectureServices = inject(
+    createDefaultCoreModule({ shared }),
+    ArchitectureGeneratedModule,
+    ArchitectureModule
+  );
+  shared.ServiceRegistry.register(Architecture);
+  return { shared, Architecture };
+}

packages/parser/src/language/architecture/tokenBuilder.ts

@@ -0,0 +1,7 @@
+import { AbstractMermaidTokenBuilder } from '../common/index.js';
+
+export class ArchitectureTokenBuilder extends AbstractMermaidTokenBuilder {
+  public constructor() {
+    super(['architecture']);
+  }
+}

packages/parser/src/language/architecture/valueConverter.ts

@@ -0,0 +1,19 @@
+import type { CstNode, GrammarAST, ValueType } from 'langium';
+
+import { AbstractMermaidValueConverter } from '../common/index.js';
+
+export class ArchitectureValueConverter extends AbstractMermaidValueConverter {
+  protected runCustomConverter(
+    rule: GrammarAST.AbstractRule,
+    input: string,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _cstNode: CstNode
+  ): ValueType | undefined {
+    if (rule.name === 'ARCH_ICON') {
+        return input.replace(/[()]/g, '').trim();
+    } else if (rule.name === 'ARCH_TITLE') {
+        return input.replace(/[[\]]/g, '').trim();
+    }
+    return undefined
+  }
+}

packages/parser/src/language/index.ts

@@ -5,21 +5,26 @@ export {
   PacketBlock,
   Pie,
   PieSection,
+  Architecture,
   isCommon,
   isInfo,
   isPacket,
   isPacketBlock,
   isPie,
   isPieSection,
+  isArchitecture
 } from './generated/ast.js';
+
 export {
   InfoGeneratedModule,
   MermaidGeneratedSharedModule,
   PacketGeneratedModule,
   PieGeneratedModule,
+  ArchitectureGeneratedModule
 } from './generated/module.js';
 
 export * from './common/index.js';
 export * from './info/index.js';
 export * from './packet/index.js';
 export * from './pie/index.js';
+export * from './architecture/index.js';

packages/parser/src/parse.ts

@@ -1,8 +1,8 @@
 import type { LangiumParser, ParseResult } from 'langium';
 
-import type { Info, Packet, Pie } from './index.js';
+import type { Info, Packet, Pie, Architecture } from './index.js';
 
-export type DiagramAST = Info | Packet | Pie;
+export type DiagramAST = Info | Packet | Pie | Architecture;
 
 const parsers: Record<string, LangiumParser> = {};
 const initializers = {
@@ -21,11 +21,17 @@ const initializers = {
     const parser = createPieServices().Pie.parser.LangiumParser;
     parsers['pie'] = parser;
   },
+  architecture: async () => {
+    const { createArchitectureServices } = await import('./language/architecture/index.js');
+    const parser = createArchitectureServices().Architecture.parser.LangiumParser;
+    parsers['architecture'] = parser;
+  },
 } as const;
 
 export async function parse(diagramType: 'info', text: string): Promise<Info>;
 export async function parse(diagramType: 'packet', text: string): Promise<Packet>;
 export async function parse(diagramType: 'pie', text: string): Promise<Pie>;
+export async function parse(diagramType: 'architecture', text: string): Promise<Architecture>;
 export async function parse<T extends DiagramAST>(
   diagramType: keyof typeof initializers,
   text: string