Doesn't seem to work with ES Class components

[knownasilya]

I converted the child components and those worked good, but after I converted the parent component, which was an ES Class, it no longer worked. I think the @ on the args isn't passing the data to the child components. Here's my code:

<LayoutsList
  @name='Preview'
  @type='preview'
  @sortable=false
  @layouts={{previewLayouts}}
  @dataset={{dataset}}
  @onChangeOrder={{route-action 'changeOrder'}}
  @onAdd={{route-action 'add'}}
  @onEdit={{route-action 'edit'}} />

And passing {{@name}} to a child component doesn't work, but {{name}} does. cc @pzuraq

P.S. Using @ args in a non ES Class component does work.

[pzuraq]

Can you post the template and class definition for the component?

[knownasilya]

<h4>{{@name}}</h4>

{{#if @sortable}}
  <SortableDataTable
    @editIdKey='pk'
    @addLabel='Add Layout'
    @data={{@layouts}}
    @columns={{@columns}}
    @onAdd={{action @onAdd}}
    @onSort={{action @onChangeOrder @layouts}} />
{{else}}
  <DataTable
    @editIdKey='pk'
    @data={{@layouts}}
    @columns={{@columns}} />
{{/if}}

import Component from '@ember/component';
import { get } from '@ember/object';
import { action } from '@ember-decorators/object';
import uuid from 'npm:uuid';

export default class LayoutsList extends Component {
  sortable = true;

  constructor() {
    super(...arguments);

    let type = this.type;
    let dataset = this.dataset;
    let actions = [
      {
        name: 'Edit',
        icon: 'fa-pencil',
        primary: true,
        action: (datum) => {
          let layoutId = get(datum, 'pk') || uuid.v4();
          let datasetId = get(dataset, 'id');

          return this.onEdit(datasetId, layoutId, type);
        }
      }
    ];

    let columns = [
      { name: 'Name', key: 'name' }
    ];

    if (type !== 'preview') {
      columns.push({ name: 'Type', key: 'layoutType' });
    }

    columns.push({ name: 'Actions', type: 'actions', actions });

    this.columns = columns;
  }

  @action
  add() {
    let dataset = this.dataset;
    let type = this.type;
    let layoutId = uuid.v4();
    let datasetId = get(dataset, 'id');

    return this.onAdd(datasetId, layoutId, type);
  }
}

Note that {{@name}} and {{@sortable}} (ones not passed to child components) render fine.

[rwjblue]

Can you help whip up a repro? I suspect there is an interaction with how we expect the setter CP to be ran in the polyfill, but having a demo would make it easier to dig in...

[pzuraq]

One note is that @columns will be null because it’s not an argument passed to <LayoutList>, it’s set directly on the class in the class constructor. @ syntax will not reference the class, just arguments that are passed into the component (unmodified)

[knownasilya]

Ah, and that note solved the issue. Reaping benefits already from this setup! My bad!