react-reinspect 0.1.1 → 0.1.2

package/README.md

@@ -57,6 +57,21 @@ 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.
+
 
 ## Example
 

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;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"}

package/dist/plugin/reinspectAutoDiscoverPlugin.js

@@ -0,0 +1,306 @@
+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 isMemoForwardRefCall(node) {
+    const callee = unwrapExpression(node.callee);
+    if (t.isIdentifier(callee)) {
+        return callee.name === 'memo' || callee.name === 'forwardRef';
+    }
+    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 false;
+}
+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 true;
+    }
+    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)) {
+                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)) {
+            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)) {
+                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) {
+                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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reinspect",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Visual runtime inspector for React components with render counters and style overrides.",
   "keywords": [
     "react",
@@ -19,10 +19,15 @@
       "import": "./dist/lib/index.js",
       "require": "./dist/lib/index.cjs"
     },
+    "./vite-plugin": {
+      "types": "./dist/plugin/reinspectAutoDiscoverPlugin.d.ts",
+      "import": "./dist/plugin/reinspectAutoDiscoverPlugin.js"
+    },
     "./style.css": "./dist/lib/style.css"
   },
   "files": [
     "dist/lib",
+    "dist/plugin",
     "README.md"
   ],
   "sideEffects": [
@@ -32,11 +37,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 +68,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"
   }
 }