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 @@ -247,6 +247,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-require-strict-mode](docs/rules/template-require-strict-mode.md) | require templates to be in strict mode | | | |
| [template-require-valid-named-block-naming-format](docs/rules/template-require-valid-named-block-naming-format.md) | require valid named block naming format | | 🔧 | |
| [template-self-closing-void-elements](docs/rules/template-self-closing-void-elements.md) | require self-closing on void elements | | 🔧 | |
| [template-simple-modifiers](docs/rules/template-simple-modifiers.md) | require simple modifier syntax | | | |
Expand Down
57 changes: 57 additions & 0 deletions docs/rules/template-require-strict-mode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# ember/template-require-strict-mode

> **HBS Only**: This rule applies to classic `.hbs` template files only (loose mode). It is not relevant for `gjs`/`gts` files (strict mode), where these patterns cannot occur.

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

Require templates to be in strict mode.

Ember's Polaris edition component authoring format is template tag, which makes
templates follow "strict mode" semantics.

This rule requires all templates to use strict mode (template tag). Effectively this
means you may only have template content in `.gjs`/`.gts` files, not in `.hbs` or
`.js`/`.ts`.

## Examples

This rule **forbids** the following:

```hbs
// button.hbs
<button>{{yield}}</button>
```

```js
// button-test.js
import { hbs } from 'ember-cli-htmlbars';

test('it renders', async (assert) => {
await render(hbs`<Button>Ok</Button>`);
// ...
});
```

This rule **allows** the following:

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

```gjs
// button-test.gjs
import { Button } from 'ember-awesome-button';

test('it renders', async (assert) => {
await render(<template><Button>Ok</Button></template>);
// ..
});
```

## References

- [Template Tag Guide](https://guides.emberjs.com/release/components/template-tag-format/)
- [Strict Mode RFC](https://rfcs.emberjs.com/id/0496-handlebars-strict-mode/)
44 changes: 44 additions & 0 deletions lib/rules/template-require-strict-mode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
const ERROR_MESSAGE =
'Templates are required to be in strict mode. Consider refactoring to template tag format.';

function isStrictModeFile(filePath) {
return filePath?.endsWith('.gjs') || filePath?.endsWith('.gts');
}

/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'require templates to be in strict mode',
category: 'Best Practices',
recommended: false,
url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-require-strict-mode.md',
templateMode: 'loose',
},
fixable: null,
schema: [],
messages: {},
originallyFrom: {
name: 'ember-template-lint',
rule: 'lib/rules/require-strict-mode.js',
docs: 'docs/rule/require-strict-mode.md',
tests: 'test/unit/rules/require-strict-mode-test.js',
},
},

create(context) {
const filePath = context.getFilename ? context.getFilename() : context.filename;

return {
'GlimmerTemplate:exit'(node) {
if (!isStrictModeFile(filePath)) {
context.report({
node,
message: ERROR_MESSAGE,
});
}
},
};
},
};
70 changes: 70 additions & 0 deletions tests/lib/rules/template-require-strict-mode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
const rule = require('../../../lib/rules/template-require-strict-mode');
const RuleTester = require('eslint').RuleTester;

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

ruleTester.run('template-require-strict-mode', rule, {
valid: [
{
filename: 'hello.gjs',
code: '<template>hello</template>',
},
{
filename: 'hello.gts',
code: '<template>hello</template>',
},
],
invalid: [
{
filename: 'hello.hbs',
code: '<template><div>hello</div></template>',
output: null,
errors: [
{
message:
'Templates are required to be in strict mode. Consider refactoring to template tag format.',
},
],
},
{
filename: 'hello.hbs',
code: `<template><div>
hello
</div></template>`,
output: null,
errors: [
{
message:
'Templates are required to be in strict mode. Consider refactoring to template tag format.',
},
],
},
],
});

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

hbsRuleTester.run('template-require-strict-mode', rule, {
valid: [],
invalid: [
{
code: '<div>hello</div>',
output: null,
errors: [
{
message:
'Templates are required to be in strict mode. Consider refactoring to template tag format.',
},
],
},
],
});
Loading