react-code-locator 0.1.4

package/README.md

@@ -0,0 +1,243 @@
+# React Component Jump
+
+개발 중인 React 앱에서 요소를 `Shift + Click`하면 해당 UI와 연결된 소스 위치를 찾는 패키지입니다.
+
+- JSX 태그의 `__source`를 우선 사용해서 정확한 JSX 위치를 찾습니다.
+- JSX 정보가 없으면 컴포넌트 정의 위치로 fallback 합니다.
+- Vite, Webpack, Babel, 브라우저 런타임을 각각 분리해서 사용할 수 있습니다.
+
+## 설치
+
+```bash
+npm i -D react-component-jump
+```
+
+로컬 패키지로 연결할 때는:
+
+```bash
+npm i -D /absolute/path/to/react-component-jump
+```
+
+## 빠른 시작
+
+Vite 환경이면 `react-component-jump/vite`만 붙이면 됩니다.
+
+```ts
+import { defineConfig } from "vite";
+import { reactComponentJump } from "react-component-jump/vite";
+
+export default defineConfig(({ command }) => ({
+  plugins: reactComponentJump({
+    command,
+    locator: {
+      triggerKey: "shift",
+    },
+  }),
+}));
+```
+
+개발 서버에서 `Shift + Click`하면 브라우저 콘솔에 이런 식으로 출력됩니다.
+
+```text
+[react-component-jump] src/components/Button.tsx:14:1 [jsx]
+```
+
+## 제공 엔트리
+
+### `react-component-jump/vite`
+
+Vite + React 프로젝트용 기본 진입점입니다.
+
+- 개발 서버에서만 Babel 플러그인을 주입합니다.
+- 기본값으로 브라우저 클라이언트도 자동 주입합니다.
+
+```ts
+import { defineConfig } from "vite";
+import { reactComponentJump } from "react-component-jump/vite";
+
+export default defineConfig(({ command }) => ({
+  plugins: reactComponentJump({
+    command,
+    locator: {
+      triggerKey: "shift",
+    },
+    injectClient: true,
+  }),
+}));
+```
+
+옵션:
+
+- `command`: `"serve" | "build"` , 보통 Vite의 `command` 그대로 전달
+- `locator.triggerKey`: `"alt" | "meta" | "ctrl" | "shift" | "none"`
+- `locator.onLocate(result)`: 위치를 찾았을 때 커스텀 처리
+- `locator.onError(error)`: 위치를 못 찾았을 때 커스텀 처리
+- `injectClient`: `false`로 두면 브라우저 런타임 자동 주입 비활성화
+
+### `react-component-jump/client`
+
+브라우저 런타임만 수동으로 붙이고 싶을 때 사용합니다.
+
+```ts
+import { enableReactComponentJump } from "react-component-jump/client";
+
+const dispose = enableReactComponentJump({
+  triggerKey: "shift",
+  onLocate(result) {
+    console.log("located:", result.source, result.mode);
+  },
+});
+
+// 필요 시 해제
+dispose();
+```
+
+자동 주입을 끄고 직접 붙이는 예시:
+
+```ts
+import { defineConfig } from "vite";
+import { reactComponentJump } from "react-component-jump/vite";
+
+export default defineConfig(({ command }) => ({
+  plugins: reactComponentJump({
+    command,
+    injectClient: false,
+  }),
+}));
+```
+
+그 다음 앱 엔트리에서:
+
+```ts
+import { enableReactComponentJump } from "react-component-jump/client";
+
+if (import.meta.env.DEV) {
+  enableReactComponentJump();
+}
+```
+
+### `react-component-jump/babel`
+
+Babel 플러그인만 따로 사용할 때 사용합니다.
+
+이 플러그인은 두 가지를 주입합니다.
+
+- JSX 요소에 `__source`
+- React 컴포넌트 함수/클래스에 `__componentSourceLoc`
+
+```js
+const { babelInjectComponentSource } = require("react-component-jump/babel");
+
+module.exports = {
+  plugins: [babelInjectComponentSource],
+};
+```
+
+ESM 설정 예시:
+
+```ts
+import { babelInjectComponentSource } from "react-component-jump/babel";
+
+export default {
+  plugins: [babelInjectComponentSource],
+};
+```
+
+### `react-component-jump/webpack`
+
+Webpack 설정에 Babel 플러그인과 런타임 엔트리를 함께 주입합니다.
+
+```js
+const { withReactComponentJump } = require("react-component-jump/webpack");
+const config = createExistingWebpackConfig();
+
+module.exports = withReactComponentJump(config, {
+  env: process.env.NODE_ENV,
+});
+```
+
+동작 방식:
+
+- `env !== "development"`이면 원본 config를 그대로 반환
+- `babel-loader`를 찾아 `babelInjectComponentSource`를 추가
+- 엔트리 앞에 런타임 스크립트를 prepend
+
+전제:
+
+- React 앱이 Babel을 통해 트랜스파일되어야 합니다.
+- `module.rules` 안에 `babel-loader`가 있어야 자동 주입이 동작합니다.
+
+### `react-component-jump`
+
+런타임 유틸만 직접 사용할 때의 기본 엔트리입니다.
+
+```ts
+import { enableReactComponentJump, locateComponentSource } from "react-component-jump";
+```
+
+제공 API:
+
+- `enableReactComponentJump(options)`
+- `locateComponentSource(target)`
+
+`locateComponentSource` 반환값:
+
+```ts
+type LocatorResult = {
+  source: string;
+  mode: "jsx" | "component";
+};
+```
+
+## 사용 흐름
+
+정상 동작하려면 보통 아래 두 단계가 같이 필요합니다.
+
+1. 빌드 단계에서 Babel 플러그인으로 소스 메타데이터 주입
+2. 브라우저에서 클릭 이벤트를 가로채 React Fiber를 따라가며 위치 계산
+
+Vite/webpack 어댑터를 쓰면 이 둘을 한 번에 붙일 수 있습니다.
+
+## 개발/배포 스크립트
+
+```bash
+npm run build
+```
+
+- 라이브러리만 `dist/`로 빌드합니다.
+
+```bash
+npm run deploy --otp=123456
+```
+
+- `build`
+- `npm pack --dry-run`
+- `npm publish --access public`
+
+순서로 실행합니다.
+
+## peerDependencies
+
+- `@babel/core >= 7`
+- `@vitejs/plugin-react >= 4`
+
+둘 다 optional peer dependency입니다.
+
+- Babel 플러그인을 직접 쓰거나 Vite 어댑터를 쓸 때 필요할 수 있습니다.
+- Webpack 런타임만 소비하는 쪽에서는 사용 방식에 따라 일부만 필요할 수 있습니다.
+
+## 주의점
+
+- 개발 모드 전용입니다.
+- React 내부 필드인 Fiber와 `_debugSource`에 의존합니다.
+- production build에서는 JSX 디버그 정보가 없어질 수 있습니다.
+- 클릭 이벤트를 capture 단계에서 가로채므로, modifier key가 눌리면 기본 클릭 동작이 막힐 수 있습니다.
+- `triggerKey: "none"`이면 모든 클릭에서 동작하므로 일반적으로 권장하지 않습니다.
+
+## 주요 파일
+
+- `src/runtime.ts`: 클릭 이벤트 처리와 React Fiber 기반 소스 탐색
+- `src/babelInjectComponentSource.ts`: Babel 메타데이터 주입
+- `src/vite.ts`: Vite 어댑터 export
+- `src/webpack.cts`: Webpack 어댑터 export
+- `src/client.ts`: 브라우저 런타임 export

package/dist/babel.cjs

@@ -0,0 +1,152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/babel.ts
+var babel_exports = {};
+__export(babel_exports, {
+  babelInjectComponentSource: () => babelInjectComponentSource
+});
+module.exports = __toCommonJS(babel_exports);
+
+// src/babelInjectComponentSource.ts
+var import_node_path = __toESM(require("path"), 1);
+var import_core = require("@babel/core");
+
+// src/constants.ts
+var SOURCE_PROP = "__componentSourceLoc";
+
+// src/babelInjectComponentSource.ts
+function isComponentName(name) {
+  return /^[A-Z]/.test(name);
+}
+function getSourceValue(state, loc) {
+  const filename = state.file?.opts?.filename;
+  if (!filename || !loc) {
+    return null;
+  }
+  const relPath = import_node_path.default.relative(process.cwd(), filename).replace(/\\/g, "/");
+  return `${relPath}:${loc.line}:${loc.column + 1}`;
+}
+function buildAssignment(name, sourceValue) {
+  return import_core.types.expressionStatement(
+    import_core.types.assignmentExpression(
+      "=",
+      import_core.types.memberExpression(import_core.types.identifier(name), import_core.types.identifier(SOURCE_PROP)),
+      import_core.types.stringLiteral(sourceValue)
+    )
+  );
+}
+function visitDeclaration(declarationPath, insertAfterPath, state, seen) {
+  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 (!sourceValue) {
+      return;
+    }
+    seen.add(name);
+    insertAfterPath.insertAfter(buildAssignment(name, sourceValue));
+    return;
+  }
+  if (!declarationPath.isVariableDeclaration()) {
+    return;
+  }
+  const assignments = declarationPath.node.declarations.flatMap((declarator) => {
+    if (!import_core.types.isIdentifier(declarator.id) || !isComponentName(declarator.id.name) || seen.has(declarator.id.name)) {
+      return [];
+    }
+    if (!declarator.init) {
+      return [];
+    }
+    if (!import_core.types.isArrowFunctionExpression(declarator.init) && !import_core.types.isFunctionExpression(declarator.init)) {
+      return [];
+    }
+    const sourceValue = getSourceValue(state, declarator.loc?.start ?? declarator.init.loc?.start);
+    if (!sourceValue) {
+      return [];
+    }
+    seen.add(declarator.id.name);
+    return [buildAssignment(declarator.id.name, sourceValue)];
+  });
+  if (assignments.length > 0) {
+    insertAfterPath.insertAfter(assignments);
+  }
+}
+function babelInjectComponentSource() {
+  return {
+    name: "babel-inject-component-source",
+    visitor: {
+      JSXOpeningElement(pathNode, state) {
+        const hasSourceProp = pathNode.node.attributes.some(
+          (attr) => import_core.types.isJSXAttribute(attr) && import_core.types.isJSXIdentifier(attr.name) && attr.name.name === "__source"
+        );
+        if (hasSourceProp) {
+          return;
+        }
+        const filename = state.file?.opts?.filename;
+        const loc = pathNode.node.loc?.start;
+        if (!filename || !loc) {
+          return;
+        }
+        pathNode.node.attributes.push(
+          import_core.types.jsxAttribute(
+            import_core.types.jsxIdentifier("__source"),
+            import_core.types.jsxExpressionContainer(
+              import_core.types.objectExpression([
+                import_core.types.objectProperty(import_core.types.identifier("fileName"), import_core.types.stringLiteral(filename)),
+                import_core.types.objectProperty(import_core.types.identifier("lineNumber"), import_core.types.numericLiteral(loc.line)),
+                import_core.types.objectProperty(import_core.types.identifier("columnNumber"), import_core.types.numericLiteral(loc.column + 1))
+              ])
+            )
+          )
+        );
+      },
+      Program(programPath, state) {
+        const seen = /* @__PURE__ */ new Set();
+        for (const childPath of programPath.get("body")) {
+          if (childPath.isExportNamedDeclaration() || childPath.isExportDefaultDeclaration()) {
+            const declarationPath = childPath.get("declaration");
+            if (!Array.isArray(declarationPath) && declarationPath.node) {
+              visitDeclaration(declarationPath, childPath, state, seen);
+            }
+            continue;
+          }
+          visitDeclaration(childPath, childPath, state, seen);
+        }
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  babelInjectComponentSource
+});
+//# sourceMappingURL=babel.cjs.map

package/dist/babel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/babel.ts","../src/babelInjectComponentSource.ts","../src/constants.ts"],"sourcesContent":["export { babelInjectComponentSource } from \"./babelInjectComponentSource\";\n","import path from \"node:path\";\nimport { types as t, type NodePath, type PluginObj } from \"@babel/core\";\nimport { SOURCE_PROP } from \"./constants\";\n\ntype BabelState = {\n  file?: {\n    opts?: {\n      filename?: string;\n    };\n  };\n};\n\nfunction isComponentName(name: string) {\n  return /^[A-Z]/.test(name);\n}\n\nfunction getSourceValue(state: BabelState, loc: { line: number; column: number } | null | undefined) {\n  const filename = state.file?.opts?.filename;\n  if (!filename || !loc) {\n    return null;\n  }\n\n  const relPath = path.relative(process.cwd(), filename).replace(/\\\\/g, \"/\");\n  return `${relPath}:${loc.line}:${loc.column + 1}`;\n}\n\nfunction buildAssignment(name: string, sourceValue: string) {\n  return t.expressionStatement(\n    t.assignmentExpression(\n      \"=\",\n      t.memberExpression(t.identifier(name), t.identifier(SOURCE_PROP)),\n      t.stringLiteral(sourceValue),\n    ),\n  );\n}\n\nfunction visitDeclaration(\n  declarationPath: NodePath,\n  insertAfterPath: NodePath,\n  state: BabelState,\n  seen: Set<string>,\n) {\n  if (declarationPath.isFunctionDeclaration() || declarationPath.isClassDeclaration()) {\n    const name = declarationPath.node.id?.name;\n    if (!name || !isComponentName(name) || seen.has(name)) {\n      return;\n    }\n\n    const sourceValue = getSourceValue(state, declarationPath.node.loc?.start);\n    if (!sourceValue) {\n      return;\n    }\n\n    seen.add(name);\n    insertAfterPath.insertAfter(buildAssignment(name, sourceValue));\n    return;\n  }\n\n  if (!declarationPath.isVariableDeclaration()) {\n    return;\n  }\n\n  const assignments = declarationPath.node.declarations.flatMap((declarator) => {\n    if (!t.isIdentifier(declarator.id) || !isComponentName(declarator.id.name) || seen.has(declarator.id.name)) {\n      return [];\n    }\n\n    if (!declarator.init) {\n      return [];\n    }\n\n    if (!t.isArrowFunctionExpression(declarator.init) && !t.isFunctionExpression(declarator.init)) {\n      return [];\n    }\n\n    const sourceValue = getSourceValue(state, declarator.loc?.start ?? declarator.init.loc?.start);\n    if (!sourceValue) {\n      return [];\n    }\n\n    seen.add(declarator.id.name);\n    return [buildAssignment(declarator.id.name, sourceValue)];\n  });\n\n  if (assignments.length > 0) {\n    insertAfterPath.insertAfter(assignments);\n  }\n}\n\nexport function babelInjectComponentSource(): PluginObj<BabelState> {\n  return {\n    name: \"babel-inject-component-source\",\n    visitor: {\n      JSXOpeningElement(pathNode, state) {\n        const hasSourceProp = pathNode.node.attributes.some(\n          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === \"__source\",\n        );\n        if (hasSourceProp) {\n          return;\n        }\n\n        const filename = state.file?.opts?.filename;\n        const loc = pathNode.node.loc?.start;\n        if (!filename || !loc) {\n          return;\n        }\n\n        pathNode.node.attributes.push(\n          t.jsxAttribute(\n            t.jsxIdentifier(\"__source\"),\n            t.jsxExpressionContainer(\n              t.objectExpression([\n                t.objectProperty(t.identifier(\"fileName\"), t.stringLiteral(filename)),\n                t.objectProperty(t.identifier(\"lineNumber\"), t.numericLiteral(loc.line)),\n                t.objectProperty(t.identifier(\"columnNumber\"), t.numericLiteral(loc.column + 1)),\n              ]),\n            ),\n          ),\n        );\n      },\n      Program(programPath, state) {\n        const seen = new Set<string>();\n\n        for (const childPath of programPath.get(\"body\")) {\n          if (childPath.isExportNamedDeclaration() || childPath.isExportDefaultDeclaration()) {\n            const declarationPath = childPath.get(\"declaration\");\n            if (!Array.isArray(declarationPath) && declarationPath.node) {\n              visitDeclaration(declarationPath, childPath, state, seen);\n            }\n            continue;\n          }\n\n          visitDeclaration(childPath, childPath, state, seen);\n        }\n      },\n    },\n  };\n}\n","export const SOURCE_PROP = \"__componentSourceLoc\";\n\n"],"mappings":"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","names":["path","t"]}

package/dist/babel.d.cts

@@ -0,0 +1,2 @@
+export { babelInjectComponentSource } from './babelInjectComponentSource.cjs';
+import '@babel/core';

package/dist/babel.d.ts

@@ -0,0 +1,2 @@
+export { babelInjectComponentSource } from './babelInjectComponentSource.js';
+import '@babel/core';

package/dist/babel.js

@@ -0,0 +1,115 @@
+// src/babelInjectComponentSource.ts
+import path from "path";
+import { types as t } from "@babel/core";
+
+// src/constants.ts
+var SOURCE_PROP = "__componentSourceLoc";
+
+// src/babelInjectComponentSource.ts
+function isComponentName(name) {
+  return /^[A-Z]/.test(name);
+}
+function getSourceValue(state, loc) {
+  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}`;
+}
+function buildAssignment(name, sourceValue) {
+  return t.expressionStatement(
+    t.assignmentExpression(
+      "=",
+      t.memberExpression(t.identifier(name), t.identifier(SOURCE_PROP)),
+      t.stringLiteral(sourceValue)
+    )
+  );
+}
+function visitDeclaration(declarationPath, insertAfterPath, state, seen) {
+  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 (!sourceValue) {
+      return;
+    }
+    seen.add(name);
+    insertAfterPath.insertAfter(buildAssignment(name, sourceValue));
+    return;
+  }
+  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 (!t.isArrowFunctionExpression(declarator.init) && !t.isFunctionExpression(declarator.init)) {
+      return [];
+    }
+    const sourceValue = getSourceValue(state, declarator.loc?.start ?? declarator.init.loc?.start);
+    if (!sourceValue) {
+      return [];
+    }
+    seen.add(declarator.id.name);
+    return [buildAssignment(declarator.id.name, sourceValue)];
+  });
+  if (assignments.length > 0) {
+    insertAfterPath.insertAfter(assignments);
+  }
+}
+function babelInjectComponentSource() {
+  return {
+    name: "babel-inject-component-source",
+    visitor: {
+      JSXOpeningElement(pathNode, state) {
+        const hasSourceProp = pathNode.node.attributes.some(
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === "__source"
+        );
+        if (hasSourceProp) {
+          return;
+        }
+        const filename = state.file?.opts?.filename;
+        const loc = pathNode.node.loc?.start;
+        if (!filename || !loc) {
+          return;
+        }
+        pathNode.node.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier("__source"),
+            t.jsxExpressionContainer(
+              t.objectExpression([
+                t.objectProperty(t.identifier("fileName"), t.stringLiteral(filename)),
+                t.objectProperty(t.identifier("lineNumber"), t.numericLiteral(loc.line)),
+                t.objectProperty(t.identifier("columnNumber"), t.numericLiteral(loc.column + 1))
+              ])
+            )
+          )
+        );
+      },
+      Program(programPath, state) {
+        const seen = /* @__PURE__ */ new Set();
+        for (const childPath of programPath.get("body")) {
+          if (childPath.isExportNamedDeclaration() || childPath.isExportDefaultDeclaration()) {
+            const declarationPath = childPath.get("declaration");
+            if (!Array.isArray(declarationPath) && declarationPath.node) {
+              visitDeclaration(declarationPath, childPath, state, seen);
+            }
+            continue;
+          }
+          visitDeclaration(childPath, childPath, state, seen);
+        }
+      }
+    }
+  };
+}
+export {
+  babelInjectComponentSource
+};
+//# sourceMappingURL=babel.js.map

package/dist/babel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/babelInjectComponentSource.ts","../src/constants.ts"],"sourcesContent":["import path from \"node:path\";\nimport { types as t, type NodePath, type PluginObj } from \"@babel/core\";\nimport { SOURCE_PROP } from \"./constants\";\n\ntype BabelState = {\n  file?: {\n    opts?: {\n      filename?: string;\n    };\n  };\n};\n\nfunction isComponentName(name: string) {\n  return /^[A-Z]/.test(name);\n}\n\nfunction getSourceValue(state: BabelState, loc: { line: number; column: number } | null | undefined) {\n  const filename = state.file?.opts?.filename;\n  if (!filename || !loc) {\n    return null;\n  }\n\n  const relPath = path.relative(process.cwd(), filename).replace(/\\\\/g, \"/\");\n  return `${relPath}:${loc.line}:${loc.column + 1}`;\n}\n\nfunction buildAssignment(name: string, sourceValue: string) {\n  return t.expressionStatement(\n    t.assignmentExpression(\n      \"=\",\n      t.memberExpression(t.identifier(name), t.identifier(SOURCE_PROP)),\n      t.stringLiteral(sourceValue),\n    ),\n  );\n}\n\nfunction visitDeclaration(\n  declarationPath: NodePath,\n  insertAfterPath: NodePath,\n  state: BabelState,\n  seen: Set<string>,\n) {\n  if (declarationPath.isFunctionDeclaration() || declarationPath.isClassDeclaration()) {\n    const name = declarationPath.node.id?.name;\n    if (!name || !isComponentName(name) || seen.has(name)) {\n      return;\n    }\n\n    const sourceValue = getSourceValue(state, declarationPath.node.loc?.start);\n    if (!sourceValue) {\n      return;\n    }\n\n    seen.add(name);\n    insertAfterPath.insertAfter(buildAssignment(name, sourceValue));\n    return;\n  }\n\n  if (!declarationPath.isVariableDeclaration()) {\n    return;\n  }\n\n  const assignments = declarationPath.node.declarations.flatMap((declarator) => {\n    if (!t.isIdentifier(declarator.id) || !isComponentName(declarator.id.name) || seen.has(declarator.id.name)) {\n      return [];\n    }\n\n    if (!declarator.init) {\n      return [];\n    }\n\n    if (!t.isArrowFunctionExpression(declarator.init) && !t.isFunctionExpression(declarator.init)) {\n      return [];\n    }\n\n    const sourceValue = getSourceValue(state, declarator.loc?.start ?? declarator.init.loc?.start);\n    if (!sourceValue) {\n      return [];\n    }\n\n    seen.add(declarator.id.name);\n    return [buildAssignment(declarator.id.name, sourceValue)];\n  });\n\n  if (assignments.length > 0) {\n    insertAfterPath.insertAfter(assignments);\n  }\n}\n\nexport function babelInjectComponentSource(): PluginObj<BabelState> {\n  return {\n    name: \"babel-inject-component-source\",\n    visitor: {\n      JSXOpeningElement(pathNode, state) {\n        const hasSourceProp = pathNode.node.attributes.some(\n          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === \"__source\",\n        );\n        if (hasSourceProp) {\n          return;\n        }\n\n        const filename = state.file?.opts?.filename;\n        const loc = pathNode.node.loc?.start;\n        if (!filename || !loc) {\n          return;\n        }\n\n        pathNode.node.attributes.push(\n          t.jsxAttribute(\n            t.jsxIdentifier(\"__source\"),\n            t.jsxExpressionContainer(\n              t.objectExpression([\n                t.objectProperty(t.identifier(\"fileName\"), t.stringLiteral(filename)),\n                t.objectProperty(t.identifier(\"lineNumber\"), t.numericLiteral(loc.line)),\n                t.objectProperty(t.identifier(\"columnNumber\"), t.numericLiteral(loc.column + 1)),\n              ]),\n            ),\n          ),\n        );\n      },\n      Program(programPath, state) {\n        const seen = new Set<string>();\n\n        for (const childPath of programPath.get(\"body\")) {\n          if (childPath.isExportNamedDeclaration() || childPath.isExportDefaultDeclaration()) {\n            const declarationPath = childPath.get(\"declaration\");\n            if (!Array.isArray(declarationPath) && declarationPath.node) {\n              visitDeclaration(declarationPath, childPath, state, seen);\n            }\n            continue;\n          }\n\n          visitDeclaration(childPath, childPath, state, seen);\n        }\n      },\n    },\n  };\n}\n","export const SOURCE_PROP = \"__componentSourceLoc\";\n\n"],"mappings":"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","names":[]}