{"_id":"@donghyunhwang/angular-click-to-source","name":"@donghyunhwang/angular-click-to-source","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@donghyunhwang/angular-click-to-source","version":"1.0.0","description":"Angular 개발자 도구 - Alt+클릭으로 컴포넌트 파일 열기","main":"dist/index.js","types":"dist/index.d.ts","bin":{"ng-click-to-source":"bin/cli.js","setup-click-to-source":"bin/setup.js"},"scripts":{"build":"tsc","dev":"tsc --watch","prepublishOnly":"npm run build","test":"jest","clean":"rimraf dist","postinstall":"node scripts/post-install.js"},"keywords":["angular","developer-tools","click-to-source","development","debugging"],"author":{"name":"donghyunhwang"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/donghyun/angular-click-to-source.git"},"dependencies":{"express":"^4.18.2","ts-morph":"^20.0.0","chokidar":"^3.5.3"},"devDependencies":{"@types/express":"^4.17.17","@types/node":"^20.0.0","typescript":"^5.0.0","jest":"^29.0.0","@types/jest":"^29.0.0","rimraf":"^5.0.0"},"peerDependencies":{"@angular/core":">=15.0.0"},"engines":{"node":">=16.0.0"},"_id":"@donghyunhwang/angular-click-to-source@1.0.0","bugs":{"url":"https://github.com/donghyun/angular-click-to-source/issues"},"homepage":"https://github.com/donghyun/angular-click-to-source#readme","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-xq4KTyMyfHcDSfCleRMhZIbbtMDAd1gNWi2DyNAy7AfJZ+UDOeC39+N/JL56SchVIOlOjHhCBiriIu9DdOgbBQ==","shasum":"a05b7b2a159fc952d5e566207f354b289d62bd68","tarball":"https://registry.npmjs.org/@donghyunhwang/angular-click-to-source/-/angular-click-to-source-1.0.0.tgz","fileCount":17,"unpackedSize":61936,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDnDbnQiCVEtjWI/5VVlgWvCyeUOp1g3Z9akMpFMzy/AAIhAKzcrYyTkk5V64ZYYHUYIfvckdeFTyg06/ZXRY9k3keg"}]},"_npmUser":{"name":"donghyunhwang","email":"donghyun.hwang@teamultra.co"},"directories":{},"maintainers":[{"name":"donghyunhwang","email":"donghyun.hwang@teamultra.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angular-click-to-source_1.0.0_1758709505420_0.8175655250247418"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-24T10:25:05.333Z","1.0.0":"2025-09-24T10:25:05.584Z","modified":"2025-09-24T10:25:05.843Z"},"maintainers":[{"name":"donghyunhwang","email":"donghyun.hwang@teamultra.co"}],"description":"Angular 개발자 도구 - Alt+클릭으로 컴포넌트 파일 열기","homepage":"https://github.com/donghyun/angular-click-to-source#readme","keywords":["angular","developer-tools","click-to-source","development","debugging"],"repository":{"type":"git","url":"git+https://github.com/donghyun/angular-click-to-source.git"},"author":{"name":"donghyunhwang"},"bugs":{"url":"https://github.com/donghyun/angular-click-to-source/issues"},"license":"MIT","readme":"# Angular Click-to-Source\n\n> Alt+클릭으로 Angular 컴포넌트 파일을 바로 열어주는 개발자 도구\n\n![Demo](https://via.placeholder.com/600x300/007acc/white?text=Alt+Click+Demo)\n\n## ✨ 기능\n\n- **🎯 Alt+클릭**: 컴포넌트 TypeScript 파일 열기\n- **🔍 Shift+Alt+클릭**: 템플릿 파일의 정확한 위치로 이동\n- **💡 시각적 피드백**: Alt 키를 누르면 컴포넌트 하이라이트 및 툴팁 표시\n- **🔧 멀티 에디터 지원**: Cursor, VSCode, WebStorm 자동 감지\n- **⚡ 성능 최적화**: 파일 변경 감지 캐시, debounce, 스마트 스캔\n- **🔗 프록시 통합**: Angular dev server와 완전 통합\n\n## 📦 설치\n\n```bash\nnpm install --save-dev angular-click-to-source\n```\n\n## 🚀 빠른 시작\n\n### 1. 자동 설정\n\n```bash\nnpx setup-click-to-source\n```\n\n### 2. 수동 설정\n\n```bash\n# 프로젝트 설정\nng-click-to-source setup\n\n# 서버 시작\nnpm run dev:click-to-source\n\n# Angular 개발 서버 시작 (프록시와 함께)\nng serve --proxy-config proxy.conf.json\n```\n\n### 3. 클라이언트 코드 추가\n\n`src/main.ts`에 다음 코드를 추가하세요:\n\n```typescript\nimport { environment } from './environments/environment';\n\nif (!environment.production) {\n  import('./click-to-source').catch(console.error);\n}\n```\n\n## 📋 사용법\n\n### 기본 사용법\n\n1. **Alt 키를 누르고 있으면** 컴포넌트들이 하이라이트됩니다\n2. **Alt + 클릭**: 컴포넌트의 TypeScript 파일이 에디터에서 열립니다\n3. **Shift + Alt + 클릭**: 템플릿 파일의 정확한 위치로 이동합니다\n\n### 지원하는 에디터\n\n- **Cursor** (기본값)\n- **VS Code**\n- **WebStorm/IntelliJ IDEA**\n- **커스텀 에디터** (환경변수로 설정)\n\n### 환경변수 설정\n\n```bash\n# 커스텀 에디터 명령어\nexport EDITOR_CMD=\"cursor --goto\"\n\n# 또는 WebStorm\nexport EDITOR_CMD=\"webstorm\"\n```\n\n## ⚙️ 설정\n\n### click-to-source.config.json\n\n```json\n{\n  \"server\": {\n    \"port\": 4123,\n    \"editor\": {\n      \"defaultEditor\": \"cursor\",\n      \"fallbackEditor\": \"code\"\n    },\n    \"scanner\": {\n      \"includeGlobs\": [\"src/**/*.{ts,tsx}\", \"projects/**/*.{ts,tsx}\"],\n      \"excludeGlobs\": [\"**/node_modules/**\", \"**/dist/**\", \"**/.angular/**\"],\n      \"enableWatch\": true\n    }\n  },\n  \"client\": {\n    \"endpoint\": \"/__click-to-source\",\n    \"enabled\": true,\n    \"highlightColor\": \"#007acc\"\n  }\n}\n```\n\n### 프록시 설정 (proxy.conf.json)\n\n```json\n{\n  \"/__click-to-source/*\": {\n    \"target\": \"http://localhost:4123\",\n    \"secure\": false,\n    \"changeOrigin\": true,\n    \"logLevel\": \"info\"\n  }\n}\n```\n\n## 🛠 CLI 명령어\n\n```bash\n# 도움말\nng-click-to-source help\n\n# 프로젝트 설정\nng-click-to-source setup [--force] [--skip-deps]\n\n# 개발 서버 시작\nng-click-to-source server\n\n# 컴포넌트 스캔\nng-click-to-source scan\n```\n\n## 📚 API 문서\n\n### 클라이언트 API\n\n```typescript\nimport { AngularClickToSource, autoInstall } from 'angular-click-to-source';\n\n// 수동 설치\nconst clickToSource = new AngularClickToSource({\n  endpoint: '/__click-to-source',\n  enabled: true,\n  highlightColor: '#007acc'\n});\n\nawait clickToSource.install();\n\n// 자동 설치 (개발 환경에서만)\nautoInstall({\n  enabled: !environment.production\n});\n```\n\n### 서버 API\n\n```typescript\nimport { ClickToSourceServer } from 'angular-click-to-source';\n\nconst server = new ClickToSourceServer({\n  port: 4123,\n  editor: {\n    defaultEditor: 'cursor',\n    fallbackEditor: 'code'\n  }\n});\n\nawait server.start();\n```\n\n## 🔧 고급 설정\n\n### 커스텀 에디터 설정\n\n```json\n{\n  \"server\": {\n    \"editor\": {\n      \"defaultEditor\": \"cursor\",\n      \"editors\": {\n        \"my-editor\": \"(file) => ['my-editor', ['--open', file]]\"\n      }\n    }\n  }\n}\n```\n\n### 스캔 설정 커스터마이징\n\n```json\n{\n  \"server\": {\n    \"scanner\": {\n      \"includeGlobs\": [\"src/**/*.ts\", \"libs/**/*.ts\"],\n      \"excludeGlobs\": [\"**/*.spec.ts\", \"**/*.stories.ts\"],\n      \"enableWatch\": true\n    }\n  }\n}\n```\n\n## 🚨 트러블슈팅\n\n### 에디터가 열리지 않아요\n\n1. **PATH 확인**: 에디터가 PATH에 등록되어 있는지 확인\n2. **권한 확인**: CLI 도구가 설치되어 있는지 확인\n3. **환경변수 설정**: `EDITOR_CMD`로 직접 명령어 지정\n\n```bash\n# Cursor CLI 설치 확인\nwhich cursor\n\n# VS Code CLI 설치 확인  \nwhich code\n\n# WebStorm CLI 설치 확인\nwhich webstorm\n```\n\n### 컴포넌트가 인식되지 않아요\n\n1. **스캔 실행**: `ng-click-to-source scan`\n2. **설정 확인**: `includeGlobs`가 올바른지 확인\n3. **캐시 초기화**: `.click-to-source` 폴더 삭제 후 재스캔\n\n### 프록시가 작동하지 않아요\n\n1. **포트 확인**: 서버가 올바른 포트에서 실행 중인지 확인\n2. **프록시 설정**: `proxy.conf.json`이 올바른지 확인\n3. **Angular CLI**: `--proxy-config` 옵션으로 서버 시작\n\n## 🎨 커스터마이징\n\n### 하이라이트 스타일 변경\n\n```typescript\nautoInstall({\n  highlightColor: '#ff6b6b',\n  tooltipStyle: {\n    backgroundColor: '#333',\n    color: '#fff',\n    fontSize: '14px'\n  }\n});\n```\n\n### 템플릿 검색 알고리즘 조정\n\n서버 설정에서 검색 가중치를 조정할 수 있습니다:\n\n```typescript\nconst server = new ClickToSourceServer({\n  search: {\n    weights: {\n      exactMatch: 3,\n      wordBoundary: 2,\n      startsWith: 1.5,\n      contains: 1\n    }\n  }\n});\n```\n\n## 🤝 기여하기\n\n1. 이 저장소를 포크하세요\n2. 기능 브랜치를 생성하세요 (`git checkout -b feature/amazing-feature`)\n3. 변경사항을 커밋하세요 (`git commit -m 'Add amazing feature'`)\n4. 브랜치에 푸시하세요 (`git push origin feature/amazing-feature`)\n5. Pull Request를 생성하세요\n\n## 📄 라이선스\n\n이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.\n\n## 🙏 감사의 말\n\n이 도구는 개발자 경험 개선을 위해 만들어졌습니다. Angular 개발을 더욱 즐겁게 만들어주는 도구가 되기를 바랍니다.\n\n---\n\n<div align=\"center\">\n  <sub>Built with ❤️ for Angular developers</sub>\n</div>\n","readmeFilename":"README.md","_rev":"1-bf5d3a4d7dffc6349a9ffdd13f335445"}