|
| 1 | +# Observable Polyfill |
| 2 | + |
| 3 | +This polyfills the DOM `Observable` class, as well as `EventTarget.prototype.when`. |
| 4 | + |
| 5 | +To see the explainer of these, please visit https://github.com/WICG/observable. |
| 6 | + |
| 7 | +## Installation |
| 8 | + |
| 9 | +### With npm |
| 10 | + |
| 11 | +If you're using npm, you only need to import the package, like so: |
| 12 | + |
| 13 | +```js |
| 14 | +import "observable-polyfill"; |
| 15 | +``` |
| 16 | + |
| 17 | +This will automatically apply the polyfill if required. |
| 18 | + |
| 19 | +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 |
| 20 | +is mapped to `/fn`: |
| 21 | + |
| 22 | +```js |
| 23 | +import { isSupported, apply } from "observable-polyfill/fn"; |
| 24 | +if (!isSupported()) apply(); |
| 25 | +``` |
| 26 | + |
| 27 | +An `isPolyfilled` function is also available, to detect if it has been polyfilled: |
| 28 | + |
| 29 | +```js |
| 30 | +import { isSupported, isPolyfilled, apply } from "observable-polyfill/fn"; |
| 31 | +if (!isSupported() && !isPolyfilled()) apply(); |
| 32 | +``` |
| 33 | + |
| 34 | +Alternatively, if you're not using a package manager, you can use the `unpkg` script: |
| 35 | + |
| 36 | +```html |
| 37 | +<!-- polyfill automatically --> |
| 38 | +<script |
| 39 | + type="module" |
| 40 | + async |
| 41 | + src="https://unpkg.com/observable-polyfill@latest/observable.min.js" |
| 42 | +></script> |
| 43 | +``` |
| 44 | + |
| 45 | +```html |
| 46 | +<!-- polyfill manually --> |
| 47 | +<script type="module" async> |
| 48 | + import {isSupported, apply} from "https://unpkg.com/observable-polyfill@latest/observable.js" |
| 49 | + if (!isSupported()) apply(); |
| 50 | +</script> |
| 51 | +``` |
| 52 | + |
| 53 | +## Usage |
| 54 | + |
| 55 | +With the module imported, you can start to use `Observable` and `.when`: |
| 56 | + |
| 57 | +```js |
| 58 | +new Observable(...) |
| 59 | + |
| 60 | +document.body.when('click').take(1).subscribe(console.log) |
| 61 | +``` |
0 commit comments