nextjs-ide-helper 1.1.3 → 1.3.1

package/README.md

@@ -12,6 +12,8 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 - ⚡ **Hydration Safe**: No SSR/client hydration mismatches
 - 📱 **TypeScript Support**: Full TypeScript definitions included
 - 🔌 **Multi-IDE Support**: Supports Cursor, VS Code, WebStorm, and Atom
+- 🎭 **Multiple Component Patterns**: Supports all React component export patterns
+- 🔍 **AST-Based Processing**: Uses robust Abstract Syntax Tree parsing for accurate code transformation
 
 ## Installation
 
@@ -53,7 +55,7 @@ const nextConfig = {
 };
 
 module.exports = withIdeHelper({
-  componentPaths: ['src/components', 'components', 'src/ui'], // directories to scan
+  componentPaths: ['src/components', 'components', 'src/ui'], // directories to scan (supports glob patterns)
   projectRoot: process.cwd(), // project root directory
   importPath: 'nextjs-ide-plugin/withIdeButton', // import path for the HOC
   enabled: process.env.NODE_ENV === 'development', // enable/disable
@@ -65,12 +67,34 @@ module.exports = withIdeHelper({
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `componentPaths` | `string[]` | `['src/components']` | Directories to scan for React components |
+| `componentPaths` | `string[]` | `['src/components']` | Directories to scan for React components (supports glob patterns) |
 | `projectRoot` | `string` | `process.cwd()` | Root directory of your project |
 | `importPath` | `string` | `'nextjs-ide-plugin/withIdeButton'` | Import path for the withIdeButton HOC |
 | `enabled` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable the plugin |
 | `ideType` | `'cursor' \| 'vscode' \| 'webstorm' \| 'atom'` | `'cursor'` | IDE to open files in |
 
+### Glob Pattern Support
+
+The `componentPaths` option supports glob patterns for matching nested directory structures:
+
+```javascript
+module.exports = withIdeHelper({
+  componentPaths: [
+    'src/components/**',           // matches all nested directories under src/components
+    '**/components/**',           // matches components directories anywhere in the project
+    'app/**/ui/**',               // matches ui directories nested anywhere under app
+    'modules/*/components/**'     // matches components in any module subdirectory
+  ]
+})(nextConfig);
+```
+
+**Glob Pattern Examples:**
+- `*` - matches any characters within a single directory level
+- `**` - matches any number of directories and subdirectories recursively
+- `src/components/*` - matches `src/components/Button.tsx` but not `src/components/ui/Button.tsx`
+- `src/components/**` - matches both `src/components/Button.tsx` and `src/components/ui/forms/Button.tsx`
+- `**/components/**` - matches `app/components/Button.tsx`, `modules/feature/components/deep/Widget.tsx`, etc.
+
 ## Manual Usage
 
 You can also manually wrap components:
@@ -91,16 +115,95 @@ export default withIdeButton(MyComponent, 'src/components/MyComponent.tsx', {
 });
 ```
 
+## Supported Component Patterns
+
+The plugin automatically detects and wraps all types of React component export patterns:
+
+### Named Components
+```tsx
+// Standard pattern
+const MyComponent = () => <div>Hello</div>;
+export default MyComponent;
+
+// Variable declaration
+const MyComponent = function() {
+  return <div>Hello</div>;
+};
+export default MyComponent;
+```
+
+### Direct Export Function Components
+```tsx
+// Named function
+export default function MyComponent() {
+  return <div>Hello</div>;
+}
+
+// Anonymous function
+export default function() {
+  return <div>Hello</div>;
+}
+```
+
+### Arrow Function Components
+```tsx
+// Anonymous arrow function
+export default () => {
+  return <div>Hello</div>;
+};
+
+// Arrow function with parameters
+export default (props) => {
+  return <div>Hello {props.name}</div>;
+};
+```
+
+### Class Components
+```tsx
+// Named class
+export default class MyComponent extends React.Component {
+  render() {
+    return <div>Hello</div>;
+  }
+}
+
+// TypeScript class
+export default class MyComponent extends Component<Props> {
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
+### TypeScript Components
+```tsx
+// Function with TypeScript
+interface Props {
+  title: string;
+}
+
+export default function MyComponent(props: Props) {
+  return <div>{props.title}</div>;
+}
+
+// Arrow function with TypeScript
+export default (props: Props) => {
+  return <div>{props.title}</div>;
+};
+```
+
 ## How It Works
 
-1. **Webpack Loader**: The plugin uses a custom webpack loader to transform your React components at build time
-2. **Automatic Detection**: It scans specified directories for `.tsx` and `.jsx` files
-3. **Smart Wrapping**: Only wraps components that export a default React component
-4. **Development Only**: The IDE buttons only appear in development mode
-5. **Hydration Safe**: Uses client-side state to prevent SSR/hydration mismatches
+1. **AST-Based Processing**: Uses Babel's Abstract Syntax Tree parser for robust code analysis
+2. **Webpack Loader**: The plugin uses a custom webpack loader to transform your React components at build time
+3. **Automatic Detection**: It scans specified directories for `.tsx` and `.jsx` files
+4. **Smart Wrapping**: Only wraps components that export a default React component (PascalCase names)
+5. **Development Only**: The IDE buttons only appear in development mode
+6. **Hydration Safe**: Uses client-side state to prevent SSR/hydration mismatches
 
-## Example
+## Examples
 
+### Standard Component Pattern
 Before (your original component):
 ```tsx
 // src/components/Button.tsx
@@ -133,7 +236,53 @@ const Button = ({ children, onClick }) => {
 
 export default withIdeButton(Button, 'src/components/Button.tsx', { 
   projectRoot: '/path/to/project',
-  ideType: 'cursor' // defaults to cursor, can be 'vscode', 'webstorm', 'atom'
+  ideType: 'cursor'
+});
+```
+
+### Direct Export Function Component
+Before:
+```tsx
+// src/components/Header.tsx
+export default function Header() {
+  return <header>My App Header</header>;
+}
+```
+
+After (automatically transformed):
+```tsx
+// src/components/Header.tsx (transformed by the plugin)
+import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+
+function Header() {
+  return <header>My App Header</header>;
+}
+
+export default withIdeButton(Header, 'src/components/Header.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
+});
+```
+
+### Anonymous Component
+Before:
+```tsx
+// src/components/Footer.tsx
+export default () => {
+  return <footer>© 2025 My App</footer>;
+};
+```
+
+After (automatically transformed):
+```tsx
+// src/components/Footer.tsx (transformed by the plugin)
+import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+
+export default withIdeButton(() => {
+  return <footer>© 2025 My App</footer>;
+}, 'src/components/Footer.tsx', {
+  projectRoot: '/path/to/project',
+  ideType: 'cursor'
 });
 ```
 
@@ -174,8 +323,24 @@ MIT
 
 ## Changelog
 
+See [CHANGELOG.md](./CHANGELOG.md) for detailed release notes.
+
+### Recent Releases
+
+### 1.3.0 - Glob Pattern Support
+- Added support for glob patterns in `componentPaths` configuration
+- Support for nested directory matching with `**` patterns
+- Enhanced file path matching for complex project structures
+- Updated tests and documentation
+
+### 1.2.0 - Enhanced Component Support
+- Added support for all React component export patterns
+- AST-based code transformation for better reliability
+- Anonymous component support
+- Enhanced TypeScript compatibility
+
 ### 1.1.3
-updated readme
+- Updated readme
 
 ### 1.1.2
 - Added support for multiple IDEs (Cursor, VS Code, WebStorm, Atom)