feat: Add dependency-cruiser for dependency graph validation#2999
feat: Add dependency-cruiser for dependency graph validation#2999joshuayoes merged 13 commits intomasterfrom
Conversation
7b3490f to
d59cc0d
Compare
d59cc0d to
1aa79a2
Compare
0a12288 to
94b73c3
Compare
70a6c07 to
0321dca
Compare
coolsoftwaretyler
left a comment
There was a problem hiding this comment.
Hey @joshuayoes - this looks great. On the default settings, everything works well. But I think we need to make a few fixes for expo router. Here's what I see if I Ignite a new app with Expo router and run yarn depcruise in the new project:
error not-to-unresolvable: src/app/_layout.tsx → src/devtools/ReactotronConfig.ts
error not-to-unresolvable: src/app/_layout.tsx → @/components/ErrorBoundary/ErrorBoundary
error no-non-package-json: app/navigators/navigationTypes.ts → node_modules/@react-navigation/bottom-tabs/lib/module/index.js
x 3 dependency violations (3 errors, 0 warnings). 93 modules, 168 dependencies cruised.| "react-native-web": "~0.21.0", | ||
| "react-native-worklets": "0.7.0-nightly-20251001-14eca5b4c" | ||
| "react-native-worklets": "0.7.0-nightly-20251001-14eca5b4c", | ||
| "setimmediate": "^1.0.5" |
There was a problem hiding this comment.
praise: nice, it looks like this caught something for us?
There was a problem hiding this comment.
Yep, this was an implicit dependency of something else so during an upgrade this version would likely shift or potentially be removed.
I wonder why the e2e tests didn't catch this 🤔 |
…vigation types - Introduced a new `.dependency-cruiser.js` file for managing dependency rules and warnings. - Updated `package.json` to include a script for running dependency-cruiser. - Refactored navigation type definitions by consolidating them into `navigationTypes.ts` for better organization. - Adjusted imports across various components to utilize the new navigation types structure.
…ripts - Introduced a new `.dependency-cruiser.js` file to manage dependency rules and warnings. - Updated `package.json` to include a script for running dependency-cruiser. - Modified CircleCI configuration to run dependency-cruiser as part of the static tests. - Refactored generator options in `src/tools/generators.ts` for improved type handling. - Updated `src/tools/spawn.ts` to use `cross-spawn` directly for better clarity.
- Updated `.gitignore` to exclude generated dependency graph files. - Enhanced `package.json` with a new script to generate SVG and PNG visualizations of the dependency graph using dependency-cruiser.
- Modified the `depcruise:graph` script in `package.json` to target the 'src' directory for generating dependency graph visualizations. - Updated `.gitignore` to include new graph output files.
…dependencies - Adjusted the import path for ReactotronConfig in _layout.tsx to reflect the correct directory structure. - Removed "@react-navigation/bottom-tabs" from demoDependenciesToRemove in demo.ts for cleaner dependency management.
2691f46 to
e9cfd55
Compare
|
This feels like it would close #2959 - is that correct? |
…mScreen - Integrated the hasValidStringProp function directly into DemoShowroomScreen.tsx for improved accessibility and type safety. - Removed the standalone hasValidStringProp.ts file to streamline the codebase.
- Updated the import path for ReactotronConfig to align with the new directory structure.
…endency-cruiser config - Included "utils/delay.ts" in the dependency-cruiser configuration to manage execution delays effectively.
def281d to
60b0d42
Compare
Yes it would! |
coolsoftwaretyler
left a comment
There was a problem hiding this comment.
Looks good and works on my end! I spun up new Ignite apps, ran yarn depcruise, and then ran on Android, iOS, and web without issue.
frankcalise
left a comment
There was a problem hiding this comment.
Great work! Left some comments on some things that caught my eye, LMK if you need any clarity
boilerplate/.dependency-cruiser.js
Outdated
| // React Native / Metro bundler support for platform-specific extensions | ||
| // See: https://reactnative.dev/docs/platform-specific-code | ||
| // See: https://github.com/sverweij/dependency-cruiser/issues/511 | ||
| extensions: [ | ||
| ".ios.tsx", | ||
| ".android.tsx", |
There was a problem hiding this comment.
Do we need .web.t|jsx? extensions here?
There was a problem hiding this comment.
I think we can actually lean on metro for this: I've made an adjustment in this commit: feat(boilerplate): update dependency-cruiser configuration
edit: this is missing another edit, I'll push up a commit soon
There was a problem hiding this comment.
It seems that expo has these two platforms manually set 🤔 https://github.com/expo/expo/blob/main/packages/%40expo/metro-config/src/ExpoMetroConfig.ts#L299
There was a problem hiding this comment.
Actually fixed here: refactor(boilerplate): enhance dependency-cruiser configuration
It doesn't seem to change much about what is currently cruised in the graph but I suspect that will change as projects grow.
There was a problem hiding this comment.
Yeah I just figured it would be good coverage, if you think otherwise that's fine. Trying to think how it would scale
…roConfig for extensions - Replaced hardcoded file extensions in .dependency-cruiser.js with dynamic mapping from metroConfig's sourceExts for improved flexibility and maintainability.
- Changed the import path for ReactotronConfig in _layout.tsx to use the alias "@/devtools/ReactotronConfig" for consistency with the project's directory structure.
…dynamic platform extensions - Added support for multiple platform-specific file extensions in .dependency-cruiser.js by dynamically mapping them from metroConfig's sourceExts, improving flexibility and maintainability.
- Added a new utility function to update the `package.json` scripts for dependency-cruiser to use the 'src' directory instead of 'app', enhancing project structure consistency. - Removed outdated script replacements from the previous implementation for cleaner code.
frankcalise
left a comment
There was a problem hiding this comment.
Thanks for adding this and closing out that issue!
# [11.3.0](v11.2.1...v11.3.0) (2025-10-07) ### Features * Add dependency-cruiser for dependency graph validation ([#2999](#2999)) ([4a9b175](4a9b175))
|
🎉 This PR is included in version 11.3.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Description
This PR adds dependency-cruiser to both the Ignite CLI and boilerplate projects to enforce dependency graph rules and improve code quality. It also includes navigator type refactoring to improve code organization.
Changes:
Added dependency-cruiser: Integrated dependency-cruiser with comprehensive rule sets to catch:
CI Integration: Added
yarn depcruiseto the CircleCI pipeline to run on every buildDependency Graph Visualizer: Added
yarn depcruise:graphscript to generate visual dependency graphsIgnite CLI dependency visualization output
App dependency visualization output
Navigator Type Refactoring: Moved navigation types from
AppNavigator.tsxandDemoNavigator.tsxto a separatenavigationTypes.tsfile for better organization and maintainabilityDual Configuration:
.dependency-cruiser.jsfor the Ignite CLI codebaseboilerplate/.dependency-cruiser.jswith React Native-specific configurations (platform-specific extensions, Metro bundler support)Resolves #2959
Usage
Checklist
README.mdand other relevant documentation has been updated with my changes