{"id":39640653,"url":"https://github.com/mdrv/wbh","last_synced_at":"2026-05-24T09:01:46.939Z","repository":{"id":300233174,"uuid":"1005613273","full_name":"mdrv/wbh","owner":"mdrv","description":"🔨 Restrict access to your website from web browsers without specific features.","archived":false,"fork":false,"pushed_at":"2026-02-25T02:58:17.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-25T07:54:50.199Z","etag":null,"topics":["browsers","caniuse","support","target","webdev"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdrv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-20T14:07:54.000Z","updated_at":"2026-02-25T02:58:21.000Z","dependencies_parsed_at":"2026-01-20T18:02:04.553Z","dependency_job_id":null,"html_url":"https://github.com/mdrv/wbh","commit_stats":null,"previous_names":["mdrv/wbh"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/mdrv/wbh","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdrv%2Fwbh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdrv%2Fwbh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdrv%2Fwbh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdrv%2Fwbh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdrv","download_url":"https://codeload.github.com/mdrv/wbh/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdrv%2Fwbh/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33427584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"online","status_checked_at":"2026-05-24T02:00:06.296Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browsers","caniuse","support","target","webdev"],"created_at":"2026-01-18T09:00:23.793Z","updated_at":"2026-05-24T09:01:46.933Z","avatar_url":"https://github.com/mdrv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔨 Web Browser Hard (WBH)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"res/logo.svg\" width=\"180\" height=\"180\" /\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/mdrv/wbh/actions/workflows/release.yml\"\u003e\n        \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/mdrv/wbh/release.yml?event=release\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@mdrv/wbh\"\u003e\n        \u003cimg alt=\"Visit the NPM page\" src=\"https://img.shields.io/npm/v/@mdrv/wbh\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/mdrv/wbh/blob/master/LICENSE\"\u003e\n        \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/mdrv/wbh\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cb\u003e\u003ci\u003eRestrict access to your website from web browsers without specific features.\u003c/i\u003e\u003c/b\u003e\n\u003c/p\u003e\n\n\u003e [!CAUTION]\n\u003e The API of this module is **rapidly changing** and is not intended for production or commercial use.\n\u003e\n\u003e To suit your specific needs, it's necessary to fork this project (with attribution). You can expect `v265`+ to be **more stable**. 🌟\n\n## 🎁 Features\n\n- 🧬 **Modular**: Use it on any framework (Svelte, Vue, etc.)\n- 📊 **Versatile**: Pick from [70+ browser features](https://github.com/mdrv/wbh/wiki/feature-list) to check\n- 🎛️ **Customizable**: Set metadata per-feature with levels, scores, and wisdom text\n- 🌲 **Tree-shakeable**: Unused imports stay out of bundle\n- 🚀 **Easy to use**: Comes with TypeScript types out of the box\n- 📦 **Presets**: Ready-made profiles for common app types (modern web apps, SPAs, e-commerce, etc.)\n- 🔍 **Version inference**: Infer minimum browser versions required by your feature set\n\nAny question? Read [Q\u0026A](https://github.com/mdrv/wbh/wiki/Q\u0026A) on the wiki.\n\n## 🧭 Example Code\n\n### Basic usage\n\n```ts\nimport {\n\tWBH,\n\tWBHLevel as L,\n\tavif,\n\tfileSystemApi,\n\tcssAspectRatio,\n} from '@mdrv/wbh'\n\nconst wbh = new WBH([\n\t{\n\t\tfeat: avif,\n\t\tlevel: L.CRITICAL,\n\t\tscore: 50,\n\t\twisdom: 'Most images are optimized AVIF.',\n\t},\n\t{\n\t\tfeat: fileSystemApi,\n\t\tlevel: L.IMPORTANT,\n\t\tscore: 50,\n\t\twisdom: 'Needed for local binary storage.',\n\t},\n\t{\n\t\tfeat: cssAspectRatio,\n\t\tlevel: L.OPTIONAL,\n\t\tscore: 49,\n\t\twisdom: 'Some layouts depend on aspect ratio.',\n\t},\n])\n\nconst result = await wbh.getResultAsync()\nif (result.score \u003e= 0) {\n\t// Render your app\n} else {\n\t// Browser missing features — show fallback UI\n}\n```\n\n### Using presets\n\n```ts\nimport { WBH, presets } from '@mdrv/wbh'\n\nconst wbh = new WBH(presets.modernWebApp())\nconst result = await wbh.getResultAsync()\n\nconsole.log(result.unsupported.map((f) =\u003e f.name))\n```\n\n### Browser version inference\n\n```ts\nconst wbh = new WBH(presets.modernWebApp())\nawait wbh.getResultAsync()\n\nconst versions = wbh.inferMinimumVersions()\n// { chrome: \"120\", firefox: \"121\", safari: \"17\", edge: \"120\" }\n\nconst comparison = wbh.compareBrowser('firefox', 115)\n// { browser: \"firefox\", version: 115, status: \"outdated\", gap: 6, ... }\n```\n\n### Options\n\n```ts\nnew WBH(features, {\n\tcache: false, // opt-in: cache detection results (default off)\n\tmockUnsupported: false, // simulate all features unsupported (for testing)\n})\n```\n\n## 🔔 Release Info\n\nThis package implements **Gregorian YYM-based** semver notation.\n\n| Version    | Date         |\n| ---------- | ------------ |\n| `v257.x.x` | July 2025    |\n| `v260.x.x` | Oct–Dec 2025 |\n| `v265.x.x` | May 2026     |\n\nSee [CHANGELOG](https://github.com/mdrv/wbh/wiki/changelog) for full history.\n\n---\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ev265 Changelog\u003c/strong\u003e (click to expand)\u003c/summary\u003e\n\n### Breaking Changes\n\n- **Renamed** `forceFail` option → `mockUnsupported`\n- **Removed** built-in CSS (`css.ts`) — handle your own fallback UI\n- **Removed** `is-mobile` dependency\n- **Updated** `Result` type: now includes `timestamp` and `durationMs` fields\n- **Updated** feature data: each feature now includes `safari` and `edge` version fields\n\n### New Features\n\n- **Presets system** (`src/presets.ts`) — 7 ready-made profiles:\n  - `modernWebApp()` — CSS nesting, grid, container queries, dialog, view transitions\n  - `spa()` — Single-page app essentials (view transitions, navigation API, promises)\n  - `contentSite()` — Content-focused sites (text-wrap, viewport units, typography)\n  - `dataHeavy()` — Data-intensive apps (IndexedDB, WebSockets, structuredClone)\n  - `cuttingEdge()` — Latest APIs (anchor positioning, scroll timeline, declarative shadow DOM)\n  - `minimal()` — Bare minimum for basic compatibility\n  - `ecommerce()` — E-commerce features (dialog modals, payment API, popover)\n- **`inferMinimumVersions()`** — Returns min Chrome/Firefox/Safari/Edge versions needed\n- **`compareBrowser(browser, version)`** — Compare a browser version against requirements; returns `current`, `outdated`, or `unsupported` status\n- **Opt-in cache** via `{ cache: true }` option (default off to avoid stale results)\n- **Enriched Result** — `timestamp` (Date.now()) and `durationMs` (performance.now())\n\n### New Feature Detections (+20)\n\n| Feature                | Level     | Notes                             |\n| ---------------------- | --------- | --------------------------------- |\n| `htmlDialog`           | CRITICAL  | `\u003cdialog\u003e` + showModal            |\n| `viewTransitions`      | CRITICAL  | View Transitions API              |\n| `cssNesting`           | CRITICAL  | CSS nesting syntax                |\n| `cssHasSelector`       | CRITICAL  | `:has()` relational selector      |\n| `structuredClone`      | CRITICAL  | Deep cloning without hacks        |\n| `promiseWithResolvers` | CRITICAL  | Promise.withResolvers()           |\n| `arrayAt`              | IMPORTANT | Array.at() negative indexing      |\n| `arrayWith`            | IMPORTANT | Array.with() immutable mutation   |\n| `cssColorMix`          | IMPORTANT | color-mix() function              |\n| `viewportUnits`        | IMPORTANT | svh/lvh/dvh units                 |\n| `cssFocusVisible`      | IMPORTANT | :focus-visible pseudo-class       |\n| `navigationApi`        | IMPORTANT | Navigation API (Chrome/Edge only) |\n| `urlPattern`           | IMPORTANT | URLPattern API                    |\n| `cssAnchorPositioning` | OPTIONAL  | Anchor positioning (Chrome only)  |\n| `declarativeShadowDom` | OPTIONAL  | Declarative Shadow DOM            |\n| `promiseTry`           | OPTIONAL  | Promise.try()                     |\n| `regexpEscape`         | OPTIONAL  | RegExp.escape()                   |\n| `importAttributes`     | OPTIONAL  | Import attributes                 |\n\n### Internal Improvements\n\n- **gen.ts** now extracts Safari and Edge version data from MDN BCD + caniuse-db\n- **types.ts** cleaned up: `caniuse` is `readonly string[]`, added `reason?`, `BrowserVersionMap`, `BrowserComparison`\n- **dynamicImport** no longer references removed `is-mobile` dep\n- Test suite expanded from 4 → 10 tests covering all new functionality\n\n\u003c/details\u003e\n\n---\n\n## 💖 Thank You\n\nThis project proudly uses:\n\n- 🧩 [**es-toolkit**](https://github.com/toss/es-toolkit) (modern JS utilities with TypeScript support)\n- 🥟 [**Bun.js**](https://github.com/oven-sh/bun) (blazing fast server-side JS runtime)\n- 📚 Additional data: [**MDN**](https://github.com/mdn/browser-compat-data) and [**Can I use...**](https://github.com/Fyrd/caniuse)\n\n\u003cp align=\"center\"\u003e\u003csub\u003e\u003cstrong\u003e© 2025 MEDRIVIA ／ Umar Alfarouk\u003c/strong\u003e\u003c/sub\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdrv%2Fwbh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdrv%2Fwbh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdrv%2Fwbh/lists"}