feat: Add package visualization

.gitignore

@@ -35,4 +35,4 @@ tsconfig.tsbuildinfo
 
 knsv*.html
 local*.html
-stats.html
+stats/

.vite/build.ts

@@ -4,7 +4,9 @@ import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
 import { visualizer } from 'rollup-plugin-visualizer';
+import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 
+const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -14,6 +16,20 @@ type OutputOptions = Exclude<
   undefined
 >['output'];
 
+const visualizerOptions = (packageName: string): PluginOption[] => {
+  if (packageName !== 'mermaid' || !visualize) {
+    return [];
+  }
+  return ['network', 'treemap', 'sunburst'].map((chartType) =>
+    visualizer({
+      filename: `./stats/${chartType}.html`,
+      template: chartType as TemplateType,
+      gzipSize: true,
+      brotliSize: true,
+    })
+  );
+};
+
 const packageOptions = {
   mermaid: {
     name: 'mermaid',
@@ -96,7 +112,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     resolve: {
       extensions: ['.jison', '.js', '.ts', '.json'],
     },
-    plugins: [jisonPlugin(), visualizer({ template: 'network' }) as PluginOption],
+    plugins: [jisonPlugin(), ...visualizerOptions(packageName)],
   };
 
   if (watch && config.build) {
@@ -122,7 +138,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 
 const main = async () => {
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames) {
+  for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
     await buildPackage(pkg);
   }
 };

cSpell.json

@@ -14,6 +14,7 @@
     "bilkent",
     "bisheng",
     "brolin",
+    "brotli",
     "codedoc",
     "colour",
     "cpettitt",
@@ -70,6 +71,7 @@
     "substate",
     "sveidqvist",
     "techn",
+    "treemap",
     "ts-nocheck",
     "tuleap",
     "verdana",

package.json

@@ -15,8 +15,9 @@
     "git graph"
   ],
   "scripts": {
-    "build:mermaid": "ts-node-esm --transpileOnly .vite/build.ts --mermaid",
     "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
+    "build:mermaid": "pnpm build:vite --mermaid",
+    "build:viz": "pnpm build:mermaid --visualize",
     "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",