Dynamic Import References

⚡️ Supercharge VS Code's "Find All References" with React.lazy() and Next.js dynamic() detection

✨ Essential for teams using code splitting, lazy loading, and modern React patterns ✨

This extension is your secret weapon for navigating modern React codebases. It bridges the gap between VS Code's static analysis and React's dynamic patterns, ensuring zero missed references in your lazy-loaded components.

📑 Table of Contents

• ✨ Why You'll Love This Extension
  • 🎯 Smart React & Next.js Detection
  • ⚡ Zero Configuration
  • 🔧 Developer Friendly
  • 🎨 Perfect For React Ecosystems
• 🚀 Quick Start
  • 📦 Installation
  • 🎯 How to Use
• 📋 Supported Patterns & Languages
  • 🔍 Detection Examples
• ⚙️ Configuration
• 🛠️ Development & Contributing
  • 🚀 Local Development Setup
  • 🤝 How to Contribute
• 💝 Support
• 📄 License

✨ Why You'll Love This Extension

Smart React & Next.js Detection

Automatically finds React lazy and Next.js dynamic imports that VS Code's built-in search misses:

// These are now included in "Find All References"!
const LazyComponent = React.lazy(() => import('./MyComponent'));
const DynamicComponent = dynamic(() => import('./MyComponent'));

⚡ Zero Configuration

Just install and go! Works seamlessly with:

• React code splitting with React.lazy()
• Next.js dynamic imports with dynamic()
• Any React-based framework using these patterns
• Custom lazy loading implementations

🔧 Developer Friendly

• No performance impact - only runs when you need it
• TypeScript aware - understands your type definitions
• Path resolution - handles aliases and relative imports
• Monorepo ready - works with complex project structures

🎨 Perfect For React Ecosystems

Designed specifically for React and Next.js projects:

• ⚛️ React with lazy loading
• 🔺 Next.js with dynamic imports
• 📱 React Native Metro bundler
• 🖼️ Gatsby code splitting
• 📦 Any React-based framework

🚀 Quick Start

code --install-extension bubablue00.dynamic-import-references

🎯 How to Use

1. Open any React/Next.js file in your project
2. Right-click on a component name that's used in React.lazy() or dynamic()
3. Select "Find All References" (or press Shift+F12)
4. Enjoy complete results including lazy and dynamic imports! 🎉

Pro Tip: Works especially well with React components that are code-split using React.lazy() or Next.js dynamic() imports!

📋 Supported Patterns & Languages

✅ Detection Examples

// ✅ All of these patterns are detected:

// React lazy loading
const LazyComponent = React.lazy(() => import('./components/LazyComponent'));
const AnotherLazy = lazy(() => import('./components/AnotherComponent'));

// Next.js dynamic imports
const DynamicComponent = dynamic(() => import('./components/Button'));
const ConditionalComponent = dynamic(() => import('./components/Modal'), {
  ssr: false
});

// Variable declarations with lazy/dynamic
let MyLazyComp = React.lazy(() => import('./MyComponent'));
var MyDynamicComp = dynamic(() => import('./MyComponent'));
const MyComponent = lazy(() => import('./path/to/MyComponent'));

// TypeScript with types
const TypedComponent: React.ComponentType = lazy(() => import('./TypedComponent'));

❌ Not Supported (Standard ES6 dynamic imports)

// These patterns are NOT detected by this extension:
const module = await import('./module');
const { Component } = await import('./Component');

⚙️ Configuration

Zero configuration required! 🎉 The extension works automatically when enabled.

🛠️ Development & Contributing

# Clone the repository
git clone https://github.com/bubablue/dynamic-import-references.git
cd dynamic-import-references

# Install dependencies
npm install

# Open in VS Code
code .

# Start development
npm run watch:esbuild

# Run all tests
npm test

# Run tests in watch mode
npm run watch-tests

npm run package

💝 Support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.