Dynamic Import References

⚡️ Supercharge VS Code's "Find All References" with React.lazy(), Next.js dynamic(), and @loadable/component 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, Next.js dynamic, and @loadable/component 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'));
const LoadableComponent = loadable(() => import('./MyComponent'));

⚡ Zero Configuration

Just install and go! Works seamlessly with:

• React code splitting with React.lazy()
• Next.js dynamic imports with dynamic()
• @loadable/component for advanced code splitting
• 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(), dynamic(), or loadable()
3. Select "Find All References" (or press Shift+F12)
4. Enjoy complete results including lazy, dynamic, and loadable imports! 🎉

Pro Tip: Works especially well with React components that are code-split using React.lazy(), Next.js dynamic(), or @loadable/component 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
});

// @loadable/component imports
import loadable from '@loadable/component';
const LoadableComponent = loadable(() => import('./components/LoadableComponent'));
const LoadableWithOptions = loadable(() => import('./components/Advanced'), {
  fallback: <div>Loading...</div>
});

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

// TypeScript with types
const TypedComponent: React.ComponentType = lazy(() => import('./TypedComponent'));
const TypedLoadable: LoadableComponent<any> = loadable(() => import('./TypedLoadable'));

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

🎛️ Custom Matchers

Want to add support for your own lazy loading functions or libraries? You can configure custom matchers in your VS Code settings:

{
  "dynamicImportReferences.customMatchers": [
    {
      "kind": "named",
      "name": "asyncComponent", 
      "source": "react-async-component",
      "allowAlias": true
    },
    {
      "kind": "member",
      "namespace": "React",
      "member": "lazy",
      "source": "react"
    },
    {
      "kind": "identifier",
      "name": "myCustomLoader",
      "requireImport": false
    }
  ]
}

{
  "kind": "named",
  "name": "asyncComponent",
  "source": "react-async-component"
}

{
  "kind": "member", 
  "namespace": "Utils",
  "member": "lazy",
  "source": "./utils"
}

{
  "kind": "identifier",
  "name": "myLazyLoader", 
  "requireImport": false
}

🔧 Built-in Patterns

The extension automatically detects these patterns without configuration:

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