Fix implicit this issues

.prettierrc.js

@@ -2,4 +2,13 @@
 
 module.exports = {
   singleQuote: true,
+  overrides: [
+    {
+      files: '**/*.hbs',
+      options: {
+        parser: 'glimmer',
+        singleQuote: false,
+      },
+    },
+  ],
 };

.template-lintrc.js

@@ -11,7 +11,6 @@ module.exports = {
     'no-down-event-binding': false,
     'no-duplicate-landmark-elements': false,
     'no-heading-inside-button': false,
-    'no-implicit-this': false,
     'no-nested-landmark': false,
     'no-passed-in-event-handlers': false,
     'no-yield-only': false,

addon/templates/components/cells/base.hbs

@@ -1,5 +1,14 @@
-{{#if column.cellComponent}}
-  {{component column.cellComponent tableActions=tableActions extra=extra table=table column=column row=row value=value rawValue=rawValue}}
+{{#if this.column.cellComponent}}
+  {{component
+    this.column.cellComponent
+    tableActions=this.tableActions
+    extra=this.extra
+    table=this.table
+    column=this.column
+    row=this.row
+    value=this.value
+    rawValue=this.rawValue
+  }}
 {{else}}
-  {{value}}
-{{/if}}
+  {{this.value}}
+{{/if}}

addon/templates/components/columns/base.hbs

@@ -1,19 +1,31 @@
-{{#if column.component}}
-  {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
+{{#if this.column.component}}
+  {{component
+    this.column.component
+    column=this.column
+    table=this.table
+    tableActions=this.tableActions
+    extra=this.extra
+    sortIcons=this.sortIcons
+  }}
 {{else}}
-  {{#if (and sortIcons.iconComponent sortIconProperty)}}
-    {{component sortIcons.iconComponent sortIcons=sortIcons sortIconProperty=sortIconProperty}}
-  {{else if sortIconProperty}}
-    <i class="lt-sort-icon {{get sortIcons sortIconProperty}}"></i>
+  {{#if (and this.sortIcons.iconComponent this.sortIconProperty)}}
+    {{component
+      this.sortIcons.iconComponent
+      sortIcons=this.sortIcons
+      sortIconProperty=this.sortIconProperty
+    }}
+  {{else if this.sortIconProperty}}
+    <i class='lt-sort-icon {{get this.sortIcons this.sortIconProperty}}'></i>
   {{/if}}
-  {{label}}
+  {{this.label}}
 {{/if}}
 
-{{#if isResizable}}
-  {{lt-column-resizer
-    column=column
-    table=table
-    resizeOnDrag=resizeOnDrag
-    isResizing=(mut isResizing)
-    onColumnResized=(action onColumnResized column)}}
-{{/if}}
+{{#if this.isResizable}}
+  <LtColumnResizer
+    @column={{this.column}}
+    @table={{this.table}}
+    @resizeOnDrag={{this.resizeOnDrag}}
+    @isResizing={{mut this.isResizing}}
+    @onColumnResized={{action this.onColumnResized this.column}}
+  />
+{{/if}}

addon/templates/components/light-table.hbs

@@ -1,26 +1,31 @@
-{{yield (hash
-  head=(component "lt-head"
-    tableId=elementId
-    table=table
-    tableActions=tableActions
-    extra=extra
-    tableClassNames=tableClassNames
-    sharedOptions=sharedOptions
+{{yield
+  (hash
+    head=(component
+      'lt-head'
+      tableId=this.elementId
+      table=this.table
+      tableActions=this.tableActions
+      extra=this.extra
+      tableClassNames=this.tableClassNames
+      sharedOptions=this.sharedOptions
+    )
+    body=(component
+      'lt-body'
+      tableId=this.elementId
+      table=this.table
+      tableActions=this.tableActions
+      extra=this.extra
+      tableClassNames=this.tableClassNames
+      sharedOptions=this.sharedOptions
+    )
+    foot=(component
+      'lt-foot'
+      tableId=this.elementId
+      table=this.table
+      tableActions=this.tableActions
+      extra=this.extra
+      tableClassNames=this.tableClassNames
+      sharedOptions=this.sharedOptions
+    )
   )
-  body=(component "lt-body"
-    tableId=elementId
-    table=table
-    tableActions=tableActions
-    extra=extra
-    tableClassNames=tableClassNames
-    sharedOptions=sharedOptions
-  )
-  foot=(component "lt-foot"
-    tableId=elementId
-    table=table
-    tableActions=tableActions
-    extra=extra
-    tableClassNames=tableClassNames
-    sharedOptions=sharedOptions
-  )
-)}}
+}}

addon/templates/components/lt-body.hbs

@@ -1,26 +1,29 @@
 {{#with
   (hash
-    row=(or rowComponent (component 'lt-row'))
-    spanned-row=(or spannedRowComponent (component 'lt-spanned-row'))
-    infinity=(or infinityComponent (component 'lt-infinity'))
+    row=(or this.rowComponent (component 'lt-row'))
+    spanned-row=(or this.spannedRowComponent (component 'lt-spanned-row'))
+    infinity=(or this.infinityComponent (component 'lt-infinity'))
   ) as |lt|
 }}
-  {{#if sharedOptions.occlusion}}
+  {{#if this.sharedOptions.occlusion}}
     <div class='lt-scrollable tse-scrollable vertical-collection'>
-      <div id={{concat tableId '_inline_head'}} class='lt-inline lt-head'></div>
+      <div
+        id={{concat this.tableId '_inline_head'}}
+        class='lt-inline lt-head'
+      ></div>
 
-      <table class={{tableClassNames}}>
+      <table class={{this.tableClassNames}}>
         <tbody class='lt-body'>
-          {{#if overwrite}}
-            {{yield columns rows}}
+          {{#if this.overwrite}}
+            {{yield this.columns this.rows}}
           {{else}}
             {{#vertical-collection
-              rows
+              this.rows
               tagName='vertical-collection'
-              estimateHeight=sharedOptions.estimatedRowHeight
-              shouldRecycle=sharedOptions.shouldRecycle
+              estimateHeight=this.sharedOptions.estimatedRowHeight
+              shouldRecycle=this.sharedOptions.shouldRecycle
               staticHeight=true
-              bufferSize=scrollBufferRows
+              bufferSize=this.scrollBufferRows
               containerSelector='.lt-scrollable'
               firstVisibleChanged=(action 'firstVisibleChanged')
               lastVisibleChanged=(action 'lastVisibleChanged')
@@ -29,14 +32,14 @@
             }}
               {{lt.row
                 row
-                columns
+                this.columns
                 data-row-id=row.rowId
-                table=table
-                tableActions=tableActions
-                extra=extra
-                enableScaffolding=enableScaffolding
-                canExpand=canExpand
-                canSelect=canSelect
+                table=this.table
+                tableActions=this.tableActions
+                extra=this.extra
+                enableScaffolding=this.enableScaffolding
+                canExpand=this.canExpand
+                canSelect=this.canSelect
                 click=(action 'onRowClick' row)
                 doubleClick=(action 'onRowDoubleClick' row)
               }}
@@ -47,29 +50,35 @@
                 no-data=(component lt.spanned-row classes='lt-no-data')
                 expanded-row=(component lt.spanned-row visible=false)
               )
-              rows
+              this.rows
             }}
           {{/if}}
         </tbody>
       </table>
 
-      <div id={{concat tableId '_inline_foot'}} class='lt-inline lt-foot'></div>
+      <div
+        id={{concat this.tableId '_inline_foot'}}
+        class='lt-inline lt-foot'
+      ></div>
     </div>
   {{else}}
-    {{#lt-scrollable
-      tagName=''
-      virtualScrollbar=useVirtualScrollbar
-      autoHide=autoHideScrollbar
-      scrollTo=targetScrollOffset
-      onScrollY=(action 'onScroll') as |scrollbar|
-    }}
-      <div id={{concat tableId '_inline_head'}} class='lt-inline lt-head'></div>
+    <LtScrollable
+      @tagName=''
+      @virtualScrollbar={{this.useVirtualScrollbar}}
+      @autoHide={{this.autoHideScrollbar}}
+      @scrollTo={{this.targetScrollOffset}}
+      @onScrollY={{action 'onScroll'}} as |scrollbar|
+    >
+      <div
+        id={{concat this.tableId '_inline_head'}}
+        class='lt-inline lt-head'
+      ></div>
 
-      <table class={{tableClassNames}}>
+      <table class={{this.tableClassNames}}>
         <tbody class='lt-body'>
-          {{#if enableScaffolding}}
+          {{#if this.enableScaffolding}}
             <tr class='lt-scaffolding-row'>
-              {{#each columns as |column|}}
+              {{#each this.columns as |column|}}
                 {{! template-lint-disable no-inline-styles }}
                 <td
                   style={{
@@ -82,21 +91,24 @@
             </tr>
           {{/if}}
 
-          {{#if overwrite}}
-            {{yield columns rows}}
+          {{#if this.overwrite}}
+            {{yield this.columns this.rows}}
           {{else}}
-            {{#each (if scrollbar (compute scrollbar.update rows) rows) as |row|
+            {{#each
+              (if
+                scrollbar (compute scrollbar.update this.rows) this.rows
+              ) as |row|
             }}
               {{lt.row
                 row
-                columns
+                this.columns
                 data-row-id=row.rowId
-                table=table
-                tableActions=tableActions
-                extra=extra
-                enableScaffolding=enableScaffolding
-                canExpand=canExpand
-                canSelect=canSelect
+                table=this.table
+                tableActions=this.tableActions
+                extra=this.extra
+                enableScaffolding=this.enableScaffolding
+                canExpand=this.canExpand
+                canSelect=this.canSelect
                 click=(action 'onRowClick' row)
                 doubleClick=(action 'onRowDoubleClick' row)
               }}
@@ -106,42 +118,45 @@
                   expanded-row=(component
                     lt.spanned-row
                     classes='lt-expanded-row'
-                    colspan=colspan
+                    colspan=this.colspan
                     yield=row
                     visible=row.expanded
                   )
                   loader=(component lt.spanned-row visible=false)
                   no-data=(component lt.spanned-row visible=false)
                 )
-                rows
+                this.rows
               }}
             {{/each}}
 
             {{yield
               (hash
                 loader=(component
-                  lt.spanned-row classes='lt-is-loading' colspan=colspan
+                  lt.spanned-row classes='lt-is-loading' colspan=this.colspan
                 )
                 no-data=(component
-                  lt.spanned-row classes='lt-no-data' colspan=colspan
+                  lt.spanned-row classes='lt-no-data' colspan=this.colspan
                 )
                 expanded-row=(component lt.spanned-row visible=false)
               )
-              rows
+              this.rows
             }}
           {{/if}}
         </tbody>
       </table>
 
-      {{#if onScrolledToBottom}}
-        {{lt.infinity
-          enterViewport=(action 'enterViewport')
-          exitViewport=(action 'exitViewport')
-          scrollableContent=(concat '#' tableId ' .lt-scrollable')
-        }}
+      {{#if this.onScrolledToBottom}}
+        <lt.infinity
+          @enterViewport={{action 'enterViewport'}}
+          @exitViewport={{action 'exitViewport'}}
+          @scrollableContent={{concat '#' this.tableId ' .lt-scrollable'}}
+        />
       {{/if}}
 
-      <div id={{concat tableId '_inline_foot'}} class='lt-inline lt-foot'></div>
-    {{/lt-scrollable}}
+      <div
+        id={{concat this.tableId '_inline_foot'}}
+        class='lt-inline lt-foot'
+      ></div>
+    </LtScrollable>
   {{/if}}
 {{/with}}