ci: include components folder in bundle size check

[talkor]

User description

https://monday.monday.com/boards/3532714909/pulses/18286653855

---

PR Type

Enhancement

---

Description

• Extend bundle size check to include component packages

• Parse component packages from components/ directory

• Display component packages with @vibe/ namespace format

• Generate size-limit config for both core and component packages

---

Diagram Walkthrough

flowchart LR
  A["Bundle Check Script"] --> B["Core Components"]
  A --> C["Component Packages"]
  B --> D["Generate Config"]
  C --> D
  D --> E["Size Limit Check"]

Loading

File Walkthrough

Relevant files

Enhancement

generate-size-limit-config.js Add component packages to size-limit config generation      scripts/bundle-check/generate-size-limit-config.js Added logic to discover and process component packages from components/ directory Extended config generation to include both core and component package distributions Improved error handling with separate checks for core and component paths Updated logging to distinguish between core and component package processing +48/-17  compare-bundles.js Format component package names with namespace                        scripts/bundle-check/compare-bundles.js Added conditional logic to format display names for component packages Component packages now display with @vibe/ namespace prefix Preserved original display name logic for core components +7/-1

---

[qodo-merge-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Import Safety The new display name logic relies on path but the diff doesn’t show an import; ensure const path = require("path") exists in this file to avoid runtime errors. let displayName; if (componentName.startsWith("components/")) { const packageName = componentName.split("/")[1]; displayName = `@vibe/${packageName}`; } else { displayName = path.basename(componentName, path.extname(componentName)); } Cross-Platform Paths Mixing manual string joins and .replace(/\\/g, "/") suggests potential path inconsistencies; consider using path.posix.join or consistently normalizing to avoid issues on Windows. let match; while ((match = exportRegex.exec(indexContent)) !== null) { const relativePath = match[1]; const fullPath = path.join("packages/core/dist/src/", relativePath).replace(/\\/g, "/"); allComponents.push({ path: fullPath }); } console.log(`Found ${allComponents.length} core components.`); } else { console.log(`Core dist index file not found at ${distIndexPath}.`); } // Process component packages if (fs.existsSync(componentsPath)) { const componentPackages = fs .readdirSync(componentsPath, { withFileTypes: true }) .filter(dirent => dirent.isDirectory()) .map(dirent => dirent.name); for (const packageName of componentPackages) { const packageDistPath = path.join(componentsPath, packageName, "dist/index.js"); if (fs.existsSync(packageDistPath)) { const relativePath = path.join("components", packageName, "dist/index.js").replace(/\\/g, "/"); allComponents.push({ path: relativePath }); Silent Skips When components or dists are missing, only logs are emitted; consider surfacing a non-zero exit or summary to CI so missing artifacts don’t silently pass. if (fs.existsSync(componentsPath)) { const componentPackages = fs .readdirSync(componentsPath, { withFileTypes: true }) .filter(dirent => dirent.isDirectory()) .map(dirent => dirent.name); for (const packageName of componentPackages) { const packageDistPath = path.join(componentsPath, packageName, "dist/index.js"); if (fs.existsSync(packageDistPath)) { const relativePath = path.join("components", packageName, "dist/index.js").replace(/\\/g, "/"); allComponents.push({ path: relativePath }); console.log(`Added component package: ${packageName}`); } else { console.log(`Dist file not found for component package: ${packageName}`); } } } else { console.log(`Components directory not found at ${componentsPath}.`); }