From 6b9b13058b9be3fcf9662a48ab2cefe3fe981145 Mon Sep 17 00:00:00 2001 From: Matthew Beale Date: Wed, 22 May 2019 18:19:17 -0400 Subject: [PATCH 1/3] Minimize CPs for ember-tr --- addon/components/ember-tr/component.js | 28 ++++++----------- addon/components/ember-tr/template.hbs | 42 +++++++++++++------------- 2 files changed, 31 insertions(+), 39 deletions(-) diff --git a/addon/components/ember-tr/component.js b/addon/components/ember-tr/component.js index 820adeb25..25a779366 100644 --- a/addon/components/ember-tr/component.js +++ b/addon/components/ember-tr/component.js @@ -72,32 +72,23 @@ export default Component.extend({ */ onDoubleClick: null, - rowValue: readOnly('api.rowValue'), + isSelected: readOnly('api.rowMeta.isSelected'), - rowMeta: readOnly('api.rowMeta'), + isGroupSelected: readOnly('api.rowMeta.isGroupSelected'), - cells: readOnly('api.cells'), - - rowSelectionMode: readOnly('api.rowSelectionMode'), - - isHeader: readOnly('api.isHeader'), - - isSelected: readOnly('rowMeta.isSelected'), - - isGroupSelected: readOnly('rowMeta.isGroupSelected'), - - isSelectable: computed('rowSelectionMode', function() { - let rowSelectionMode = this.get('rowSelectionMode'); + isSelectable: computed('api.rowSelectionMode', function() { + let rowSelectionMode = this.get('api').rowSelectionMode; return rowSelectionMode === SELECT_MODE.MULTIPLE || rowSelectionMode === SELECT_MODE.SINGLE; }), click(event) { - let rowSelectionMode = this.get('rowSelectionMode'); + let api = this.get('api'); + let rowSelectionMode = api.rowSelectionMode; let inputParent = closest(event.target, 'input, button, label, a, select'); if (!inputParent) { - let rowMeta = this.get('rowMeta'); + let rowMeta = api.rowMeta; if (rowMeta && rowSelectionMode === SELECT_MODE.MULTIPLE) { let toggle = event.ctrlKey || event.metaKey; @@ -117,8 +108,9 @@ export default Component.extend({ }, sendEventAction(action, event) { - let rowValue = this.get('rowValue'); - let rowMeta = this.get('rowMeta'); + let api = this.get('api'); + let rowValue = api.rowValue; + let rowMeta = api.rowMeta; let closureAction = this[action]; diff --git a/addon/components/ember-tr/template.hbs b/addon/components/ember-tr/template.hbs index 456086051..a67870d1f 100644 --- a/addon/components/ember-tr/template.hbs +++ b/addon/components/ember-tr/template.hbs @@ -1,39 +1,39 @@ -{{#each cells as |api|}} +{{#each api.cells as |cellApi|}} {{#if hasBlock}} - {{#if isHeader}} + {{#if api.isHeader}} {{yield (hash - columnValue=api.columnValue - columnMeta=api.columnMeta + columnValue=cellApi.columnValue + columnMeta=cellApi.columnMeta - sorts=api.sorts - sendUpdateSort=api.sendUpdateSort + sorts=cellApi.sorts + sendUpdateSort=cellApi.sendUpdateSort - rowMeta=api.rowMeta - rowsCount=api.rowsCount + rowMeta=cellApi.rowMeta + rowsCount=cellApi.rowsCount - cell=(component "ember-th" api=api) + cell=(component "ember-th" api=cellApi) )}} {{else}} {{yield (hash - api=api + api=cellApi - cellValue=api.cellValue - cellMeta=api.cellMeta + cellValue=cellApi.cellValue + cellMeta=cellApi.cellMeta - columnValue=api.columnValue - columnMeta=api.columnMeta + columnValue=cellApi.columnValue + columnMeta=cellApi.columnMeta - rowValue=api.rowValue - rowMeta=api.rowMeta + rowValue=cellApi.rowValue + rowMeta=cellApi.rowMeta - rowsCount=api.rowsCount + rowsCount=cellApi.rowsCount - cell=(component "ember-td" api=api) + cell=(component "ember-td" api=cellApi) )}} {{/if}} - {{else if isHeader}} - {{ember-th api=api}} + {{else if api.isHeader}} + {{ember-th api=cellApi}} {{else}} - {{ember-td api=api}} + {{ember-td api=cellApi}} {{/if}} {{/each}} From 067105629a76e2fb927b358c75f047147adecc69 Mon Sep 17 00:00:00 2001 From: Matthew Beale Date: Wed, 22 May 2019 20:20:54 -0400 Subject: [PATCH 2/3] Minimize CP for ember-td --- addon/components/ember-td/component.js | 60 ++++++++++---------------- addon/components/ember-td/template.hbs | 14 +++--- 2 files changed, 29 insertions(+), 45 deletions(-) diff --git a/addon/components/ember-td/component.js b/addon/components/ember-td/component.js index 486f6d911..e0c4d82e5 100644 --- a/addon/components/ember-td/component.js +++ b/addon/components/ember-td/component.js @@ -1,8 +1,5 @@ import BaseTableCell from '../-private/base-table-cell'; - import { computed } from '@ember/object'; -import { alias, readOnly } from '@ember/object/computed'; - import layout from './template'; import { SELECT_MODE } from '../../-private/collapse-tree'; @@ -66,32 +63,13 @@ export default BaseTableCell.extend({ return this.get('api.api') || this.get('api'); }), - cellValue: alias('unwrappedApi.cellValue'), - - cellMeta: readOnly('unwrappedApi.cellMeta'), - - columnValue: readOnly('unwrappedApi.columnValue'), - - columnMeta: readOnly('unwrappedApi.columnMeta'), - - rowValue: readOnly('unwrappedApi.rowValue'), - - rowMeta: readOnly('unwrappedApi.rowMeta'), - - rowsCount: readOnly('unwrappedApi.rowsCount'), - - rowSelectionMode: readOnly('unwrappedApi.rowSelectionMode'), - - checkboxSelectionMode: readOnly('unwrappedApi.checkboxSelectionMode'), - - canCollapse: readOnly('rowMeta.canCollapse'), - - depthClass: computed('rowMeta.depth', function() { - return `depth-${this.get('rowMeta.depth')}`; + depthClass: computed('unwrappedApi.rowMeta.depth', function() { + return `depth-${this.get('unwrappedApi.rowMeta.depth')}`; }), - canSelect: computed('shouldShowCheckbox', 'rowSelectionMode', function() { - let rowSelectionMode = this.get('rowSelectionMode'); + canSelect: computed('shouldShowCheckbox', 'unwrappedApi.rowSelectionMode', function() { + let unwrappedApi = this.get('unwrappedApi'); + let rowSelectionMode = unwrappedApi.get('rowSelectionMode'); let shouldShowCheckbox = this.get('shouldShowCheckbox'); return ( @@ -101,8 +79,9 @@ export default BaseTableCell.extend({ ); }), - shouldShowCheckbox: computed('checkboxSelectionMode', function() { - let checkboxSelectionMode = this.get('checkboxSelectionMode'); + shouldShowCheckbox: computed('unwrappedApi.checkboxSelectionMode', function() { + let unwrappedApi = this.get('unwrappedApi'); + let checkboxSelectionMode = unwrappedApi.get('checkboxSelectionMode'); return ( checkboxSelectionMode === SELECT_MODE.MULTIPLE || checkboxSelectionMode === SELECT_MODE.SINGLE @@ -111,8 +90,10 @@ export default BaseTableCell.extend({ actions: { onSelectionToggled(event) { - let rowMeta = this.get('rowMeta'); - let checkboxSelectionMode = this.get('checkboxSelectionMode') || this.get('rowSelectionMode'); + let unwrappedApi = this.get('unwrappedApi'); + let rowMeta = unwrappedApi.get('rowMeta'); + let checkboxSelectionMode = + unwrappedApi.get('checkboxSelectionMode') || unwrappedApi.get('rowSelectionMode'); if (rowMeta && checkboxSelectionMode === SELECT_MODE.MULTIPLE) { let toggle = true; @@ -127,7 +108,8 @@ export default BaseTableCell.extend({ }, onCollapseToggled() { - let rowMeta = this.get('rowMeta'); + let unwrappedApi = this.get('unwrappedApi'); + let rowMeta = unwrappedApi.get('rowMeta'); rowMeta.toggleCollapse(); @@ -149,14 +131,16 @@ export default BaseTableCell.extend({ return; } - let cellValue = this.get('cellValue'); - let cellMeta = this.get('cellMeta'); + let { unwrappedApi } = this; + + let cellValue = unwrappedApi.get('cellValue'); + let cellMeta = unwrappedApi.get('cellMeta'); - let columnValue = this.get('columnValue'); - let columnMeta = this.get('columnMeta'); + let columnValue = unwrappedApi.get('columnValue'); + let columnMeta = unwrappedApi.get('columnMeta'); - let rowValue = this.get('rowValue'); - let rowMeta = this.get('rowMeta'); + let rowValue = unwrappedApi.get('rowValue'); + let rowMeta = unwrappedApi.get('rowMeta'); Object.assign(values, { cellValue, diff --git a/addon/components/ember-td/template.hbs b/addon/components/ember-td/template.hbs index d9d81914d..22f7b5a2d 100644 --- a/addon/components/ember-td/template.hbs +++ b/addon/components/ember-td/template.hbs @@ -7,7 +7,7 @@ > {{-ember-table-private/simple-checkbox data-test-select-row=true - checked=rowMeta.isGroupSelected + checked=unwrappedApi.rowMeta.isGroupSelected onClick=(action "onSelectionToggled") ariaLabel="Select row" }} @@ -15,11 +15,11 @@ {{/if}} - {{#if canCollapse}} + {{#if unwrappedApi.rowMeta.canCollapse}} {{-ember-table-private/simple-checkbox data-test-collapse-row=true - checked=rowMeta.isCollapsed + checked=unwrappedApi.rowMeta.isCollapsed onChange=(action "onCollapseToggled") ariaLabel="Collapse row" }} @@ -31,16 +31,16 @@
{{#if hasBlock}} - {{yield cellValue columnValue rowValue cellMeta columnMeta rowMeta rowsCount}} + {{yield unwrappedApi.cellValue unwrappedApi.columnValue unwrappedApi.rowValue unwrappedApi.cellMeta unwrappedApi.columnMeta unwrappedApi.rowMeta unwrappedApi.rowsCount}} {{else}} - {{cellValue}} + {{unwrappedApi.cellValue}} {{/if}}
{{else}} {{#if hasBlock}} - {{yield cellValue columnValue rowValue cellMeta columnMeta rowMeta rowsCount}} + {{yield unwrappedApi.cellValue unwrappedApi.columnValue unwrappedApi.rowValue unwrappedApi.cellMeta unwrappedApi.columnMeta unwrappedApi.rowMeta unwrappedMeta.rowsCount}} {{else}} - {{cellValue}} + {{unwrappedApi.cellValue}} {{/if}} {{/if}} From 2132302db13a3e0afc2436a8c0147c3b232b390a Mon Sep 17 00:00:00 2001 From: Matthew Beale Date: Thu, 23 May 2019 08:51:38 -0400 Subject: [PATCH 3/3] Avoid allocating some closures for iteration --- addon/components/-private/row-wrapper.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/addon/components/-private/row-wrapper.js b/addon/components/-private/row-wrapper.js index afe0fed4f..4287eeb95 100644 --- a/addon/components/-private/row-wrapper.js +++ b/addon/components/-private/row-wrapper.js @@ -53,7 +53,9 @@ export default Component.extend({ }, destroy() { - this._cells.forEach(cell => cell.destroy()); + for (let cell of this._cells) { + cell.destroy(); + } this._super(...arguments); }, @@ -114,7 +116,8 @@ export default Component.extend({ } } - _cells.forEach((cell, i) => { + for (let i = 0; i < this._cells.length; i++) { + let cell = this._cells[i]; let columnValue = objectAt(columns, i); let columnMeta = this.get('columnMetaCache').get(columnValue); @@ -128,7 +131,7 @@ export default Component.extend({ rowValue, rowsCount, }); - }); + } return _cells; }