Support Polymer

[ergo]

Hello,

Currently ui-router supports NG1, NG2, react - is there any chance to include support for polymer?

[christopherthielen]

In theory, it should be fairly easy to support. I'd just need somebody familiar with polymer who is willing to collaborate on the project.

[ergo]

I have some polymer experience + I can ask some other people on polymer slack for participation.

[christopherthielen]

That sounds great. Can you invite me to the polymer slack?

I really don't have the bandwidth to fully polish another ui-router platform, so I'd want to make sure there's community support. Do you feel there is demand for a ui-router-polymer?

I'm very happy you brought this up, by the way. I have been considering making a proof of concept for a while now, but haven't had the time to do so.

[ergo]

@christopherthielen http://polymer-slack.herokuapp.com/ - you can invite yourself :-)

I'm not sure about demand - but i was thinking it can be useful for migrating applications between frameworks.

[ergo]

@christopherthielen Hello, do you have any test branch with the proof of concept code?

[christopherthielen]

@ergo I do not have proof of concept branch for polymer. I think the best example of how to build a framework adapter is the react port of ui-view.

If you're still interested in working on this, I'm very happy to help and offer guidance!

[christopherthielen]

Here is the short list of what we need to create to support Polymer: https://github.com/ui-router/core#build-your-own

[ergo]

Are there any docs on how router elements interact with eachother?

I have implemented something like this:

            <polymer-ui-router>
                <polymer-ui-router-state name="index" url="/admin2">
                    <h1>INDEX</h1>
                </polymer-ui-router-state>
                <polymer-ui-router-state name="users" url="/admin2/app-users">
                    <h1>USERS</h1>
                </polymer-ui-router-state>
            </polymer-ui-router>

That would instantiate router as a property of polymer-ui-router and register states using stateRegistry for the router from child elements, but I have no idea how to move from here, I'm not sure what else is needed and how location services interact with the router.

[christopherthielen]

@ergo do you have your code committed somewhere that I can look at?

I haven't dug into polymer yet, so I have difficulty getting started with polymer. You have the opposite problem with the ui-router code.

I think together we can prototype something pretty quickly.

---

We need a ui-view polymer component.

That ui-view component should be able to load another polymer component inside itself by using the state configuration. It should also be able to determine its parent ui-view component (if any).

When the component is created, it should register itself with the ViewService and de-register itself when it is destroyed.

When a state is activated, the router determines which new view configs should be activated (view configs are the views or component property on the state object). Then, it matches up the view config(s) with the registered ui-view component(s) and tells the components to load, using the configuration object

[ergo]

https://github.com/ergo/polymer-ui-router Here is what I've made so far.

It doesn't implement ui-view yet because I wasn't sure how to wire up router itself. after you run npm and bower install polymer serve should load a demo page that binds location element and an element that wraps router instance.

[ergo]

If this is of any help I've also made a complete implementation of crossroadsjs router in polymer, if it could serve as any reference https://beta.webcomponents.org/element/ergo/crossroadsjs-router/demo/demo/demo.html .

[ergo]

@christopherthielen any update on this?

[christopherthielen]

I finally got my ui-router-ng2 release out so I had a few hours to spare this morning. Here's a proof of concept: https://github.com/ergo/polymer-ui-router/pull/1

It currently supports views, nested views, named views+view targeting.

All the other code from ui-router-core should work, such as transitions and resolves.

The code is a mess because it's a proof of concept. If you run with this, we should discuss bootstrapping, registration, overall API and developer ergonomics. I've never used Polymer before, so I don't know what the typical approaches are, nor what would feel natural to the web component approach.

We could perhaps take some cues from the ui-router-react project. They have two bootstrap APIs. One is purely component based. The other is imperative, allowing manual construction of the router object.

[ergo]

This is awesome, linking some people from polymer team (and contributors) @kevinpschaaf @robdodson @TimvdLippe @rictic @notwaldorf @tjsavage @arthurevans here as I think this deserves some input from experts with more experience than I have on how to move forward from here. I know that the team is probably crazy busy pushing with 2.0 release but if we can get 1.0 this would be awesome for the community. I think however that to have this working would help greatly both people migrating from angular 1/2/react and just folks that want a complex SPA in general.

[TimvdLippe]

@ergo Quick note: I am not a member from the Polymer team :wink:

[ergo]

For reference the work by @christopherthielen is currently commited to https://github.com/ergo/polymer-ui-router repo.

[ergo]

I think we can safely close this ticket since everything is implemented :-)