run tagless-ember-components-codemod

This is the result of running the tagless-ember-components-codemod against Ember Bootstrap. The following open pull request have been merged in before: - Support native classes: ember-codemods/tagless-ember-components-codemod#44 - Support component with event handlers: ember-codemods/tagless-ember-components-codemod#52 - Support aria role for native classes: ember-codemods/tagless-ember-components-codemod#56 Steps: mv addon/templates/components/common addon/templates/components/base npx jelhan/tagless-ember-components-codemod#merged-native-class-support mv addon/templates/components/base addon/templates/components/common
jelhan · Jan 23, 2020 · 20bf6b0 · 20bf6b0
1 parent e81f167
commit 20bf6b0
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 54 deletions.
diff --git a/addon/components/base/bs-accordion.js b/addon/components/base/bs-accordion.js
@@ -1,5 +1,5 @@
 import { action } from '@ember/object';
-import { layout as templateLayout } from '@ember-decorators/component';
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-accordion';
 import listenTo from 'ember-bootstrap/utils/cp/listen-to';
@@ -36,7 +36,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
   @extends Ember.Component
   @public
 */
-@templateLayout(layout)
+@tagName("")
 export default class Accordion extends Component {
   @defaultValue
   ariaRole = 'tablist';

diff --git a/addon/components/base/bs-form/element/help-text.js b/addon/components/base/bs-form/element/help-text.js
@@ -1,4 +1,4 @@
-import { layout as templateLayout } from '@ember-decorators/component';
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-form/element/help-text';
 
@@ -9,5 +9,5 @@ import layout from 'ember-bootstrap/templates/components/bs-form/element/help-te
  @extends Ember.Component
  @private
  */
-@templateLayout(layout)
+@tagName("")
 export default class FormElementHelpText extends Component {}
diff --git a/addon/components/base/bs-form/group.js b/addon/components/base/bs-form/group.js
@@ -1,4 +1,4 @@
-import { layout as templateLayout } from '@ember-decorators/component';
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import { notEmpty } from '@ember/object/computed';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-form/group';
@@ -25,7 +25,7 @@ import layout from 'ember-bootstrap/templates/components/bs-form/group';
   @extends Ember.Component
   @public
 */
-@templateLayout(layout)
+@tagName("")
 export default class FormGroup extends Component {
   /**
    * @property classTypePrefix

diff --git a/addon/components/base/bs-modal/body.js b/addon/components/base/bs-modal/body.js
@@ -1,4 +1,4 @@
-import { classNames, layout as templateLayout } from '@ember-decorators/component';
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-modal/body';
 
@@ -11,6 +11,5 @@ import layout from 'ember-bootstrap/templates/components/bs-modal/body';
  @extends Ember.Component
  @public
  */
-@templateLayout(layout)
-@classNames('modal-body')
+@tagName("")
 export default class ModalBody extends Component {}
diff --git a/addon/components/base/bs-modal/footer.js b/addon/components/base/bs-modal/footer.js
@@ -1,4 +1,5 @@
-import { classNames, layout as templateLayout, tagName } from '@ember-decorators/component';
+import { action } from "@ember/object";
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import { notEmpty } from '@ember/object/computed';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-modal/footer';
@@ -13,9 +14,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
  @extends Ember.Component
  @public
  */
-@templateLayout(layout)
-@tagName('form')
-@classNames('modal-footer')
+@tagName("")
 export default class ModalFooter extends Component {
   /**
    * The title of the default close button. Will be ignored (i.e. no close button) if you provide your own block
@@ -84,7 +83,8 @@ export default class ModalFooter extends Component {
    * @public
    */
 
-  submit(e) {
+  @action
+  handleSubmit(e) {
     e.preventDefault();
     // send to parent bs-modal component
     this.get('onSubmit')();

diff --git a/addon/components/base/bs-modal/header/close.js b/addon/components/base/bs-modal/header/close.js
@@ -1,4 +1,5 @@
-import { attributeBindings, classNames, layout as templateLayout, tagName } from '@ember-decorators/component';
+import { action } from "@ember/object";
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-modal/header/close';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
@@ -10,10 +11,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
  @extends Ember.Component
  @private
  */
-@templateLayout(layout)
-@tagName('button')
-@classNames('close')
-@attributeBindings('type', 'aria-label')
+@tagName("")
 export default class ModalHeaderClose extends Component {
   'aria-label' = 'Close';
 
@@ -27,7 +25,8 @@ export default class ModalHeaderClose extends Component {
   onClick() {
   }
 
-  click() {
+  @action
+  handleClick() {
     this.get('onClick')();
   }
 }
diff --git a/addon/components/base/bs-modal/header/title.js b/addon/components/base/bs-modal/header/title.js
@@ -1,4 +1,4 @@
-import { classNames, layout as templateLayout, tagName } from '@ember-decorators/component';
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-modal/header/title';
 
@@ -9,7 +9,5 @@ import layout from 'ember-bootstrap/templates/components/bs-modal/header/title';
  @extends Ember.Component
  @private
  */
-@templateLayout(layout)
-@tagName('h4')
-@classNames('modal-title')
+@tagName("")
 export default class ModalHeaderTitle extends Component {}
diff --git a/addon/components/base/bs-progress.js b/addon/components/base/bs-progress.js
@@ -1,4 +1,4 @@
-import { classNames, layout as templateLayout } from '@ember-decorators/component';
+import { layout as templateLayout, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from 'ember-bootstrap/templates/components/bs-progress';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
@@ -36,8 +36,7 @@ import defaultValue from 'ember-bootstrap/utils/default-decorator';
   @extends Ember.Component
   @public
 */
-@templateLayout(layout)
-@classNames('progress')
+@tagName("")
 export default class Progress extends Component {
   /**
    * @property progressBarComponent

diff --git a/addon/templates/components/common/bs-accordion.hbs b/addon/templates/components/common/bs-accordion.hbs
@@ -1,6 +1,8 @@
-{{yield
-  (hash
-    item=(component this.itemComponent selected=this.isSelected onClick=this.doChange)
-    change=this.doChange
-  )
-}}
+<div ...attributes>
+  {{yield
+    (hash
+      item=(component this.itemComponent selected=this.isSelected onClick=this.doChange)
+      change=this.doChange
+    )
+  }}
+</div>
diff --git a/addon/templates/components/common/bs-form/element/help-text.hbs b/addon/templates/components/common/bs-form/element/help-text.hbs
@@ -1 +1,3 @@
-{{@text}}
+<div ...attributes>
+  {{@text}}
+</div>
diff --git a/addon/templates/components/common/bs-form/group.hbs b/addon/templates/components/common/bs-form/group.hbs
@@ -1,4 +1,6 @@
-{{yield}}
-{{#if this.hasFeedback}}
-  <span class="form-control-feedback {{this.iconName}}" aria-hidden="true"></span>
-{{/if}}
+<div ...attributes>
+  {{yield}}
+  {{#if this.hasFeedback}}
+    <span class="form-control-feedback {{this.iconName}}" aria-hidden="true"></span>
+  {{/if}}
+</div>
diff --git a/addon/templates/components/common/bs-modal/body.hbs b/addon/templates/components/common/bs-modal/body.hbs
@@ -1 +1,3 @@
-{{yield}}
+<div class="modal-body" ...attributes>
+  {{yield}}
+</div>
diff --git a/addon/templates/components/common/bs-modal/footer.hbs b/addon/templates/components/common/bs-modal/footer.hbs
@@ -1,10 +1,13 @@
-{{#if hasBlock}}
-  {{yield}}
-{{else}}
-  {{#if this.hasSubmitButton}}
-    {{#component this.buttonComponent onClick=@onClose}}{{this.closeTitle}}{{/component}}
-    {{#component this.buttonComponent type=this.submitButtonType onClick=@onSubmit _disabled=this.submitDisabled}}{{@submitTitle}}{{/component}}
+<form class="modal-footer" ...attributes {{on "submit" this.handleSubmit}}>
+  {{#if hasBlock}}
+    {{yield}}
   {{else}}
-    {{#component this.buttonComponent type="primary" onClick=@onClose}}{{this.closeTitle}}{{/component}}
+    {{#if this.hasSubmitButton}}
+      {{#component this.buttonComponent onClick=@onClose}}{{this.closeTitle}}{{/component}}
+      {{#component this.buttonComponent type=this.submitButtonType onClick=@onSubmit _disabled=this.submitDisabled}}{{@submitTitle}}{{/component}}
+    {{else}}
+      {{#component this.buttonComponent type="primary" onClick=@onClose}}{{this.closeTitle}}{{/component}}
+    {{/if}}
   {{/if}}
-{{/if}}
+
+</form>
diff --git a/addon/templates/components/common/bs-modal/header/close.hbs b/addon/templates/components/common/bs-modal/header/close.hbs
@@ -1 +1,3 @@
-<span aria-hidden="true">&times;</span>
+<button type={{this.type}} aria-label={{this.aria-label}} class="close" ...attributes {{on "click" this.handleClick}}>
+  <span aria-hidden="true">&times;</span>
+</button>
diff --git a/addon/templates/components/common/bs-modal/header/title.hbs b/addon/templates/components/common/bs-modal/header/title.hbs
@@ -1 +1,4 @@
-{{yield}}
+<h4 class="modal-title" ...attributes>
+  {{yield}}
+
+</h4>
diff --git a/addon/templates/components/common/bs-progress.hbs b/addon/templates/components/common/bs-progress.hbs
@@ -1,5 +1,8 @@
-{{yield
-  (hash
-    bar=(component this.progressBarComponent)
-  )
-}}
+<div class="progress" ...attributes>
+  {{yield
+    (hash
+      bar=(component this.progressBarComponent)
+    )
+  }}
+
+</div>