leverage @webcomponents polyfills and lazy-loading about web-components HOT 10 OPEN

Don't get confused, that's just webpack, which uses nowadays import() for lazy loading, but since Typescript doesn't support import as function I have to stick with System.import alias.

from web-components.

I'm happy to have a breaking change here if it makes sense. Would be good to just import '@skatejs/web-components'; if it's easier. No imperative code then.

from web-components.

yup, agreed

from web-components.

also current @webcomponents cannot be minified with webpack and uglify when es5 adapter is used :-|

webcomponents/custom-elements#100

from web-components.

I'm happy to have a breaking change here if it makes sense. Would be good to just import '@skatejs/web-components'; if it's easier. No imperative code then.

so I didn't read your comment right :D there has to be imperative code if you wanna lazy load polyfills only in browsers which need them, as you can see in my example/PR

from web-components.

so final solution is implemented here:

• complete data payload savings in worst case scenario ( IE 11 ) -> 35 kb in comparison with "official" wc lazy loader from google

• this is how it looks like from payload size needed to download for polyfills
  https://github.com/Hotell/skate-starter/tree/master/src/%40skatejs/web-components

• load polyfills https://github.com/Hotell/skate-starter/blob/master/src/polyfills.ts
• wait for WC to be ready and boot app https://github.com/Hotell/skate-starter/blob/master/src/main.ts#L7

https://github.com/Hotell/skate-starter#bundlepolyfill-sizes

check this out pls @treshugart

from web-components.

@Hotell curious where SystemJS comes from for https://github.com/Hotell/skate-starter/blob/master/src/main.ts#L7, looked in package.json but couldn't find it.

from web-components.

Typescript doesn't support import as function

That's quite unfortunate because that's where it seems specs are moving. Is there a way that we can leverage import and still have consumers use TypeScript?

from web-components.

I generally don't do default exports but I think it would be nice here because then it's a little bit simpler for the consumer and they can call it whatever they want.

import fills from '@skatejs/web-components';
import app from './app';

fills().then(app);

I like this idea. It's unfortunate that it has to be imperative, but I don't see any way around it, either. Thanks for working on this! :)

from web-components.

Sorry to revive this but damn just found this, and looks 💯.

Since this project is now marked as deprecated do you guys have any suggestions of how to sanely use @webcomponents's polyfills with webpack?

from web-components.