Is there any plan on moving to Polymer 1.0?

devAtPolydeals commented 9 years ago

I am currently on Polymer 0.5 & am planning on moving to Polymer 1.0. I use app-router in my current web app. Do you plan on moving to 1.0 anytime soon?

antdking commented 9 years ago

works fine, but no animations yet

timboven commented 9 years ago

Not sure if I'm doing something wrong - but for me it's not working fine. The simple cases work - but the more advanced ones are not working.

I have a very 'simple' route, very similar to one of the examples in the readme - but with Polymer 1.0 loaded (and working fine):

<app-route path="/badge/:reference">
    <template>
      <span>{{reference}}</span>
    </template>
</app-route>

but 'reference' is not updated with the value I pass in the URL. Any clue if I'm doing something incorrect or is it definitely due to Polymer 1.0?

ninthspace commented 9 years ago

Note: if you're using hash-only URLs, Polymer 1.0.0-1.0.3 currently intercepts the hash, breaking routers. See: https://github.com/Polymer/polymer/pull/1780/files for the fix.

plequang commented 9 years ago

Hi,

In order to see how complicated it will be to migrate to Polymer 1.0, I've tried to migrate app-router's functional tests to Polymer 1.0, without changing anything to app-router. This means I've not migrated tests that are using core-animated-pages, or any other core-* elements.

The result is available in the following branch https://github.com/plequang/app-router/tree/polymer-1.0-tests-migration

Migration steps

migrate to new <dom-module> element registration
Migrate to new properties declarations
added <span> around all text content binding
removed curly brackets around declarative event handlers
this.querySelector('::shadow app-router') is not working anymore. Couldn't get the new Polymer.dom(this).querySelector('app-router') to work either, so used this.$.router instead.

Problems

Polymer `<template>`

https://erikringsmuth.github.io/app-router/#/databinding/#polymer-template

Because template.createInstance(model) has disappeared, this is not working anymore.

app-router creates instance of templates using document.importNode(template.content, true);, but without binding a model to them. As appRouter.createModel is not called anymore, data binding events are also not fired.

@timboven : this explains why your example is not working anymore.

Accessing the parent scope

https://erikringsmuth.github.io/app-router/#/databinding/#accessing-the-parent-scope Is also not working, as templateInstance in elements does not exists anymore.

app-router.init in attachedCallback

Currently app-router.init() method is called in the attachedCallback function (which is a callback from the custom elements specification). This was causing problems in the test-session.html test. The first state-change event is fired too early, before the session from <user-session> is bound to to the demo-app element. In the case of test-session.html, it works when initializing manually the app-router in the demo-app ready() callback.

test-session-global

My understanding of this this is that the <user-session> element in <demo-app> should "publish" it's session property to the inner <user-session> elements in <login-page> and <home-page>.

Databinding has changed a lot in Polymer 1.0, and I was not able to have it work. I'm a bit confused with the one-way/two-way/downward/upward bindings in Polymer 1.0.

domReady

As domReady does not exist anymore, I've used the attached callback, but I'm not sure this is strictly equivalent.

erikringsmuth commented 9 years ago

This looks like a great start! In the end we may need to remove features that Polymer 1.0 doesn't support.

To summaries your post:

Data binding to <template> elements with template.createInstance(model) is gone, so this functionality might have to get removed.
Accessing parent scope is gone, the alternatives are https://erikringsmuth.github.io/app-router/#/databinding/#bindrouter-attribute or https://erikringsmuth.github.io/app-router/#/databinding/#before-data-binding-event which I prefer anyway.
I'm guessing domReady is being replaced by the standard attached callback. More info here https://erikringsmuth.github.io/app-router/#/databinding/#callbacks. They're pretty much equivalent.

The test-session-global stuff was to test the two-way bindings in Polymer 0.5. This completely changed for 1.0. I'm not sure what we'll do here yet.

devAtPolydeals commented 9 years ago

In firefox i get: TypeError: document.querySelector(...).go is not a function I only have 1 line of code in my js. This is to take the user to landing page for now document.querySelector('app-router').go('/landing', {replace: true}); It works fine in chrome though. I don't know if its related to Polymer 1.0..go had always worked for me before in firefox

erikringsmuth commented 9 years ago

@devAtPolydeals that may be related to timing around upgrading the custom element. If you try to call document.querySelector('app-router').go(...) before the element is upgraded it will give you a dereference error. If that's the case you might have to manually initialize the router before calling go() https://erikringsmuth.github.io/app-router/#/events#addeventlistener.

devAtPolydeals commented 9 years ago

You you are right, i moved it under: ''' window.addEventListener('WebComponentsReady', function() { });``` and it was okay!

wonder why chrome didn't catch it?

plequang commented 9 years ago

For info, I've just updated the tests to make them work withFirefox. Also, I've used webcomponents-lite.js for all the tests, meaning Polymer is using "Shady DOM" instead of "Shadow DOM".

Regarding the automatic initialization of app-router in the attachedCallback function, there is a difference between Chrome and "polyfilled" browser (Firefox/Internet Explorer).

Considering the test-session.html test :

<dom-module id="demo-app">
      <template>
        <!-- bind the session object to demo-app -->
        <user-session session="{{session}}"></user-session>
        <app-router id="router" on-state-change="stateChange">
            [...]

The lifecycle of the elements in Chrome is :

demo-app created
user-session created
user-session ready
user-session attached
app-router attachedCallback
demo-app ready
demo-app attached

Whereas in polyfilled browsers :

demo-app created
user-session created
user-session ready
demo-app ready
demo-app attached
user-session attached
app-router attachedCallback

This means in Chrome, the app-router.init call in attachedCallback is too early (this callback is called by the browser as soon as the element is added to the DOM), so demo-app is not ready and the session object has not been bound to demo-app. Whereas it is OK in Firefox.

It is maybe a good practice to always use manual init when using app-router with Polymer 1.0.

christianbauer commented 9 years ago

I've been staring at this for an hour now and I can't get it to work with 2.6.1 and Polymer 1.0:

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">
    <template>
        <h1>Router Test</h1>
        <app-router>
            <app-route path="*">
                <template>
                    <h2>OK</h2>
                </template>
            </app-route>
        </app-router>
    </template>
    <script>
        Polymer({
            is: 'my-element'
        });
    </script>
</dom-module>

The inline template isn't rendered. I've tried manual init with the same result.

Barbayar commented 8 years ago

I'm using Polymer 1.0

      <app-route path="/order/:orderId">
        <template>
          <p>Your order number is {{orderId}}</p>
        </template>
      </app-route>

and, went to the http://localhost:3000/#/order/2, the result is

Your order number is {{orderId}}

binoculars commented 8 years ago

:+1:

sandro-k commented 8 years ago

@Barbayar in Polymer 1.0 <p>Your order number is {{orderId}}</p> is not supported use <p>Your order number is <span>{{orderId}}</span></p>

pensierinmusica commented 8 years ago

Same as @christianbauer here, inline templating is not rendering at all for me with Chrome and Polymer v 1.0.5

s-devaney commented 8 years ago

Perhaps the claim "works with Polymer" should be removed as, you know, it doesn't actually work with Polymer properly any more?

JesterXL commented 8 years ago

Same results as @pensierinmusica and @s-devaney. Imports work, but inline templates do not work in Polymer 1.1.

SPAHI4 commented 8 years ago

So will it be updated to 1.0?

Compufreak345 commented 8 years ago

Any progress here? I currently have to use more-routing and it's really annoying as it does not seem to get any bugfixes...

sandro-k commented 8 years ago

Have a look at the comment from addyosmani at https://github.com/PolymerElements/polymer-starter-kit/pull/426 about more-routing..

Compufreak345 commented 8 years ago

Thank you @sandro-k , that's very interesting.

erikringsmuth / app-router