View Transitions Mock

Mock support for document.startViewTransition in browsers with no support.

Overview

This library mocks document.startViewTransition along with document.activeViewTransition. With the mock installed, you can safely call document.startViewTransition() – and rely on its promises and what not – without it throwing an error in browsers that have no support for it.

This way, you don’t need to sprinkle if (document.startViewTransition) … checks throughout your code.

- Without view-transitions-mock:

``javascript
document.querySelector('button').addEventListener('click', async () => {
if (document.startViewTransition) {
document.querySelector('#thing').style.viewTransitionName = 'the-thing';
const t = document.startViewTransition(updateTheDOM);
await t.finished;
document.querySelector('#thing').style.viewTransitionName = '';
} else {
updateTheDOM();
}
});

- With view-transitions-mock registered:

`javascript
document.querySelector('button').addEventListener('click', async () => {
document.querySelector('#thing').style.viewTransitionName = 'the-thing';
const t = document.startViewTransition(updateTheDOM);
await t.finished;
document.querySelector('#thing').style.viewTransitionName = '';
});
`

Installation

`bash
npm i view-transitions-mock
`

Usage

1. Import and register the mock from within a blocking script.

`html

`

2. Done.

Registration Configuration

By default, the registation of view-transitions-mock checks whether document.startViewTransition and View Transition Types are supported or not. When both are supported, it won’t register the mock.

You can tweak the registration by passing an object with the following properties into the register function:

- requireTypes _(Boolean, default value: true)_: Require support for View Transition Types.
- forced _(Boolean, default value: false)_: Force register the mock, regardless of support.

For example, if you are not relying on View Transition Types, call register as follows so that it does not register the mock in Firefox 144–146 which does not have support for View Transition Types:

`javascript
import { register } from "view-transitions-mock";
register({ requireTypes: false });
`

Or if you want to disable native support for Same-Document View Transitions entirely – handy if you want to test how your site looks without View Transitions – call register as follows:

`javascript
import { register } from "view-transitions-mock";
register({ forced: true });
`

License

view-transitions-mock is released under the Apache 2.0 License. See the enclosed LICENSE for details.

Contributing

We'd love to accept your patches and contributions to this project. See the enclosed CONTRIBUTING` for details.

Disclaimer

This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.