Search code examples
javascriptember.jsglimmer.js

Dynamically determine existence of template only Ember glimmer component?


I know that to dynamically determine the existence of a component on Ember we can use the solutions explained here or here.

We have a helper that uses .hasRegistration('component:${component}')

This also works for Glimmer components as long as there is a .js file defined, but it doesn't work for template-only Glimmer components. The component doesn't seem to be registered in that case.

Does anyone know a solution that would work for template-only glimmer components too?


Solution

  • I made a demo for you over on stackblitz:

    https://stackblitz.com/edit/github-k7htnb?file=app%2Fcomponents%2Fdemo.hbs

    {
      "component:template-only": true,
      "template:template-only": false
    }
    

    here is the code showing that what you're doing works in Ember 3.28:

    <pre>{{this.format this.results}}</pre>
    
    import Component from '@glimmer/component';
    import { tracked } from '@glimmer/tracking';
    import { getOwner } from '@ember/application';
    
    export default class Demo extends Component {
      format = (data) => JSON.stringify(data, null, 2);
    
      @tracked name = 'template-only';
    
      get results() {
        let owner = getOwner(this);
        let name = this.name;
    
        return {
          [`component:${name}`]: owner.hasRegistration(`component:${name}`),
          // added this for curiosity
          [`template:${name}`]: owner.hasRegistration(`template:${name}`),
        };
      }
    }
    

    Now, if I change the ember-source to 3.26.1, it's the same.

    Maybe there is a slight code mismatch between what you're doing and what this demo is doing?