Skip to content

feat: integrate locatorjs for enhanced component inspection and navig…#10

Merged
citron03 merged 2 commits intomainfrom
feat/locatorjs
Dec 9, 2025
Merged

feat: integrate locatorjs for enhanced component inspection and navig…#10
citron03 merged 2 commits intomainfrom
feat/locatorjs

Conversation

@citron03
Copy link
Owner

@citron03 citron03 commented Dec 7, 2025 •
edited by github-actions bot
Loading

User description

…ation

PR Type

Enhancement

Description

  • LocatorJS 통합으로 컴포넌트 검사 기능 강화

  • 개발 환경에서만 LocatorJS 런타임 조건부 로드

  • Vite Babel JSX 플러그인 추가

  • LocatorJS 관련 개발 종속성 업데이트

Diagram Walkthrough

flowchart LR
  A["`apps/tanstack/src/routes/__root.tsx`"] --> B["`apps/tanstack/src/components/LocatorJSInit.tsx`"];
  B -- "개발 환경에서만 로드" --> C["`@locator/runtime`"];
  D["`apps/tanstack/vite.config.ts`"] --> E["`@locator/babel-jsx` 플러그인"];
  F["`apps/tanstack/package.json`"] -- "개발 종속성 추가" --> C;
  F -- "개발 종속성 추가" --> E;
Loading

File Walkthrough
Relevant files
Enhancement
__root.tsx
루트 문서에 LocatorJS 초기화 컴포넌트 추가                                                         

apps/tanstack/src/routes/__root.tsx

  • LocatorJSInit 컴포넌트를 임포트했습니다.
  • RootDocument의 태그 내에 LocatorJSInit 컴포넌트를 렌더링하도록 추가했습니다.
 +2/-0     
LocatorJSInit.tsx
LocatorJS 런타임 조건부 로드 컴포넌트 구현                                                         

apps/tanstack/src/components/LocatorJSInit.tsx

  • 새로운 LocatorJSInit 컴포넌트를 정의했습니다.
  • useEffect 훅을 사용하여 개발 환경(import.meta.env.DEV)에서만 @locator/runtime을 동적으로
    임포트하도록 구현했습니다.
  • 컴포넌트는 시각적인 요소를 렌더링하지 않고 null을 반환합니다.
 +11/-0   
Configuration changes
vite.config.ts
Vite 설정에 LocatorJS Babel 플러그인 추가                                                 

apps/tanstack/vite.config.ts

  • viteReact 플러그인 설정에 babel 옵션을 추가했습니다.
  • @locator/babel-jsx/dist 플러그인을 Babel 설정에 포함하여 LocatorJS 기능을 활성화했습니다.
 +5/-1     
Dependencies
package.json
LocatorJS 개발 종속성 추가                                                                           

apps/tanstack/package.json

  • 개발 종속성에 @locator/babel-jsx (버전 ^0.5.1)를 추가했습니다.
  • 개발 종속성에 @locator/runtime (버전 ^0.5.1)을 추가했습니다.
 +2/-0     

@github-actions
Copy link

github-actions bot commented Dec 7, 2025 •
edited
Loading

PR Reviewer Guide 🔍

(Review updated until commit 4c50fa5)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

@github-actions
Copy link

github-actions bot commented Dec 7, 2025

PR Code Suggestions ✨

Explore these optional code suggestions:

CategorySuggestion                                                                                                                                    Impact
General
개발 환경에서만 개발 도구를 렌더링합니다

LocatorJSInit 컴포넌트는 개발 전용 도구이므로 프로덕션 빌드에 포함되지 않도록 조건부로 렌더링해야 합니다.
process.env.NODE_ENV 환경 변수를 사용하여 개발 환경에서만 이 컴포넌트를 렌더링하도록 수정하면 번들 크기를 최적화하고 프로덕션 환경에서
불필요한 코드를 제거할 수 있습니다.

apps/tanstack/src/routes/__root.tsx [41-45]

 <body>
-        <LocatorJSInit />
+        {process.env.NODE_ENV === 'development' && <LocatorJSInit />}
         <Header />
         {children}
         <TanStackDevtools
Suggestion importance[1-10]: 8

__

Why: The suggestion correctly identifies LocatorJSInit as a development-only tool. Conditionally rendering it using process.env.NODE_ENV is a good practice for optimizing bundle size and performance in production builds.

Medium

@github-actions
Copy link

github-actions bot commented Dec 9, 2025

Persistent review updated to latest commit 4c50fa5

@github-actions
Copy link

github-actions bot commented Dec 9, 2025

PR Code Suggestions ✨

No code suggestions found for the PR.

@citron03 citron03 merged commit d5d91bd into main Dec 9, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Review effort 2/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@citron03