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

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.

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