vite-plugin-browserslist-useragent

vite-plugin-browserslist-useragent

A vite plugin wrapping browserslist-useragent-regexp which provides utility RegExps compiled by browserslist query to test browser useragent.

Simplest example: you can detect supported browsers on client-side.

1. Create .browserslistrc config, for example like this:

last 2 versions
not dead

1. Add plugin to vite.config.*:

// vite.config.ts
import SupportedBrowsers from 'vite-plugin-browserslist-useragent'
export default defineConfig({
  plugins: [SupportedBrowsers(/* options */)],
})

1. Import RegExp from virtual module:

import { browsersRegex } from 'virtual:supported-browsers'

if (browsersRegex.test(navigator.userAgent)) {
  alert('Your browser is supported.')
}

Auto-generated virtual:supported-browsers:

export const browsersRegex =
  /Edge?\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})(\.\d+|)(\.\d+|)|Firefox\/(10[4-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Maci.* Version\/(15\.([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Opera Mini|Android:?[ /\-](10[6-9]|1[1-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/(6[4-9]|[7-9]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(10[6-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(13\.([4-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(1[7-9]|[2-9]\d|\d{3,})\.\d+|Android.+MQQBrowser\/(13(\.([1-9]|\d{2,})|)|(1[4-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(2\.([5-9]|\d{2,})|([3-9]|\d{2,})\.\d+)(\.\d+|)/
export const browsersRegexes = [
  {
    family: 'edge',
    sourceRegex: {},
    sourceRegexString: 'Edge?\\/(\\d+)(\\.(\\d+)|)(\\.(\\d+)|)',
    regex: {},
    requestVersions: [
      [105, 0, 0],
      [106, 0, 0],
    ],
    requestVersionsStrings: ['105.0.0', '106.0.0'],
    regexString: 'Edge?\\/(105|106)(\\.0|)(\\.\\d+|)',
  },
  /* ... */
]

Install

pnpm add -D vite-plugin-browserslist-useragent
# or
npm i -D vite-plugin-browserslist-useragent
# or
yarn add -D vite-plugin-browserslist-useragent

Why?

https://github.com/browserslist/browserslist-useragent-regexp#why

Why wrap browserslist-useragent-regexp with vite plugin?

Let Vite transform and bundle for you and no need to run CLI every time you change browserslist.

Virtual Module

Virtual module virtual:supported-browsers exposes two variables returned by the following two methods of browserslist-useragent-regexp whose arguments are passed from plugin's options:

getUserAgentRegex(options)=> browsersRegexp: RegExp

Compile browserslist query to one regex.

getUserAgentRegexs(options)=> browsersRegexps: BrowserVersionedRegex[]

Compile browserslist query to regexes for each browser.

Options

Option	Type	Default	Description
browsers	string | string[]	—	Manually provide a browserslist query (or an array of queries). Specifying this overrides the browserslist configuration specified in your project.
env	string	—	When multiple browserslist environments are specified, pick the config belonging to this environment.
ignorePatch	boolean	true	Ignore differences in patch browser numbers.
ignoreMinor	boolean	false	Ignore differences in minor browser versions.
allowHigherVersions	boolean	false	For all the browsers in the browserslist query, return a match if the useragent version is equal to or higher than the one specified in browserslist.
allowZeroSubversions	boolean	false	Ignore match of patch or patch and minor, if they are 0.

RegExp info object

Property	Type	Description
family	string	Browser family.
requestVersions	[number, number, number][]	Versions provided by browserslist.
regex	RegExp	Regex to match useragent with family and versions.
sourceRegex	RegExp	Original useragent regex, without versions.
version	[number, number, number] | null	Useragent version of regex.
minVersion	[number, number, number] | null	Useragent min version of regex.
maxVersion	[number, number, number] | null	Useragent max version of regex.

Client Types

If you want type definition of virtual:supported-browsers, add vite-plugin-browserslist-useragent/client to compilerOptions.types of your tsconfig:

{
  "compilerOptions": {
    "types": ["vite-plugin-browserslist-useragent/client"]
  }
}

License

MIT License © 2022 Yue JIN