build: group webpack & ignore dist & support yarn1.x (#2551)

.gitignore

@@ -4,7 +4,7 @@ node_modules/
 coverage/
 .idea/
 
-dist/
+dist
 
 yarn-error.log
 .npmrc

.webpack/loaders/jison.js

@@ -1,6 +1,19 @@
 const { Generator } = require('jison');
 const validate = require('schema-utils');
-const schema = require('./parser-options-schema.json');
+
+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();

.webpack/webpack.config.babel.js

@@ -0,0 +1,45 @@
+import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
+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!');
+  }
+};

.webpack/webpack.config.base.js

@@ -0,0 +1,54 @@
+import path from 'path';
+
+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.js',
+  },
+  resolve: {
+    extensions: ['.wasm', '.mjs', '.js', '.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: /\.js$/,
+        include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        // 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',
+};

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

@@ -0,0 +1,37 @@
+import baseConfig, { resolveRoot } from './webpack.config.base';
+import { merge } from 'webpack-merge';
+
+export default merge(baseConfig, {
+  mode: 'development',
+  entry: {
+    mermaid: './src/mermaid.js',
+    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',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+});

demos/dataflowchart.html

@@ -36,17 +36,17 @@
       theme: 'forest',
       logLevel: 3,
       securityLevel: 'loose',
-      flowchart: { curve: 'basis' }
+      flowchart: { curve: 'basis' },
     });
   </script>
   <script>
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
+      console.log('clicked', nodeId);
-      var originalBgColor = document.querySelector('body').style.backgroundColor
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
-      document.querySelector('body').style.backgroundColor = 'yellow'
+      document.querySelector('body').style.backgroundColor = 'yellow';
-      setTimeout(function() {
+      setTimeout(function () {
-        document.querySelector('body').style.backgroundColor = originalBgColor
+        document.querySelector('body').style.backgroundColor = originalBgColor;
-      }, 100)
+      }, 100);
     }
   </script>
 </body>

demos/flowchart.html

@@ -1088,17 +1088,17 @@
       theme: 'forest',
       logLevel: 3,
       securityLevel: 'loose',
-      flowchart: { curve: 'basis' }
+      flowchart: { curve: 'basis' },
     });
   </script>
   <script>
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
+      console.log('clicked', nodeId);
-      var originalBgColor = document.querySelector('body').style.backgroundColor
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
-      document.querySelector('body').style.backgroundColor = 'yellow'
+      document.querySelector('body').style.backgroundColor = 'yellow';
-      setTimeout(function() {
+      setTimeout(function () {
-        document.querySelector('body').style.backgroundColor = originalBgColor
+        document.querySelector('body').style.backgroundColor = originalBgColor;
-      }, 100)
+      }, 100);
     }
   </script>
 </body>

demos/index.html

@@ -790,31 +790,31 @@
   </script>
   <script>
     function ganttTestClick(a, b, c) {
-      console.log("a:", a)
+      console.log('a:', a);
-      console.log("b:", b)
+      console.log('b:', b);
-      console.log("c:", c)
+      console.log('c:', c);
     }
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
+      console.log('clicked', nodeId);
-      var originalBgColor = document.querySelector('body').style.backgroundColor
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
-      document.querySelector('body').style.backgroundColor = 'yellow'
+      document.querySelector('body').style.backgroundColor = 'yellow';
-      setTimeout(function() {
+      setTimeout(function () {
-        document.querySelector('body').style.backgroundColor = originalBgColor
+        document.querySelector('body').style.backgroundColor = originalBgColor;
-      }, 100)
+      }, 100);
     }
   </script>
   <script>
     const testLineEndings = (test, input) => {
       try {
-        mermaid.render(test, input, () => { });
+        mermaid.render(test, input, () => {});
       } catch (err) {
-        console.error("Error in %s:\n\n%s", test, err);
+        console.error('Error in %s:\n\n%s', test, err);
       }
     };
 
-    testLineEndings("CR", "graph LR\rsubgraph CR\rA --> B\rend");
+    testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
-    testLineEndings("LF", "graph LR\nsubgraph LF\nA --> B\nend");
+    testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
-    testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
+    testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
   </script>
 </body>
 

dist/mermaid.esm.min.mjs.LICENSE.txt

@@ -1,32 +0,0 @@
-/*!
-   * Wait for document loaded before starting the execution
-   */
-
-/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
-
-/*! Check if previously processed */
-
-/*! sequence config was passed as #1 */
-
-/**
- * @license
- * Copyright (c) 2012-2013 Chris Pettitt
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */

dist/mermaid.min.js.LICENSE.txt

@@ -1,32 +0,0 @@
-/*!
-   * Wait for document loaded before starting the execution
-   */
-
-/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
-
-/*! Check if previously processed */
-
-/*! sequence config was passed as #1 */
-
-/**
- * @license
- * Copyright (c) 2012-2013 Chris Pettitt
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */

package.json

@@ -21,8 +21,8 @@
     "git graph"
   ],
   "scripts": {
-    "build:development": "webpack --progress --color",
+    "build:development": "webpack --mode development --progress --color",
-    "build:production": "yarn build:development --mode production --config webpack.config.prod.babel.js",
+    "build:production": "webpack --mode production --progress --color",
     "build": "concurrently \"yarn build:development\" \"yarn build:production\"",
     "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:development --watch",
@@ -33,7 +33,7 @@
     "cypress": "percy exec -- cypress run",
     "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.config.e2e.js",
+    "dev": "webpack serve --config ./.webpack/webpack.config.e2e.babel.js",
     "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn test",
@@ -107,6 +107,7 @@
     "webpack": "^5.53.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.3.0",
+    "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },
   "files": [

src/jison/parser-options-schema.json

@@ -1,13 +0,0 @@
-{
-  "title": "Jison Parser options",
-  "type": "object",
-  "properties": {
-      "token-stack": {
-          "type": "boolean"
-      },
-      "debug": {
-          "type": "boolean"
-      }
-  },
-  "additionalProperties": false
-}

webpack.config.babel.js

@@ -1,11 +0,0 @@
-import nodeExternals from 'webpack-node-externals';
-
-import { jsConfig } from './webpack.config.base';
-
-const config = jsConfig();
-
-const coreConfig = jsConfig();
-coreConfig.externals = [nodeExternals()];
-coreConfig.output.filename = '[name].core.js';
-
-export default [config, coreConfig];

webpack.config.base.js

@@ -1,60 +0,0 @@
-import path from 'path';
-
-const jisonRule = {
-  test: /\.jison$/,
-  use: {
-    loader: path.resolve(__dirname, './src/jison/loader'),
-    options: {
-      'token-stack': true,
-    },
-  },
-};
-
-const jsRule = {
-  test: /\.js$/,
-  include: [
-    path.resolve(__dirname, './src'),
-    path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
-  ],
-  use: {
-    loader: 'babel-loader',
-  },
-};
-
-const scssRule = {
-  // load scss to string
-  test: /\.scss$/,
-  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
-};
-
-export const jsConfig = () => {
-  return {
-    amd: false, // https://github.com/lodash/lodash/issues/3052
-    mode: 'development',
-    target: 'web',
-    entry: {
-      mermaid: './src/mermaid.js',
-    },
-    resolve: {
-      extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
-      fallback: {
-        fs: false, // jison generated code requires 'fs'
-        path: require.resolve('path-browserify'),
-      },
-    },
-    output: {
-      path: path.join(__dirname, './dist/'),
-      filename: '[name].js',
-      library: {
-        name: 'mermaid',
-        type: 'umd',
-        export: 'default',
-      },
-      globalObject: 'typeof self !== "undefined" ? self : this',
-    },
-    module: {
-      rules: [jsRule, scssRule, jisonRule],
-    },
-    devtool: 'source-map',
-  };
-};

webpack.config.e2e.js

@@ -1,67 +0,0 @@
-const path = require('path');
-
-const jsRule = {
-  test: /\.js$/,
-  exclude: /node_modules/,
-  use: {
-    loader: 'babel-loader',
-  },
-};
-
-const jisonRule = {
-  test: /\.jison$/,
-  use: {
-    loader: path.resolve(__dirname, './src/jison/loader'),
-    options: {
-      'token-stack': true,
-    },
-  },
-};
-
-const scssRule = {
-  // load scss to string
-  test: /\.scss$/,
-  use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
-};
-
-module.exports = {
-  amd: false, // https://github.com/lodash/lodash/issues/3052
-  mode: 'development',
-  target: 'web',
-  entry: {
-    mermaid: './src/mermaid.js',
-    e2e: './cypress/platform/viewer.js',
-    'bundle-test': './cypress/platform/bundle-test.js',
-  },
-  resolve: {
-    extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
-    fallback: {
-      fs: false, // jison generated code requires 'fs'
-      path: require.resolve('path-browserify'),
-    },
-  },
-  output: {
-    path: path.join(__dirname, './dist/'),
-    filename: '[name].js',
-    library: {
-      name: 'mermaid',
-      type: 'umd',
-      export: 'default',
-    },
-  },
-  devServer: {
-    compress: true,
-    port: 9000,
-    static: [
-      { directory: path.join(__dirname, 'cypress', 'platform') },
-      { directory: path.join(__dirname, 'dist') },
-    ],
-  },
-  module: {
-    rules: [jsRule, scssRule, jisonRule],
-  },
-  externals: {
-    mermaid: 'mermaid',
-  },
-  devtool: 'source-map',
-};

webpack.config.prod.babel.js

@@ -1,17 +0,0 @@
-import { jsConfig } from './webpack.config.base';
-
-const umdConfig = jsConfig();
-umdConfig.mode = 'production';
-umdConfig.output.filename = '[name].min.js';
-
-const esmConfig = jsConfig();
-esmConfig.mode = 'production';
-esmConfig.output.library = {
-  type: 'module',
-};
-esmConfig.experiments = {
-  outputModule: true,
-};
-esmConfig.output.filename = '[name].esm.min.mjs';
-
-export default [umdConfig, esmConfig];