maybe-glimmer-bug

components.manager-thing.js

import Ember from 'ember';

export default Ember.Component.extend({
  items: [
    {
      id: 1,
      type: 'thing-with-query',
      name: 'I am thing 1',
      query: JSON.stringify({
 "and": [
     { "lhs": "a", "op": "==", "rhs": 123 },
     { "lhs": "x", "op": "==", "rhs": "87" }
  ]
})
    },
    {
      id: 2,
      type: 'thing-with-query',
      name: 'I am thing 2',
      query: JSON.stringify({
 "and": [
     { "lhs": "foo", "op": "==", "rhs": "bar" },
     { "lhs": "dr", "op": "==", "rhs": "seuss" }
  ]
})
    },
    {
      id: 3,
      type: 'simple-thing',
      name: 'I am very simple',
      description: 'Lorem ipsum'
    }
  ],
  actions: {
    showItem(item) {
      this.set('selectedItem', item);
    }
  }
});

components.my-query.and-term.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  term: null,
  parentTerm: null
});

components.my-query.expression-term.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
  term: null,
  parentTerm: null
});

components.my-query.invalid-term.js

import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Component.extend({
  tagName: 'span',
  jsonValue: computed('term', function() {
    return JSON.stringify(this.get('term'), null, 2);
  })
});

components.my-query.js

import Ember from 'ember';
import { computed } from '@ember/object';


export default Ember.Component.extend({
  term: computed('model', function() {
    if (this.get('model')) {
       return JSON.parse(this.get('model').query);
    }
    return null;
  })
});

components.my-query.root-term.js

import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Component.extend({
  tagName: '',
  term: null,
  parentTerm: null,
  termType: computed('term', function() {
    const term = this.get('term') || {};
    if (term.and) { return 'and'; }
    if (term.op) { return 'expression'; }
    return 'invalid';
  })
});

components.simple-thing.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.thing-with-query.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  nextTerm: '',
  term: null,
  actions: {
    updateTerm() {
      console.log('parsing: ', this.get('nextTerm'));
      this.set('term', JSON.parse(this.get('nextTerm')));
      console.log('parsed term: ', this.get('term'));
    }
  }
});

templates.application.hbs

{{manager-thing}}

templates.components.manager-thing.hbs

<ul>
{{#each items as |item|}}
<li><button {{action 'showItem' item}}>Show "{{item.name}}" ({{item.id}})</button></li>
{{/each}}
</ul>
<div>
<h2>Details</h2>
{{#if selectedItem}}
<p>{{selectedItem.type}}</p>
<p>
{{component selectedItem.type
	model=selectedItem
}}
</p>
{{else}}
Select an item and it's details will show
{{/if}}
</div>

templates.components.my-query.and-term.hbs

(
{{#each term.and as |childTerm index|}}
 {{#if index}} AND {{/if}}
 {{my-query/root-term
 	term=childTerm
  parentTerm=term
 }}
 {{else}}empty and
{{/each}}
)

templates.components.my-query.expression-term.hbs

{{term.lhs}} {{term.op}} {{term.rhs}}

templates.components.my-query.hbs

{{my-query/root-term
  term=term
}}

templates.components.my-query.invalid-term.hbs

Invalid: <code><pre>{{jsonValue}}</pre></code>

templates.components.my-query.root-term.hbs

{{component
  (concat 'my-query/' termType '-term')
  term=term
  parentTerm=parentTerm
}}

templates.components.simple-thing.hbs

<p>id: {{model.id}}</p>
<p>name: {{model.name}}</p>
<p>
{{model.description}}
</p>

templates.components.thing-with-query.hbs

<p>id: {{model.id}}</p>
<p>name: {{model.name}}</p>
<p>
{{my-query
  model=model
}}
</p>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.0.4"
  }
}