Bug/6529 class static block syntax error

.build/util.test.ts

@@ -0,0 +1,62 @@
+import { expect, test } from 'vitest';
+import { parseOption, parseOptions } from './util.js';
+
+test('--target=ES2018 parsed to ES2018', () => {
+  expect(parseOption('--target', ['cmd', '--target=ES2018', 'arg'])).toBe('ES2018');
+});
+
+test('missing =, ignored', () => {
+  expect(parseOption('--target', ['cmd', '--target'])).toBe(undefined);
+});
+
+test('option not found', () => {
+  expect(parseOption('--target', ['cmd', '--mermaid'])).toBe(undefined);
+});
+
+test(
+  '--supported:bigint=false --supported:class-static-blocks=false ' +
+    'parsed to {bigint:false, class-static-blocks:false}',
+  () => {
+    expect(
+      parseOptions('--supported', [
+        'cmd',
+        '--supported:bigint=false',
+        '--supported:class-static-blocks=false',
+      ])
+    ).toStrictEqual({ bigint: false, 'class-static-blocks': false });
+  }
+);
+
+test('illegal supported option', () => {
+  expect(parseOptions('--supported', ['cmd', '--supported=true'])).toStrictEqual({});
+});
+
+test('default', () => {
+  expect(parseOption('--target', ['cmd'])).toBe(undefined);
+  expect(parseOptions('--supported', ['cmd'])).toStrictEqual({});
+});
+
+function buildConfig(supported: Record<string, boolean>, target: string | undefined) {
+  return {
+    ...(Object.keys(supported).length === 0 ? {} : { supported }),
+    ...(target === undefined ? {} : { target }),
+  };
+}
+
+test('spread with no options', () => {
+  const supported = {};
+  const target = parseOption('--target', ['cmd']);
+  const config = buildConfig(supported, target);
+  expect(config).toStrictEqual({});
+});
+
+test('spread', () => {
+  const argv = ['cmd', '--supported:class-static-blocks=false', '--target=ES2018'];
+  const supported = parseOptions('--supported', argv);
+  const target = parseOption('--target', argv);
+  const config = buildConfig(supported, target);
+  expect(config).toStrictEqual({
+    supported: { 'class-static-blocks': false },
+    target: 'ES2018',
+  });
+});

.build/util.ts

@@ -0,0 +1,23 @@
+export function parseOption(prefix: string, argv: string[] = process.argv) {
+  const arg = argv.find((a) => a.startsWith(prefix + '='));
+  return arg?.replace(prefix + '=', '');
+}
+
+export function parseOptions(
+  prefix: string,
+  argv: string[] = process.argv
+): Record<string, boolean> {
+  return argv
+    .filter((a) => a.startsWith(prefix + ':'))
+    .reduce(
+      (obj, arg) => {
+        const arr = arg.split(/[:=]/);
+        if (arr.length < 3) {
+          return obj;
+        }
+        obj[arr[1]] = 'true' === arr[2];
+        return obj;
+      },
+      {} as Record<string, boolean>
+    );
+}

.esbuild/build.ts

@@ -77,6 +77,9 @@ const main = async () => {
   // it should build `parser` before `mermaid` because it's a dependency
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
+    if (process.argv.includes('--' + pkg)) {
+      break;
+    }
   }
 };
 

.esbuild/util.ts

@@ -5,6 +5,7 @@ import { readFileSync } from 'fs';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
 import type { PackageOptions } from '../.build/common.js';
 import { jisonPlugin } from './jisonPlugin.js';
+import { parseOption, parseOptions } from '../.build/util.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
@@ -24,6 +25,9 @@ export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'>
 } as const;
 
 const buildOptions = (override: BuildOptions): BuildOptions => {
+  const supported = parseOptions('--supported');
+  const target = parseOption('--target');
+  const sourceMap = parseOption('--source-map');
   return {
     bundle: true,
     minify: true,
@@ -32,9 +36,11 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
     tsconfig: 'tsconfig.json',
     resolveExtensions: ['.ts', '.js', '.json', '.jison', '.yaml'],
     external: ['require', 'fs', 'path'],
+    ...(Object.keys(supported).length === 0 ? {} : { supported }),
+    ...(target === undefined ? {} : { target }),
     outdir: 'dist',
     plugins: [jisonPlugin, jsonSchemaPlugin],
-    sourcemap: 'external',
+    sourcemap: sourceMap === 'false' ? false : 'external',
     ...override,
   };
 };

docs/intro/getting-started.md

@@ -297,6 +297,20 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi
 </html>
 ```
 
+In this example, `mermaid.esm.mjs` is built from source with [`--supported`](https://esbuild.github.io/api/#supported) and [`--target`](https://esbuild.github.io/api/#target) to tackle compatibility issues:
+
+`mermaid.esm.mjs` is located under `packages/mermaid/dist`.
+
+```bash
+pnpm run build:esbuild --mermaid --supported:class-static-blocks=false --target=ES2018
+```
+
+To disable [`source-map`](https://esbuild.github.io/api/#sourcemap), use `--source-map=false`:
+
+```bash
+pnpm run build:esbuild --mermaid --source-map=false
+```
+
 ## 5. Adding Mermaid as a dependency
 
 Below are the steps for adding Mermaid as a dependency:

package.json

@@ -15,8 +15,9 @@
     "git graph"
   ],
   "scripts": {
+    "clean": "pnpm run -r clean",
     "build": "pnpm build:esbuild && pnpm build:types",
-    "build:esbuild": "pnpm run -r clean && tsx .esbuild/build.ts",
+    "build:esbuild": "pnpm clean && tsx .esbuild/build.ts",
     "build:mermaid": "pnpm build:esbuild --mermaid",
     "build:viz": "pnpm build:esbuild --visualize",
     "build:types": "pnpm --filter mermaid types:build-config && tsx .build/types.ts",

packages/mermaid/src/docs/intro/getting-started.md

@@ -290,6 +290,20 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi
 </html>
 ```
 
+In this example, `mermaid.esm.mjs` is built from source with [`--supported`](https://esbuild.github.io/api/#supported) and [`--target`](https://esbuild.github.io/api/#target) to tackle compatibility issues:
+
+`mermaid.esm.mjs` is located under `packages/mermaid/dist`.
+
+```bash
+pnpm run build:esbuild --mermaid --supported:class-static-blocks=false --target=ES2018
+```
+
+To disable [`source-map`](https://esbuild.github.io/api/#sourcemap), use `--source-map=false`:
+
+```bash
+pnpm run build:esbuild --mermaid --source-map=false
+```
+
 ## 5. Adding Mermaid as a dependency
 
 Below are the steps for adding Mermaid as a dependency: