Handle setting up controller and model in the classic route manager.

This make outlets and renderer unaware of controllers and models. The Route Manager now curries the invokable with @controller and @model arguments. Model is @Tracked so it rerenders when it changes.

Author: evoactivity

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

@@ -42,7 +42,6 @@ export interface OutletDefinitionState {
   ref: Reference<OutletState | undefined>;
   name: string;
   template: object;
-  controller: unknown;
 }
 
 const CAPABILITIES: InternalComponentCapabilities = {
@@ -172,10 +171,7 @@ class OutletComponentManager
 
 const OUTLET_MANAGER = new OutletComponentManager();
 
-const OUTLET_COMPONENT_TEMPLATE = precompileTemplate(
-  '<@Component @controller={{@controller}} @model={{@model}} />',
-  { strictMode: true }
-);
+const OUTLET_COMPONENT_TEMPLATE = precompileTemplate('<@Component />', { strictMode: true });
 
 export class OutletComponent implements ComponentDefinition<
   OutletDefinitionState,

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

@@ -861,7 +861,7 @@ export class Renderer extends BaseRenderer {
     // we can refactor this to do something more direct/less convoluted
     // and with less setup, but get it working first
     let outlet = createRootOutlet(view);
-    let { name, /* controller, */ template } = view.state;
+    let { name, template } = view.state;
 
     let named = dict<Reference>();
 
@@ -870,18 +870,6 @@ export class Renderer extends BaseRenderer {
       '@Component'
     );
 
-    // TODO: is this guaranteed to be undefined? It seems to be the
-    // case in the `OutletView` class. Investigate how much that class
-    // exists as an internal implementation detail only, or if it was
-    // used outside of core. As far as I can tell, test-helpers uses
-    // it but only for `setOutletState`.
-    // named['controller'] = createConstRef(controller, '@controller');
-    // Update: at least according to the debug render tree tests, we
-    // appear to always expect this to be undefined. Not a definitive
-    // source by any means, but is useful evidence
-    named['controller'] = UNDEFINED_REFERENCE;
-    named['model'] = UNDEFINED_REFERENCE;
-
     let args = createCapturedArgs(named, EMPTY_POSITIONAL);
 
     this._appendDefinition(

packages/@ember/-internals/glimmer/lib/syntax/outlet.ts

@@ -8,15 +8,9 @@ import type {
   Template,
 } from '@glimmer/interfaces';
 import type { Reference } from '@glimmer/reference';
-import {
-  childRefFromParts,
-  createComputeRef,
-  createConstRef,
-  createDebugAliasRef,
-  valueForRef,
-} from '@glimmer/reference';
+import { createComputeRef, createConstRef, valueForRef } from '@glimmer/reference';
 import type { CurriedValue } from '@glimmer/runtime';
-import { createCapturedArgs, curry, EMPTY_POSITIONAL } from '@glimmer/runtime';
+import { createCapturedArgs, curry, EMPTY_POSITIONAL, isCurriedValue } from '@glimmer/runtime';
 import { dict } from '@glimmer/util';
 import { hasInternalComponentManager } from '@glimmer/manager';
 import { OutletComponent, type OutletDefinitionState } from '../component-managers/outlet';
@@ -88,16 +82,14 @@ export const outletHelper = internalHelper(
 
           let named = dict<Reference>();
 
-          // Here we either have a raw template that needs to be normalized,
-          // or a component that we can render as-is. `RouteTemplate` upgrades
-          // the template into a component so we can have a unified code path.
-          // We still store the original `template` value, because we rely on
-          // its identity for the stability check, and the `RouteTemplate`
-          // wrapper doesn't dedup for us.
+          // When the route manager provides the invokable, state.template is
+          // already a curried component with @controller and @model baked in.
+          // For backward compatibility (e.g. setOutletState from test helpers),
+          // raw templates and components are wrapped with makeRouteTemplate.
           let template = state.template;
           let component: object;
 
-          if (hasInternalComponentManager(template)) {
+          if (isCurriedValue(template) || hasInternalComponentManager(template)) {
             component = template;
           } else {
             if (DEBUG) {
@@ -137,36 +129,8 @@ export const outletHelper = internalHelper(
             component = makeRouteTemplate(outletOwner, state.name, template as Template);
           }
 
-          // Component is stable for the lifetime of the outlet
           named['Component'] = createConstRef(component, '@Component');
 
-          // Controller is stable for the lifetime of the outlet
-          named['controller'] = createConstRef(state.controller, '@controller');
-
-          // Create a ref for the model
-          let modelRef = childRefFromParts(outletRef, ['render', 'model']);
-
-          // Store the value of the model
-          let model = valueForRef(modelRef);
-
-          // Create a compute ref which we pass in as the `{{@model}}` reference
-          // for the outlet. This ref will update and return the value of the
-          // model _until_ the outlet itself changes. Once the outlet changes,
-          // dynamic scope also changes, and so the original model ref would not
-          // provide the correct updated value. So we stop updating and return
-          // the _last_ model value for that outlet.
-          named['model'] = createComputeRef(() => {
-            if (lastState === state) {
-              model = valueForRef(modelRef);
-            }
-
-            return model;
-          });
-
-          if (DEBUG) {
-            named['model'] = createDebugAliasRef!('@model', named['model']);
-          }
-
           let args = createCapturedArgs(named, EMPTY_POSITIONAL);
 
           // Package up everything
@@ -204,7 +168,6 @@ function stateFor(
     ref,
     name: render.name,
     template,
-    controller: render.controller,
   };
 }
 
@@ -216,5 +179,5 @@ function isStable(
     return false;
   }
 
-  return state.template === lastState.template && state.controller === lastState.controller;
+  return state.template === lastState.template;
 }

packages/@ember/-internals/glimmer/lib/utils/outlet.ts

@@ -15,18 +15,9 @@ export interface RenderState {
   name: string;
 
   /**
-   * The controller (the self of the outlet component)
-   */
-  controller: unknown;
-
-  /**
-   * The model (the resolved value of the model hook)
-   */
-  model: unknown;
-
-  /**
-   * The route's template – this is either a Template or a component, and it
-   * gets normalized during the render process.
+   * The route's invokable – a component with @controller and @model
+   * already applied by the route manager. This is either a CurriedValue
+   * (for classic routes) or a raw component/template for backward compatibility.
    */
   template: Template | object | undefined;
 }

packages/@ember/-internals/glimmer/lib/views/outlet.ts

@@ -68,8 +68,6 @@ export default class OutletView {
       render: {
         owner: owner,
         name: TOP_LEVEL_NAME,
-        controller: undefined,
-        model: undefined,
         template,
       },
     };
@@ -89,7 +87,6 @@ export default class OutletView {
       ref,
       name: TOP_LEVEL_NAME,
       template,
-      controller: undefined,
     };
   }
 

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

@@ -1686,7 +1686,7 @@ if (ENV._DEBUG_RENDER_TREE) {
           this.outlet({
             type: 'route-template',
             name: '-top-level',
-            args: { positional: [], named: { controller: undefined, model: undefined } },
+            args: { positional: [], named: {} },
             instance: undefined,
             template: outlet,
             bounds: this.elementBounds(this.element!),

packages/@ember/-internals/package.json

@@ -12,10 +12,14 @@
     "./error-handling": "./error-handling/index.ts",
     "./glimmer": "./glimmer/index.ts",
     "./glimmer/lib/components/internal": "./glimmer/lib/components/internal.ts",
+    "./glimmer/lib/component-managers/route-template": "./glimmer/lib/component-managers/route-template.ts",
     "./meta": "./meta/index.ts",
     "./metal": "./metal/index.ts",
     "./owner": "./owner/index.ts",
     "./routing": "./routing/index.ts",
+    "./routing/route-managers/utils": "./routing/route-managers/utils.ts",
+    "./routing/route-managers/classic-route-manager": "./routing/route-managers/classic-route-manager.ts",
+    "./routing/route-managers/route-manager": "./routing/route-managers/route-manager.ts",
     "./runtime": "./runtime/index.ts",
     "./string": "./string/index.ts",
     "./utility-types": "./utility-types/index.ts",

packages/@ember/-internals/routing/route-managers/classic-route-manager.ts

@@ -3,7 +3,13 @@ import { assert, info } from '@ember/debug';
 import { get } from '@ember/-internals/metal';
 import { DEBUG } from '@glimmer/env';
 import { hasInternalComponentManager } from '@glimmer/manager';
-import type { Destroyable, TemplateFactory } from '@glimmer/interfaces';
+import type { CurriedComponent, Destroyable, Template, TemplateFactory } from '@glimmer/interfaces';
+import type { Reference } from '@glimmer/reference';
+import { createComputeRef } from '@glimmer/reference';
+import { createCapturedArgs, curry, EMPTY_POSITIONAL } from '@glimmer/runtime';
+import { dict } from '@glimmer/util';
+import { tracked } from '@glimmer/tracking';
+import { makeRouteTemplate } from '@ember/-internals/glimmer/lib/component-managers/route-template';
 import type Route from '@ember/routing/route';
 import type {
   RouteManager,
@@ -21,10 +27,22 @@ import { Promise } from 'rsvp';
 
 // --- Bucket ---
 
-export interface ClassicRouteBucket extends RouteStateBucket {
+export class ClassicRouteBucket implements RouteStateBucket {
   route: Route;
-  context: unknown;
+  @tracked context: unknown;
+  controller: unknown;
   invokable: object | undefined;
+  instance: object;
+  args: CreateRouteArgs;
+
+  constructor(route: Route, args: CreateRouteArgs) {
+    this.route = route;
+    this.context = undefined;
+    this.controller = undefined;
+    this.invokable = undefined;
+    this.instance = route;
+    this.args = args;
+  }
 }
 
 // --- Classic interop args ---
@@ -55,13 +73,7 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
     let route = routeInstance as Route;
     route._setRouteName(args.name);
 
-    return {
-      route,
-      context: undefined,
-      invokable: undefined,
-      instance: route,
-      args,
-    };
+    return new ClassicRouteBucket(route, args);
   }
 
   getDestroyable(bucket: ClassicRouteBucket): Destroyable | null {
@@ -150,7 +162,7 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
         })
         .then((resolvedModel) => this._runAfterModel(route, resolvedModel, transition))
         .then((resolvedModel) => {
-          (bucket as any).context = resolvedModel;
+          bucket.context = resolvedModel;
 
           return resolvedModel;
         })
@@ -180,6 +192,10 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
       route.setup(context, transition!);
     }
 
+    // Sync the controller onto the bucket so that the
+    // the invokable (see getInvokable) picks it up.
+    bucket.controller = route.controller;
+
     if (route._environment?.options?.shouldRender !== false) {
       once(route._router, '_setOutlets');
     }
@@ -212,6 +228,11 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
   // --- Template/Component lookup ---
 
   getInvokable(bucket: ClassicRouteBucket): Promise<object | undefined> {
+    // Return cached invokable if already built
+    if (bucket.invokable !== undefined) {
+      return Promise.resolve(bucket.invokable);
+    }
+
     let route = bucket.route;
     let owner = getOwner(route);
     assert('Route is unexpectedly missing an owner', owner);
@@ -222,12 +243,17 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
       | object
       | undefined;
 
-    let template: object;
+    let component: object;
+    // Track whether the component is already a resolved definition (CurriedValue
+    // from makeRouteTemplate) vs a raw component class that needs VM resolution.
+    let isResolved = true;
 
     if (templateFactoryOrComponent) {
       if (hasInternalComponentManager(templateFactoryOrComponent)) {
-        // ComponentLike - pass through directly
-        template = templateFactoryOrComponent;
+        // ComponentLike - use directly, will be curried below.
+        // Not resolved yet — the VM needs to look up its definition.
+        component = templateFactoryOrComponent;
+        isResolved = false;
       } else {
         if (DEBUG && typeof templateFactoryOrComponent !== 'function') {
           let label: string;
@@ -246,8 +272,9 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
           );
         }
 
-        // TemplateFactory -> Template
-        template = (templateFactoryOrComponent as TemplateFactory)(owner);
+        // TemplateFactory -> Template -> RouteTemplate (curried component with no args)
+        let template = (templateFactoryOrComponent as TemplateFactory)(owner);
+        component = makeRouteTemplate(owner, name, template as Template);
       }
     } else {
       if (DEBUG) {
@@ -258,11 +285,33 @@ export class ClassicRouteManager implements RouteManager<ClassicRouteBucket> {
           });
         }
       }
-      // Default {{outlet}} template
-      template = route._topLevelViewTemplate(owner);
+      // Default {{outlet}} template -> RouteTemplate
+      let template = route._topLevelViewTemplate(owner);
+      component = makeRouteTemplate(owner, name, template as Template);
     }
 
-    bucket.invokable = template;
-    return Promise.resolve(template);
+    // Create refs that read from the bucket. The bucket fields are populated
+    // later (context during enter(), controller during didEnter()), so these
+    // refs start as undefined and resolve lazily.
+    //
+    // Controller: a tag-free compute ref. It's read lazily (first read happens
+    // during rendering, after didEnter has set bucket.controller).
+    //
+    // Model: bucket.context is @tracked, so this compute ref auto-tracks it
+    // and re-evaluates when the model changes (e.g. navigating to the same
+    // route with different dynamic segments).
+    let named = dict<Reference>();
+    named['controller'] = createComputeRef(() => bucket.controller);
+    named['model'] = createComputeRef(() => bucket.context);
+
+    let args = createCapturedArgs(named, EMPTY_POSITIONAL);
+
+    // Curry @controller and @model onto the component so the invokable is
+    // self-contained. The outlet rendering pipeline no longer needs to know
+    // about model or controller.
+    let invokable = curry(0 as CurriedComponent, component, owner, args, isResolved);
+
+    bucket.invokable = invokable;
+    return Promise.resolve(invokable);
   }
 }

packages/@ember/routing/route.ts

@@ -2118,7 +2118,7 @@ export default Route;
 // --- Wire the ClassicRouteManager on the Route base class ---
 // Every Route subclass inherits this via the prototype-walking lookup in getRouteManager.
 
-import { setRouteManager } from '@ember/-internals/routing';
-import { ClassicRouteManager } from '@ember/-internals/routing';
+import { setRouteManager } from '@ember/-internals/routing/route-managers/utils';
+import { ClassicRouteManager } from '@ember/-internals/routing/route-managers/classic-route-manager';
 
 setRouteManager(() => new ClassicRouteManager(), Route);

packages/@ember/routing/router.ts

@@ -34,7 +34,7 @@ import {
   getFullQueryParams,
   hasDefaultSerialize,
 } from '@ember/routing/route';
-import { getRouteManager } from '@ember/-internals/routing';
+import { getRouteManager } from '@ember/-internals/routing/route-managers/utils';
 import type {
   InternalRouteInfo,
   ModelFor,
@@ -629,8 +629,6 @@ class EmberRouter extends EmberObject.extend(Evented) implements Evented {
       let render = {
         owner: routeOwner,
         name: route.routeName,
-        controller: route.controller,
-        model: route.currentModel,
         template,
       };