https://github.com/maxim-mazurok/vite-circular-dependency-demo
This is a demo project to show what happens when you have circular dependencies in your project and how to fix them.
https://github.com/maxim-mazurok/vite-circular-dependency-demo
circular-dependencies circular-dependency vite vitest
Last synced: 3 months ago
JSON representation
This is a demo project to show what happens when you have circular dependencies in your project and how to fix them.
- Host: GitHub
- URL: https://github.com/maxim-mazurok/vite-circular-dependency-demo
- Owner: Maxim-Mazurok
- Created: 2024-11-18T04:03:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-18T04:06:00.000Z (7 months ago)
- Last Synced: 2025-01-31T09:25:00.769Z (4 months ago)
- Topics: circular-dependencies, circular-dependency, vite, vitest
- Language: TypeScript
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite Circular Dependency Demo
This is a demo project to show what happens when you have circular dependencies in your project and how to fix them.
## Getting Started
1. Clone the repository: `git clone https://github.com/Maxim-Mazurok/vite-circular-dependency-demo`
1. `cd vite-circular-dependency-demo`
1. (optional) Use appropriate Node.js version: `nvm i`
1. Install dependencies: `npm ci`
1. Run the tests: `npm test`
## Notes
The idea is pretty simple: you have router, and component. Router imports component (to render it), and component imports router (to get own page URL). This creates a circular dependency.
Check comments in these files for details:
- [src-bad/component-first.spec.ts](src-bad/component-first.spec.ts)
- [src-bad/router-first.spec.ts](src-bad/router-first.spec.ts)
And compare them with the fixed versions:
- [src-good/component-first.spec.ts](src-good/component-first.spec.ts)
- [src-good/router-first.spec.ts](src-good/router-first.spec.ts)
Another approach is to just extract constants into separate file to avoid circular dependencies.
This can be helpful to detect and fix circular dependencies in your project: https://www.npmjs.com/package/vite-plugin-circular-dependency