@vibexdotnew/inspector 0.0.10 → 0.0.12

package/next/element-tagger.cjs

@@ -0,0 +1,372 @@
+"use strict";
+
+/**
+ * FlexApp Element Tagger - Turbopack/Webpack Loader
+ *
+ * Transforms JSX to inject location attributes for visual editing.
+ * Injects: data-flex-loc="filepath:line:col" data-flex-name="tagName"
+ *
+ * SAFE: Never throws errors - returns original source on any failure
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Safe imports with fallbacks
+// ─────────────────────────────────────────────────────────────────────────────
+
+let parse, MagicString, walk;
+
+try {
+  parse = require("@babel/parser").parse;
+} catch {
+  parse = null;
+}
+
+try {
+  MagicString = require("magic-string");
+} catch {
+  MagicString = null;
+}
+
+// estree-walker v3 is ESM-only, try multiple import strategies
+try {
+  walk = require("estree-walker").walk;
+} catch {
+  try {
+    // Try the sync version
+    const mod = require("estree-walker/src/sync.js");
+    walk = mod.walk || mod.default?.walk;
+  } catch {
+    walk = null;
+  }
+}
+
+const path = require("path");
+const fs = require("fs");
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Element Exclusion Lists
+// ─────────────────────────────────────────────────────────────────────────────
+
+const EXCLUDED_ELEMENTS = new Set([
+  // React Three Fiber primitives
+  "primitive", "mesh", "group", "scene", "object3D",
+  "camera", "perspectiveCamera", "orthographicCamera", "cubeCamera", "arrayCamera",
+  "instancedMesh", "batchedMesh", "skinnedMesh", "sprite", "lOD",
+  "lineSegments", "lineLoop", "points", "skeleton", "bone",
+  "bufferGeometry", "instancedBufferGeometry",
+  "boxGeometry", "sphereGeometry", "planeGeometry", "cylinderGeometry",
+  "coneGeometry", "torusGeometry", "torusKnotGeometry", "ringGeometry",
+  "circleGeometry", "tubeGeometry", "extrudeGeometry", "latheGeometry",
+  "shapeGeometry", "polyhedronGeometry", "icosahedronGeometry",
+  "octahedronGeometry", "tetrahedronGeometry", "dodecahedronGeometry",
+  "capsuleGeometry", "edgesGeometry", "wireframeGeometry",
+  "material", "meshBasicMaterial", "meshStandardMaterial", "meshPhongMaterial",
+  "meshLambertMaterial", "meshToonMaterial", "meshNormalMaterial",
+  "meshPhysicalMaterial", "meshDepthMaterial", "meshDistanceMaterial",
+  "meshMatcapMaterial", "shaderMaterial", "rawShaderMaterial",
+  "pointsMaterial", "lineBasicMaterial", "lineDashedMaterial",
+  "spriteMaterial", "shadowMaterial",
+  "light", "ambientLight", "directionalLight", "pointLight", "spotLight",
+  "hemisphereLight", "rectAreaLight", "lightProbe",
+  "texture", "videoTexture", "canvasTexture", "cubeTexture",
+  "dataTexture", "compressedTexture", "depthTexture",
+  "vector2", "vector3", "vector4", "euler", "quaternion",
+  "matrix3", "matrix4", "color", "raycaster", "fog", "fogExp2",
+  // Drei components
+  "Billboard", "Text", "Text3D", "Html", "Trail", "Decal", "Edges", "Outlines",
+  "PerspectiveCamera", "OrthographicCamera", "CubeCamera",
+  "OrbitControls", "CameraControls", "TransformControls", "PivotControls",
+  "Environment", "Sky", "Stars", "Cloud", "Sparkles", "Float", "Stage",
+  "RoundedBox", "Line", "Points", "Instances", "Merged",
+  "MeshReflectorMaterial", "MeshTransmissionMaterial", "shaderMaterial",
+]);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Simple AST Walker (fallback if estree-walker fails)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function simpleWalk(node, callbacks, parent = null) {
+  if (!node || typeof node !== "object") return;
+
+  // Add parent reference
+  if (parent && !Object.prototype.hasOwnProperty.call(node, "parent")) {
+    Object.defineProperty(node, "parent", {
+      value: parent,
+      enumerable: false,
+      writable: true,
+    });
+  }
+
+  if (callbacks.enter) {
+    callbacks.enter(node, parent);
+  }
+
+  // Walk children
+  for (const key of Object.keys(node)) {
+    if (key === "parent") continue;
+    const child = node[key];
+    if (Array.isArray(child)) {
+      for (const item of child) {
+        if (item && typeof item === "object" && item.type) {
+          simpleWalk(item, callbacks, node);
+        }
+      }
+    } else if (child && typeof child === "object" && child.type) {
+      simpleWalk(child, callbacks, node);
+    }
+  }
+}
+
+// Use estree-walker if available, otherwise use simple walker
+const walkAst = walk || simpleWalk;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Quick check if source likely contains JSX
+ */
+function hasJSX(source) {
+  // Look for JSX patterns: <Component, <div, etc.
+  return /<[A-Za-z]/.test(source);
+}
+
+/**
+ * Check if element should receive location attributes
+ */
+function shouldInjectAttrs(tagName) {
+  if (!tagName) return false;
+  if (tagName === "Fragment" || tagName === "React.Fragment") return false;
+  if (EXCLUDED_ELEMENTS.has(tagName)) return false;
+  return true;
+}
+
+/**
+ * Extract tag name from JSX opening element
+ */
+function getTagName(node) {
+  try {
+    const { name } = node;
+    if (name.type === "JSXIdentifier") {
+      return name.name;
+    }
+    if (name.type === "JSXMemberExpression") {
+      return `${name.object.name}.${name.property.name}`;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+/**
+ * Detect if JSX element is inside a .map() call
+ */
+function detectMapContext(node) {
+  try {
+    let current = node;
+    let depth = 0;
+
+    while (current && depth < 15) {
+      if (
+        current.type === "CallExpression" &&
+        current.callee?.type === "MemberExpression" &&
+        current.callee.property?.name === "map"
+      ) {
+        const arrayRef = current.callee.object?.name;
+        const callback = current.arguments?.[0];
+
+        if (arrayRef && callback?.type === "ArrowFunctionExpression") {
+          const indexArg = callback.params?.[1];
+          return {
+            arrayName: arrayRef,
+            indexName: indexArg?.type === "Identifier" ? indexArg.name : null,
+          };
+        }
+      }
+      current = current.parent;
+      depth++;
+    }
+  } catch {
+    // Ignore errors
+  }
+  return null;
+}
+
+/**
+ * Collect Next.js Image import aliases
+ */
+function collectImageAliases(ast) {
+  const aliases = new Set();
+
+  try {
+    walkAst(ast, {
+      enter(node) {
+        if (
+          node.type === "ImportDeclaration" &&
+          node.source?.value === "next/image"
+        ) {
+          for (const spec of node.specifiers || []) {
+            if (spec.local?.name) {
+              aliases.add(spec.local.name);
+            }
+          }
+        }
+      },
+    });
+  } catch {
+    // Ignore errors
+  }
+
+  return aliases;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Loader
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * FlexApp Element Tagger Loader
+ * SAFE: Returns original source on any error
+ */
+function flexElementTagger(source, sourceMap) {
+  const callback = this.async();
+  // return callback(null, source, sourceMap);
+  // Early exit: missing dependencies
+  if (!parse || !MagicString) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: no resource path or it's a directory
+  if (!this.resourcePath) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: path doesn't look like a file (no extension)
+  const ext = path.extname(this.resourcePath);
+  if (!ext || !['.tsx', '.jsx', '.ts', '.js'].includes(ext)) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: check if it's actually a file (not a directory)
+  try {
+    const stat = fs.statSync(this.resourcePath);
+    if (!stat.isFile()) {
+      return callback(null, source, sourceMap);
+    }
+  } catch {
+    // If stat fails, still try to process (might be virtual file)
+  }
+
+  // Early exit: node_modules
+  if (/node_modules/.test(this.resourcePath)) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: no JSX detected
+  if (!hasJSX(source)) {
+    return callback(null, source, sourceMap);
+  }
+
+  try {
+    // Parse source
+    const ast = parse(source, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"],
+      errorRecovery: true, // Don't fail on syntax errors
+    });
+
+    if (!ast || !ast.program) {
+      return callback(null, source, sourceMap);
+    }
+
+    const magicStr = new MagicString(source);
+    const relativePath = path.relative(process.cwd(), this.resourcePath);
+    const imageAliases = collectImageAliases(ast);
+    let hasChanges = false;
+
+    // Add parent references
+    walkAst(ast.program, {
+      enter() { }, // Just to trigger parent ref addition
+    });
+
+    // Process JSX elements
+    walkAst(ast.program, {
+      enter(node) {
+        try {
+          if (node.type !== "JSXOpeningElement") return;
+
+          let tagName = getTagName(node);
+          if (!tagName) return;
+
+          // Check if already has data-flex-loc
+          const hasAttr = node.attributes?.some(
+            (attr) =>
+              attr.type === "JSXAttribute" &&
+              attr.name?.name === "data-flex-loc"
+          );
+          if (hasAttr) return;
+
+          // Normalize Next.js Image to img
+          const isNextImage = imageAliases.has(tagName.split(".")[0]);
+          const displayName = isNextImage ? "img" : tagName;
+
+          // Check if we should tag this element
+          if (!shouldInjectAttrs(tagName) && !isNextImage) return;
+
+          // Ensure we have location info
+          if (!node.loc?.start || !node.name?.end) return;
+
+          // Build location identifier
+          const { line, column } = node.loc.start;
+          let locId = `${relativePath}:${line}:${column}`;
+
+          // Add iteration context if inside .map()
+          const mapCtx = detectMapContext(node);
+          if (mapCtx?.arrayName) {
+            locId += `#${mapCtx.arrayName}`;
+          }
+
+          // Inject data-flex-iter for map index if available
+          if (mapCtx?.indexName) {
+            magicStr.appendLeft(
+              node.name.end,
+              ` data-flex-iter=${mapCtx.indexName}`
+            );
+          }
+
+          // Inject location and name attributes
+          magicStr.appendLeft(
+            node.name.end,
+            ` data-flex-loc="${locId}" data-flex-name="${displayName}"`
+          );
+
+          hasChanges = true;
+        } catch {
+          // Ignore errors for individual nodes
+        }
+      },
+    });
+
+    // Return original if no changes
+    if (!hasChanges) {
+      return callback(null, source, sourceMap);
+    }
+
+    // Generate output
+    const output = magicStr.toString();
+    const outputMap = magicStr.generateMap({ hires: true });
+
+    // Turbopack expects sourcemap as JSON string
+    callback(null, output, JSON.stringify(outputMap));
+
+  } catch (error) {
+    // On ANY error, return original source unchanged
+    console.warn("[flex-element-tagger] Skipping file due to error:", this.resourcePath);
+    callback(null, source, sourceMap);
+  }
+}
+
+module.exports = flexElementTagger;
+module.exports.default = flexElementTagger;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vibexdotnew/inspector",
-    "version": "0.0.10",
+    "version": "0.0.12",
     "description": "Visual inspection and element tagging for Next.js and Expo applications",
     "author": "Vibex",
     "license": "MIT",
@@ -27,7 +27,7 @@
     },
     "exports": {
         "./package.json": "./package.json",
-        "./loader.js": "./next/element-tagger.js",
+        "./loader.js": "./next/element-tagger.cjs",
         "./transformer.js": "./expo/metro-transformer.cjs",
         "./next": {
             "types": "./dist/next/index.d.ts",