chore(parser): build parser package using esbuild and vite

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>

.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 { execSync } from 'child_process';
+
+export function generateLangium() {
+  execSync(`pnpm --prefix ${process.cwd()}/packages/parser exec langium generate`);
+}

.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');
 
@@ -52,9 +53,12 @@ const handler = (e) => {
 };
 
 const main = async () => {
+  generateLangium();
   await mkdir('stats').catch(() => {});
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  await Promise.allSettled(packageNames.map((pkg) => buildPackage(pkg).catch(handler)));
+  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() {
+  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)) {
+        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'));

.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,
@@ -106,18 +107,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);
   }
 };
 
+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'));

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",