antony / sapper-ie Goto Github PK
View Code? Open in Web Editor NEWSapper working in IE11/Edge
Sapper working in IE11/Edge
I'm not sure if this is the appropriate place to file this issue, but since this repo's focus is on IE/Edge Legacy support, I thought I would start here.
I came across a hydration bug within Svelte that relates to the @html
directive and IE11's lack of support for SVGElement.prototype.innerHTML
. As you can see in the example below, the icon is displayed before hydration and then disappears.
<script>
const iconData = `<line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line>`;
</script>
<div>Can you see the plus svg icon right below disappear upon hydration? ๐</div>
<svg>{@html iconData}</svg>
results in something similar to:
Add a polyfill
First of let me say this is amazing work and saved me lots of hassle getting IE11 support to work.
After tinkering with the Rollup configuration I think it would be possible to simplify some stuff and make the transpiling-step a bit more efficient.
A few months ago I stumbled upon this doc in the core-js repo which outlines some of the work done on integrations between core-js and babel. Here the core-js contributors explain how the @babel/polyfill
and @babel/runtime
packages will be deprecated in favour of handling polyfills and ES-proposals with the @babel/preset-env
and @babel/plugin-transform-runtime
with @babel/runtime-corejs3
packages. In some other projects I've successfully changed setups from using the (old) polyfills to core-js and I believe I've got it working for svelte as well.
I noticed that in the current rollup setup the babel plugin is instantiated twice. I believe this could work with one passโwith a core-js integrated setup.
I've installed the following packages and versions:
...
"@babel/core": "^7.4.5",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime-corejs3": "^7.4.5",
"core-js": "^3.1.4",
...
And replaced lines 35-60 in the rollup-config.
...
legacy && babel({
extensions: [".js", ".mjs", ".html", ".svelte"],
runtimeHelpers: true,
exclude: [
"node_modules/@babel/**",
"node_modules/core-js/**",
"node_modules/core-js-pure/**"
],
presets: [
[
"@babel/preset-env",
{
corejs: 3,
useBuiltIns: "usage",
targets: "> 0.25%, ie >= 11, not dead"
}
]
],
plugins: [
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
corejs: 3,
useESModules: true
}
]
]
}),
...
As you can see the @babel/plugin-proposal-object-rest-spread
is no longer needed. And after some testing it does not appear to negatively impact the builds. If you want I could fix up a pull-request for these changes somewhere in the coming days.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.