@zoerai/tag-selector
v0.0.4
Published
Click any JSX element to see its source code location
Downloads
10
Readme
@zoerai/tag-selector
Click any JSX element to see its source code location - Zero config required! 🎯
A developer tool that allows clicking any JSX element to see its source code location. Works with Next.js Turbopack.
Features
- ✨ Zero Config - Works out of the box with sensible defaults
- 🎯 Click to Inspect - Click any element to see its source file and line number
- 🔍 Visual Overlay - Hover and selection indicators
- 🚀 Next.js Turbopack - Native integration
- 🛡️ Production Safe - Only runs in development mode
- 🎨 Non-invasive - Automatically skips Fragments, Suspense, and ErrorBoundary
Installation
npm install @zoerai/tag-selectorQuick Start
1. Configure Next.js (One Line!)
// next.config.ts
import type { NextConfig } from "next";
import { turbopackInspectorPlugin } from "@zoerai/tag-selector/turbopack";
const nextConfig: NextConfig = {
turbopack: {
rules: turbopackInspectorPlugin(), // 👈 That's it!
},
};
export default nextConfig;2. Add Inspector Component
// app/layout.tsx
import { Inspector } from "@zoerai/tag-selector/components";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Inspector /> {/* 👈 Add the inspector */}
</body>
</html>
);
}3. Start Developing
Press Ctrl + Shift + C (Windows/Linux) or Cmd + Shift + C (Mac) to toggle inspector mode, then click any element!
Advanced Configuration
All options are optional with smart defaults:
turbopackInspectorPlugin({
// File patterns to process (default: "**/*.{jsx,tsx}")
include: "**/*.{jsx,tsx}",
// Additional exclusions (default: [])
// Note: node_modules is already excluded automatically
exclude: ["**/excluded-folder/**"],
// Attribute name for storing path data (default: "data-insp-path")
attributeName: "data-insp-path",
// Tags to skip injection (default: ["Fragment", "Suspense", "ErrorBoundary"])
escapeTags: ["Fragment", "Suspense", "ErrorBoundary", "MyWrapper"],
// Run before other loaders (default: true)
enforcePre: true,
})How It Works
- Build Time: Babel plugin injects
data-insp-pathattributes into JSX elements - Runtime: Inspector component listens for click events
- Inspection: Reads the attribute and displays source location
- Production: Automatically disabled when
NODE_ENV !== 'development'
Development
# Install dependencies
npm install
# Build the library
npm run build
# Watch mode
npm run dev
# Run tests
npm run test
# Type checking
npm run typecheck