Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kingyue737/vite-plugin-browserslist-useragent
A utility vite plugin to compile browserslist query to a RegExp to test browser useragent.
https://github.com/kingyue737/vite-plugin-browserslist-useragent
browserslist useragent vite vite-plugin
Last synced: about 2 months ago
JSON representation
A utility vite plugin to compile browserslist query to a RegExp to test browser useragent.
- Host: GitHub
- URL: https://github.com/kingyue737/vite-plugin-browserslist-useragent
- Owner: kingyue737
- License: mit
- Created: 2022-07-25T08:04:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-21T21:50:54.000Z (8 months ago)
- Last Synced: 2024-04-23T16:15:05.366Z (8 months ago)
- Topics: browserslist, useragent, vite, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 188 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-browserslist-useragent - Compile browserslist query to a RegExp to test browser useragent. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-browserslist-useragent - Compile browserslist query to a RegExp to test browser useragent. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-browserslist-useragent
[](https://www.npmjs.com/package/vite-plugin-browserslist-useragent)
[](https://www.npmjs.com/package/vite-plugin-browserslist-useragent)
[](https://gitmoji.dev)
A vite plugin wrapping [browserslist-useragent-regexp](https://github.com/browserslist/browserslist-useragent-regexp) which provides utility RegExps compiled by [browserslist query](https://github.com/browserslist/browserslist#queries) 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
```
2. Add plugin to `vite.config.*`:
```ts
// vite.config.ts
import SupportedBrowsers from 'vite-plugin-browserslist-useragent'
export default defineConfig({
plugins: [SupportedBrowsers(/* options */)],
})
```
3. Import RegExp from virtual module:
```js
import { browsersRegex } from 'virtual:supported-browsers'
if (browsersRegex.test(navigator.userAgent)) {
alert('Your browser is supported.')
}
```
Auto-generated `virtual:supported-browsers`:
```js
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
```bash
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](https://github.com/vitejs/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](#options):
### [getUserAgentRegex(options)=> browsersRegexp: RegExp](https://browserslist.github.io/browserslist-useragent-regexp/functions/getUserAgentRegex.html)
Compile browserslist query to one regex.
### [getUserAgentRegexs(options)=> browsersRegexps: BrowserVersionedRegex[]](https://browserslist.github.io/browserslist-useragent-regexp/functions/getUserAgentRegexes.html)
Compile browserslist query to [regexes for each browser](#regexp-info-object).
#### 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](https://github.com/ai/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`:
```json
{
"compilerOptions": {
"types": ["vite-plugin-browserslist-useragent/client"]
}
}
```
## License
[MIT](./LICENSE) License © 2022 Yue JIN