glimmerjs / glimmer-vm

MIT License
1.13k stars 191 forks source link

Bug: inline if helper doesn't work when condition is an arg #1642

Open NullVoxPopuli opened 2 weeks ago

NullVoxPopuli commented 2 weeks ago

Reproduction:https://limber.glimdown.com/edit?c=JYWwDg9gTgLgBAYQuCA7Apq%2BAzKy4DkAAgOYA2oI6UA9AMbKQZYEDcAUKJLHAN5wwoAQzoBrdABM4AXzi58xcpWo1BI0cFQk27dg1QBneAHlRcALxwAPDHTgyQ2wD5TV1XbAPnHfUbgBpCAtrW3tHdCdAt1DPcKcOPTQ-ADEKMDBqYJsPLwj2OD5eYGw4ImADUzhKwOlpXQLeXgBiYtLy01r8gu6rSponLsb0MgN0Tu6ewLh%2Bwd4aYs7onLiE9AAPbngJdGwhAFcyeDoHAwM4ABE7IPXbVAkzpBRmeF4uojUxSTh2s0tdkfQHAK2DSwQAFABKCxOAQAC3KADofsEAIQweEGJEVUQJArZMLOLp41LAdKZMrY8yNdGIn61aYDCZWABGexgMDQcDQx2AYipvBpmJBpNqThJYDcrPZaEZ1ncBLy0iAA&format=gjs

Code:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

const Ok = <template>Ok</template>;
const Ko = <template>Ko</template>;

const Flipper = <template>
  {{if @isOk Ok Ko}}

  {{#if @isOk}}
      <Ok />
  {{else}}
      <Ko />
  {{/if}}
</template>;

export default class Demo extends Component {
  @tracked isOk = false;
  flip = () => this.isOk = !this.isOk;

  <template>
    <Flipper @isOk={{this.isOk}} />
    <button onclick={{this.flip}}>Flip</button>
  </template>
}

Problem:

the inline if doesn't update its returned value when @isOk changes, but the block-form does.

patricklx commented 2 weeks ago

It works with simple strings though.

patricklx commented 2 weeks ago

I mean {{if @isOk 'ok' 'ko'}} And

{{#let (if @isOk Ok Ko) as |okko|}}
    <okko/>
  {{/let}}

Maybe it's not supposed to render components from inline if. Maybe helper would work. {{if @isOk (ok) (ko)}}