astro/packages/webapi

WebAPI

WebAPI lets you use Web APIs in Node v12, v14, and v16.

npm install @astrojs/webapi

import { polyfill } from '@astrojs/webapi'

polyfill(globalThis)

const t = new EventTarget()
const e = new CustomEvent('hello')

t.addEventListener('hello', console.log)

t.dispatchEvent(e) // logs `e` event from `t`

These APIs are combined from popular open source projects and configured to share implementation details. This allows their behavior to match browser expectations as well as reduce their combined memory footprint.

Features

• AbortController
• AbortSignal
• Blob
• ByteLengthQueuingStrategy
• CanvasRenderingContext2D
• CSSStyleSheet
• CountQueuingStrategy
• CustomElementRegistry
• CustomEvent
• DOMException
• Document
• DocumentFragment
• Element
• Event
• EventTarget
• File
• FormData
• HTMLDocument
• HTMLElement
• HTMLBodyElement
• HTMLCanvasElement
• HTMLDivElement
• HTMLHeadElement
• HTMLHtmlElement
• HTMLImageElement
• HTMLSpanElement
• HTMLStyleElement
• HTMLTemplateElement
• HTMLUnknownElement
• Headers
• IntersectionObserver
• Image
• ImageData
• MediaQueryList
• MutationObserver
• Node
• NodeIterator
• OffscreenCanvas
• ReadableByteStreamController
• ReadableStream
• ReadableStreamBYOBReader
• ReadableStreamBYOBRequest
• ReadableStreamDefaultController
• ReadableStreamDefaultReader
• Request
• Response
• ShadowRoot
• Storage
• StyleSheet
• TransformStream
• TreeWalker
• WritableStream
• WritableStreamDefaultController
• WritableStreamDefaultWriter
• Window
• atob
• btoa
• cancelAnimationFrame
• cancelIdleCallback
• clearTimeout
• fetch
• localStorage
• requestAnimationFrame
• requestIdleCallback
• setTimeout
• structuredClone
• Object.hasOwn
• Promise.any
• Array.prototype.at
• String.prototype.at
• String.prototype.replaceAll
• TypedArray.prototype.at
• URLPattern

Usage

You can use WebAPIs as individual exports.

import { AbortController, Blob, Event, EventTarget, File, fetch, Response } from '@astrojs/webapi'

You can apply WebAPIs to an object, like globalThis.

import { polyfill } from '@astrojs/webapi'

polyfill(globalThis)

Polyfill Options

The exclude option receives a list of WebAPIs to exclude from polyfilling.

polyfill(globalThis, {
	// disables polyfills for setTimeout clearTimeout
	exclude: 'setTimeout clearTimeout',
})

The exclude option accepts shorthands to exclude multiple polyfills. These shorthands end with the plus sign (+).

polyfill(globalThis, {
	// disables polyfills for setTimeout clearTimeout
	exclude: 'Timeout+',
})

polyfill(globalThis, {
	// disables polyfills for Node, Window, Document, HTMLElement, etc.
	exclude: 'Node+',
})

polyfill(globalThis, {
	// disables polyfills for Event, EventTarget, Node, Window, Document, HTMLElement, etc.
	exclude: 'Event+',
})

Shorthand	Excludes
Blob+	Blob, File
Document+	Document, HTMLDocument
Element+	Element, and exclusions from HTMLElement+
Event+	Event, CustomEvent, EventTarget, AbortSignal, MediaQueryList, Window, and exclusions from Node+
EventTarget+	Event, CustomEvent, EventTarget, AbortSignal, MediaQueryList, Window, and exclusions from Node+
HTMLElement+	CustomElementsRegistry, HTMLElement, HTMLBodyElement, HTMLCanvasElement, HTMLDivElement, HTMLHeadElement, HTMLHtmlElement, HTMLImageElement, HTMLStyleElement, HTMLTemplateElement, HTMLUnknownElement, Image
Node+	Node, DocumentFragment, ShadowRoot, Document, HTMLDocument, and exclusions from Element+
StyleSheet+	StyleSheet, CSSStyleSheet

---

License

Code original to this project is licensed under the CC0-1.0 License.

Code from abort-controller is licensed under the MIT License (MIT), Copyright Toru Nagashima.

Code from event-target-shim is licensed under the MIT License (MIT), Copyright Toru Nagashima.

Code from fetch-blob is licensed under the MIT License (MIT), Copyright Jimmy Wärting.

Code from formdata-polyfill is licensed under the MIT License (MIT), Copyright Jimmy Wärting.

Code from node-fetch is licensed under the MIT License (MIT), Copyright Node Fetch Team.

Code from web-streams-polyfill is licensed under the MIT License (MIT), Copyright Mattias Buelens and Diwank Singh Tomer.