ngx-locatorjs 0.4.0 → 0.5.1

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/)에서 영감을 받았습니다.
 
 **기능**
 
@@ -10,6 +10,10 @@
 - Alt 키 홀드: 컴포넌트 하이라이트 + 툴팁 표시
 - Antigravity IDE, Cursor, Zed, VS Code, WebStorm 지원
 
+**Angular 버전 지원**
+
+지원 범위: **Angular 15~22**
+
 **필수 단계 (1~4 반드시 수행)**
 
 1. 패키지 설치: `npm i -D ngx-locatorjs`
@@ -109,19 +113,19 @@ bootstrapApplication(AppComponent, appConfig)
   "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}"
     ]
   }
 }
@@ -138,14 +142,27 @@ bootstrapApplication(AppComponent, appConfig)
 - `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}"]`
 
 **환경변수 우선순위**
 

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
@@ -19,6 +20,10 @@ Inspired by [locatorjs.com](https://www.locatorjs.com/).
 - **Hold Alt**: highlight component + tooltip
 - Supports **Antigravity IDE**, **Cursor**, **Zed**, **VS Code**, **WebStorm**
 
+## Angular Version Support
+
+Tested support: **Angular 15–22**.
+
 ## Install
 
 ```bash
@@ -109,19 +114,19 @@ Example:
   "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}"
     ]
   }
 }
@@ -138,11 +143,24 @@ Example:
 - `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}"`
+- Angular workspace: `"projects/**/*.{ts,tsx,js,jsx}"`
+- Nx: `"apps/**/*.{ts,tsx,js,jsx}", "libs/**/*.{ts,tsx,js,jsx}"`
 
 ## Proxy (`ngx-locatorjs.proxy.cjs`)
 

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';
@@ -56,16 +56,20 @@ function extractTemplateUrl(node) {
     }
     return undefined;
 }
+function getDecorators(node) {
+    const modernTs = ts;
+    if (modernTs.canHaveDecorators?.(node) && modernTs.getDecorators) {
+        return modernTs.getDecorators(node) ?? [];
+    }
+    const legacyNode = node;
+    return legacyNode.decorators ?? legacyNode.modifiers?.filter(ts.isDecorator) ?? [];
+}
 function findComponentDecorator(node) {
-    if (!node.modifiers)
-        return undefined;
-    for (const modifier of node.modifiers) {
-        if (ts.isDecorator(modifier)) {
-            const expr = modifier.expression;
-            if (ts.isCallExpression(expr) && ts.isIdentifier(expr.expression)) {
-                if (expr.expression.text === 'Component') {
-                    return modifier;
-                }
+    for (const decorator of getDecorators(node)) {
+        const expr = decorator.expression;
+        if (ts.isCallExpression(expr) && ts.isIdentifier(expr.expression)) {
+            if (expr.expression.text === 'Component') {
+                return decorator;
             }
         }
     }

package/dist/node/config-setup.js

@@ -10,6 +10,20 @@ const __dirname = path.dirname(__filename);
 const root = process.cwd();
 const CONFIG_FILENAME = 'ngx-locatorjs.config.json';
 const PROXY_FILENAME = 'ngx-locatorjs.proxy.cjs';
+const ANSI_ENABLED = Boolean(process.stdout.isTTY);
+const IGNORED_SCAN_DIR_NAMES = new Set([
+    'node_modules',
+    'dist',
+    'coverage',
+    '.angular',
+    '.git',
+    '.nx',
+    '.turbo',
+    '.cache',
+    'build',
+    'out',
+    'tmp',
+]);
 const configPath = path.resolve(root, CONFIG_FILENAME);
 const proxyConfigPath = resolveProxyConfigPath();
 console.log('🚀 LocatorJs (Open-in-Editor) Configuration Setup\n');
@@ -287,28 +301,280 @@ function selectEditor() {
         process.stdin.on('data', handleKeypress);
     });
 }
-function promptScanSettings() {
+async function promptScanSettings() {
     const defaultInclude = [
-        '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 defaultExclude = [
         '**/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}',
     ];
-    console.log('\n📂 Scan settings (using defaults):');
-    console.log(`   → Include: ${JSON.stringify(defaultInclude)}`);
-    console.log(`   → Exclude: ${JSON.stringify(defaultExclude)}`);
-    console.log(`   💡 You can modify these later in ${CONFIG_FILENAME}`);
-    return Promise.resolve({
-        includeGlobs: defaultInclude,
-        excludeGlobs: defaultExclude,
+    const includeGlobs = detectIncludeGlobs(defaultInclude);
+    const excludeGlobs = detectExcludeGlobs(defaultExclude);
+    printScanSettingsSummary(includeGlobs, excludeGlobs);
+    return {
+        includeGlobs: includeGlobs.values,
+        excludeGlobs: excludeGlobs.values,
+    };
+}
+function detectIncludeGlobs(defaultInclude) {
+    const sources = [];
+    let detectedBaseDirs = detectIncludeBaseDirsFromAngularJson();
+    if (detectedBaseDirs.size > 0) {
+        sources.push('angular.json');
+        const supplemental = detectSupplementalWorkspaceBaseDirs(detectedBaseDirs);
+        if (supplemental.size > 0) {
+            supplemental.forEach((dir) => detectedBaseDirs.add(dir));
+            sources.push('workspace directories (not declared in angular.json)');
+        }
+    }
+    else {
+        detectedBaseDirs = detectIncludeBaseDirsFromConventionalLayout();
+        if (detectedBaseDirs.size > 0) {
+            sources.push('existing directories');
+        }
+    }
+    if (detectedBaseDirs.size > 0) {
+        return {
+            values: toGlobPatterns(detectedBaseDirs),
+            autoDetected: true,
+            sources,
+        };
+    }
+    return {
+        values: defaultInclude,
+        autoDetected: false,
+        sources: [],
+    };
+}
+function detectExcludeGlobs(defaultExclude) {
+    const extraExcludeCandidates = [
+        { pattern: '**/.nx/**', reason: 'nx.json', when: fileExists('nx.json') },
+        { pattern: '**/.turbo/**', reason: 'turbo.json', when: fileExists('turbo.json') },
+        { pattern: '**/.cache/**', reason: '.cache directory', when: directoryExists('.cache') },
+        { pattern: '**/build/**', reason: 'build directory', when: directoryExists('build') },
+        { pattern: '**/out/**', reason: 'out directory', when: directoryExists('out') },
+        { pattern: '**/tmp/**', reason: 'tmp directory', when: directoryExists('tmp') },
+    ];
+    const values = [...defaultExclude];
+    const reasons = [];
+    for (const candidate of extraExcludeCandidates) {
+        if (!candidate.when)
+            continue;
+        if (!values.includes(candidate.pattern)) {
+            values.push(candidate.pattern);
+            reasons.push(`${candidate.pattern} (${candidate.reason})`);
+        }
+    }
+    return {
+        values,
+        autoDetected: reasons.length > 0,
+        sources: reasons,
+    };
+}
+function detectIncludeBaseDirsFromAngularJson() {
+    const angularJsonPath = path.resolve(root, 'angular.json');
+    if (!fs.existsSync(angularJsonPath))
+        return new Set();
+    try {
+        const angularJson = JSON.parse(fs.readFileSync(angularJsonPath, 'utf8'));
+        const projects = angularJson?.projects ?? {};
+        const detectedBaseDirs = new Set();
+        for (const project of Object.values(projects)) {
+            const sourceRoot = normalizeRelativePath(project.sourceRoot);
+            const projectRoot = normalizeRelativePath(project.root);
+            if (sourceRoot && directoryExists(sourceRoot)) {
+                detectedBaseDirs.add(sourceRoot);
+                continue;
+            }
+            if (!projectRoot)
+                continue;
+            const srcUnderProjectRoot = normalizeRelativePath(path.posix.join(projectRoot, 'src'));
+            if (srcUnderProjectRoot && directoryExists(srcUnderProjectRoot)) {
+                detectedBaseDirs.add(srcUnderProjectRoot);
+            }
+            else if (directoryExists(projectRoot)) {
+                detectedBaseDirs.add(projectRoot);
+            }
+        }
+        return detectedBaseDirs;
+    }
+    catch {
+        return new Set();
+    }
+}
+function detectIncludeBaseDirsFromConventionalLayout() {
+    const conventionalDirs = ['src', 'projects', 'apps', 'libs'];
+    const detectedBaseDirs = new Set();
+    for (const dir of conventionalDirs) {
+        if (directoryExists(dir)) {
+            detectedBaseDirs.add(dir);
+        }
+    }
+    return detectedBaseDirs;
+}
+function detectSupplementalWorkspaceBaseDirs(knownBaseDirs) {
+    const roots = ['projects', 'apps', 'libs'];
+    const supplemental = new Set();
+    for (const rootDir of roots) {
+        const rootPath = path.resolve(root, rootDir);
+        if (!directoryExists(rootDir))
+            continue;
+        let entries;
+        try {
+            entries = fs.readdirSync(rootPath, { withFileTypes: true });
+        }
+        catch {
+            continue;
+        }
+        for (const entry of entries) {
+            if (!entry.isDirectory())
+                continue;
+            const candidate = normalizeRelativePath(path.posix.join(rootDir, entry.name));
+            if (!candidate)
+                continue;
+            if (isCoveredByKnownBaseDirs(candidate, knownBaseDirs))
+                continue;
+            if (!directoryContainsScanCandidateFiles(candidate))
+                continue;
+            supplemental.add(candidate);
+        }
+    }
+    return supplemental;
+}
+function isCoveredByKnownBaseDirs(candidate, knownBaseDirs) {
+    for (const known of knownBaseDirs) {
+        if (candidate === known)
+            return true;
+        if (candidate.startsWith(`${known}/`))
+            return true;
+        if (known.startsWith(`${candidate}/`))
+            return true;
+    }
+    return false;
+}
+function directoryContainsScanCandidateFiles(relPath, maxDepth = 6) {
+    const absolute = path.resolve(root, relPath);
+    return directoryContainsScanCandidateFilesRecursive(absolute, 0, maxDepth);
+}
+function directoryContainsScanCandidateFilesRecursive(absolutePath, currentDepth, maxDepth) {
+    let entries;
+    try {
+        entries = fs.readdirSync(absolutePath, { withFileTypes: true });
+    }
+    catch {
+        return false;
+    }
+    for (const entry of entries) {
+        if (entry.isFile() && /\.(ts|tsx|js|jsx)$/.test(entry.name)) {
+            return true;
+        }
+        if (!entry.isDirectory())
+            continue;
+        if (currentDepth >= maxDepth)
+            continue;
+        if (IGNORED_SCAN_DIR_NAMES.has(entry.name))
+            continue;
+        const childPath = path.join(absolutePath, entry.name);
+        if (directoryContainsScanCandidateFilesRecursive(childPath, currentDepth + 1, maxDepth)) {
+            return true;
+        }
+    }
+    return false;
+}
+function toGlobPatterns(baseDirs) {
+    if (baseDirs.size === 0)
+        return [];
+    const preferredOrder = ['src', 'projects', 'apps', 'libs'];
+    return Array.from(baseDirs)
+        .sort((a, b) => {
+        const aIdx = preferredOrder.indexOf(a);
+        const bIdx = preferredOrder.indexOf(b);
+        const aRank = aIdx === -1 ? Number.MAX_SAFE_INTEGER : aIdx;
+        const bRank = bIdx === -1 ? Number.MAX_SAFE_INTEGER : bIdx;
+        if (aRank !== bRank)
+            return aRank - bRank;
+        return a.localeCompare(b);
+    })
+        .map((baseDir) => `${baseDir}/**/*.{ts,tsx,js,jsx}`);
+}
+function normalizeRelativePath(value) {
+    if (!value)
+        return null;
+    const normalized = value
+        .trim()
+        .replace(/\\/g, '/')
+        .replace(/^\.\/+/, '')
+        .replace(/^\/+/, '')
+        .replace(/\/+$/, '');
+    return normalized.length > 0 ? normalized : null;
+}
+function directoryExists(relPath) {
+    try {
+        const stat = fs.statSync(path.resolve(root, relPath));
+        return stat.isDirectory();
+    }
+    catch {
+        return false;
+    }
+}
+function fileExists(relPath) {
+    try {
+        const stat = fs.statSync(path.resolve(root, relPath));
+        return stat.isFile();
+    }
+    catch {
+        return false;
+    }
+}
+function colorize(text, code) {
+    if (!ANSI_ENABLED)
+        return text;
+    return `\x1b[${code}m${text}\x1b[0m`;
+}
+function bold(text) {
+    return colorize(text, '1');
+}
+function cyan(text) {
+    return colorize(text, '36');
+}
+function green(text) {
+    return colorize(text, '32');
+}
+function yellow(text) {
+    return colorize(text, '33');
+}
+function dim(text) {
+    return colorize(text, '2');
+}
+function printScanSettingsSummary(includeGlobs, excludeGlobs) {
+    const mode = includeGlobs.autoDetected ? 'AUTO-DETECTED' : 'DEFAULTS';
+    console.log(`\n${bold(cyan('Scan Settings Applied'))} ${dim(`[${mode}]`)}`);
+    console.log(dim('────────────────────────────────────────────'));
+    console.log(`${bold(green('Include globs'))}:`);
+    includeGlobs.values.forEach((value) => {
+        console.log(`  ${green('•')} ${value}`);
     });
+    console.log(`\n${bold(yellow('Exclude globs'))}:`);
+    excludeGlobs.values.forEach((value) => {
+        console.log(`  ${yellow('•')} ${value}`);
+    });
+    if (includeGlobs.autoDetected) {
+        console.log(`\n${bold('Detected from')}: ${includeGlobs.sources.join(', ')}`);
+    }
+    if (excludeGlobs.autoDetected) {
+        console.log(`${bold('Auto-added excludes')}:`);
+        excludeGlobs.sources.forEach((value) => {
+            console.log(`  ${yellow('•')} ${value}`);
+        });
+    }
+    console.log(`\n${dim(`Edit scan globs anytime in ${CONFIG_FILENAME}`)}`);
 }

package/dist/node/file-opener.js

@@ -21,10 +21,10 @@ function isErrnoException(error) {
     return typeof error === 'object' && error !== null && 'code' in error;
 }
 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 cfg = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 const WATCH_ENABLED = process.argv.includes('--watch') || process.argv.includes('-w');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-locatorjs",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "LocatorJs open-in-editor tools for Angular projects",
   "keywords": [
     "angular",
@@ -51,6 +51,7 @@
     "prepare": "npm run build",
     "test": "node --test",
     "test:ci": "npm run build && npm test",
+    "test:angular:e2e": "node scripts/angular-e2e-matrix.mjs",
     "format": "oxfmt",
     "format:check": "oxfmt --check",
     "publish:github": "node scripts/publish-github.mjs"
@@ -61,6 +62,7 @@
   "devDependencies": {
     "@types/node": "^18.18.0",
     "oxfmt": "^0.35.0",
+    "playwright": "^1.61.0",
     "typescript": "^5.5.4"
   }
 }