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-block-params-to-else-inverse](docs/rules/template-no-yield-block-params-to-else-inverse.md) | disallow yielding block params to else or inverse block | | | |
| [template-no-yield-only](docs/rules/template-no-yield-only.md) | disallow components that only yield | | | |
| [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 | | 🔧 | |
Expand Down
48 changes: 48 additions & 0 deletions docs/rules/template-no-yield-block-params-to-else-inverse.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# ember/template-no-yield-block-params-to-else-inverse

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

Yielding to else block is mainly useful for supporting curly invocation syntax. However, the else block in curly invocation syntax does not support consuming block params.

Yielding block params (positional arguments) to `else` or `inverse` blocks doesn't work as expected. The params are not available in the inverse block.

## Examples

This rule **forbids** the following:

```gjs
<template>
{{yield 'some' 'param' to='else'}}
</template>
```

```gjs
<template>
{{yield 'some' 'param' to='inverse'}}
</template>
```

This rule **allows** the following:

```gjs
<template>
{{yield}}
{{yield to='else'}}
{{yield to='inverse'}}
</template>
```

## Migration

We need to remove block params from highlighted yield's and update application logic to not consume it.

In addition, we could use named blocks (slots) to provide values.

## References

- [Ember Guides – Block content](https://guides.emberjs.com/v5.5.0/components/block-content/)

## Related Rules

- [no-yield-only](template-no-yield-only.md)
- [no-yield-to-default](template-no-yield-to-default.md)
56 changes: 56 additions & 0 deletions lib/rules/template-no-yield-block-params-to-else-inverse.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
const ERROR_MESSAGE = 'Yielding block params to else/inverse block is not allowed';

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

create(context) {
return {
GlimmerMustacheStatement(node) {
// Only check yield statements
if (node.path.original !== 'yield') {
return;
}

// Must have params
if (!node.params || node.params.length === 0) {
return;
}

// Check if there's a 'to' hash with 'else' or 'inverse' value
if (node.hash && node.hash.pairs) {
const toPair = node.hash.pairs.find((pair) => pair.key === 'to');

if (toPair && toPair.value && toPair.value.type === 'GlimmerStringLiteral') {
const toValue = toPair.value.value;
if (toValue === 'else' || toValue === 'inverse') {
context.report({
node,
messageId: 'noYieldBlockParamsToElseInverse',
});
}
}
}
},
};
},
};
61 changes: 61 additions & 0 deletions tests/lib/rules/template-no-yield-block-params-to-else-inverse.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
const rule = require('../../../lib/rules/template-no-yield-block-params-to-else-inverse');
const RuleTester = require('eslint').RuleTester;

const validHbs = [
'{{yield}}',
'{{yield "some" "param"}}',
'{{yield to="whatever"}}',
'{{yield to=this.someValue}}',
'{{yield to=(get some this.map)}}',
'{{yield to="else"}}',
'{{yield to="inverse"}}',
'{{not-yield "some" "param" to="else"}}',
];

const invalidHbs = [
{
code: '{{yield "some" "param" to="else"}}',
output: null,
errors: [{ message: 'Yielding block params to else/inverse block is not allowed' }],
},
{
code: '{{yield "some" "param" to="inverse"}}',
output: null,
errors: [{ message: 'Yielding block params to else/inverse block is not allowed' }],
},
];

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-block-params-to-else-inverse', 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-block-params-to-else-inverse', rule, {
valid: validHbs,
invalid: invalidHbs,
});
Loading