Serve

.esbuild/esbuild.cjs

@@ -0,0 +1,13 @@
+const { esmBuild, umdBuild } = require('./util.cjs');
+const { build } = require('esbuild');
+
+const handler = (e) => {
+  console.error(e);
+  process.exit(1);
+};
+
+build(esmBuild({ minify: false })).catch(handler);
+build(umdBuild({ minify: false })).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,54 @@
+/** @typedef {import('esbuild').BuildOptions} Options */
+
+/**
+ * @param {Options} override
+ * @returns {Options}
+ */
+const buildOptions = (override = {}) => {
+  return {
+    bundle: true,
+    minify: true,
+    keepNames: true,
+    globalName: 'mermaid',
+    platform: 'browser',
+    resolveExtensions: ['.js', '.json', '.jison'],
+    external: ['require', 'fs', 'path'],
+    entryPoints: ['src/mermaid.js'],
+    outfile: 'dist/mermaid.min.js',
+    plugins: [jisonPlugin],
+    sourcemap: 'external',
+    ...override,
+  };
+};
+
+exports.esmBuild = ({ minify = true } = {}) => {
+  return buildOptions({
+    format: 'esm',
+    outfile: `dist/mermaid.esm${minify ? '.min' : ''}.mjs`,
+    minify,
+  });
+};
+
+exports.umdBuild = ({ minify = true } = {}) => {
+  return buildOptions({ outfile: `dist/mermaid${minify ? '.min' : ''}.js`, minify });
+};
+
+const jisonPlugin = {
+  name: 'jison',
+  setup(build) {
+    const { Generator } = require('jison');
+    let fs = require('fs');
+
+    build.onLoad({ filter: /\.jison$/ }, async (args) => {
+      // Load the file from the file system
+      let source = await fs.promises.readFile(args.path, 'utf8');
+
+      try {
+        let contents = new Generator(source, {}).generate();
+        return { contents, warnings: [] };
+      } catch (e) {
+        return { errors: [] };
+      }
+    });
+  },
+};

.webpack/webpack.config.base.js

@@ -1,4 +1,5 @@
 import path from 'path';
+// const esbuild = require('esbuild');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
 
@@ -33,6 +34,7 @@ export default {
         use: {
           loader: 'esbuild-loader',
           options: {
+            // implementation: esbuild,
             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: 'esbuild-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

esbuild.cjs

@@ -1,35 +0,0 @@
-let jisonPlugin = {
-  name: 'jison',
-  setup(build) {
-    const { Generator } = require('jison');
-    let fs = require('fs');
-
-    build.onLoad({ filter: /\.jison$/ }, async (args) => {
-      // Load the file from the file system
-      let source = await fs.promises.readFile(args.path, 'utf8');
-
-      try {
-        let contents = new Generator(source, {}).generate();
-        return { contents, warnings: [] };
-      } catch (e) {
-        return { errors: [] };
-      }
-    });
-  },
-};
-
-const { build } = require('esbuild');
-build({
-  bundle: true,
-  minify: true,
-  keepNames: true,
-  globalName: 'mermaid',
-  format: 'esm',
-  platform: 'browser',
-  resolveExtensions: ['.js', '.json', '.jison'],
-  external: ['require', 'fs', 'path'],
-  entryPoints: ['src/mermaid.js'],
-  outfile: 'dist/mermaid.min.js',
-  plugins: [jisonPlugin],
-  sourcemap: 'external',
-}).catch(() => process.exit(1));

package.json

@@ -2,12 +2,12 @@
   "name": "mermaid",
   "version": "9.1.5",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "./dist/mermaid.min.js",
-  "module": "./dist/mermaid.min.js",
+  "main": "dist/mermaid.min.js",
+  "module": "dist/mermaid.esm.min.mjs",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
-      "import": "./dist/mermaid.min.js"
+      "import": "./dist/mermaid.esm.min.mjs"
     },
     "./*": "./*"
   },
@@ -21,7 +21,7 @@
     "git graph"
   ],
   "scripts": {
-    "build:fast": "node esbuild.cjs",
+    "build:fast": "node .esbuild/esbuild.cjs",
     "build:development": "webpack --mode development --progress --color",
     "build:production": "webpack --mode production --progress --color",
     "build": "concurrently \"yarn build:development\" \"yarn build:production\"",