33this is based on https://github.com/discourse/ember-route-template
44but instead of creating template gts filed we use route.gts files directly.
55
6- [ eti ] : https://github.com/ember-template-imports/ember-template-imports
76[ polaris ] : https://blog.emberjs.com/ember-5-0-released/#toc_the-journey-towards-ember-polaris
87[ resources ] : https://github.com/NullVoxPopuli/ember-resources/blob/main/docs/docs/README.md
98[ rfc ] : https://rfcs.emberjs.com/id/0779-first-class-component-templates/#typescript
109
11- Provides an adapter for using [ ` <template> ` tags] [ eti ] and components in route files
12-
13- ## Motivation
14-
15- So you have adopted [ ` <template> ` tags] [ eti ] in your app, and everything has
16- been great. It's time to add a new route to the app. You created a ` .gjs ` file
17- and programmed away, importing components and helper functions left and right,
18- maybe even declaring local JavaScript helpers for use in the template.
19-
20- When you are done, you tested it out in the browser, and everything broke. The
21- horror!
22-
23- Unfortunately, Ember does not support ` <template> ` tags as route templates at
24- the moment. This is an obvious coherence gap that needs to be addressed in
25- [ Polaris edition] [ polaris ] , likely by doing away with the controllers and route
26- templates altogether, in favor of making the route itself a component with a
27- ` <template> ` on it, and using the [ resources] [ resources ] pattern for data
28- fetching.
29-
30- In the meantime though, this can leave you in a tricky situation. As your app
31- and your team gets deeper into the ` <template> ` tag paradigm, it can be awkward
32- to author route templates in the old paradigm, and you may even find yourself
33- having to re-export certain component/modifier/helpers from ` app/ ` and make
34- them globally available, just so they can be used in route templates.
35-
36- This addon bridges the gap by shipping a small adapter that turns ` <template> `
37- and components into the route template format Ember currently expects, so you
38- can use the full feature set of ` .gjs ` in routes.
39-
40- Eventually, this addon won't be necessary anymore when the new Polaris routing
41- paradigm is available.
10+ Provides an adapter for using [ ` <template> ` tags] and components in route files
4211
4312## Usage
4413
@@ -118,15 +87,10 @@ class MyRouteComponent extends Component {
11887export default RoutableComponentRoute(MyRouteComponent);
11988```
12089
121- With this feature, it eliminates most of the reasons for needing controllers,
122- other than for query params (which is another coherence gap Polaris would need
123- to address). We suggest exploring moving your non-QP controller logic into a
124- component this way, treating controllers as "QP services" and nothing else.
125-
12690## How it works
12791
12892[ Under the hood] ( ./ember-routable-component/src/index.ts ) , the adapter generates
129- a route template that simply invokes the ` <template> ` or component you passed
93+ a route that simply invokes the ` <template> ` or component you passed
13094in with the ` @model ` and ` @controller ` arguments appropriately set.
13195
13296The hello world example from above is similar to first creating the component
@@ -156,35 +120,6 @@ named exports, if you need to access them from elsewhere.
156120
157121TypeScript and Glint is fully supported, just use the ` .gts ` extension instead.
158122
159- One caveat is that Glint cannot automatically infer the ` @model ` /` @controller `
160- arguments, and you will get a type error when trying to access them from the
161- ` <template> ` , which is the usual problem you've always had with template-only
162- components in Glint.
163-
164- According to the [ RFC] [ rfc ] , you can supply a signature like this:
165-
166- ``` gts
167- // app/routes/my-route.gts
168- import RoutableComponentRoute from "ember-routable-component";
169-
170- interface MyRouteSignature {
171- Args: {
172- model: string;
173- }
174- }
175-
176- export default RoutableComponentRoute(
177- // This does not actually work!
178- <template[MyRouteSignature]>
179- Now Glint is supposed to know {{@model}} is a string.
180- </template>
181- );
182- ```
183-
184- However, as of writing, this feature was never implemented, and the Ember
185- TypeScript is considering other alternatives. In the meantime, the adapter
186- function can accept a controller argument for the signature to make things easier:
187-
188123``` gts
189124// app/templates/my-route.gts
190125import RoutableComponentRoute from "ember-routable-component";
@@ -202,8 +137,7 @@ export default class ModelWorksRoute extends Route<MyController>(
202137}
203138```
204139
205- For Class-based components you can use the RoutableComponent
206- don't have this issue as they already accept a signature generic:
140+ For Class-based components you can use the RoutableComponent:
207141
208142``` gts
209143// app/templates/my-route.gts
0 commit comments