Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wessberg/browserslist-generator

A library that makes generating and validating Browserslists a breeze!
https://github.com/wessberg/browserslist-generator

browserslist caniuse generate mdn support user-agent useragent

Last synced: 9 days ago
JSON representation

A library that makes generating and validating Browserslists a breeze!

Host: GitHub
URL: https://github.com/wessberg/browserslist-generator
Owner: wessberg
License: mit
Created: 2018-04-30T19:56:50.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-09-24T18:25:40.000Z (about 2 months ago)
Last Synced: 2024-10-10T20:47:42.088Z (about 1 month ago)
Topics: browserslist, caniuse, generate, mdn, support, user-agent, useragent
Language: TypeScript
Homepage:
Size: 1.18 MB
Stars: 90
Watchers: 3
Forks: 8
Open Issues: 8
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        



> A library that makes generating and validating Browserslists a breeze!















## Description

This is a library that makes it easier to work with [browserslists](https://github.com/browserslist/browserslist).

It can do things like generating a Browserslist that targets only browsers that support - _or don't support_ - specific required features, or even generate a Browserslist from a User Agent string!

It can also do the same in reverse - match a Browserslist on a user agent.

A _Feature_ is anything that can be found on [caniuse](https://caniuse.com/) or [MDN](https://github.com/mdn/browser-compat-data).

### Features

- Generating a Browserslist based on features

- Generating a Browserslist based on an ECMA version

- Generating a browserslist based on a User Agent string

- Checking if a User Agent string supports specific features

- Checking if a browserslist supports specific features

- Checking if a browserslist supports a specific ECMA version

- Getting the most appropriate ECMA version for a browserslist

## Backers

### Patreon



## Table of Contents

- [Description](#description)

  - [Features](#features)

- [Backers](#backers)

  - [Patreon](#patreon)

- [Table of Contents](#table-of-contents)

- [Install](#install)

  - [npm](#npm)

  - [Yarn](#yarn)

  - [pnpm](#pnpm)

- [Usage](#usage)

  - [Generating a Browserslist based on features](#generating-a-browserslist-based-on-features)

  - [Checking if a User Agent supports a specific feature](#checking-if-a-user-agent-supports-a-specific-feature)

  - [Checking if a Browserslist supports a specific feature](#checking-if-a-browserslist-supports-a-specific-feature)

  - [Generating a Browserslist based on a ECMAScript version](#generating-a-browserslist-based-on-a-ecmascript-version)

    - [Checking if a Browserslist supports a specific ECMAScript version](#checking-if-a-browserslist-supports-a-specific-ecmascript-version)

    - [Getting the most appropriate ECMAScript version for a Browserslist](#getting-the-most-appropriate-ecmascript-version-for-a-browserslist)

    - [Possible ECMAScript versions](#possible-ecmascript-versions)

- [Contributing](#contributing)

- [Maintainers](#maintainers)

- [FAQ](#faq)

  - [What is some cool example of a use case for this library?](#what-is-some-cool-example-of-a-use-case-for-this-library)

- [License](#license)

## Install

### npm

```

$ npm install browserslist-generator

```

### Yarn

```

$ yarn add browserslist-generator

```

### pnpm

```

$ pnpm add browserslist-generator

```

## Usage

### Generating a Browserslist based on features

When deciding which Browsers and environments to support, it is quite common to make

the decision based on feature support. With this library, you no longer have to neither look up

Browser support and manually write a Browserslist, nor make sure to keep it up-to-date.

Instead, simply declare the features that should be available:

```typescript

import {browsersWithSupportForFeatures} from "browserslist-generator";

// Generate a browserslist for browsers that support all of the given features

const browserslist = browsersWithSupportForFeatures("es6-module", "shadowdomv1", "custom-elementsv1");

```

### Checking if a User Agent supports a specific feature

This library offers simple ways that you can check if a given User Agent supports any amount of features.

This could be useful, among other things, for conditional bundle serving:

```typescript

import {userAgentSupportsFeatures} from "browserslist-generator";

if (userAgentSupportsFeatures(userAgentString, "javascript.builtins.Promise.finally")) {

	doA();

} else {

	doB();

}

```

### Checking if a Browserslist supports a specific feature

Given an existing Browserslist, this library can check if it supports one or more features.

This could be useful, among other things, for conditional bundle serving:

```typescript

import {browserslistSupportsFeatures} from "browserslist-generator";

if (browserslistSupportsFeatures(browserslist, "es6-module")) {

	useModernBundle();

} else {

	useLegacyBundle();

}

```

### Generating a Browserslist based on a ECMAScript version

When deciding which Browsers and environments to support, it is quite common to make

the decision based on a specific version of ECMAScript to target. For example, with the Typescript Compiler,

the `target` option takes an ECMAScript version and the Typescript Compiler then knows which transformations to apply accordingly.

```typescript

import {browsersWithSupportForEcmaVersion} from "browserslist-generator";

// Generate a browserslist for browsers that support the given version of ECMAScript

const browserslist = browsersWithSupportForEcmaVersion("es2015");

```

#### Checking if a Browserslist supports a specific ECMAScript version

Given an existing Browserslist, this library can also check if it supports a specific version of ECMAScript.

This could be useful, among other things, for conditional bundle serving:

```typescript

import {browserslistSupportsEcmaVersion} from "browserslist-generator";

if (browserslistSupportsEcmaVersion(browserslist, "es2015")) {

	useModernBundle();

} else {

	useLegacyBundle();

}

```

#### Getting the most appropriate ECMAScript version for a Browserslist

Given an existing Browserslist, this library can detect the most appropriate ECMAScript version to target.

This could be useful, for example, when using the Typescript compiler based on a Browserslist.

```typescript

import {getAppropriateEcmaVersionForBrowserslist} from "browserslist-generator";

const typescriptOptions = {

	// ...

	target: getAppropriateEcmaVersionForBrowserslist(browserslist)

};

```

#### Possible ECMAScript versions

All of the possible ECMAScript versions are:

- `es3`

- `es5`

- `es2015`

- `es2016`

- `es2017`

- `es2018`

- `es2019`

- `es2020`,

- `es2021`,

- `es2022`,

- `es2023`

- `es2024`

## Contributing

Do you want to contribute? Awesome! Please follow [these recommendations](./CONTRIBUTING.md).

## Maintainers

|                                                                 |

| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| [Frederik Wessberg](mailto:[email protected])
Twitter: [@FredWessberg](https://twitter.com/FredWessberg)
Github: [@wessberg](https://github.com/wessberg)
_Lead Developer_ |

## FAQ

### What is some cool example of a use case for this library?

Well, here's one I think is pretty neat:

You're building an app, and you care about serving the smallest amount of code to your users.

You've decided to build two bundles: One for browsers _with_, and one for browsers _without_ ES-module support.

You can now generate two Browserslists via `browserslist-generator`:

```typescript

browsersWithSupportForFeatures("es6-module");

browsersWithoutSupportForFeatures("es6-module");

```

Now, you can then pass each one into tools like `@babel/preset-env` and `postcss`.

On the server, you can use the function `userAgentSupportsFeatures` to check if the same features are supported and respond with resources that points to the right bundle.

## License

MIT © [Frederik Wessberg](mailto:[email protected]) ([@FredWessberg](https://twitter.com/FredWessberg)) ([Website](https://github.com/wessberg))