search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.18k stars 52 forks source link

Advice Regarding Browser Support #48

Closed saulhardman closed 3 years ago

saulhardman commented 4 years ago

Hey Markus,

Thanks for the hard work on this project – it's very much appreciated 👍

I've just received an event in Sentry alerting me to the fact that someone using Chrome ~v60 tripped over this package's usage of Map. This led me to wonder what your recommended usage of this component is regarding feature polyfills? I can see that things degrade gracefully if IntersectionObserver is unsupported, but there's no conditional logic around support for Map.

These are the 3 options I've come up with so far:-

1) always import the Map polyfill from core-js 2) include the LazyHydrate component in babel-loader rule (in which case Nuxt's config would handle polyfilling [unsure if double-transforming would cause any issues here]) 3) work out a way to import() the core-js polyfill, if support is missing, prior to the rest of the app running (probably via a Nuxt plugin in my case)

I look forward to hearing your thoughts and am happy to help with adding to the docs if it proves necessary.

maoberlehner commented 3 years ago

I might consider removing Map. But not a big priority. In Nuxt.js you can add this package to the list of transpiled dependencies.

// nuxt.config.js

export default {
  build: {
    transpile: [
      ({ isLegacy }) => isLegacy && 'vue-lazy-hydration',
    ],
  }
}