@emberx/router: Fast, advanced, flexible routing library for browsers and node.js

This is a futuristic take on the router of ember.js, which is the most advanced and mature routing solution I've seen so far in frontend development. It supports named routes, dynamic link segments, promise-aware model hooks, parent-children route relationships, query params, and loading and error substates. It renders on a server too, with @emberx/ssr. The router is fully testable with visit and currentURL helpers for @emberx/test-helpers.

// in index.ts:

import startRouter from './start-router';

const Router = startRouter();

export default Router.visit(`${document.location.pathname}${document.location.search}`);

// ===================================================
// in ./start-router.ts:

import Router from '@emberx/router';
import IndexRoute from './routes/index/route.ts';
import PostsRoute from './routes/posts/route.ts';
import PostsIndexRoute from './routes/posts/index/route.ts';
import PostsPostRoute from './routes/posts/post/route.ts';

export default function startRouter() {
  Router.addServices({
    intl: new LocaleService(),
  });

  return Router.start([
    {
      path: '/',
      name: 'index',
      route: IndexRoute,
    },
    {
      path: '/posts',
      name: 'posts',
      route: PostsRoute,
      indexRoute: PostsIndexRoute,
    },
    {
      path: '/posts/:slug',
      name: 'posts.post',
      route: PostsPostRoute,
    },
    {
      path: '/posts/:blog_post_id/comments',
      name: 'posts.post.comments',
      route: PostsPostCommentsRoute,
    },
  ]);
}

// ===================================================
// in ./routes/posts/post/route.ts:

import { Route, LinkTo, hbs, service, action } from '@emberx/router';
import { WelcomeBanner } from './components/welcome-banner';
import translate from './helpers/translate';
import RSVP from 'rsvp';

export default class PostsPostRoute extends Route {
  @service intl;

  static model(params, transition) {
    return RSVP.hash({ comments: fetchComments() }); // NOTE: RSVP.hash() returns a promise that waits for promises inside the hash
  }

  static includes = { LinkTo, WelcomeBanner, translate };

  static template = hbs`
    <WelcomeBanner />

    <h5>{{translate "post-page.welcome"}}</h5>
    <LinkTo @route="posts" @model={{11}} data-test-preview-link>All posts</LinkTo>
    <LinkTo @route="posts.post" @query={{hash preview=true}} @model={{11}} data-test-preview-reviewed-comments-link>View post 11</LinkTo>
    <LinkTo @route="posts.post" @query={{hash preview=true asUser=22}} @model={{12}} data-test-preview-reviewed-comments-link>View post 12 in preview mode by user 22</LinkTo>
    <LinkTo @route="posts.post" @query={{hash priviledge="admin"}} @model={{11}} data-test-preview-pending-comments-link>View this post in admin priviledge mode</LinkTo>

    <LinkTo @route="posts.post.comments" @model={{11}} data-test-preview-all-comments-link>See comments in detail</LinkTo>

    {{#each this.model.comments as |comment index|}}
      <div data-test-comment="{{index}}">
        <p>{{comment.content}} | <span class="{{comment.status}}">{{comment.status}}</span></p>
        <p>{{comment.postedAt}}</p>
      </div>
    {{/each}}

    {{yield}} <!-- PostsPostCommentRoute can use this route in its template and extend it thanks to yield -->

    <button {{on "click" this.changeLocale}}>{{translate "buttons.change-locale"}}</button>
  `;

  @action
  async changeLocale() {
    await this.intl.changeLocaleToRandomLocale();
    console.log('locale changed to:', this.intl.currentLocale);
  }
}

The guide to everything the router does, route names, the application route, index, loading and error routes, hooks and query params, page titles, actions on a page, is the emberx README.