ergo/polymer-ui-router

UI-router wrapper for Web Components

<polymer-ui-router>

UI Router Web Component wrapper (using minimal bits from Polymer 3.x base element)

Use https://ui-router.github.io/core/docs/latest/ and https://ui-router.github.io/ For general UI-Router documentation.

Demo page: https://www.webcomponents.org/element/ergo/polymer-ui-router

UI-Router is one of most popular routing solutions, with ports for angular 1.x, 2.x+ and react - now also available for Web Components.

UI-Router provides state based routing. Each feature of an application is defined as a state. One state is active at any time, and UI-Router manages the transitions between the states.

Each state describes the URL, the UI (a view or views), data prerequisites, and other logical prerequisites (such as authentication) for a feature. Before activating a state, UI-Router first fetches any prerequisites (asynchronously), and then activates the view(s) and updates the URL.

UI-Router states are hierarchical; states can be nested inside other states, forming a tree. Child states may inherit data and behavior (such as authentication) from their parent states.

Some features of UI Router:

• Hierarchical states both abstract and components based
• States can be resolve (including async) and activate based on set prerequisites
• Multiple views per state
• Views can be nested inside other views
• Transition and lifecycle API's

Example usage

let routerStates = [
   {name: "index_route", url: "/index", component: "index-comp"},
   {name: "foo", url: "/foo", component: "foo-comp"},
   {name: "arg", url: "/arg/:argumentId?:test", component: "arguments-comp"},
   {name: "user", url: "/bar", component: "bar-comp"},
   {name: "state_a", parent: 'bar.baz', url: "/a", component: "baz-a-comp"},
   {name: "state_b", parent: 'bar.baz', url: "/b", component: "baz-b-comp"}
   ]
// top-level
<uirouter-router id="ui-router" states="[[routerStates]]" auto-start>
</uirouter-router>

// view level, generates A tags
<uirouter-sref state="foo" reload>Foo (this restomps every click)</uirouter-sref>
<uirouter-sref state="arg" param-argument-id="99">
    With arguments directly
</uirouter-sref>

// this injects new views based on router state, /index path will 
// result in <index-comp/> being stomped
<uirouter-uiview></uirouter-uiview>

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed.

Install bower and npm dependencies (quick way is yarn bower).

Then run yarn serve to serve your application locally.

TIPS

Set a <base href="$path"> tag in your index.html to let the router know the static/base part of your URL

polymer-ui-router's Issues

[bug] Components of abstract states' children are not rendered

Hi,
Here I come today because I really liked the UI-Router but I have a Polymer project that needs to manage app routing. So I was glad to find out your UI-Router wrapper for Polymer! :)

But here I am: with AngularJS, I was used to use abstract states that do not have any HTML or template associated to them, but I was often using them to define "parent" states for nested states. For example (in AngularJS syntax):

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts'
    })
    .state('contacts.list', {
        url: '/list',
        views: { 'app-content@': { template: '<div contacts-list></div>' } }
    })
    .state('contacts.edit', {
        url: '/edit',
        views: { 'app-content@': { template: '<div contacts-edit></div>' } }
    })
    .state('contacts.new', {
        url: '/new',
        views: { 'app-content@': { template: '<div contacts-new></div>' } }
    });

These abstract states were very useful if you wanted to have a common prefix in a URI without defining any HTML or template associated to them (these are children states that handle HTML rendering).

But I think there is a little bug in your wrapper, and it seems to not take care of the abstract key in the state definition (in PolymerUiRouter-compliant syntax).
The fact is, for each state I define which is a child of an abstract state, the associated component is not rendered in the <uirouter-uiview>. So my route is working, as well as the URL update and my lazy-loading import, but the view component is just not rendered.

Could you take a look at this little bug in the next few days? It could be really useful!

Thanks, and keep up the good work!

PS: Don't hesitate if you need more information about this bug.

Pass bound values downwards, through uirouter-uiview or otherwise

I have some data that I was passing down to child elements using binding,

I don't think I can do that with uirouter-uiview, I thought I might be able to do it using a resolve function but the context for this is the global element..

<uirouter-uiview current-user-name="[[currentUserName]]" notification-decision="[[notificationDecision]]" >
</uirouter-uiview>

I've read the source and I don't know if this is possible,

Component API discussion

As per angular-ui/ui-router#3074 (comment) we probably should continue here on how this component should be implemented.

Any feedback is appreciated.

Project Status

Hi,

I'm just wondering where this implementation stands maturity wise, would you recommend using this on a production app?

I'm finding app-router & iron-pages very frustrating and I'd like to find a better solution.. I've used ui-router with angular and found it great.

Is your crossroadsjs implementation further along/more stable?

States do not seem to update

I'm trying to write some tests for a wrapper I made for polymer-ui-router to make it more stateless. Between the tests in karma, it looks like the library is just adding routes instead of overwriting them. (I get an error that the home route still exists for example.)

Is this known functionality? Should I write a repro?

Demos not working on webcomponents.org

It may be a fault on their side but it appears that the demos are not working at all..

Query, code structure for nested Routes

Hello again,

I'm playing around with the router, verifying it will work for all my use cases

I created a little repo to show what I'm trying to do.. https://github.com/vidhill/polymer-ui-router-poc
And a live githube pages version here: https://vidhill.github.io/polymer-ui-router-poc/build/default/index.html

I am using a subroute..

What I was hoping to be able to do was register the states for the subroutes somewhere besides the root application...

I have it working, to a degree,
I have subroutes under #/dogs/

However, on first load, if I go to #/dogs/terrier it redirects back to the default (cats_route) state defined using otherwise

-because, as at that point the states that reside under dogs.html haven't been registered yet..

---

Is there a better way to do what I am trying to achieve? Or would I be better to go with the approach of managing all states from one location?

Many Thanks.