Skip to content

Commit 4a08178

Browse files
authored
update docs
1 parent 1744c6d commit 4a08178

File tree

1 file changed

+3
-69
lines changed

1 file changed

+3
-69
lines changed

README.md

Lines changed: 3 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,11 @@
33
this is based on https://github.com/discourse/ember-route-template
44
but 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 {
11887
export 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
13094
in with the `@model` and `@controller` arguments appropriately set.
13195

13296
The 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

157121
TypeScript 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
190125
import 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

Comments
 (0)