chore: Templates comply with Octane ember-template-lint rules (#181)

* Update first patch of templates to comply with Octane rules

* Fix route templates and boolean/text fields

* Third patch of template fixes

.template-lintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended' // TODO migrate to "octane"
+  extends: 'octane'
 };

tests/dummy/app/components/boolean-field/template.hbs

@@ -1 +1 @@
-{{#if value}}true{{else}}false{{/if}}
+{{#if @value}}true{{else}}false{{/if}}

tests/dummy/app/components/page-title-pane/component.js

@@ -1,25 +1,22 @@
 import { A } from '@ember/array';
-import Component from '@ember/component';
-import { computed, set } from '@ember/object';
+import Component from '@glimmer/component';
+import { computed, set, action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
-export default Component.extend({
-  tagName: '',
+export default class PageTitlePaneComponent extends Component {
+  @service
+  titleList;
 
-  titleList: service(),
+  @computed('titleList.{tokens.length}')
+  get lastIndex() {
+    return this.titleList.tokens.length - 1;
+  }
 
-  lastIndex: computed('titleList.{tokens.length}', {
-    get() {
-      return this.titleList.tokens.length - 1;
-    },
-  }),
-
-  actions: {
-    highlight(token) {
-      let tokens = A(this.titleList.tokens);
-      let wasActive = token.active;
-      tokens.setEach('active', false);
-      set(token, 'active', !wasActive);
-    },
-  },
-});
+  @action
+  highlight(token) {
+    let tokens = A(this.titleList.tokens);
+    let wasActive = token.active;
+    tokens.setEach('active', false);
+    set(token, 'active', !wasActive);
+  }
+}

tests/dummy/app/components/page-title-pane/matryoshka/template.hbs

@@ -1,8 +1,19 @@
-{{#page-title-pane/nested-template title=item.value replace=item.replace prepend=item.prepend separator=item.separator onactivate=onactivate titleList=titleList}}
-  {{yield item}}
-  {{#if nextItems.length}}
-    {{#page-title-pane/matryoshka componentName items=nextItems onactivate=onactivate titleList=titleList as |value|}}
+<PageTitlePane::NestedTemplate
+  @title={{this.item.value}}
+  @replace={{this.item.replace}}
+  @prepend={{this.item.prepend}}
+  @separator={{this.item.separator}}
+  @onactivate={{@onactivate}}
+  @titleList={{@titleList}}
+>
+  {{yield this.item}}
+  {{#if this.nextItems.length}}
+    <PageTitlePane::Matryoshka
+      @items={{this.nextItems}}
+      @onactivate={{@onactivate}}
+      @titleList={{@titleList}} as |value|
+    >
       {{yield value}}
-    {{/page-title-pane/matryoshka}}
+    </PageTitlePane::Matryoshka>
   {{/if}}
-{{/page-title-pane/nested-template}}
+</PageTitlePane::NestedTemplate>

tests/dummy/app/components/page-title-pane/template.hbs

@@ -3,19 +3,20 @@
     <span class="close button"></span>
     <span class="minimize button"></span>
     <span class="maximize button"></span>
-    {{#each titleList.sortedTokens as |token idx|}}
+    {{#each this.titleList.sortedTokens as |token idx|}}
       <span
         role="button"
         class={{concat "title-token" " " (if token.active "active")}}
-        onclick={{action "highlight" token}}>
+        {{on "click" (fn this.highlight token)}}
+      >
         {{token.title}}
       </span>
-      {{#if (lt idx lastIndex)}}{{token.separator}}{{/if}}
+      {{#if (lt idx this.lastIndex)}}{{token.separator}}{{/if}}
     {{/each}}
   </header>
   <div>
     {{yield (hash
-      template=(component "page-title-pane/nested-template" titleList=titleList onactivate=(action "highlight"))
-      matryoshka=(component "page-title-pane/matryoshka" titleList=titleList onactivate=(action "highlight")))}}
+      template=(component "page-title-pane/nested-template" titleList=this.titleList onactivate=(fn this.highlight))
+      matryoshka=(component "page-title-pane/matryoshka" titleList=this.titleList onactivate=(fn this.highlight)))}}
   </div>
 </div>

tests/dummy/app/components/text-field/component.js

@@ -8,13 +8,13 @@ import Autoresize from 'ember-autoresize/mixins/autoresize';
 import layout from './template';
 
 /**
-  A `{{text-field}}` is a drop in replacement
+  A `<TextField />` is a drop in replacement
   for `<input type="text">`.
 
-  The simplest `{{text-field}}` would be:
+  The simplest `<TextField />` would be:
 
   ```htmlbars
-  {{text-field value=score onchange=(action (mut score))}}
+  <TextField @value={{this.score}} @onchange={{fn (mut this.score)}} />
   ```
 
   @public

tests/dummy/app/components/text-field/template.hbs

@@ -1,10 +1,13 @@
+{{!template-lint-disable no-action}}
+{{!TODO fix actions when migrating to Glimmer component}}
 <input type="text"
-       id={{inputId}}
-       name={{name}}
-       placeholder={{placeholder}}
-       autocomplete="off"
-       onclick={{action "blackHole"}}
-       onpaste={{action "reformat"}}
-       onchange={{action "reformat"}}
-       oninput={{action "reformat"}}
-       disabled={{disabled}}>
+  id={{this.inputId}}
+  name={{this.name}}
+  placeholder={{this.placeholder}}
+  autocomplete="off"
+  {{on "click" (action "blackHole")}}
+  {{on "paste" (action "reformat")}}
+  {{on "change" (action "reformat")}}
+  {{on "input" (action "reformat")}}
+  disabled={{this.disabled}}
+/>

tests/dummy/app/components/window-pane/template.hbs

@@ -1,9 +1,9 @@
-<div class={{concat "window-pane" (if title " has-title")}}>
+<div class={{concat "window-pane" (if @title " has-title")}}>
   <header>
     <span class="close button"></span>
     <span class="minimize button"></span>
     <span class="maximize button"></span>
-    {{title}}
+    {{@title}}
   </header>
   <div>
     {{yield this}}

tests/dummy/app/index/controller.js

@@ -1,14 +1,13 @@
 import Controller from '@ember/controller';
-import { set } from '@ember/object';
+import { set, action } from '@ember/object';
 
-export default Controller.extend({
-  actions: {
-    add(tokens) {
-      let lastToken = tokens.slice(-1)[0];
-      set(this, 'model.tokens', tokens.concat({
-        separator: lastToken.separator,
-        prepend: lastToken.prepend
-      }));
-    }
+export default class IndexController extends Controller {
+  @action
+  add(tokens) {
+    let lastToken = tokens.slice(-1)[0];
+    set(this, 'model.tokens', tokens.concat({
+      separator: lastToken.separator,
+      prepend: lastToken.prepend
+    }));
   }
-});
+}