vite-plugin-jsx-source-attrs 0.1.0 → 0.1.1-dev.mr.2.23.8ec07595

package/README.llm.txt

@@ -0,0 +1,467 @@
+# LLM 설치 가이드: vite-plugin-jsx-source-attrs
+
+이 문서는 LLM/AI 에이전트가 Vite React 프로젝트의 `vite.config.ts`에 `vite-plugin-jsx-source-attrs`를 설치하고 설정할 때 참고하기 위한 최소 실행 지침입니다.
+
+## 목적
+
+`vite-plugin-jsx-source-attrs`는 Vite React 개발 환경에서 JSX 요소에 소스 위치 attribute를 자동 주입하는 Vite 플러그인과 Babel 플러그인 유틸리티입니다.
+
+기본 목표:
+
+- 개발 모드에서 intrinsic JSX 요소에 `data-source-location`을 주입한다.
+- 프로덕션 빌드에서는 주입하지 않는다.
+- 사용자 컴포넌트에는 기본적으로 주입하지 않는다.
+- 기존 attribute가 있으면 중복 주입하지 않는다.
+- Vite 가상 모듈 prefix, query/hash, Windows 경로 구분자를 정규화한다.
+
+예상 변환 결과:
+
+입력:
+
+```tsx
+const view = <div />;
+```
+
+개발 모드 출력 예시:
+
+```tsx
+const view = <div data-source-location="src/App.tsx:1:14" />;
+```
+
+## 자동 적용 프롬프트
+
+다른 프로젝트에 이 패키지를 설치하고 `vite.config.ts`까지 자동 반영하려면 아래 프롬프트를 LLM/AI 에이전트에게 그대로 전달한다.
+
+````text
+Vite React 프로젝트에 `vite-plugin-jsx-source-attrs`를 설치하고 설정해줘.
+
+요구사항:
+1. 프로젝트 루트에서 패키지 매니저를 확인해줘.
+   - `packageManager` 필드가 있으면 해당 도구를 우선 사용해줘.
+   - `packageManager`가 없으면 lockfile 기준으로 판단해줘: `bun.lock` → Bun, `package-lock.json` → npm, `pnpm-lock.yaml` → pnpm, `yarn.lock` → Yarn.
+   - 그래도 판단할 수 없으면 npm을 사용해줘.
+2. `vite-plugin-jsx-source-attrs`를 devDependency로 설치해줘.
+   - stable 검증이면 `vite-plugin-jsx-source-attrs` 또는 `vite-plugin-jsx-source-attrs@latest`를 설치해줘.
+   - MR 검증본이 필요하면 `vite-plugin-jsx-source-attrs@dev`를 설치해줘.
+   - main prerelease 검증본이 필요하면 `vite-plugin-jsx-source-attrs@pre`를 설치해줘.
+3. `vite.config.ts` 또는 `vite.config.mts`를 찾아 `@vitejs/plugin-react`보다 앞에 `vitePluginJsxSourceAttrs()`를 추가해줘.
+4. 기존 `react()` 설정, 기존 Babel plugin, alias, server, build 설정은 보존해줘.
+5. 이미 `react({ babel: { plugins: [...] } })`를 지원하는 구버전 조합이면 `jsxSourceAttrs()`를 기존 Babel 플러그인 배열 끝에 추가해도 돼.
+6. Vite 8 + `@vitejs/plugin-react` 6처럼 `babel` 옵션이 없는 조합에서는 `react({ babel: ... })` 형태로 바꾸지 말고 Vite 플러그인 방식을 사용해줘.
+7. `defineConfig`가 객체 형태이고 `mode`가 필요하면 `defineConfig(({ mode }) => ({ ... }))` 형태로 바꿔줘. 단, 기존 설정 의미는 보존해줘.
+8. 기본 설정은 아래 값을 사용해줘.
+
+```ts
+vitePluginJsxSourceAttrs({
+  enabled: mode === 'development',
+  attributeName: 'data-source-location',
+  componentAttributeName: null,
+})
+```
+
+9. import를 추가해줘.
+
+```ts
+import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';
+```
+
+10. 기존 로컬 JSX source attrs 플러그인이 있으면 새 패키지로 대체해줘.
+    - 제거 후보: `resources/scripts/jsx-source-attrs.js`, `resources/babel/jsx-source-attrs.js`, `src/resources/babel/jsx-source-attrs.js`, `@wix/babel-plugin-jsx-source-attrs` 직접 설정.
+    - 단, 실제 import가 제거된 뒤에만 파일/의존성을 삭제해줘.
+11. 빌드 단계에서는 devDependencies가 설치되어야 한다는 점을 CI 설정에서 확인해줘.
+12. 변경 후 프로젝트의 기존 검증 스크립트를 실행해줘.
+    - 가능한 경우: lint, typecheck, test, build 순서.
+    - 없는 스크립트는 억지로 만들지 말고 건너뛰었다고 보고해줘.
+13. 최종 보고에는 설치한 버전/tag, 수정한 파일, 실행한 검증 명령, 남은 주의사항을 요약해줘.
+
+주의사항:
+- unrelated 파일은 수정하지 마.
+- 기존 변경사항을 되돌리지 마.
+- 문자열/주석에 있는 예시는 실제 import나 실행 코드가 아니면 함부로 삭제하지 마.
+- 프로덕션 빌드 산출물에는 `data-source-location`이 없어야 해.
+````
+
+### 자동 적용 후 기대되는 `vite.config.ts` 예시
+
+```ts
+import react from '@vitejs/plugin-react';
+import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    vitePluginJsxSourceAttrs({
+      enabled: mode === 'development',
+      attributeName: 'data-source-location',
+      componentAttributeName: null,
+    }),
+    react(),
+  ],
+}));
+```
+
+## 설치 명령
+
+대상 프로젝트의 패키지 매니저를 먼저 확인한다.
+
+- `bun.lock`이 있으면 Bun 사용
+- `package-lock.json`이 있으면 npm 사용
+- `pnpm-lock.yaml`이 있으면 pnpm 사용
+- `yarn.lock`이 있으면 Yarn 사용
+
+패키지 설치:
+
+```bash
+bun add -D vite-plugin-jsx-source-attrs
+```
+
+```bash
+npm install -D vite-plugin-jsx-source-attrs
+```
+
+```bash
+pnpm add -D vite-plugin-jsx-source-attrs
+```
+
+```bash
+yarn add -D vite-plugin-jsx-source-attrs
+```
+
+## devDependency 설치 기준
+
+이 패키지는 Vite의 `@vitejs/plugin-react` Babel 설정에서 실행되는 빌드 타임 도구다. 브라우저 런타임 코드에서 직접 import하지 않으므로 일반 Vite 애플리케이션에서는 `devDependencies`에 설치한다.
+
+프로덕션 배포를 만들 때도 `vite.config.ts`가 평가되므로 빌드 단계에서는 devDependency가 설치되어 있어야 한다. 즉, 프로덕션에 배포하는 앱이어도 이 패키지는 devDependency여도 괜찮다. 단, CI가 `npm ci --omit=dev`, `pnpm install --prod`, `bun install --production`처럼 devDependency를 제외하고 빌드하면 Vite config import가 실패한다.
+
+권장 운영 방식:
+
+1. 빌드 job/stage에서는 devDependency 포함 설치를 사용한다.
+2. 빌드 산출물만 런타임 이미지나 서버로 복사한다.
+3. 런타임 이미지에서 별도 Node 의존성을 설치해야 한다면 그 단계에서만 production dependency 설치를 사용한다.
+
+
+## MR/main 테스트 배포 버전 설치
+
+이 저장소의 CI는 레퍼런스 코드베이스처럼 main/MR마다 테스트 가능한 prerelease 패키지를 배포한다.
+
+- main pipeline: `pre` dist-tag로 `0.1.1-pre.main.<pipeline>.<shortsha>` 형태를 배포한다.
+- MR pipeline: `dev` dist-tag로 `0.1.1-dev.mr.<mr_iid>.<pipeline>.<shortsha>` 형태를 배포한다.
+- stable release/main 버전은 `latest` dist-tag를 사용한다.
+
+대상 프로젝트에서 최신 MR 검증본을 설치해야 하면 `dev` tag를 사용한다.
+
+```bash
+bun add -D vite-plugin-jsx-source-attrs@dev
+```
+
+```bash
+npm install -D vite-plugin-jsx-source-attrs@dev
+```
+
+main 최신 사전 검증본을 설치해야 하면 `pre` tag를 사용한다.
+
+```bash
+bun add -D vite-plugin-jsx-source-attrs@pre
+```
+
+```bash
+npm install -D vite-plugin-jsx-source-attrs@pre
+```
+
+GitLab Package Registry에서 설치해야 하는 경우에는 프로젝트 npm registry를 지정한다.
+
+```bash
+npm install -D vite-plugin-jsx-source-attrs@dev \
+  --registry https://git.hyeon.pro/api/v4/projects/112/packages/npm/
+```
+
+GitLab registry 인증이 필요한 프로젝트에서는 `.npmrc`에 다음 형태의 토큰 설정이 있어야 한다.
+
+```text
+//git.hyeon.pro/api/v4/projects/112/packages/npm/:_authToken=${GITLAB_NPM_TOKEN}
+```
+
+LLM이 특정 MR에서 배포된 정확한 버전을 알고 있다면 tag 대신 명시 버전을 설치한다.
+
+```bash
+bun add -D vite-plugin-jsx-source-attrs@0.1.1-dev.mr.12.345.abcdef1
+```
+
+## vite.config.ts 기본 적용
+
+`@vitejs/plugin-react`의 `react({ babel: { plugins: [...] } })` 설정에 `jsxSourceAttrs()`를 추가한다.
+
+기본 권장 설정:
+
+```ts
+import react from '@vitejs/plugin-react';
+import { jsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          jsxSourceAttrs({
+            enabled: mode === 'development',
+            attributeName: 'data-source-location',
+            componentAttributeName: null,
+          }),
+        ],
+      },
+    }),
+  ],
+}));
+```
+
+## 기존 vite.config.ts에 react()가 이미 있는 경우
+
+기존 설정을 유지하면서 `babel.plugins` 배열에만 추가한다.
+
+변경 전 예시:
+
+```ts
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+});
+```
+
+변경 후 예시:
+
+```ts
+import react from '@vitejs/plugin-react';
+import { jsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          jsxSourceAttrs({
+            enabled: mode === 'development',
+            componentAttributeName: null,
+          }),
+        ],
+      },
+    }),
+  ],
+}));
+```
+
+## 기존 babel.plugins가 이미 있는 경우
+
+기존 Babel 플러그인 목록을 보존하고 `jsxSourceAttrs()`만 추가한다. 기존 플러그인을 삭제하거나 순서를 임의로 바꾸지 않는다.
+
+변경 전 예시:
+
+```ts
+react({
+  babel: {
+    plugins: [existingPlugin],
+  },
+});
+```
+
+변경 후 예시:
+
+```ts
+react({
+  babel: {
+    plugins: [
+      existingPlugin,
+      jsxSourceAttrs({
+        enabled: mode === 'development',
+        componentAttributeName: null,
+      }),
+    ],
+  },
+});
+```
+
+## defineConfig가 객체 형태인 경우
+
+`mode`를 사용해 개발 모드에서만 활성화해야 하므로 가능하면 함수 형태로 바꾼다.
+
+```ts
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          jsxSourceAttrs({
+            enabled: mode === 'development',
+            componentAttributeName: null,
+          }),
+        ],
+      },
+    }),
+  ],
+}));
+```
+
+객체 형태를 꼭 유지해야 하면 `process.env.NODE_ENV` 기반 기본값을 사용할 수 있다.
+
+```ts
+react({
+  babel: {
+    plugins: [jsxSourceAttrs()],
+  },
+});
+```
+
+단, Vite 설정에서는 `mode === 'development'`를 명시하는 방식을 우선한다.
+
+## 사용자 컴포넌트에도 attribute가 필요한 경우
+
+기본값은 사용자 컴포넌트에 attribute를 주입하지 않는다. 사용자 컴포넌트까지 추적해야 하면 `componentAttributeName`을 지정한다.
+
+```ts
+jsxSourceAttrs({
+  enabled: mode === 'development',
+  attributeName: 'data-source-location',
+  componentAttributeName: 'data-component-source-location',
+});
+```
+
+## 경로 기준 root 지정
+
+모노레포나 Vite root가 다를 때 attribute 값의 상대 경로 기준을 맞추려면 `root`를 지정한다.
+
+```ts
+jsxSourceAttrs({
+  enabled: mode === 'development',
+  root: process.cwd(),
+  componentAttributeName: null,
+});
+```
+
+## 커스텀 활성화 조건
+
+특정 파일만 처리하려면 `enabled`에 함수를 사용할 수 있다.
+
+```ts
+jsxSourceAttrs({
+  enabled: ({ filename }) => {
+    return filename.endsWith('.tsx') && !filename.includes('/node_modules/');
+  },
+  componentAttributeName: null,
+});
+```
+
+## 마이그레이션 지침
+
+기존 프로젝트에 아래 파일 또는 패키지 설정이 있다면 이 패키지로 대체한다.
+
+제거 후보:
+
+- `resources/scripts/jsx-source-attrs.js`
+- `resources/babel/jsx-source-attrs.js`
+- `src/resources/babel/jsx-source-attrs.js`
+- `@wix/babel-plugin-jsx-source-attrs` 직접 설정
+
+대체 원칙:
+
+1. `vite-plugin-jsx-source-attrs`를 devDependency로 설치한다.
+2. `vite.config.ts`에서 로컬 `jsx-source-attrs.js` import를 제거한다.
+3. `import { jsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';`를 추가한다.
+4. `react({ babel: { plugins: [...] } })` 안에 `jsxSourceAttrs({ enabled: mode === 'development', componentAttributeName: null })`를 추가한다.
+5. 기존 로컬 플러그인 파일은 import가 사라진 뒤 삭제한다.
+6. `@wix/babel-plugin-jsx-source-attrs`가 더 이상 필요 없다면 dependency/devDependency에서 제거한다.
+
+## 이 저장소에서 패키지 자체 검증
+
+이 저장소는 단일 npm 패키지 repo입니다. LLM이 패키지 자체를 수정했다면 루트에서 다음 순서로 확인한다.
+
+```bash
+bun install
+bun run verify
+bun run pack:dry
+```
+
+`bun run verify`는 lint/typecheck/test/build를 함께 수행한다.
+
+## 적용 후 검증
+
+대상 프로젝트의 기존 스크립트를 사용한다.
+
+예시:
+
+```bash
+bun run lint
+bun run typecheck
+bun run build
+```
+
+또는 npm 프로젝트:
+
+```bash
+npm run lint
+npm run typecheck
+npm run build
+```
+
+브라우저 개발 모드에서 확인할 것:
+
+- `div`, `span` 같은 intrinsic JSX 요소에 `data-source-location`이 보인다.
+- 값 형식은 `상대/파일경로.tsx:라인:컬럼`이다.
+- 동일 attribute가 중복으로 생기지 않는다.
+- 프로덕션 빌드 산출물에는 `data-source-location`이 없어야 한다.
+
+## 흔한 실패와 대응
+
+### `jsxSourceAttrs` import 오류
+
+패키지가 설치되어 있는지 확인한다.
+
+```bash
+bun pm ls vite-plugin-jsx-source-attrs
+```
+
+또는:
+
+```bash
+npm ls vite-plugin-jsx-source-attrs
+```
+
+### `react()` 설정이 두 번 생김
+
+기존 `react()` 플러그인을 새로 추가하지 말고 기존 설정에 `babel.plugins`만 병합한다.
+
+### 프로덕션에도 attribute가 들어감
+
+`enabled: mode === 'development'`가 적용되어 있는지 확인한다.
+
+### 사용자 컴포넌트에 attribute가 안 들어감
+
+정상 기본 동작이다. 필요하면 `componentAttributeName`을 문자열로 지정한다.
+
+## 최종 권장 스니펫
+
+LLM이 별도 요구사항을 받지 않았다면 아래 설정을 최종값으로 사용한다.
+
+```ts
+import react from '@vitejs/plugin-react';
+import { jsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          jsxSourceAttrs({
+            enabled: mode === 'development',
+            attributeName: 'data-source-location',
+            componentAttributeName: null,
+          }),
+        ],
+      },
+    }),
+  ],
+}));
+```

package/README.md

@@ -1,6 +1,6 @@
 # vite-plugin-jsx-source-attrs
 
-Vite React 개발 환경에서 JSX 요소에 소스 위치 정보를 담은 attribute를 주입하기 위한 Babel 플러그인 유틸리티입니다.
+Vite React 개발 환경에서 JSX 요소에 소스 위치 정보를 담은 attribute를 주입하기 위한 Vite 플러그인과 Babel 플러그인 유틸리티입니다.
 
 여러 Analytics MFE 프로젝트에 반복되어 있던 `@wix/babel-plugin-jsx-source-attrs` 설정과 로컬 Babel 플러그인 구현을 공통 패키지로 분리해, 동일한 동작을 한 곳에서 관리하는 것을 목표로 합니다.
 
@@ -25,9 +25,35 @@ npm을 사용한다면 다음처럼 설치합니다.
 npm install -D vite-plugin-jsx-source-attrs
 ```
 
+### devDependency로 설치하는 이유
+
+이 패키지는 Vite의 `@vitejs/plugin-react` Babel 설정에서 **빌드 타임에만 실행**됩니다. 런타임 브라우저 코드에서 import되는 패키지가 아니므로 일반 Vite 애플리케이션에서는 `devDependencies`에 설치하는 것이 권장값입니다.
+
+프로덕션 빌드에서도 `vite.config.ts`를 평가해야 하므로 CI/CD가 `devDependencies`를 포함해 설치해야 합니다. `npm ci --omit=dev`처럼 devDependency를 제외한 상태에서 빌드를 실행하는 환경이라면 이 패키지를 찾을 수 없습니다. 이 경우 빌드 단계에서는 devDependency를 포함해 설치하고, 배포 런타임 이미지나 서버 산출물에서만 devDependency를 제외하세요.
+
+
 ## 사용법
 
-`@vitejs/plugin-react`의 Babel 플러그인 배열에 `jsxSourceAttrs()`를 추가합니다.
+Vite 8 + `@vitejs/plugin-react` 6처럼 React 플러그인의 `babel.plugins` 옵션을 사용할 수 없는 조합에서는 독립 Vite 플러그인으로 추가합니다.
+
+```ts
+import react from '@vitejs/plugin-react';
+import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    vitePluginJsxSourceAttrs({
+      enabled: mode === 'development',
+      attributeName: 'data-source-location',
+      componentAttributeName: null,
+    }),
+    react(),
+  ],
+}));
+```
+
+`@vitejs/plugin-react` 4.x처럼 `babel.plugins` 옵션을 지원하는 조합에서는 Babel 플러그인 유틸리티를 직접 사용할 수도 있습니다.
 
 ```ts
 import react from '@vitejs/plugin-react';
@@ -67,11 +93,14 @@ const view = <div data-source-location="src/App.tsx:1:14" />;
 
 | 옵션 | 기본값 | 설명 |
 | --- | --- | --- |
-| `enabled` | `process.env.NODE_ENV !== 'production'` | attribute 주입 여부입니다. boolean 또는 context 기반 함수로 지정할 수 있습니다. |
+| `enabled` | Babel: `process.env.NODE_ENV !== 'production'`, Vite: `command === 'serve'` | attribute 주입 여부입니다. boolean 또는 context 기반 함수로 지정할 수 있습니다. |
 | `attributeName` | `data-source-location` | intrinsic JSX 요소에 주입할 attribute 이름입니다. |
 | `componentAttributeName` | `null` | 사용자 컴포넌트에 별도로 주입할 attribute 이름입니다. `null`이면 사용자 컴포넌트에는 주입하지 않습니다. |
-| `root` | `process.cwd()` | 절대 경로를 상대 경로로 바꿀 기준 루트입니다. |
+| `root` | Babel: `process.cwd()`, Vite: `config.root` | 절대 경로를 상대 경로로 바꿀 기준 루트입니다. |
 | `normalizePath` | 내장 정규화 함수 | 파일 경로를 attribute 값에 맞게 정규화하는 함수입니다. |
+| `include` | `/\.[jt]sx(?:\?.*)?$/` | `vitePluginJsxSourceAttrs`에서만 사용합니다. 변환할 Vite module id 패턴입니다. |
+| `exclude` | `/\/node_modules\//` | `vitePluginJsxSourceAttrs`에서만 사용합니다. 변환에서 제외할 Vite module id 패턴입니다. |
+| `parserPlugins` | `[]` | `vitePluginJsxSourceAttrs`에서만 사용합니다. 프로젝트 문법에 추가 Babel parser plugin이 필요할 때 지정합니다. |
 
 ### enabled 함수 예시
 
@@ -99,8 +128,22 @@ jsxSourceAttrs({
 - Windows 경로 구분자 `\\`를 `/`로 정규화
 - `root` 하위 절대 경로를 상대 경로로 변환
 
+## 저장소 구조
+
+이 저장소는 단일 npm 패키지 repo입니다.
+
+```text
+.
+├── src/       # 배포되는 라이브러리 소스
+├── test/      # Vitest 테스트
+├── pipeline/  # GitLab CI publish/release 구성
+└── docs/      # 배포와 마이그레이션 보조 문서
+```
+
 ## 개발
 
+아래 명령은 저장소 루트에서 실행합니다.
+
 ```bash
 bun install
 bun run lint

package/dist/index.cjs

@@ -32,10 +32,12 @@ var index_exports = {};
 __export(index_exports, {
   default: () => index_default,
   jsxSourceAttrs: () => jsxSourceAttrs,
-  normalizeSourcePath: () => normalizeSourcePath
+  normalizeSourcePath: () => normalizeSourcePath,
+  vitePluginJsxSourceAttrs: () => vitePluginJsxSourceAttrs
 });
 module.exports = __toCommonJS(index_exports);
 var import_node_path2 = __toESM(require("path"), 1);
+var import_core = require("@babel/core");
 var t = __toESM(require("@babel/types"), 1);
 
 // src/normalize.ts
@@ -77,6 +79,8 @@ function normalizeSourcePath(filename, context) {
 
 // src/index.ts
 var DEFAULT_ATTRIBUTE_NAME = "data-source-location";
+var DEFAULT_INCLUDE_RE = /\.[jt]sx(?:\?.*)?$/;
+var DEFAULT_EXCLUDE_RE = /\/node_modules\//;
 function resolveOptions(options) {
   return {
     enabled: options.enabled ?? process.env.NODE_ENV !== "production",
@@ -128,6 +132,42 @@ function createLocationValue(pathToOpeningElement, state, options) {
   });
   return `${filename}:${location.line}:${location.column + 1}`;
 }
+function toPatterns(pattern) {
+  if (!pattern) {
+    return [];
+  }
+  return Array.isArray(pattern) ? pattern : [pattern];
+}
+function matchesPattern(id, pattern) {
+  if (typeof pattern === "string") {
+    return id.includes(pattern);
+  }
+  return pattern.test(id);
+}
+function createFilter(include, exclude) {
+  const includePatterns = toPatterns(include ?? DEFAULT_INCLUDE_RE);
+  const excludePatterns = toPatterns(exclude ?? DEFAULT_EXCLUDE_RE);
+  return (id) => {
+    if (excludePatterns.some((pattern) => matchesPattern(id, pattern))) {
+      return false;
+    }
+    return includePatterns.some((pattern) => matchesPattern(id, pattern));
+  };
+}
+function getParserPlugins(id, parserPlugins = []) {
+  const filename = removeQueryAndHash2(id);
+  const plugins = [...parserPlugins];
+  if (/\.tsx$/i.test(filename)) {
+    plugins.push("typescript", "jsx");
+    return plugins;
+  }
+  if (/\.ts$/i.test(filename)) {
+    plugins.push("typescript");
+    return plugins;
+  }
+  plugins.push("jsx");
+  return plugins;
+}
 function jsxSourceAttrs(options = {}) {
   const resolvedOptions = resolveOptions(options);
   return {
@@ -153,8 +193,57 @@ function jsxSourceAttrs(options = {}) {
   };
 }
 var index_default = jsxSourceAttrs;
+function removeQueryAndHash2(filename) {
+  return filename.split(/[?#]/, 1)[0] ?? filename;
+}
+function vitePluginJsxSourceAttrs(options = {}) {
+  const filter = createFilter(options.include, options.exclude);
+  let config = {
+    command: process.env.NODE_ENV === "production" ? "build" : "serve",
+    mode: process.env.NODE_ENV ?? "development",
+    root: process.cwd()
+  };
+  return {
+    name: "vite-plugin-jsx-source-attrs:vite",
+    enforce: "pre",
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async transform(code, id) {
+      if (!filter(id)) {
+        return null;
+      }
+      const result = await (0, import_core.transformAsync)(code, {
+        ast: false,
+        babelrc: false,
+        configFile: false,
+        filename: id,
+        parserOpts: {
+          sourceType: "module",
+          plugins: getParserPlugins(id, options.parserPlugins)
+        },
+        plugins: [
+          jsxSourceAttrs({
+            ...options,
+            enabled: options.enabled ?? config.command === "serve",
+            root: options.root ?? config.root
+          })
+        ],
+        sourceMaps: true
+      });
+      if (!result?.code) {
+        return null;
+      }
+      return {
+        code: result.code,
+        map: result.map
+      };
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   jsxSourceAttrs,
-  normalizeSourcePath
+  normalizeSourcePath,
+  vitePluginJsxSourceAttrs
 });

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { PluginObj, PluginPass } from '@babel/core';
+import { ParserOptions, PluginObj, PluginPass } from '@babel/core';
 
 interface JsxSourceAttrsContext {
     /** Babel이 전달한 파일명입니다. */
@@ -38,9 +38,50 @@ interface JsxSourceAttrsPluginState extends PluginPass {
         };
     };
 }
+type FilterPattern = string | RegExp | Array<string | RegExp>;
+interface ViteResolvedConfigLike {
+    command?: 'serve' | 'build';
+    mode?: string;
+    root: string;
+}
+interface SourceMapLike {
+    file?: string;
+    mappings: string;
+    names: string[];
+    sourceRoot?: string;
+    sources: string[];
+    sourcesContent?: string[];
+    version: number;
+}
+interface ViteTransformResult {
+    code: string;
+    map?: SourceMapLike | null;
+}
+interface VitePluginLike {
+    name: string;
+    enforce?: 'pre' | 'post';
+    configResolved?: (config: ViteResolvedConfigLike) => void;
+    transform?: (code: string, id: string) => Promise<ViteTransformResult | null>;
+}
+interface VitePluginJsxSourceAttrsOptions extends JsxSourceAttrsOptions {
+    /** 변환할 파일 패턴입니다. 기본값은 JSX/TSX 파일입니다. */
+    include?: FilterPattern;
+    /** 변환에서 제외할 파일 패턴입니다. 기본값은 node_modules 제외입니다. */
+    exclude?: FilterPattern;
+    /** 프로젝트 문법에 추가 Babel parser plugin이 필요할 때 지정합니다. */
+    parserPlugins?: ParserOptions['plugins'];
+}
 /**
  * Vite의 `@vitejs/plugin-react` Babel 플러그인 배열에 넣어 사용하는 JSX source attribute 플러그인입니다.
  */
 declare function jsxSourceAttrs(options?: JsxSourceAttrsOptions): PluginObj<JsxSourceAttrsPluginState>;
 
-export { type JsxSourceAttrsContext, type JsxSourceAttrsOptions, type NormalizePathContext, jsxSourceAttrs as default, jsxSourceAttrs, normalizeSourcePath };
+/**
+ * `@vitejs/plugin-react`의 `babel.plugins` 옵션을 사용할 수 없는 Vite/React 플러그인 조합에서
+ * 독립 Vite transform으로 JSX source attribute를 주입합니다.
+ *
+ * `plugins: [vitePluginJsxSourceAttrs(), react()]`처럼 React 플러그인보다 앞에 둡니다.
+ */
+declare function vitePluginJsxSourceAttrs(options?: VitePluginJsxSourceAttrsOptions): VitePluginLike;
+
+export { type JsxSourceAttrsContext, type JsxSourceAttrsOptions, type NormalizePathContext, type VitePluginJsxSourceAttrsOptions, jsxSourceAttrs as default, jsxSourceAttrs, normalizeSourcePath, vitePluginJsxSourceAttrs };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PluginObj, PluginPass } from '@babel/core';
+import { ParserOptions, PluginObj, PluginPass } from '@babel/core';
 
 interface JsxSourceAttrsContext {
     /** Babel이 전달한 파일명입니다. */
@@ -38,9 +38,50 @@ interface JsxSourceAttrsPluginState extends PluginPass {
         };
     };
 }
+type FilterPattern = string | RegExp | Array<string | RegExp>;
+interface ViteResolvedConfigLike {
+    command?: 'serve' | 'build';
+    mode?: string;
+    root: string;
+}
+interface SourceMapLike {
+    file?: string;
+    mappings: string;
+    names: string[];
+    sourceRoot?: string;
+    sources: string[];
+    sourcesContent?: string[];
+    version: number;
+}
+interface ViteTransformResult {
+    code: string;
+    map?: SourceMapLike | null;
+}
+interface VitePluginLike {
+    name: string;
+    enforce?: 'pre' | 'post';
+    configResolved?: (config: ViteResolvedConfigLike) => void;
+    transform?: (code: string, id: string) => Promise<ViteTransformResult | null>;
+}
+interface VitePluginJsxSourceAttrsOptions extends JsxSourceAttrsOptions {
+    /** 변환할 파일 패턴입니다. 기본값은 JSX/TSX 파일입니다. */
+    include?: FilterPattern;
+    /** 변환에서 제외할 파일 패턴입니다. 기본값은 node_modules 제외입니다. */
+    exclude?: FilterPattern;
+    /** 프로젝트 문법에 추가 Babel parser plugin이 필요할 때 지정합니다. */
+    parserPlugins?: ParserOptions['plugins'];
+}
 /**
  * Vite의 `@vitejs/plugin-react` Babel 플러그인 배열에 넣어 사용하는 JSX source attribute 플러그인입니다.
  */
 declare function jsxSourceAttrs(options?: JsxSourceAttrsOptions): PluginObj<JsxSourceAttrsPluginState>;
 
-export { type JsxSourceAttrsContext, type JsxSourceAttrsOptions, type NormalizePathContext, jsxSourceAttrs as default, jsxSourceAttrs, normalizeSourcePath };
+/**
+ * `@vitejs/plugin-react`의 `babel.plugins` 옵션을 사용할 수 없는 Vite/React 플러그인 조합에서
+ * 독립 Vite transform으로 JSX source attribute를 주입합니다.
+ *
+ * `plugins: [vitePluginJsxSourceAttrs(), react()]`처럼 React 플러그인보다 앞에 둡니다.
+ */
+declare function vitePluginJsxSourceAttrs(options?: VitePluginJsxSourceAttrsOptions): VitePluginLike;
+
+export { type JsxSourceAttrsContext, type JsxSourceAttrsOptions, type NormalizePathContext, type VitePluginJsxSourceAttrsOptions, jsxSourceAttrs as default, jsxSourceAttrs, normalizeSourcePath, vitePluginJsxSourceAttrs };

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/index.ts
 import path2 from "path";
+import { transformAsync } from "@babel/core";
 import * as t from "@babel/types";
 
 // src/normalize.ts
@@ -41,6 +42,8 @@ function normalizeSourcePath(filename, context) {
 
 // src/index.ts
 var DEFAULT_ATTRIBUTE_NAME = "data-source-location";
+var DEFAULT_INCLUDE_RE = /\.[jt]sx(?:\?.*)?$/;
+var DEFAULT_EXCLUDE_RE = /\/node_modules\//;
 function resolveOptions(options) {
   return {
     enabled: options.enabled ?? process.env.NODE_ENV !== "production",
@@ -92,6 +95,42 @@ function createLocationValue(pathToOpeningElement, state, options) {
   });
   return `${filename}:${location.line}:${location.column + 1}`;
 }
+function toPatterns(pattern) {
+  if (!pattern) {
+    return [];
+  }
+  return Array.isArray(pattern) ? pattern : [pattern];
+}
+function matchesPattern(id, pattern) {
+  if (typeof pattern === "string") {
+    return id.includes(pattern);
+  }
+  return pattern.test(id);
+}
+function createFilter(include, exclude) {
+  const includePatterns = toPatterns(include ?? DEFAULT_INCLUDE_RE);
+  const excludePatterns = toPatterns(exclude ?? DEFAULT_EXCLUDE_RE);
+  return (id) => {
+    if (excludePatterns.some((pattern) => matchesPattern(id, pattern))) {
+      return false;
+    }
+    return includePatterns.some((pattern) => matchesPattern(id, pattern));
+  };
+}
+function getParserPlugins(id, parserPlugins = []) {
+  const filename = removeQueryAndHash2(id);
+  const plugins = [...parserPlugins];
+  if (/\.tsx$/i.test(filename)) {
+    plugins.push("typescript", "jsx");
+    return plugins;
+  }
+  if (/\.ts$/i.test(filename)) {
+    plugins.push("typescript");
+    return plugins;
+  }
+  plugins.push("jsx");
+  return plugins;
+}
 function jsxSourceAttrs(options = {}) {
   const resolvedOptions = resolveOptions(options);
   return {
@@ -117,8 +156,57 @@ function jsxSourceAttrs(options = {}) {
   };
 }
 var index_default = jsxSourceAttrs;
+function removeQueryAndHash2(filename) {
+  return filename.split(/[?#]/, 1)[0] ?? filename;
+}
+function vitePluginJsxSourceAttrs(options = {}) {
+  const filter = createFilter(options.include, options.exclude);
+  let config = {
+    command: process.env.NODE_ENV === "production" ? "build" : "serve",
+    mode: process.env.NODE_ENV ?? "development",
+    root: process.cwd()
+  };
+  return {
+    name: "vite-plugin-jsx-source-attrs:vite",
+    enforce: "pre",
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async transform(code, id) {
+      if (!filter(id)) {
+        return null;
+      }
+      const result = await transformAsync(code, {
+        ast: false,
+        babelrc: false,
+        configFile: false,
+        filename: id,
+        parserOpts: {
+          sourceType: "module",
+          plugins: getParserPlugins(id, options.parserPlugins)
+        },
+        plugins: [
+          jsxSourceAttrs({
+            ...options,
+            enabled: options.enabled ?? config.command === "serve",
+            root: options.root ?? config.root
+          })
+        ],
+        sourceMaps: true
+      });
+      if (!result?.code) {
+        return null;
+      }
+      return {
+        code: result.code,
+        map: result.map
+      };
+    }
+  };
+}
 export {
   index_default as default,
   jsxSourceAttrs,
-  normalizeSourcePath
+  normalizeSourcePath,
+  vitePluginJsxSourceAttrs
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-jsx-source-attrs",
-  "version": "0.1.0",
-  "description": "Vite React 개발 환경에서 JSX 요소에 소스 위치 attribute를 주입하는 Babel 플러그인 유틸리티",
+  "version": "0.1.1-dev.mr.2.23.8ec07595",
+  "description": "Vite React 개발 환경에서 JSX 요소에 소스 위치 attribute를 주입하는 Vite/Babel 플러그인",
   "type": "module",
   "license": "MIT",
   "author": "Hansanghyeon",
@@ -24,6 +24,7 @@
   "files": [
     "dist",
     "README.md",
+    "README.llm.txt",
     "LICENSE"
   ],
   "exports": {
@@ -37,9 +38,11 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
+    "lint": "biome ci .",
+    "lint:fix": "biome check --write .",
+    "lint:fix:unsafe": "biome check --write --unsafe .",
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
     "test": "vitest run",
     "verify": "bun run lint && bun run typecheck && bun run test && bun run build",
     "pack:dry": "bun pm pack --dry-run"
@@ -53,13 +56,12 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
-    "@eslint/js": "^9.17.0",
+    "@biomejs/biome": "^2.4.14",
+    "@hyeon/linter": "^11.0.4",
     "@types/babel__core": "^7.20.5",
     "@types/bun": "^1.1.14",
-    "eslint": "^9.17.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.2",
     "vitest": "^2.1.8"
   },
   "publishConfig": {