{"id":13599983,"url":"https://github.com/mizchi/tsx-source-jump","last_synced_at":"2025-10-14T21:36:06.908Z","repository":{"id":137924111,"uuid":"441940342","full_name":"mizchi/tsx-source-jump","owner":"mizchi","description":"Jump from the HTML element to the source code of the generator","archived":false,"fork":false,"pushed_at":"2021-12-26T17:13:25.000Z","size":68,"stargazers_count":48,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-28T08:45:34.436Z","etag":null,"topics":["react","typescript","vite","vscode"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mizchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-12-26T16:52:57.000Z","updated_at":"2024-12-26T10:33:38.000Z","dependencies_parsed_at":"2024-01-14T04:50:14.833Z","dependency_job_id":"7661f10f-e047-4a0a-9ac0-679d4340fc74","html_url":"https://github.com/mizchi/tsx-source-jump","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mizchi/tsx-source-jump","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Ftsx-source-jump","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Ftsx-source-jump/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Ftsx-source-jump/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Ftsx-source-jump/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mizchi","download_url":"https://codeload.github.com/mizchi/tsx-source-jump/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Ftsx-source-jump/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279021374,"owners_count":26087023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","typescript","vite","vscode"],"created_at":"2024-08-01T17:01:23.127Z","updated_at":"2025-10-14T21:36:06.893Z","avatar_url":"https://github.com/mizchi.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# tsx-source-jump\n\nJump from the HTML element to the source code of the generator.\n\n![](https://i.gyazo.com/c003c81e7817d93367b26af8c64dcf65.gif)\n\n## How it works\n\n- Vite plugin to embed source location\n- Overlay ui\n- Open `vscode://file/...` to jump\n\n## How to use\n\n### Install\n\n```bash\nyarn add tsx-source-jump -D\n```\n\n### Vite\n\n```ts\n// vite.config.ts\nimport react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\nimport { tsxSourceJump } from \"tsx-source-jump/vite\";\n\nexport default defineConfig({\n  plugins: [\n    // DO NOT INCLUDE IN PRODUCTION\n    ...(process.env.NODE_ENV !== \"production\"\n      ? [\n          tsxSourceJump({\n            // your projectRoot\n            projectRoot: __dirname + \"/\",\n            // rewriting element target\n            target: [/^[a-z]+$/],\n          }),\n        ]\n      : []),\n    react(),\n  ],\n});\n```\n\n(Current `tsx-source-jump` rewrites `.tsx` to `.tsx` to work with any ts compiler (tsc, esbuild, swc). It may causes performance problem)\n\n### Mount Overlay\n\n```tsx\n// entrypoint\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { App } from \"./App\";\nimport { SourceJumpOverlayPortal } from \"tsx-source-jump/runtime\";\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cSourceJumpOverlayPortal /\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n### Jump!\n\n- Enter your vite app (`http://localhost:3000`)\n- Press `Shift` and move cursor to element you want to open\n- Click element path\n\n### with primitive dom wrapper like charkra-ui / react-native-elements ...\n\n`tsx-source-jump` adds `data-sj-path=\"...\"` for `target` options.\n\n```ts\n// vite.config.ts\ntsxSourceJump({\n  projectRoot: __dirname + \"/\",\n  target: [\n    // default target: div, main, span...\n    /^[a-z]+$/,\n    // Additional targets for chakra-ui\n    /^(Box|Flex|Center|Container|Grid|SimpleGrid|Stack|Wrap|Button|Link|Icon|Image)$/,\n  ],\n});\n```\n\nTargeted elements should pass `data-sj-*` to raw elements.\n\n## How it works internal\n\n`tsx-source-jump/vite`'s typescript transformer adds `data-sj-*` as props.\n\n```tsx\n// from\n\u003cdiv\u003e\n  xxx\n\u003c/div\u003e\n\n// to\n\u003cdiv data-sj-path=\"...\" data-sj-display-name=\"...\"\u003e\n  xxx\n\u003c/div\u003e\n```\n\nIn browser, `SourceJumpOverlayPortal` component catches `mouseover` events and overlay ui.\n\n## TODO\n\n- [ ] Support other framework\n- [ ] Support swc, babel\n- [ ] Lightweight runtime (preact)\n- [ ] Inline Code Editor\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizchi%2Ftsx-source-jump","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmizchi%2Ftsx-source-jump","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizchi%2Ftsx-source-jump/lists"}