Implement the Route Manager API (RFC #1169)

.gitignore

@@ -31,6 +31,7 @@ test/version_tmp
 test_*.html
 /tests/ember-tests.js
 /smoke-tests/scenarios/output/
+/smoke-tests/scenarios/output-*/
 tmp
 tmp*.gem
 tmp.bpm

package.json

@@ -155,7 +155,8 @@
       "ember-cli-htmlbars": "^7.0.0",
       "babel-plugin-ember-template-compilation": "^4.0.0",
       "ember-cli-babel": "^8.3.1",
-      "testem": "^3.20.1"
+      "testem": "^3.20.1",
+      "@ember/test-helpers": "5.4.3"
     },
     "onlyBuiltDependencies": [
       "@swc/core",
@@ -164,7 +165,8 @@
     ],
     "patchedDependencies": {
       "@tracerbench/core@8.0.1": "patches/@tracerbench__core@8.0.1.patch",
-      "agadoo": "patches/agadoo.patch"
+      "agadoo": "patches/agadoo.patch",
+      "@ember/test-helpers@5.4.3": "patches/@ember__test-helpers@5.4.3.patch"
     }
   },
   "peerDependencies": {
@@ -189,6 +191,17 @@
       "@ember/-internals/metal/index.js": "ember-source/@ember/-internals/metal/index.js",
       "@ember/-internals/owner/index.js": "ember-source/@ember/-internals/owner/index.js",
       "@ember/-internals/routing/index.js": "ember-source/@ember/-internals/routing/index.js",
+      "@ember/-internals/routing/route-managers/api.js": "ember-source/@ember/-internals/routing/route-managers/api.js",
+      "@ember/-internals/routing/route-managers/classic/bucket.js": "ember-source/@ember/-internals/routing/route-managers/classic/bucket.js",
+      "@ember/-internals/routing/route-managers/classic/manager.js": "ember-source/@ember/-internals/routing/route-managers/classic/manager.js",
+      "@ember/-internals/routing/route-managers/classic/outlet-manager.js": "ember-source/@ember/-internals/routing/route-managers/classic/outlet-manager.js",
+      "@ember/-internals/routing/route-managers/classic/outlet-template.js": "ember-source/@ember/-internals/routing/route-managers/classic/outlet-template.js",
+      "@ember/-internals/routing/route-managers/classic/outlet.js": "ember-source/@ember/-internals/routing/route-managers/classic/outlet.js",
+      "@ember/-internals/routing/route-managers/classic/query-params.js": "ember-source/@ember/-internals/routing/route-managers/classic/query-params.js",
+      "@ember/-internals/routing/route-managers/classic/substates.js": "ember-source/@ember/-internals/routing/route-managers/classic/substates.js",
+      "@ember/-internals/routing/route-managers/classic/wrapper.js": "ember-source/@ember/-internals/routing/route-managers/classic/wrapper.js",
+      "@ember/-internals/routing/route-managers/registry.js": "ember-source/@ember/-internals/routing/route-managers/registry.js",
+      "@ember/-internals/routing/route-managers/root-outlet.js": "ember-source/@ember/-internals/routing/route-managers/root-outlet.js",
       "@ember/-internals/runtime/index.js": "ember-source/@ember/-internals/runtime/index.js",
       "@ember/-internals/runtime/lib/ext/rsvp.js": "ember-source/@ember/-internals/runtime/lib/ext/rsvp.js",
       "@ember/-internals/runtime/lib/mixins/-proxy.js": "ember-source/@ember/-internals/runtime/lib/mixins/-proxy.js",

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

@@ -17,7 +17,7 @@
   The documentation for `@ember/component` still refers to the older authoring format. To read about
   the new authoring format, see the
   [Glimmer Component API documentation](/ember/release/modules/@glimmer%2Fcomponent).
-    
+
   ### Showing a property
 
   Templates manage the flow of an application's UI, and display state (through
@@ -117,7 +117,7 @@
 
   ```app/templates/application.gjs
   import LabeledTextField from '../components/labeled-textfield';
-    
+
   <template>
     <LabeledTextField @value={{@model.name}}>
       First name:
@@ -127,7 +127,7 @@
 
   ```app/components/labeled-textfield.gjs
   import { Input } from '@ember/component';
-    
+
   <template>
     <label>
       {{yield}} <Input @value={{@value}} />
@@ -148,12 +148,12 @@
   ```app/templates/application.gjs
   import Component from '@glimmer/component';
   import LabeledTextField from '../components/labeled-textfield';
-    
+
   export default class Application extends Component {
     firstNameValidator = (value) => {
       // validates
     }
-    
+
     <template>
       <LabeledTextField @value={{@model.validation}} @validator={{this.firstNameValidator}} as |validationError|>
         {{#if validationError}}
@@ -167,7 +167,7 @@
 
   ```app/components/labeled-textfield.gjs
   import { Input } from '@ember/component';
-    
+
   <template>
     <label>
       {{yield this.validationError}} <Input @value={{@value}} />
@@ -188,7 +188,7 @@
 
   ```app/templates/application.gjs
   import DateRanges from '../components/date-ranges';
-    
+
   <template>
     <DateRanges @value={{@model.date}} as |range|>
       Start date: {{range.start}}
@@ -215,10 +215,10 @@
   ```
 
   Multiple values can be yielded as block params:
-    
+
   ```app/templates/application.gjs
   import Banner from '../components/banner';
-    
+
   <template>
     <Banner @value={{@model}} as |title subtitle body|>
       <h1>{{title}}</h1>
@@ -271,7 +271,7 @@
     Title = Title;
     Subtitle = Subtitle;
     Body = Body;
-    
+
     <template>
       <div>
         {{yield (hash
@@ -408,7 +408,7 @@
   `{{(has-block-params)}}` indicates if the component was invoked with block params.
 
   This component is invoked with block params:
-    
+
   ```handlebars
   <MyComponent as |favoriteFlavor|>
   Hi Jen!
@@ -516,6 +516,7 @@ export {
   _resetRenderers,
   renderSettled,
   renderComponent,
+  setRenderer,
   type View,
 } from './lib/renderer';
 export {
@@ -533,8 +534,7 @@ export { DOMChanges, NodeDOMTreeConstruction, DOMTreeConstruction } from './lib/
 // TODO just test these through public API
 // a lot of these are testing how a problem was solved
 // rather than the problem was solved
-export { default as OutletView, type BootEnvironment } from './lib/views/outlet';
-export type { OutletState, RenderState } from './lib/utils/outlet';
+export type { BootEnvironment } from '@ember/engine/instance';
 export {
   componentCapabilities,
   modifierCapabilities,

packages/@ember/-internals/glimmer/lib/base-renderer.ts

@@ -462,12 +462,18 @@ export function renderComponent(
     env,
     into,
     args,
+    appendIntoTarget = false,
   }: {
     /**
      * The element to render the component in to.
      */
     into: IntoTarget;
 
+    /**
+     * Appends `into` without clearing the target first. Mimics the `appendTo` behavior for classic components.
+     */
+    appendIntoTarget?: boolean;
+
     /**
      * Optional owner. Defaults to `{}`, can be any object, but will need to implement the [Owner](https://api.emberjs.com/ember/release/classes/Owner) API for components within this render tree to access services.
      */
@@ -534,7 +540,7 @@ export function renderComponent(
    * Because destruction is async, it won't be safe to
    * do this again, and we'll have to rely on the above destroy.
    */
-  if (!existing && into instanceof Element) {
+  if (!(appendIntoTarget || existing) && into instanceof Element) {
     into.innerHTML = '';
   }
 
@@ -562,6 +568,11 @@ export function renderComponent(
 
   if (innerResult) {
     associateDestroyableChild(owner, innerResult);
+    registerDestructor(innerResult, () => {
+      if (RENDER_CACHE.get(into)?.glimmerResult === innerResult) {
+        RENDER_CACHE.delete(into);
+      }
+    });
   }
 
   let result: RenderResult = {
@@ -580,6 +591,14 @@ export function renderComponent(
 const RENDER_CACHE = new WeakMap<IntoTarget, RenderCacheEntry>();
 const RENDERER_CACHE = new WeakMap<object, BaseRenderer>();
 
+/**
+ * The application seeds its `renderer:-dom` service which allows for
+ * router-aware resolver to resolve {{mount}}
+ */
+export function setRenderer(owner: object, renderer: BaseRenderer): void {
+  RENDERER_CACHE.set(owner, renderer);
+}
+
 export class BaseRenderer {
   static strict(
     owner: object,

packages/@ember/-internals/glimmer/lib/component-managers/route-template.ts

@@ -1,5 +1,4 @@
 import type { InternalOwner } from '@ember/-internals/owner';
-import { _instrumentStart } from '@ember/instrumentation';
 import type {
   CapturedArguments,
   CompilableProgram,
@@ -14,20 +13,19 @@ import type {
   WithCustomDebugRenderTree,
 } from '@glimmer/interfaces';
 import type { Nullable } from '@ember/-internals/utility-types';
-import { DEBUG } from '@glimmer/env';
 import { capabilityFlagsFrom } from '@glimmer/manager/lib/util/capabilities';
 import type { Reference } from '@glimmer/reference/lib/reference';
-import { createDebugAliasRef, valueForRef } from '@glimmer/reference/lib/reference';
+import { UNDEFINED_REFERENCE, valueForRef } from '@glimmer/reference/lib/reference';
 import { curry, type CurriedValue } from '@glimmer/runtime/lib/curried-value';
 import { unwrapTemplate } from './unwrap-template';
 
 interface RouteTemplateInstanceState {
   self: Reference;
-  controller: unknown;
 }
 
 export interface RouteTemplateDefinitionState {
   name: string;
+  self: Reference;
 }
 
 const CAPABILITIES: InternalComponentCapabilities = {
@@ -55,18 +53,10 @@ class RouteTemplateManager
 {
   create(
     _owner: InternalOwner,
-    _definition: RouteTemplateDefinitionState,
-    args: VMArguments
+    definition: RouteTemplateDefinitionState,
+    _args: VMArguments
   ): RouteTemplateInstanceState {
-    let self = args.named.get('controller');
-
-    if (DEBUG) {
-      self = createDebugAliasRef!('this', self);
-    }
-
-    let controller = valueForRef(self);
-
-    return { self, controller };
+    return { self: definition.self };
   }
 
   getSelf({ self }: RouteTemplateInstanceState): Reference {
@@ -88,7 +78,7 @@ class RouteTemplateManager
         type: 'route-template',
         name,
         args,
-        instance: state.controller,
+        instance: valueForRef(state.self),
       },
     ];
   }
@@ -111,7 +101,7 @@ class RouteTemplateManager
 const ROUTE_TEMPLATE_MANAGER = /*@__PURE__*/ new RouteTemplateManager();
 
 /**
- * This "upgrades" a route template into a invocable component. Conceptually
+ * This "upgrades" a route template into a invokable component. Conceptually
  * it can be 1:1 for each unique `Template`, but it's also cheap to construct,
  * so unless the stability is desirable for other reasons, it's probably not
  * worth caching this.
@@ -129,13 +119,13 @@ export class RouteTemplate implements ComponentDefinition<
   public capabilities = CAPABILITIES_MASK;
   public compilable: CompilableProgram;
 
-  constructor(name: string, template: Template) {
+  constructor(name: string, template: Template, self: Reference) {
     let unwrapped = unwrapTemplate(template);
     // TODO This actually seems inaccurate – it ultimately came from the
     // outlet's name. Also, setting this overrides `getDebugName()` in that
     // message. Is that desirable?
     this.resolvedName = name;
-    this.state = { name };
+    this.state = { name, self };
     this.compilable = unwrapped.asLayout();
   }
 }
@@ -150,8 +140,9 @@ export class RouteTemplate implements ComponentDefinition<
 export function makeRouteTemplate(
   owner: InternalOwner,
   name: string,
-  template: Template
+  template: Template,
+  self: Reference = UNDEFINED_REFERENCE
 ): CurriedValue {
-  let routeTemplate = new RouteTemplate(name, template);
+  let routeTemplate = new RouteTemplate(name, template, self);
   return curry(0 as CurriedComponent, routeTemplate, owner, null, true);
 }