Merge pull request #3437 from aloisklink/esbuild-backwards-compatible-core-js

Esbuild: backwards-compatible `mermaid.core.mjs`

.esbuild/esbuild.cjs

@@ -1,4 +1,4 @@
-const { esmBuild, iifeBuild } = require('./util.cjs');
+const { esmBuild, esmCoreBuild, iifeBuild } = require('./util.cjs');
 const { build } = require('esbuild');
 
 const handler = (e) => {
@@ -12,10 +12,9 @@ build(iifeBuild({ minify: false, watch })).catch(handler);
 // mermaid.esm.mjs
 build(esmBuild({ minify: false, watch })).catch(handler);
 
-// mermaid.core.js
-build(iifeBuild({ minify: false, core: true })).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/util.cjs

@@ -1,5 +1,6 @@
 const { Generator } = require('jison');
 const fs = require('fs');
+const { dependencies } = require('../package.json');
 
 /** @typedef {import('esbuild').BuildOptions} Options */
 
@@ -27,8 +28,12 @@ const buildOptions = (override = {}) => {
 };
 
 /**
- * @param {Options} override
- * @returns {Options}
+ * 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({
@@ -39,17 +44,35 @@ exports.esmBuild = (override = { minify: true }) => {
 };
 
 /**
- * @param {Options & { core?: boolean }} override
- * @returns {Options}
+ * 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.iifeBuild = (override = { minify: true, core: false }) => {
-  const core = override.core;
-  if (core && override.minify) {
-    throw new Error('Cannot minify core build');
-  }
-  delete override.core;
+exports.esmCoreBuild = (override) => {
   return buildOptions({
-    outfile: `dist/mermaid${override.minify ? '.min' : core ? '.core' : ''}.js`,
+    format: 'esm',
+    outfile: `dist/mermaid.core.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({
+    outfile: `dist/mermaid${override.minify ? '.min' : ''}.js`,
     format: 'iife',
     ...override,
   });
@@ -61,7 +84,9 @@ const jisonPlugin = {
     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();
+      const contents = new Generator(source, { 'token-stack': true }).generate({
+        moduleMain: '() => {}', // disable moduleMain (default one requires Node.JS modules)
+      });
       return { contents, warnings: [] };
     });
   },

cypress/platform/bundle-test.js

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

package.json

@@ -2,13 +2,13 @@
   "name": "mermaid",
   "version": "9.1.6",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid.min.js",
-  "module": "dist/mermaid.esm.min.mjs",
+  "main": "dist/mermaid.core.mjs",
+  "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
-      "import": "./dist/mermaid.esm.min.mjs",
+      "import": "./dist/mermaid.core.mjs",
       "types": "./dist/mermaid.d.ts"
     },
     "./*": "./*"