ESBuild

.esbuild/esbuild.cjs

@@ -0,0 +1,14 @@
+const { esmBuild, umdBuild } = require('./util.cjs');
+const { build } = require('esbuild');
+
+const handler = (e) => {
+  console.error(e);
+  process.exit(1);
+};
+const watch = process.argv.includes('--watch');
+
+build(umdBuild({ minify: false, watch })).catch(handler);
+build(esmBuild({ minify: false, watch })).catch(handler);
+
+build(esmBuild()).catch(handler);
+build(umdBuild()).catch(handler);

.esbuild/serve.cjs

@@ -0,0 +1,53 @@
+const esbuild = require('esbuild');
+const http = require('http');
+const path = require('path');
+const { umdBuild } = require('./util.cjs');
+
+// Start esbuild's server on a random local port
+esbuild
+  .serve(
+    {
+      servedir: path.join(__dirname, '..'),
+    },
+    umdBuild({ minify: false })
+  )
+  .then((result) => {
+    // The result tells us where esbuild's local server is
+    const { host, port } = result;
+
+    // Then start a proxy server on port 3000
+    http
+      .createServer((req, res) => {
+        if (req.url.includes('mermaid.js')) {
+          req.url = '/dist/mermaid.js';
+        }
+        const options = {
+          hostname: host,
+          port: port,
+          path: req.url,
+          method: req.method,
+          headers: req.headers,
+        };
+
+        // Forward each incoming request to esbuild
+        const proxyReq = http.request(options, (proxyRes) => {
+          // If esbuild returns "not found", send a custom 404 page
+          console.error('pp', req.url);
+          if (proxyRes.statusCode === 404) {
+            if (!req.url.endsWith('.html')) {
+              res.writeHead(404, { 'Content-Type': 'text/html' });
+              res.end('<h1>A custom 404 page</h1>');
+              return;
+            }
+          }
+
+          // Otherwise, forward the response from esbuild to the client
+          res.writeHead(proxyRes.statusCode, proxyRes.headers);
+          proxyRes.pipe(res, { end: true });
+        });
+
+        // Forward the body of the request to esbuild
+        req.pipe(proxyReq, { end: true });
+      })
+      .listen(3000);
+  });

.esbuild/util.cjs

@@ -0,0 +1,62 @@
+const { Generator } = require('jison');
+const fs = require('fs');
+
+/** @typedef {import('esbuild').BuildOptions} Options */
+
+/**
+ * @param {Options} override
+ * @returns {Options}
+ */
+const buildOptions = (override = {}) => {
+  return {
+    bundle: true,
+    minify: true,
+    keepNames: true,
+    banner: { js: '"use strict";' },
+    globalName: 'mermaid',
+    platform: 'browser',
+    tsconfig: 'tsconfig.json',
+    resolveExtensions: ['.ts', '.js', '.json', '.jison'],
+    external: ['require', 'fs', 'path'],
+    entryPoints: ['src/mermaid.ts'],
+    outfile: 'dist/mermaid.min.js',
+    plugins: [jisonPlugin],
+    sourcemap: 'external',
+    ...override,
+  };
+};
+
+/**
+ * @param {Options} override
+ * @returns {Options}
+ */
+exports.esmBuild = (override = { minify: true }) => {
+  return buildOptions({
+    format: 'esm',
+    outfile: `dist/mermaid.esm${override.minify ? '.min' : ''}.mjs`,
+    ...override,
+  });
+};
+
+/**
+ * @param {Options} override
+ * @returns {Options}
+ */
+exports.umdBuild = (override = { minify: true }) => {
+  return buildOptions({
+    outfile: `dist/mermaid${override.minify ? '.min' : ''}.js`,
+    ...override,
+  });
+};
+
+const jisonPlugin = {
+  name: 'jison',
+  setup(build) {
+    build.onLoad({ filter: /\.jison$/ }, async (args) => {
+      // Load the file from the file system
+      const source = await fs.promises.readFile(args.path, 'utf8');
+      const contents = new Generator(source, { 'token-stack': true }).generate();
+      return { contents, warnings: [] };
+    });
+  },
+};

.gitignore

@@ -26,3 +26,5 @@ cypress/snapshots/
 
 # eslint --cache file
 .eslintcache
+.tsbuildinfo
+tsconfig.tsbuildinfo

.webpack/webpack.config.base.js

@@ -1,4 +1,6 @@
 import path from 'path';
+const esbuild = require('esbuild');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
 
 export default {
@@ -35,7 +37,11 @@ export default {
         test: /\.js$/,
         include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
         use: {
-          loader: 'babel-loader',
+          loader: 'esbuild-loader',
+          options: {
+            implementation: esbuild,
+            target: 'es2015',
+          },
         },
       },
       {
@@ -55,4 +61,11 @@ export default {
     ],
   },
   devtool: 'source-map',
+  optimization: {
+    minimizer: [
+      new ESBuildMinifyPlugin({
+        target: 'es2015',
+      }),
+    ],
+  },
 };

.webpack/webpack.config.e2e.babel.js

@@ -23,15 +23,4 @@ export default merge(baseConfig, {
   externals: {
     mermaid: 'mermaid',
   },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-    ],
-  },
 });

cypress/platform/bundle-test.js

@@ -1,4 +1,4 @@
-import mermaid from '../../dist/mermaid.core';
+import mermaid from '../../dist/mermaid';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A

docs/Setup.md

@@ -1407,6 +1407,15 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
+## parse
+
+### Parameters
+
+- `text` **[string][5]**
+- `parseError` **[Function][6]?**
+
+Returns **[boolean][7]**
+
 ## setSiteConfig
 
 ## setSiteConfig
@@ -1424,7 +1433,7 @@ function _Default value: At default, will mirror Global Config_
 
 - `conf` **MermaidConfig** The base currentConfig to use as siteConfig
 
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
 
 ## getSiteConfig
 
@@ -1436,7 +1445,7 @@ Returns **[object][5]** The siteConfig
 
 **Notes**: Returns **any** values in siteConfig.
 
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
 
 ## setConfig
 
@@ -1475,10 +1484,10 @@ $(function () {
 
 ### Parameters
 
-- `id` **[string][6]** The id of the element to be rendered
-- `text` **[string][6]** The graph definition
-- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
-- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+- `id` **[string][5]** The id of the element to be rendered
+- `text` **[string][5]** The graph definition
+- `cb` **function (svgCode: [string][5], bindFunctions: function (element: [Element][9]): void): void**
+- `container` **[Element][9]** Selector to element in which a div with the graph temporarily will be
   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
   element will be removed when rendering is completed.
 
@@ -1517,7 +1526,7 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
-- `directive` **[object][5]** The directive to push in
+- `directive` **[object][8]** The directive to push in
 
 ## reset
 
@@ -1615,6 +1624,8 @@ Returns **void**
 [2]: Setup.md?id=render
 [3]: 8.6.0_docs.md
 [4]: #mermaidapi-configuration-defaults
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[7]: https://developer.mozilla.org/docs/Web/API/Element
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[9]: https://developer.mozilla.org/docs/Web/API/Element

jest.config.js

@@ -1,11 +1,11 @@
 const path = require('path');
-
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   testEnvironment: 'jsdom',
   preset: 'ts-jest',
   transform: {
-    '^.+\\.jsx?$': ['babel-jest', { rootMode: 'upward' }],
+    '^.+\\.tsx?$': ['jest-esbuild', { banner: '"use strict";' }],
+    '^.+\\.jsx?$': ['jest-esbuild', { banner: '"use strict";' }],
     '^.+\\.jison$': [
       path.resolve(__dirname, './src/jison/transformer.js'),
       { 'token-stack': true },

package.json

@@ -23,13 +23,15 @@
     "git graph"
   ],
   "scripts": {
-    "build:dev": "webpack --mode development --progress --color",
-    "build:prod": "webpack --mode production --progress --color",
-    "build": "concurrently \"yarn build:dev\" \"yarn build:prod\"",
+    "clean": "rimraf dist",
+    "build:code": "node .esbuild/esbuild.cjs",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:webpack": "webpack --mode production --progress --color",
+    "build:watch": "yarn build:code --watch",
+    "build": "yarn clean; concurrently \"yarn build:code\" \"yarn build:types\"",
     "docs:build": "ts-node-esm src/docs.mts",
     "docs:verify": "ts-node-esm src/docs.mts --verify",
     "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md && yarn docs:build",
-    "build:watch": "yarn build:dev --watch",
     "release": "yarn build",
     "lint": "eslint --cache --ignore-path .gitignore . && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
@@ -43,7 +45,7 @@
     "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn test",
-    "prepare": "concurrently \"husky install\" \"yarn build:prod\" \"yarn postbuild\"",
+    "prepare": "concurrently \"husky install\" \"yarn build\"",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -97,6 +99,8 @@
     "cypress": "9.7.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
+    "esbuild": "^0.15.6",
+    "esbuild-loader": "^2.19.0",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -110,6 +114,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.0.3",
     "jest-environment-jsdom": "^29.0.2",
+    "jest-esbuild": "^0.2.9",
     "jison": "^0.4.18",
     "js-base64": "3.7.2",
     "lint-staged": "^13.0.0",
@@ -118,6 +123,7 @@
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
+    "rimraf": "^3.0.2",
     "start-server-and-test": "^1.12.6",
     "terser-webpack-plugin": "^5.3.6",
     "ts-jest": "^28.0.8",

src/dagre-wrapper/intersect/intersect-node.js

@@ -1,5 +1,3 @@
-module.exports = intersectNode;
-
 /**
  * @param node
  * @param point
@@ -8,3 +6,5 @@ function intersectNode(node, point) {
   // console.info('Intersect Node');
   return node.intersect(point);
 }
+
+export default intersectNode;

src/diagrams/c4/c4Renderer.js

@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
+import svgDraw from './svgDraw';
 import { log } from '../../logger';
 import { parser } from './parser/c4Diagram';
 import common from '../common/common';

src/diagrams/flowchart/parser/flow.jison

@@ -271,7 +271,7 @@ document
 	{ $$ = [];}
 	| document line
 	{
-	    if($2 !== []){
+	    if(!Array.isArray($2) || $2.length > 0){
 	        $1.push($2);
 	    }
 	    $$=$1;}

src/diagrams/sequence/sequenceRenderer.js → src/diagrams/sequence/sequenceRenderer.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { select, selectAll } from 'd3';
 import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
 import { log } from '../../logger';

src/diagrams/user-journey/journeyRenderer.js → src/diagrams/user-journey/journeyRenderer.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { select } from 'd3';
 import svgDraw from './svgDraw';
 import { getConfig } from '../../config';