feat: Add dependency-cruiser for dependency graph validation #2999

joshuayoes · 2025-10-04T01:10:40Z

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:
- Circular dependencies
- Orphaned modules
- Usage of deprecated packages
- Missing package.json dependencies
- Imports of test files from non-test code
- Usage of devDependencies in production code
- And more...
CI Integration: Added yarn depcruise to the CircleCI pipeline to run on every build
Dependency Graph Visualizer: Added yarn depcruise:graph script to generate visual dependency graphs
- Outputs both SVG and PNG formats
- Helps understand codebase architecture at a glance
- Uses Graphviz to render beautiful dependency visualizations
- Example graph shows clean separation between commands, tools, and assets
- Generated files are git-ignored to avoid cluttering commits

Ignite CLI dependency visualization output

App dependency visualization output

Navigator Type Refactoring: Moved navigation types from AppNavigator.tsx and DemoNavigator.tsx to a separate navigationTypes.ts file for better organization and maintainability
Dual Configuration:
- Root .dependency-cruiser.js for the Ignite CLI codebase
- boilerplate/.dependency-cruiser.js with React Native-specific configurations (platform-specific extensions, Metro bundler support)

Resolves #2959

Usage

# Run dependency checks
yarn depcruise

# Generate visual dependency graph (requires Graphviz)
yarn depcruise:graph

Checklist

README.md and other relevant documentation has been updated with my changes
I have manually tested this, including by generating a new app locally (see docs).

coolsoftwaretyler

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.

package.json

coolsoftwaretyler · 2025-10-06T13:45:25Z

boilerplate/package.json

    "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"


praise: nice, it looks like this caught something for us?

Yep, this was an implicit dependency of something else so during an upgrade this version would likely shift or potentially be removed.

joshuayoes · 2025-10-06T16:51:53Z

Here's what I see if I Ignite a new app with Expo router and run yarn depcruise in the new project:

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.

frankcalise · 2025-10-06T18:30:42Z

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.

joshuayoes · 2025-10-06T18:33:02Z

This feels like it would close #2959 - is that correct?

Yes it would!

coolsoftwaretyler

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

Great work! Left some comments on some things that caught my eye, LMK if you need any clarity

boilerplate/.gitignore

frankcalise · 2025-10-06T19:24:12Z

boilerplate/.dependency-cruiser.js

+      // 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",


Do we need .web.t|jsx? extensions here?

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

Although this doesn't seem to have web in the platforms 🤔

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

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.

Yeah I just figured it would be good coverage, if you think otherwise that's fine. Trying to think how it would scale

boilerplate/src/app/_layout.tsx

src/commands/new.ts

….dot file

…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

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))

infinitered-circleci · 2025-10-07T17:11:02Z

🎉 This PR is included in version 11.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

joshuayoes force-pushed the feat/depcruiser branch 2 times, most recently from 7b3490f to d59cc0d Compare October 4, 2025 01:14

joshuayoes changed the title ~~Feat/depcruiser~~ feat: Add dependency-cruiser for dependency graph validation Oct 4, 2025

joshuayoes force-pushed the feat/depcruiser branch from d59cc0d to 1aa79a2 Compare October 4, 2025 01:16

joshuayoes requested review from coolsoftwaretyler and frankcalise October 4, 2025 01:21

joshuayoes added the enhancement label Oct 4, 2025

coolsoftwaretyler force-pushed the master branch from 0a12288 to 94b73c3 Compare October 4, 2025 01:27

joshuayoes force-pushed the feat/depcruiser branch from 70a6c07 to 0321dca Compare October 4, 2025 01:35

coolsoftwaretyler requested changes Oct 6, 2025

View reviewed changes

joshuayoes added 5 commits October 6, 2025 11:05

feat(cli): add scripts for generating dependency graph visualizations

8d04eb5

- 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.

fix(cli): update dependency graph script to use 'src' instead of 'app'

6a119d5

- 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.

joshuayoes force-pushed the feat/depcruiser branch from 2691f46 to e9cfd55 Compare October 6, 2025 18:07

joshuayoes added 3 commits October 6, 2025 11:32

fix(boilerplate): correct ReactotronConfig import path in _layout.tsx

f4dc669

- Updated the import path for ReactotronConfig to align with the new directory structure.

feat(boilerplate): add utility function for delaying execution in dep…

60b0d42

…endency-cruiser config - Included "utils/delay.ts" in the dependency-cruiser configuration to manage execution delays effectively.

joshuayoes force-pushed the feat/depcruiser branch from def281d to 60b0d42 Compare October 6, 2025 18:32

joshuayoes requested a review from coolsoftwaretyler October 6, 2025 18:38

coolsoftwaretyler approved these changes Oct 6, 2025

View reviewed changes

frankcalise requested changes Oct 6, 2025

View reviewed changes

joshuayoes added 4 commits October 6, 2025 16:27

chore(boilerplate): update .gitignore to exclude app-dependency-graph…

0291ebf

….dot file

feat(boilerplate): update dependency-cruiser configuration to use met…

d8fd037

…roConfig for extensions - Replaced hardcoded file extensions in .dependency-cruiser.js with dynamic mapping from metroConfig's sourceExts for improved flexibility and maintainability.

fix(boilerplate): update ReactotronConfig import path to use alias

8e4f5b9

- Changed the import path for ReactotronConfig in _layout.tsx to use the alias "@/devtools/ReactotronConfig" for consistency with the project's directory structure.

frankcalise approved these changes Oct 7, 2025

View reviewed changes

joshuayoes merged commit 4a9b175 into master Oct 7, 2025
3 checks passed

joshuayoes deleted the feat/depcruiser branch October 7, 2025 17:05

infinitered-circleci pushed a commit that referenced this pull request Oct 7, 2025

chore(release): 11.3.0 [skip ci]

0a1746c

# [11.3.0](v11.2.1...v11.3.0) (2025-10-07) ### Features * Add dependency-cruiser for dependency graph validation ([#2999](#2999)) ([4a9b175](4a9b175))

infinitered-circleci added the released label Oct 7, 2025

feat: Add dependency-cruiser for dependency graph validation #2999

feat: Add dependency-cruiser for dependency graph validation #2999

Uh oh!

Conversation

joshuayoes commented Oct 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes:

Usage

Checklist

Uh oh!

coolsoftwaretyler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coolsoftwaretyler Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

joshuayoes Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

joshuayoes commented Oct 6, 2025

Uh oh!

frankcalise commented Oct 6, 2025

Uh oh!

joshuayoes commented Oct 6, 2025

Uh oh!

coolsoftwaretyler left a comment

Choose a reason for hiding this comment

Uh oh!

frankcalise left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

frankcalise Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

joshuayoes Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joshuayoes Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

joshuayoes Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

joshuayoes Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

frankcalise Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

frankcalise left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

infinitered-circleci commented Oct 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

joshuayoes commented Oct 4, 2025 •

edited

Loading

joshuayoes Oct 6, 2025 •

edited

Loading