tracked property using "args" not updating

[habdelra]

I've run into a scenario where a property that tracks a field off of this.args is not updating. I've setup a GH project to demonstrate this here: https://github.com/habdelra/glimmer-tracking-args.

To summarize I have a parent component that contains a child component, with a data binding as expressed in the template.

The parent component looks like this:

import Component, { tracked } from "@glimmer/component";

export default class GlimmerTrackingArgs extends Component {
  @tracked
  model: any = {
    foo: "bar",
    bleep: "blurp"
  };

  @tracked ("model")
  get stringifiedModel() {
    return JSON.stringify(this.model);
  }

  didInsertElement() {
    setTimeout(() => {
      this.model = {
        ...this.model,
        foo: "bloop"
      };
    }, 1000);
  }
}

the parent component template:

<div>
  <h1>Welcome to Glimmer!</h1>
  model: <pre>{{stringifiedModel}}</pre>
  <child-component @model={{model}}></child-component>
</div>

The child component has a tracked property that has a dependency on the passed in @model, but it never seems to update:

import Component, { tracked } from "@glimmer/component";

export default class ChildComponent extends Component {
  @tracked ("args.model.foo")
  get foo() {
    return this.args["model"].foo;
  }
}

The child component template:

<div>
  <div>tracked model.foo <b>{{foo}}</b></div>
  <div>@model.foo: <b>{{@model.foo}}</b></div>
</div>

when you run this app, you see this:

[locks]

@habdelra I believe @tracked does not support paths, can you try @tracked('args')?

[habdelra]

That's actually already in the Component base class: https://github.com/glimmerjs/glimmer-component/blob/master/src/component.ts#L165

[pittst3r]

@habdelra Remember that these are different:

// "The `args` property changes"
@tracked args;

and

// "The `someOtherThing` property changes, and may change when `args` changes"
@tracked('args')
get someOtherThing() {
  let { whatevs } = this.args;
}

[dgeb]

@habdelra this change seems to work in your repo:

import Component, { tracked } from "@glimmer/component";

export default class ChildComponent extends Component {

-  @tracked ("args.model.foo")
+  @tracked("args")
  get foo() {
    return this.args["model"].foo;
  }

}

This makes foo dependent upon args, which will change whenever any argument changes. Dependencies are only tracked shallowly.

[habdelra]

Thanks Dan!