diff --git a/packages/@glimmer-workspace/integration-tests/test/updating-test.ts b/packages/@glimmer-workspace/integration-tests/test/updating-test.ts
index 46f2c627834..3f6eeff4b83 100644
--- a/packages/@glimmer-workspace/integration-tests/test/updating-test.ts
+++ b/packages/@glimmer-workspace/integration-tests/test/updating-test.ts
@@ -7,6 +7,7 @@ import { createComputeRef, createConstRef, createPrimitiveRef } from '@glimmer/r
import { consumeTag, createTag, dirtyTag } from '@glimmer/validator';
import {
assertNodeTagName,
+ defineComponent,
getElementByClassName,
getElementsByTagName,
GlimmerishComponent,
@@ -15,6 +16,7 @@ import {
stripTight,
test,
tracked,
+ trackedObj,
trimLines,
} from '@glimmer-workspace/integration-tests';
@@ -792,6 +794,77 @@ class UpdatingTest extends RenderTest {
this.assertHTML('truthy', 'If the condition is true, the truthy value renders');
}
+ @test
+ 'if keyword in append position with arg as condition [GH emberjs/ember.js#21042]'() {
+ const Ok = defineComponent({}, 'ok');
+ const Ko = defineComponent({}, 'ko');
+ const Flipper = defineComponent({ Ok, Ko }, '{{if @isOk Ok Ko}}');
+
+ let args = trackedObj({ isOk: true });
+
+ this.renderComponent(Flipper, args);
+ this.assertHTML('ok', 'Initial render');
+
+ args['isOk'] = false;
+ this.rerender();
+ this.assertHTML('ko', 'If the condition is false, the falsy component renders');
+
+ args['isOk'] = true;
+ this.rerender();
+ this.assertHTML('ok', 'If the condition is true, the truthy component renders');
+ }
+
+ @test
+ 'unless keyword in append position with arg as condition [GH emberjs/ember.js#21042]'() {
+ const Ok = defineComponent({}, 'ok');
+ const Ko = defineComponent({}, 'ko');
+ const Flipper = defineComponent({ Ok, Ko }, '{{unless @isOk Ko Ok}}');
+
+ let args = trackedObj({ isOk: false });
+
+ this.renderComponent(Flipper, args);
+ this.assertHTML('ko', 'Initial render');
+
+ args['isOk'] = true;
+ this.rerender();
+ this.assertHTML('ok', 'If the condition is true, the truthy component renders');
+
+ args['isOk'] = false;
+ this.rerender();
+ this.assertHTML('ko', 'If the condition is false, the falsy component renders');
+ }
+
+ @test
+ 'if keyword in append position with @tracked arg as condition [GH emberjs/ember.js#21042]'() {
+ const Ok = defineComponent({}, 'ok');
+ const Ko = defineComponent({}, 'ko');
+ const Flipper = defineComponent({ Ok, Ko }, '{{if @isOk Ok Ko}}');
+
+ let instance!: { isOk: boolean };
+
+ const Demo = defineComponent({ Flipper }, '', {
+ definition: class extends GlimmerishComponent {
+ @tracked isOk = true;
+
+ constructor(owner: object, args: Record) {
+ super(owner, args);
+ instance = this;
+ }
+ },
+ });
+
+ this.renderComponent(Demo);
+ this.assertHTML('ok', 'Initial render');
+
+ instance.isOk = false;
+ this.rerender();
+ this.assertHTML('ko', 'If the condition is false, the falsy component renders');
+
+ instance.isOk = true;
+ this.rerender();
+ this.assertHTML('ok', 'If the condition is true, the truthy component renders');
+ }
+
@test
'unless keyword in call position'() {
this.registerComponent('TemplateOnly', 'Foo', '{{@value}}');
diff --git a/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts b/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts
index 466add49cc9..4f4b29746ea 100644
--- a/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts
+++ b/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts
@@ -56,6 +56,7 @@ export function StdAppend(
if (typeof nonDynamicAppend === 'number') {
when(ContentType.Component, () => {
+ op(VM_ASSERT_SAME_OP);
op(VM_RESOLVE_CURRIED_COMPONENT_OP);
op(VM_PUSH_DYNAMIC_COMPONENT_INSTANCE_OP);
InvokeBareComponent(op);