react-code-locator 0.1.8 → 0.1.12

package/dist/vite.js

@@ -1,58 +1,129 @@
-// src/elementLocatorReact.ts
-var VIRTUAL_CLIENT_MODULE_ID = "virtual:react-code-locator/client";
-var RESOLVED_VIRTUAL_CLIENT_MODULE_ID = `\0${VIRTUAL_CLIENT_MODULE_ID}`;
-function createClientInjector(locatorOptions = {}) {
-  const serialized = JSON.stringify(locatorOptions);
-  return {
-    name: "element-locator-client-injector",
-    apply: "serve",
-    resolveId(id) {
-      if (id === VIRTUAL_CLIENT_MODULE_ID) {
-        return RESOLVED_VIRTUAL_CLIENT_MODULE_ID;
-      }
-      return null;
-    },
-    load(id) {
-      if (id !== RESOLVED_VIRTUAL_CLIENT_MODULE_ID) {
-        return null;
-      }
-      return `
-        import { enableReactComponentJump } from "react-code-locator/client";
-
-        enableReactComponentJump(${serialized});
-      `;
-    },
-    transformIndexHtml() {
-      return [
-        {
-          tag: "script",
-          attrs: {
-            type: "module",
-            src: `/@id/__x00__${VIRTUAL_CLIENT_MODULE_ID}`
-          },
-          injectTo: "head"
-        }
-      ];
-    }
-  };
-}
-function elementLocatorReact(options = {}) {
-  const { command = "serve", locator = {}, injectClient = true } = options;
-  const isServe = command === "serve";
-  return [isServe && injectClient ? createClientInjector(locator) : null].filter(Boolean);
+// src/sourceAdapter.ts
+function defineSourceAdapter(descriptor) {
+  return descriptor;
 }
 
+// src/sourceTransform.ts
+import { transformAsync } from "@babel/core";
+
 // src/babelInjectComponentSource.ts
-import path from "path";
 import { types as t } from "@babel/core";
 
 // src/constants.ts
 var SOURCE_PROP = "__componentSourceLoc";
+var JSX_SOURCE_PROP = "$componentSourceLoc";
+var JSX_SOURCE_REGISTRY_SYMBOL = "react-code-locator.jsxSourceRegistry";
+
+// src/sourceMetadata.ts
+function normalizeSlashes(value) {
+  return value.replace(/\\/g, "/");
+}
+function trimTrailingSlash(value) {
+  return value.replace(/\/+$/, "");
+}
+function splitPathSegments(value) {
+  return normalizeSlashes(value).split("/").filter(Boolean);
+}
+function computeRelativePath(fromPath, toPath) {
+  const fromSegments = splitPathSegments(fromPath);
+  const toSegments = splitPathSegments(toPath);
+  let sharedIndex = 0;
+  while (sharedIndex < fromSegments.length && sharedIndex < toSegments.length && fromSegments[sharedIndex] === toSegments[sharedIndex]) {
+    sharedIndex += 1;
+  }
+  const upSegments = new Array(Math.max(0, fromSegments.length - sharedIndex)).fill("..");
+  const downSegments = toSegments.slice(sharedIndex);
+  const relativeSegments = [...upSegments, ...downSegments];
+  return relativeSegments.length > 0 ? relativeSegments.join("/") : ".";
+}
+function normalizeProjectRoot(projectRoot) {
+  if (projectRoot) {
+    return trimTrailingSlash(normalizeSlashes(projectRoot));
+  }
+  if (typeof process !== "undefined" && typeof process.cwd === "function") {
+    return trimTrailingSlash(normalizeSlashes(process.cwd()));
+  }
+  return "";
+}
+function toRelativeSource(filename, loc, projectRoot) {
+  if (!filename || !loc) {
+    return null;
+  }
+  const root = normalizeProjectRoot(projectRoot);
+  const normalizedFilename = normalizeSlashes(filename);
+  const relPath = root && normalizedFilename.startsWith(`${root}/`) ? normalizedFilename.slice(root.length + 1) : root ? computeRelativePath(root, normalizedFilename) : normalizedFilename;
+  return `${relPath}:${loc.line}:${loc.column + 1}`;
+}
+function isProjectLocalFile(filename, projectRoot) {
+  if (!filename) {
+    return false;
+  }
+  const root = normalizeProjectRoot(projectRoot);
+  const normalizedFilename = normalizeSlashes(filename);
+  if (!root) {
+    return !normalizedFilename.startsWith("../") && !normalizedFilename.startsWith("/") && !/^[A-Za-z]:\//.test(normalizedFilename);
+  }
+  if (normalizedFilename.startsWith(`${root}/`) || normalizedFilename === root) {
+    return true;
+  }
+  const relativePath = computeRelativePath(root, normalizedFilename);
+  return !relativePath.startsWith("../");
+}
+function isExternalToProjectRoot(filename, projectRoot) {
+  return !isProjectLocalFile(filename, projectRoot);
+}
 
 // src/babelInjectComponentSource.ts
+var SOURCE_PROP_LOCAL = "_componentSourceLoc";
+var SOURCE_PROPS_REST = "__reactCodeLocatorProps";
 function isComponentName(name) {
   return /^[A-Z]/.test(name);
 }
+function isCustomComponentTag(name) {
+  if (t.isJSXIdentifier(name)) {
+    return isComponentName(name.name);
+  }
+  if (t.isJSXMemberExpression(name)) {
+    return true;
+  }
+  return false;
+}
+function isIntrinsicElementTag(name) {
+  return t.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+}
+function isElementFactoryIdentifier(name) {
+  return name === "jsx" || name === "jsxs" || name === "jsxDEV" || name === "_jsx" || name === "_jsxs" || name === "_jsxDEV" || name === "createElement";
+}
+function isReactElementFactoryCall(pathNode) {
+  const callee = pathNode.node.callee;
+  if (t.isIdentifier(callee)) {
+    return isElementFactoryIdentifier(callee.name);
+  }
+  return t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: "React" }) && t.isIdentifier(callee.property, { name: "createElement" });
+}
+function getRootJsxIdentifierName(name) {
+  if (t.isJSXIdentifier(name)) {
+    return name.name;
+  }
+  if (t.isJSXMemberExpression(name)) {
+    return getRootJsxIdentifierName(name.object);
+  }
+  return null;
+}
+function isStyledModuleImport(binding) {
+  if (!binding) {
+    return false;
+  }
+  if (!binding.path.isImportSpecifier() && !binding.path.isImportDefaultSpecifier() && !binding.path.isImportNamespaceSpecifier()) {
+    return false;
+  }
+  const source = binding.path.parentPath.isImportDeclaration() ? binding.path.parentPath.node.source.value : null;
+  if (typeof source !== "string") {
+    return false;
+  }
+  const normalized = source.replace(/\\/g, "/");
+  return normalized === "./styled" || normalized === "../styled" || normalized.endsWith("/styled");
+}
 function isSupportedComponentInit(node) {
   if (!node) {
     return false;
@@ -68,13 +139,104 @@ function isSupportedComponentInit(node) {
   }
   return t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: "React" }) && t.isIdentifier(node.callee.property) && (node.callee.property.name === "memo" || node.callee.property.name === "forwardRef");
 }
-function getSourceValue(state, loc) {
+function hasSourcePropBinding(pattern) {
+  return pattern.properties.some((property) => {
+    if (!t.isObjectProperty(property)) {
+      return false;
+    }
+    return t.isIdentifier(property.key) && property.key.name === JSX_SOURCE_PROP;
+  });
+}
+function injectSourcePropBinding(pattern) {
+  if (hasSourcePropBinding(pattern)) {
+    return;
+  }
+  const sourceBinding = t.objectProperty(
+    t.identifier(JSX_SOURCE_PROP),
+    t.identifier(SOURCE_PROP_LOCAL),
+    false,
+    false
+  );
+  const restIndex = pattern.properties.findIndex(
+    (property) => t.isRestElement(property)
+  );
+  if (restIndex === -1) {
+    pattern.properties.push(sourceBinding);
+    return;
+  }
+  pattern.properties.splice(restIndex, 0, sourceBinding);
+}
+function injectSourcePropIntoIdentifierParam(node, param) {
+  if (!t.isBlockStatement(node.body)) {
+    node.body = t.blockStatement([t.returnStatement(node.body)]);
+  }
+  const alreadyInjected = node.body.body.some(
+    (statement) => t.isVariableDeclaration(statement) && statement.declarations.some(
+      (declaration) => t.isIdentifier(declaration.id) && declaration.id.name === SOURCE_PROPS_REST
+    )
+  );
+  if (alreadyInjected) {
+    return;
+  }
+  node.body.body.unshift(
+    t.variableDeclaration("const", [
+      t.variableDeclarator(
+        t.objectPattern([
+          t.objectProperty(
+            t.identifier(JSX_SOURCE_PROP),
+            t.identifier(SOURCE_PROP_LOCAL),
+            false,
+            false
+          ),
+          t.restElement(t.identifier(SOURCE_PROPS_REST))
+        ]),
+        param
+      )
+    ]),
+    t.expressionStatement(
+      t.assignmentExpression(
+        "=",
+        t.identifier(param.name),
+        t.identifier(SOURCE_PROPS_REST)
+      )
+    )
+  );
+}
+function injectSourcePropIntoFunctionParams(node) {
+  const firstParam = node.params[0];
+  if (!firstParam) {
+    return;
+  }
+  if (t.isObjectPattern(firstParam)) {
+    injectSourcePropBinding(firstParam);
+    return;
+  }
+  if (t.isIdentifier(firstParam)) {
+    injectSourcePropIntoIdentifierParam(node, firstParam);
+  }
+}
+function injectSourcePropIntoExpression(node) {
+  if (!node) {
+    return;
+  }
+  if (t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) {
+    injectSourcePropIntoFunctionParams(node);
+    return;
+  }
+  if (!t.isCallExpression(node)) {
+    return;
+  }
+  const firstArg = node.arguments[0];
+  if (firstArg && !t.isSpreadElement(firstArg) && (t.isFunctionExpression(firstArg) || t.isArrowFunctionExpression(firstArg))) {
+    injectSourcePropIntoFunctionParams(firstArg);
+  }
+}
+function getSourceValue(state, loc, projectRoot) {
   const filename = state.file?.opts?.filename;
   if (!filename || !loc) {
     return null;
   }
-  const relPath = path.relative(process.cwd(), filename).replace(/\\/g, "/");
-  return `${relPath}:${loc.line}:${loc.column + 1}`;
+  return toRelativeSource(filename, loc, projectRoot);
 }
 function buildAssignment(name, sourceValue) {
   return t.expressionStatement(
@@ -85,13 +247,98 @@ function buildAssignment(name, sourceValue) {
     )
   );
 }
-function visitDeclaration(declarationPath, insertAfterPath, state, seen) {
+function buildIntrinsicSourceHelper() {
+  return t.functionDeclaration(
+    t.identifier("_markIntrinsicElementSource"),
+    [t.identifier("element"), t.identifier("source")],
+    t.blockStatement([
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          t.identifier("registryKey"),
+          t.callExpression(
+            t.memberExpression(t.identifier("Symbol"), t.identifier("for")),
+            [t.stringLiteral(JSX_SOURCE_REGISTRY_SYMBOL)]
+          )
+        )
+      ]),
+      t.variableDeclaration("let", [
+        t.variableDeclarator(
+          t.identifier("registry"),
+          t.memberExpression(t.identifier("globalThis"), t.identifier("registryKey"), true)
+        )
+      ]),
+      t.ifStatement(
+        t.unaryExpression(
+          "!",
+          t.binaryExpression("instanceof", t.identifier("registry"), t.identifier("WeakMap"))
+        ),
+        t.blockStatement([
+          t.expressionStatement(
+            t.assignmentExpression(
+              "=",
+              t.identifier("registry"),
+              t.assignmentExpression(
+                "=",
+                t.memberExpression(t.identifier("globalThis"), t.identifier("registryKey"), true),
+                t.newExpression(t.identifier("WeakMap"), [])
+              )
+            )
+          )
+        ])
+      ),
+      t.ifStatement(
+        t.logicalExpression(
+          "&&",
+          t.identifier("element"),
+          t.logicalExpression(
+            "&&",
+            t.binaryExpression("===", t.unaryExpression("typeof", t.identifier("element")), t.stringLiteral("object")),
+            t.binaryExpression(
+              "===",
+              t.unaryExpression("typeof", t.memberExpression(t.identifier("element"), t.identifier("props"))),
+              t.stringLiteral("object")
+            )
+          )
+        ),
+        t.blockStatement([
+          t.expressionStatement(
+            t.callExpression(
+              t.memberExpression(t.identifier("registry"), t.identifier("set")),
+              [t.memberExpression(t.identifier("element"), t.identifier("props")), t.identifier("source")]
+            )
+          )
+        ])
+      ),
+      t.returnStatement(t.identifier("element"))
+    ])
+  );
+}
+function ensureIntrinsicSourceHelper(programPath, state) {
+  if (state.injectedIntrinsicHelper) {
+    return;
+  }
+  const alreadyExists = programPath.node.body.some(
+    (node) => t.isFunctionDeclaration(node) && t.isIdentifier(node.id, { name: "_markIntrinsicElementSource" })
+  );
+  if (!alreadyExists) {
+    programPath.unshiftContainer("body", buildIntrinsicSourceHelper());
+  }
+  state.injectedIntrinsicHelper = true;
+}
+function visitDeclaration(declarationPath, insertAfterPath, state, seen, projectRoot) {
   if (declarationPath.isFunctionDeclaration() || declarationPath.isClassDeclaration()) {
     const name = declarationPath.node.id?.name;
     if (!name || !isComponentName(name) || seen.has(name)) {
       return;
     }
-    const sourceValue = getSourceValue(state, declarationPath.node.loc?.start);
+    if (declarationPath.isFunctionDeclaration()) {
+      injectSourcePropIntoFunctionParams(declarationPath.node);
+    }
+    const sourceValue = getSourceValue(
+      state,
+      declarationPath.node.loc?.start,
+      projectRoot
+    );
     if (!sourceValue) {
       return;
     }
@@ -102,38 +349,128 @@ function visitDeclaration(declarationPath, insertAfterPath, state, seen) {
   if (!declarationPath.isVariableDeclaration()) {
     return;
   }
-  const assignments = declarationPath.node.declarations.flatMap((declarator) => {
-    if (!t.isIdentifier(declarator.id) || !isComponentName(declarator.id.name) || seen.has(declarator.id.name)) {
-      return [];
-    }
-    if (!declarator.init) {
-      return [];
-    }
-    if (!isSupportedComponentInit(declarator.init)) {
-      return [];
-    }
-    const sourceValue = getSourceValue(state, declarator.loc?.start ?? declarator.init.loc?.start);
-    if (!sourceValue) {
-      return [];
+  const assignments = declarationPath.node.declarations.flatMap(
+    (declarator) => {
+      if (!t.isIdentifier(declarator.id) || !isComponentName(declarator.id.name) || seen.has(declarator.id.name)) {
+        return [];
+      }
+      if (!declarator.init) {
+        return [];
+      }
+      if (!isSupportedComponentInit(declarator.init)) {
+        return [];
+      }
+      injectSourcePropIntoExpression(declarator.init);
+      const sourceValue = getSourceValue(
+        state,
+        declarator.loc?.start ?? declarator.init.loc?.start,
+        projectRoot
+      );
+      if (!sourceValue) {
+        return [];
+      }
+      seen.add(declarator.id.name);
+      return [buildAssignment(declarator.id.name, sourceValue)];
     }
-    seen.add(declarator.id.name);
-    return [buildAssignment(declarator.id.name, sourceValue)];
-  });
+  );
   if (assignments.length > 0) {
     insertAfterPath.insertAfter(assignments);
   }
 }
 function babelInjectComponentSource(options = {}) {
-  const { injectJsxSource = false, injectComponentSource = true } = options;
+  const {
+    injectJsxSource = true,
+    injectComponentSource = true,
+    projectRoot
+  } = options;
   return {
     name: "babel-inject-component-source",
     visitor: {
+      CallExpression(pathNode, state) {
+        if (!injectJsxSource) {
+          return;
+        }
+        if (!isReactElementFactoryCall(pathNode)) {
+          return;
+        }
+        if (pathNode.parentPath.isCallExpression() && t.isIdentifier(pathNode.parentPath.node.callee, {
+          name: "_markIntrinsicElementSource"
+        })) {
+          return;
+        }
+        const sourceValue = getSourceValue(
+          state,
+          pathNode.node.loc?.start,
+          projectRoot
+        );
+        if (!sourceValue) {
+          return;
+        }
+        const programPath = pathNode.findParent((parent) => parent.isProgram());
+        if (!programPath || !programPath.isProgram()) {
+          return;
+        }
+        ensureIntrinsicSourceHelper(programPath, state);
+        pathNode.replaceWith(
+          t.callExpression(t.identifier("_markIntrinsicElementSource"), [
+            pathNode.node,
+            t.stringLiteral(sourceValue)
+          ])
+        );
+        pathNode.skip();
+      },
+      JSXElement: {
+        exit(pathNode, state) {
+          if (!injectJsxSource) {
+            return;
+          }
+          if (!isIntrinsicElementTag(pathNode.node.openingElement.name)) {
+            return;
+          }
+          if (pathNode.parentPath.isCallExpression() && t.isIdentifier(pathNode.parentPath.node.callee, { name: "_markIntrinsicElementSource" })) {
+            return;
+          }
+          const sourceValue = getSourceValue(
+            state,
+            pathNode.node.openingElement.loc?.start,
+            projectRoot
+          );
+          if (!sourceValue) {
+            return;
+          }
+          const programPath = pathNode.findParent((parent) => parent.isProgram());
+          if (!programPath || !programPath.isProgram()) {
+            return;
+          }
+          ensureIntrinsicSourceHelper(programPath, state);
+          const wrappedNode = t.callExpression(t.identifier("_markIntrinsicElementSource"), [
+            pathNode.node,
+            t.stringLiteral(sourceValue)
+          ]);
+          if (pathNode.parentPath.isJSXElement() || pathNode.parentPath.isJSXFragment()) {
+            pathNode.replaceWith(t.jsxExpressionContainer(wrappedNode));
+            return;
+          }
+          if (pathNode.parentPath.isJSXExpressionContainer()) {
+            pathNode.parentPath.replaceWith(t.jsxExpressionContainer(wrappedNode));
+            return;
+          }
+          pathNode.replaceWith(wrappedNode);
+        }
+      },
       JSXOpeningElement(pathNode, state) {
         if (!injectJsxSource) {
           return;
         }
+        if (!isCustomComponentTag(pathNode.node.name)) {
+          return;
+        }
+        const rootIdentifierName = getRootJsxIdentifierName(pathNode.node.name);
+        if (rootIdentifierName && isExternalToProjectRoot(state.file?.opts?.filename, projectRoot) && isStyledModuleImport(pathNode.scope.getBinding(rootIdentifierName))) {
+          return;
+        }
         const hasSourceProp = pathNode.node.attributes.some(
-          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === SOURCE_PROP
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === JSX_SOURCE_PROP
         );
         if (hasSourceProp) {
           return;
@@ -145,8 +482,10 @@ function babelInjectComponentSource(options = {}) {
         }
         pathNode.node.attributes.push(
           t.jsxAttribute(
-            t.jsxIdentifier(SOURCE_PROP),
-            t.stringLiteral(getSourceValue(state, loc) ?? `${filename.replace(/\\/g, "/")}:${loc.line}:${loc.column + 1}`)
+            t.jsxIdentifier(JSX_SOURCE_PROP),
+            t.stringLiteral(
+              getSourceValue(state, loc, projectRoot) ?? `${filename.replace(/\\/g, "/")}:${loc.line}:${loc.column + 1}`
+            )
           )
         );
       },
@@ -159,19 +498,128 @@ function babelInjectComponentSource(options = {}) {
           if (childPath.isExportNamedDeclaration() || childPath.isExportDefaultDeclaration()) {
             const declarationPath = childPath.get("declaration");
             if (!Array.isArray(declarationPath) && declarationPath.node) {
-              visitDeclaration(declarationPath, childPath, state, seen);
+              visitDeclaration(declarationPath, childPath, state, seen, projectRoot);
             }
             continue;
           }
-          visitDeclaration(childPath, childPath, state, seen);
+          visitDeclaration(childPath, childPath, state, seen, projectRoot);
+        }
+      }
+    }
+  };
+}
+
+// src/sourceTransform.ts
+async function transformSourceWithLocator(code, options) {
+  const { filename, sourceMaps = true, ...pluginOptions } = options;
+  const result = await transformAsync(code, {
+    filename,
+    babelrc: false,
+    configFile: false,
+    sourceMaps,
+    parserOpts: {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"]
+    },
+    generatorOpts: {
+      retainLines: true
+    },
+    plugins: [[babelInjectComponentSource, pluginOptions]]
+  });
+  return {
+    code: result?.code ?? code,
+    map: result?.map ?? null
+  };
+}
+
+// src/viteClientInjector.ts
+var VIRTUAL_CLIENT_MODULE_ID = "virtual:react-code-locator/client";
+var RESOLVED_VIRTUAL_CLIENT_MODULE_ID = `\0${VIRTUAL_CLIENT_MODULE_ID}`;
+function createClientInjector(locatorOptions = {}) {
+  const serialized = JSON.stringify(locatorOptions);
+  return {
+    name: "react-code-locator-client-injector",
+    apply: "serve",
+    resolveId(id) {
+      if (id === VIRTUAL_CLIENT_MODULE_ID) {
+        return RESOLVED_VIRTUAL_CLIENT_MODULE_ID;
+      }
+      return null;
+    },
+    load(id) {
+      if (id !== RESOLVED_VIRTUAL_CLIENT_MODULE_ID) {
+        return null;
+      }
+      return `
+        import { enableReactComponentJump } from "react-code-locator/client";
+
+        enableReactComponentJump(${serialized});
+      `;
+    },
+    transformIndexHtml() {
+      return [
+        {
+          tag: "script",
+          attrs: {
+            type: "module",
+            src: `/@id/__x00__${VIRTUAL_CLIENT_MODULE_ID}`
+          },
+          injectTo: "head"
         }
+      ];
+    }
+  };
+}
+function createViteClientInjector(options = {}) {
+  const { command = "serve", locator = {}, injectClient = true } = options;
+  const isServe = command === "serve";
+  return [isServe && injectClient ? createClientInjector(locator) : null].filter(Boolean);
+}
+
+// src/vite.ts
+function shouldTransformSource(id) {
+  if (id.includes("/node_modules/") || id.startsWith("\0")) {
+    return false;
+  }
+  return /\.[mc]?[jt]sx?$/.test(id);
+}
+function viteSourceTransformPlugin(options = {}) {
+  return {
+    name: "react-code-locator-source-transform",
+    enforce: "pre",
+    async transform(code, id) {
+      if (!shouldTransformSource(id)) {
+        return null;
       }
+      return transformSourceWithLocator(code, {
+        filename: id,
+        ...options
+      });
     }
   };
 }
+function createViteSourceAdapter(options = {}) {
+  const { babel = {}, ...viteOptions } = options;
+  const plugins = [
+    viteSourceTransformPlugin(babel),
+    ...createViteClientInjector(viteOptions)
+  ].filter(Boolean);
+  return defineSourceAdapter({
+    kind: "vite",
+    name: "react-code-locator/vite",
+    options,
+    config: {
+      plugins
+    }
+  });
+}
+var viteSourceAdapter = createViteSourceAdapter();
 export {
   babelInjectComponentSource,
-  elementLocatorReact,
-  elementLocatorReact as reactComponentJump
+  createViteClientInjector,
+  createViteSourceAdapter,
+  createViteClientInjector as reactComponentJump,
+  viteSourceAdapter,
+  viteSourceTransformPlugin
 };
 //# sourceMappingURL=vite.js.map