add reproduction of emberjs/ember.js#18969

app/components/demo.hbs

@@ -0,0 +1,29 @@
+<ol>
+  <li>Open browser dev tools</li>
+  <li>click "Make True"</li>
+  <li>click "Make False"</li>
+  <li>Notice an error in the console</li>
+</ol>
+
+<button {{on 'click' this.makeTrue}}>
+  Make True
+</button>
+
+<button {{on 'click' this.makeFalse}}>
+  Make False
+</button>
+
+<hr>
+
+{{#if (eq this.data.kind 'foo')}}
+  Some Deep Render Requiring nested Data, based on the assumpting that kind is foo
+  <SubComponent @data={{this.data}} />
+{{else}}
+  Click "Make True"
+{{/if}}
+
+<hr>
+
+<pre>this.data =
+{{as-formatted-string this.data}}
+</pre>

app/components/demo.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+class Data {
+  @tracked kind;
+  @tracked nestedData;
+
+  constructor(kind, nestedData) {
+    this.kind = kind;
+    this.nestedData = nestedData;
+  }
+
+  toJSON() {
+    let { kind, nestedData } = this;
+    return { kind, nestedData };
+  }
+}
+
+export default class DemoRoot extends Component {
+  @tracked data;
+
+  @action
+  makeTrue() {
+    this.data = new Data('foo', new Data('baz'));
+  }
+
+  @action
+  makeFalse() {
+    this.data = new Data('bar');
+  }
+}

app/components/link.hbs

@@ -0,0 +1,3 @@
+<a ...attributes target="_blank">
+  {{yield}}
+</a>

app/components/sub-component.hbs

@@ -0,0 +1 @@
+<span {{data-attributes-from this.derivedData}}>{{@data.kind}}</span>

app/components/sub-component.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class SubComponent extends Component {
+
+  get derivedData() {
+    return this.args.data.nestedData.kind;
+  }
+}

app/components/title.hbs

@@ -0,0 +1,7 @@
+<h1>
+	Reproduction of
+
+  <Link href="https://github.com/emberjs/ember.js/issues/18969">
+  	emberjs/ember.js#18969
+  </Link>
+</h1>

app/helpers/as-formatted-string.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function asFormattedString([a]/*, hash*/) {
+  return a ? JSON.stringify(a, null, 2) : `${a}`;
+});

app/helpers/eq.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function eq([a, b]/*, hash*/) {
+  return a === b;
+});

app/index.html

@@ -11,6 +11,7 @@
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/repro-repo-emberjs-18969.css">
+    <link rel="stylesheet" href="https://cdn.shoelace.style/1.0.0-beta.25/shoelace.css">
 
     {{content-for "head-footer"}}
   </head>

app/modifiers/data-attributes-from.js

@@ -0,0 +1,7 @@
+import Modifier from 'ember-modifier';
+
+export default class DataAttributesFrom extends Modifier {
+	didReceiveArguments() {
+    this.element.dataset['appliedData'] = this.args.positional[0];
+  }
+}

app/styles/app.css

@@ -0,0 +1,3 @@
+body {
+  padding: 1rem;
+}

app/templates/application.hbs

@@ -1,5 +1,5 @@
-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
+<Title />
 
-{{outlet}}
+<br><br>
+
+<Demo />

package.json

@@ -39,6 +39,7 @@
     "ember-fetch": "^8.0.1",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-modifier": "^1.0.3",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^8.0.0",
     "ember-source": "~3.18.0",

tests/integration/components/demo-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | demo', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Demo />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Demo>
+        template block text
+      </Demo>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/link-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | link', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Link />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Link>
+        template block text
+      </Link>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/sub-component-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | sub-component', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<SubComponent />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <SubComponent>
+        template block text
+      </SubComponent>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/title-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | title', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Title />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Title>
+        template block text
+      </Title>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/helpers/as-formatted-string-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | as-formatted-string', function(hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function(assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{as-formatted-string inputValue}}`);
+
+    assert.equal(this.element.textContent.trim(), '1234');
+  });
+});

tests/integration/helpers/eq-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | eq', function(hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function(assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{eq inputValue}}`);
+
+    assert.equal(this.element.textContent.trim(), '1234');
+  });
+});

tests/integration/modifiers/data-attributes-from-test.js

@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Modifier | data-attributes-from', function(hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function(assert) {
+    await render(hbs`<div {{data-attributes-from}}></div>`);
+
+    assert.ok(true);
+  });
+});

yarn.lock

@@ -4447,7 +4447,7 @@ ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.12.0, ember-cli-babel@^6.16.0,
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
-ember-cli-babel@^7.11.0, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.4.1, ember-cli-babel@^7.7.3:
+ember-cli-babel@^7.10.0, ember-cli-babel@^7.11.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.4.1, ember-cli-babel@^7.7.3:
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.21.0.tgz#c79e888876aee87dfc3260aee7cb580b74264bbc"
   integrity sha512-jHVi9melAibo0DrAG3GAxid+29xEyjBoU53652B4qcu3Xp58feZGTH/JGXovH7TjvbeNn65zgNyoV3bk1onULw==
@@ -4871,6 +4871,26 @@ ember-maybe-import-regenerator@^0.1.6:
     ember-cli-babel "^6.0.0-beta.4"
     regenerator-runtime "^0.9.5"
 
+ember-modifier-manager-polyfill@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda"
+  integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==
+  dependencies:
+    ember-cli-babel "^7.10.0"
+    ember-cli-version-checker "^2.1.2"
+    ember-compatibility-helpers "^1.2.0"
+
+ember-modifier@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-1.0.3.tgz#ab18250666aad17c0d9170feb178e954148eb4ed"
+  integrity sha512-vWuFyvdkULUyasvEXxe5lcfuPZV/Uqe+b0IQ1yU+TY1RSJnFdVUu/CVHT8Bu4HUJInqzAihwPMTwty7fypzi5Q==
+  dependencies:
+    ember-cli-babel "^7.11.1"
+    ember-cli-is-package-missing "^1.0.0"
+    ember-cli-normalize-entity-name "^1.0.0"
+    ember-cli-string-utils "^1.1.0"
+    ember-modifier-manager-polyfill "^1.2.0"
+
 ember-qunit@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/ember-qunit/-/ember-qunit-4.6.0.tgz#ad79fd3ff00073a8779400cc5a4b44829517590f"