Merge pull request #3452 from mermaid-js/sidv/removeWebpackBabel

Remove webpack & babel

.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, esmBuild } = require('./util.cjs');
-const { iifeBuild } = require('./util.cjs');
+const express = require('express');
 
-// Start esbuild's server on a random local port
+// Start 2 esbuild servers. One for IIFE and one for ESM
-esbuild
+// Serve 2 static directories: demo & cypress/platform
-  .serve(
+// Have 3 entry points:
-    {
+// mermaid: './src/mermaid',
-      servedir: path.join(__dirname, '..'),
+// 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 })
+    outExtension: { '.js': format === 'iife' ? '.js' : '.esm.mjs' },
-  )
+  };
-  .then((result) => {
+};
-    // The result tells us where esbuild's local server is
-    const { host, port } = result;
 
-    // Then start a proxy server on port 3000
+const generateHandler = (server) => {
-    http
+  return (req, res) => {
-      .createServer((req, res) => {
+    const options = {
-        if (req.url.includes('mermaid.js')) {
+      hostname: server.host,
-          req.url = '/dist/mermaid.js';
+      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,
+      // Otherwise, forward the response from esbuild to the client
-          port: port,
+      res.writeHead(proxyRes.statusCode, proxyRes.headers);
-          path: req.url,
+      proxyRes.pipe(res, { end: true });
-          method: req.method,
+    });
-          headers: req.headers,
+    // Forward the body of the request to esbuild
-        };
+    req.pipe(proxyReq, { end: true });
+  };
+};
 
-        // Forward each incoming request to esbuild
+(async () => {
-        const proxyReq = http.request(options, (proxyRes) => {
+  const iifeServer = await esbuild.serve(
-          // If esbuild returns "not found", send a custom 404 page
+    {},
-          console.error('pp', req.url);
+    {
-          if (proxyRes.statusCode === 404) {
+      ...iifeBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
-            if (!req.url.endsWith('.html')) {
+      ...getEntryPointsAndExtensions('iife'),
-              res.writeHead(404, { 'Content-Type': 'text/html' });
+    }
-              res.end('<h1>A custom 404 page</h1>');
+  );
-              return;
+  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
+  app.use(express.static('demos'));
-          res.writeHead(proxyRes.statusCode, proxyRes.headers);
+  app.use(express.static('cypress/platform'));
-          proxyRes.pipe(res, { end: true });
+  app.all('/mermaid.js', generateHandler(iifeServer));
-        });
+  app.all('/mermaid.esm.mjs', generateHandler(esmServer));
 
-        // Forward the body of the request to esbuild
+  app.all('/e2e.esm.mjs', generateHandler(esmServer));
-        req.pipe(proxyReq, { end: true });
+  app.all('/bundle-test.esm.mjs', generateHandler(esmServer));
-      })
+  app.listen(9000, () => {
-      .listen(3000);
+    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' : ''}`),
+    outfile: `dist/mermaid.esm${override.minify ? '.min' : ''}.mjs`,
-    outExtension: { '.js': '.mjs' },
     ...override,
   });
 };
@@ -61,8 +55,7 @@ exports.esmBuild = (override = { minify: true }) => {
 exports.esmCoreBuild = (override) => {
   return buildOptions({
     format: 'esm',
-    entryPoints: getOutFiles(`.core`),
+    outfile: `dist/mermaid.core.mjs`,
-    outExtension: { '.js': '.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({
+      const contents = transformJison(source);
-        moduleMain: '() => {}', // disable moduleMain (default one requires Node.JS modules)
-      });
       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"]
 }

.webpack/loaders/jison.js

@@ -1,25 +0,0 @@
-const { Generator } = require('jison');
-const validate = require('schema-utils');
-
-const schema = {
-  title: 'Jison Parser options',
-  type: 'object',
-  properties: {
-    'token-stack': {
-      type: 'boolean',
-    },
-    debug: {
-      type: 'boolean',
-    },
-  },
-  additionalProperties: false,
-};
-
-module.exports = function jisonLoader(source) {
-  const options = this.getOptions();
-  (validate.validate || validate)(schema, options, {
-    name: 'Jison Loader',
-    baseDataPath: 'options',
-  });
-  return new Generator(source, options).generate();
-};

.webpack/webpack.config.babel.js

@@ -1,46 +0,0 @@
-import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
-import nodeExternals from 'webpack-node-externals';
-import baseConfig from './webpack.config.base';
-
-export default (_env, args) => {
-  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,71 +0,0 @@
-import path from 'path';
-const esbuild = require('esbuild');
-const { ESBuildMinifyPlugin } = require('esbuild-loader');
-export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
-
-export default {
-  amd: false, // https://github.com/lodash/lodash/issues/3052
-  target: 'web',
-  entry: {
-    mermaid: './src/mermaid',
-  },
-  resolve: {
-    extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
-    fallback: {
-      fs: false, // jison generated code requires 'fs'
-      path: require.resolve('path-browserify'),
-    },
-  },
-  output: {
-    path: resolveRoot('./dist'),
-    filename: '[name].js',
-    library: {
-      name: 'mermaid',
-      type: 'umd',
-      export: 'default',
-    },
-    globalObject: 'typeof self !== "undefined" ? self : this',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.js$/,
-        include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
-        use: {
-          loader: 'esbuild-loader',
-          options: {
-            implementation: esbuild,
-            target: 'es2015',
-          },
-        },
-      },
-      {
-        // load scss to string
-        test: /\.scss$/,
-        use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
-      },
-      {
-        test: /\.jison$/,
-        use: {
-          loader: path.resolve(__dirname, './loaders/jison.js'),
-          options: {
-            'token-stack': true,
-          },
-        },
-      },
-    ],
-  },
-  devtool: 'source-map',
-  optimization: {
-    minimizer: [
-      new ESBuildMinifyPlugin({
-        target: 'es2015',
-      }),
-    ],
-  },
-};

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

@@ -1,26 +0,0 @@
-import baseConfig, { resolveRoot } from './webpack.config.base';
-import { merge } from 'webpack-merge';
-
-export default merge(baseConfig, {
-  mode: 'development',
-  entry: {
-    mermaid: './src/mermaid',
-    e2e: './cypress/platform/viewer.js',
-    'bundle-test': './cypress/platform/bundle-test.js',
-  },
-  output: {
-    globalObject: 'window',
-  },
-  devServer: {
-    compress: true,
-    port: 9000,
-    static: [
-      { directory: resolveRoot('cypress', 'platform') },
-      { directory: resolveRoot('dist') },
-      { directory: resolveRoot('demos') },
-    ],
-  },
-  externals: {
-    mermaid: 'mermaid',
-  },
-});

babel.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: 'defaults, ie >= 11, current node',
-      },
-    ],
-  ],
-};

cypress/platform/e2e.html

@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8" />
     <!-- <meta charset="iso-8859-15"/> -->
-    <script src="/e2e.js"></script>
+    <script src="/e2e.esm.mjs" type="module"></script>
     <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
@@ -37,7 +37,7 @@
     </style>
   </head>
   <body>
-    <script src="./mermaid.js"></script>
+    <!-- <script src="./mermaid.js"></script> -->
     <script>
       // Notice startOnLoad=false
       // This prevents default handling in mermaid from render before the e2e logic is applied

cypress/platform/viewer.js

@@ -3,7 +3,8 @@ import mermaid2 from '../../src/mermaid';
 
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
- * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
+ * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
+ * page.
  */
 const contentLoaded = function () {
   let pos = document.location.href.indexOf('?graph=');
@@ -32,8 +33,8 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    global.mermaid.initialize(graphObj.mermaid);
+    mermaid2.initialize(graphObj.mermaid);
-    global.mermaid.init();
+    mermaid2.init();
   }
 };
 

cypress/platform/webpackUsage.html

@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="graph-to-be"></div>
-    <script src="./bundle-test.js" charset="utf-8"></script>
+    <script src="./bundle-test.esm.mjs" type="module" charset="utf-8"></script>
   </body>
 </html>

cypress/platform/xss.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <script src="/e2e.js"></script>
+    <script src="/e2e.esm.mjs" type="module"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {

demos/er.html

@@ -23,8 +23,8 @@ ORDER ||--|{ LINE-ITEM : contains
 CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
     </pre>
 
-    <script src="./mermaid.js"></script>
+    <script type="module">
-    <script>
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

jest.config.cjs

@@ -7,7 +7,7 @@ module.exports = {
   transform: {
     '^.+\\.[jt]sx?$': 'esbuild-jest',
     '^.+\\.jison$': [
-      path.resolve(__dirname, './src/jison/transformer.js'),
+      path.resolve(__dirname, './src/jison/transformer.cjs'),
       { 'token-stack': true },
     ],
   },

package.json

@@ -5,6 +5,7 @@
   "main": "dist/mermaid.core.mjs",
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -26,22 +27,21 @@
     "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:new": "concurrently \"yarn build:code\" \"yarn build:types\"",
+    "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
-    "build": "yarn clean; yarn build:webpack",
+    "build": "yarn clean; yarn build:esbuild",
+    "dev": "node .esbuild/serve.cjs",
     "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",
     "release": "yarn build",
-    "lint": "eslint --cache --ignore-path .gitignore . && prettier --check .",
+    "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
-    "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
+    "lint:jison": "ts-node-esm src/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
-    "dev": "webpack serve --config ./.webpack/webpack.config.e2e.babel.js",
     "ci": "jest src/.*",
     "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
@@ -81,29 +81,24 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
-    "@babel/core": "^7.19.0",
-    "@babel/eslint-parser": "^7.14.7",
-    "@babel/preset-env": "^7.19.0",
-    "@babel/register": "^7.14.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.0.0",
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.3.4",
+    "@types/eslint": "^8.4.6",
+    "@types/express": "^4.17.13",
     "@types/jest": "^28.1.7",
     "@types/lodash": "^4.14.184",
     "@types/stylis": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
-    "babel-jest": "^29.0.3",
-    "babel-loader": "^8.2.2",
     "concurrently": "^7.4.0",
-    "css-to-string-loader": "^0.1.3",
+    "coveralls": "^3.0.2",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
     "esbuild": "^0.15.6",
     "esbuild-jest": "^0.5.0",
-    "esbuild-loader": "^2.19.0",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -112,6 +107,7 @@
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-markdown": "^3.0.0",
+    "express": "^4.18.1",
     "globby": "^13.1.2",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
@@ -127,17 +123,10 @@
     "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",
-    "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",
-    "unist-util-flatmap": "^1.0.0",
+    "unist-util-flatmap": "^1.0.0"
-    "webpack": "^5.53.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.11.0",
-    "webpack-merge": "^5.8.0",
-    "webpack-node-externals": "^3.0.0"
   },
   "resolutions": {
     "d3": "^7.0.0"

src/jison/lint.mts

@@ -0,0 +1,31 @@
+/* eslint-disable no-console */
+import { readFile } from 'fs/promises';
+import { globby } from 'globby';
+import { ESLint } from 'eslint';
+// @ts-ignore no typings
+import jison from 'jison';
+
+const linter = new ESLint({
+  overrideConfig: { rules: { 'no-console': 'error' }, parser: '@typescript-eslint/parser' },
+  useEslintrc: false,
+});
+
+const lint = async (file: string): Promise<boolean> => {
+  const jisonCode = await readFile(file, 'utf8');
+  // @ts-ignore no typings
+  const jsCode = new jison.Generator(jisonCode, { moduleType: 'amd' }).generate();
+  const [result] = await linter.lintText(jsCode);
+  if (result.errorCount > 0) {
+    console.error(`Linting failed for ${file}`);
+    console.error(result.messages);
+  }
+  return result.errorCount === 0;
+};
+
+(async () => {
+  const jisonFiles = await globby(['./src/**/*.jison'], { dot: true });
+  const lintResults = await Promise.all(jisonFiles.map(lint));
+  if (lintResults.some((result) => result === false)) {
+    process.exit(1);
+  }
+})();