From 521a743b6e6e53f9f9c5d84261c295a7e655d702 Mon Sep 17 00:00:00 2001
From: Liam Potter <liam@liampotter.co.uk>
Date: Fri, 8 May 2026 11:16:45 +0100
Subject: [PATCH 1/4] - use new route manager apis - make base-route an actual
 component with a custom component manager.

---
 app/route-managers/pioneer-manager.ts | 135 +++++-----------------
 app/route-managers/route-shell.gts    |  67 +++++++++++
 app/routes/BaseRoute.ts               |  51 ++++++++-
 app/routes/application.gts            |  18 +++
 package.json                          |   7 +-
 pnpm-lock.yaml                        | 155 ++------------------------
 6 files changed, 177 insertions(+), 256 deletions(-)
 create mode 100644 app/route-managers/route-shell.gts

diff --git a/app/route-managers/pioneer-manager.ts b/app/route-managers/pioneer-manager.ts
index 1886f3c..558af0c 100644
--- a/app/route-managers/pioneer-manager.ts
+++ b/app/route-managers/pioneer-manager.ts
@@ -1,63 +1,21 @@
-import { makeRouteTemplate } from '@ember/-internals/glimmer';
-import type { InternalOwner } from '@ember/-internals/owner';
 import type { RouteStateBucket } from '@ember/-internals/routing';
-import templateOnly from '@ember/component/template-only';
 import { assert } from '@ember/debug';
 import type Owner from '@ember/owner';
 import { routeCapabilities } from '@ember/routing';
-import { precompileTemplate } from '@ember/template-compilation';
-import type { CurriedComponent, Destroyable } from '@glimmer/interfaces';
-import { getComponentTemplate, setComponentTemplate } from '@glimmer/manager';
-import { getOwner } from '@glimmer/owner';
-import type { Reference } from '@glimmer/reference';
-import { createComputeRef, createConstRef } from '@glimmer/reference';
-import { createCapturedArgs, curry, EMPTY_POSITIONAL } from '@glimmer/runtime';
-import { tracked } from '@glimmer/tracking';
-import { dict } from '@glimmer/util';
+import type { Destroyable } from '@glimmer/interfaces';
+import RouteShell from 'use-route-manager/route-managers/route-shell';
 import type BaseRoute from 'use-route-manager/routes/BaseRoute';
 
 const routes = import.meta.glob('../routes/**/*.gts');
 
-// Wrapper template-only component that switches between the route's loading
-// state and its main template based on @isLoading. The route's resolved invokable
-// is passed in as @RouteComponent and the optional loading template as
-// @LoadingState. @model is forwarded to the route component once loading is done.
-const RouteShell = templateOnly();
-setComponentTemplate(
-  precompileTemplate(
-    `
-    {{#if @LoadingState}}
-      {{#if @isLoading}}
-        <@LoadingState />
-      {{else}}
-        <@RouteComponent @model={{@model}} />
-      {{/if}}
-    {{else}}
-      <@RouteComponent @model={{@model}} />
-     {{/if}}`,
-    { strictMode: true }
-  ),
-  RouteShell
-);
-
 export class RouteBucket implements RouteStateBucket {
   route: BaseRoute;
   args: { name: string };
 
+  // Cached after the first call to getInvokable so subsequent calls return
+  // the same component definition.
   invokable: object | undefined = undefined;
 
-  // Populated by the router synchronously after calling manager.enter(), so that
-  // child routes can await the parent's data resolution via getAncestorPromise.
-  enterPromise: Promise<unknown> | undefined = undefined;
-
-  // The resolved model returned from enter(). Tracked so that the @model ref
-  // in the curried invokable re-renders the template when data arrives.
-  @tracked context: unknown = undefined;
-
-  // True while enter() is in flight. The wrapper template reads this to
-  // switch between the loading state and the resolved route component.
-  @tracked isLoading = true;
-
   constructor(route: BaseRoute, args: { name: string }) {
     this.route = route;
     this.args = args;
@@ -78,7 +36,7 @@ export class PioneerRouteManager {
     args: { name: string }
   ): RouteBucket {
     // Instantiate the plain class route using `new`, passing the owner.
-    // Key difference from ClassicRouteManager — no EmberObject.create().
+    // Key difference from ClassicRouteManager, no EmberObject.create().
     const route = new RouteClass(this.#owner);
     const bucket = new RouteBucket(route, args);
     route.bucket = bucket;
@@ -91,9 +49,6 @@ export class PioneerRouteManager {
   }
 
   willEnter(bucket: RouteBucket): void {
-    // Mark loading at the start of every enter so re-entries (same route, new
-    // params) flip the wrapper back to the loading state.
-    bucket.isLoading = true;
     console.log(`PioneerRouteManager: will enter route "${bucket.args.name}"`);
   }
 
@@ -102,18 +57,15 @@ export class PioneerRouteManager {
     { getAncestorPromise }: { getAncestorPromise: () => Promise<unknown> }
   ): Promise<unknown> {
     console.log(`PioneerRouteManager: entering route "${bucket.args.name}"`);
-    try {
-      const ancestorPromises = getAncestorPromise();
-      console.log('ancestor promises', ancestorPromises);
-      const context = await bucket.route.model(ancestorPromises);
-      bucket.context = context;
-      return context;
-    } finally {
-      // Tracked field, so the wrapper template re-renders to show the route
-      // component once data has arrived (or after a failure, to avoid getting
-      // stuck on the loading state).
-      bucket.isLoading = false;
-    }
+    const ancestorPromises = getAncestorPromise();
+    console.log('ancestor promises', ancestorPromises);
+    const context = await bucket.route.model(ancestorPromises);
+    // The router writes this return value onto routeInfo.context. The
+    // framework's @model arg is a compute ref over routeInfo.context that
+    // re-reads when the outlet state dirties. The wrapper derives loading
+    // state from routeInfo.enterPromise (the promise this very async
+    // function returns), so no bucket flag is needed.
+    return context;
   }
 
   didEnter(_bucket: RouteBucket): void {
@@ -132,6 +84,12 @@ export class PioneerRouteManager {
     console.log(`PioneerRouteManager: did exit route "${_bucket.args.name}"`);
   }
 
+  getRouteWrapper(_bucket: RouteBucket): object {
+    // Module stable wrapper, the same definition is returned for every
+    // bucket. Per route data flows in via @routeInfo at render time.
+    return RouteShell;
+  }
+
   async getInvokable(bucket: RouteBucket): Promise<object | undefined> {
     console.log(
       `PioneerRouteManager: getInvokable for route "${bucket.args.name}"`
@@ -140,16 +98,16 @@ export class PioneerRouteManager {
       return bucket.invokable;
     }
 
-    const owner = getOwner(bucket.route)! as InternalOwner;
-
-    // Pull the named LoadingState export off the route module if it has one.
-    // Routes that omit it will render the route template immediately.
+    // Pull the named LoadingState export off the route module if it has one
+    // and stash it on the route instance so the wrapper can read it via
+    // @routeInfo.route.LoadingState. Routes that omit the export leave the
+    // field undefined and the wrapper renders the route component immediately.
     const routePath = `../routes/${bucket.args.name.replace(/\./g, '/')}.gts`;
     const routeModule = (await routes[routePath]?.()) as
       | { LoadingState?: object; default: object }
       | undefined;
-    const LoadingState = routeModule?.LoadingState;
     const RouteClass = routeModule?.default;
+    bucket.route.LoadingState = routeModule?.LoadingState;
 
     assert(
       `PioneerRouteManager: failed to load route class for "${bucket.args.name}". ` +
@@ -157,46 +115,7 @@ export class PioneerRouteManager {
       RouteClass
     );
 
-    // Retrieve the template factory from the co-located .gts class and wrap it
-    // in a RouteTemplate so it can be rendered as a component.
-    const templateFactory = getComponentTemplate(RouteClass);
-    if (!templateFactory) {
-      throw new Error(
-        `PioneerRouteManager: no template found for route "${bucket.args.name}". ` +
-          `Make sure the route class is defined in a .gts file with a co-located <template>.`
-      );
-    }
-
-    const template = templateFactory(owner);
-    const RouteComponent = makeRouteTemplate(owner, bucket.args.name, template);
-
-    // Curry RouteShell with the three args it needs. @model is a compute ref
-    // over bucket.context (tracked) so the route template re-renders when
-    // model() resolves. @isLoading is a compute ref over bucket.isLoading
-    // (tracked) so the wrapper switches from LoadingState to RouteComponent
-    // when enter() finishes. The component args are const refs since they
-    // never change for the lifetime of the route.
-    const namedArgs = dict<Reference>();
-    namedArgs['model'] = createComputeRef(() => bucket.context);
-    namedArgs['isLoading'] = createComputeRef(() => bucket.isLoading);
-    namedArgs['RouteComponent'] = createConstRef(
-      RouteComponent,
-      'RouteComponent'
-    );
-    namedArgs['LoadingState'] = createConstRef(LoadingState, 'LoadingState');
-
-    const args = createCapturedArgs(namedArgs, EMPTY_POSITIONAL);
-    // isResolved=false because RouteShell is a raw template-only component
-    // class that the VM still needs to look up via its component manager.
-    const invokable = curry(
-      0 as CurriedComponent,
-      RouteShell,
-      owner,
-      args,
-      false
-    );
-
-    bucket.invokable = invokable;
-    return invokable;
+    bucket.invokable = RouteClass;
+    return RouteClass;
   }
 }
diff --git a/app/route-managers/route-shell.gts b/app/route-managers/route-shell.gts
new file mode 100644
index 0000000..8baac12
--- /dev/null
+++ b/app/route-managers/route-shell.gts
@@ -0,0 +1,67 @@
+import type Owner from '@ember/owner';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type BaseRoute from 'use-route-manager/routes/BaseRoute';
+
+// Module stable wrapper component returned by PioneerRouteManager.getRouteWrapper.
+// The framework curries the per render args onto this template:
+//
+//   @Component  : the uncurried invokable from getInvokable
+//   @model      : compute ref over routeInfo.context, re-renders when the
+//                 route's enter resolves
+//   @controller : eagerly resolved by the outlet helper, unused by pioneer
+//   @routeInfo  : the InternalRouteInfo, exposes the route via `route` and
+//                 the per render enterPromise
+//
+// Loading state is derived from routeInfo.enterPromise: while the promise
+// is pending isLoading is true, once it settles we flip it to false. The
+// instance is recreated whenever the framework rebuilds the curried wrapper
+// (e.g. on a new transition with a new enterPromise), so the loading flag
+// resets naturally.
+
+interface RouteInfoLike {
+  route: BaseRoute;
+  enterPromise?: Promise<unknown>;
+}
+
+interface RouteShellSignature {
+  Args: {
+    Component: object;
+    model: unknown;
+    controller: unknown;
+    routeInfo: RouteInfoLike;
+  };
+}
+
+export default class RouteShell extends Component<RouteShellSignature> {
+  @tracked isLoading = true;
+
+  constructor(owner: Owner, args: RouteShellSignature['Args']) {
+    super(owner, args);
+    const promise = args.routeInfo.enterPromise;
+    if (promise === undefined) {
+      this.isLoading = false;
+      return;
+    }
+    const markSettled = () => {
+      this.isLoading = false;
+    };
+    promise.then(markSettled, markSettled);
+  }
+
+  get LoadingState(): object | undefined {
+    return this.args.routeInfo.route.LoadingState;
+  }
+
+  <template>
+    {{#if this.LoadingState}}
+      {{#if this.isLoading}}
+        <this.LoadingState />
+      {{else}}
+        <@Component @model={{@model}} />
+      {{/if}}
+    {{else}}
+      <@Component @model={{@model}} />
+    {{/if}}
+  </template>
+}
diff --git a/app/routes/BaseRoute.ts b/app/routes/BaseRoute.ts
index e54b53c..4449c39 100644
--- a/app/routes/BaseRoute.ts
+++ b/app/routes/BaseRoute.ts
@@ -1,7 +1,18 @@
+// this is all experimental, perfectly correct types are not a concern
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import { capabilities } from '@ember/component';
 import type Owner from '@ember/owner';
 import { setOwner } from '@ember/owner';
 import { setRouteManager } from '@ember/routing';
 import type EmberRouter from '@ember/routing/router';
+import { destroy, registerDestructor } from '@glimmer/destroyable';
+import { setComponentManager } from '@glimmer/manager';
 import {
   PioneerRouteManager,
   type RouteBucket,
@@ -14,8 +25,13 @@ export default class BaseRoute {
   manager!: PioneerRouteManager;
   bucket!: RouteBucket;
 
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async model(parentContext: Promise<unknown>): Promise<unknown> {
+  // Optional named export from the route module. Stashed on the instance by
+  // PioneerRouteManager.getInvokable when it loads the route module so the
+  // module stable RouteShell wrapper can render it during loading.
+  LoadingState?: object;
+
+  // eslint-disable-next-line @typescript-eslint/require-await, @typescript-eslint/no-unused-vars
+  async model(_parentContext: Promise<unknown>): Promise<unknown> {
     return null;
   }
 
@@ -27,3 +43,34 @@ export default class BaseRoute {
   }
 }
 setRouteManager((owner) => new PioneerRouteManager(owner), BaseRoute);
+
+class RouteShellComponentManager {
+  capabilities = capabilities('3.13');
+
+  private owner: unknown;
+
+  constructor(owner: unknown) {
+    this.owner = owner;
+  }
+
+  createComponent(ComponentClass: any, args: any): any {
+    const component = new ComponentClass(this.owner, args.named);
+
+    registerDestructor(component, () => component.willDestroy());
+
+    return component;
+  }
+
+  getContext(component: any): any {
+    return component;
+  }
+
+  destroyComponent(component: any): void {
+    destroy(component);
+  }
+}
+
+setComponentManager(
+  (owner: Owner) => new RouteShellComponentManager(owner),
+  BaseRoute
+);
diff --git a/app/routes/application.gts b/app/routes/application.gts
index 2bef911..2d8686b 100644
--- a/app/routes/application.gts
+++ b/app/routes/application.gts
@@ -1,5 +1,7 @@
 import BaseRoute from 'use-route-manager/routes/BaseRoute';
 import { LinkTo } from '@ember/routing';
+import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
 
 export const LoadingState = <template>
   <div class="pioneer">
@@ -8,6 +10,20 @@ export const LoadingState = <template>
 </template>;
 
 export default class ApplicationRoute extends BaseRoute {
+  @tracked thingy = 'Hello, this is the thingy!';
+
+  constructor(owner: Owner) {
+    super(owner);
+
+    setInterval(() => {
+      if (this.thingy.includes('Hello')) {
+        this.thingy = 'This is a tracked property on the application route.';
+      } else {
+        this.thingy = 'Hello, this is the thingy!';
+      }
+    }, 2000);
+  }
+
   async model() {
     await new Promise((resolve) => setTimeout(resolve, 1000));
     return {
@@ -39,6 +55,8 @@ export default class ApplicationRoute extends BaseRoute {
 
       <p>Model: {{if @model.message @model.message "Loading"}}</p>
 
+      {{this.thingy}}
+
       {{outlet}}
     </div>
 
diff --git a/package.json b/package.json
index f6625e0..874033b 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "@embroider/router": "^3.0.6",
     "@embroider/vite": "^1.5.2",
     "@eslint/js": "^9.39.2",
-    "@glimmer/component": "2.1.1",
+    "@glimmer/component": "link:../ember.js/packages/@glimmer/component",
     "@glint/ember-tsc": "^1.1.1",
     "@glint/template": "^1.7.4",
     "@glint/tsserver-plugin": "^2.1.0",
@@ -67,7 +67,7 @@
     "ember-page-title": "^9.0.3",
     "ember-qunit": "^9.0.4",
     "ember-resolver": "^13.1.1",
-    "ember-source": "file:ember-source-7.1.0-alpha.1.tgz",
+    "ember-source": "file:../ember.js",
     "ember-template-lint": "^7.9.3",
     "ember-welcome-page": "^8.0.5",
     "eslint": "^9.39.2",
@@ -96,7 +96,8 @@
   },
   "pnpm": {
     "overrides": {
-      "ember-source": "file:ember-source-7.1.0-alpha.1.tgz"
+      "ember-source": "link:../ember.js",
+      "@glimmer/component": "link:../ember.js/packages/@glimmer/component"
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fde1ba9..aa7fa02 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,7 +5,8 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  ember-source: file:ember-source-7.1.0-alpha.1.tgz
+  ember-source: link:../ember.js
+  '@glimmer/component': link:../ember.js/packages/@glimmer/component
 
 importers:
 
@@ -66,8 +67,8 @@ importers:
         specifier: ^9.39.2
         version: 9.39.4
       '@glimmer/component':
-        specifier: 2.1.1
-        version: 2.1.1
+        specifier: link:../ember.js/packages/@glimmer/component
+        version: link:../ember.js/packages/@glimmer/component
       '@glint/ember-tsc':
         specifier: ^1.1.1
         version: 1.5.0(typescript@5.9.3)
@@ -103,10 +104,10 @@ importers:
         version: 8.3.1(@babel/core@7.29.0)
       ember-cli-deprecation-workflow:
         specifier: ^3.4.0
-        version: 3.4.0(ember-source@file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1))
+        version: 3.4.0(ember-source@ember.js)
       ember-load-initializers:
         specifier: ^3.0.1
-        version: 3.0.1(ember-source@file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1))
+        version: 3.0.1(ember-source@ember.js)
       ember-modifier:
         specifier: ^4.3.0
         version: 4.3.0(@babel/core@7.29.0)
@@ -120,8 +121,8 @@ importers:
         specifier: ^13.1.1
         version: 13.2.0
       ember-source:
-        specifier: file:ember-source-7.1.0-alpha.1.tgz
-        version: file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1)
+        specifier: link:../ember.js
+        version: link:../ember.js
       ember-template-lint:
         specifier: ^7.9.3
         version: 7.9.3
@@ -1068,13 +1069,6 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@glimmer/component@2.1.1':
-    resolution: {integrity: sha512-zFZFaMbWy+9WOcDg/kCgrkGgqkLT39EE4FgyFD0MIkQO5coQsrRZyLsiBu1tbchyM+8hT8jAv+EQVUd8u+MdSQ==}
-    engines: {node: '>= 18'}
-
-  '@glimmer/env@0.1.7':
-    resolution: {integrity: sha512-JKF/a9I9jw6fGoz8kA7LEQslrwJ5jms5CXhu/aqkBWk+PmZ6pTl8mlb/eJ/5ujBGTiQzBhy5AIWF712iA+4/mw==}
-
   '@glimmer/interfaces@0.94.6':
     resolution: {integrity: sha512-sp/1WePvB/8O+jrcUHwjboNPTKrdGicuHKA9T/lh0vkYK2qM5Xz4i25lQMQ38tEMiw7KixrjHiTUiaXRld+IwA==}
 
@@ -1730,10 +1724,6 @@ packages:
   assert-never@1.4.0:
     resolution: {integrity: sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==}
 
-  ast-types@0.13.3:
-    resolution: {integrity: sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==}
-    engines: {node: '>=4'}
-
   astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
@@ -1839,9 +1829,6 @@ packages:
   backbone@1.6.1:
     resolution: {integrity: sha512-YQzWxOrIgL6BoFnZjThVN99smKYhyEXXFyJJ2lsF1wJLyo4t+QjmkLrH8/fN22FZ4ykF70Xq7PgTugJVR4zS9Q==}
 
-  backburner.js@2.8.0:
-    resolution: {integrity: sha512-zYXY0KvpD7/CWeOLF576mV8S+bQsaIoj/GNLXXB+Eb8SJcQy5lqSjkRrZ0MZhdKUs9QoqmGNIEIe3NQfGiiscQ==}
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -2573,23 +2560,16 @@ packages:
 
   ember-cli-deprecation-workflow@3.4.0:
     resolution: {integrity: sha512-Ksrmib4mjD4xa0dqFgxJLBwkSp9EVYH6jSqe2NpODlBKEAZhsVzQj5wKPnC1dXfK3Erq/r1Fh3q4g46FZiCUiw==}
-    version: 3.4.0
     engines: {node: '>= 18'}
     peerDependencies:
       ember-source: '>= 3.28.0'
 
-  ember-cli-get-component-path-option@1.0.0:
-    resolution: {integrity: sha512-k47TDwcJ2zPideBCZE8sCiShSxQSpebY2BHcX2DdipMmBox5gsfyVrbKJWIHeSTTKyEUgmBIvQkqTOozEziCZA==}
-
   ember-cli-is-package-missing@1.0.0:
     resolution: {integrity: sha512-9hEoZj6Au5onlSDdcoBqYEPT8ehlYntZPxH8pBKV0GO7LNel88otSAQsCfXvbi2eKE+MaSeLG/gNaCI5UdWm9g==}
 
   ember-cli-normalize-entity-name@1.0.0:
     resolution: {integrity: sha512-rF4P1rW2P1gVX1ynZYPmuIf7TnAFDiJmIUFI1Xz16VYykUAyiOCme0Y22LeZq8rTzwBMiwBwoE3RO4GYWehXZA==}
 
-  ember-cli-path-utils@1.0.0:
-    resolution: {integrity: sha512-Qq0vvquzf4cFHoDZavzkOy3Izc893r/5spspWgyzLCPTaG78fM3HsrjZm7UWEltbXUqwHHYrqZd/R0jS08NqSA==}
-
   ember-cli-preprocess-registry@5.0.1:
     resolution: {integrity: sha512-Jb2zbE5Kfe56Nf4IpdaQ10zZ72p/RyLdgE5j5/lKG3I94QHlq+7AkAd18nPpb5OUeRUT13yQTAYpU+MbjpKTtg==}
     engines: {node: 16.* || >= 18}
@@ -2597,9 +2577,6 @@ packages:
   ember-cli-string-utils@1.1.0:
     resolution: {integrity: sha512-PlJt4fUDyBrC/0X+4cOpaGCiMawaaB//qD85AXmDRikxhxVzfVdpuoec02HSiTGTTB85qCIzWBIh8lDOiMyyFg==}
 
-  ember-cli-typescript-blueprint-polyfill@0.1.0:
-    resolution: {integrity: sha512-g0weUTOnHmPGqVZzkQTl3Nbk9fzEdFkEXydCs5mT1qBjXh8eQ6VlmjjGD5/998UXKuA0pLSCVVMbSp/linLzGA==}
-
   ember-cli-version-checker@5.1.2:
     resolution: {integrity: sha512-rk7GY+FmLn/2e22HsZs0Ycrz8HQ1W3Fv+2TFOuEFW9optnDXDgkntPBIl6gact/LHsfBM5RKbM3dHsIIeLgl0Q==}
     engines: {node: 10.* || >= 12.*}
@@ -2621,7 +2598,6 @@ packages:
 
   ember-load-initializers@3.0.1:
     resolution: {integrity: sha512-qV3vxJKw5+7TVDdtdLPy8PhVsh58MlK8jwzqh5xeOwJPNP7o0+BlhvwoIlLYTPzGaHdfjEIFCgVSyMRGd74E1g==}
-    version: 3.0.1
     engines: {node: '>= 18.*'}
     peerDependencies:
       ember-source: '>= 5'
@@ -2645,17 +2621,6 @@ packages:
   ember-rfc176-data@0.3.18:
     resolution: {integrity: sha512-JtuLoYGSjay1W3MQAxt3eINWXNYYQliK90tLwtb8aeCuQK8zKGCRbBodVIrkcTqshULMnRuTOS6t1P7oQk3g6Q==}
 
-  ember-router-generator@2.0.0:
-    resolution: {integrity: sha512-89oVHVJwmLDvGvAUWgS87KpBoRhy3aZ6U0Ql6HOmU4TrPkyaa8pM0W81wj9cIwjYprcQtN9EwzZMHnq46+oUyw==}
-    engines: {node: 8.* || 10.* || >= 12}
-
-  ember-source@file:ember-source-7.1.0-alpha.1.tgz:
-    resolution: {integrity: sha512-zXK9UnXZdE8hynoMVrSqu2aZJnzc3u7Nfa9F8Bt6Csmr/cB8Uuzw/VpEnToHvhM10ZIpnth+gtr1oSTsDNCHFg==, tarball: file:ember-source-7.1.0-alpha.1.tgz}
-    version: 7.1.0-alpha.1
-    engines: {node: '>= 20.19'}
-    peerDependencies:
-      '@glimmer/component': '>= 1.1.2'
-
   ember-template-lint@7.9.3:
     resolution: {integrity: sha512-iqC4rv/oVlXViGuf7hlOA/bC550ZqacZKAc8WvQV0ueeCtIYPkYYK+Tc7FwpM8qGx3jiwu/ZsTuNfPInI5pL7Q==}
     engines: {node: ^18.18.0 || >= 20.9.0}
@@ -3395,10 +3360,6 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  inflection@2.0.1:
-    resolution: {integrity: sha512-wzkZHqpb4eGrOKBl34xy3umnYHx8Si5R1U4fwmdxLo5gdH6mEK8gclckTj/qWqy4Je0bsDYe/qazZYuO7xe3XQ==}
-    engines: {node: '>=14.0.0'}
-
   inflection@3.0.2:
     resolution: {integrity: sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==}
     engines: {node: '>=18.0.0'}
@@ -4219,10 +4180,6 @@ packages:
     resolution: {integrity: sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==}
     engines: {node: '>= 0.9.0'}
 
-  private@0.1.8:
-    resolution: {integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==}
-    engines: {node: '>= 0.6'}
-
   proc-log@5.0.0:
     resolution: {integrity: sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -4313,10 +4270,6 @@ packages:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
 
-  recast@0.18.10:
-    resolution: {integrity: sha512-XNvYvkfdAN9QewbrxeTOjgINkdY/odTgTS56ZNEWL9Ml0weT4T3sFtvnTuF+Gxyu46ANcRm1ntrF6F5LAJPAaQ==}
-    engines: {node: '>= 4'}
-
   redeyed@1.0.1:
     resolution: {integrity: sha512-8eEWsNCkV2rvwKLS1Cvp5agNjMhwRe2um+y32B2+3LqOzg4C9BBPs6vzAfV16Ivb8B9HPNKIqd8OrdBws8kNlQ==}
 
@@ -4341,9 +4294,6 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
-  remove-types@1.0.0:
-    resolution: {integrity: sha512-G7Hk1Q+UJ5DvlNAoJZObxANkBZGiGdp589rVcTW/tYqJWJ5rwfraSnKSQaETN8Epaytw8J40nS/zC7bcHGv36w==}
-
   request-light@0.7.0:
     resolution: {integrity: sha512-lMbBMrDoxgsyO+yB3sDcrDuX85yYt7sS8BfQd11jtbW/z5ZWgLZRcEGLsLoYw7I0WSUGQBs8CC8ScIxkTX1+6Q==}
 
@@ -4452,9 +4402,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  route-recognizer@0.3.4:
-    resolution: {integrity: sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==}
-
   router@2.2.0:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
@@ -6449,15 +6396,6 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
-  '@glimmer/component@2.1.1':
-    dependencies:
-      '@embroider/addon-shim': 1.10.2
-      '@glimmer/env': 0.1.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@glimmer/env@0.1.7': {}
-
   '@glimmer/interfaces@0.94.6':
     dependencies:
       '@simple-dom/interface': 1.4.0
@@ -7126,8 +7064,6 @@ snapshots:
 
   assert-never@1.4.0: {}
 
-  ast-types@0.13.3: {}
-
   astral-regex@2.0.0: {}
 
   async-disk-cache@1.3.5:
@@ -7269,8 +7205,6 @@ snapshots:
     dependencies:
       underscore: 1.13.8
 
-  backburner.js@2.8.0: {}
-
   balanced-match@1.0.2: {}
 
   balanced-match@2.0.0: {}
@@ -8012,16 +7946,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-cli-deprecation-workflow@3.4.0(ember-source@file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1)):
+  ember-cli-deprecation-workflow@3.4.0(ember-source@ember.js):
     dependencies:
       '@babel/core': 7.29.0
       ember-cli-babel: 8.3.1(@babel/core@7.29.0)
-      ember-source: file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1)
+      ember-source: link:../ember.js
     transitivePeerDependencies:
       - supports-color
 
-  ember-cli-get-component-path-option@1.0.0: {}
-
   ember-cli-is-package-missing@1.0.0: {}
 
   ember-cli-normalize-entity-name@1.0.0:
@@ -8030,8 +7962,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-cli-path-utils@1.0.0: {}
-
   ember-cli-preprocess-registry@5.0.1:
     dependencies:
       broccoli-funnel: 3.0.8
@@ -8041,13 +7971,6 @@ snapshots:
 
   ember-cli-string-utils@1.1.0: {}
 
-  ember-cli-typescript-blueprint-polyfill@0.1.0:
-    dependencies:
-      chalk: 4.1.2
-      remove-types: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   ember-cli-version-checker@5.1.2:
     dependencies:
       resolve-package-path: 3.1.0
@@ -8213,9 +8136,9 @@ snapshots:
       - eslint
       - typescript
 
-  ember-load-initializers@3.0.1(ember-source@file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1)):
+  ember-load-initializers@3.0.1(ember-source@ember.js):
     dependencies:
-      ember-source: file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1)
+      ember-source: link:../ember.js
 
   ember-modifier@4.3.0(@babel/core@7.29.0):
     dependencies:
@@ -8248,38 +8171,6 @@ snapshots:
 
   ember-rfc176-data@0.3.18: {}
 
-  ember-router-generator@2.0.0:
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/traverse': 7.29.0
-      recast: 0.18.10
-    transitivePeerDependencies:
-      - supports-color
-
-  ember-source@file:ember-source-7.1.0-alpha.1.tgz(@glimmer/component@2.1.1):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@embroider/addon-shim': 1.10.2
-      '@glimmer/component': 2.1.1
-      '@simple-dom/interface': 1.4.0
-      backburner.js: 2.8.0
-      broccoli-file-creator: 2.1.1
-      chalk: 4.1.2
-      ember-cli-babel: 8.3.1(@babel/core@7.29.0)
-      ember-cli-get-component-path-option: 1.0.0
-      ember-cli-normalize-entity-name: 1.0.0
-      ember-cli-path-utils: 1.0.0
-      ember-cli-string-utils: 1.1.0
-      ember-cli-typescript-blueprint-polyfill: 0.1.0
-      ember-router-generator: 2.0.0
-      inflection: 2.0.1
-      route-recognizer: 0.3.4
-      semver: 7.7.4
-      silent-error: 1.1.1
-      simple-html-tokenizer: 0.5.11
-    transitivePeerDependencies:
-      - supports-color
-
   ember-template-lint@7.9.3:
     dependencies:
       '@lint-todo/utils': 13.1.1
@@ -9260,8 +9151,6 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  inflection@2.0.1: {}
-
   inflection@3.0.2: {}
 
   inflight@1.0.6:
@@ -10030,8 +9919,6 @@ snapshots:
 
   printf@0.6.1: {}
 
-  private@0.1.8: {}
-
   proc-log@5.0.0: {}
 
   proc-log@6.1.0: {}
@@ -10130,13 +10017,6 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
-  recast@0.18.10:
-    dependencies:
-      ast-types: 0.13.3
-      esprima: 4.0.1
-      private: 0.1.8
-      source-map: 0.6.1
-
   redeyed@1.0.1:
     dependencies:
       esprima: 3.0.0
@@ -10164,15 +10044,6 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
-  remove-types@1.0.0:
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
-      prettier: 2.8.8
-    transitivePeerDependencies:
-      - supports-color
-
   request-light@0.7.0: {}
 
   require-directory@2.1.1: {}
@@ -10291,8 +10162,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.60.1
       fsevents: 2.3.3
 
-  route-recognizer@0.3.4: {}
-
   router@2.2.0:
     dependencies:
       debug: 4.4.3

From 10f3d7f8940fd9691c697ddeb5fcf84092ec2fc2 Mon Sep 17 00:00:00 2001
From: Liam Potter <liam@liampotter.co.uk>
Date: Mon, 8 Jun 2026 20:23:58 +0100
Subject: [PATCH 2/4] update to work with latest version of route manager

---
 app/route-managers/pioneer-manager.ts | 23 +++++-----
 app/route-managers/route-shell.gts    | 36 ++++++++++------
 app/router.ts                         |  2 +
 app/routes/BaseRoute.ts               | 60 +++++++++++----------------
 app/routes/classic/get.ts             | 19 +++++++++
 app/routes/pokemon/get.gts            | 42 +++++++++++++++++++
 app/templates/classic/get.gts         | 13 ++++++
 7 files changed, 137 insertions(+), 58 deletions(-)
 create mode 100644 app/routes/classic/get.ts
 create mode 100644 app/routes/pokemon/get.gts
 create mode 100644 app/templates/classic/get.gts

diff --git a/app/route-managers/pioneer-manager.ts b/app/route-managers/pioneer-manager.ts
index 558af0c..2afd8fc 100644
--- a/app/route-managers/pioneer-manager.ts
+++ b/app/route-managers/pioneer-manager.ts
@@ -1,6 +1,7 @@
-import type { RouteStateBucket } from '@ember/-internals/routing';
+import type { EnterState, RouteStateBucket } from '@ember/-internals/routing';
 import { assert } from '@ember/debug';
 import type Owner from '@ember/owner';
+import { setOwner } from '@ember/owner';
 import { routeCapabilities } from '@ember/routing';
 import type { Destroyable } from '@glimmer/interfaces';
 import RouteShell from 'use-route-manager/route-managers/route-shell';
@@ -37,8 +38,10 @@ export class PioneerRouteManager {
   ): RouteBucket {
     // Instantiate the plain class route using `new`, passing the owner.
     // Key difference from ClassicRouteManager, no EmberObject.create().
-    const route = new RouteClass(this.#owner);
+    const route = new RouteClass();
+    setOwner(route, this.#owner);
     const bucket = new RouteBucket(route, args);
+    route._router = this.#owner.lookup('service:router')._router;
     route.bucket = bucket;
     route.manager = this;
     return bucket;
@@ -52,14 +55,14 @@ export class PioneerRouteManager {
     console.log(`PioneerRouteManager: will enter route "${bucket.args.name}"`);
   }
 
-  async enter(
-    bucket: RouteBucket,
-    { getAncestorPromise }: { getAncestorPromise: () => Promise<unknown> }
-  ): Promise<unknown> {
+  async enter(bucket: RouteBucket, state: EnterState): Promise<unknown> {
     console.log(`PioneerRouteManager: entering route "${bucket.args.name}"`);
-    const ancestorPromises = getAncestorPromise();
-    console.log('ancestor promises', ancestorPromises);
-    const context = await bucket.route.model(ancestorPromises);
+    const { to } = state;
+    const ancestorContext = to.parent
+      ? state.getAncestorContext(to.parent)
+      : Promise.resolve(undefined);
+
+    const context = await bucket.route.model(ancestorContext, to.params ?? {});
     // The router writes this return value onto routeInfo.context. The
     // framework's @model arg is a compute ref over routeInfo.context that
     // re-reads when the outlet state dirties. The wrapper derives loading
@@ -84,7 +87,7 @@ export class PioneerRouteManager {
     console.log(`PioneerRouteManager: did exit route "${_bucket.args.name}"`);
   }
 
-  getRouteWrapper(_bucket: RouteBucket): object {
+  getRouteWrapper(): object {
     // Module stable wrapper, the same definition is returned for every
     // bucket. Per route data flows in via @routeInfo at render time.
     return RouteShell;
diff --git a/app/route-managers/route-shell.gts b/app/route-managers/route-shell.gts
index 8baac12..c593976 100644
--- a/app/route-managers/route-shell.gts
+++ b/app/route-managers/route-shell.gts
@@ -7,20 +7,24 @@ import type BaseRoute from 'use-route-manager/routes/BaseRoute';
 // The framework curries the per render args onto this template:
 //
 //   @Component  : the uncurried invokable from getInvokable
-//   @model      : compute ref over routeInfo.context, re-renders when the
-//                 route's enter resolves
+//   @model      : route.currentModel, unused by pioneer (which has no
+//                 controller/currentModel); the model is sourced from the
+//                 routeInfo instead
 //   @controller : eagerly resolved by the outlet helper, unused by pioneer
-//   @routeInfo  : the InternalRouteInfo, exposes the route via `route` and
-//                 the per render enterPromise
+//   @routeInfo  : the InternalRouteInfo, exposes the route via `route`, the
+//                 resolved `context`, and the per render `enterPromise`
 //
-// Loading state is derived from routeInfo.enterPromise: while the promise
-// is pending isLoading is true, once it settles we flip it to false. The
-// instance is recreated whenever the framework rebuilds the curried wrapper
-// (e.g. on a new transition with a new enterPromise), so the loading flag
+// The pioneer manager renders immediately (its getInvokable does not await
+// enter), so the model arrives asynchronously. We read it from the
+// routeInfo's enterPromise: while the promise is pending isLoading is true
+// and we render the route's LoadingState (if any); once it resolves we render
+// the route component with the resolved context as @model. A new transition
+// rebuilds the curried wrapper with a fresh enterPromise, so the loading flag
 // resets naturally.
 
 interface RouteInfoLike {
   route: BaseRoute;
+  context?: unknown;
   enterPromise?: Promise<unknown>;
 }
 
@@ -35,18 +39,26 @@ interface RouteShellSignature {
 
 export default class RouteShell extends Component<RouteShellSignature> {
   @tracked isLoading = true;
+  @tracked model: unknown = undefined;
 
   constructor(owner: Owner, args: RouteShellSignature['Args']) {
     super(owner, args);
+
     const promise = args.routeInfo.enterPromise;
+
+    // No enter promise means there is nothing to wait for, render the route's
+    // already-resolved context immediately.
     if (promise === undefined) {
+      this.model = args.model;
       this.isLoading = false;
       return;
     }
-    const markSettled = () => {
+
+    const settle = (context: unknown) => {
+      this.model = context;
       this.isLoading = false;
     };
-    promise.then(markSettled, markSettled);
+    promise.then(settle, () => settle(undefined));
   }
 
   get LoadingState(): object | undefined {
@@ -58,10 +70,10 @@ export default class RouteShell extends Component<RouteShellSignature> {
       {{#if this.isLoading}}
         <this.LoadingState />
       {{else}}
-        <@Component @model={{@model}} />
+        <@Component @model={{this.model}} />
       {{/if}}
     {{else}}
-      <@Component @model={{@model}} />
+      <@Component @model={{this.model}} />
     {{/if}}
   </template>
 }
diff --git a/app/router.ts b/app/router.ts
index 0c73c3a..9bbecb5 100644
--- a/app/router.ts
+++ b/app/router.ts
@@ -10,6 +10,7 @@ Router.map(function () {
   // Add route declarations here
   this.route('classic', function () {
     this.route('sub');
+    this.route('get', { path: '/get/:pokemon_id' });
   });
 
   this.route('pokemon', function () {
@@ -20,6 +21,7 @@ Router.map(function () {
         });
       });
     });
+    this.route('get', { path: '/get/:pokemon_id' });
   });
 
   this.route('classic-pokemon', function () {
diff --git a/app/routes/BaseRoute.ts b/app/routes/BaseRoute.ts
index 4449c39..46f07c0 100644
--- a/app/routes/BaseRoute.ts
+++ b/app/routes/BaseRoute.ts
@@ -1,71 +1,59 @@
-// this is all experimental, perfectly correct types are not a concern
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-
 import { capabilities } from '@ember/component';
 import type Owner from '@ember/owner';
-import { setOwner } from '@ember/owner';
 import { setRouteManager } from '@ember/routing';
-import type EmberRouter from '@ember/routing/router';
 import { destroy, registerDestructor } from '@glimmer/destroyable';
-import { setComponentManager } from '@glimmer/manager';
 import {
   PioneerRouteManager,
-  type RouteBucket,
+  RouteBucket,
 } from 'use-route-manager/route-managers/pioneer-manager';
+import type { Constructor } from '@glimmer/component/dist/-private/base-component-manager';
+import type { Arguments } from '@glimmer/interfaces/lib/runtime/arguments';
+import type GlimmerComponent from '@glimmer/component/dist/-private/component';
+import { setComponentManager } from '@ember/component';
+import type EmberRouter from '@ember/routing/router';
 
 export default class BaseRoute {
-  _router!: EmberRouter;
-  _stashNames() {} // used by ember/router for QP's but not relevant to this demo
+  declare _router: EmberRouter;
+  declare bucket: RouteBucket;
+  declare manager: PioneerRouteManager;
 
-  manager!: PioneerRouteManager;
-  bucket!: RouteBucket;
-
-  // Optional named export from the route module. Stashed on the instance by
-  // PioneerRouteManager.getInvokable when it loads the route module so the
-  // module stable RouteShell wrapper can render it during loading.
   LoadingState?: object;
 
-  // eslint-disable-next-line @typescript-eslint/require-await, @typescript-eslint/no-unused-vars
-  async model(_parentContext: Promise<unknown>): Promise<unknown> {
-    return null;
-  }
+  constructor(protected owner: Owner) {}
 
-  constructor(owner: Owner) {
-    setOwner(this, owner);
-    // eslint-disable-next-line ember/no-private-routing-service
-    const router = owner.lookup('router:main');
-    this._router = router as EmberRouter;
+  model(
+    _parentContext: Promise<unknown>,
+    _params: Record<string, unknown>
+  ): unknown {
+    return Promise.resolve();
   }
 }
+
 setRouteManager((owner) => new PioneerRouteManager(owner), BaseRoute);
 
 class RouteShellComponentManager {
   capabilities = capabilities('3.13');
 
-  private owner: unknown;
+  private owner: Owner;
 
-  constructor(owner: unknown) {
+  constructor(owner: Owner) {
     this.owner = owner;
   }
 
-  createComponent(ComponentClass: any, args: any): any {
+  createComponent(
+    ComponentClass: Constructor<GlimmerComponent>,
+    args: Arguments
+  ): GlimmerComponent {
     const component = new ComponentClass(this.owner, args.named);
-
     registerDestructor(component, () => component.willDestroy());
-
     return component;
   }
 
-  getContext(component: any): any {
+  getContext(component: GlimmerComponent): GlimmerComponent {
     return component;
   }
 
-  destroyComponent(component: any): void {
+  destroyComponent(component: GlimmerComponent): void {
     destroy(component);
   }
 }
diff --git a/app/routes/classic/get.ts b/app/routes/classic/get.ts
new file mode 100644
index 0000000..be08e14
--- /dev/null
+++ b/app/routes/classic/get.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable warp-drive/no-external-request-patterns */
+import Route from '@ember/routing/route';
+
+export default class GetRoute extends Route {
+  async model(params: Record<string, unknown>) {
+    const response = await fetch(
+      `https://pokeapi.co/api/v2/pokemon/${params.pokemon_id}`
+    );
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const data = await response.json();
+
+    return Promise.resolve({
+      message: 'Hello from the pokemon model!',
+      pokemon: data,
+    });
+  }
+}
diff --git a/app/routes/pokemon/get.gts b/app/routes/pokemon/get.gts
new file mode 100644
index 0000000..c7bec04
--- /dev/null
+++ b/app/routes/pokemon/get.gts
@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable warp-drive/no-external-request-patterns */
+import BaseRoute from 'use-route-manager/routes/BaseRoute';
+
+export const LoadingState = <template>
+  <div class="pioneer">
+    <h3>Loading Pikachu...</h3>
+  </div>
+</template>;
+
+export default class GetRoute extends BaseRoute {
+  async model(
+    _parentContext: Promise<unknown>,
+    params: Record<string, unknown>
+  ) {
+    const response = await fetch(
+      `https://pokeapi.co/api/v2/pokemon/${params.pokemon_id}`
+    );
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const data = await response.json();
+
+    return Promise.resolve({
+      message: 'Hello from the pokemon model!',
+      pokemon: data,
+    });
+  }
+
+  <template>
+    <div class="pioneer">
+
+      <h1>{{@model.pokemon.name}}</h1>
+
+      <img
+        src={{@model.pokemon.sprites.front_default}}
+        alt={{@model.pokemon.name}}
+      />
+
+      {{outlet}}
+    </div>
+  </template>
+}
diff --git a/app/templates/classic/get.gts b/app/templates/classic/get.gts
new file mode 100644
index 0000000..bf95b58
--- /dev/null
+++ b/app/templates/classic/get.gts
@@ -0,0 +1,13 @@
+<template>
+  <div class="classic">
+
+    <h1>{{@model.pokemon.name}}</h1>
+
+    <img
+      src={{@model.pokemon.sprites.front_default}}
+      alt={{@model.pokemon.name}}
+    />
+
+    {{outlet}}
+  </div>
+</template>

From a46d71ebc5bd62e6bc7f694f288565c5f5a76984 Mon Sep 17 00:00:00 2001
From: Liam Potter <liam@liampotter.co.uk>
Date: Wed, 24 Jun 2026 11:50:38 +0100
Subject: [PATCH 3/4] .

---
 app/route-managers/pioneer-manager.ts | 14 ++++----------
 app/routes/BaseRoute.ts               |  7 ++++---
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/app/route-managers/pioneer-manager.ts b/app/route-managers/pioneer-manager.ts
index 2afd8fc..e36f2e7 100644
--- a/app/route-managers/pioneer-manager.ts
+++ b/app/route-managers/pioneer-manager.ts
@@ -1,7 +1,6 @@
-import type { EnterState, RouteStateBucket } from '@ember/-internals/routing';
+import type { EnterState, RouteStateBucket } from '@ember/routing';
 import { assert } from '@ember/debug';
 import type Owner from '@ember/owner';
-import { setOwner } from '@ember/owner';
 import { routeCapabilities } from '@ember/routing';
 import type { Destroyable } from '@glimmer/interfaces';
 import RouteShell from 'use-route-manager/route-managers/route-shell';
@@ -38,10 +37,8 @@ export class PioneerRouteManager {
   ): RouteBucket {
     // Instantiate the plain class route using `new`, passing the owner.
     // Key difference from ClassicRouteManager, no EmberObject.create().
-    const route = new RouteClass();
-    setOwner(route, this.#owner);
+    const route = new RouteClass(this.#owner);
     const bucket = new RouteBucket(route, args);
-    route._router = this.#owner.lookup('service:router')._router;
     route.bucket = bucket;
     route.manager = this;
     return bucket;
@@ -58,16 +55,13 @@ export class PioneerRouteManager {
   async enter(bucket: RouteBucket, state: EnterState): Promise<unknown> {
     console.log(`PioneerRouteManager: entering route "${bucket.args.name}"`);
     const { to } = state;
+
     const ancestorContext = to.parent
       ? state.getAncestorContext(to.parent)
       : Promise.resolve(undefined);
 
     const context = await bucket.route.model(ancestorContext, to.params ?? {});
-    // The router writes this return value onto routeInfo.context. The
-    // framework's @model arg is a compute ref over routeInfo.context that
-    // re-reads when the outlet state dirties. The wrapper derives loading
-    // state from routeInfo.enterPromise (the promise this very async
-    // function returns), so no bucket flag is needed.
+
     return context;
   }
 
diff --git a/app/routes/BaseRoute.ts b/app/routes/BaseRoute.ts
index 46f07c0..0c9da23 100644
--- a/app/routes/BaseRoute.ts
+++ b/app/routes/BaseRoute.ts
@@ -10,16 +10,17 @@ import type { Constructor } from '@glimmer/component/dist/-private/base-componen
 import type { Arguments } from '@glimmer/interfaces/lib/runtime/arguments';
 import type GlimmerComponent from '@glimmer/component/dist/-private/component';
 import { setComponentManager } from '@ember/component';
-import type EmberRouter from '@ember/routing/router';
+import { setOwner } from '@ember/owner';
 
 export default class BaseRoute {
-  declare _router: EmberRouter;
   declare bucket: RouteBucket;
   declare manager: PioneerRouteManager;
 
   LoadingState?: object;
 
-  constructor(protected owner: Owner) {}
+  constructor(protected owner: Owner) {
+    setOwner(this, owner);
+  }
 
   model(
     _parentContext: Promise<unknown>,

From 991f57c6396990dd109b1737ac3f10e1d46af4a1 Mon Sep 17 00:00:00 2001
From: Liam Potter <liam@liampotter.co.uk>
Date: Wed, 24 Jun 2026 14:49:58 +0100
Subject: [PATCH 4/4] implement getRenderState

---
 app/route-managers/pioneer-manager.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/app/route-managers/pioneer-manager.ts b/app/route-managers/pioneer-manager.ts
index e36f2e7..725d9e2 100644
--- a/app/route-managers/pioneer-manager.ts
+++ b/app/route-managers/pioneer-manager.ts
@@ -5,6 +5,7 @@ import { routeCapabilities } from '@ember/routing';
 import type { Destroyable } from '@glimmer/interfaces';
 import RouteShell from 'use-route-manager/route-managers/route-shell';
 import type BaseRoute from 'use-route-manager/routes/BaseRoute';
+import { getOwner } from '@ember/owner';
 
 const routes = import.meta.glob('../routes/**/*.gts');
 
@@ -44,6 +45,25 @@ export class PioneerRouteManager {
     return bucket;
   }
 
+  getRenderState(bucket: RouteBucket): object | undefined {
+    const route = bucket.route;
+    const wrapper = this.getRouteWrapper();
+    const invokable = bucket.invokable;
+
+    const owner = getOwner(route);
+    assert('Route is unexpectedly missing an owner', owner);
+
+    return {
+      owner,
+      name: bucket.args.name,
+      controller: undefined,
+      model: undefined,
+      wrapper,
+      invokable,
+      bucket,
+    };
+  }
+
   getDestroyable(bucket: RouteBucket): Destroyable | null {
     return bucket.route;
   }
@@ -91,6 +111,7 @@ export class PioneerRouteManager {
     console.log(
       `PioneerRouteManager: getInvokable for route "${bucket.args.name}"`
     );
+
     if (bucket.invokable !== undefined) {
       return bucket.invokable;
     }