search

kytta / shareon

📯 Lightweight, stylish, and ethical share buttons for popular social networks
https://shareon.js.org/
MIT License
464 stars 23 forks source link

Legacy browser support #88

Closed brandonburkett closed 1 year ago

brandonburkett commented 1 year ago

We are still on 1.6.3, any reason why 2.x branch doesn't use vite legacy plugin to support older browsers?

kytta commented 1 year ago

In my understanding, Vite's primary focus is on the applications: bundles of HTML, CSS, and JS. By default, Vite would use ESM to use JS on the page. vite-legacy-plugin can be used to instead use IIFE, and thus allow importing JS in older browsers.

Shareon, however, is a library, and we export an IIFE build. Apart from that, the JS code is simple enough that it supports way more browsers than we target, so maybe you don't need to stay on 1.x. Do you have a browser you need to support but which doesn't work?

Having said that, I also do not want to support older browsers. Share buttons are unimportant to the user, so I don't care that much about covering a wide range of browsers. If I would add support for IE9 and whatever, the bundle size would grow, and I don't want that.

brandonburkett commented 1 year ago

We need to support iOS11, desktop safari 11, and a few Samsung / LG smartTV browsers. I believe I read in the changelog browser support was set to last 2 versions and I didn't actually test if 2.x worked out.

I'll do some testing with 2.x or stick with 1.6.x

Thanks!

kytta commented 1 year ago

We need to support iOS11, desktop safari 11, and a few Samsung / LG smartTV browsers.

I have a question about that. I am currently planning and testing the next iteration of Shareon, Shareon v3, where I want to get rid of the existing CSS hacks and re-layout the buttons using Flexbox. Do the browsers you test on (in particular Smart TVs) support it and how do they handle it?

brandonburkett commented 1 year ago

Yes! We have had decent success using flexbox with Samsung, LG, as well as Amazon fire "internet" app with flexbox. Flex-gap is not well supported in these browsers but align-items / justify-items / grow / shrink all work.