{"id":24369912,"url":"https://github.com/vastec/ember-unused-components","last_synced_at":"2025-04-10T17:25:41.549Z","repository":{"id":48313359,"uuid":"133800101","full_name":"vastec/ember-unused-components","owner":"vastec","description":"Search for unused components in your Ember project","archived":false,"fork":false,"pushed_at":"2024-05-07T15:33:37.000Z","size":29980,"stargazers_count":51,"open_issues_count":30,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T15:04:30.713Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vastec.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-17T10:51:54.000Z","updated_at":"2024-05-07T15:33:33.000Z","dependencies_parsed_at":"2024-06-18T19:48:32.848Z","dependency_job_id":"7de18422-b55b-4695-af0a-d59beca2a97a","html_url":"https://github.com/vastec/ember-unused-components","commit_stats":{"total_commits":133,"total_committers":8,"mean_commits":16.625,"dds":0.443609022556391,"last_synced_commit":"577e7b4e844a02a09a96ecae6b2038e6fe94e116"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vastec%2Fember-unused-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vastec%2Fember-unused-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vastec%2Fember-unused-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vastec%2Fember-unused-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vastec","download_url":"https://codeload.github.com/vastec/ember-unused-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247847609,"owners_count":21006099,"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":"2025-01-19T04:10:58.722Z","updated_at":"2025-04-10T17:25:41.523Z","avatar_url":"https://github.com/vastec.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["Tools"],"readme":"[![npm version](https://badge.fury.io/js/ember-unused-components.svg)](https://badge.fury.io/js/ember-unused-components)\n[![Build Status](https://travis-ci.org/vastec/ember-unused-components.svg?branch=master)](https://travis-ci.org/vastec/ember-unused-components)\n\nember-unused-components\n==============================================================================\n\nThis script searches for unused components in your Ember project. It supports:\n - classic structure,\n - POD structure,\n - Module Unification structure,\n - `{{curly-braces}}` syntax,\n - `\u003cAngleBrackets\u003e` syntax (also nested ones like `\u003cAngle::MyBrackets\u003e`),\n - `ember-light-table`'s way of defining `cellComponent: 'component-name'` and `component: 'component-name'`\n - `(component \"component-name\")` helper used in templates\n - ignoring files,\n - whitelisting components unused temporary,\n - addons,\n - and components being used in addons with `--includeAddons` option.\n\nIt also has a very interesting statistics module.\n\nInstallation\n------------------------------------------------------------------------------\n\n```bash\n$ yarn add -D ember-unused-components\n```\n\nor\n\n```bash\n$ npm install ember-unused-components --save-dev\n```\n\nUsage\n------------------------------------------------------------------------------\n\nRun in your app root directory:\n\n```bash\n$ ./node_modules/.bin/ember-unused-components\n```\n\nor\n\n```bash\n$ npx ember-unused-components\n```\n\nExpected output (simplified):\n\n```bash\n\n No. of components: 277\n No. of unused components: 2 (7.22%)\n\n Unused components:\n  - app/app-tab-panel\n  - user/user-birthday\n```\n\nIf you feel like there are too many components listed then check [Configuration Section](#configuration).\n\n#### Stats\n\nMake sure to try optional parameter `--stats` so you'll see some interesting stuff:\n\n```bash\n$ npx ember-unused-components --stats\n\n No. of components: 304\n No. of unused components: 8 (2.63%)\n\n Unused components:\n  - report-header\n  - report-row-title\n  - reports-settings-dropdown\n  - ui-checkbox-list\n  - ui-manage-screen-title\n  - ui-phone/-body/-message\n  - ui-table/-cell-currency\n  - ui-table/-cell-date\n\n The most used component: ui-form-button (101 occurrences)\n The number of components used just once: 171 (56.25%)\n Usage of {{curly-braces}} vs \u003cAngleBrackets\u003e syntax: 509 (56.81%) vs 387 (43.19%)\n Usage of (component \"component-name\") helper in templates: 70\n Usage in JS files (e.g. through `import` or ELT): 63\n```\n\n#### Occurrences\n\nYou can also print all occurrences of components that were found. Use `--occurrences` or `--o`:\n\n```bash\n$ npx ember-unused-components --occurrences\n\n// simplified\n\nuser-avatar:\n\n   \u003e ./app/templates/components/user-card.hbs\n    - \u003cUserAvatar @src={{_imageSource}} /\u003e\n\nwelcome-page:\n\n   \u003e ./app/templates/application.hbs\n    - {{welcome-page}}\n```\n\n#### [EXPERIMENTAL] Searching components contained in other packages\n\nYou can also print all occurrences of components that were found in included addons. Use `--includeAddons` to include all found addons, or `includeAddons=company-*` to only include addons that match `company-*`\n\n```bash\n$ npx ember-unused-components --occurrences --includeAddons=company-*\n\n// simplified\n\n[company-buttons] button-a:\n\n   \u003e ./app/templates/components/user-card.hbs\n    - \u003cButtonA\u003eButton Text\u003c/ButtonA\u003e\n\nwelcome-page:\n\n   \u003e ./app/templates/application.hbs\n    - {{welcome-page}}\n```\n\n\n### Advanced usage\n\nTypically the script should realize if you are using [POD structure](https://ember-cli.com/user-guide/#pod-structure) or not and find its way to components directory.\n\nIf you have problems with that, consider:\n\n#### Forcing POD\n\nTo force using POD use `--pods` argument (alias: `-p`). Like this:\n\n```bash\n$ npx ember-unused-components --pods\n```\n\nThe script will use the default directory of POD components: `app/components`. **Please let me know** if you had to force using POD. I made a simple guessing algorithm that should handle PODs out-of-the-box.\n\n#### Forcing POD with the custom directory\n\nYour app should be configured to have `podModulePrefix` property in `config/environment.js` if you are using POD but if it somehow doesn't work you can specify it through `--pods-dir` (alias: `-pd`). Like this:\n\n```bash\n$ npx ember-unused-components --pods --pods-dir=\"modules/components-repository\"\n```\n\nConfiguration\n------------------------------------------------------------------------------\n\nIn typical use cases, it should work out of the box and you don't have to configure anything but you can consider the following options.\nFirst, you need to create `.eucrc.js` file in the root directory:\n\n```js\nmodule.exports = {\n  whitelist: [\n    'app/app-tab-panel' // we will use it again soon\n  ],\n  ignore: [\n    'app/templates/freestyle.hbs' // this is our template with style guides\n  ],\n  failOnUnused: false // optional, default is false, should we throw errors when we find unused components (useful in CI)\n};\n```\n\n### Whitelist\n\nYou can specify which components should not be treated as unused even if the script couldn't find their usage occurrences. This happens when:\n - you know that the component will be used in the future and you don't want to remove it and being reminded of that\n - you use some kind of \"dynamic name resolution\" for your components\n\n------------------------------------------------------------------------------\n\nFor the \"dynamic name resolution\" scenario consider following example.\nTypical dynamic component look like this:\n\n**Template**\n```hbs\n{{component name car=car}}\n```\n\n**JavaScript**\n```js\nname: computed('car.type', function () {\n  return `car-card-${this.get('car.type')}`;\n});\n```\n\n**Result**\n\nWhich may result in having following components in use:\n- car.type = 'suv' =\u003e `{{car-card-suv car=car}}`\n- car.type = 'sport' =\u003e `{{car-card-sport car=car}}`\n- car.type = 'sedan' =\u003e  `{{car-card-sedan car=car}}`\n\nUnfortunately, this static analysis tool doesn't understand it yet and doesn't know that your component `car-card-suv`\nhas been used anywhere.\nYou can whitelist these components from being marked as unused by referencing to them directly:\n```js\nmodule.exports = {\n  whitelist: [\n    'car-card-suv',\n    'car-card-sport',\n    'car-card-sedan'\n  ]\n};\n```\nor by using wildcard:\n```js\nmodule.exports = {\n  whitelist: ['car-card-*']\n};\n```\n\n### Ignored files\n\nA component might be used in some files like guidelines template (see [ember-freestyle](https://github.com/chrislopresto/ember-freestyle)) that in fact does not indicate that it is in use. The best practice is to ignore that file:\n\n```js\nmodule.exports = {\n  ignore: [\n    'app/templates/freestyle.hbs' // this is our template with style guides\n  ]\n};\n```\n\n### Fail on unused\n\nYou might want to throw errors when unused components are found. This is especially useful when running in CI.  This behavior is turned off by default.\n\nTurn this behavior on in 2 ways:\n\nSetting the `failOnUnused` property of your `.eucrc.js` file to `true`.\n\n```js\nmodule.exports = {\n  failOnUnused: true\n};\n\n// In practice, it might look something like this:\n\nmodule.exports = {\n  failOnUnused: process.env.CI // many CI services like Travis-ci and Circle-ci inject a CI env variable by default.\n};\n```\n\nPassing the `--fail-on-unused` flag to the cli:\n\n```bash\n./node_modules/.bin/ember-unused-components --fail-on-unused\n```\n\nThe `.eucrc.js` configuration file takes precedence over the cli argument.\n\nRemoving components\n------------------------------------------------------------------------------\n\nAuto removing components might be useful but it's not yet supported. Please consider that simple removal of:\n - `template.hbs` or `templates/component-name.hbs`\n - `component.js` or `components/component-name.js`\n - `style.css` or `styles/components/style.css`\n\nmight not remove everything you would like. Examples:\n\n - global CSS classes that are no longer used\n - 3rd party JS libraries used only in that component\n - translation keys that are no longer needed\n - assets (images) that are no longer used\n - local overwrites/adjustments for that component made by parent's CSS\n\nSo you'll still have some dead code because of unused components.\n\nI encourage you to remove components from the list manually.\n\nBest Practices\n------------------------------------------------------------------------------\n\nOnce you delete unused components run the script once again :) You might find that now some other components are no longer used.\nThis happens when the component is used in the unused component.\n\nExample:\n\n\n```hbs\n{{!-- users-list component --}}\n{{#each users as |user|}}\n  {{user-card user=user}}\n{{/each}}\n```\n\nSo `user-card` is being used but in *unused* component `users-list`. Once you will delete `users-list` component then `user-card`\nwill not be longer used.\n\nContributing\n------------------------------------------------------------------------------\n\nIf you feel like you need some functionality please raise an issue or event better Contribute!\n\n### Testing\n\nIt's very important to prepare test cases for fixes and new features.\n\nWe have a directory `test-apps` with applications that have different configs and different Ember versions which support or\ndoes not support certain \"features\" like angle brackets components or module unification project structure.\n\n### Running tests\n\n* `yarn run test`\n\n### Linting\n\n* `yarn run lint`\n\n### Debugging\n\n* `npx ember-unused-components --debug`\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvastec%2Fember-unused-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvastec%2Fember-unused-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvastec%2Fember-unused-components/lists"}