https://github.com/webreflection/once-defined
A minimalistic boilerplate to wait for Custom Elements, or libraries, definition
https://github.com/webreflection/once-defined
Last synced: about 1 year ago
JSON representation
A minimalistic boilerplate to wait for Custom Elements, or libraries, definition
- Host: GitHub
- URL: https://github.com/webreflection/once-defined
- Owner: WebReflection
- License: isc
- Created: 2020-07-13T15:57:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-08T15:01:14.000Z (almost 6 years ago)
- Last Synced: 2025-03-27T14:11:13.028Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://medium.com/@WebReflection/some-web-components-hint-75dce339ac6b
- Size: 10.7 KB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# once-defined
A minimalistic, ~140 bytes, boilerplate to wait for Custom Elements, or libraries, definition.
```js
import when from 'once-defined';
// const when = require('once-defined');
//
// other custom elements
when(['outer-comp', 'inner-comp']).then(([Outer, Inner]) => {
// define your components when Outer or Inner classes
// have been registered
});
// uce library example / single name
when('uce-lib').then(({define, render, html, svg, css}) => {
// define your components
});
```
If the awaited component/library is just one entry, it's returned right away. If it's a list of entries, each entry will be found in its related index.
## Why
The standard decided that once you `customElements.whenDefined(tagName)` you need to `customElements.get(tagName)` once the initial, explicit, intent to wait/retrieve it, is resolved, as specs don't return what you were waiting for once resolved.
With this module, that weights nothing, you can forget about the following boilerplate:
```js
customElements
.whenDefined(thing)
.then(() => customElements.get(thing))
.then(thing => {
console.log('finally we have', thing);
});
```
Use just `when(thing).then(thing => { ... })` and call it a day 🎉