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

npx tagless-ember-components-codemod

Example

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/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

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

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

License

This projects is released under the MIT License.