ngx-locatorjs 0.3.0 → 0.5.0

package/README.ko.md

@@ -1,7 +1,7 @@
 # ngx-locatorjs (Open-in-Editor)
 
+Angular 인기가 적어서인지 [LocatorJs](https://www.locatorjs.com/)와 같은 개발 도구가 없어 불편했습니다. 그래서 CODEX와 함께 만들어보았습니다.
 브라우저에서 Alt+클릭으로 Angular 컴포넌트 파일을 에디터에서 바로 여는 개발용 도구입니다. Angular 프로젝트 어디에나 npm 패키지로 설치해 사용할 수 있습니다.
-이 프로젝트는 [locatorjs.com](https://www.locatorjs.com/)에서 영감을 받았습니다.
 
 **기능**
 
@@ -15,10 +15,9 @@
 1. 패키지 설치: `npm i -D ngx-locatorjs`
 2. 설정/프록시 생성: `npx locatorjs-config`
 3. `main.ts`에 런타임 훅 추가 (아래 예시 참고)
-4. 파일 오프너 서버 + dev 서버 실행 (둘 다 켜진 상태 유지): `npx locatorjs-open-in-editor --watch` + `ng serve --proxy-config {proxyConfigPath}`
+4. 파일 오프너 서버 + dev 서버 실행 (둘 다 켜진 상태 유지): `npx locatorjs-open-in-editor --watch` + `ng serve --proxy-config ngx-locatorjs.proxy.cjs`
 
-`npm run start` 사용 시 `--` 뒤에 전달: `npm run start -- --proxy-config {proxyConfigPath}`
-`{proxyConfigPath}`는 `npx locatorjs-config`가 선택/병합한 실제 프록시 파일 경로로 바꿔서 사용하세요.
+기존 0.3.0 버전에서 업그레이드했다면 `npx locatorjs-config`를 다시 실행해 `authToken`과 proxy 헤더를 재생성하고, `--proxy-config`(또는 `angular.json`)를 `ngx-locatorjs.proxy.cjs`로 맞추세요.
 
 **Angular 코드 추가 (main.ts)**
 
@@ -65,10 +64,10 @@ bootstrapApplication(AppComponent, appConfig)
 **Angular dev server 예시**
 
 - CLI 실행
-  `ng serve --proxy-config {proxyConfigPath}`
+  `ng serve --proxy-config ngx-locatorjs.proxy.cjs`
 
 - angular.json에 적용
-  `"serve"` 옵션에 `"proxyConfig": "{proxyConfigPath}"` 추가
+  `"serve"` 옵션에 `"proxyConfig": "ngx-locatorjs.proxy.cjs"` 추가
 
 **컴포넌트 맵 스캔**
 
@@ -94,7 +93,7 @@ bootstrapApplication(AppComponent, appConfig)
 **중요**
 
 - `npx locatorjs-config`는 **실행한 현재 폴더를 기준**으로 설정합니다.
-- 기본값: `port: 4123`, `workspaceRoot: "."`.
+- 기본값: `host: "127.0.0.1"`, `port: 4123`, `workspaceRoot: "."`.
 - 모노레포처럼 실제 Angular 앱이 하위 폴더에 있으면 `workspaceRoot`를 그 **상대 경로**로 수정하세요. (예: `apps/web`)
 - `.gitignore`가 있으면 `npx locatorjs-config`가 `.open-in-editor/`를 자동 추가합니다. 커밋하려면 해당 항목을 제거하세요.
 
@@ -102,25 +101,27 @@ bootstrapApplication(AppComponent, appConfig)
 
 ```json
 {
+  "host": "127.0.0.1",
   "port": 4123,
   "workspaceRoot": ".",
   "editor": "cursor",
   "fallbackEditor": "code",
+  "authToken": "locatorjs-config가 자동 생성",
   "scan": {
     "includeGlobs": [
-      "src/**/*.{ts,tsx}",
-      "projects/**/*.{ts,tsx}",
-      "apps/**/*.{ts,tsx}",
-      "libs/**/*.{ts,tsx}"
+      "src/**/*.{ts,tsx,js,jsx}",
+      "projects/**/*.{ts,tsx,js,jsx}",
+      "apps/**/*.{ts,tsx,js,jsx}",
+      "libs/**/*.{ts,tsx,js,jsx}"
     ],
     "excludeGlobs": [
       "**/node_modules/**",
       "**/dist/**",
       "**/.angular/**",
       "**/coverage/**",
-      "**/*.spec.ts",
-      "**/*.test.ts",
-      "**/*.e2e.ts"
+      "**/*.spec.{ts,tsx,js,jsx}",
+      "**/*.test.{ts,tsx,js,jsx}",
+      "**/*.e2e.{ts,tsx,js,jsx}"
     ]
   }
 }
@@ -129,20 +130,35 @@ bootstrapApplication(AppComponent, appConfig)
 **필드 설명**
 
 - `port`: 로컬 file-opener 서버 포트입니다.
+- `host`: file-opener 서버 바인드 주소입니다. 로컬 전용으로 `127.0.0.1` 사용을 권장합니다.
 - `workspaceRoot`: 명령 실행 위치 기준 Angular 워크스페이스 루트 상대 경로입니다.
-- `editor`: 기본 에디터입니다 (`cursor`, `zed`, `antigravity`, `code`, `webstorm`).
+- `editor`: 기본 에디터입니다 (`cursor`, `code`, `webstorm`).
 - `fallbackEditor`: 기본 에디터 실행 실패 시 사용할 대체 에디터입니다.
+- `authToken`: open-in-editor 서버 요청 검증 토큰입니다. `locatorjs-config`가 자동 생성합니다.
 - `scan.includeGlobs`: 컴포넌트 소스 파일 탐색 대상 glob 목록입니다.
 - `scan.excludeGlobs`: 컴포넌트 스캔에서 제외할 glob 목록입니다.
 
+**authToken 동작 방식 (0.5.0)**
+
+- `locatorjs-config`가 프로젝트별 `authToken`을 `ngx-locatorjs.config.json`에 자동 생성합니다.
+- `ngx-locatorjs.proxy.cjs`가 해당 토큰을 읽어 opener 라우트로 `x-locatorjs-token` 헤더를 전달합니다.
+- Angular proxy 없이 opener 엔드포인트를 직접 호출할 경우 `installAngularLocator(...)`에 `authToken`을 전달해야 인증됩니다.
+- `401 Unauthorized`가 발생하면 `npx locatorjs-config`를 다시 실행해 config/proxy를 재생성하세요.
+
+**자동 스캔 범위 탐색 (0.5.0)**
+
+- `locatorjs-config`가 스캔 루트를 자동으로 구성합니다.
+- 기본 탐색 확장자는 `ts/tsx/js/jsx`를 포함합니다.
+- 생성된 `scan.includeGlobs` / `scan.excludeGlobs`는 언제든 수동 수정 가능합니다.
+
 **프로젝트 구조별 includeGlobs 예시**
 
 1. 일반 Angular 앱
    `["src/app/**/*.ts"]`
 2. Angular Workspace (projects/)
-   `["projects/**/*.{ts,tsx}"]`
+   `["projects/**/*.{ts,tsx,js,jsx}"]`
 3. Nx (apps/libs)
-   `["apps/**/*.{ts,tsx}", "libs/**/*.{ts,tsx}"]`
+   `["apps/**/*.{ts,tsx,js,jsx}", "libs/**/*.{ts,tsx,js,jsx}"]`
 
 **환경변수 우선순위**
 
@@ -151,41 +167,25 @@ bootstrapApplication(AppComponent, appConfig)
 3. `ngx-locatorjs.config.json`의 `editor`
 4. 자동 감지된 에디터
 
-**프록시 설정 ({proxyConfigPath})**
-`{proxyConfigPath}`는 `npx locatorjs-config` 실행 시 아래 규칙으로 결정됩니다.
-
-- `angular.json`에 `proxyConfig`가 지정되어 있으면 그 파일에 병합합니다.
-- 없고 `proxy.conf.json`이 있으면 그 파일에 병합합니다.
-- 둘 다 없으면 `ngx-locatorjs.proxy.json`을 생성합니다.
+**프록시 설정 (ngx-locatorjs.proxy.cjs)**
+`npx locatorjs-config` 실행 시 자동 생성됩니다. 이 파일은 실행 시점에 `ngx-locatorjs.config.json`을 읽어 target을 구성하므로, 포트를 바꾸려면 `ngx-locatorjs.config.json`의 `port`만 수정하면 됩니다.
 
 예시:
 
-```json
-{
-  "/__open-in-editor": {
-    "target": "http://localhost:4123",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/__open-in-editor-search": {
-    "target": "http://localhost:4123",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/__cmp-map": {
-    "target": "http://localhost:4123",
-    "secure": false,
-    "changeOrigin": true
-  }
-}
+```js
+module.exports = {
+  '/__open-in-editor': { target, secure: false, changeOrigin: true, headers },
+  '/__open-in-editor-search': { target, secure: false, changeOrigin: true, headers },
+  '/__cmp-map': { target, secure: false, changeOrigin: true, headers },
+};
 ```
 
 **트러블슈팅**
 
 1. CORS 에러
-   `ng serve --proxy-config {proxyConfigPath}` 사용 여부 확인
+   `ng serve --proxy-config ngx-locatorjs.proxy.cjs` 사용 여부 확인
 2. npm run 경고
-   `npm run start -- --proxy-config {proxyConfigPath}` 형태로 실행
+   `npm run start -- --proxy-config ngx-locatorjs.proxy.cjs` 형태로 실행
 3. 네트워크 비활성
    `installAngularLocator({ enableNetwork: true })` 설정 확인
 4. component-map.json not found
@@ -199,31 +199,20 @@ bootstrapApplication(AppComponent, appConfig)
 8. 하이라이트가 안 보이거나 info가 null로 나옴
    `http://localhost:${port}/__cmp-map` 에서 컴포넌트 정보가 잘 나타나는지 확인
 9. 포트 충돌
-   `ngx-locatorjs.config.json`과 `{proxyConfigPath}`에서 포트 일치 여부 확인
+   `ngx-locatorjs.config.json`의 `port`만 수정하면 됩니다
+10. opener 라우트에서 401 발생
+    `npx locatorjs-config` 재실행으로 토큰/프록시 헤더를 다시 생성하거나, 프록시 없이 직접 호출 시 `installAngularLocator`에 `authToken` 전달
 
 **주의**
 
 - 개발 모드에서만 사용하세요. 프로덕션 번들에 포함되지 않도록 `environment.production` 체크를 권장합니다.
 - 네트워크 요청은 opt-in이며 localhost로만 제한됩니다. `enableNetwork: true`로 활성화하세요.
+- opener 서버는 기본적으로 loopback(`127.0.0.1`)에만 바인드되며, `workspaceRoot` 바깥 파일은 열 수 없습니다.
 
 **원 커맨드 실행 (추천)**
-file-opener 서버와 Angular dev server를 한 번에 띄우려면 아래 방식 중 하나를 사용하세요.
-
-### Option A: `concurrently`
-
-```bash
-npm i -D concurrently
-```
-
-```json
-{
-  "scripts": {
-    "dev:locator": "concurrently -k -n opener,ng \"npx locatorjs-open-in-editor\" \"ng serve --proxy-config {proxyConfigPath}\""
-  }
-}
-```
+file-opener 서버와 Angular dev server를 한 번에 띄우려면 아래 방식을 사용하세요.
 
-### Option B: `npm-run-all`
+### `npm-run-all`
 
 ```bash
 npm i -D npm-run-all
@@ -233,7 +222,7 @@ npm i -D npm-run-all
 {
   "scripts": {
     "locator:opener": "npx locatorjs-open-in-editor",
-    "dev:app": "ng serve --proxy-config {proxyConfigPath}",
+    "dev:app": "ng serve --proxy-config ngx-locatorjs.proxy.cjs",
     "dev:locator": "run-p locator:opener dev:app"
   }
 }

package/README.md

@@ -4,6 +4,7 @@
 
 한국어 문서: [README.ko.md](README.ko.md)
 
+Angular doesn’t have many developer tools like LocatorJs, likely due to lower popularity, which has been inconvenient. So I built one together with CODEX.
 Open Angular component files directly from the browser with **Alt + Click** during development. This package provides:
 
 - Browser runtime for Alt+click / hover UI
@@ -32,10 +33,9 @@ You must complete steps 1–4 for this to work.
 1. Install the package: `npm i -D ngx-locatorjs`
 2. Generate config + proxy: `npx locatorjs-config`
 3. Add the runtime hook to `main.ts` (see the examples below)
-4. Run the file-opener server and your dev server (keep both running): `npx locatorjs-open-in-editor --watch` + `ng serve --proxy-config {proxyConfigPath}`
+4. Run the file-opener server and your dev server (keep both running): `npx locatorjs-open-in-editor --watch` + `ng serve --proxy-config ngx-locatorjs.proxy.cjs`
 
-If you use `npm run start`, pass args after `--`: `npm run start -- --proxy-config {proxyConfigPath}`
-Replace `{proxyConfigPath}` with the actual proxy file path selected/updated by `npx locatorjs-config`.
+If you are upgrading from an older version, run `npx locatorjs-config` again so `authToken` and proxy headers are generated, then use `ngx-locatorjs.proxy.cjs` in your `--proxy-config` or `angular.json`.
 
 ## Add to `main.ts`
 
@@ -94,7 +94,7 @@ Location: project root
 **Important**
 
 - `npx locatorjs-config` uses the **current directory** as the base.
-- Defaults: `port: 4123`, `workspaceRoot: "."`.
+- Defaults: `host: "127.0.0.1"`, `port: 4123`, `workspaceRoot: "."`.
 - In a monorepo, update `workspaceRoot` to the **relative path** of your Angular app (e.g. `apps/web`).
 - If `.gitignore` exists, `npx locatorjs-config` will append `.open-in-editor/`. Remove it if you want to commit the map.
 
@@ -102,25 +102,27 @@ Example:
 
 ```json
 {
+  "host": "127.0.0.1",
   "port": 4123,
   "workspaceRoot": ".",
   "editor": "cursor",
   "fallbackEditor": "code",
+  "authToken": "generated-by-locatorjs-config",
   "scan": {
     "includeGlobs": [
-      "src/**/*.{ts,tsx}",
-      "projects/**/*.{ts,tsx}",
-      "apps/**/*.{ts,tsx}",
-      "libs/**/*.{ts,tsx}"
+      "src/**/*.{ts,tsx,js,jsx}",
+      "projects/**/*.{ts,tsx,js,jsx}",
+      "apps/**/*.{ts,tsx,js,jsx}",
+      "libs/**/*.{ts,tsx,js,jsx}"
     ],
     "excludeGlobs": [
       "**/node_modules/**",
       "**/dist/**",
       "**/.angular/**",
       "**/coverage/**",
-      "**/*.spec.ts",
-      "**/*.test.ts",
-      "**/*.e2e.ts"
+      "**/*.spec.{ts,tsx,js,jsx}",
+      "**/*.test.{ts,tsx,js,jsx}",
+      "**/*.e2e.{ts,tsx,js,jsx}"
     ]
   }
 }
@@ -129,46 +131,45 @@ Example:
 ### Field Reference
 
 - `port`: Port for the local file-opener server.
+- `host`: Bind address for the file-opener server. Keep `127.0.0.1` for local-only access.
 - `workspaceRoot`: Angular workspace root path (relative to where you run commands).
-- `editor`: Preferred editor (`cursor`, `zed`, `antigravity`, `code`, `webstorm`).
+- `editor`: Preferred editor (`cursor`, `code`, `webstorm`).
 - `fallbackEditor`: Fallback editor if the preferred editor cannot be launched.
+- `authToken`: Request token validated by the open-in-editor server. Generated automatically by `locatorjs-config`.
 - `scan.includeGlobs`: Globs used to find component source files.
 - `scan.excludeGlobs`: Globs excluded from component scanning.
 
+### authToken Behavior (0.5.0)
+
+- `locatorjs-config` generates a per-project `authToken` in `ngx-locatorjs.config.json`.
+- `ngx-locatorjs.proxy.cjs` reads that token and forwards it as `x-locatorjs-token` to opener routes.
+- If you skip Angular proxy and call opener endpoints directly, pass `authToken` to `installAngularLocator(...)` so requests are authorized.
+- If token mismatch occurs (`401 Unauthorized`), regenerate config/proxy: `npx locatorjs-config`.
+
+### Auto Scan Scope Discovery (0.5.0)
+
+- `locatorjs-config` now auto-detects scan roots.
+- Generated defaults now include `ts/tsx/js/jsx`.
+- You can always edit the generated `scan.includeGlobs` / `scan.excludeGlobs` manually.
+
 ### Example includeGlobs
 
 - Simple app: `"src/app/**/*.ts"`
-- Angular workspace: `"projects/**/*.{ts,tsx}"`
-- Nx: `"apps/**/*.{ts,tsx}", "libs/**/*.{ts,tsx}"`
-
-## Proxy (`{proxyConfigPath}`)
+- Angular workspace: `"projects/**/*.{ts,tsx,js,jsx}"`
+- Nx: `"apps/**/*.{ts,tsx,js,jsx}", "libs/**/*.{ts,tsx,js,jsx}"`
 
-`{proxyConfigPath}` is decided by `npx locatorjs-config`:
+## Proxy (`ngx-locatorjs.proxy.cjs`)
 
-- If `angular.json` already specifies `proxyConfig`, it updates that file.
-- Else if `proxy.conf.json` exists, it updates that file.
-- Otherwise it creates `ngx-locatorjs.proxy.json`.
+Generated by `npx locatorjs-config`. This dynamic proxy module reads `ngx-locatorjs.config.json` at runtime, so changing `port` in config updates proxy target automatically.
 
 Example:
 
-```json
-{
-  "/__open-in-editor": {
-    "target": "http://localhost:4123",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/__open-in-editor-search": {
-    "target": "http://localhost:4123",
-    "secure": false,
-    "changeOrigin": true
-  },
-  "/__cmp-map": {
-    "target": "http://localhost:4123",
-    "secure": false,
-    "changeOrigin": true
-  }
-}
+```js
+module.exports = {
+  '/__open-in-editor': { target, secure: false, changeOrigin: true, headers },
+  '/__open-in-editor-search': { target, secure: false, changeOrigin: true, headers },
+  '/__cmp-map': { target, secure: false, changeOrigin: true, headers },
+};
 ```
 
 ## Environment Variable Priority
@@ -180,40 +181,28 @@ Example:
 
 ## Troubleshooting
 
-- **CORS / JSON parse error**: ensure dev server uses `--proxy-config {proxyConfigPath}`
-- **npm run shows "Unknown cli config --proxy-config"**: use `npm run start -- --proxy-config {proxyConfigPath}`
+- **CORS / JSON parse error**: ensure dev server uses `--proxy-config ngx-locatorjs.proxy.cjs`
+- **npm run shows "Unknown cli config --proxy-config"**: use `npm run start -- --proxy-config ngx-locatorjs.proxy.cjs`
 - **Network disabled**: pass `enableNetwork: true` to `installAngularLocator`
 - **component-map.json not found**: run `npx locatorjs-scan`
 - **Component changes not reflected**: run `npx locatorjs-open-in-editor --watch` or re-run `npx locatorjs-scan`
 - **Map is empty or missing components**: check `scan.includeGlobs` and rerun the scan
 - **Wrong files open or nothing matches**: confirm `workspaceRoot` points to the actual Angular app root
 - **No highlight / info is null**: make sure `http://localhost:${port}/__cmp-map` is loading and includes your component class name
-- **Port conflict**: change port in both `ngx-locatorjs.config.json` and `{proxyConfigPath}`
+- **Port conflict**: change `port` in `ngx-locatorjs.config.json` only
+- **401 Unauthorized from opener routes**: regenerate config/proxy (`npx locatorjs-config`) or pass `authToken` to `installAngularLocator` if you call the opener without Angular proxy headers
 
 ## Notes
 
 - Use only in development (guard with `environment.production`).
 - Network requests are opt-in and limited to localhost. Set `enableNetwork: true` to activate.
+- Opener server accepts files only inside `workspaceRoot` and binds to loopback by default.
 
 ## One-Command Dev (Recommended)
 
 Running the file-opener server and Angular dev server separately is tedious. You can wire them into a single script.
 
-### Option A: `concurrently`
-
-```bash
-npm i -D concurrently
-```
-
-```json
-{
-  "scripts": {
-    "dev:locator": "concurrently -k -n opener,ng \"npx locatorjs-open-in-editor\" \"ng serve --proxy-config {proxyConfigPath}\""
-  }
-}
-```
-
-### Option B: `npm-run-all`
+### `npm-run-all`
 
 ```bash
 npm i -D npm-run-all
@@ -223,7 +212,7 @@ npm i -D npm-run-all
 {
   "scripts": {
     "locator:opener": "npx locatorjs-open-in-editor",
-    "dev:app": "ng serve --proxy-config {proxyConfigPath}",
+    "dev:app": "ng serve --proxy-config ngx-locatorjs.proxy.cjs",
     "dev:locator": "run-p locator:opener dev:app"
   }
 }

package/dist/browser/index.d.ts

@@ -20,6 +20,7 @@ export type AngularLocatorOptions = {
     enableClick?: boolean;
     showTooltip?: boolean;
     showClickFeedback?: boolean;
+    authToken?: string;
     debug?: boolean;
 };
 declare function ensureMap(forceRefresh?: boolean): Promise<CmpMap>;

package/dist/browser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CAChD,CAAC;AAkBF,MAAM,MAAM,uBAAuB,GAAG;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA4EF,iBAAe,SAAS,CAAC,YAAY,UAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CA2B9D;AA+eD,wBAAsB,qBAAqB,CAAC,OAAO,GAAE,qBAA0B,iBAa9E;AAED,wBAAsB,mBAAmB,kBASxC;AAED,wBAAsB,mBAAmB,kBAExC;AAED,wBAAgB,yBAAyB,YAExC;AAED,eAAO,MAAM,SAAS;;CAErB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CAChD,CAAC;AAkBF,MAAM,MAAM,uBAAuB,GAAG;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA+FF,iBAAe,SAAS,CAAC,YAAY,UAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CA4B9D;AAmfD,wBAAsB,qBAAqB,CAAC,OAAO,GAAE,qBAA0B,iBAc9E;AAED,wBAAsB,mBAAmB,kBASxC;AAED,wBAAsB,mBAAmB,kBAExC;AAED,wBAAgB,yBAAyB,YAExC;AAED,eAAO,MAAM,SAAS;;CAErB,CAAC"}

package/dist/browser/index.js

@@ -11,6 +11,7 @@ const DEFAULT_OPTIONS = {
     enableClick: true,
     showTooltip: true,
     showClickFeedback: true,
+    authToken: null,
     debug: false,
 };
 let OPTIONS = DEFAULT_OPTIONS;
@@ -41,6 +42,22 @@ function assertNetworkAllowed(url) {
     }
     return resolved.toString();
 }
+function attachAuthToken(url) {
+    if (!OPTIONS.authToken)
+        return url;
+    const resolved = new URL(url, window.location.href);
+    if (!resolved.searchParams.has('token')) {
+        resolved.searchParams.set('token', OPTIONS.authToken);
+    }
+    return resolved.toString();
+}
+function getAuthHeaders() {
+    if (!OPTIONS.authToken)
+        return undefined;
+    return {
+        'x-locatorjs-token': OPTIONS.authToken,
+    };
+}
 function normalizeMap(map) {
     if (!map.filePathsByClassName || Object.keys(map.filePathsByClassName).length === 0) {
         const rebuilt = {};
@@ -59,12 +76,13 @@ async function ensureMap(forceRefresh = false) {
     if (CMP_MAP && !forceRefresh)
         return CMP_MAP;
     const timestamp = Date.now();
-    const res = await fetch(assertNetworkAllowed(`${OPTIONS.endpoints.componentMap}?t=${timestamp}`), {
+    const res = await fetch(attachAuthToken(assertNetworkAllowed(`${OPTIONS.endpoints.componentMap}?t=${timestamp}`)), {
         cache: 'no-store',
         headers: {
             'Cache-Control': 'no-cache, no-store, must-revalidate',
             Pragma: 'no-cache',
             Expires: '0',
+            ...getAuthHeaders(),
         },
     });
     const text = await res.text();
@@ -198,9 +216,9 @@ function getNearestComponent(el) {
     };
 }
 async function openFile(absPath, line = 1, col = 1) {
-    const url = assertNetworkAllowed(`${OPTIONS.endpoints.openInEditor}?file=${encodeURIComponent(absPath)}&line=${line}&col=${col}`);
+    const url = attachAuthToken(assertNetworkAllowed(`${OPTIONS.endpoints.openInEditor}?file=${encodeURIComponent(absPath)}&line=${line}&col=${col}`));
     try {
-        await fetch(url);
+        await fetch(url, { headers: getAuthHeaders() });
     }
     catch (e) {
         if (OPTIONS.debug) {
@@ -209,9 +227,9 @@ async function openFile(absPath, line = 1, col = 1) {
     }
 }
 async function openFileWithSearch(absPath, searchTerms) {
-    const url = assertNetworkAllowed(`${OPTIONS.endpoints.openInEditorSearch}?file=${encodeURIComponent(absPath)}&search=${encodeURIComponent(JSON.stringify(searchTerms))}`);
+    const url = attachAuthToken(assertNetworkAllowed(`${OPTIONS.endpoints.openInEditorSearch}?file=${encodeURIComponent(absPath)}&search=${encodeURIComponent(JSON.stringify(searchTerms))}`));
     try {
-        await fetch(url);
+        await fetch(url, { headers: getAuthHeaders() });
     }
     catch (e) {
         if (OPTIONS.debug) {
@@ -524,6 +542,7 @@ export async function installAngularLocator(options = {}) {
     const mergedOptions = {
         ...DEFAULT_OPTIONS,
         ...options,
+        authToken: options.authToken ?? DEFAULT_OPTIONS.authToken,
         endpoints: {
             ...DEFAULT_ENDPOINTS,
             ...options.endpoints,

package/dist/node/cmp-scan.js

@@ -4,19 +4,19 @@ import fs from 'fs';
 import path from 'path';
 import { glob } from 'glob';
 const DEFAULT_INCLUDE_GLOBS = [
-    'src/**/*.{ts,tsx}',
-    'projects/**/*.{ts,tsx}',
-    'apps/**/*.{ts,tsx}',
-    'libs/**/*.{ts,tsx}',
+    'src/**/*.{ts,tsx,js,jsx}',
+    'projects/**/*.{ts,tsx,js,jsx}',
+    'apps/**/*.{ts,tsx,js,jsx}',
+    'libs/**/*.{ts,tsx,js,jsx}',
 ];
 const DEFAULT_EXCLUDE_GLOBS = [
     '**/node_modules/**',
     '**/dist/**',
     '**/.angular/**',
     '**/coverage/**',
-    '**/*.spec.ts',
-    '**/*.test.ts',
-    '**/*.e2e.ts',
+    '**/*.spec.{ts,tsx,js,jsx}',
+    '**/*.test.{ts,tsx,js,jsx}',
+    '**/*.e2e.{ts,tsx,js,jsx}',
 ];
 const root = process.cwd();
 const CONFIG_FILENAME = 'ngx-locatorjs.config.json';
@@ -110,10 +110,31 @@ async function main() {
     fs.mkdirSync(outDir, { recursive: true });
     function loadCache() {
         try {
-            return JSON.parse(fs.readFileSync(cacheFile, 'utf8'));
+            const raw = JSON.parse(fs.readFileSync(cacheFile, 'utf8'));
+            if (!raw || typeof raw !== 'object')
+                return { version: 2, files: {} };
+            const typed = raw;
+            if (typed.version === 2 && typed.files && typeof typed.files === 'object') {
+                return {
+                    version: 2,
+                    files: typed.files,
+                };
+            }
+            // Backward compatibility for old cache shape: { [filePath]: mtimeMs }
+            const files = {};
+            for (const [filePath, mtime] of Object.entries(raw)) {
+                if (typeof mtime === 'number') {
+                    files[filePath] = {
+                        // Force one-time reparsing after legacy-cache migration.
+                        mtimeMs: -1,
+                        components: [],
+                    };
+                }
+            }
+            return { version: 2, files };
         }
         catch {
-            return {};
+            return { version: 2, files: {} };
         }
     }
     function saveCache(cache) {
@@ -144,19 +165,36 @@ async function main() {
     const filePaths = [...new Set(allFiles)];
     const currentStats = getFileStats(filePaths);
     const previousCache = loadCache();
-    const hasChanges = filePaths.some((filePath) => !previousCache[filePath] || previousCache[filePath] !== currentStats[filePath]);
-    const cachedPaths = Object.keys(previousCache);
-    const hasNewOrDeletedFiles = filePaths.length !== cachedPaths.length ||
-        filePaths.some((p) => !previousCache[p]) ||
-        cachedPaths.some((p) => !currentStats[p]);
-    if (!hasChanges && !hasNewOrDeletedFiles && fs.existsSync(outFile)) {
+    const previousFiles = previousCache.files;
+    const previousPaths = Object.keys(previousFiles);
+    const changedOrNewPaths = filePaths.filter((filePath) => {
+        const currentMtime = currentStats[filePath];
+        const cached = previousFiles[filePath];
+        return !cached || cached.mtimeMs !== currentMtime;
+    });
+    const deletedPaths = previousPaths.filter((cachedPath) => !currentStats[cachedPath]);
+    if (changedOrNewPaths.length === 0 && deletedPaths.length === 0 && fs.existsSync(outFile)) {
         process.exit(0);
     }
-    const detailByFilePath = {};
-    const filePathsByClassName = {};
+    const nextFiles = {};
     for (const filePath of filePaths) {
+        const previous = previousFiles[filePath];
+        const currentMtime = currentStats[filePath];
+        if (previous && previous.mtimeMs === currentMtime) {
+            nextFiles[filePath] = previous;
+            continue;
+        }
         const sourceCode = fs.readFileSync(filePath, 'utf8');
         const components = parseSourceFile(filePath, sourceCode);
+        nextFiles[filePath] = {
+            mtimeMs: currentMtime,
+            components,
+        };
+    }
+    const detailByFilePath = {};
+    const filePathsByClassName = {};
+    for (const entry of Object.values(nextFiles)) {
+        const components = entry.components;
         for (const cmp of components) {
             detailByFilePath[cmp.filePath] = cmp;
             if (!filePathsByClassName[cmp.className]) {
@@ -173,8 +211,11 @@ async function main() {
         filePathsByClassName,
     };
     fs.writeFileSync(outFile, JSON.stringify(out, null, 2));
-    saveCache(currentStats);
-    console.log(`[cmp-scan] ✅ Saved ${Object.keys(detailByFilePath).length} components to ${path.relative(root, outFile)}`);
+    saveCache({
+        version: 2,
+        files: nextFiles,
+    });
+    console.log(`[cmp-scan] ✅ Saved ${Object.keys(detailByFilePath).length} components to ${path.relative(root, outFile)} (updated ${changedOrNewPaths.length}, removed ${deletedPaths.length})`);
 }
 main().catch((err) => {
     console.error('[cmp-scan] Failed:', err);