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

MrAntix · Dec 11, 2021 · 4cd2621 · 4cd2621
1 parent 67143b7
commit 4cd2621
Show file tree

Hide file tree

Showing 26 changed files with 835 additions and 144,456 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,7 @@ node_modules/
 coverage/
 .idea/
 
-dist/
+dist
 
 yarn-error.log
 .npmrc

diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -2,4 +2,4 @@
   "*.{js,html,md}": [
       "yarn lint:fix" 
    ]
-}
+}
diff --git a/src/jison/loader.js → .webpack/loaders/jison.js b/src/jison/loader.js → .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();

diff --git a/.webpack/webpack.config.babel.js b/.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!');
+  }
+};
diff --git a/.webpack/webpack.config.base.js b/.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',
+};
diff --git a/.webpack/webpack.config.e2e.babel.js b/.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',
+        },
+      },
+    ],
+  },
+});
diff --git a/dist/dataflowchart.html → demos/dataflowchart.html b/dist/dataflowchart.html → demos/dataflowchart.html
@@ -36,17 +36,17 @@ <h2>Borders Example</h2>
       theme: 'forest',
       logLevel: 3,
       securityLevel: 'loose',
-      flowchart: { curve: 'basis' }
+      flowchart: { curve: 'basis' },
     });
   </script>
   <script>
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
+      console.log('clicked', nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function () {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
     }
   </script>
 </body>

diff --git a/dist/flowchart.html → demos/flowchart.html b/dist/flowchart.html → demos/flowchart.html
@@ -1088,17 +1088,17 @@ <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
       theme: 'forest',
       logLevel: 3,
       securityLevel: 'loose',
-      flowchart: { curve: 'basis' }
+      flowchart: { curve: 'basis' },
     });
   </script>
   <script>
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
+      console.log('clicked', nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function () {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
     }
   </script>
 </body>

diff --git a/dist/index.html → demos/index.html b/dist/index.html → demos/index.html
@@ -790,31 +790,31 @@ <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
   </script>
   <script>
     function ganttTestClick(a, b, c) {
-      console.log("a:", a)
-      console.log("b:", b)
-      console.log("c:", c)
+      console.log('a:', a);
+      console.log('b:', b);
+      console.log('c:', c);
     }
     function testClick(nodeId) {
-      console.log("clicked", nodeId)
-      var originalBgColor = document.querySelector('body').style.backgroundColor
-      document.querySelector('body').style.backgroundColor = 'yellow'
-      setTimeout(function() {
-        document.querySelector('body').style.backgroundColor = originalBgColor
-      }, 100)
+      console.log('clicked', nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function () {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 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("LF", "graph LR\nsubgraph LF\nA --> B\nend");
-    testLineEndings("CRLF", "graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend");
+    testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
+    testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
+    testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
   </script>
 </body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ node_modules/ @@
     coverage/
     .idea/
-    dist/
+    dist
     yarn-error.log
     .npmrc
@@ Expand Down @@