Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browser support #558

Open
Rich-Harris opened this issue May 3, 2017 · 20 comments
Open

Browser support #558

Rich-Harris opened this issue May 3, 2017 · 20 comments

Comments

@Rich-Harris
Copy link
Member

@Rich-Harris Rich-Harris commented May 3, 2017

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 (#525 (comment)).

@kaisermann
Copy link
Member

@kaisermann kaisermann commented Apr 18, 2018

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

Loading

@arxpoetica
Copy link
Member

@arxpoetica arxpoetica commented Apr 20, 2018

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?

Loading

@jihchi
Copy link

@jihchi jihchi commented Apr 23, 2018

Also, Object.create isn't supported in IE8

Loading

@JohnRiv
Copy link

@JohnRiv JohnRiv commented Apr 23, 2018

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.

Loading

@JohnRiv
Copy link

@JohnRiv JohnRiv commented May 7, 2018

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

Loading

@kaisermann
Copy link
Member

@kaisermann kaisermann commented May 7, 2018

@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).

Loading

@mblarsen
Copy link

@mblarsen mblarsen commented Apr 26, 2019

IE11 const in for not supported

for (const k in src) tar[k] = src[k];

Loading

@guilhermeocosta
Copy link

@guilhermeocosta guilhermeocosta commented Jun 13, 2019

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

Loading

@ai
Copy link

@ai ai commented Aug 21, 2019

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

Loading

@andrewdc
Copy link

@andrewdc andrewdc commented Dec 6, 2019

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.

Loading

@andrewdc
Copy link

@andrewdc andrewdc commented Dec 6, 2019

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!

Loading

@rbenzazon
Copy link

@rbenzazon rbenzazon commented May 6, 2020

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

Loading

@dreitzner
Copy link
Contributor

@dreitzner dreitzner commented May 6, 2020

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

Loading

@andrewdc
Copy link

@andrewdc andrewdc commented May 6, 2020

@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,
    },
  },

Loading

@dreitzner
Copy link
Contributor

@dreitzner dreitzner commented May 7, 2020

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"

Loading

@lucidNTR
Copy link

@lucidNTR lucidNTR commented Apr 9, 2021

I now have also specifically heard this as a reason some companies consider svelte experimental and not ready for wider adoption. the matrix does not even have to be huge, just to have one at all communicates reliability and production readiness.

Loading

@pngwn pngwn added the popular label Jun 26, 2021
@yringler
Copy link

@yringler yringler commented Nov 11, 2021

This is a big deal. I think svelte would be perfect for a requirement at work, but I can't recommend it without an official browser support list.
I'm sure I'm not the only one.
Here's to having an excuse to learn svelte soon! 🍻

Loading

@kaisermann
Copy link
Member

@kaisermann kaisermann commented Nov 12, 2021

but I can't recommend it without an official browser support list.

While it doesn't have an official browser list, via babel and/or polyfills you can pretty much support all the way back to IE 11 and similars.

Loading

@mhatvan
Copy link

@mhatvan mhatvan commented Nov 12, 2021

If the Svelte team decides on a browser support matrix, it would be easy to maintain compatibility with the use of
https://github.com/amilajack/eslint-plugin-compat

Loading

@bluwy
Copy link
Member

@bluwy bluwy commented Nov 13, 2021

If a browser support list is all that's needed to resolve this, I think a quick audit in https://github.com/sveltejs/svelte/tree/master/src/runtime would cover most cases. If anyone likes to do so, we could start with a community-supported list and work from there until it's officially endorsed.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.