Roll-up issue when using lit-virtualizer with lit element

[cintaccs]

Anyone using lit-virtualizer successfully with rollup / lit element and the list to be managed as a shadowDOM nested a few levels below the initial body.
My issue is that when I build with webpack it works - but with roll-up it doesn't. There is an issue with roll-up around

// constructor is not enumerable.
Object.defineProperty(EventTarget.prototype, "constructor", {
value: EventTarget,
configurable: true,
writable: true,
});

in the event-target-shim.mjs dependency.

event-target-shim.mjs:850 Uncaught TypeError: Object prototype may only be an Object or null: undefined

It appears even before calling a web component using the
import { scroll } from 'lit-virtualizer';
But I guess somehow during creation of the Litelement template where the scroll is used in render function - it must be initialising something in the lit-virtualizer code...

When I have it working with web-pack - I used the <lit-virtualizer wrapper - but that wont work with rollup either. At least I haven't been successful trying.

The rest of the code including many MDC web components etc. works fine in both rollup and webpack configs. The reason I am trying to get rollup to work with the lit-virtualizer code is that the generated code is significantly smaller (a.o. due to a working template minifier that can handle lit-element render code).

Sorry for the confusing issue description - but maybe someone have the same issue or may run into it soon...

[graynorton]

Hi, @cintaccs.

We use Rollup to build the samples in this repo, so it's definitely possible to get it working, though it did take some trial and error to get all the way there. I've forgotten some of the details, but as I recall the key was building the babel polyfills separately and loading them first, before loading the application build.

In order to help diagnose the specific problem you're seeing, we'd need a bunch more info, but realistically we probably don't have time to dig into it right now anyway, so I'm hoping instead we can point you to what we're doing. Our build requirements are probably not exactly the same as yours, but it might be worth your time to look at our Rollup config and see if it's of any help. I'll include a couple of links below, but first a few notes for context:

• We are building several independent samples from a single Rollup config, so we've done some factoring of our config that probably wouldn't need to emulate in your own.
• We specifically want different builds for different browser targets (i.e., we don't want to serve a lowest-common-denominator build to modern browsers), and for our purposes we're OK with paying a penalty on initial page load to run client-side logic that selects the appropriate build. I'm not sure whether you're looking for a universal build, or if you're considering the module/no-module pattern or server-based differential serving logic to target builds to the browsers you support, but odds are you'd wouldn't want to copy our approach exactly.
• Our latest build config isn't yet pushed to the master branch; it's only on our better-grid working branch at the moment.
• There are commented-out sections in both of the files below that you can ignore; these files haven't been cleaned up yet.

With those caveats, here's our current Rollup config:

https://github.com/PolymerLabs/uni-virtualizer/blob/better-grid/packages/uni-virtualizer-examples/rollup.config.js

And just for context (again, not advocating you emulate this), here's the client-side logic we're using to load the right build per-browser:

https://github.com/PolymerLabs/uni-virtualizer/blob/better-grid/packages/uni-virtualizer-examples/public/shared/boot.js

[cintaccs]

Thanks a lot! @graynorton
I have in the meantime tried a number of combinations - without luck - however the information you have provided (thanks a million for that!!!!!) eventually will allow me to get a step closer.
I understand that you have limited resources and time - therefore thanks again for the explanation above!!
The main point is (IMO) that lit-virtualizer is a strong strong list scroll handler for thousands and thousands of entries - it works very well inside lit element components with MDC list, icons etc. - and as roll-up in general is being used across most Polymer repos as well as MDC components - and even in the lit virtualizer example itself - I really think it should be made to work. I have tried a couple of things - like extracting the virtualizer (which works with webpack) into own bundle - and that should work I think (no luck however to use the customElements tag afterwards) ... but it could be related to browser selection logic you mention above... or maybe it is the "module" type script ....
I will try to get this to work with the family of lit element components that I use with rollup - the generated rollup results is significantly smaller than my web pack prod builds (mainly because of rollup-plugin-minify-html-literals which I can make work with Rollup - but the counterpart in webpack I can't figure out). Therefore the desire to have all these components to work together with Rollup.
I will let you know and share if I figure it out!
Thanks again!
PS: I build towards Evergreen browsers and latest Safari - so no need for polyfills or IE old Edge compatibility.

[cintaccs]

@graynorton - I got it to work after a while... :-)

I don't need IE11 compatibility and polyfills - and I therefore removed code related to "older" browsers to get as clean basis as possible. I am not 100% sure that it is a good basis for sharing - but the main issue I found was that the this._eventTargetPromise failed in class Layout1dBase when using Roll-up.

My fix - which is probably a hack... was to do the following:

1. Eleminate the eventtarget shim dependency.
2. Create a dummy class
   class MyTarget extends EventTarget {}
3. change to:

        this._eventTargetPromise = (CCEventTarget().then((Ctor) => {
            this._eventTarget = new MyTarget();
        }));

4. created another dummy promise:

async function CCEventTarget()  {
     return await window.EventTarget;
 }

I am sure it can be done more elegant - but after hours of not working - I could finally get my project to compile and work with Roll-up - and I currently accept if it is not the most elegant above.

[graynorton]

Thanks for the follow-up, @cintaccs! Since you've resolved your issue, I'm going to close this for now. We can reopen or create a new issue if this problem arises for anyone else as we get closer to release.