Polymer 0.8 compatibility

[teckays]

Any plans to migrate app-router to Polymer 0.8?

[erikringsmuth]

I haven't tried 0.8 yet but I think everything should still work unless they changed the core-animated-pages API. The router is plain JS. I'll have to try out 0.8 soon though and probably update the examples to the new API.

[teckays]

There are some significant changes in custom element declaration and attributes configuration. Would be nice to have an official version for app-router as I'm planning to migrate my application myself because the 0.8 will be the base api towards 1.0 release.

Thank you.

[erikringsmuth]

The Polymer APIs changed, but the router doesn't use Polymer. It's a plain JS custom element. To that extent, Polymer's changes shouldn't affect the router at all.

[popbee]

Does the app-router require ShadowDOM? If so, then that would mean we would have to keep that polyfill just for app-router (since 0.8 no longer needs it).

[erikringsmuth]

It uses Shadow DOM if core-animated-pages is enabled.

[mbleigh]

I'm building an 0.8 app now, I'll try plugging in app-router and let you know how it goes.

[mbleigh]

Looks like it works! core-animated-pages hasn't been ported to 0.8 yet so that portion likely will need some updates when it has, but you can probably close this because I'm using it (without core-animated-pages) in 0.8 without problem

:+1: :smiley_cat:

[erikringsmuth]

Thanks @mbleigh! I'll keep the issue open as a placeholder for updating the documentation and examples.

[moderndeveloperllc]

@erikringsmuth core-animated-pages has moved under the grouping of neon-animation and specifically the neon-animated-pages element. I haven't looked at your code in a bit, so not sure how much work would be involved.

[erikringsmuth]

core-animated-pages is a big ugly bunch of code spread across the router. I don't see myself having the time and energy to cut this over to neon-animated-pages anytime soon. :+1: to anyone who wants to take this on and submit a PR!

[devAtPolydeals]

@erikringsmuth will moving to neon-animation from core-animated-pages just involved changing the below code or there is more stuff involved. I can volunteer to change it to neon if its just that piece of code. When you say "...core-animated-pages is a big ugly bunch of code spread across the router..." is it more then below?

 // <app-router core-animated-pages transitions="hero-transition cross-fade">
    if (router.hasAttribute('core-animated-pages')) {
      // use shadow DOM to wrap the <app-route> elements in a <core-animated-pages> element
      // <app-router>
      //   # shadowRoot
      //   <core-animated-pages>
      //     # content in the light DOM
      //     <app-route element="home-page">
      //       <home-page>
      //       </home-page>
      //     </app-route>
      //   </core-animated-pages>
      // </app-router>
      router.createShadowRoot();
      router.coreAnimatedPages = document.createElement('core-animated-pages');
      router.coreAnimatedPages.appendChild(document.createElement('content'));

      // don't know why it needs to be static, but absolute doesn't display the page
      router.coreAnimatedPages.style.position = 'static';

      // toggle the selected page using selected="path" instead of selected="integer"
      router.coreAnimatedPages.setAttribute('valueattr', 'path');

      // pass the transitions attribute from <app-router core-animated-pages transitions="hero-transition cross-fade">
      // to <core-animated-pages transitions="hero-transition cross-fade">
      router.coreAnimatedPages.setAttribute('transitions', router.getAttribute('transitions'));

      // set the shadow DOM's content
      router.shadowRoot.appendChild(router.coreAnimatedPages);

      // when a transition finishes, remove the previous route's content. there is a temporary overlap where both
      // the new and old route's content is in the DOM to animate the transition.
      router.coreAnimatedPages.addEventListener('core-animated-pages-transition-end', function() {
        // with core-animated-pages, navigating to the same route twice quickly will set the new route to both the
        // activeRoute and the previousRoute before the animation finishes. we don't want to delete the route content
        // if it's actually the active route.
        if (router.previousRoute && !router.previousRoute.hasAttribute('active')) {
          deactivateRoute(router.previousRoute);
        }
      });
    }

[erikringsmuth]

It looks like these 2 places contain all of the code: https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L63-L103 https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L378-L414

There's probably an alternative event to core-animated-pages-transition-end that needs to be listened to. https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L95

Go for it! If you get it working with neon animations that'd be awesome!

[naoak]

I tried to inject neon-animated-pages functionality into app-router like core-animated pages, but I could not succeed and don't know where the cause is. Finally, I rewrote the app-router with Polymer v1 and mixed it with neon-animation runner behaviors and some animation setups. It works.

I know this is not the best solution but it might help you @devAtPolydeals, @erikringsmuth.

[devAtPolydeals]

@naoak can you commit ur polymer v 1.0 compatible changes in your repo ?

[naoak]

I've not succeeded in making app-router v1 compatible yet, but this is the working repo which is written by Polymer v1. https://github.com/naoak/tetra-router