From 4e9fe51c44e3d2e73a2a4f315c12e51893f1e709 Mon Sep 17 00:00:00 2001
From: patrick <pa.trickjlp@gmail.com>
Date: Mon, 18 Mar 2024 15:25:30 +0100
Subject: [PATCH 1/2] support outlet

---
 .../ember-route-template.js                        |  2 +-
 test-app/app/router.ts                             |  3 +++
 test-app/app/routes/outlet-works.gts               | 14 ++++++++++++++
 test-app/app/routes/outlet-works/sub-route.gts     | 12 ++++++++++++
 test-app/app/routes/sub-route/index.gts            | 12 ++++++++++++
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 test-app/app/routes/outlet-works.gts
 create mode 100644 test-app/app/routes/outlet-works/sub-route.gts
 create mode 100644 test-app/app/routes/sub-route/index.gts

diff --git a/ember-routable-component/src/templates/ember-routable-component/ember-route-template.js b/ember-routable-component/src/templates/ember-routable-component/ember-route-template.js
index 19f9254..8dcf38f 100644
--- a/ember-routable-component/src/templates/ember-routable-component/ember-route-template.js
+++ b/ember-routable-component/src/templates/ember-routable-component/ember-route-template.js
@@ -1,2 +1,2 @@
 import { precompileTemplate } from '@ember/template-compilation';
-export default precompileTemplate("<this.Component @model={{this.model}} @controller={{this.controller}} />");
+export default precompileTemplate("<this.Component @model={{this.model}} @controller={{this}}><:outlet>{{outlet}}</:outlet></this.Component>");
diff --git a/test-app/app/router.ts b/test-app/app/router.ts
index e6ba493..05e9026 100644
--- a/test-app/app/router.ts
+++ b/test-app/app/router.ts
@@ -13,4 +13,7 @@ Router.map(function () {
   this.route('model-works', { path: 'model-works/:id' });
   this.route('controller-works', { path: 'controller-works/:id' });
   this.route('component-works', { path: 'component-works/:id' });
+  this.route('outlet-works',function() {
+    this.route('sub-route');
+  });
 });
diff --git a/test-app/app/routes/outlet-works.gts b/test-app/app/routes/outlet-works.gts
new file mode 100644
index 0000000..5a22341
--- /dev/null
+++ b/test-app/app/routes/outlet-works.gts
@@ -0,0 +1,14 @@
+import Route from 'ember-routable-component';
+import ControllerWorksController from 'test-app/controllers/controller-works';
+
+interface Signature {
+  Args: {
+    controller: ControllerWorksController;
+  };
+}
+
+export default class ComponentWorksRoute extends Route<Signature>(
+  <template>hello, outlet: {{yield to='outlet'}}</template>,
+) {
+
+}
diff --git a/test-app/app/routes/outlet-works/sub-route.gts b/test-app/app/routes/outlet-works/sub-route.gts
new file mode 100644
index 0000000..adc2377
--- /dev/null
+++ b/test-app/app/routes/outlet-works/sub-route.gts
@@ -0,0 +1,12 @@
+import Route from 'ember-routable-component';
+import ControllerWorksController from 'test-app/controllers/controller-works';
+
+interface Signature {
+  Args: {
+    controller: ControllerWorksController;
+  };
+}
+
+export default Route<Signature>(
+  <template>hello sub route</template>,
+);
diff --git a/test-app/app/routes/sub-route/index.gts b/test-app/app/routes/sub-route/index.gts
new file mode 100644
index 0000000..adc2377
--- /dev/null
+++ b/test-app/app/routes/sub-route/index.gts
@@ -0,0 +1,12 @@
+import Route from 'ember-routable-component';
+import ControllerWorksController from 'test-app/controllers/controller-works';
+
+interface Signature {
+  Args: {
+    controller: ControllerWorksController;
+  };
+}
+
+export default Route<Signature>(
+  <template>hello sub route</template>,
+);

From fb46f9ee27c7a33860cbc99246487f82db99e381 Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patricklx@users.noreply.github.com>
Date: Mon, 18 Mar 2024 15:28:25 +0100
Subject: [PATCH 2/2] Update README.md

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index 6b64913..bf90917 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,24 @@ class MyRouteComponent extends Component {
 export default RoutableComponentRoute(MyRouteComponent);
 ```
 
+You can also use outlets like this:
+
+```gjs
+// app/routes/my-route.gjs
+import RoutableComponentRoute from 'ember-routable-component';
+import Component from "@glimmer/component";
+
+class MyRouteComponent extends Component {
+  <template>Hello, {{this.message}}. Why was I screaming? {{yield to='outlet'}}</template>
+
+  get message() {
+    return String(this.args.model).toUpperCase();
+  }
+}
+
+export default RoutableComponentRoute(MyRouteComponent);
+```
+
 With this feature, it eliminates most of the reasons for needing controllers,
 other than for query params (which is another coherence gap Polaris would need
 to address). We suggest exploring moving your non-QP controller logic into a