From faaf0933b389273e58a683df86716401dd64ed24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johan=20R=C3=B8ed?= Date: Wed, 23 Sep 2026 20:06:28 +0200 Subject: [PATCH 1/2] Declare the bound Column and Row methods as arrow functions @action already bound them, but their types said method, so typescript-eslint's unbound-method flags {{column.getValueForRow row}}. --- table/src/-private/column.ts | 14 ++++++-------- table/src/-private/row.ts | 6 ++---- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/table/src/-private/column.ts b/table/src/-private/column.ts index a247693..3ea3477 100644 --- a/table/src/-private/column.ts +++ b/table/src/-private/column.ts @@ -1,4 +1,4 @@ -import { action, get } from '@ember/object'; +import { get } from '@ember/object'; import { isEmpty } from '@ember/utils'; import type { CellComponent } from './cell-component.ts'; @@ -52,8 +52,7 @@ export class Column< public config: ColumnConfig, ) {} - @action - getValueForRow(row: Row): ContentValue { + getValueForRow = (row: Row): ContentValue => { if (this.config.value) { return this.config.value(this.#contextFor(row)); } @@ -71,7 +70,7 @@ export class Column< * properly constrained the type of value, (isEmpty doesn't narrow types either) */ return value as ContentValue; - } + }; private getDefaultValue(row: Row) { return this.getOptionsForRow(row)[DEFAULT_VALUE_KEY]; @@ -84,10 +83,9 @@ export class Column< * The type also has the `@options` the table's Cells ask for. * The column's `options` must return them: this is not checked. */ - @action - getOptionsForRow( + getOptionsForRow = ( row: Row, - ): { defaultValue: string } & CellOptionsOf { + ): { defaultValue: string } & CellOptionsOf => { const configuredDefault = this.table.config.defaultCellValue; const defaults = { [DEFAULT_VALUE_KEY]: @@ -98,7 +96,7 @@ export class Column< ...defaults, ...this.config.options?.(this.#contextFor(row)), } as { defaultValue: string } & CellOptionsOf; - } + }; #contextFor(row: Row): CellContext { // The row is a row of this column's table, so its table has this table's types. diff --git a/table/src/-private/row.ts b/table/src/-private/row.ts index c86c7b8..bd616d9 100644 --- a/table/src/-private/row.ts +++ b/table/src/-private/row.ts @@ -1,5 +1,4 @@ import { assert } from '@ember/debug'; -import { action } from '@ember/object'; import type { Table } from './table'; @@ -35,8 +34,7 @@ export class Row> { this.table = table; } - @action - handleClick(event: MouseEvent): void { + handleClick = (event: MouseEvent): void => { assert( `expected event.target to be an instance of HTMLElement`, event.target instanceof HTMLElement || event.target instanceof SVGElement, @@ -62,5 +60,5 @@ export class Row> { if (inputParent) { return; } - } + }; } From d183f6be4c0c5f288ea05be85ff0093f559241d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johan=20R=C3=B8ed?= Date: Wed, 23 Sep 2026 20:12:25 +0200 Subject: [PATCH 2/2] Declare the remaining @action methods as arrow functions ColumnReordering's columnOrder field reads save before it is initialized, so it now calls it lazily, like read. --- table/src/-private/table.ts | 11 ++-- table/src/plugins/column-reordering/plugin.ts | 50 ++++++++----------- table/src/plugins/column-resizing/plugin.ts | 33 +++++------- table/src/plugins/column-visibility/plugin.ts | 6 +-- table/src/plugins/data-sorting/plugin.ts | 16 +++--- 5 files changed, 45 insertions(+), 71 deletions(-) diff --git a/table/src/-private/table.ts b/table/src/-private/table.ts index 3a0eb05..590ee1d 100644 --- a/table/src/-private/table.ts +++ b/table/src/-private/table.ts @@ -1,6 +1,5 @@ import { cached, tracked } from '@glimmer/tracking'; import { assert } from '@ember/debug'; -import { action } from '@ember/object'; import { guidFor } from '@ember/object/internals'; import { isDevelopingApp, macroCondition } from '@embroider/macros'; @@ -357,15 +356,13 @@ export class Table< /** * @private */ - @action - resetScrollContainer(): void { + resetScrollContainer = (): void => { if (!this.scrollContainerElement) return; this.scrollContainerElement.scrollTop = 0; - } + }; - @action - resetToDefaults(): void { + resetToDefaults = (): void => { this.plugins.forEach((plugin) => plugin.reset?.()); - } + }; } diff --git a/table/src/plugins/column-reordering/plugin.ts b/table/src/plugins/column-reordering/plugin.ts index a66c44a..ec19676 100644 --- a/table/src/plugins/column-reordering/plugin.ts +++ b/table/src/plugins/column-reordering/plugin.ts @@ -1,6 +1,5 @@ import { cached, tracked } from '@glimmer/tracking'; import { assert } from '@ember/debug'; -import { action } from '@ember/object'; import { TrackedMap } from 'tracked-built-ins'; @@ -122,28 +121,26 @@ export class TableMeta { columnOrder: ColumnOrder = new ColumnOrder({ columns: () => this.allColumns, visibleColumns: () => this.visibleColumns, - save: this.save, + save: (map) => this.save(map), read: () => this.read(), }); /** * Get the curret order/position of a column */ - @action - getPosition(column: Column): number { + getPosition = (column: Column): number => { return this.columnOrder.get(column.key); - } + }; /** * Swap the column with the column at `newPosition` */ - @action - setPosition( + setPosition = ( column: Column, newPosition: number, - ): false | undefined { + ): false | undefined => { return this.columnOrder.swapWith(column.key, newPosition); - } + }; /** * Using a `ColumnOrder` instance, set the order of all columns @@ -156,21 +153,19 @@ export class TableMeta { * Revert to default config, delete preferences, * and clear the columnOrder */ - @action - reset(): void { + reset = (): void => { preferences.forTable(this.table, ColumnReordering).delete('order'); this.columnOrder = new ColumnOrder({ columns: () => this.allColumns, visibleColumns: () => this.visibleColumns, save: this.save, }); - } + }; /** * @private */ - @action - save(map: Map): void { + save = (map: Map): void => { const order: Record = {}; for (const [key, position] of map.entries()) { @@ -178,13 +173,12 @@ export class TableMeta { } preferences.forTable(this.table, ColumnReordering).set('order', order); - } + }; /** * @private */ - @action - private read() { + private read = () => { const order = preferences .forTable(this.table, ColumnReordering) .get('order'); @@ -192,7 +186,7 @@ export class TableMeta { if (!order) return; return new Map(Object.entries(order)); - } + }; get columns(): Column[] { return this.columnOrder.orderedColumns.filter( @@ -316,8 +310,7 @@ export class ColumnOrder { * - skip over non-visible columns when determining the previous "index" * - set the position to whatever that is. */ - @action - moveLeft(key: string): void { + moveLeft = (key: string): void => { const orderedColumns = this.orderedColumns; if (this.map.get(key) === 0) { return; @@ -353,7 +346,7 @@ export class ColumnOrder { } this.args.save?.(this.map); - } + }; setAll = (map: Map): void => { let allColumns = this.args.columns(); @@ -377,8 +370,7 @@ export class ColumnOrder { * - skip over non-visible columns when determining the next "index" * - set the position to whatever that is. */ - @action - moveRight(key: string): void { + moveRight = (key: string): void => { const orderedColumns = this.orderedColumns; let found = false; @@ -410,13 +402,12 @@ export class ColumnOrder { } this.args.save?.(this.map); - } + }; /** * Performs a swap of the column's position with the column at position */ - @action - swapWith(key: string, position: number): false | undefined { + swapWith = (key: string, position: number): false | undefined => { const validPositions = [...this.orderedMap.values()]; /** @@ -487,10 +478,9 @@ export class ColumnOrder { } this.args.save?.(this.map); - } + }; - @action - get(key: string): number { + get = (key: string): number => { const result = this.orderedMap.get(key); assert( @@ -500,7 +490,7 @@ export class ColumnOrder { ); return result; - } + }; /** * The same as this.map, but with all the columns' information. diff --git a/table/src/plugins/column-resizing/plugin.ts b/table/src/plugins/column-resizing/plugin.ts index ae82b57..88a5e26 100644 --- a/table/src/plugins/column-resizing/plugin.ts +++ b/table/src/plugins/column-resizing/plugin.ts @@ -1,7 +1,6 @@ import { cached, tracked } from '@glimmer/tracking'; import { assert } from '@ember/debug'; import { isDestroyed, isDestroying } from '@ember/destroyable'; -import { action } from '@ember/object'; import { preferences } from '../../plugins/index.ts'; @@ -258,15 +257,13 @@ export class ColumnMeta { return styles; } - @action - resize(delta: number): void { + resize = (delta: number): void => { this.tableMeta.resizeColumn(this.column, delta); - } + }; - @action - save(): void { + save = (): void => { this.tableMeta.saveColWidths(this.tableMeta.visibleColumnMetas); - } + }; } /** @@ -357,8 +354,7 @@ export class TableMeta { ); } - @action - saveColWidths(visibleColumnMetas: ColumnMeta[]): void { + saveColWidths = (visibleColumnMetas: ColumnMeta[]): void => { const tablePrefs = this.table.preferences; for (const column of visibleColumnMetas) { @@ -369,19 +365,17 @@ export class TableMeta { } tablePrefs.persist(); - } + }; - @action - reset(): void { + reset = (): void => { if (!this.scrollContainerWidth) return; for (const column of this.visibleColumnMetas) { column._width = undefined; } - } + }; - @action - onTableResize(entry: ResizeObserverEntry): void { + onTableResize = (entry: ResizeObserverEntry): void => { assert( 'scroll container element must be an HTMLElement', entry.target instanceof HTMLElement, @@ -403,13 +397,12 @@ export class TableMeta { this.scrollContainerWidth - this.totalVisibleColumnsWidth - totalGap; distributeDelta(diff, this.#availableColumns); - } + }; - @action - resizeColumn( + resizeColumn = ( column: Column, delta: number, - ): void { + ): void => { if (delta === 0) return; const tableLayout = this.options?.tableLayout ?? 'auto'; @@ -419,7 +412,7 @@ export class TableMeta { } else { this.#resizeColumnAuto(column, delta); } - } + }; /** * Simple column resizing for table-layout: fixed diff --git a/table/src/plugins/column-visibility/plugin.ts b/table/src/plugins/column-visibility/plugin.ts index ca94da3..4d78b56 100644 --- a/table/src/plugins/column-visibility/plugin.ts +++ b/table/src/plugins/column-visibility/plugin.ts @@ -1,5 +1,4 @@ import { cached } from '@glimmer/tracking'; -import { action } from '@ember/object'; import { BasePlugin, meta, options, preferences } from '../-private/base.ts'; @@ -149,10 +148,9 @@ export class TableMeta { }); } - @action - toggleColumnVisibility(column: Column): void { + toggleColumnVisibility = (column: Column): void => { const columnMeta = meta.forColumn(column, ColumnVisibility); columnMeta.toggle(); - } + }; } diff --git a/table/src/plugins/data-sorting/plugin.ts b/table/src/plugins/data-sorting/plugin.ts index fb17ed2..31b2ff4 100644 --- a/table/src/plugins/data-sorting/plugin.ts +++ b/table/src/plugins/data-sorting/plugin.ts @@ -1,5 +1,4 @@ import { cached } from '@glimmer/tracking'; -import { action } from '@ember/object'; import { BasePlugin, meta, options } from '../-private/base.ts'; import { SortDirection } from './types.ts'; @@ -159,8 +158,7 @@ export class TableMeta { return this.options?.onSort; } - @action - handleSort(column: Column): void { + handleSort = (column: Column): void => { const columnMeta = meta.forColumn(column, Sorting); if (!columnMeta.sortProperty) { @@ -184,10 +182,9 @@ export class TableMeta { }, ]); } - } + }; - @action - toggleAscending(column: Column): void { + toggleAscending = (column: Column): void => { const columnMeta = meta.forColumn(column, Sorting); if (!columnMeta.sortProperty) { @@ -201,10 +198,9 @@ export class TableMeta { this.onSort?.([ { direction: SortDirection.Ascending, property: columnMeta.sortProperty }, ]); - } + }; - @action - toggleDescending(column: Column): void { + toggleDescending = (column: Column): void => { const columnMeta = meta.forColumn(column, Sorting); if (!columnMeta.sortProperty) { @@ -221,5 +217,5 @@ export class TableMeta { property: columnMeta.sortProperty, }, ]); - } + }; }