Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@ rules in templates can be disabled with eslint directives with mustache or html
| [template-no-obsolete-elements](docs/rules/template-no-obsolete-elements.md) | disallow obsolete HTML elements | | | |
| [template-no-outlet-outside-routes](docs/rules/template-no-outlet-outside-routes.md) | disallow {{outlet}} outside of route templates | | | |
| [template-no-page-title-component](docs/rules/template-no-page-title-component.md) | disallow usage of ember-page-title component | | | |
| [template-no-yield-to-default](docs/rules/template-no-yield-to-default.md) | disallow yield to default block | | | |
| [template-require-button-type](docs/rules/template-require-button-type.md) | require button elements to have a valid type attribute | | 🔧 | |
| [template-require-each-key](docs/rules/template-require-each-key.md) | require key attribute in {{#each}} loops | | 🔧 | |
| [template-require-form-method](docs/rules/template-require-form-method.md) | require form method attribute | | 🔧 | |
Expand Down
51 changes: 51 additions & 0 deletions docs/rules/template-no-yield-to-default.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# ember/template-no-yield-to-default

<!-- end auto-generated rule header -->

The `yield` keyword can be used for invoking blocks passed into a component. The `to` named argument specifies which of the blocks to yield too. Specifying `{{yield to="default"}}` is unnecessary, as that is the default behavior. Likewise, `{{has-block}}` and `{{has-block-params}}` also defaults to checking the "default" block.

This rule disallow yield to named blocks with the name "default".

## Examples

This rule **forbids** the following:

```gjs
<template>
{{yield to="default"}}
</template>
```

```gjs
<template>
{{has-block "default"}}
</template>
```

```gjs
<template>
{{has-block-params "default"}}
</template>
```

This rule **allows** the following:

```gjs
<template>
{{yield}}
</template>
```

```gjs
<template>
{{has-block}}
</template>
```

```gjs
<template>
{{has-block-params}}
</template>
```

## References
75 changes: 75 additions & 0 deletions lib/rules/template-no-yield-to-default.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
const ERROR_MESSAGE = 'A block named "default" is not valid';

/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'disallow yield to default block',
category: 'Best Practices',
url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-yield-to-default.md',
templateMode: 'both',
},
fixable: null,
schema: [],
messages: {
invalidDefaultBlock: ERROR_MESSAGE,
},
originallyFrom: {
name: 'ember-template-lint',
rule: 'lib/rules/no-yield-to-default.js',
docs: 'docs/rule/no-yield-to-default.md',
tests: 'test/unit/rules/no-yield-to-default-test.js',
},
},

create(context) {
const BLOCK_HELPERS = new Set(['has-block', 'has-block-params', 'hasBlock', 'hasBlockParams']);

function checkDefaultBlockHelper(node) {
if (
node.path &&
node.path.type === 'GlimmerPathExpression' &&
BLOCK_HELPERS.has(node.path.original) &&
node.params &&
node.params.length > 0 &&
node.params[0].type === 'GlimmerStringLiteral' &&
node.params[0].value === 'default'
) {
context.report({
node: node.params[0],
messageId: 'invalidDefaultBlock',
});
}
}

return {
GlimmerMustacheStatement(node) {
if (
node.path &&
node.path.type === 'GlimmerPathExpression' &&
node.path.original === 'yield' &&
node.hash &&
node.hash.pairs
) {
for (const pair of node.hash.pairs) {
if (
pair.key === 'to' &&
pair.value.type === 'GlimmerStringLiteral' &&
pair.value.value === 'default'
) {
context.report({
node: pair,
messageId: 'invalidDefaultBlock',
});
}
}
}
checkDefaultBlockHelper(node);
},
GlimmerSubExpression(node) {
checkDefaultBlockHelper(node);
},
};
},
};
120 changes: 120 additions & 0 deletions tests/lib/rules/template-no-yield-to-default.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
const rule = require('../../../lib/rules/template-no-yield-to-default');
const RuleTester = require('eslint').RuleTester;

const ERROR_MESSAGE = 'A block named "default" is not valid';

const validHbs = [
'{{yield}}',
'{{yield to="title"}}',
'{{has-block}}',
'{{has-block "title"}}',
'{{has-block-params}}',
'{{has-block-params "title"}}',
'{{hasBlock}}',
'{{hasBlock "title"}}',
'{{hasBlockParams}}',
'{{hasBlockParams "title"}}',
];

const invalidHbs = [
{
code: '{{yield to="default"}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{has-block "default"}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{has-block-params "default"}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{hasBlock "default"}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{hasBlockParams "default"}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{if (has-block "default")}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{#if (has-block "default")}}{{/if}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{if (has-block-params "default")}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{#if (has-block-params "default")}}{{/if}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{if (hasBlock "default")}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{#if (hasBlock "default")}}{{/if}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{if (hasBlockParams "default")}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
{
code: '{{#if (hasBlockParams "default")}}{{/if}}',
output: null,
errors: [{ message: ERROR_MESSAGE }],
},
];

function wrapTemplate(entry) {
if (typeof entry === 'string') {
return `<template>${entry}</template>`;
}

return {
...entry,
code: `<template>${entry.code}</template>`,
output: entry.output ? `<template>${entry.output}</template>` : entry.output,
};
}

const gjsRuleTester = new RuleTester({
parser: require.resolve('ember-eslint-parser'),
parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
});

gjsRuleTester.run('template-no-yield-to-default', rule, {
valid: validHbs.map(wrapTemplate),
invalid: invalidHbs.map(wrapTemplate),
});

const hbsRuleTester = new RuleTester({
parser: require.resolve('ember-eslint-parser/hbs'),
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
},
});

hbsRuleTester.run('template-no-yield-to-default', rule, {
valid: validHbs,
invalid: invalidHbs,
});
Loading