timvdlippe / iron-lazy-pages Goto Github PK

In Mozilla failed to remove an element after loading the element definitions. Seams
e.srcElement is empty.

Getting error at this line : https://github.com/TimvdLippe/iron-lazy-pages/blob/master/iron-lazy-pages.html#L300

I have this error when switching between iron-lazy-page instances:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

• only appears on second load of iron-lazy-page children element
• related to Polymer upgrade to 1.6.0

An example as here, the file containing iron-lazy-pages is this one.
(try clicking between tabs multiple times).

The row which causes the issue is follow:

document.head.removeChild(e.target || e.srcElement);

iron-lazy-pages 2.0 shipped without template support, as it was not a blocker for publishing (Polymer 2 was out for a while already). However, a frequent request is template support for large pages. Thus it would be nice to, instead of shipping a custom implementation, relay to <dom-if>. E.g. if a page is <dom-if> instead, set its value to true and rely on its stamping mechanism to do all the other magic.

iron-lazy-pages-behavior.html:150 crash

async.html:34 Uncaught TypeError: Cannot read property 'disconnect' of null
at DomApi.unobserveNodes (polymer.dom.html:73)
at HTMLElement.detached (iron-overlay-behavior.html:210)
at HTMLElement.detached (class.html:275)
at HTMLElement.detached (class.html:272)
at HTMLElement.detached (class.html:272)
at HTMLElement.detached (class.html:272)
at HTMLElement.detached (class.html:272)
at HTMLElement.disconnectedCallback (legacy-element-mixin.html:125)
at Zc.disconnectedCallback (CustomElementInternals.js:313)
at R (CustomElementInternals.js:104)

It seems like data binding with an element within a iron-lazy-page is not working.

<template is="iron-lazy-page" data-route=""> <landing-view is-loading={{isLoading}}></landing-view> </template>

This is quite a big issue if you want to fetch data from one component to another. I'm not sure if this is a polymer behavior or something that can be fixed with this component?

When using paper-tabs, call of notifyResize is required to display selection bar correctly.
This is how it is implemented by iron-pages:

      _selectedPageChanged: function(selected, old) {
        this.async(this.notifyResize);
      }

For now, I have to do this manually when using iron-lazy-pages. Would you mind implementing it?

Add functionality to run entry and exit animation at the same time

It seems neon-animated-pages does this also, looks a lot nicer.

Description

When you two-way bind the selected attribute to another element it causes CSS mixins to not apply.
One primary use-case where this seems to be an issue is with app-location and app-route.

Expected outcome

paper-card has a box-shadow underneath

Actual outcome

paper-card doesn't have a box-shadow

Live Demo

Live Demo

If you remove the paper-input then the shadow appears.

When there are a lot of page navigations, keeping pages active might result in a slow application. When a certain number of pages has been stamped, the oldest page could be unstamped. This requires an array of active pages, sorted by last active and pages notifying the iron-lazy-pages parent whether they just stamped or not.

The demo doesn't work in Firefox. Lazy page content isn't loaded, although routing works as desired.

Only the index file is being loaded, while partials specified in the "path" attribute are not fetched (there are no requests in the Network tab of Firefox devtools).

There are no console errors, the only warning is that "Use of getPreventDefault() is deprecated", but it seems not to be related with the issue.

upd: I tried to debug it and something is wrong with the importHref - in Firefox it is never reached, neither onError callback. Firefox version is the newest one

Here is the workaround which works in Firefox kinda like as it is desired.

upd 2: the reason is vulcanizing with shards (using gulp-web-component-shards). Without vulcanizing component seems to be OK.

Likely a similar process to https://github.com/PolymerElements/iron-pages/compare/2.0-preview

The Travis build keeps on failing on Firefox, but it is working just fine locally. Somehow this needs to be fixed by correctly configuring Travis.

Description

The IronSelectableBehavior should be a dependency inside of IronLazyPagesBehavior since it depends on it.

So it seems that when selecting a page, then moving away from it before the required HTML is loaded, it will still stamp and select the previously selected page, but also stamp and show the newly selected item as well.

e.g. these sequence of events:

1. Select 'foo', which requires foo.html
2. Starts loading foo.html
3. Select bar, which requires bar.html
4. Starts loading bar.html
5. bar.html loads
6. Bar is stamped and shown
7. foo.html loads
8. Foo is stamped and shown

Given this line here I don't know how this is happening, but it appears it is.

Apparently the correct 2.0 version of iron-lazy-pages generates linter errors of polymer lint. This should not be happening. Not sure when I have time to investigate and address the issues.

• Lazy imports are generating warnings, as the analyzer is not traversing the lazy imports of iron-lazy-pages.
  • A PR is open to support this in the polymer-analyzer (Polymer/polymer-analyzer#600), but I do not think that one will be merged.
  • There is a behavior (https://github.com/Polymer/lazy-imports) that would resolve the linter errors, but forces more source code changes for the 2.0 version + import another behavior.
  • Maybe the behavior is not required and the user only needs to specify the rel="lazy-import", without actually any source code changes to iron-lazy-pages.

Is it possible to kill a component once it is no longer needed/selected? E. g., we have one page with podcasts, there I can play a podcast. Now if I switch route, the podcast will still play since the component/podcast player is still in the DOM.

Can iron-lazy-pages be used in conjunction with neon-animated-pages ? Is it in the horizon to be added ?
Thanks

Hi, I've created a new version of your iron-lazy-pages for polymer 3.0 that works with <dom-if> to mainly have css stylesheets lazy-loaded. Should work inside Shadow DOM?

  static get template() {
    return `
      <link rel="stylesheet" href="./my-view1/my-view1.css">
   ...

I still need to run some test but you can have a look at it here: https://github.com/robertosobachi/iron-lazy-pages/tree/3.0-preview

I can create a pull request if you're happy with it later on when I'm sure all tests are covered.

I've also created a new version of the polymer-starter-kit that runs polymer 3-preview with gulp and your iron-lazy-pages here https://github.com/robertosobachi/polymer-starter-kit

The demo page uses iron-lazy-pages with some path attributes with not existing components:

    <template is="iron-lazy-page" data-route="bar" path="bla.html">
      Bar page
    </template>

When trying to load it, we receive 404:

GET http://timvdlippe.github.io/iron-lazy-pages/components/iron-lazy-pages/demo/bla.html?0 404 (Not Found)

After that, in Chrome and Safari loading is set to false (and spinner disappears), and the Bar page content is displayed.
However, in Firefox loading occasionally remains on the first click to this tab.

In the console, the error is shown at this time:

TypeError: Argument 1 of Node.removeChild is not an object.

Only after switching tabs several times, Bar page is displayed.

Currently all pages are required to be an iron-lazy-page. This means that they all must be wrapped inside a template. It would be nicer if this requirement is not that strict and instead elements can be loaded without a template, by requiring the attribute data-path to be set on the element.

E.g. something like this:

<iron-lazy-pages attr-for-selected="data-route" selected="{{route}}">
  <template is="iron-lazy-page" data-route="foo" path="foo/foo.html">
    Foo page
  </template>
  <bar-page data-route="bar" data-path="bar/bar.html"></bar-page>
</iron-lazy-pages>

Hi,

We've converted our polymer 1.x app to 3.x manually. We've executed the 1.x project through java app, following the same procedure in the 3.x project we are getting MIME exception i.e, we are unable to import polymer elements from this statement.
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';

The pages execute fine independently using Polymer serve.

How to resolve the issue.

The polymer components are not loading.
Do we need to change the path while loading. How to do it ?
Do we need to change ES6 to AMD modules

Ranganath.

index.html

<iron-lazy-pages attr-for-selected="data-route" selected="dashboard">
  <template is="iron-lazy-page" data-route="dashboard" path="elements/chart-elements.html">
    <chart-view active="[[dashboardActive]]"></chart-view>
  </template>
</iron-lazy-pages>

chart-view.html

<iron-pages selected="0">
  <section>vimal</section>
  <section>TimvdLippe</section>
</iron-pages>

Error:
_Uncaught TypeError: event.detail.item.loadAndShow is not a function

There is an optAsync parameter which can be passed into importHref. This seems to be useful to prevent screen repainting, as mentioned here:

By default HTML imports block rendering of the page. 
The router waits for the link's load event to fire before using the imported document 
so this will speed up rendering when navigating between routes.

BTW, this parameter is used by app-drawer-template.

I will create a PR for implementing this. Not yet sure how should it be covered with tests.

We use iron-lazy-pages within a app-drawer-layout:

<app-drawer-layout>
  <app-drawer slot="drawer">...</app-drawer>

  <iron-lazy-pages attr-for-selected="name" selected="[[_selected]]" load-async>
    <my-home name="home" data-path="home.html"></my-home>
 ...

Loading the application in Chrome (Fedora) leads to an error because file http://localhost:8081/bower_components/app-layout/app-drawer-layout/home.html can't be found.

It works when changing the relative path to

  <my-home name="home" data-path="../../../elements/home.html"></my-home>

I would expect that the path in data-path is relative to the base path of the application (same as <link rel="import" href="home.html">.

I am facing a bit of a weird issue and I am not sure if iron-lazy-pages is the problem.

I am switching from a simple custom-element (no data binding), to a custom element with data binding (from getting-started to master-detail):

I am getting an error in dom-if.html that the binding is still null.

The stateChanged observer on the host has fired, so the data is actually there. e.g. the function that determines the selected attribute for iron-lazy-pages has already fired successfully, triggering the page switch.

This happens with or without hide-immediately.

What do you think is the problem here?

iron-lazy-pages do not restamp the selected node when hide-immediately is not set to true. Instead it behaves as if restamp is was to false and hide/show the already created nodes

You can reproduce this behavior here: https://jsbin.com/zugojesale/1/edit?html,output

The following error is thrown when using new polymer-analyzer:

error:   In vendor/iron-lazy-pages/iron-lazy-page.html: [unknown-polymer-behavior] - Unable to resolve behavior `Polymer.Templatizer`. Did you import it? Is it annotated with @polymerBehavior?

My suggestion is that polymer.html should be imported explicitly by iron-lazy-page.html

The third demo does not render the paper-tabs, and appears to be missing the element. Once the dom-if element is added, the dom-if templates do not render, as the 'if' attribute is not set. The demo could be modified to show how the dom-if template works if distributed to the light DOM.

Hi, I need to use the selected-attribute property, which iron-lazy-pages has from Polymer.IronSelectableBehavior, but I've noticed that it's setted on the instead of the stamped page element. It's important for me to know if the page is visible to the user.

How can I do that? Thank you!

Could you please create a release (to have a fixed version that could be referred from a build using the element)?

If you set restamp="false", the element will be removed and injected from DOM after loading the correct page.
As the default value is false, you can get rid of the attribute, but if you include it, the output doesn't work as expected.

I'm trying to use iron-lazy-pages in a wrapper component to handle pages distributed in its light DOM, like so:

<iron-lazy-pages ...>
  <content select="[is=iron-lazy-page]"></content>
</iron-lazy-pages

It works, but active pages are stamped as siblings of <content> in the parent's shadow DOM, which defeats the purpose of distributing templates to the light DOM to begin with.

Noticed support for distributing to light DOM was added in #26, also checked out the new demo from that PR and it stamps to Shadow DOM too. Is that the intended behaviour, or a bug?

I'm have a problem with connectedCallback ordering. Normal usage of webcomponents calls connectedCallback's from child to parent. If I write a console.log at connectedCallback's, I got:
Child
Parent

But when I'm using iron-lazy-pages, I got:
Parent
Child

I prepared a example, that demonstrate the issue: https://codepen.io/codefucker/project/editor/AVLJpr

The exit animation of the old page runs, then after a while the entry of the new page runs.
When using neon-animated-pages they are continguous, which makes it feel much faster.

Is there any way to use this element without actually fetching the elements?

For example I'd simply like to remove from the DOM not currently viewed "pages" and add them back when they are in-view.

The current <iron-pages> implementation simply hides them.

I've two pages:

<iron-lazy-pages attr-for-selected="name" selected="[[_selected]]">
  <template is="iron-lazy-page" name="list" path="list.html">List</template>
  <template is="iron-lazy-page" name="detail" path="detail.html">Detail</template>
</iron-lazy-pages>

When the user toggles between the two pages, my pages are restamped each time. This is especially tricky if a page holds state (e.g. load data from the backend or stay on a specific tab within the page).

Is there a way to activate the dom-if behavior (https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if)?

• Only hide the deactivated pages once they are stamped.
• (Potentially) explicitly request restamping via the restamp property.

Description

Some of the urls in the demos are broken.

https://github.com/TimvdLippe/iron-lazy-pages/blob/master/demo/index.html#L47
https://github.com/TimvdLippe/iron-lazy-pages/blob/master/demo/index.html#L139

It would be useful if we could specify which pages to always restamp and which not.

To allow animations to finish and show a loading indicator, stamping and removing should be performed after the import is finished.