Merge pull request #3825 from mermaid-js/sidv/optimizeSize

Reduce mermaid size by 31%
mermaid-js · Nov 23, 2022 · 79c63e9 · 79c63e9
2 parents f2ed255 + 2cefb0f
commit 79c63e9
Show file tree

Hide file tree

Showing 22 changed files with 261 additions and 124 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -21,7 +21,16 @@
     "plugin:@cspell/recommended",
     "prettier"
   ],
-  "plugins": ["@typescript-eslint", "no-only-tests", "html", "jest", "jsdoc", "json", "@cspell"],
+  "plugins": [
+    "@typescript-eslint",
+    "no-only-tests",
+    "html",
+    "jest",
+    "jsdoc",
+    "json",
+    "@cspell",
+    "lodash"
+  ],
   "rules": {
     "curly": "error",
     "no-console": "error",
@@ -53,7 +62,8 @@
         "allowEmptyCatch": true
       }
     ],
-    "no-only-tests/no-only-tests": "error"
+    "no-only-tests/no-only-tests": "error",
+    "lodash/import-scope": ["error", "method"]
   },
   "overrides": [
     {

diff --git a/.prettierignore b/.prettierignore
@@ -3,4 +3,5 @@ cypress/platform/xss3.html
 .cache
 coverage
 # Autogenerated by PNPM
-pnpm-lock.yaml
+pnpm-lock.yaml
+stats
diff --git a/.vite/build.ts b/.vite/build.ts
@@ -56,7 +56,7 @@ interface BuildOptions {
 }
 
 export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
-  const external = ['require', 'fs', 'path'];
+  const external: (string | RegExp)[] = ['require', 'fs', 'path'];
   console.log(entryName, packageOptions[entryName]);
   const { name, file, packageName } = packageOptions[entryName];
   let output: OutputOptions = [
@@ -80,7 +80,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     );
     // Core build is used to generate file without bundled dependencies.
     // This is used by downstream projects to bundle dependencies themselves.
-    external.push(...Object.keys(dependencies));
+    // Ignore dependencies and any dependencies of dependencies
+    // Adapted from the RegEx used by `rollup-plugin-node`
+    external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$'));
     // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
     output = [
       {

diff --git a/package.json b/package.json
@@ -60,8 +60,8 @@
     "@cspell/eslint-plugin": "^6.14.2",
     "@types/eslint": "^8.4.10",
     "@types/express": "^4.17.14",
-    "@types/jsdom": "^20.0.1",
     "@types/js-yaml": "^4.0.5",
+    "@types/jsdom": "^20.0.1",
     "@types/lodash": "^4.14.188",
     "@types/mdast": "^3.0.10",
     "@types/node": "^18.11.9",
@@ -83,17 +83,19 @@
     "eslint-plugin-jest": "^27.1.5",
     "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-unicorn": "^45.0.0",
     "express": "^4.18.2",
     "globby": "^13.1.2",
     "husky": "^8.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jison": "^0.4.18",
-    "jsdom": "^20.0.2",
     "js-yaml": "^4.1.0",
+    "jsdom": "^20.0.2",
     "lint-staged": "^13.0.3",
     "path-browserify": "^1.0.1",
     "pnpm": "^7.15.0",

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -54,12 +54,12 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
     "d3": "^7.0.0",
-    "dagre-d3-es": "7.0.2",
+    "dagre-d3-es": "7.0.4",
     "dompurify": "2.4.1",
     "fast-clone": "^1.5.13",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
     "stylis": "^4.1.2",
@@ -69,7 +69,7 @@
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.4.0",
     "@types/jsdom": "^20.0.1",
-    "@types/lodash": "^4.14.188",
+    "@types/lodash-es": "^4.17.6",
     "@types/micromatch": "^4.0.2",
     "@types/prettier": "^2.7.1",
     "@types/stylis": "^4.0.2",

diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
@@ -1,5 +1,5 @@
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
-import graphlib from 'graphlib';
+import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
 import insertMarkers from './markers';
 import { updateNodeBounds } from './shapes/util';
 import {
@@ -15,7 +15,7 @@ import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } f
 import { log } from '../logger';
 
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
-  log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);
+  log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
 
@@ -96,7 +96,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('#############################################');
   log.info(graph);
   dagreLayout(graph);
-  log.info('Graph after layout:', graphlib.json.write(graph));
+  log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
   sortNodesByHierarchy(graph).forEach(function (v) {
@@ -153,10 +153,10 @@ export const render = (elem, graph, markers, diagramtype, id) => {
   clearClusters();
   clearGraphlib();
 
-  log.warn('Graph at first:', graphlib.json.write(graph));
+  log.warn('Graph at first:', graphlibJson.write(graph));
   adjustClustersAndEdges(graph);
-  log.warn('Graph after:', graphlib.json.write(graph));
-  // log.warn('Graph ever  after:', graphlib.json.write(graph.node('A').graph));
+  log.warn('Graph after:', graphlibJson.write(graph));
+  // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
   recursiveRender(elem, graph, diagramtype);
 };
 

diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -1,6 +1,7 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
 import { log } from '../logger';
-import graphlib from 'graphlib';
+import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 
 export let clusterDb = {};
 let decendants = {};
@@ -322,7 +323,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
       graph.setEdge(v, w, edge, e.name);
     }
   });
-  log.warn('Adjusted Graph', graphlib.json.write(graph));
+  log.warn('Adjusted Graph', graphlibJson.write(graph));
   extractor(graph, 0);
 
   log.trace(clusterDb);
@@ -336,7 +337,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
 };
 
 export const extractor = (graph, depth) => {
-  log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
+  log.warn('extractor - ', depth, graphlibJson.write(graph), graph.children('D'));
   if (depth > 10) {
     log.error('Bailing out');
     return;
@@ -415,7 +416,7 @@ export const extractor = (graph, depth) => {
           return {};
         });
 
-      log.warn('Old graph before copy', graphlib.json.write(graph));
+      log.warn('Old graph before copy', graphlibJson.write(graph));
       copy(node, graph, clusterGraph, node);
       graph.setNode(node, {
         clusterNode: true,
@@ -424,8 +425,8 @@ export const extractor = (graph, depth) => {
         labelText: clusterDb[node].labelText,
         graph: clusterGraph,
       });
-      log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph));
-      log.debug('Old graph after copy', graphlib.json.write(graph));
+      log.warn('New graph after copy node: (', node, ')', graphlibJson.write(clusterGraph));
+      log.debug('Old graph after copy', graphlibJson.write(graph));
     } else {
       log.warn(
         'Cluster ** ',

diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -1,4 +1,5 @@
-import graphlib from 'graphlib';
+import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import {
   validate,
   adjustClustersAndEdges,
@@ -232,9 +233,9 @@ describe('Graphlib decorations', () => {
       g.setParent('D', 'C');
 
       // log.info('Graph before', g.node('D'))
-      // log.info('Graph before', graphlib.json.write(g))
+      // log.info('Graph before', graphlibJson.write(g))
       adjustClustersAndEdges(g);
-      // log.info('Graph after', graphlib.json.write(g), g.node('C').graph)
+      // log.info('Graph after', graphlibJson.write(g), g.node('C').graph)
 
       const CGraph = g.node('C').graph;
       const DGraph = CGraph.node('D').graph;
@@ -278,9 +279,9 @@ describe('Graphlib decorations', () => {
       g.setEdge('A', 'C', { data: 'link2' }, '2');
 
       log.info('Graph before', g.node('D'));
-      log.info('Graph before', graphlib.json.write(g));
+      log.info('Graph before', graphlibJson.write(g));
       adjustClustersAndEdges(g);
-      log.trace('Graph after', graphlib.json.write(g));
+      log.trace('Graph after', graphlibJson.write(g));
       expect(g.nodes()).toEqual(['C', 'B', 'A']);
       expect(g.nodes().length).toBe(3);
       expect(g.edges().length).toBe(2);
@@ -333,11 +334,11 @@ describe('Graphlib decorations', () => {
       g.setEdge('c', 'd', { data: 'link2' }, '2');
       g.setEdge('d', 'e', { data: 'link2' }, '2');
 
-      log.info('Graph before', graphlib.json.write(g));
+      log.info('Graph before', graphlibJson.write(g));
       adjustClustersAndEdges(g);
       const bGraph = g.node('b').graph;
-      // log.trace('Graph after', graphlib.json.write(g))
-      log.info('Graph after', graphlib.json.write(bGraph));
+      // log.trace('Graph after', graphlibJson.write(g))
+      log.info('Graph after', graphlibJson.write(bGraph));
       expect(bGraph.nodes().length).toBe(3);
       expect(bGraph.edges().length).toBe(2);
     });
@@ -359,13 +360,13 @@ describe('Graphlib decorations', () => {
       g.setParent('c', 'b');
       g.setParent('e', 'c');
 
-      log.info('Graph before', graphlib.json.write(g));
+      log.info('Graph before', graphlibJson.write(g));
       adjustClustersAndEdges(g);
       const aGraph = g.node('a').graph;
       const bGraph = aGraph.node('b').graph;
-      log.info('Graph after', graphlib.json.write(aGraph));
+      log.info('Graph after', graphlibJson.write(aGraph));
       const cGraph = bGraph.node('c').graph;
-      // log.trace('Graph after', graphlib.json.write(g))
+      // log.trace('Graph after', graphlibJson.write(g))
       expect(aGraph.nodes().length).toBe(1);
       expect(bGraph.nodes().length).toBe(1);
       expect(cGraph.nodes().length).toBe(1);
@@ -387,14 +388,14 @@ flowchart TB
     const exportedGraph = JSON.parse(
       '{"options":{"directed":true,"multigraph":true,"compound":true},"nodes":[{"v":"A","value":{"labelStyle":"","shape":"rect","labelText":"A","rx":0,"ry":0,"class":"default","style":"","id":"A","width":500,"type":"group","padding":15}},{"v":"B","value":{"labelStyle":"","shape":"rect","labelText":"B","rx":0,"ry":0,"class":"default","style":"","id":"B","width":500,"type":"group","padding":15},"parent":"A"},{"v":"b","value":{"labelStyle":"","shape":"rect","labelText":"b","rx":0,"ry":0,"class":"default","style":"","id":"b","padding":15},"parent":"A"},{"v":"c","value":{"labelStyle":"","shape":"rect","labelText":"c","rx":0,"ry":0,"class":"default","style":"","id":"c","padding":15},"parent":"B"},{"v":"a","value":{"labelStyle":"","shape":"rect","labelText":"a","rx":0,"ry":0,"class":"default","style":"","id":"a","padding":15},"parent":"A"}],"edges":[{"v":"b","w":"B","name":"1","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-b-B","classes":"flowchart-link LS-b LE-B"}},{"v":"a","w":"c","name":"2","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-a-c","classes":"flowchart-link LS-a LE-c"}}],"value":{"rankdir":"TB","nodesep":50,"ranksep":50,"marginx":8,"marginy":8}}'
     );
-    const gr = graphlib.json.read(exportedGraph);
+    const gr = graphlibJson.read(exportedGraph);
 
-    log.info('Graph before', graphlib.json.write(gr));
+    log.info('Graph before', graphlibJson.write(gr));
     adjustClustersAndEdges(gr);
     const aGraph = gr.node('A').graph;
     const bGraph = aGraph.node('B').graph;
-    log.info('Graph after', graphlib.json.write(aGraph));
-    // log.trace('Graph after', graphlib.json.write(g))
+    log.info('Graph after', graphlibJson.write(aGraph));
+    // log.trace('Graph after', graphlibJson.write(g))
     expect(aGraph.parent('c')).toBe('B');
     expect(aGraph.parent('B')).toBe(undefined);
   });

diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';

diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -1,6 +1,6 @@
 import { select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../setupGraphViewbox';

diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -1,4 +1,4 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { line, curveBasis, select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import { getConfig } from '../../config';

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,4 +1,4 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { select, curveLinear, selectAll } from 'd3';
 
 import flowDb from './flowDb';

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -1,4 +1,4 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { select, curveLinear, selectAll } from 'd3';
 import { getConfig } from '../../config';
 import { render as Render } from 'dagre-d3-es';

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash/filter';
+import filter from 'lodash-es/filter';
 import { setConfig } from '../../../config';
 
 setConfig({

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash/filter';
+import filter from 'lodash-es/filter';
 import { setConfig } from '../../../config';
 
 setConfig({

diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -1,6 +1,6 @@
 import { line, select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -1,4 +1,4 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { select } from 'd3';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -1,6 +1,6 @@
 import { select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger';
 import common from '../common/common';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';

diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
@@ -29,7 +29,7 @@ import utils, { directiveSanitizer } from './utils';
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from './config.type';
 import { evaluate } from './diagrams/common/common';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty from 'lodash-es/isEmpty';
 
 // diagram names that support classDef statements
 const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];

diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
@@ -3,7 +3,7 @@ import utils from './utils';
 import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
-import memoize from 'lodash/memoize';
+import memoize from 'lodash-es/memoize';
 import { MockD3 } from 'd3';
 addDiagrams();