Looking for feedback for addon implementing “routable components”

1

Hi all, I’ve been working on my first addon for a couple of months, and am looking for some feedback. It basically enables your routes to render components directly, skipping the controller / non-component template layer.

It’s based loosely on the Routable Components RFC, and while the RFC has been closed, the goals remain the same so this addon seeks to achieve those.

In addition, the addon has very minimal monkey-patching of Ember internals, which means you can drop the addon into an existing app and use both classic routing as well as the addon simultaneously.

I have a demo / docs site here: ember-component-routes Demo + Docs

And the github repo here: GitHub - wongpeiyi/ember-component-routes: Render components directly from routes in Ember

Hope to hear your comments and ideas!

3 Likes
2

@wongpeiyi It’s probably also worth posting this into the EmberJS Slack community #-announcements channel

2 Likes
3

I’m curious whether you tried an implementation that automatically provides an (invisible to users) controller implementation for every route. It seems like you could achieve the API you want with less customization that way.

For example, it would mean people could use regular {{outlet}} instead of learning about {{component-outlet}}.

2 Likes
4

Thanks I’ll do that :slight_smile:

1 Like
5

Thanks for taking a look! If I understand you correctly, this would entail monkey patching Ember internals to modify {{outlet}}?

At the moment the “routable components” aspect of the addon is achieved almost entirely using public API (hacking of Ember internals is minimal – only for query params support). I think there have been other addons that attempted to implement your RFC through monkey patching, but I wanted to approach it without changing how Ember currently works.

I think there is some win in being able to install the addon without affecting all existing routes, as well as in making the addon more future-proof. Though I do see your point about the learning curve being slightly steeper since there is less automatic magic going on.

1 Like
6

No, I’m suggesting that you may be able to automatically fill in a default Controller that renders the desired component with the desired model. This gives users an API that needs no controllers or top-level route templates because you’ve already filled them in behind the scenes.

For example, if your addon provided app/templates/-component-shim.hbs like:

{{component model.componentName model=model.realModel}}

And a Route base class like:

import Route from '@ember/routing/route';

export default Route.extend({
  renderTemplate(controller, model) {
    this.render('-component-shim', {
      model: {
        componentName: this.componentName,
        realModel: model
      }
    });
  }
});

Then users could do:

import Route from 'ember-component-routes';
export default Route.extend({
  model() {  ...  },
  componentName: 'my-component'
})

And their my-component will render and will receive the model.

That’s just a sketch, there would be lots of other things you could add to make the API you want. I think the one thing that would probably require hackery is splatting out a dynamic set of attributes onto the component.

4 Likes