Devin: try to fix inline if helper bug

Author: NullVoxPopuli

packages/@glimmer-workspace/integration-tests/test/helpers/if-inline-test.ts

@@ -0,0 +1,141 @@
+import {
+  GlimmerishComponent,
+  jitSuite,
+  RenderTest,
+  strip,
+  test,
+  tracked,
+} from '@glimmer-workspace/integration-tests';
+
+class IfInlineTest extends RenderTest {
+  static suiteName = 'Helpers test: inline {{if}}';
+
+  @test
+  'inline if helper updates when tracked property changes'() {
+    class Person {
+      @tracked isActive = false;
+      
+      toggle() {
+        this.isActive = !this.isActive;
+      }
+    }
+
+    const person = new Person();
+
+    this.render(
+      strip`<div>{{if this.person.isActive "Active" "Inactive"}}</div>`,
+      { person }
+    );
+
+    this.assertHTML('<div>Inactive</div>', 'Initial render shows inactive state');
+    this.assertStableRerender();
+
+    person.toggle();
+    this.rerender();
+    this.assertHTML('<div>Active</div>', 'Updates when tracked property changes to true');
+
+    person.toggle();
+    this.rerender();
+    this.assertHTML('<div>Inactive</div>', 'Updates when tracked property changes to false');
+  }
+
+  @test
+  'inline if helper with only truthy value updates when tracked property changes'() {
+    class Person {
+      @tracked isActive = false;
+      
+      toggle() {
+        this.isActive = !this.isActive;
+      }
+    }
+
+    const person = new Person();
+
+    this.render(
+      strip`<div>{{if this.person.isActive "Active"}}</div>`,
+      { person }
+    );
+
+    this.assertHTML('<div></div>', 'Initial render shows empty when false');
+    this.assertStableRerender();
+
+    person.toggle();
+    this.rerender();
+    this.assertHTML('<div>Active</div>', 'Updates when tracked property changes to true');
+
+    person.toggle();
+    this.rerender();
+    this.assertHTML('<div></div>', 'Updates when tracked property changes to false');
+  }
+
+  @test
+  'inline if helper updates when component argument changes'() {
+    let testComponent: TestComponent;
+    
+    class TestComponent extends GlimmerishComponent {
+      @tracked isActive = false;
+      
+      constructor(owner: object, args: Record<string, unknown>) {
+        super(owner, args);
+        testComponent = this;
+      }
+    }
+
+    this.registerComponent(
+      'Glimmer',
+      'TestComponent',
+      '{{if @isActive "Active" "Inactive"}}',
+      TestComponent
+    );
+
+    this.render(
+      strip`<TestComponent @isActive={{this.isActive}} />`,
+      { isActive: false }
+    );
+
+    this.assertHTML('Inactive', 'Initial render shows inactive state');
+    this.assertStableRerender();
+
+    this.rerender({ isActive: true });
+    this.assertHTML('Active', 'Updates when argument changes to true');
+
+    this.rerender({ isActive: false });
+    this.assertHTML('Inactive', 'Updates when argument changes to false');
+  }
+
+  @test
+  'comparison with block form if helper'() {
+    class Person {
+      @tracked isActive = false;
+      
+      toggle() {
+        this.isActive = !this.isActive;
+      }
+    }
+
+    const person = new Person();
+
+    this.render(
+      strip`
+        <div>
+          Inline: {{if this.person.isActive "Active" "Inactive"}}
+          Block: {{#if this.person.isActive}}Active{{else}}Inactive{{/if}}
+        </div>
+      `,
+      { person }
+    );
+
+    this.assertHTML('<div>Inline: Inactive Block: Inactive</div>', 'Initial render both show inactive');
+    this.assertStableRerender();
+
+    person.toggle();
+    this.rerender();
+    this.assertHTML('<div>Inline: Active Block: Active</div>', 'Both update when tracked property changes to true');
+
+    person.toggle();
+    this.rerender();
+    this.assertHTML('<div>Inline: Inactive Block: Inactive</div>', 'Both update when tracked property changes to false');
+  }
+}
+
+jitSuite(IfInlineTest);

packages/@glimmer/runtime/lib/compiled/opcodes/expressions.ts

@@ -285,7 +285,10 @@ APPEND_OPCODES.add(VM_IF_INLINE_OP, (vm) => {
 
   vm.stack.push(
     createComputeRef(() => {
-      if (toBool(valueForRef(condition))) {
+      // Explicitly consume the condition reference to ensure tracking
+      let conditionValue = valueForRef(condition);
+      
+      if (toBool(conditionValue)) {
         return valueForRef(truthy);
       } else {
         return valueForRef(falsy);