emberx

API Design

What if ember router was a tiny and explicitly resolvable router you could import from npm. Flexible and simple API below can be progressively backward-compatible and support current ember router definitions!

import Router from 'emberx-npm';

import IndexRoute from './routes/index/route.ts';
import IndexRouteTemplate from './routes/index/template.hbs';

import PostsRoute from './routes/posts/route.ts';
import PostsRouteTemplate from './routes/posts/template.hbs';
import PostsIndexRoute from './routes/posts/index/route.ts';
import PostsIndexRouteTemplate from './routes/posts/index/template.hbs';

import PostsPostRoute from './routes/posts/post/route.ts';
import PostsPostRouteTemplate from './routes/posts/post/template.hbs';

Router.start([
  {
    path: '/',
    route: IndexRoute,
    template: IndexRouteTemplate
  },
  {
    path: '/posts',
    route: PostsRoute,
    template: PostsRouteTemplate
    indexRoute: PostsIndexRoute,
    indexTemplate: PostsIndexRouteTemplate
  },
  {
    path: '/posts/:slug',
    route: PostsPostRoute,
    template: PostsPostRouteTemplate
  }
]);

// OR templates should be embedable inside RouteDefinition.template = hbs`` just like glimmerx components

Router API also includes Router.map(routerDefinition) that can turn existing ember route definition to a specific tree structure for router_js. Router.map(function() {}) is something I might tackle later, it will resolve existing ember routers implicitly with a resolver definition(classic or MUD).

Backward-compatible API suggestion:

import Router from 'emberx-npm';
import SomeCustomResolver from './custom-resolver';

Router.resolver = SomeCustomResolver;

let existingMapDefinition = Router.map(function () {
  this.route("public", { path: "/" }, function () {
    this.route("index", { path: "/" });
    this.route("blog-post", { path: "/:slug" });
  });

  this.route("admin", function () {
    this.route("index", { path: "/" });
  });

  this.route("settings");
  this.route("login");
});

Router.start([
  {
    path: '/',
    route: IndexRoute,
    template: IndexRouteTemplate
  },
  {
    path: '/posts',
    route: PostsRoute,
    template: PostsRouteTemplate
    indexRoute: PostsIndexRoute,
    indexTemplate: PostsIndexRouteTemplate
  }
], existingMapDefinition);

This experiment is also a sketch for a new ember edition. It lifts up our very old ember router and makes it the most flexible, simple, mature, powerful and modern SPA router ever built. Therefore maybe we should call it ember supernova edition ;) This can literally make ember the no-brainer choice for frontend development, removing all build and asset size concerns many outsiders have.