react-reinspect 0.1.1 → 0.1.3

package/README.md

@@ -57,6 +57,34 @@ If your app enforces strict CSP and blocks inline styles, import this once in yo
 import 'react-reinspect/style.css'
 ```
 
+Auto-discovery is compile-time and requires the Vite plugin:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
+
+export default defineConfig({
+  plugins: [reinspectAutoDiscoverPlugin(), react()],
+})
+```
+
+Without this plugin, only manually wrapped components (`withReinspect`) are inspectable.
+
+Next.js (webpack mode) can use:
+
+```ts
+// next.config.ts
+import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
+
+const nextConfig = {}
+
+export default withReinspectAutoDiscover(nextConfig)
+```
+
+If your Next dev server runs with Turbopack, switch to webpack mode for this transform plugin.
+
 
 ## Example
 
@@ -73,9 +101,12 @@ You are a senior React code agent, your task is to integrate react-reinspect to
 Do all of the following in one pass:
 1) Install `react-reinspect` using this repo's package manager.
 2) Turn it on in dev mode ONLY by wiring `ReinspectProvider` at app root.
-3) Keep production safe (e.g.: `enabled: import.meta.env.DEV` or however we manage dev/prod in this repo.).
-4) Run validation (build/tests if available) and fix any issues.
-5) Output a concise summary with changed files and how to use it.
+3) If this app uses Vite, add `reinspectAutoDiscoverPlugin` from `react-reinspect/vite-plugin` in `vite.config.*`.
+4) If this app uses Next.js (webpack mode), wrap the Next config with `withReinspectAutoDiscover` from `react-reinspect/next-plugin`.
+5) If Next.js is running with Turbopack, either switch dev to webpack for auto-discovery transforms or fall back to manual wrapping (`withReinspect`).
+6) Keep production safe (e.g.: `enabled: import.meta.env.DEV` or however we manage dev/prod in this repo.).
+7) Run validation (build/tests if available) and fix any issues.
+8) Output a concise summary with changed files and how to use it.
 
 Use this example as the baseline:
 
@@ -93,6 +124,23 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
   return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
 }
 
+For auto-discovery setup, apply one of these depending on framework:
+
+// Vite
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
+
+export default defineConfig({
+  plugins: [reinspectAutoDiscoverPlugin(), react()],
+})
+
+// Next.js (webpack mode)
+import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
+
+const nextConfig = {}
+export default withReinspectAutoDiscover(nextConfig)
+
 Output format I want from you:
 - What changed (bullet list)
 - Why this is safe in production
@@ -122,7 +170,34 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
 }
 ```
 
-### 2) Use it in the browser
+### 2) Enable auto-discovery transforms (pick your framework)
+
+Vite:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
+
+export default defineConfig({
+  plugins: [reinspectAutoDiscoverPlugin(), react()],
+})
+```
+
+Next.js (webpack mode):
+
+```ts
+// next.config.ts
+import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
+
+const nextConfig = {}
+export default withReinspectAutoDiscover(nextConfig)
+```
+
+If your Next dev server runs with Turbopack, switch to webpack mode for auto-discovery transforms.
+
+### 3) Use it in the browser
 
 - Click `Reinspect settings` button.
 - Right-click a wrapped component.

package/dist/plugin/reinspectAutoDiscoverPlugin.d.ts

@@ -0,0 +1,11 @@
+import type { Plugin } from 'vite';
+type AutoDiscoverScope = 'first-party' | 'third-party';
+export interface AutoDiscoverTransformResult {
+    code: string;
+    modified: boolean;
+}
+export declare function shouldSkipThirdPartyModule(id: string): boolean;
+export declare function transformModuleForAutoDiscover(code: string, fileId: string, scope: AutoDiscoverScope): AutoDiscoverTransformResult;
+export declare function reinspectAutoDiscoverPlugin(): Plugin;
+export {};
+//# sourceMappingURL=reinspectAutoDiscoverPlugin.d.ts.map

package/dist/plugin/reinspectAutoDiscoverPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reinspectAutoDiscoverPlugin.d.ts","sourceRoot":"","sources":["../../reinspectAutoDiscoverPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC,KAAK,iBAAiB,GAAG,aAAa,GAAG,aAAa,CAAA;AAgBtD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB;AAmQD,wBAAgB,0BAA0B,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAE9D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,iBAAiB,GACvB,2BAA2B,CAwP7B;AAED,wBAAgB,2BAA2B,IAAI,MAAM,CA2CpD"}

package/dist/plugin/reinspectAutoDiscoverPlugin.js

@@ -0,0 +1,383 @@
+import path from 'node:path';
+import { parse } from '@babel/parser';
+import { generate } from '@babel/generator';
+import * as t from '@babel/types';
+const AUTO_WRAP_IMPORT_SOURCE = 'react-reinspect';
+const AUTO_WRAP_IMPORT_NAME = 'autoWrapInspectable';
+const DEFAULT_EXPORT_LOCAL_IDENTIFIER = '__reinspect_default_component';
+const SUPPORTED_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
+const THIRD_PARTY_SKIP_PATTERNS = [
+    '/node_modules/react/',
+    '/node_modules/react-dom/',
+    '/node_modules/scheduler/',
+    '/node_modules/@vite/',
+    '/node_modules/vite/',
+    '/node_modules/@react-refresh/',
+];
+function normalizeModuleId(id) {
+    const withoutQuery = id.split('?')[0];
+    return withoutQuery.split(path.sep).join('/');
+}
+function isPascalCaseIdentifier(name) {
+    return /^[A-Z][A-Za-z0-9]*$/.test(name);
+}
+function inferFallbackName(filePath) {
+    const baseName = path.basename(filePath).replace(/\.[^.]+$/, '');
+    const tokens = baseName
+        .replace(/[^A-Za-z0-9]+/g, ' ')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+    if (tokens.length === 0) {
+        return 'Component';
+    }
+    return tokens
+        .map((token) => token[0].toUpperCase() + token.slice(1))
+        .join('');
+}
+function unwrapExpression(node) {
+    let currentNode = node;
+    while (t.isParenthesizedExpression(currentNode) ||
+        t.isTSAsExpression(currentNode) ||
+        t.isTSTypeAssertion(currentNode) ||
+        t.isTSNonNullExpression(currentNode) ||
+        t.isTSInstantiationExpression(currentNode) ||
+        t.isTypeCastExpression(currentNode)) {
+        currentNode = currentNode.expression;
+    }
+    return currentNode;
+}
+function isReactCreateElementCall(node) {
+    const callee = unwrapExpression(node.callee);
+    if (t.isIdentifier(callee)) {
+        return callee.name === 'createElement';
+    }
+    if (t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.object) &&
+        callee.object.name === 'React' &&
+        t.isIdentifier(callee.property)) {
+        return callee.property.name === 'createElement';
+    }
+    return false;
+}
+function isAstNode(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'type' in value &&
+        typeof value.type === 'string');
+}
+function containsRenderableReactNode(node) {
+    if (!node) {
+        return false;
+    }
+    if (t.isJSXElement(node) || t.isJSXFragment(node)) {
+        return true;
+    }
+    if (t.isCallExpression(node) && isReactCreateElementCall(node)) {
+        return true;
+    }
+    for (const fieldValue of Object.values(node)) {
+        if (Array.isArray(fieldValue)) {
+            for (const value of fieldValue) {
+                if (isAstNode(value) && containsRenderableReactNode(value)) {
+                    return true;
+                }
+            }
+            continue;
+        }
+        if (isAstNode(fieldValue) && containsRenderableReactNode(fieldValue)) {
+            return true;
+        }
+    }
+    return false;
+}
+function isComponentFunction(node) {
+    if (t.isBlockStatement(node.body)) {
+        return containsRenderableReactNode(node.body);
+    }
+    return containsRenderableReactNode(node.body);
+}
+function isMemoForwardRefCallee(callee) {
+    const expression = unwrapExpression(callee);
+    if (t.isIdentifier(expression)) {
+        return expression.name === 'memo' || expression.name === 'forwardRef';
+    }
+    if (t.isMemberExpression(expression) &&
+        t.isIdentifier(expression.object) &&
+        expression.object.name === 'React' &&
+        t.isIdentifier(expression.property)) {
+        return (expression.property.name === 'memo' ||
+            expression.property.name === 'forwardRef');
+    }
+    return false;
+}
+function isMemoForwardRefCall(node) {
+    const callee = unwrapExpression(node.callee);
+    if (!isMemoForwardRefCallee(callee)) {
+        return false;
+    }
+    if (node.arguments.length === 0) {
+        return false;
+    }
+    const firstArgument = node.arguments[0];
+    if (!t.isExpression(firstArgument)) {
+        return false;
+    }
+    const componentCandidate = unwrapExpression(firstArgument);
+    if (t.isArrowFunctionExpression(componentCandidate) ||
+        t.isFunctionExpression(componentCandidate)) {
+        return isComponentFunction(componentCandidate);
+    }
+    if (t.isIdentifier(componentCandidate)) {
+        return isPascalCaseIdentifier(componentCandidate.name);
+    }
+    return true;
+}
+function isWrappedInitializer(node) {
+    const expression = unwrapExpression(node);
+    if (!t.isCallExpression(expression)) {
+        return false;
+    }
+    const callee = unwrapExpression(expression.callee);
+    return (t.isIdentifier(callee) &&
+        (callee.name === AUTO_WRAP_IMPORT_NAME || callee.name === 'withReinspect'));
+}
+function isComponentInitializer(node) {
+    const expression = unwrapExpression(node);
+    if (t.isArrowFunctionExpression(expression) || t.isFunctionExpression(expression)) {
+        return isComponentFunction(expression);
+    }
+    if (t.isCallExpression(expression)) {
+        return isMemoForwardRefCall(expression);
+    }
+    return false;
+}
+function createAutoWrapCall(expression, componentName, scope, fallbackName) {
+    const metadataProperties = [
+        t.objectProperty(t.identifier('scope'), t.stringLiteral(scope)),
+        t.objectProperty(t.identifier('fallbackName'), t.stringLiteral(fallbackName)),
+    ];
+    if (componentName) {
+        metadataProperties.unshift(t.objectProperty(t.identifier('componentName'), t.stringLiteral(componentName)));
+    }
+    return t.callExpression(t.identifier(AUTO_WRAP_IMPORT_NAME), [
+        expression,
+        t.objectExpression(metadataProperties),
+    ]);
+}
+function createFunctionWrapAssignment(name, scope, fallbackName) {
+    return t.expressionStatement(t.assignmentExpression('=', t.identifier(name), createAutoWrapCall(t.identifier(name), name, scope, fallbackName)));
+}
+function functionDeclarationToExpression(node) {
+    const expression = t.functionExpression(node.id, node.params, node.body, node.generator, node.async);
+    expression.typeParameters = node.typeParameters;
+    expression.returnType = node.returnType;
+    return expression;
+}
+function isSupportedSourceFile(id) {
+    if (id.startsWith('\0') || id.startsWith('/@')) {
+        return false;
+    }
+    return SUPPORTED_FILE_PATTERN.test(id);
+}
+function isFirstPartyModule(id) {
+    return id.includes('/src/') && !id.includes('/node_modules/');
+}
+export function shouldSkipThirdPartyModule(id) {
+    return THIRD_PARTY_SKIP_PATTERNS.some((pattern) => id.includes(pattern));
+}
+export function transformModuleForAutoDiscover(code, fileId, scope) {
+    let ast;
+    try {
+        ast = parse(code, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx'],
+        });
+    }
+    catch {
+        return { code, modified: false };
+    }
+    const program = ast.program;
+    const fallbackName = inferFallbackName(fileId);
+    let modified = false;
+    let autoWrapImportDeclaration;
+    let hasAutoWrapImport = false;
+    for (const statement of program.body) {
+        if (!t.isImportDeclaration(statement)) {
+            continue;
+        }
+        if (statement.source.value !== AUTO_WRAP_IMPORT_SOURCE) {
+            continue;
+        }
+        autoWrapImportDeclaration = statement;
+        hasAutoWrapImport = statement.specifiers.some((specifier) => t.isImportSpecifier(specifier) &&
+            t.isIdentifier(specifier.imported) &&
+            specifier.imported.name === AUTO_WRAP_IMPORT_NAME);
+    }
+    for (let index = 0; index < program.body.length; index += 1) {
+        const statement = program.body[index];
+        if (t.isFunctionDeclaration(statement) && statement.id) {
+            if (isPascalCaseIdentifier(statement.id.name) &&
+                isComponentFunction(statement)) {
+                program.body.splice(index + 1, 0, createFunctionWrapAssignment(statement.id.name, scope, fallbackName));
+                index += 1;
+                modified = true;
+            }
+            continue;
+        }
+        if (t.isExportNamedDeclaration(statement) &&
+            statement.declaration &&
+            t.isFunctionDeclaration(statement.declaration) &&
+            statement.declaration.id &&
+            isPascalCaseIdentifier(statement.declaration.id.name) &&
+            isComponentFunction(statement.declaration)) {
+            program.body.splice(index + 1, 0, createFunctionWrapAssignment(statement.declaration.id.name, scope, fallbackName));
+            index += 1;
+            modified = true;
+            continue;
+        }
+        const processVariableDeclaration = (declaration) => {
+            let declarationChanged = false;
+            for (const declarator of declaration.declarations) {
+                if (!t.isIdentifier(declarator.id) || !declarator.init) {
+                    continue;
+                }
+                if (!isPascalCaseIdentifier(declarator.id.name)) {
+                    continue;
+                }
+                if (!isComponentInitializer(declarator.init)) {
+                    continue;
+                }
+                if (isWrappedInitializer(declarator.init)) {
+                    continue;
+                }
+                declarator.init = createAutoWrapCall(declarator.init, declarator.id.name, scope, fallbackName);
+                declarationChanged = true;
+            }
+            return declarationChanged;
+        };
+        if (t.isVariableDeclaration(statement)) {
+            if (processVariableDeclaration(statement)) {
+                modified = true;
+            }
+            continue;
+        }
+        if (t.isExportNamedDeclaration(statement) &&
+            statement.declaration &&
+            t.isVariableDeclaration(statement.declaration)) {
+            if (processVariableDeclaration(statement.declaration)) {
+                modified = true;
+            }
+            continue;
+        }
+        if (!t.isExportDefaultDeclaration(statement)) {
+            continue;
+        }
+        const declaration = statement.declaration;
+        if (t.isFunctionDeclaration(declaration)) {
+            if (declaration.id &&
+                isPascalCaseIdentifier(declaration.id.name) &&
+                isComponentFunction(declaration)) {
+                const localName = declaration.id.name;
+                const replacementStatements = [
+                    declaration,
+                    createFunctionWrapAssignment(localName, scope, fallbackName),
+                    t.exportDefaultDeclaration(t.identifier(localName)),
+                ];
+                program.body.splice(index, 1, ...replacementStatements);
+                index += replacementStatements.length - 1;
+                modified = true;
+                continue;
+            }
+            if (!declaration.id && isComponentFunction(declaration)) {
+                const localIdentifier = t.identifier(DEFAULT_EXPORT_LOCAL_IDENTIFIER);
+                const wrappedValue = createAutoWrapCall(functionDeclarationToExpression(declaration), undefined, scope, fallbackName);
+                const replacementStatements = [
+                    t.variableDeclaration('const', [
+                        t.variableDeclarator(localIdentifier, wrappedValue),
+                    ]),
+                    t.exportDefaultDeclaration(localIdentifier),
+                ];
+                program.body.splice(index, 1, ...replacementStatements);
+                index += replacementStatements.length - 1;
+                modified = true;
+            }
+            continue;
+        }
+        if (!t.isExpression(declaration)) {
+            continue;
+        }
+        if (!isComponentInitializer(declaration) || isWrappedInitializer(declaration)) {
+            continue;
+        }
+        const localIdentifier = t.identifier(DEFAULT_EXPORT_LOCAL_IDENTIFIER);
+        const wrappedValue = createAutoWrapCall(declaration, undefined, scope, fallbackName);
+        const replacementStatements = [
+            t.variableDeclaration('const', [
+                t.variableDeclarator(localIdentifier, wrappedValue),
+            ]),
+            t.exportDefaultDeclaration(localIdentifier),
+        ];
+        program.body.splice(index, 1, ...replacementStatements);
+        index += replacementStatements.length - 1;
+        modified = true;
+    }
+    if (!modified) {
+        return { code, modified: false };
+    }
+    if (autoWrapImportDeclaration) {
+        if (!hasAutoWrapImport) {
+            autoWrapImportDeclaration.specifiers.push(t.importSpecifier(t.identifier(AUTO_WRAP_IMPORT_NAME), t.identifier(AUTO_WRAP_IMPORT_NAME)));
+        }
+    }
+    else {
+        let insertIndex = 0;
+        while (insertIndex < program.body.length &&
+            t.isImportDeclaration(program.body[insertIndex])) {
+            insertIndex += 1;
+        }
+        program.body.splice(insertIndex, 0, t.importDeclaration([
+            t.importSpecifier(t.identifier(AUTO_WRAP_IMPORT_NAME), t.identifier(AUTO_WRAP_IMPORT_NAME)),
+        ], t.stringLiteral(AUTO_WRAP_IMPORT_SOURCE)));
+    }
+    const output = generate(ast, {
+        jsescOption: { minimal: true },
+    });
+    return {
+        code: output.code,
+        modified: true,
+    };
+}
+export function reinspectAutoDiscoverPlugin() {
+    return {
+        name: 'reinspect-auto-discover',
+        apply: 'serve',
+        enforce: 'pre',
+        transform(sourceCode, id) {
+            const normalizedId = normalizeModuleId(id);
+            if (!isSupportedSourceFile(normalizedId)) {
+                return null;
+            }
+            if (normalizedId.includes('/node_modules/react-reinspect/')) {
+                return null;
+            }
+            if (normalizedId.includes('/src/reinspect/')) {
+                return null;
+            }
+            const scope = isFirstPartyModule(normalizedId)
+                ? 'first-party'
+                : 'third-party';
+            if (scope === 'third-party' && shouldSkipThirdPartyModule(normalizedId)) {
+                return null;
+            }
+            const transformedResult = transformModuleForAutoDiscover(sourceCode, normalizedId, scope);
+            if (!transformedResult.modified) {
+                return null;
+            }
+            return {
+                code: transformedResult.code,
+                map: null,
+            };
+        },
+    };
+}

package/dist/plugin/reinspectNextAutoDiscoverLoader.d.ts

@@ -0,0 +1,11 @@
+interface ReinspectNextLoaderOptions {
+    includeThirdParty?: boolean;
+}
+interface LoaderContextLike {
+    resourcePath: string;
+    getOptions?: () => ReinspectNextLoaderOptions;
+    async?: () => ((error: Error | null, code?: string) => void) | undefined;
+}
+export default function reinspectNextAutoDiscoverLoader(this: LoaderContextLike, sourceCode: string): string | void;
+export {};
+//# sourceMappingURL=reinspectNextAutoDiscoverLoader.d.ts.map

package/dist/plugin/reinspectNextAutoDiscoverLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reinspectNextAutoDiscoverLoader.d.ts","sourceRoot":"","sources":["../../reinspectNextAutoDiscoverLoader.ts"],"names":[],"mappings":"AAQA,UAAU,0BAA0B;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,UAAU,iBAAiB;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,0BAA0B,CAAA;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACzE;AA4DD,MAAM,CAAC,OAAO,UAAU,+BAA+B,CACrD,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE,MAAM,GACjB,MAAM,GAAG,IAAI,CAyBf"}

package/dist/plugin/reinspectNextAutoDiscoverLoader.js

@@ -0,0 +1,58 @@
+import path from 'node:path';
+import { shouldSkipThirdPartyModule, transformModuleForAutoDiscover, } from './reinspectAutoDiscoverPlugin';
+const SUPPORTED_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
+function normalizeModuleId(id) {
+    return id.split(path.sep).join('/');
+}
+function isSupportedSourceFile(id) {
+    if (!SUPPORTED_FILE_PATTERN.test(id)) {
+        return false;
+    }
+    if (id.includes('/node_modules/react-reinspect/')) {
+        return false;
+    }
+    return true;
+}
+function resolveAutoDiscoverScope(normalizedId, includeThirdParty) {
+    const isThirdParty = normalizedId.includes('/node_modules/');
+    if (!isThirdParty) {
+        return 'first-party';
+    }
+    if (!includeThirdParty || shouldSkipThirdPartyModule(normalizedId)) {
+        return null;
+    }
+    return 'third-party';
+}
+function runTransform(sourceCode, normalizedId, options) {
+    if (!isSupportedSourceFile(normalizedId)) {
+        return sourceCode;
+    }
+    const includeThirdParty = Boolean(options.includeThirdParty);
+    const scope = resolveAutoDiscoverScope(normalizedId, includeThirdParty);
+    if (!scope) {
+        return sourceCode;
+    }
+    const transformedResult = transformModuleForAutoDiscover(sourceCode, normalizedId, scope);
+    return transformedResult.modified ? transformedResult.code : sourceCode;
+}
+export default function reinspectNextAutoDiscoverLoader(sourceCode) {
+    const options = this.getOptions?.() ?? {};
+    const normalizedId = normalizeModuleId(this.resourcePath ?? '');
+    const callback = this.async?.();
+    try {
+        const transformedCode = runTransform(sourceCode, normalizedId, options);
+        if (callback) {
+            callback(null, transformedCode);
+            return;
+        }
+        return transformedCode;
+    }
+    catch (error) {
+        const nextError = error instanceof Error ? error : new Error('Failed to transform module');
+        if (callback) {
+            callback(nextError);
+            return;
+        }
+        throw nextError;
+    }
+}

package/dist/plugin/reinspectNextPlugin.d.ts

@@ -0,0 +1,32 @@
+export interface ReinspectNextPluginOptions {
+    includeThirdParty?: boolean;
+    enableInProduction?: boolean;
+}
+interface NextWebpackOptions {
+    dev: boolean;
+}
+interface NextWebpackUseEntry {
+    loader?: string;
+    options?: {
+        includeThirdParty?: boolean;
+    };
+}
+interface NextWebpackRule {
+    test?: RegExp;
+    enforce?: 'pre' | 'post';
+    exclude?: RegExp;
+    use?: NextWebpackUseEntry | NextWebpackUseEntry[];
+}
+interface NextWebpackModuleConfig {
+    rules?: NextWebpackRule[];
+}
+interface NextWebpackConfig {
+    module?: NextWebpackModuleConfig;
+}
+type NextWebpackFunction = (config: NextWebpackConfig, options: NextWebpackOptions) => NextWebpackConfig;
+interface NextConfigLike {
+    webpack?: NextWebpackFunction;
+}
+export declare function withReinspectAutoDiscover(nextConfig?: NextConfigLike, pluginOptions?: ReinspectNextPluginOptions): NextConfigLike;
+export {};
+//# sourceMappingURL=reinspectNextPlugin.d.ts.map

package/dist/plugin/reinspectNextPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reinspectNextPlugin.d.ts","sourceRoot":"","sources":["../../reinspectNextPlugin.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,OAAO,CAAA;CACb;AAED,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE;QACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAC5B,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAA;CAClD;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;CAC1B;AAED,UAAU,iBAAiB;IACzB,MAAM,CAAC,EAAE,uBAAuB,CAAA;CACjC;AAED,KAAK,mBAAmB,GAAG,CACzB,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,kBAAkB,KACxB,iBAAiB,CAAA;AAEtB,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B;AAqED,wBAAgB,yBAAyB,CACvC,UAAU,GAAE,cAAmB,EAC/B,aAAa,GAAE,0BAA+B,GAC7C,cAAc,CAqBhB"}

package/dist/plugin/reinspectNextPlugin.js

@@ -0,0 +1,70 @@
+import { fileURLToPath } from 'node:url';
+function resolveNextLoaderPath() {
+    const loaderUrl = new URL('./reinspectNextAutoDiscoverLoader.js', import.meta.url);
+    if (loaderUrl.protocol === 'file:') {
+        return fileURLToPath(loaderUrl);
+    }
+    return loaderUrl.pathname;
+}
+function hasReinspectLoaderRule(rules) {
+    for (const rule of rules) {
+        const ruleUse = Array.isArray(rule.use)
+            ? rule.use
+            : rule.use
+                ? [rule.use]
+                : [];
+        if (ruleUse.some((entry) => entry.loader === resolveNextLoaderPath())) {
+            return true;
+        }
+    }
+    return false;
+}
+function addReinspectLoaderRule(config, options) {
+    const moduleConfig = config.module ?? {};
+    const rules = moduleConfig.rules ?? [];
+    if (hasReinspectLoaderRule(rules)) {
+        config.module = {
+            ...moduleConfig,
+            rules,
+        };
+        return config;
+    }
+    const nextLoaderPath = resolveNextLoaderPath();
+    const nextRules = [
+        {
+            test: /\.[cm]?[jt]sx?$/,
+            enforce: 'pre',
+            exclude: /node_modules/,
+            use: [
+                {
+                    loader: nextLoaderPath,
+                    options: {
+                        includeThirdParty: Boolean(options.includeThirdParty),
+                    },
+                },
+            ],
+        },
+        ...rules,
+    ];
+    config.module = {
+        ...moduleConfig,
+        rules: nextRules,
+    };
+    return config;
+}
+export function withReinspectAutoDiscover(nextConfig = {}, pluginOptions = {}) {
+    const originalWebpack = nextConfig.webpack;
+    return {
+        ...nextConfig,
+        webpack(config, options) {
+            const resolvedConfig = typeof originalWebpack === 'function'
+                ? originalWebpack(config, options) ?? config
+                : config;
+            const shouldEnable = options.dev || Boolean(pluginOptions.enableInProduction);
+            if (!shouldEnable) {
+                return resolvedConfig;
+            }
+            return addReinspectLoaderRule(resolvedConfig, pluginOptions);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reinspect",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Visual runtime inspector for React components with render counters and style overrides.",
   "keywords": [
     "react",
@@ -19,10 +19,19 @@
       "import": "./dist/lib/index.js",
       "require": "./dist/lib/index.cjs"
     },
+    "./vite-plugin": {
+      "types": "./dist/plugin/reinspectAutoDiscoverPlugin.d.ts",
+      "import": "./dist/plugin/reinspectAutoDiscoverPlugin.js"
+    },
+    "./next-plugin": {
+      "types": "./dist/plugin/reinspectNextPlugin.d.ts",
+      "import": "./dist/plugin/reinspectNextPlugin.js"
+    },
     "./style.css": "./dist/lib/style.css"
   },
   "files": [
     "dist/lib",
+    "dist/plugin",
     "README.md"
   ],
   "sideEffects": [
@@ -32,11 +41,13 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "build:lib": "vite build -c vite.lib.config.ts && tsc -p tsconfig.lib.json",
+    "build:plugin": "tsc -p tsconfig.plugin.json",
+    "build:package": "pnpm build:lib && pnpm build:plugin",
     "lint": "eslint .",
     "preview": "vite preview",
     "pack:check": "npm pack --dry-run --cache ./.cache/npm",
     "publish:npm": "npm publish --access public --cache ./.cache/npm",
-    "prepublishOnly": "pnpm build:lib",
+    "prepublishOnly": "pnpm build:package",
     "test": "vitest run",
     "test:watch": "vitest"
   },
@@ -61,14 +72,14 @@
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
+    "globals": "^17.5.0",
     "jsdom": "^29.0.2",
     "magic-string": "^0.30.21",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.4",
-    "vitest": "^4.1.4",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "typescript-eslint": "^8.58.1",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4"
   }
 }