leverage @webcomponents polyfills and lazy-loading

[Hotell]

So as I've mentioned, I've tested out skate 5.x with stable release of https://github.com/webcomponents/webcomponentsjs 1.x

It works with skate but there are few critical issues:

• their loader is non bundling/async compliant
• user has to use /node_modules/@webomponents/webcomponentsjs/webcomponents-loader.js within html -> big issue is that their loader relies that there will be always node_modules folder even in dist bundle ( huh ) - relative paths ehm
• so you cannot use hashes for modules/chunks names for proper cache busting 👎
• also in non native browsers huge HTML Imports shim is always loaded which is really unnecessary for users of skate which are using modern tools and lang features ( es6 modules -> tree shaking )

But fortunately for us, varial heelflip is a no brainer , so I wrote custom loader which we can include within this project.

If you're ok with this @treshugart I'll add it here -> so no Breaking changes, we can publish it under subpath so user can use it like : import { lazyLoadPolyfills } from '@skate/web-components/loader

here is implementation:

https://github.com/Hotell/skate-starter/pull/1/files#diff-576f47b45fccf9ab3b7a0a75876182e1

usage:

yarn add @webcomponents/webcomponentsjs
yarn add @skatejs/web-components

// polyfills.js
import { lazyLoadPolyfills } from '@skatejs/web-components/loader'

lazyLoadPolyfills().then(bootstrap);

 // app bootstrap
 function bootstrap() {
   return System.import('./main');
 }

main.jsx

import { h, render } from 'preact'
import 'custom-wc-library'

const App = ({content}) => (
  <div>
     <wc-menu/>
     <wc-content>
        {content}
      </wc-content>
     <wc-footer/>
   </div>
)

render( <App/>, root )

[treshugart]

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.

[Hotell]

yup, agreed

[Hotell]

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

https://github.com/webcomponents/custom-elements/issues/100

[Hotell]

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

[Hotell]

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

[charandas]

@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.

[Hotell]

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.

[treshugart]

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?

[treshugart]

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! :)

[deini]

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?