Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fetching Web Platform Data in NodeJS

Fetching Web Platform Data in NodeJS

Should there be a need to fetch web platform data in NodeJS, here are some dependency-less functions that will return feature data from W3C, CanIUse, and MDN Browser Compatibility Data.

Dependency-Free Fetching in NodeJS

NodeJS includes an http and https library which can perform network requests.

const https = require('https')

The https library can return data in chunks of text as they are downloaded. A Promise executor can return the combined chunks once they are all downloaded.

/** Returns a promise that fulfills with the text response from a network request. */
const getText = (/** @type {string} */ url) => /** @type {Promise<string>} */ (
	new Promise(
		(resolve, reject) => {
			const data = ['']
			https.get(
				url,
				response => response.on(
					'data', data.push.bind(data)
				).on(
					'end', () => resolve(
						data.join('')
					)
				)
			).on('error', reject)
		}
	)
)

Fetching W3C Status

The getText function can be used to fetch a W3C specification. With regular expression parsing, a W3C status can be extracted from the specification.

/** Returns a promise that fulfills with the W3C status for a given feature id. */
const getW3CStatus = (/** @type {string} */ id) => getText(`https://www.w3.org/TR/${id}/`).then(
	data => data.match(
		/(?:<meta content="([^"]+)" name="w3c-status">|"https:\/\/www.w3.org\/StyleSheets\/TR\/2016\/W3C-([^"]+)")/
	)?.slice(1).filter(Boolean).shift().toLowerCase() || ''
)
await getW3CStatus('css-logical-1') // "wd"

Fetching JSON

To fetch feature data from CanIUse, and MDN Browser Compatibility Data, an extension to the getText function can return parsed JSON from the text download.

/** Returns a promise that fulfills with the value or object response from a network request. */
const getJson = (/** @type {string} */ url) => getText(url).then(JSON.parse)

Fetching CanIUse Support Data

The getJson function can be used to fetch CanIUse support data.

/** Returns a promise that fulfills with the CanIUse support data for a given feature id. */
const getCanIUseSupportData = (/** @type {string} */ id) => getJson(`https://caniuse.com/process/get_feat_data.php?type=support-data&feat=${id}`).then(
	Function.call.bind(Array.prototype.shift)
)
await getCanIUseSupportData('css', 'properties', 'margin-inline') // { description, spec, status, etc }

Fetching MDN Compatibility Data

This getJson function can also be used to fetch MDN compatibility data.

/** Returns a promise that fulfills with the MDN compatibility data to a given feature id. */
const getMdnCompatibilityData = (/** @type {string[]} */...id) => getJson(`https://cdn.jsdelivr.net/npm/mdn-browser-compat-data/${id.join(`/`)}.json`).then(
	data => id.reduce(
		(deep, prop) => deep?.[prop], data
	)?.__compat
)
await getMdnCompatibilityData('css', 'properties', 'margin-inline') // { mdn_url, support, status }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment