This polyfills the DOM Observable class, as well as EventTarget.prototype.when.

To see the explainer of these, please visit https://github.com/WICG/observable.

If you're using npm, you only need to import the package, like so:

import "observable-polyfill";

This will automatically apply the polyfill if required.

If you'd like to manually apply the polyfill, you can instead import the isSupported and apply functions directly from the ./observable.js file, which is mapped to /fn:

import { isSupported, apply } from "observable-polyfill/fn";
if (!isSupported()) apply();

An isPolyfilled function is also available, to detect if it has been polyfilled:

import { isSupported, isPolyfilled, apply } from "observable-polyfill/fn";
if (!isSupported() && !isPolyfilled()) apply();

Alternatively, if you're not using a package manager, you can use the unpkg script:

<!-- polyfill automatically -->
<script
  type="module"
  async
  src="https://unpkg.com/observable-polyfill@latest/observable.min.js"
></script>

<!-- polyfill manually -->
<script type="module" async>
  import {isSupported, apply} from "https://unpkg.com/observable-polyfill@latest/observable.js"
  if (!isSupported()) apply();
</script>

With the module imported, you can start to use Observable and .when:

new Observable(...)

document.body.when('click').take(1).subscribe(console.log)