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!

npx tagless-ember-components-codemod

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>

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:

# 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 logging could be enabled by setting DEBUG environment variable to tagless-ember-components-codemod:

DEBUG=tagless-ember-components-codemod npx tagless-ember-components-codemod

• 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

This projects is released under the MIT License.