This project is currently just a thought experiment and should be considered early alpha. This approach currently requires some hacks in order to work.
Currently a WIP.
In src/index.ts
you define your routes by calling app.defineRoutes()
like so:
app.defineRoutes([
{ path: '/', component: 'glimmer-router' },
{ path: '/emails', component: 'emails' },
{ path: '/emails/compose', component: 'emails/compose' },
{ path: '/emails/:id', component: 'emails/view' }
]);
In order for you to start transitioning you must do two things. First, you must define where you want components to render into by defining an element with a data-outlet
property.
Note the name you give does not matter right now but in the future could be used similar to named outlets. Next, you call transitionTo off of the router by passing in the path where you want to transition to. The component you have defined for this path (in app.defineRoutes) will be rendered into this data-outlet
element.
import Component from '@glimmer/component';
// NOTE this will change to something absolute in the future
import getRouter from '../../../utils/get-router';
export default class GlimmerRouter extends Component {
linkTo() {
getRouter(this).transitionTo('/emails/1234');
}
}
If your route has dynamic segments then you grab them off of the router via the getRouter(this).params()
method. This is different from say how ember passes props into the route directly.
import Component from '@glimmer/component';
import getRouter from '../../../../utils/get-router';
export default class GlimmerRouter extends Component {
get id() {
return getRouter(this).params().id;
}
}
Look within /src
to see a simple nested routing example.
There are a lot of concepts and ideas that I do not have great solutions for at the moment. Mainly around a missing / lacking container system within glimmer. If you run into any issues or have ideas around different approaches I am all ears.