Ember has-block to detect empty block

Question

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

Answer 1

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:

• https://www.npmjs.com/package/ember-template-lint-plugin-prettier
• https://www.npmjs.com/package/ember-template-lint-plugin-css-modules
• https://www.npmjs.com/package/ember-template-lint-plugin-tailwindcss