[code-infra] bring bundle size checker to mui-public

.circleci/config.yml

@@ -65,6 +65,12 @@ jobs:
       - run:
           name: '`pnpm prettier` changes committed?'
           command: pnpm prettier --check
+      - run:
+          # make sure the netlify ignore command has the correct dependencies
+          name: '`pnpm update-netlify-ignore` changes committed?'
+          command: |
+            pnpm update-netlify-ignore
+            git add -A && git diff --exit-code --staged
 workflows:
   version: 2
   pipeline:

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 
 lerna-debug.log
 dist/
+
+build

CLAUDE.md

@@ -0,0 +1,11 @@
+# Claude Instructions
+
+## pnpm Workspace Commands
+
+- When running pnpm commands for workspace packages, always use the `-F` flag followed by the package name
+- Example: `pnpm -F @mui/internal-bundle-size-checker add micromatch`
+- Do NOT use `cd` to navigate into the package directory
+
+## Commands to Run After Code Changes
+
+- TBD (Add linting or typecheck commands here when identified)

apps/code-infra-dashboard/netlify.toml

@@ -1,23 +1,19 @@
 [build]
-  # Directory to change to before starting a build.
-  base = "apps/code-infra-dashboard"
-
-  # The deploy-ready HTML files and assets generated by the build.
   publish = "build"
 
-  # Build command.
-  command = "pnpm build"
+  # Default build command.
+  command = "pnpm -F code-infra-dashboard build"
 
-  # Deciden when to build Netlify
-  ignore = "cd ../../ && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF apps/code-infra-dashboard pnpm-lock.yaml"
+  # Decide when to build Netlify
+  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF apps/code-infra-dashboard packages/bundle-size-checker pnpm-lock.yaml"
 
 [dev]
-  command = "pnpm start"
+  framework = "#custom"
+  command = "pnpm -F code-infra-dashboard start"
   targetPort = 3000
 
 [build.environment]
-  NODE_VERSION = "18"
-  PNPM_FLAGS = "--ignore-workspace"
+  NODE_VERSION = "20"
 
 [functions]
   directory = "functions"

apps/code-infra-dashboard/package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/internal-bundle-size-checker": "workspace:*",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@netlify/functions": "^3.0.4",

apps/code-infra-dashboard/src/App.tsx

@@ -3,11 +3,49 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import * as colors from '@mui/material/colors';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { BrowserRouter, Routes, Route } from 'react-router';
+import { BrowserRouter, Routes, Route, Navigate, useSearchParams } from 'react-router';
 import './index.css';
 
 const Landing = React.lazy(() => import('./pages/Landing'));
 const SizeComparison = React.lazy(() => import('./pages/SizeComparison'));
+const RepositoryPRs = React.lazy(() => import('./pages/RepositoryPRs'));
+
+// Redirect component for size comparison with query params
+function SizeComparisonRedirect() {
+  const [params] = useSearchParams();
+
+  // remove the default when https://github.com/mui/material-ui/pull/45911 is merged for longer than e.g. 1 month
+  const repo = params.get('repo') || 'mui/material-ui';
+
+  // Check if we have the essential repo parameter
+  if (repo) {
+    // Split repo into owner/repo parts
+    const [owner, repoName] = repo.split('/');
+
+    // Preserve all query params for the redirect
+    const newParams = new URLSearchParams();
+    for (const [key, value] of params.entries()) {
+      if (key !== 'repo') {
+        newParams.append(key, value);
+      }
+    }
+
+    // Build the new URL with path parameters
+    const queryString = newParams.toString() ? `?${newParams.toString()}` : '';
+    const newPath = `/size-comparison/${owner}/${repoName}/diff${queryString}`;
+
+    return <Navigate to={newPath} replace />;
+  }
+
+  // If we don't have the required params, show an error
+  return (
+    <div style={{ padding: '2rem', color: 'red' }}>
+      <h2>Error: Missing Parameters</h2>
+      <p>This page requires the &quot;repo&quot; parameter.</p>
+      <p>Example: /size-comparison?repo=mui/material-ui&prNumber=1234</p>
+    </div>
+  );
+}
 
 // In TanStack Query v5+, suspense is no longer specified in defaultOptions
 const queryClient = new QueryClient();
@@ -141,14 +179,23 @@ function App() {
                   </React.Suspense>
                 }
               />
+              <Route path="/size-comparison" element={<SizeComparisonRedirect />} />
               <Route
-                path="/size-comparison"
+                path="/size-comparison/:owner/:repo/diff"
                 element={
                   <React.Suspense fallback={<div>Loading...</div>}>
                     <SizeComparison />
                   </React.Suspense>
                 }
               />
+              <Route
+                path="/size-comparison/:owner/:repo"
+                element={
+                  <React.Suspense fallback={<div>Loading...</div>}>
+                    <RepositoryPRs />
+                  </React.Suspense>
+                }
+              />
             </Routes>
           </BrowserRouter>
         </div>

apps/code-infra-dashboard/src/components/GitHubPRReference.tsx

@@ -1,60 +1,9 @@
 import * as React from 'react';
-import { useQuery } from '@tanstack/react-query';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
-
-interface GitHubPRInfo {
-  title: string;
-  number: number;
-  html_url: string;
-}
-
-/**
- * Hook to fetch PR information by PR number
- */
-function usePRInfo(
-  org: string,
-  repo: string,
-  prNumber: number,
-): { prInfo: GitHubPRInfo | null; isLoading: boolean; error: Error | null } {
-  const {
-    data = null,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ['github-pr', org, repo, prNumber],
-    queryFn: async (): Promise<GitHubPRInfo | null> => {
-      try {
-        const response = await fetch(
-          `https://api.github.com/repos/${org}/${repo}/pulls/${prNumber}`,
-        );
-        if (!response.ok) {
-          throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);
-        }
-
-        const responseBody = await response.json();
-        return {
-          title: responseBody.title,
-          number: prNumber,
-          html_url: responseBody.html_url,
-        };
-      } catch (err) {
-        console.error('Error fetching PR info:', err);
-        throw err;
-      }
-    },
-    enabled: Boolean(org && repo && prNumber),
-    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
-  });
-
-  return {
-    prInfo: data,
-    isLoading,
-    error: error as Error | null,
-  };
-}
+import { useGitHubPR } from '../hooks/useGitHubPR';
 
 // PR icon as a simple SVG component
 // Styled SVG wrapper that follows font size
@@ -165,10 +114,7 @@ function PRContent({ isLoading, icon, contextPrefix, title, reference, prNumber
 }
 
 export default function GitHubPRReference({ repo, prNumber }: GitHubPRReferenceProps) {
-  // Split repo into org and repoName
-  const [org, repoName] = repo.split('/');
-
-  const { prInfo, isLoading, error } = usePRInfo(org, repoName, prNumber);
+  const { prInfo, isLoading, error } = useGitHubPR(repo, prNumber);
 
   // Base URL for linking to the PR
   const prUrl = `https://github.com/${repo}/pull/${prNumber}`;

apps/code-infra-dashboard/src/components/PRList.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { Link as RouterLink } from 'react-router';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Paper from '@mui/material/Paper';
+import Divider from '@mui/material/Divider';
+import Chip from '@mui/material/Chip';
+import GitPullRequestIcon from '@mui/icons-material/Commit';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import { styled } from '@mui/material/styles';
+import { GitHubPRInfo } from '../hooks/useGitHubPR';
+
+const StyledListItem = styled(ListItem)(({ theme }) => ({
+  borderLeft: '2px solid transparent',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    borderLeft: `2px solid ${theme.palette.secondary.main}`,
+  },
+  transition: 'background-color 0.2s, border-left 0.2s',
+}));
+
+const PRNumber = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontWeight: 500,
+  marginRight: theme.spacing(1),
+}));
+
+interface PRListProps {
+  prs: GitHubPRInfo[];
+  isLoading: boolean;
+  error: Error | null;
+  owner: string;
+  repo: string;
+}
+
+export default function PRList({ prs, isLoading, error, owner, repo }: PRListProps) {
+  if (isLoading) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
+        <CircularProgress size={16} />
+        <Typography>Loading pull requests...</Typography>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box sx={{ p: 2, color: 'error.main' }}>
+        <Typography variant="subtitle1" gutterBottom>
+          Error loading pull requests
+        </Typography>
+        <Typography variant="body2">{error.message || 'Unknown error occurred'}</Typography>
+      </Box>
+    );
+  }
+
+  if (prs.length === 0) {
+    return (
+      <Box sx={{ p: 2, color: 'text.secondary' }}>
+        <Typography>No pull requests found.</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Paper elevation={2} sx={{ overflow: 'hidden' }}>
+      <List disablePadding>
+        {prs.map((pr, index) => (
+          <React.Fragment key={pr.number}>
+            {index > 0 && <Divider />}
+            <StyledListItem
+              // @ts-expect-error https://github.com/mui/material-ui/issues/29875
+              component={RouterLink}
+              to={`/size-comparison/${owner}/${repo}/diff?prNumber=${pr.number}`}
+              sx={{
+                py: 1.5,
+                color: 'text.primary',
+                textDecoration: 'none',
+                '&:hover': {
+                  textDecoration: 'none',
+                },
+              }}
+            >
+              <Box sx={{ mr: 1, color: 'text.secondary', display: 'flex' }}>
+                <GitPullRequestIcon fontSize="small" />
+              </Box>
+              <ListItemText
+                primary={
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    <PRNumber variant="body2">#{pr.number}</PRNumber>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontWeight: 500,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {pr.title}
+                    </Typography>
+                  </Box>
+                }
+                secondary={
+                  <Box sx={{ display: 'flex', alignItems: 'center', mt: 0.5, gap: 2 }}>
+                    <Chip
+                      label={pr.base.ref}
+                      size="small"
+                      color="primary"
+                      variant="outlined"
+                      sx={{ fontSize: '0.7rem', height: 20 }}
+                    />
+                    <Typography variant="caption" color="text.secondary">
+                      SHA: <code>{pr.head.sha.substring(0, 7)}</code>
+                    </Typography>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        color: 'secondary.main',
+                        gap: 0.5,
+                      }}
+                    >
+                      <BarChartIcon fontSize="inherit" />
+                      <Typography variant="caption">View Bundle Size</Typography>
+                    </Box>
+                  </Box>
+                }
+              />
+            </StyledListItem>
+          </React.Fragment>
+        ))}
+      </List>
+    </Paper>
+  );
+}

apps/code-infra-dashboard/src/components/SizeChangeDisplay.tsx

@@ -66,7 +66,7 @@ const Label = styled('span')(({ theme }) => ({
 
 interface SizeChangeDisplayProps {
   absoluteChange: number;
-  relativeChange?: number;
+  relativeChange?: number | null;
 }
 
 /**