Merge b83f183 into b72dad9

.esbuild/esbuild.cjs

@@ -13,8 +13,8 @@ build(iifeBuild({ minify: false, watch })).catch(handler);
 build(esmBuild({ minify: false, watch })).catch(handler);
 
 // mermaid.min.js
-build(esmBuild()).catch(handler);
-// mermaid.esm.min.mjs
 build(iifeBuild()).catch(handler);
+// mermaid.esm.min.mjs
+build(esmBuild()).catch(handler);
 // mermaid.core.mjs (node_modules unbundled)
 build(esmCoreBuild()).catch(handler);

.esbuild/jisonTransformer.cjs

@@ -0,0 +1,14 @@
+const { Generator } = require('jison');
+exports.transformJison = (src) => {
+  const parser = new Generator(src, {
+    moduleType: 'js',
+    'token-stack': true,
+  });
+  const source = parser.generate({ moduleMain: '() => {}' });
+  const exporter = `
+	parser.parser = parser;
+	export { parser };
+	export default parser;
+	`;
+  return `${source} ${exporter}`;
+};

.esbuild/serve.cjs

@@ -1,53 +1,79 @@
 const esbuild = require('esbuild');
 const http = require('http');
-const path = require('path');
-const { iifeBuild } = require('./util.cjs');
+const { iifeBuild, esmBuild } = require('./util.cjs');
+const express = require('express');
 
-// Start esbuild's server on a random local port
-esbuild
-  .serve(
-    {
-      servedir: path.join(__dirname, '..'),
+// Start 2 esbuild servers. One for IIFE and one for ESM
+// Serve 2 static directories: demo & cypress/platform
+// Have 3 entry points:
+// mermaid: './src/mermaid',
+// e2e: './cypress/platform/viewer.js',
+// 'bundle-test': './cypress/platform/bundle-test.js',
+
+const getEntryPointsAndExtensions = (format) => {
+  return {
+    entryPoints: {
+      mermaid: './src/mermaid',
+      e2e: 'cypress/platform/viewer.js',
+      'bundle-test': 'cypress/platform/bundle-test.js',
     },
-    iifeBuild({ minify: false })
-  )
-  .then((result) => {
-    // The result tells us where esbuild's local server is
-    const { host, port } = result;
+    outExtension: { '.js': format === 'iife' ? '.js' : '.esm.mjs' },
+  };
+};
 
-    // Then start a proxy server on port 3000
-    http
-      .createServer((req, res) => {
-        if (req.url.includes('mermaid.js')) {
-          req.url = '/dist/mermaid.js';
+const generateHandler = (server) => {
+  return (req, res) => {
+    const options = {
+      hostname: server.host,
+      port: server.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
+      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;
         }
-        const options = {
-          hostname: host,
-          port: port,
-          path: req.url,
-          method: req.method,
-          headers: req.headers,
-        };
+      }
+      // 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 });
+  };
+};
 
-        // 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;
-            }
-          }
+(async () => {
+  const iifeServer = await esbuild.serve(
+    {},
+    {
+      ...iifeBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
+      ...getEntryPointsAndExtensions('iife'),
+    }
+  );
+  const esmServer = await esbuild.serve(
+    {},
+    {
+      ...esmBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
+      ...getEntryPointsAndExtensions('esm'),
+    }
+  );
+  const app = express();
 
-          // Otherwise, forward the response from esbuild to the client
-          res.writeHead(proxyRes.statusCode, proxyRes.headers);
-          proxyRes.pipe(res, { end: true });
-        });
+  app.use(express.static('demos'));
+  app.use(express.static('cypress/platform'));
+  app.all('/mermaid.js', generateHandler(iifeServer));
+  app.all('/mermaid.esm.mjs', generateHandler(esmServer));
 
-        // Forward the body of the request to esbuild
-        req.pipe(proxyReq, { end: true });
-      })
-      .listen(3000);
+  app.all('/e2e.esm.mjs', generateHandler(esmServer));
+  app.all('/bundle-test.esm.mjs', generateHandler(esmServer));
+  app.listen(9000, () => {
+    console.log(`Listening on http://localhost:9000`);
   });
+})();

.esbuild/util.cjs

@@ -1,4 +1,4 @@
-const { Generator } = require('jison');
+const { transformJison } = require('./jisonTransformer.cjs');
 const fs = require('fs');
 const { dependencies } = require('../package.json');
 
@@ -17,21 +17,16 @@ const buildOptions = (override = {}) => {
     globalName: 'mermaid',
     platform: 'browser',
     tsconfig: 'tsconfig.json',
-    resolveExtensions: ['.ts', '.js', '.json', '.jison'],
+    resolveExtensions: ['.ts', '.js', '.mjs', '.json', '.jison'],
     external: ['require', 'fs', 'path'],
-    outdir: 'dist',
+    entryPoints: ['src/mermaid.ts'],
+    outfile: 'dist/mermaid.min.js',
     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.
  *
@@ -43,8 +38,7 @@ const getOutFiles = (extension) => {
 exports.esmBuild = (override = { minify: true }) => {
   return buildOptions({
     format: 'esm',
-    entryPoints: getOutFiles(`.esm${override.minify ? '.min' : ''}`),
-    outExtension: { '.js': '.mjs' },
+    outfile: `dist/mermaid.esm${override.minify ? '.min' : ''}.mjs`,
     ...override,
   });
 };
@@ -61,8 +55,7 @@ exports.esmBuild = (override = { minify: true }) => {
 exports.esmCoreBuild = (override) => {
   return buildOptions({
     format: 'esm',
-    entryPoints: getOutFiles(`.core`),
-    outExtension: { '.js': '.mjs' },
+    outfile: `dist/mermaid.core.mjs`,
     external: ['require', 'fs', 'path', ...Object.keys(dependencies)],
     platform: 'neutral',
     ...override,
@@ -79,8 +72,11 @@ exports.esmCoreBuild = (override) => {
  */
 exports.iifeBuild = (override = { minify: true }) => {
   return buildOptions({
-    entryPoints: getOutFiles(override.minify ? '.min' : ''),
+    outfile: `dist/mermaid${override.minify ? '.min' : ''}.js`,
     format: 'iife',
+    footer: {
+      js: 'mermaid = mermaid.default;',
+    },
     ...override,
   });
 };
@@ -91,9 +87,7 @@ 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({
-        moduleMain: '() => {}', // disable moduleMain (default one requires Node.JS modules)
-      });
+      const contents = transformJison(source);
       return { contents, warnings: [] };
     });
   },

.github/workflows/lint.yml

@@ -40,18 +40,3 @@ jobs:
 
       - name: Verify Docs
         run: yarn docs:verify
-
-      - name: Check no `console.log()` in .jison files
-        # ESLint can't parse .jison files directly
-        # In the future, it might be worth making a `eslint-plugin-jison`, so
-        # that this will be built into the `yarn lint` command.
-        run: |
-          shopt -s globstar
-          mkdir -p tmp/
-          for jison_file in src/**/*.jison; do
-            outfile="tmp/$(basename -- "$jison_file" .jison)-jison.js"
-            echo "Converting $jison_file to $outfile"
-            # default module-type (CJS) always adds a console.log()
-            yarn jison "$jison_file" --outfile "$outfile" --module-type "amd"
-          done
-          yarn eslint --no-eslintrc --rule no-console:error --parser "@babel/eslint-parser" "./tmp/*-jison.js"

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
   "src/docs/**": ["yarn docs:build --git"],
   "src/docs.mts": ["yarn docs:build --git"],
-  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"]
+  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
+  "*.jison": ["yarn lint:jison"]
 }