Comments (5)
@robdodson it's not CSP compliant, but we have a Webpack plugin that moves it into a conditional eval()
only if native is detected in https://github.com/skatejs/web-components/blob/master/build/fix-native-shim.js. I really don't know of a better way to make it easier for consumers wanting to get off the ground quickly and iterate on how they include the polyfills at a later point in time. Definitely open to ideas.
A big motivation here is that the barrier to entry with the polyfills is quite large in the number of polyfills, implicit depenencies (on other polyfills) and the conditional inclusion of the native shim. This requires a significant amount of domain knowledge. You and I know the reasoning behind it, but many don't, and web components don't have the best reputation in the greater communities right now. This can be attributed to spec churn, browser support and the time it's taken to get to where we are today. Complexity here would just be another thing against them.
A better way might be to conditionally include the native shim, but I think we'd have to make assumptions about the path to the native shim relative to the parent it's loaded from, which can change depending on how consumers are loading or building it.
Thoughts?
from web-components.
A big motivation here is that the barrier to entry with the polyfills is quite large in the number of polyfills...
yeah I agree with all the points listed here. I was actually looking into this package because I'm trying to use web components in a different framework and want to avoid as much polyfill loading complexity as possible :)
It looks like the Polymer folks inject a snippet into the page https://github.com/Polymer/polymer-build/blob/master/src/custom-elements-es5-adapter.ts#L112. So they always include the shim, then that snippet decides if it's needed. If it's not, the shim is removed.
But this gets away from having a simple import
. Not sure if Webpack can sneak something like that into the page (I'm not familiar enough with what Webpack transforms can do).
from web-components.
You can do conditional imports. At that time we were using Webpack 1, but it might be simpler using 2. Worth a try anyway! Would be good to try this with the standard fills so they're only loaded if necessary. I'm optimistic.
Once the polyfills are on NPM, we can add *
deps on them so they're always up to date which makes this much more viable to consumers. Any traction on that?
from web-components.
Can you point me to a conditional import example? My module skillz are weaksauce :P
from web-components.
https://webpack.js.org/guides/code-splitting-async/
The only issue is that it's async, which means we might need to expose an API to do something after the polyfills are finished loading so that definitions can be registered.
from web-components.
Related Issues (20)
- Implement fix for safari 10 style recalc bug HOT 4
- Something wrong with minification in firefox? HOT 2
- Errors in FF and Safari using UglifyJS HOT 7
- Pull in the browser version of document-register-element
- Spike using all the new webcomponents/* polyfills HOT 1
- upload to a cdn? HOT 5
- jspm install fails HOT 4
- Where is the native-shim.js file in this repo? HOT 2
- Skate + ShadyCSS <custom-style>issue - native ShadowDom Browsers HOT 8
- ShadyCSS doesn't work in IE11 HOT 5
- npm install skatejs-web-components is broken HOT 8
- missing/broken scope on shadydom callbacks HOT 10
- build issue with sed command HOT 3
- update native-shim? HOT 3
- current published version relies on non-existent `cloudydom/src/env` path in newer versions of cloudydom HOT 2
- Safari UA sniffing breaks in mobile chrome HOT 1
- How performant are these polyfills (esp. in IE11)? HOT 11
- leverage @webcomponents polyfills and lazy-loading HOT 10
- Issue with polyfills HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-components.