@vibexdotnew/inspector 0.0.1 → 0.0.2

package/expo/metro-transformer.js

@@ -0,0 +1,395 @@
+/**
+ * Metro transformer that automatically:
+ * 1. Wraps _layout.tsx with ErrorBoundary for error handling
+ * 2. Injects VisualInspector for element inspection (development only)
+ * 3. Adds dataSet attributes to all JSX elements for element inspection
+ *    - vibexLoc: "filePath:lineNumber:columnNumber" (maps to data-vibex-loc)
+ *    - vibexName: component/tag name (maps to data-vibex-name)
+ * Uses Babel AST transformations for reliable code modification
+ */
+
+const parser = require("@babel/parser");
+const traverse = require("@babel/traverse").default;
+const generate = require("@babel/generator").default;
+const t = require("@babel/types");
+
+const babelTransformer = require("@expo/metro-config/babel-transformer");
+
+
+/**
+ * Checks if the file is the root _layout.tsx
+ */
+function isRootLayout(filename) {
+    return (
+        (filename.includes("app/_layout.tsx") ||
+            filename.includes("app/_layout.js")) &&
+        !filename.includes("app/(") // Exclude grouped layouts
+    );
+}
+
+/**
+ * Checks if the file should have dataSet attributes added
+ */
+function shouldAddDataAttributes(filename) {
+    const ext = filename.split(".").pop();
+    return ["ts", "tsx", "js", "jsx"].includes(ext);
+}
+
+/**
+ * Gets the relative file path from the project root
+ */
+function getRelativeFilePath(filename) {
+    const cwd = process.cwd();
+    if (filename.startsWith(cwd)) {
+        return filename.slice(cwd.length + 1);
+    }
+    return filename;
+}
+
+/**
+ * Parses code with Babel, trying different configurations
+ */
+function parseCode(code) {
+    const parserOptions = {
+        sourceType: "module",
+        plugins: [
+            "jsx",
+            "typescript",
+            "decorators-legacy",
+            "classProperties",
+            "classPrivateProperties",
+            "classPrivateMethods",
+            "exportDefaultFrom",
+            "exportNamespaceFrom",
+            "dynamicImport",
+            "nullishCoalescingOperator",
+            "optionalChaining",
+            "objectRestSpread",
+        ],
+    };
+
+    try {
+        return parser.parse(code, parserOptions);
+    } catch (error) {
+        // Try without TypeScript plugin
+        const jsOptions = {
+            ...parserOptions,
+            plugins: parserOptions.plugins.filter((p) => p !== "typescript"),
+        };
+        return parser.parse(code, jsOptions);
+    }
+}
+
+/**
+ * Adds dataSet attributes to JSX elements for element inspection
+ */
+function addDataSetAttributes(ast, filePath) {
+    const relativeFilePath = getRelativeFilePath(filePath);
+
+    traverse(ast, {
+        JSXElement(path) {
+            try {
+                const node = path.node.openingElement;
+
+                if (!node || !node.name || node.type !== "JSXOpeningElement") {
+                    return;
+                }
+
+                // Get the tag name
+                let tagName = "";
+                if (t.isJSXIdentifier(node.name)) {
+                    tagName = node.name.name;
+                } else if (t.isJSXMemberExpression(node.name)) {
+                    tagName = `${node.name.object.name}.${node.name.property.name}`;
+                } else {
+                    return;
+                }
+
+                // Skip if already has dataSet attribute with our properties
+                const hasFlexDataSet = node.attributes.some(
+                    (attr) =>
+                        t.isJSXAttribute(attr) &&
+                        t.isJSXIdentifier(attr.name) &&
+                        attr.name.name === "dataSet" &&
+                        t.isJSXExpressionContainer(attr.value) &&
+                        t.isObjectExpression(attr.value.expression) &&
+                        attr.value.expression.properties.some(
+                            (prop) =>
+                                t.isObjectProperty(prop) &&
+                                t.isIdentifier(prop.key) &&
+                                prop.key.name === "vibexLoc"
+                        )
+                );
+
+                if (hasFlexDataSet) {
+                    return;
+                }
+
+                const lineNumber = node.loc?.start.line || 0;
+                const colNumber = node.loc?.start.column || 0;
+
+                // Create dataSet properties matching Next.js inspector format
+                // vibexLoc format: "filePath:lineNumber:columnNumber"
+                // vibexName: tag/component name
+                const dataSetProperties = [
+                    t.objectProperty(
+                        t.identifier("vibexLoc"),
+                        t.stringLiteral(`${relativeFilePath}:${lineNumber}:${colNumber}`)
+                    ),
+                    t.objectProperty(
+                        t.identifier("vibexName"),
+                        t.stringLiteral(tagName)
+                    ),
+                ];
+
+                // Check if there's an existing dataSet attribute to merge with
+                const existingDataSetIndex = node.attributes.findIndex(
+                    (attr) =>
+                        t.isJSXAttribute(attr) &&
+                        t.isJSXIdentifier(attr.name) &&
+                        attr.name.name === "dataSet"
+                );
+
+                if (existingDataSetIndex !== -1) {
+                    const existingAttr = node.attributes[existingDataSetIndex];
+                    if (
+                        t.isJSXExpressionContainer(existingAttr.value) &&
+                        t.isObjectExpression(existingAttr.value.expression)
+                    ) {
+                        // Merge with existing dataSet
+                        existingAttr.value.expression.properties.push(
+                            ...dataSetProperties
+                        );
+                    }
+                } else {
+                    // Create new dataSet attribute
+                    const dataSetAttribute = t.jsxAttribute(
+                        t.jsxIdentifier("dataSet"),
+                        t.jsxExpressionContainer(
+                            t.objectExpression(dataSetProperties)
+                        )
+                    );
+                    node.attributes.push(dataSetAttribute);
+                }
+            } catch (error) {
+                // Skip elements that can't be processed
+            }
+        },
+    });
+}
+
+/**
+ * Wraps the root layout with error boundary, visual inspector, and optional providers
+ */
+function wrapRootLayout(ast, environment) {
+    let originalFunctionName = null;
+    let defaultExportPath = null;
+
+    // Find the default export function
+    traverse(ast, {
+        ExportDefaultDeclaration(path) {
+            const declaration = path.node.declaration;
+            if (t.isFunctionDeclaration(declaration) && declaration.id) {
+                originalFunctionName = declaration.id.name;
+                defaultExportPath = path;
+            }
+        },
+    });
+
+    if (!originalFunctionName || !defaultExportPath) {
+        return false;
+    }
+
+    // Remove 'export default' from the original function
+    const originalFunction = defaultExportPath.node.declaration;
+    defaultExportPath.replaceWith(originalFunction);
+
+    // Build wrapper imports and components
+    // Wrappers are applied in reverse order (last one wraps outermost)
+    const wrappers = [];
+    const siblings = []; // Components to render alongside the main content
+
+    // Always add ErrorBoundary as outermost wrapper (added last, wraps everything)
+    if (environment === "development") {
+        wrappers.push({
+            importName: "ErrorBoundary",
+            importPath: "@/components/ErrorBoundary",
+            isDefault: true,
+        });
+
+        // Add VisualInspector as a sibling (rendered alongside main content)
+        siblings.push({
+            importName: "VisualInspector",
+            importPath: "@/components/VisualInspector",
+            isDefault: true,
+        });
+    }
+
+    // Add imports at the top of the file
+    traverse(ast, {
+        Program(path) {
+            // Add wrapper imports
+            for (const wrapper of wrappers) {
+                let importDeclaration;
+                if (wrapper.isDefault) {
+                    // Default import: import ErrorBoundary from "@/components/ErrorBoundary"
+                    importDeclaration = t.importDeclaration(
+                        [t.importDefaultSpecifier(t.identifier(wrapper.importName))],
+                        t.stringLiteral(wrapper.importPath)
+                    );
+                } else {
+                    // Named import: import { Name } from "path"
+                    importDeclaration = t.importDeclaration(
+                        [
+                            t.importSpecifier(
+                                t.identifier(wrapper.importName),
+                                t.identifier(wrapper.importName)
+                            ),
+                        ],
+                        t.stringLiteral(wrapper.importPath)
+                    );
+                }
+                path.node.body.unshift(importDeclaration);
+            }
+
+            // Add sibling component imports
+            for (const sibling of siblings) {
+                let importDeclaration;
+                if (sibling.isDefault) {
+                    importDeclaration = t.importDeclaration(
+                        [t.importDefaultSpecifier(t.identifier(sibling.importName))],
+                        t.stringLiteral(sibling.importPath)
+                    );
+                } else {
+                    importDeclaration = t.importDeclaration(
+                        [
+                            t.importSpecifier(
+                                t.identifier(sibling.importName),
+                                t.identifier(sibling.importName)
+                            ),
+                        ],
+                        t.stringLiteral(sibling.importPath)
+                    );
+                }
+                path.node.body.unshift(importDeclaration);
+            }
+        },
+    });
+
+    // Create the original component JSX
+    const originalComponentJSX = t.jsxElement(
+        t.jsxOpeningElement(t.jsxIdentifier(originalFunctionName), [], true),
+        null,
+        [],
+        true
+    );
+
+    // Create sibling component elements
+    const siblingElements = siblings.map((sibling) =>
+        t.jsxElement(
+            t.jsxOpeningElement(t.jsxIdentifier(sibling.importName), [], true),
+            null,
+            [],
+            true
+        )
+    );
+
+    // Combine original component with siblings using a Fragment
+    let contentJSX;
+    if (siblingElements.length > 0) {
+        // Use React Fragment to group multiple children: <><OriginalComponent /><Sibling1 /><Sibling2 /></>
+        contentJSX = t.jsxFragment(
+            t.jsxOpeningFragment(),
+            t.jsxClosingFragment(),
+            [originalComponentJSX, ...siblingElements]
+        );
+    } else {
+        contentJSX = originalComponentJSX;
+    }
+
+    // Wrap with each wrapper component
+    let wrappedJSX = contentJSX;
+    for (const wrapper of wrappers) {
+        wrappedJSX = t.jsxElement(
+            t.jsxOpeningElement(t.jsxIdentifier(wrapper.importName), [], false),
+            t.jsxClosingElement(t.jsxIdentifier(wrapper.importName)),
+            [wrappedJSX],
+            false
+        );
+    }
+
+    // Create the wrapper function
+    const wrapperFunction = t.functionDeclaration(
+        t.identifier("FlexRootLayoutWrapper"),
+        [],
+        t.blockStatement([t.returnStatement(wrappedJSX)])
+    );
+
+    // Add export default for the wrapper
+    const exportDefault = t.exportDefaultDeclaration(wrapperFunction);
+
+    // Add the wrapper function at the end
+    traverse(ast, {
+        Program(path) {
+            path.node.body.push(exportDefault);
+        },
+    });
+
+    return true;
+}
+
+/**
+ * Transforms source code by adding dataSet attributes and Flex providers
+ */
+function transformSource(src, filename, environment) {
+    try {
+        const ast = parseCode(src);
+        const isLayout = isRootLayout(filename);
+
+        // Add dataSet attributes to all JSX elements (only in development)
+        if (environment === "development" && shouldAddDataAttributes(filename)) {
+            addDataSetAttributes(ast, filename);
+        }
+
+        // Wrap root layout with error boundary and providers
+        if (isLayout) {
+            wrapRootLayout(ast, environment);
+        }
+
+        // Generate code from AST
+        const output = generate(ast, {
+            retainLines: true,
+            compact: false,
+            jsescOption: { minimal: true },
+        });
+
+        return output.code;
+    } catch (error) {
+        // If transformation fails, return original source
+        return src;
+    }
+}
+
+async function transform(props) {
+    const environment =
+        (props.options?.dev ?? process.env.NODE_ENV === "development")
+            ? "development"
+            : "production";
+
+    const shouldTransform =
+        isRootLayout(props.filename) ||
+        (environment === "development" && shouldAddDataAttributes(props.filename));
+
+    if (shouldTransform) {
+        const transformedSrc = transformSource(
+            props.src,
+            props.filename,
+            environment
+        );
+        return babelTransformer.transform({ ...props, src: transformedSrc });
+    }
+
+    return babelTransformer.transform(props);
+}
+
+module.exports = { transform };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vibexdotnew/inspector",
-    "version": "0.0.1",
-    "description": "Visual inspection and element tagging for Next.js applications",
+    "version": "0.0.2",
+    "description": "Visual inspection and element tagging for Next.js and Expo applications",
     "author": "Vibex",
     "license": "MIT",
     "repository": {
@@ -11,11 +11,14 @@
     },
     "keywords": [
         "nextjs",
+        "expo",
+        "react-native",
         "inspector",
         "visual-editing",
         "jsx",
         "webpack-loader",
-        "turbopack"
+        "turbopack",
+        "metro"
     ],
     "type": "module",
     "sideEffects": false,
@@ -33,11 +36,23 @@
             "import": "./dist/next/loader.js",
             "require": "./dist/next/loader.cjs"
         },
-        "./next/loader.js": "./next/element-tagger.js"
+        "./next/loader.js": "./next/element-tagger.js",
+        "./expo": {
+            "types": "./dist/expo/index.d.ts",
+            "import": "./dist/expo/index.js",
+            "require": "./dist/expo/index.cjs"
+        },
+        "./expo/config": {
+            "types": "./dist/expo/config.d.ts",
+            "import": "./dist/expo/config.js",
+            "require": "./dist/expo/config.cjs"
+        },
+        "./expo/transformer.js": "./expo/metro-transformer.js"
     },
     "files": [
         "dist",
-        "next"
+        "next",
+        "expo"
     ],
     "scripts": {
         "build": "tsup",
@@ -47,25 +62,45 @@
     },
     "dependencies": {
         "@babel/parser": "^7.24.0",
+        "@babel/traverse": "^7.24.0",
+        "@babel/generator": "^7.24.0",
+        "@babel/types": "^7.24.0",
         "magic-string": "^0.30.0",
         "estree-walker": "^3.0.0"
     },
     "peerDependencies": {
         "next": ">=14.0.0",
         "react": ">=18.0.0",
-        "react-dom": ">=18.0.0"
+        "react-dom": ">=18.0.0",
+        "react-native": ">=0.72.0",
+        "expo": ">=49.0.0",
+        "@expo/metro-config": ">=0.10.0"
     },
     "peerDependenciesMeta": {
         "next": {
             "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        },
+        "react-native": {
+            "optional": true
+        },
+        "expo": {
+            "optional": true
+        },
+        "@expo/metro-config": {
+            "optional": true
         }
     },
     "devDependencies": {
         "@types/react": "^18.0.0",
+        "@types/react-native": "^0.72.0",
         "next": "^15.0.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "react-native": "^0.76.0",
         "tsup": "^8.0.0",
         "typescript": "^5.8.3"
     }
-}
+}