A utility vite plugin to compile browserslist query to a RegExp to test browser useragent.

License: MIT License

TypeScript 79.03% HTML 20.97%

vite-plugin-browserslist-useragent's Introduction

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.

Create .browserslistrc config, for example like this:

last 2 versions
not dead

Add plugin to vite.config.*:

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

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

vite-plugin-browserslist-useragent's People

Contributors

Stargazers

Watchers

vite-plugin-browserslist-useragent's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

⬆️ Upgrade all non-major dependencies (browserslist-useragent-regexp, bumpp, pnpm, typescript, vite)
⬆️ Upgrade Node.js to v20
⬆️ Upgrade pnpm to v9
Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

browserslist ^4.23.0

browserslist-useragent-regexp ^4.1.1

bumpp ^9.3.0

gitmoji-changelog ^2.3.0

prettier ^3.2.5

tsup ^8.0.2

typescript ^5.3.3

vite ^5.1.3

vite ^3.0.0 || ^4.0.0 || ^5.0.0

node >=14.21.3

pnpm 8.15.3

playground/package.json

Check this box to trigger a request for Renovate to run again on this repository

How do we auto-keep the browserslist DB up to date?

This plugin is a nice plugin, but what does it actually solve? Ok, so we don't need to manually run the CLI to regenerate the module with the regular expression every time we change the browserslist configuration. Fine. But IMO that list doesn't really change too often when it's set. What does change often without developers' intervention are browser versions.

That's why despite using this plugin we still need to manually upgrade browserslist/DB... What if the browserslist version increments beyond the dependency version definition of this vite plugin? How do we know this plugin will be regularly updated? How do we assure we regularly update this plugin?

That's why I'm asking whether this plugin actually solves anything significant?

The perfect solution IMO would be that whenever we make a vite build, the DB would get upgraded to latest and then this vite plugin would be able to generate latest regex.

Vite plugin regex does not match regex generated with `browserslist-useragent-regexp`

I'm trying to migrate from browserslist-useragent-regexp to this Vite plugin (in order to avoid the need to update the browser regex). The list of supported browsers in my .browserslistrc is just defaults.

When I generate the regexp using browserslist-useragent-regexp, I get

/Edge?\/(1{2}[89]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[5-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(109|1[1-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(10[2-9]|1[1-9]\d|[2-9]\d{2}|\d{4,})\.\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:?[ /-](1{2}9|1[2-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/(7[3-9]|[89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(1{2}9|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(1{2}9|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(2[2-9]|[3-9]\d|\d{3,})\.\d+|Android.+MQ{2}Browser\/(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+|)/

But when I use the Vite plugin instead to import the regex, I get

/Edge?\/1{2}[89]\.0(\.\d+|)|Firefox\/(1{2}5\.0|1(19|20)\.0)(\.\d+|)|Chrom(ium|e)\/(109\.0|1{2}[7-9]\.0)(\.\d+|)|(Maci|X1{2}).+ Version\/(1[56]\.6|17\.[01])([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/10[2-4]\.0\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._][67]|16[._]1|16[._]3|16[._][67]|17[._][01])([._]\d+|)|Opera Mini|Android:?[ /-]1{2}9(\.0|)(\.\d+|)|Mobile Safari.+OPR\/73\.0\.\d+|Android.+Firefox\/1{2}9\.0(\.\d+|)|Android.+Chrom(ium|e)\/1{2}9\.0(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?1(5\.){2}\d+|SamsungBrowser\/2[23]\.0|Android.+MQ{2}Browser\/13(\.1|)(\.\d+|)|K[Aa][Ii]OS\/(2\.5|3\.[01])(\.\d+|)/

I'm using the latest version of Chrome which corresponds to this user agent string

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

This user agent does match the first regex, but does not match the second regex.

Shouldn't the Vite plugin generate the same regex as browserslist-useragent-regexp for the same supported browsers configuration?

Failed to resolve entry for package

Hi. I'm trying to use this plugin in Vite with vue.

I follow the instructions and this error appears:

ERROR: [plugin: externalize-deps] Failed to resolve entry for package "vite-plugin-browserslist-useragent". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "vite-plugin-browserslist-useragent" package

Can someone explain me what am I doing wrong?

kingyue737 / vite-plugin-browserslist-useragent Goto Github PK