nuxodin / lazyfill

Polyfills on demand 💊

💊 lazyfill

Polyfill Service - the lazy way

Polyfills are loaded on demand, only when they are needed 😲
Initial 3Kb to polyfill a lot of Stuff!

Ussage

Add this script on the top of your page:

<script src="https://cdn.jsdelivr.net/gh/nuxodin/lazyfill@1.7.14/mod.min.js"></script>

done!

Polyfills

(Anything missing? Any suggestions?)

• Window
  • cookieStore
  • fetch
  • Promise
  • IntersectionObserver
  • ResizeObserver
  • AbortController
  • URLSearchParams
  • Temporal
  • temporal
  • customElements
  • structuredClone
  • URLPattern
  • ReadableStream
  • Sanitizer
  • requestIdleCallback
  • cancelIdleCallback
  • WeakSet
• Element
  • setHTML
  • matches
  • closest
  • prepend
  • append
  • before
  • after
  • replaceWidth
  • remove
  • blur
  • focus
  • classList
  • getElementsByClassName
  • children
  • toggleAttribute
  • isVisible
  • scrollIntoViewIfNeeded
• TypedArray
  • toReversed
  • toSorted
  • with
• Array
  • toReversed
  • toSorted
  • with
  • toSpliced
  • from
  • of
  • at
  • copyWithin
  • entries
  • fill
  • find
  • findIndex
  • findLast
  • findLastIndex
  • flat
  • flatMap
  • includes
  • keys
  • values
• Intl.DateTimeFormat
  • formatToParts
• Intl
  • DisplayNames
  • ListFormat
  • Locale
  • PluralRules
  • RelativeTimeFormat
  • getCanonicalLocales
• CSS
  • escape
  • registerProperty
  • supports
• HTMLDocument
  • currentScript
  • caretRangeFromPoint
• Node
  • contains
  • isConnected
• HTMLElement
  • inert
• HTMLFormElement
  • reportValidity
  • requestSubmit
• HTMLInputElement
  • reportValidity
• HTMLSlotElement
  • assignedElements
• Math
  • trunc
  • sign
• Navigator
  • share
• Number
  • isInteger
• Object
  • assign
  • entries
  • fromEntries
  • is
  • values
  • hasOwn
• Promise
  • allSettled
  • any
  • withResolvers
• RegExp
  • flags
• String
  • fromCodePoint
  • at
  • codePointAt
  • endsWith
  • includes
  • padEnd
  • padStart
  • repeat
  • startsWith
  • replaceAll
• SubmitEvent
  • submitter
• SVGStyleElement
  • sheet
• Crypto
  • randomUUID

• addEventListener signal options
• focus options
• classList force toggle
• Element.contains(TextNode) bug

How it works

To every polyfillable property, the scripts adds a getter which synchronously loads the corresponding polyfill.
Of course, we all know that blocking xhr-requests is not nice.
Therefore, the url to the script that should be added to the page is given in the console. Ideal for prototyping.

Let's assume that your browser does not support the function "String.prototype.at".

> ['a','b','c'].at(-1); // accessing  [].at immediately loads the polyfill
> 'c'

Help

Any help is greatly appreciated.

Thanks / Resources

https://github.com/es-shims

https://github.com/behnammodi/polyfill

https://polyfill.io/v3/

https://ungap.github.io/

https://github.com/Sylvain59650/all-polyfills

https://vanillajstoolkit.com/polyfills/