Extract rule: template-no-outlet-outside-routes

Author: NullVoxPopuli

README.md

@@ -208,6 +208,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-input-placeholder](docs/rules/template-no-input-placeholder.md)                           | disallow placeholder attribute on input elements                |    |    |    |
 | [template-no-input-tagname](docs/rules/template-no-input-tagname.md)                                   | disallow tagName attribute on {{input}} helper                  |    |    |    |
 | [template-no-log](docs/rules/template-no-log.md)                                                       | disallow {{log}} in templates                                   |    |    |    |
+| [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                    |    |    |    |
 
 ### Components

docs/rules/template-no-outlet-outside-routes.md

@@ -0,0 +1,36 @@
+# ember/template-no-outlet-outside-routes
+
+<!-- end auto-generated rule header -->
+
+Disallow `{{outlet}}` outside of route templates. The `outlet` helper should only be used in route templates to render nested routes.
+
+## Rule Details
+
+This rule prevents the use of `{{outlet}}` in component templates where it doesn't make sense.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+// In a component template
+<template>
+  <div>
+    {{outlet}}
+  </div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+// In a component template
+<template>
+  <div>Content</div>
+</template>
+```
+
+## References
+
+- [Ember guides/routing](https://guides.emberjs.com/release/routing/rendering-a-template/)
+- [Ember api/outlet helper](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/outlet?anchor=outlet)

lib/rules/template-no-outlet-outside-routes.js

@@ -0,0 +1,88 @@
+const path = require('path');
+
+/**
+ * Determine whether a file path corresponds to a route template.
+ * Mirrors ember-template-lint's is-route-template.js heuristic:
+ *  - If the path is unknown, assume it could be a route (don't report).
+ *  - Partials (basename starts with '-') are not routes.
+ *  - Classic component templates (templates/components/) are not routes.
+ *  - Co-located component templates (app/components/) are not routes.
+ */
+function isRouteTemplate(filePath) {
+  if (typeof filePath !== 'string') {
+    return true; // unknown — assume it could be a route
+  }
+
+  // GJS/GTS files are always components, never route templates
+  if (filePath.endsWith('.gjs') || filePath.endsWith('.gts')) {
+    return false;
+  }
+
+  const baseName = path.basename(filePath);
+
+  // Partials start with '-'
+  if (baseName.startsWith('-')) {
+    return false;
+  }
+
+  const normalized = filePath.replaceAll('\\', '/');
+
+  // Classic component template: <app>/templates/components/...
+  if (
+    /\/templates\/components\//.test(normalized) ||
+    /^[^/]+\/templates\/components\//.test(normalized)
+  ) {
+    return false;
+  }
+
+  // Co-located component: <app>/components/...
+  if (/\/components\//.test(normalized) && !/\/templates\//.test(normalized)) {
+    return false;
+  }
+
+  return true;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow {{outlet}} outside of route templates',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-outlet-outside-routes.md',
+      templateMode: 'both',
+    },
+    schema: [],
+    messages: {
+      noOutletOutsideRoutes: 'outlet should only be used in route templates.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-outlet-outside-routes.js',
+      docs: 'docs/rule/no-outlet-outside-routes.md',
+      tests: 'test/unit/rules/no-outlet-outside-routes-test.js',
+    },
+  },
+
+  create(context) {
+    const filename = context.filename || context.getFilename();
+
+    // In GJS/GTS (strict) mode, templates are always in components — never route templates.
+    // Only .hbs files can be route templates, so apply the filePath heuristic only for those.
+    const routeTemplate = filename.endsWith('.hbs') ? isRouteTemplate(filename) : false;
+
+    return {
+      GlimmerMustacheStatement(node) {
+        if (node.path.type === 'GlimmerPathExpression' && node.path.original === 'outlet') {
+          if (!routeTemplate) {
+            context.report({
+              node,
+              messageId: 'noOutletOutsideRoutes',
+            });
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-outlet-outside-routes.js

@@ -0,0 +1,108 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-no-outlet-outside-routes');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-outlet-outside-routes', rule, {
+  valid: [
+    // Non-outlet usage in components
+    '<template><div>Content</div></template>',
+    '<template>{{foo}}</template>',
+    '<template>{{button}}</template>',
+  ],
+  invalid: [
+    // GJS files are always components — outlet should be flagged
+    {
+      code: '<template>{{outlet}}</template>',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    {
+      code: '<template><div>{{outlet}}</div></template>',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    // Co-located component (explicit filename)
+    {
+      filename: 'app/components/my-component.gjs',
+      code: '<template>{{outlet}}</template>',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-outlet-outside-routes', rule, {
+  valid: [
+    // Non-outlet usage
+    '{{foo}}',
+    '{{button}}',
+    // Block form is ambiguous (could be a component named "outlet")
+    '{{#outlet}}Why?!{{/outlet}}',
+    '{{#outlet}}Works because ambiguous{{/outlet}}',
+    // Route templates — outlet is allowed
+    {
+      filename: 'app/templates/foo/route.hbs',
+      code: '{{outlet}}',
+    },
+    {
+      filename: 'app/templates/routes/foo.hbs',
+      code: '{{outlet}}',
+    },
+    // Ambiguous path — not clearly a component, so allowed
+    {
+      filename: 'app/templates/something/foo.hbs',
+      code: '{{outlet}}',
+    },
+    // "components" in the prefix but not under templates/components/ or app/components/
+    {
+      filename: 'components/templates/application.hbs',
+      code: '{{outlet}}',
+    },
+  ],
+  invalid: [
+    // Classic component template
+    {
+      filename: 'app/templates/components/foo/layout.hbs',
+      code: '{{outlet}}',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    // Partial (basename starts with '-')
+    {
+      filename: 'app/templates/foo/-mything.hbs',
+      code: '{{outlet}}',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    // Co-located component template
+    {
+      filename: 'app/components/foo/layout.hbs',
+      code: '{{outlet}}',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    // Nested outlet in component
+    {
+      filename: 'app/components/foo/layout.hbs',
+      code: '<div>{{outlet}}</div>',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+  ],
+});