Merge branch 'next' into sidv/tinyMermaid

* next: (27 commits)
  chore: Fix type
  refactor!: remove MermaidConfig type enum fallback
  test: rewrite some `config` vals to tighten types
  chore: Add comment for `yy`.
  chore: Increase heap size when building
  chore: increase `test-util.ts` converage by returning `undefined`
  chore: add `vitest` imports to `test-util.ts`
  chore: run `pnpm lint:fix`
  create `noErrorsOrAlternatives` parser helper function
  chore: export `InfoModule` from `infoModule.ts`
  docs(parser): create `packages/parser` README.md file
  build: build `.langium` file using `generate` from `langium-cli`
  build: update `langium` and `langium-cli` to `v2.0.1`
  fix: fix if statment logic checks if `parser` is not `undefined`
  chore: add a comment illustrate why we build packages sequentially
  chore: refactore `&&` into `if` in `populateCommonDb`
  chore: remove `./*` part from `exports` in `parser/package.json`
  fix: use `execFileSync` instead of `execSync` in `generateLangium`
  fix(mermaid): mark `mermaid-parser` dependecy with `^`
  reorder `packages/parser` after `packages/mermaid/src/vitepress`
  ...

.build/common.ts

@@ -2,6 +2,11 @@
  * Shared common options for both ESBuild and Vite
  */
 export const packageOptions = {
+  parser: {
+    name: 'mermaid-parser',
+    packageName: 'parser',
+    file: 'index.ts',
+  },
   mermaid: {
     name: 'mermaid',
     packageName: 'mermaid',

.build/generateLangium.ts

@@ -0,0 +1,5 @@
+import { generate } from 'langium-cli';
+
+export async function generateLangium() {
+  await generate({ file: `./packages/parser/langium-config.json` });
+}

.build/langium-cli.d.ts

@@ -0,0 +1,9 @@
+declare module 'langium-cli' {
+  export interface GenerateOptions {
+    file?: string;
+    mode?: 'development' | 'production';
+    watch?: boolean;
+  }
+
+  export function generate(options: GenerateOptions): Promise<boolean>;
+}

.esbuild/build.ts

@@ -2,6 +2,7 @@ import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 import { packageOptions } from '../.build/common.js';
+import { generateLangium } from '../.build/generateLangium.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
@@ -59,9 +60,13 @@ const handler = (e) => {
 };
 
 const main = async () => {
+  await generateLangium();
   await mkdir('stats').catch(() => {});
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  await Promise.allSettled(packageNames.map((pkg) => buildPackage(pkg).catch(handler)));
+  // it should build `parser` before `mermaid` because it's a dependecy
+  for (const pkg of packageNames) {
+    await buildPackage(pkg).catch(handler);
+  }
 };
 
 void main();

.esbuild/server.ts

@@ -4,7 +4,11 @@ import cors from 'cors';
 import { getBuildConfig, defaultOptions } from './util.js';
 import { context } from 'esbuild';
 import chokidar from 'chokidar';
+import { generateLangium } from '../.build/generateLangium.js';
 
+const parserCtx = await context(
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' })
+);
 const mermaidCtx = await context(
   getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' })
 );
@@ -28,7 +32,7 @@ const externalCtx = await context(
 const zenumlCtx = await context(
   getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid-zenuml' })
 );
-const contexts = [mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx];
+const contexts = [parserCtx, mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx];
 
 const rebuildAll = async () => {
   console.time('Rebuild time');
@@ -75,10 +79,11 @@ function sendEventsToAll() {
 }
 
 async function createServer() {
+  await generateLangium();
   handleFileChange();
   const app = express();
   chokidar
-    .watch('**/src/**/*.{js,ts,yaml,json}', {
+    .watch('**/src/**/*.{js,ts,langium,yaml,json}', {
       ignoreInitial: true,
       ignored: [/node_modules/, /dist/, /docs/, /coverage/],
     })
@@ -87,12 +92,16 @@ async function createServer() {
       if (!['add', 'change'].includes(event)) {
         return;
       }
+      if (/\.langium$/.test(path)) {
+        await generateLangium();
+      }
       console.log(`${path} changed. Rebuilding...`);
       handleFileChange();
     });
 
   app.use(cors());
   app.get('/events', eventsHandler);
+  app.use(express.static('./packages/parser/dist'));
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-zenuml/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));

.eslintignore

@@ -6,3 +6,6 @@ cypress/plugins/index.js
 coverage
 *.json
 node_modules
+
+# autogenereated by langium-cli
+generated/

.gitignore

@@ -47,3 +47,6 @@ stats/
 demos/dev/**
 !/demos/dev/example.html
 !/demos/dev/reload.js
+
+# autogenereated by langium-cli
+generated/

.prettierignore

@@ -10,3 +10,6 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
+
+# autogenereated by langium-cli
+generated/

.vite/build.ts

@@ -8,6 +8,7 @@ import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 import istanbul from 'vite-plugin-istanbul';
 import { packageOptions } from '../.build/common.js';
+import { generateLangium } from '../.build/generateLangium.js';
 
 const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
@@ -82,7 +83,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
-        exclude: ['node_modules', 'test/', '__mocks__'],
+        exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
         extension: ['.js', '.ts'],
         requireEnv: true,
         forceBuildInstrument: coverage,
@@ -110,18 +111,24 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 
 const main = async () => {
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
+  for (const pkg of packageNames.filter(
+    (pkg) => !mermaidOnly || pkg === 'mermaid' || pkg === 'parser'
+  )) {
     await buildPackage(pkg);
   }
 };
 
+await generateLangium();
+
 if (watch) {
+  await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
   build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
+  await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
   await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
   await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
 } else {

.vite/server.ts

@@ -14,6 +14,7 @@ async function createServer() {
   });
 
   app.use(cors());
+  app.use(express.static('./packages/parser/dist'));
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-zenuml/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));

cSpell.json

@@ -74,6 +74,7 @@
     "knut",
     "knutsveidqvist",
     "laganeckas",
+    "langium",
     "linetype",
     "lintstagedrc",
     "logmsg",

package.json

@@ -15,11 +15,11 @@
     "git graph"
   ],
   "scripts": {
-    "build": "pnpm run -r clean && pnpm build:esbuild && pnpm build:types",
+    "build": "pnpm build:esbuild && pnpm build:types",
     "build:esbuild": "pnpm run -r clean && ts-node-esm --transpileOnly .esbuild/build.ts",
     "build:mermaid": "pnpm build:esbuild --mermaid",
     "build:viz": "pnpm build:esbuild --visualize",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types": "tsc -p ./packages/parser/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
     "dev": "ts-node-esm --transpileOnly .esbuild/server.ts",
     "dev:vite": "ts-node-esm --transpileOnly .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
@@ -107,6 +107,7 @@
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.0.0",
+    "langium-cli": "2.0.1",
     "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",

packages/mermaid-zenuml/src/parser.ts

@@ -5,7 +5,6 @@
  * This is a dummy parser that satisfies the mermaid API logic.
  */
 export default {
-  parser: { yy: {} },
   parse: () => {
     // no op
   },

packages/mermaid/package.json

@@ -72,18 +72,18 @@
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^1.3.0",
+    "mermaid-parser": "workspace:^",
     "stylis": "^4.1.3",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@adobe/jsonschema2md": "^7.1.4",
-    "@types/d3-scale": "^4.0.3",
-    "@types/d3-scale-chromatic": "^3.0.0",
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
     "@types/d3-sankey": "^0.12.1",
     "@types/d3-scale": "^4.0.3",
+    "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-selection": "^3.0.5",
     "@types/d3-shape": "^3.1.1",
     "@types/dompurify": "^3.0.2",

packages/mermaid/src/Diagram.ts

@@ -35,7 +35,10 @@ export class Diagram {
     this.db = diagram.db;
     this.renderer = diagram.renderer;
     this.parser = diagram.parser;
-    this.parser.parser.yy = this.db;
+    if (this.parser.parser) {
+      // The parser.parser.yy is only present in JISON parsers. So, we'll only set if required.
+      this.parser.parser.yy = this.db;
+    }
     this.init = diagram.init;
     this.parse();
   }

packages/mermaid/src/config.type.ts

@@ -61,7 +61,7 @@ export interface MermaidConfig {
    * You may also use `themeCSS` to override this value.
    *
    */
-  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
+  theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
   /**
@@ -82,26 +82,11 @@ export interface MermaidConfig {
    * This option decides the amount of logging to be used by mermaid.
    *
    */
-  logLevel?:
-    | number
-    | string
-    | 0
-    | 2
-    | 1
-    | 'trace'
-    | 'debug'
-    | 'info'
-    | 'warn'
-    | 'error'
-    | 'fatal'
-    | 3
-    | 4
-    | 5
-    | undefined;
+  logLevel?: 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5;
   /**
    * Level of trust for parsed diagram
    */
-  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
+  securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
   /**
    * Dictates whether mermaid starts on Page load
    */
@@ -723,7 +708,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
   /**
    * Directional bias for layout of entities
    */
-  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
+  layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';
   /**
    * The minimum width of an entity box. Expressed in pixels.
    */
@@ -788,7 +773,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
@@ -812,7 +797,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
   nodeSpacing?: number;
   rankSpacing?: number;
   /**
@@ -872,7 +857,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -951,7 +936,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -1062,7 +1047,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * Controls the display mode.
    *
    */
-  displayMode?: string | 'compact';
+  displayMode?: '' | 'compact';
   /**
    * On which day a week-based interval should start
    *
@@ -1121,7 +1106,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: 'left' | 'center' | 'right';
   /**
    * Mirror actors under diagram
    *
@@ -1178,7 +1163,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * This sets the text alignment of actor-attached notes
    */
-  noteAlign?: string | 'left' | 'center' | 'right';
+  noteAlign?: 'left' | 'center' | 'right';
   /**
    * This sets the font size of actor messages
    */
@@ -1254,7 +1239,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Defines how mermaid renders curves for flowcharts.
    *
    */
-  curve?: string | 'basis' | 'linear' | 'cardinal';
+  curve?: 'basis' | 'linear' | 'cardinal';
   /**
    * Represents the padding between the labels and the shape
    *
@@ -1266,7 +1251,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
   /**
    * Width of nodes where text is wrapped.
    *

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -45,7 +45,6 @@ export const addDiagrams = () => {
       styles: {}, // should never be used
       renderer: {}, // should never be used
       parser: {
-        parser: { yy: {} },
         parse: () => {
           throw new Error(
             'Diagrams beginning with --- are not valid. ' +

packages/mermaid/src/diagram-api/diagramAPI.spec.ts

@@ -39,7 +39,6 @@ describe('DiagramAPI', () => {
           parse: (_text) => {
             return;
           },
-          parser: { yy: {} },
         },
         renderer: {},
         styles: {},