Merge pull request #2490 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-outlet-outside-routes

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,37 @@
+# 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)
+- [ember-template-lint no-outlet-outside-routes](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-outlet-outside-routes.md)

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

@@ -0,0 +1,71 @@
+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 (<app>/templates/components/) are not routes.
+ *  - Co-located component templates (<app>/components/) are not routes.
+ *
+ * Note: GJS/GTS files can be route templates (e.g. app/routes/foo.gjs).
+ */
+function isRouteTemplate(filePath) {
+  if (typeof filePath !== 'string') {
+    return true; // unknown — assume it could be a route
+  }
+
+  const normalized = filePath.replaceAll('\\', '/');
+  const baseName = path.basename(normalized);
+
+  if (baseName.startsWith('-')) {
+    return false;
+  }
+
+  return (
+    !/^[^/]+\/templates\/components\//.test(normalized) && // classic component
+    !/^[^/]+\/components\//.test(normalized) // co-located component template
+  );
+}
+
+/** @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();
+
+    const routeTemplate = isRouteTemplate(filename);
+
+    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,124 @@
+//------------------------------------------------------------------------------
+// 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>',
+    // GJS route templates — outlet is allowed
+    {
+      filename: 'app/routes/foo.gjs',
+      code: '<template>{{outlet}}</template>',
+    },
+    {
+      filename: 'app/routes/foo.gts',
+      code: '<template>{{outlet}}</template>',
+    },
+  ],
+  invalid: [
+    // Co-located component (explicit filename)
+    {
+      filename: 'app/components/my-component.gjs',
+      code: '<template>{{outlet}}</template>',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    {
+      filename: 'app/components/my-component.gts',
+      code: '<template>{{outlet}}</template>',
+      output: null,
+      errors: [{ messageId: 'noOutletOutsideRoutes' }],
+    },
+    {
+      filename: 'app/components/my-component.gjs',
+      code: '<template><div>{{outlet}}</div></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}}',
+    // Route templates — outlet is allowed
+    {
+      filename: 'app/templates/foo/route.hbs',
+      code: '{{outlet}}',
+    },
+    {
+      filename: 'app/templates/routes/foo.hbs',
+      code: '{{outlet}}',
+    },
+    // Block form in route templates
+    {
+      filename: 'app/templates/foo/route.hbs',
+      code: '{{#outlet}}Why?!{{/outlet}}',
+    },
+    {
+      filename: 'app/templates/routes/foo.hbs',
+      code: '{{#outlet}}Why?!{{/outlet}}',
+    },
+    // Ambiguous path — not clearly a component, so allowed
+    {
+      filename: 'app/templates/something/foo.hbs',
+      code: '{{#outlet}}Works because ambiguous{{/outlet}}',
+    },
+    // "components" appears in prefix but not under <app>/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' }],
+    },
+  ],
+});