Svelte: Browser support

[Rich-Harris]

A few people have asked about browser support. We probably should be able to answer the question conclusively (maybe even running some tests in Browserstack or whatever?), and perhaps tell people which polyfills they'll need.

For example, window.performance.now isn't supported in IE9, but is used in transitions (https://github.com/sveltejs/svelte/pull/525#discussion_r114223085).

[kaisermann]

~It also doesn't (completely) work in Safari 5.1: the querySelector(':checked') always returns []~

[arxpoetica]

I marked this as a v1 Q, but it's also relevant to v2-- I think it's just a matter of documenting the expectations. Is this documented somewhere other than the blog post, or is that sufficient enough?

[jihchi]

Also, Object.create isn't supported in IE8

[JohnRiv]

The lack of some sort of official browser support matrix is what is preventing me from being able to use Svelte at work. IE11 & Safari 10 support is what I'm particularly interested in, although others may need support for older versions of those browsers as well.

[JohnRiv]

I haven't had a chance to try out this ESLint plugin yet, but I wonder if this will answer our question: https://github.com/instea/eslint-plugin-builtin-compat

[kaisermann]

@JohnRiv If you want to use v2.0.0+, the ES5 constraint was dropped (#1359). I'm currently using it in a very old webkit environment by polyfilling it with @babel/preset-env and it's working fine (for now).

[mblarsen]

IE11 const in for not supported

https://github.com/sveltejs/svelte/blob/ce9eba8227c65e2ba0b1c14553ce686f1caa1788/src/internal/utils.js#L6

[guilhermeocosta]

Any news on that? I'll probably run it with @babel/preset-env, but know which polyfills I'll need could be very helpful.

[ai]

It will be nice to have a browser support policy on the website or docs. Will be good for using Svelte in big business.

[andrewdc]

I'm bumping this - cause I got my org on board with Svelte, and am working to support IE11. I got 100% of the way there with: https://blog.az.sg/posts/svelte-and-ie11/

But then we added in some async/await stuff for grabbing data, and everything is broken again. I feel like we are getting pretty close (I'm sure it's just the right magical combination of Babel, Nodent, core-js, regenerate, etc....) but I have been plunging the internet for a few days trying to find the missing link.

Cheers though otherwise. Once this works, we will be flying high.

[andrewdc]

This just in: we needed Babel for polyfilling all the promise, async/await stuff etc. But we also needed:
https://github.com/github/fetch
to Polyfill the fetch. And now things are working in IE11. If anyone else gets stuck with this, bug me. I know very little, but I can at least describe how this works, and what we did to get it there. hahaha! Cheers!

[rbenzazon]

@andrewdc yes please go ahead and give me your configuration I'm interested

[dreitzner]

If anyone is interested I made an app around Christmas which supported ES6+ for modern and ES5 for older Browsers in parallel.

[andrewdc]

@andrewdc yes please go ahead and give me your configuration I'm interested

So, here is the config chunk for our Legacy bundle. I recommend the Rollup plugin polyfill, as it will inject the whatwg-fetch polyfill automatically.

Unfortunately, all of this stuff inflates the bundle a huge amount, but it all does work.
Hope this helps.

{
    //Legacy Bundle creation
    input: !production ? "src/index.ts" : "src/components/components.module.js",
    output: {
      file: "public/bundle.legacy.js",
      sourcemap: false,
      format: "umd",
      name,
    },
    plugins: [
      svelte({
        dev: false,
        emitCss: false,
      }),
      resolve({
        browser: true,
        dedupe: importee =>
          importee === "svelte" || importee.startsWith("svelte/"),
      }),
      commonjs(),
      json(),
      babel({
        extensions: [".js", ".mjs", ".html", ".svelte"],
        runtimeHelpers: true,
        exclude: ["node_modules/@babel/**", "node_modules/core-js/**"],
        presets: [
          [
            "@babel/preset-env",
            {
              targets: {
                ie: "11",
              },
              useBuiltIns: "usage",
              corejs: 3,
            },
          ],
        ],
        plugins: [
          "@babel/plugin-syntax-dynamic-import",
          "@babel/plugin-syntax-import-meta",
          [
            "@babel/plugin-transform-runtime",
            {
              useESModules: true,
            },
          ],
        ],
      }),
      polyfill(["whatwg-fetch"]),
      preprocess,
      terser(),
    ],
    watch: {
      clearScreen: false,
    },
  },

[dreitzner]

My approach which only loads legacy code for older browsers.

{
 // all polyfills are referenced here
        input: 'src/polyfill.js',
        output: {
            sourcemap: true,
            format: 'iife',
            name: 'app',
            file: 'public/legacy/polyfill.js'
        },
        plugins: [
            // cleanup
            del({ targets: 'public/legacy/*' }),
            // If you have external dependencies installed from
            // npm, you'll most likely need these plugins. In
            // some cases you'll need additional configuration —
            // consult the documentation for details:
            // https://github.com/rollup/rollup-plugin-commonjs
            resolve({
                browser: true,
                dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
            }),
            commonjs(),
            notLocal && terser(),
        ]
    },
{
    // ... svelte build
}

my html setup:

<script type="module" src='/bundles/bundle.js'></script>
<script nomodule defer src="/legacy/polyfill.js"></script>
<script nomodule defer src="/legacy/bundle.js"></script>

my build command:
"build": "rollup -c && npx babel public/bundles --out-dir public/legacy --presets=@babel/preset-env",
which uses the following:

devDependencies:
"@babel/cli": "^7.7.0",
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.6.3",

"browserslist": "ie 11"