Skip to content

Latest commit

 

History

History
127 lines (94 loc) · 6.74 KB

README.md

File metadata and controls

127 lines (94 loc) · 6.74 KB
Raw

vite-plugin-browserslist-useragent

npm version npm downloads gitmoji

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