[code-infra] Update bundle size dashboard

[Janpot]

Took my friend Claude for a spin and we revamped the size comparison table.

• make it a workspace
• remove obsolete pages and sections
• move to vite
• move to typescript
• upgrade all dependencies
• load both size snapshots in parallel instead of suspending, this should speed it up a bit.
• don't require two round trips to load the circleci snapshot. assemble it in the netlify function. This should speed it up a bit as well.
• denser table
• header for size comparison table with github and circle ci link + size aggregation
• colored arrows
• distinguish between added/removed/changed
• new sorting logic
• slightly touch up on the design
• remove suspense for loading, we can render part of the page while the table is loading
• remove that "fork on github ribbon"
• make repository configurable
• remove all the renaming, name of the bundle is what appears in the table. a bundle renamed = new bundle. Also simplifying this on the creation side [code-infra] Clean up bundle size checker material-ui#45622
• expand github PR title

Live:

• example 1 (old)
• example 2 (old)
• example 3 (old)

to do:

• store artifacts in S3 under a url that includes repo name so that we can reuse for other repositories.

[michaldudak]

Both the increase and decrease of bundle size show up with a "+" sign now

[Janpot]

Both the increase and decrease of bundle size show up with a "+" sign now

👍 yeah, just noticed it too. Did a few more updates to the number formatting to display other units than KB and to have a tooltip with the exact number. Thank you.

[oliviertassinari]

Nice a v2 on #212, that was painful.

In the future, we could likely tackle: #162 (review).

[oliviertassinari]

We could likely adopt the same folder structure as in https://github.com/mui/mui-private https://github.com/mui/mui-private/blob/6fd8a3a565e1ae51a7383fe1a85506bd36dc55f9/pnpm-workspace.yaml#L2

Suggested change

	- 'tools-public'
	- 'contributor-dashboard-legacy'
	- 'apps/*'

More context: https://github.com/mui/mui-private/issues/794

[Janpot]

I moved it

[oliviertassinari]

We don't need that since it's private?

Suggested change

"version": "0.1.0",

[oliviertassinari]

I wonder if there is room to change the Netlify config to only build if there is a change in /contributor-dashboard-legacy using https://docs.netlify.com/configure-builds/ignore-builds/#mimic-default-behavior

[Janpot]

I wonder if there is room to change the Netlify config to only build

It should already be doing that according to the docs. we set the base directory. Let's evaluate if that's working as expected once merged.

Depending on your Branches settings, any time there is a change in a linked repository, Netlify tries to determine whether there are changes in the site’s base directory by comparing the last known version of the files in that directory. If no change is detected, the build system cancels and essentially skips the build, returning early from the build process.

[oliviertassinari]

I have added this logic:

mui-public/apps/code-infra-dashboard/netlify.toml

Line 13 in a68a12d

ignore = "cd ../../ && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF apps/code-infra-dashboard pnpm-lock.yaml"

It didn't seem to behave correctly without.

[Janpot]

I have added this logic:

Is it possible to quantify the difference in having this versus not? Because I'm not keen on having to maintain a secondary dependency chain unless the win is significant. This will have to be kept in sync any time a workspace dependency is added, or a dependency of a workspace dependency is added. e.g. here. Like, why have this on this tiny project that is built so little time and takes such a short time to build and not on e.g. the core docs?

edit: it should be possible to list all required folders to check for changes with git diff $(pnpm ls --filter code-infra-dashboard --parseable --only-projects) pnpm-lock.yaml

[oliviertassinari]

Is it possible to quantify the difference in having this versus not? Because I'm not keen on having to maintain a secondary dependency chain unless the win is significant.

@Janpot The problem is that in #309, Netlify didn't build, but should have.

The docs of Netlify say that the default behavior of Netlify is close to:
ignore = "cd ../../ && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF apps/code-infra-dashboard"

which feels broken. I changed it to:
ignore = "cd ../../ && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF apps/code-infra-dashboard pnpm-lock.yaml"

The alternative options:

1. Always build, but that could be even more frustrating for the DX.
2. Run Node, and ask nx to resolve dependencies https://docs.netlify.com/configure-builds/ignore-builds/#skip-builds-based-on-branch-name with https://nx.dev/ci/features/affected#using-nx-affected-commands. Edit: ah no, it's more complex: https://answers.netlify.com/t/custom-ignore-build-commands-using-public-npm-modules/11466/3.

With render, the issue seems to be on the opposite side, e.g., https://github.com/mui/mui-private/pull/847, it builds stuff for nothing.

I get the feeling that we can start with custom logic, and then move to 2 once we need to get more fancy.

it should be possible to list all required folders to check for changes with git diff $(pnpm ls --filter code-infra-dashboard --parseable --only-projects) pnpm-lock.yaml

Yes, this looks even better.

[oliviertassinari]

Moved to an issue https://github.com/mui/mui-private/issues/886