{"id":15546530,"url":"https://github.com/joulev/analyse-client-components","last_synced_at":"2025-02-28T23:33:39.849Z","repository":{"id":209432539,"uuid":"724047908","full_name":"joulev/analyse-client-components","owner":"joulev","description":"Check whether a file is included in the client bundle or not for the Next.js App Router","archived":false,"fork":false,"pushed_at":"2023-11-27T09:41:48.000Z","size":14,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T18:38:26.883Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joulev.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-27T09:39:56.000Z","updated_at":"2024-12-17T06:31:41.000Z","dependencies_parsed_at":"2023-11-27T10:53:18.365Z","dependency_job_id":null,"html_url":"https://github.com/joulev/analyse-client-components","commit_stats":null,"previous_names":["joulev/analyse-client-components"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joulev%2Fanalyse-client-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joulev%2Fanalyse-client-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joulev%2Fanalyse-client-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joulev%2Fanalyse-client-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joulev","download_url":"https://codeload.github.com/joulev/analyse-client-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241275920,"owners_count":19937422,"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","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":[],"created_at":"2024-10-02T13:02:32.547Z","updated_at":"2025-02-28T23:33:39.829Z","avatar_url":"https://github.com/joulev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# analyse-client-components\n\nCheck whether a file is included in the client bundle or not for the Next.js App Router. **Only supports Next.js projects written with TypeScript!**\n\n```bash\nnpx @joulev/analyse-client-components@latest ./path/to/file...\n```\n\nFrom the root of the Next.js app (same folder as `package.json`), run the command for any files that are server components by default (e.g. `layout.tsx` and `page.tsx` files). You will get an output that looks like this (run on [this file](\u003chttps://github.com/joulev/website/blob/69bde83778b9d23d452d74bd995e54a0bc627696/src/app/(public)/(home)/page.tsx\u003e)):\n\n```\n$ npx @joulev/analyse-client-components@latest src/app/\\(public\\)/\\(home\\)/page.tsx\n\n  src/app/(public)/(home)/page.tsx\n    src/lib/cn.ts\n    src/app/(public)/(home)/page.module.css\n    src/components/ui/card.tsx\n      src/lib/cn.ts\n|   src/components/ui/lists.tsx\n|     src/lib/cn.ts\n|     src/components/ui/hooks/use-hover-background.ts\n|     src/types/utils.ts\n    src/components/ui/link.tsx\n      src/lib/cn.ts\n|   src/components/ui/button.tsx\n|     src/lib/cn.ts\n|     src/components/ui/hooks/use-hover-background.ts\n|     src/components/ui/link.tsx\n|       src/lib/cn.ts\n    src/app/(public)/(home)/get-github-readme.ts\n      src/app/(public)/(home)/octokit.ts\n        src/env.mjs\n    src/app/(public)/(home)/music-data.tsx\n      src/env.mjs\n      src/app/(public)/(home)/metadata-card.tsx\n|       src/components/ui/button.tsx\n|         src/lib/cn.ts\n|         src/components/ui/hooks/use-hover-background.ts\n|         src/components/ui/link.tsx\n|           src/lib/cn.ts\n    src/app/(public)/(home)/github-stats.tsx\n      src/app/(public)/(home)/octokit.ts\n        src/env.mjs\n      src/app/(public)/(home)/metadata-card.tsx\n|       src/components/ui/button.tsx\n|         src/lib/cn.ts\n|         src/components/ui/hooks/use-hover-background.ts\n|         src/components/ui/link.tsx\n|           src/lib/cn.ts\n```\n\nFiles starting with the `|` are imported to at least one file with `\"use client\"` hence will be added to the client bundle. Other files are not added to the client bundle.\n\nFor example in the above, since `src/lib/cn.ts` has at least one entry with the `|`, it is available in the client bundle for `src/app/(public)/(home)/page.tsx`, whlie `src/app/(public)/(home)/music-data.tsx` doesn't have any entries with the `|`, the logic in that file stays in the server.\n\n## Installation and usage\n\n### Run directly with `npx` and similar commands (recommended)\n\nAs shown above, you can run it directly with\n\n```bash\nnpx @joulev/analyse-client-components@latest ./path/to/file...\n# or yarn dlx or pnpx\n```\n\n### Install globally\n\n```bash\nnpm install -g @joulev/analyse-client-components\n\n# then\nanalyse-client-components ./path/to/file...\n# or\nacc ./path/to/file...\n```\n\n### Install locally\n\n```bash\nnpm install --save-dev @joulev/analyse-client-components\n```\n\nthen add the CLI to `package.json` scripts:\n\n```js\n{\n  \"scripts\": {\n    \"acc\": \"acc\"\n    // other scripts, like \"build\": \"next build\"\n  }\n}\n```\n\nthen run `npm run acc` or similar commands.\n\n```bash\nnpm run acc -- ./path/to/file...\n```\n\n## Programmatical usage\n\nNo.\n\nOnly use this as a CLI tool.\n\n## Notes\n\nThis is a project I finished in like one hour or two. It is very minimal and assumes the user uses it exactly according to the guide above (namely, it is run in the root of the Next.js app, it references a file that Next.js treats as a server component by default). There is no error handling here, I made this mainly for my own use so I'm too lazy to add sufficient error handlings. So yes, this tool could work but also could blow up if you use it in any ways not described in the guide above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoulev%2Fanalyse-client-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoulev%2Fanalyse-client-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoulev%2Fanalyse-client-components/lists"}