Search code examples
ember.jshandlebars.jsember-octane

Ember has-block to detect empty block


In ember octane, is there a way to detect {{yield}} is not an empty string?

The has-block function will return true if we use an empty component like this <IntakeFormElement></IntakeFormElement> while false when <IntakeFormElement/>.

How do I get both <IntakeFormElement></IntakeFormElement> and <IntakeFormElement/> return false?

{{#if (has-block)}}
    Content: {{yield}}
{{else}}
    No block
{{/if}}

Ember Twiddle code:

https://ember-twiddle.com/7bf99058ec9f125b8b88dd73350ad3b4?openFiles=templates.components.intake-form%5C.hbs%2Ctemplates.components.intake-form%5C.hbs


Solution

  • Since empty block is still a block, there is a way to convey to developers that they shouldn't use your particular component with an empty block. Via template-lint plugin!

    Here is an example astexplorer.net that demonstrates the logic that you'd use.

        ElementNode(node) {
          if (node.tag === 'MyComponent') {
            if (node.children.length === 0) {
              console.log(`use ember-template-lint's log function to log a lint error`);
            }
          }
        }
    

    Here are the docs for creating a template-lint plugin: https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/plugins.md

    And some example template-lint plugins: