ember-codemodstagless-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
npx tagless-ember-components-codemodExample
import Component from '@ember/component';
export default Component.extend({
tagName: 'button',
attributeBindings: ['disabled', 'disabled:aria-disabled'],
classNames: ['custom-button'],
classNameBindings: ['blue:blue:red'],
});{{@text}}will be migrated to:
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});<button disabled={{disabled}} aria-disabled={{disabled}} class="custom-button {{if this.blue "blue" "red"}}">
{{@text}}
</button>Configuration
Paths
By default, tagless-ember-components-codemod will process components in the
following folders relatively to project root:
app/components
addon/componentsYou may pass alternative paths or globs as arguments:
# 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-*.jsDebug
Debug logging could be enabled by setting DEBUG environment variable to
tagless-ember-components-codemod:
DEBUG=tagless-ember-components-codemod npx tagless-ember-components-codemodKnown Caveats
Due to the way
jscodeshiftworks it sometimes removes empty lines between component properties, or adds new ones unexpectedlySince
click()and other event hooks don't work for tagless components, passing in something like@click=(action ...)also will not work anymore
License
This projects is released under the MIT License.