Merge pull request #3386 from mermaid-js/sidv/esbuild

ESBuild

.esbuild/esbuild.cjs

@@ -0,0 +1,20 @@
+const { esmBuild, esmCoreBuild, iifeBuild } = require('./util.cjs');
+const { build } = require('esbuild');
+
+const handler = (e) => {
+  console.error(e);
+  process.exit(1);
+};
+const watch = process.argv.includes('--watch');
+
+// mermaid.js
+build(iifeBuild({ minify: false, watch })).catch(handler);
+// mermaid.esm.mjs
+build(esmBuild({ minify: false, watch })).catch(handler);
+
+// mermaid.min.js
+build(esmBuild()).catch(handler);
+// mermaid.esm.min.mjs
+build(iifeBuild()).catch(handler);
+// mermaid.core.mjs (node_modules unbundled)
+build(esmCoreBuild()).catch(handler);

.esbuild/serve.cjs

@@ -0,0 +1,53 @@
+const esbuild = require('esbuild');
+const http = require('http');
+const path = require('path');
+const { iifeBuild } = require('./util.cjs');
+
+// Start esbuild's server on a random local port
+esbuild
+  .serve(
+    {
+      servedir: path.join(__dirname, '..'),
+    },
+    iifeBuild({ 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,100 @@
+const { Generator } = require('jison');
+const fs = require('fs');
+const { dependencies } = require('../package.json');
+
+/** @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'],
+    outdir: 'dist',
+    plugins: [jisonPlugin],
+    sourcemap: 'external',
+    ...override,
+  };
+};
+
+const getOutFiles = (extension) => {
+  return {
+    [`mermaid${extension}`]: 'src/mermaid.ts',
+    [`diagramAPI${extension}`]: 'src/diagram-api/diagramAPI.ts',
+  };
+};
+/**
+ * Build options for mermaid.esm.* build.
+ *
+ * For ESM browser use.
+ *
+ * @param {Options} override - Override options.
+ * @returns {Options} ESBuild build options.
+ */
+exports.esmBuild = (override = { minify: true }) => {
+  return buildOptions({
+    format: 'esm',
+    entryPoints: getOutFiles(`.esm${override.minify ? '.min' : ''}`),
+    outExtension: { '.js': '.mjs' },
+    ...override,
+  });
+};
+
+/**
+ * Build options for mermaid.core.* build.
+ *
+ * This build does not bundle `./node_modules/`, as it is designed to be used with
+ * Webpack/ESBuild/Vite to use mermaid inside an app/website.
+ *
+ * @param {Options} override - Override options.
+ * @returns {Options} ESBuild build options.
+ */
+exports.esmCoreBuild = (override) => {
+  return buildOptions({
+    format: 'esm',
+    entryPoints: getOutFiles(`.core`),
+    outExtension: { '.js': '.mjs' },
+    external: ['require', 'fs', 'path', ...Object.keys(dependencies)],
+    platform: 'neutral',
+    ...override,
+  });
+};
+
+/**
+ * Build options for mermaid.js build.
+ *
+ * For IIFE browser use (where ESM is not yet supported).
+ *
+ * @param {Options} override - Override options.
+ * @returns {Options} ESBuild build options.
+ */
+exports.iifeBuild = (override = { minify: true }) => {
+  return buildOptions({
+    entryPoints: getOutFiles(override.minify ? '.min' : ''),
+    format: 'iife',
+    ...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({
+        moduleMain: '() => {}', // disable moduleMain (default one requires Node.JS modules)
+      });
+      return { contents, warnings: [] };
+    });
+  },
+};

.gitignore

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

.webpack/webpack.config.babel.js

@@ -3,43 +3,44 @@ import nodeExternals from 'webpack-node-externals';
 import baseConfig from './webpack.config.base';
 
 export default (_env, args) => {
-  switch (args.mode) {
-    case 'development':
-      return [
-        baseConfig,
-        merge(baseConfig, {
-          externals: [nodeExternals()],
-          output: {
-            filename: '[name].core.js',
-          },
-        }),
-      ];
-    case 'production':
-      return [
-        // umd
-        merge(baseConfig, {
-          output: {
-            filename: '[name].min.js',
-          },
-        }),
-        // esm
-        mergeWithCustomize({
-          customizeObject: customizeObject({
-            'output.library': 'replace',
-          }),
-        })(baseConfig, {
-          experiments: {
-            outputModule: true,
-          },
-          output: {
-            library: {
-              type: 'module',
-            },
-            filename: '[name].esm.min.mjs',
-          },
-        }),
-      ];
-    default:
-      throw new Error('No matching configuration was found!');
-  }
+  return [
+    // non-minified
+    merge(baseConfig, {
+      optimization: {
+        minimize: false,
+      },
+    }),
+    // core [To be used by webpack/esbuild/vite etc to bundle mermaid]
+    merge(baseConfig, {
+      externals: [nodeExternals()],
+      output: {
+        filename: '[name].core.js',
+      },
+      optimization: {
+        minimize: false,
+      },
+    }),
+    // umd
+    merge(baseConfig, {
+      output: {
+        filename: '[name].min.js',
+      },
+    }),
+    // esm
+    mergeWithCustomize({
+      customizeObject: customizeObject({
+        'output.library': 'replace',
+      }),
+    })(baseConfig, {
+      experiments: {
+        outputModule: true,
+      },
+      output: {
+        library: {
+          type: 'module',
+        },
+        filename: '[name].esm.min.mjs',
+      },
+    }),
+  ];
 };

.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',
-        },
-      },
-    ],
-  },
 });