Dynamic Import References

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

📦 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(), 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

Language	Extensions	Supported Patterns
JavaScript	.js, .jsx	React.lazy(), dynamic(), loadable()
TypeScript	.ts, .tsx	React.lazy(), dynamic(), loadable(), 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
});

// @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:

📝 Custom Matchers Configuration (Click to expand)

Add this to your VS Code settings.json:

{
  "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
    }
  ]
}

Configuration Options

Property	Type	Description	Required
kind	string	How the function is referenced: • "named" = named import (import { lazy }) • "default" = default import (import dynamic) • "member" = namespace member (React.lazy) • "identifier" = local/project utility	✅
name	string	Function name to detect (e.g., "lazy", "loadable", "myLazy")	For named, member, identifier
source	string	Module specifier (e.g., "react", "@loadable/component")	For named, default, member
namespace	string	Namespace identifier for member access (e.g., "R" in R.lazy)	For member
member	string	Member function name (e.g., "lazy" in R.lazy)	For member
allowAlias	boolean	Allow aliased imports (e.g., { lazy as myLazy })	Optional (default: true)
requireImport	boolean	Require function to be imported vs. locally declared	Optional (default: true)
memberAccess	boolean	Back-compat: allow member access patterns	Optional (default: false)

Examples

Named Import Pattern:

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

Detects: import { asyncComponent } from 'react-async-component'

Member Access Pattern:

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

Detects: import * as Utils from './utils' then Utils.lazy(...)

Local Function Pattern:

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

Detects: Locally defined myLazyLoader function

🔧 Built-in Patterns

The extension automatically detects these patterns without configuration:

Library	Pattern	Example
React	lazy	const Comp = lazy(() => import('./Comp'))
Next.js	dynamic	const Comp = dynamic(() => import('./Comp'))
@loadable/component	loadable	const Comp = loadable(() => import('./Comp'))

🛠️ 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 📦 @loadable/component support - Complete integration 📘 TypeScript support - Complete with types 🎨 Custom import patterns - Configurable matchers 🔗 Path alias resolution - All aliases supported

🔮 Future Enhancements 🔥 Webpack lazy imports - Coming soon 📱 React Native support - Under consideration 🚀 Performance optimizations - Ongoing 🎯 Enhanced pattern detection - Continuous improvement

💡 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}