Dynamic Import References

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

⚡️ Level Up Your Stack Instantly

✨ 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

📦 Installation (Click to expand)

Method 1: VS Code Marketplace (Recommended)

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
3. Search for "Dynamic Import References"
4. Click Install ✨

Method 2: Command Line

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

Method 3: VSIX File

Download the latest .vsix file from releases and install manually.

🎯 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

Language	Extensions	Supported Patterns
JavaScript	.js, .jsx	React.lazy(), dynamic()
TypeScript	.ts, .tsx	React.lazy(), dynamic(), with types

✅ 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

🚀 Local Development Setup

Prerequisites

Node.js 16+, npm and VS Code 1.60+

Getting Started

# 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

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run watch-tests

Debugging

1. Press F5 to launch the Extension Development Host
2. Open a test project in the new window
3. Test the extension functionality

Building for Release

npm run package

🤝 How to Contribute

We welcome contributions! Here's how you can help:

1. 🐛 Report Bugs - Found an issue? Open an issue
2. 💡 Suggest Features - Have an idea? We'd love to hear it!
3. 📝 Improve Documentation - Help make the docs even better
4. 🔧 Submit Code - Fix bugs or add features with a PR

Contribution Guidelines

• Fork the repository
• Create a feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

🎯 Core Features 🔍 React.lazy() detection - Fully implemented ⚡ Next.js dynamic() detection - Production ready 📘 TypeScript support - Complete with types 🔗 Path alias resolution - All aliases supported

🔮 Future Enhancements 🔥 Webpack lazy imports - Coming soon 📱 React Native support - Under consideration 🎨 Custom import patterns - Planned 🚀 Performance optimizations - Ongoing

💡 Have an idea? Suggest a feature • 🐛 Found a bug? Report it

---

💝 Support

Love this extension? Help us grow!

📄 License

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

---

Made with ❤️ by developers, for developers

_{Icon by Arkinasi}