tagless-ember-components-codemod
v1.0.0
Published
Converts regular Ember.js components to `tagName: ''` components
Downloads
19
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
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 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.