antony / sapper-ie Goto Github PK

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.

The Problem

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.

Example

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

Proposed Solution

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.

There's a small problem I'm getting in IE11 (11.0.9600.18762) anyone else getting this, or have any idea what this is?

Cheers,
Ben