Skip to content
Open
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 @@ -196,6 +196,7 @@ rules in templates can be disabled with eslint directives with mustache or html
| :----------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :- | :- | :- |
| [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md) | disallow setting certain attributes on builtin components | | | |
| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md) | disallow usage of {{action}} modifiers | | | |
| [template-no-ambiguous-glimmer-paths](docs/rules/template-no-ambiguous-glimmer-paths.md) | disallow ambiguous path in templates | | | |
| [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md) | disallow @arguments on HTML elements | | | |
| [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md) | disallow usage of Ember Array prototype extensions | | | |
| [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements | | | |
Expand Down
41 changes: 41 additions & 0 deletions docs/rules/template-no-ambiguous-glimmer-paths.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# ember/template-no-ambiguous-glimmer-paths

> **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 -->

Disallow ambiguous path in templates

## Rule Details

This rule requires explicit `this.` or `@` prefix for property access to avoid ambiguity.

## Examples

Examples of **incorrect** code for this rule:

```hbs
{{user.name}}
```

```hbs
{{model.title}}
```

Examples of **correct** code for this rule:

```hbs
{{this.user.name}}
```

```hbs
{{@model.title}}
```

```hbs
{{MyComponent}}
```

## References

- [eslint-plugin-ember template-no-implicit-this](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-implicit-this.md)
73 changes: 73 additions & 0 deletions lib/rules/template-no-ambiguous-glimmer-paths.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'disallow ambiguous path in templates',
category: 'Best Practices',
url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-ambiguous-glimmer-paths.md',
templateMode: 'loose',
},
schema: [],
messages: {
ambiguousPath: 'Ambiguous path "{{path}}". Use explicit "this." or "@" prefix.',
},
},

create(context) {
const BUILTIN_HELPERS = new Set([
'if',
'unless',
'each',
'let',
'with',
'log',
'concat',
'get',
'array',
'hash',
'fn',
'on',
'action',
]);

function isAmbiguous(path) {
if (!path || path.type !== 'GlimmerPathExpression') {
return false;
}

const pathString = path.original;

// Not ambiguous if starts with @ or this.
if (pathString.startsWith('@') || pathString.startsWith('this.')) {
return false;
}

// Not ambiguous if it's a builtin helper
if (BUILTIN_HELPERS.has(pathString)) {
return false;
}

// Check if it's a simple identifier (no dots)
if (!pathString.includes('.')) {
return false; // Simple identifiers are component names or helpers
}

return true; // Ambiguous property access
}

return {
GlimmerMustacheStatement(node) {
if (isAmbiguous(node.path)) {
context.report({
node,
messageId: 'ambiguousPath',
data: {
path: node.path.original,
},
});
}
},
};
},
};
57 changes: 57 additions & 0 deletions tests/lib/rules/template-no-ambiguous-glimmer-paths.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const rule = require('../../../lib/rules/template-no-ambiguous-glimmer-paths');
const RuleTester = require('eslint').RuleTester;

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

ruleTester.run('template-no-ambiguous-glimmer-paths', rule, {
valid: [
{
filename: 'test.gjs',
code: '<template>{{this.name}}</template>',
output: null,
},
{
filename: 'test.gjs',
code: '<template>{{@title}}</template>',
output: null,
},
{
filename: 'test.gjs',
code: '<template>{{MyComponent}}</template>',
output: null,
},
{
filename: 'test.gjs',
code: '<template>{{if this.isActive "active" "inactive"}}</template>',
output: null,
},
],

invalid: [
{
filename: 'test.gjs',
code: '<template>{{user.name}}</template>',
output: null,
errors: [
{
messageId: 'ambiguousPath',
data: { path: 'user.name' },
},
],
},
{
filename: 'test.gjs',
code: '<template>{{model.title}}</template>',
output: null,
errors: [
{
messageId: 'ambiguousPath',
data: { path: 'model.title' },
},
],
},
],
});
Loading