https://github.com/ember-codemods/tagless-ember-components-codemod
Converts regular Ember.js components to `tagName: ''` components
https://github.com/ember-codemods/tagless-ember-components-codemod
Last synced: about 1 year ago
JSON representation
Converts regular Ember.js components to `tagName: ''` components
- Host: GitHub
- URL: https://github.com/ember-codemods/tagless-ember-components-codemod
- Owner: ember-codemods
- License: mit
- Created: 2019-10-10T13:52:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T11:24:41.000Z (over 1 year ago)
- Last Synced: 2025-03-24T20:21:56.401Z (about 1 year ago)
- Language: JavaScript
- Size: 547 KB
- Stars: 6
- Watchers: 4
- Forks: 10
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
tagless-ember-components-codemod
==============================================================================
Converts regular Ember.js components to `tagName: ''` components
**This codemod is experimental and might break your app. Make sure to
review the changes that it creates!**
Usage
------------------------------------------------------------------------------
```bash
npx tagless-ember-components-codemod
```
Example
------------------------------------------------------------------------------
```js
import Component from '@ember/component';
export default Component.extend({
tagName: 'button',
attributeBindings: ['disabled', 'disabled:aria-disabled'],
classNames: ['custom-button'],
classNameBindings: ['blue:blue:red'],
});
```
```hbs
{{@text}}
```
will be migrated to:
```js
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});
```
```hbs
{{@text}}
```
Configuration
------------------------------------------------------------------------------
### Paths
By default, `tagless-ember-components-codemod` will process components in the
following folders relatively to project root:
```
app/components
addon/components
```
You may pass alternative paths or globs as arguments:
```bash
# process one component only
npx tagless-ember-components-codemod app/components/my-component.js
# process a component and all components under it's namespace
npx tagless-ember-components-codemod app/components/my-component.js app/components/my-component/
# process all components matching a glob
npx tagless-ember-components-codemod app/components/**/foo-*.js
```
### Debug
Debug logging could be enabled by setting `DEBUG` environment variable to
`tagless-ember-components-codemod`:
```bash
DEBUG=tagless-ember-components-codemod npx tagless-ember-components-codemod
```
Known Caveats
------------------------------------------------------------------------------
- Due to the way `jscodeshift` works it sometimes removes empty lines between
component properties, or adds new ones unexpectedly
- Since `click()` and other event hooks don't work for tagless components,
passing in something like `@click=(action ...)` also will not work anymore
- [Open Issues](https://github.com/ember-codemods/tagless-ember-components-codemod/issues)
License
------------------------------------------------------------------------------
This projects is released under the [MIT License](LICENSE.md).