react-reinspect 0.1.2 → 0.1.3

package/README.md

@@ -72,6 +72,19 @@ export default defineConfig({
 
 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
 
@@ -88,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:
 
@@ -108,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
@@ -137,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.map

@@ -1 +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;AA4JD,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,CAgP7B;AAED,wBAAgB,2BAA2B,IAAI,MAAM,CA2CpD"}
+{"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

@@ -47,19 +47,92 @@ function unwrapExpression(node) {
     }
     return currentNode;
 }
-function isMemoForwardRefCall(node) {
+function isReactCreateElementCall(node) {
     const callee = unwrapExpression(node.callee);
     if (t.isIdentifier(callee)) {
-        return callee.name === 'memo' || callee.name === 'forwardRef';
+        return callee.name === 'createElement';
     }
     if (t.isMemberExpression(callee) &&
         t.isIdentifier(callee.object) &&
         callee.object.name === 'React' &&
         t.isIdentifier(callee.property)) {
-        return callee.property.name === 'memo' || callee.property.name === 'forwardRef';
+        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)) {
@@ -72,7 +145,7 @@ function isWrappedInitializer(node) {
 function isComponentInitializer(node) {
     const expression = unwrapExpression(node);
     if (t.isArrowFunctionExpression(expression) || t.isFunctionExpression(expression)) {
-        return true;
+        return isComponentFunction(expression);
     }
     if (t.isCallExpression(expression)) {
         return isMemoForwardRefCall(expression);
@@ -144,7 +217,8 @@ export function transformModuleForAutoDiscover(code, fileId, scope) {
     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)) {
+            if (isPascalCaseIdentifier(statement.id.name) &&
+                isComponentFunction(statement)) {
                 program.body.splice(index + 1, 0, createFunctionWrapAssignment(statement.id.name, scope, fallbackName));
                 index += 1;
                 modified = true;
@@ -155,7 +229,8 @@ export function transformModuleForAutoDiscover(code, fileId, scope) {
             statement.declaration &&
             t.isFunctionDeclaration(statement.declaration) &&
             statement.declaration.id &&
-            isPascalCaseIdentifier(statement.declaration.id.name)) {
+            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;
@@ -200,7 +275,9 @@ export function transformModuleForAutoDiscover(code, fileId, scope) {
         }
         const declaration = statement.declaration;
         if (t.isFunctionDeclaration(declaration)) {
-            if (declaration.id && isPascalCaseIdentifier(declaration.id.name)) {
+            if (declaration.id &&
+                isPascalCaseIdentifier(declaration.id.name) &&
+                isComponentFunction(declaration)) {
                 const localName = declaration.id.name;
                 const replacementStatements = [
                     declaration,
@@ -212,7 +289,7 @@ export function transformModuleForAutoDiscover(code, fileId, scope) {
                 modified = true;
                 continue;
             }
-            if (!declaration.id) {
+            if (!declaration.id && isComponentFunction(declaration)) {
                 const localIdentifier = t.identifier(DEFAULT_EXPORT_LOCAL_IDENTIFIER);
                 const wrappedValue = createAutoWrapCall(functionDeclarationToExpression(declaration), undefined, scope, fallbackName);
                 const replacementStatements = [

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.2",
+  "version": "0.1.3",
   "description": "Visual runtime inspector for React components with render counters and style overrides.",
   "keywords": [
     "react",
@@ -23,6 +23,10 @@
       "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": [