tracked property (dependent on "args") in child component is out of sync

[bantic]

While attempting to follow along with the glimmerjs guides, @rondale-sc and I had some difficulty using @tracked('args') to create a derived computed property in a child component.

The guides suggest using the following to create a child component that has a computed property multiplied that updates when its args.number changes:

import Component from '@glimmer/component';

export default class MultiplyByTwo extends Component {
  @tracked('args')
  get multiplied() {
    return this.args.number * 2;
  }
}

<!-- my-parent/template.hbs -->
<multiply-by-two @number={{myNumber} />}

<!-- multiply-by-two/template.hbs -->
{{multiplied}}

This seems to work as expected in the glimmer-playground (which appears to use @glimmer/component version 0.5.0). This is a link to a working version (with code lightly adapted from the code from the guides): http://bit.ly/2syFV7c

However, in a new glimmer app (created using ember cli with the @glimmer/blueprint blueprint), using @glimmer/application v0.7.2 and @glimmer/component v0.6.0, the same code doesn't work correctly. Clicking the buttons updates the property shown in the template, but not the derived multiplied property.

Here is a link to a commit from the app that exhibits this issue:
bantic/bodega-glimmer-test@f296b4f

Expected behavior: Clicking "number: 2" immediately changes the template to display "multiply: 4 (@Number: 2)".
Actual behavior: On the first click, the @number text updates (to "@number: 2"), but the "multiply" text does not (i.e. `"multiply: 2 (@Number: 2)"). Clicking the same button a second time causes the template to display the expected output.

[deepan83]

Hitting the same problem

[rwjblue]

FYI - #67 is attempting to address this issue. I believe that it is good to go, but we need another round of review...

[chrmod]

have exactly same issue here. is there a beta channel to test the fix? @rwjblue @tomdale

[tomdale]

@chrmod @deepan83 Ack, sorry, I didn't realize we hadn't cut a new release since @robbiepitts's fix for this. @chrmod You should be able to install the dependency from GitHub for the moment to verify whether it's fixing your issue.

I will cut a new release either today or tomorrow morning. We are trying to move @glimmer/component and @glimmer/application into a monorepo (glimmerjs/glimmer.js#3) and this seems like a good test of the new system. I'll cut a new release once @rwjblue approves those changes, or just bite the bullet and do it with the existing setup if there are any problems with the PR that can't be immediately resolved.

[chrmod]

@tomdale thanks for the information.

I've tried building and linking @glimmer/component master, but each helper does not seem to work - nothing gets rendered. It may be due to to some incompatibility with my version of @glimmer/application or other modules.

I'm using glimmer without ember-cli (but with own, custom build system), so there may be other incompatible dependencies. To be honest it is very hard to figure out what exactly is need to build and run glimmer application, main reason is just the number of glimmer related repositories. So monorepo sounds like great idea for me.

[tomdale]

@chrmod I would bet linking is not working because you end up with two copies of @glimmer/reference. Tracked properties won't update correctly if you have duplicate @glimmer/reference packages because it uses a revision counter that is supposed to be global across the entire program. If you're not sharing that counter, Glimmer can't "see" the changes. If you npm install it into your app from GitHub, it should work, or you can make sure that both packages are using the same @glimmer/reference package.

[chrmod]

@tomdale this is all good to know, thank you again.

But how to npm install @glimmer/component from github?
Specifying dependency in this format

"@glimmer/component": "glimmerjs/glimmer-component",

fetches the project, but it is not build, so cannot be imported.
I assume that running build in this form will result with exact same output as linking.

[chrmod]

@tomdale ok, I've figured it out. Had to npm pack local version of glimmer-component and install it with npm install <path-to-glimmer-component.tgz>.

Can confirm that #67 fixes the problem.

Waiting for the release 😄

[GavinJoyce]

I'm keenly awaiting a new release so that I can complete my video tutorial on Glimmer.js. I'd rather not have to mention anything about avoiding 0.7.2.

@tomdale if the release is blocked for some reason, please LMK if there is anything you think I or others can do to help unblock it.

[tschoartschi]

It seems that I'm hitting the same problem. I created a repo, you can find it here: https://github.com/tschoartschi/glimmer-troubles I also created a screencast which is available here: https://github.com/tschoartschi/glimmer-troubles/blob/master/screencast.mov

[tomdale]

@tschoartschi Can you verify the issue is resolved on 0.8.x of Glimmer.js?

[GavinJoyce]

I can confirm that the issue is fixed in 0.8:

• Broken in 0.7
• Fixed in 0.8