From 49a931f7129b8ab5628115808a3ceebe938d728e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 20 Nov 2022 12:13:00 +0530 Subject: [PATCH 1/3] feat: Add bundle visualization --- .vite/build.ts | 5 +++-- package.json | 2 ++ pnpm-lock.yaml | 48 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 52 insertions(+), 3 deletions(-) diff --git a/.vite/build.ts b/.vite/build.ts index 50b7fb1ad..fb5f171e2 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -1,8 +1,9 @@ -import { build, InlineConfig } from 'vite'; +import { build, InlineConfig, type PluginOption } from 'vite'; import { resolve } from 'path'; import { fileURLToPath } from 'url'; import jisonPlugin from './jisonPlugin.js'; import { readFileSync } from 'fs'; +import { visualizer } from 'rollup-plugin-visualizer'; const watch = process.argv.includes('--watch'); const mermaidOnly = process.argv.includes('--mermaid'); @@ -95,7 +96,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) resolve: { extensions: ['.jison', '.js', '.ts', '.json'], }, - plugins: [jisonPlugin()], + plugins: [jisonPlugin(), visualizer({ template: 'network' }) as PluginOption], }; if (watch && config.build) { diff --git a/package.json b/package.json index 7bd648877..52b756f99 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "@types/mdast": "^3.0.10", "@types/node": "^18.11.9", "@types/prettier": "^2.7.1", + "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^5.42.1", "@typescript-eslint/parser": "^5.42.1", "@vitest/coverage-c8": "^0.25.1", @@ -96,6 +97,7 @@ "prettier": "^2.7.1", "prettier-plugin-jsdoc": "^0.4.2", "rimraf": "^3.0.2", + "rollup-plugin-visualizer": "^5.8.3", "start-server-and-test": "^1.14.0", "ts-node": "^10.9.1", "typescript": "^4.8.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85afcb31d..683958bb6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,6 +40,9 @@ importers: '@types/prettier': specifier: ^2.7.1 version: 2.7.1 + '@types/rollup-plugin-visualizer': + specifier: ^4.2.1 + version: 4.2.1 '@typescript-eslint/eslint-plugin': specifier: ^5.42.1 version: 5.42.1_2udltptbznfmezdozpdoa2aemq @@ -136,6 +139,9 @@ importers: rimraf: specifier: ^3.0.2 version: 3.0.2 + rollup-plugin-visualizer: + specifier: ^5.8.3 + version: 5.8.3_rollup@2.79.1 start-server-and-test: specifier: ^1.14.0 version: 1.14.0 @@ -2584,6 +2590,13 @@ packages: resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==} dev: true + /@types/rollup-plugin-visualizer/4.2.1: + resolution: {integrity: sha512-Fk4y0EgmsSbvbayYhtSI9+cGvgw1rcQ9RlbExkQt4ivXRdiEwFKuRpxNuJCr0JktXIvOPUuPR7GSmtyZu0dujQ==} + dependencies: + '@types/node': 18.11.9 + rollup: 2.79.1 + dev: true + /@types/semver/7.3.12: resolution: {integrity: sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A==} dev: true @@ -3534,7 +3547,7 @@ packages: /axios/0.21.4_debug@4.3.2: resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==} dependencies: - follow-redirects: 1.15.2 + follow-redirects: 1.15.2_debug@4.3.2 transitivePeerDependencies: - debug dev: true @@ -6054,6 +6067,18 @@ packages: optional: true dev: true + /follow-redirects/1.15.2_debug@4.3.2: + resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dependencies: + debug: 4.3.2 + dev: true + /foreground-child/2.0.0: resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==} engines: {node: '>=8.0.0'} @@ -9412,6 +9437,22 @@ packages: resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==} dev: false + /rollup-plugin-visualizer/5.8.3_rollup@2.79.1: + resolution: {integrity: sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==} + engines: {node: '>=14'} + hasBin: true + peerDependencies: + rollup: 2.x || 3.x + peerDependenciesMeta: + rollup: + optional: true + dependencies: + open: 8.4.0 + rollup: 2.79.1 + source-map: 0.7.4 + yargs: 17.5.1 + dev: true + /rollup/2.79.1: resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==} engines: {node: '>=10.0.0'} @@ -9768,6 +9809,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /source-map/0.7.4: + resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} + engines: {node: '>= 8'} + dev: true + /sourcemap-codec/1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} dev: true From fc859528e4e2845d7952f1a68ee23d181cc95815 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 20 Nov 2022 12:10:05 +0530 Subject: [PATCH 2/3] Ignore stats.html --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 8cc09354b..6813b82b4 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,4 @@ tsconfig.tsbuildinfo knsv*.html local*.html +stats.html From 4ad99a25d09c698a947ff0234c9899bf89835d55 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 20 Nov 2022 14:16:22 +0530 Subject: [PATCH 3/3] feat: Add package visualization --- .gitignore | 2 +- .vite/build.ts | 20 ++++++++++++++++++-- cSpell.json | 2 ++ package.json | 3 ++- 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 6813b82b4..f29286825 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,4 @@ tsconfig.tsbuildinfo knsv*.html local*.html -stats.html +stats/ diff --git a/.vite/build.ts b/.vite/build.ts index fb5f171e2..c441dc0ab 100644 --- a/.vite/build.ts +++ b/.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); } }; diff --git a/cSpell.json b/cSpell.json index 3cf8a1e54..03891165f 100644 --- a/cSpell.json +++ b/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", diff --git a/package.json b/package.json index 52b756f99..10ca11bec 100644 --- a/package.json +++ b/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\"",