Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Created September 7, 2020 18:50
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonathantneal/fa4759a5028248da914f1c9788edb83d to your computer and use it in GitHub Desktop.
Save jonathantneal/fa4759a5028248da914f1c9788edb83d to your computer and use it in GitHub Desktop.
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