https://github.com/mdrv/wbh

🔨 Restrict access to your website from web browsers without specific features.
https://github.com/mdrv/wbh

browsers caniuse support target webdev

Last synced: 19 days ago
JSON representation

🔨 Restrict access to your website from web browsers without specific features.

Host: GitHub
URL: https://github.com/mdrv/wbh
Owner: mdrv
License: gpl-3.0
Created: 2025-06-20T14:07:54.000Z (12 months ago)
Default Branch: main
Last Pushed: 2026-02-25T02:58:17.000Z (4 months ago)
Last Synced: 2026-02-25T07:54:50.199Z (4 months ago)
Topics: browsers, caniuse, support, target, webdev
Language: TypeScript
Homepage:
Size: 137 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

          # 🔨 Web Browser Hard (WBH)



    






    

        

    

    

        

    

    

        

    





    Restrict access to your website from web browsers without specific features.



> [!CAUTION]

> The API of this module is **rapidly changing** and is not intended for production or commercial use.

>

> To suit your specific needs, it's necessary to fork this project (with attribution). You can expect `v265`+ to be **more stable**. 🌟

## 🎁 Features

- 🧬 **Modular**: Use it on any framework (Svelte, Vue, etc.)

- 📊 **Versatile**: Pick from [70+ browser features](https://github.com/mdrv/wbh/wiki/feature-list) to check

- 🎛️ **Customizable**: Set metadata per-feature with levels, scores, and wisdom text

- 🌲 **Tree-shakeable**: Unused imports stay out of bundle

- 🚀 **Easy to use**: Comes with TypeScript types out of the box

- 📦 **Presets**: Ready-made profiles for common app types (modern web apps, SPAs, e-commerce, etc.)

- 🔍 **Version inference**: Infer minimum browser versions required by your feature set

Any question? Read [Q&A](https://github.com/mdrv/wbh/wiki/Q&A) on the wiki.

## 🧭 Example Code

### Basic usage

```ts

import {

	WBH,

	WBHLevel as L,

	avif,

	fileSystemApi,

	cssAspectRatio,

} from '@mdrv/wbh'

const wbh = new WBH([

	{

		feat: avif,

		level: L.CRITICAL,

		score: 50,

		wisdom: 'Most images are optimized AVIF.',

	},

	{

		feat: fileSystemApi,

		level: L.IMPORTANT,

		score: 50,

		wisdom: 'Needed for local binary storage.',

	},

	{

		feat: cssAspectRatio,

		level: L.OPTIONAL,

		score: 49,

		wisdom: 'Some layouts depend on aspect ratio.',

	},

])

const result = await wbh.getResultAsync()

if (result.score >= 0) {

	// Render your app

} else {

	// Browser missing features — show fallback UI

}

```

### Using presets

```ts

import { WBH, presets } from '@mdrv/wbh'

const wbh = new WBH(presets.modernWebApp())

const result = await wbh.getResultAsync()

console.log(result.unsupported.map((f) => f.name))

```

### Browser version inference

```ts

const wbh = new WBH(presets.modernWebApp())

await wbh.getResultAsync()

const versions = wbh.inferMinimumVersions()

// { chrome: "120", firefox: "121", safari: "17", edge: "120" }

const comparison = wbh.compareBrowser('firefox', 115)

// { browser: "firefox", version: 115, status: "outdated", gap: 6, ... }

```

### Options

```ts

new WBH(features, {

	cache: false, // opt-in: cache detection results (default off)

	mockUnsupported: false, // simulate all features unsupported (for testing)

})

```

## 🔔 Release Info

This package implements **Gregorian YYM-based** semver notation.

| Version    | Date         |

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

| `v257.x.x` | July 2025    |

| `v260.x.x` | Oct–Dec 2025 |

| `v265.x.x` | May 2026     |

See [CHANGELOG](https://github.com/mdrv/wbh/wiki/changelog) for full history.

---

v265 Changelog (click to expand)

### Breaking Changes

- **Renamed** `forceFail` option → `mockUnsupported`

- **Removed** built-in CSS (`css.ts`) — handle your own fallback UI

- **Removed** `is-mobile` dependency

- **Updated** `Result` type: now includes `timestamp` and `durationMs` fields

- **Updated** feature data: each feature now includes `safari` and `edge` version fields

### New Features

- **Presets system** (`src/presets.ts`) — 7 ready-made profiles:

  - `modernWebApp()` — CSS nesting, grid, container queries, dialog, view transitions

  - `spa()` — Single-page app essentials (view transitions, navigation API, promises)

  - `contentSite()` — Content-focused sites (text-wrap, viewport units, typography)

  - `dataHeavy()` — Data-intensive apps (IndexedDB, WebSockets, structuredClone)

  - `cuttingEdge()` — Latest APIs (anchor positioning, scroll timeline, declarative shadow DOM)

  - `minimal()` — Bare minimum for basic compatibility

  - `ecommerce()` — E-commerce features (dialog modals, payment API, popover)

- **`inferMinimumVersions()`** — Returns min Chrome/Firefox/Safari/Edge versions needed

- **`compareBrowser(browser, version)`** — Compare a browser version against requirements; returns `current`, `outdated`, or `unsupported` status

- **Opt-in cache** via `{ cache: true }` option (default off to avoid stale results)

- **Enriched Result** — `timestamp` (Date.now()) and `durationMs` (performance.now())

### New Feature Detections (+20)

| Feature 
| ---------------------- 
| `htmlDialog` 
| `viewTransitions` 
| `cssNesting` 
| `cssHasSelector` 
| `structuredClone` 
| `promiseWithResolvers` 
| `arrayAt` 
| `arrayWith` 
| `cssColorMix` 
| `viewportUnits` 
| `cssFocusVisible` 
| `navigationApi` 
| `urlPattern` 
| `cssAnchorPositioning` 
| `declarativeShadowDom` 
| `promiseTry` 
| `regexpEscape` 
| `importAttributes`

| Level     | Notes                             | | --------- | --------------------------------- | | CRITICAL  | `` + showModal            | | CRITICAL  | View Transitions API              | | CRITICAL  | CSS nesting syntax                | | CRITICAL  | `:has()` relational selector      | | CRITICAL  | Deep cloning without hacks        | | CRITICAL  | Promise.withResolvers()           | | IMPORTANT | Array.at() negative indexing      | | IMPORTANT | Array.with() immutable mutation   | | IMPORTANT | color-mix() function              | | IMPORTANT | svh/lvh/dvh units                 | | IMPORTANT | :focus-visible pseudo-class       | | IMPORTANT | Navigation API (Chrome/Edge only) | | IMPORTANT | URLPattern API                    | | OPTIONAL  | Anchor positioning (Chrome only)  | | OPTIONAL  | Declarative Shadow DOM            | | OPTIONAL  | Promise.try()                     | | OPTIONAL  | RegExp.escape()                   | | OPTIONAL  | Import attributes                 |

### Internal Improvements

- **gen.ts** now extracts Safari and Edge version data from MDN BCD + caniuse-db

- **types.ts** cleaned up: `caniuse` is `readonly string[]`, added `reason?`, `BrowserVersionMap`, `BrowserComparison`

- **dynamicImport** no longer references removed `is-mobile` dep

- Test suite expanded from 4 → 10 tests covering all new functionality

---

## 💖 Thank You

This project proudly uses:

- 🧩 [**es-toolkit**](https://github.com/toss/es-toolkit) (modern JS utilities with TypeScript support)

- 🥟 [**Bun.js**](https://github.com/oven-sh/bun) (blazing fast server-side JS runtime)

- 📚 Additional data: [**MDN**](https://github.com/mdn/browser-compat-data) and [**Can I use...**](https://github.com/Fyrd/caniuse)

_{© 2025 MEDRIVIA ／ Umar Alfarouk}

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/mdrv/wbh

Awesome Lists containing this project

README