Implement RFC#995, Deprecate component template resolution

packages/@ember/-internals/deprecations/index.ts

@@ -106,6 +106,15 @@ export const DEPRECATIONS = {
       available: '5.9.0',
     },
   }),
+  DEPRECATE_COMPONENT_TEMPLATE_RESOLVING: deprecation({
+    id: 'component-template-resolving',
+    url: 'https://deprecations.emberjs.com/id/component-template-resolving',
+    until: '6.0.0',
+    for: 'ember-source',
+    since: {
+      available: '5.9.0',
+    },
+  }),
 };
 
 export function deprecateUntil(message: string, deprecation: DeprecationObject) {

packages/@ember/-internals/glimmer/lib/resolver.ts

@@ -45,6 +45,7 @@ import { default as uniqueId } from './helpers/unique-id';
 import actionModifier from './modifiers/action';
 import { mountHelper } from './syntax/mount';
 import { outletHelper } from './syntax/outlet';
+import { DEPRECATIONS, deprecateUntil } from '@ember/-internals/deprecations';
 
 function instrumentationPayload(name: string) {
   return { object: `component:${name}` };
@@ -63,9 +64,22 @@ function layoutFor(
   owner: InternalOwner,
   options?: RegisterOptions
 ): Nullable<Template> {
+  if (DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING.isRemoved) {
+    return null;
+  }
+
   let templateFullName = `template:components/${name}` as const;
 
-  return (owner.lookup(templateFullName, options) as Template) || null;
+  let result = (owner.lookup(templateFullName, options) as Template) || null;
+
+  if (result) {
+    deprecateUntil(
+      `Components with separately resolved templates are deprecated. Migrate to either co-located js/ts + hbs files or to gjs/gts. Tried to lookup '${templateFullName}'.`,
+      DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING
+    );
+  }
+
+  return result;
 }
 
 type LookupResult =

packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts

@@ -1,8 +1,10 @@
 import {
   ApplicationTestCase,
   ModuleBasedTestResolver,
+  expectDeprecation,
   moduleFor,
   strip,
+  testUnless,
 } from 'internal-test-helpers';
 
 import { ENV } from '@ember/-internals/environment';
@@ -22,6 +24,8 @@ import type { SimpleElement, SimpleNode } from '@simple-dom/interface';
 import type { EmberPrecompileOptions } from 'ember-template-compiler';
 import { compile } from 'ember-template-compiler';
 import { runTask } from 'internal-test-helpers/lib/run';
+import { DEPRECATIONS } from '@ember/-internals/deprecations';
+import templateOnly from '@ember/component/template-only';
 
 interface CapturedBounds {
   parentElement: SimpleElement;
@@ -204,10 +208,13 @@ if (ENV._DEBUG_RENDER_TREE) {
                 )
               );
               this.register(
-                'template:components/inspect-model',
-                compileTemplate('{{@model}}', {
-                  moduleName: 'foo/components/inspect-model.hbs',
-                })
+                'component:inspect-model',
+                setComponentTemplate(
+                  compileTemplate('{{@model}}', {
+                    moduleName: 'foo/components/inspect-model.hbs',
+                  }),
+                  templateOnly()
+                )
               );
             }
 
@@ -242,10 +249,13 @@ if (ENV._DEBUG_RENDER_TREE) {
                 )
               );
               this.register(
-                'template:components/inspect-model',
-                compileTemplate('{{@model}}', {
-                  moduleName: 'bar/components/inspect-model.hbs',
-                })
+                'component:inspect-model',
+                setComponentTemplate(
+                  compileTemplate('{{@model}}', {
+                    moduleName: 'bar/components/inspect-model.hbs',
+                  }),
+                  templateOnly()
+                )
               );
             }
 
@@ -608,10 +618,13 @@ if (ENV._DEBUG_RENDER_TREE) {
                 })
               );
               this.register(
-                'template:components/hello',
-                compileTemplate('<span>Hello {{@message}}</span>', {
-                  moduleName: 'foo/components/hello.hbs',
-                })
+                'component:hello',
+                setComponentTemplate(
+                  compileTemplate('<span>Hello {{@message}}</span>', {
+                    moduleName: 'foo/components/hello.hbs',
+                  }),
+                  templateOnlyComponent()
+                )
               );
             }
 
@@ -775,7 +788,13 @@ if (ENV._DEBUG_RENDER_TREE) {
         ]);
       }
 
-      async '@test template-only components'() {
+      async [`${testUnless(
+        DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING.isRemoved
+      )} template-only components`]() {
+        expectDeprecation(
+          /resolved templates/,
+          DEPRECATIONS.DEPRECATE_COMPONENT_TEMPLATE_RESOLVING.isEnabled
+        );
         this.addTemplate(
           'application',
           strip`
@@ -800,7 +819,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -816,7 +835,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -825,7 +844,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'second' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.lastChild),
             children: [],
           },
@@ -841,7 +860,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -873,7 +892,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -889,7 +908,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -898,7 +917,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'second' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.lastChild),
             children: [],
           },
@@ -914,7 +933,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: null,
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -936,7 +955,7 @@ if (ENV._DEBUG_RENDER_TREE) {
         this.addComponent('hello-world', {
           ComponentClass: setComponentTemplate(
             compileTemplate('{{@name}}', { moduleName: 'my-app/components/hello-world.hbs' }),
-            templateOnlyComponent()
+            templateOnlyComponent('my-app/components/hello-world', 'HelloWorld')
           ),
         });
 
@@ -1021,7 +1040,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'first',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -1037,7 +1056,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'first',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -1046,7 +1065,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'second' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'second',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.lastChild),
             children: [],
           },
@@ -1062,7 +1081,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'first',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -1106,7 +1125,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'first',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -1122,7 +1141,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'first',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },
@@ -1131,7 +1150,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'second' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'second',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.lastChild),
             children: [],
           },
@@ -1147,7 +1166,7 @@ if (ENV._DEBUG_RENDER_TREE) {
             name: 'hello-world',
             args: { positional: [], named: { name: 'first' } },
             instance: (instance: Record<string, string>) => instance['name'] === 'first',
-            template: 'my-app/templates/components/hello-world.hbs',
+            template: '(unknown template module)',
             bounds: this.nodeBounds(this.element!.firstChild),
             children: [],
           },

packages/@ember/-internals/glimmer/tests/integration/application/engine-test.js

@@ -14,6 +14,8 @@ import Engine from '@ember/engine';
 import { next } from '@ember/runloop';
 
 import { compile } from '../../utils/helpers';
+import { setComponentTemplate } from '@glimmer/manager';
+import { templateOnlyComponent } from '@glimmer/runtime';
 
 moduleFor(
   'Application test: engine rendering',
@@ -217,10 +219,8 @@ moduleFor(
             );
             this.register('template:application', sharedTemplate);
             this.register(
-              'template:components/ambiguous-curlies',
-              compile(strip`
-        <p>Component!</p>
-      `)
+              'component:ambiguous-curlies',
+              setComponentTemplate(compile(`<p>Component!</p>`), templateOnlyComponent())
             );
           },
         })
@@ -275,10 +275,8 @@ moduleFor(
             );
             this.register('component:my-component', sharedComponent);
             this.register(
-              'template:components/ambiguous-curlies',
-              compile(strip`
-                <p>Component!</p>
-              `)
+              'component:ambiguous-curlies',
+              setComponentTemplate(compile(`<p>Component!</p>`), templateOnlyComponent())
             );
           },
         })