├── .npmrc
├── cjs
    ├── package.json
    └── index.js
├── .gitignore
├── .npmignore
├── es.js
├── min.js
├── rollup
    ├── es.config.js
    └── babel.config.js
├── esm
    └── index.js
├── test
    └── index.html
├── index.js
├── LICENSE
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/cjs/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .nyc_output
3 | node_modules/
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .nyc_output
3 | .travis.yml
4 | node_modules/
5 | rollup/
6 | test/
7 | 


--------------------------------------------------------------------------------
/es.js:
--------------------------------------------------------------------------------
1 | self.onceDefined=function(e){"use strict";return e.default=e=>{const t=[].concat(e);return Promise.all(t.map(e=>customElements.whenDefined(e).then(t=>t||customElements.get(e)))).then(e=>t.length<2?e[0]:e)},e}({}).default;
2 | 


--------------------------------------------------------------------------------
/min.js:
--------------------------------------------------------------------------------
1 | self.onceDefined=function(n){"use strict";return n.default=function(n){var e=[].concat(n);return Promise.all(e.map((function(n){return customElements.whenDefined(n).then((function(e){return e||customElements.get(n)}))}))).then((function(n){return e.length<2?n[0]:n}))},n}({}).default;


--------------------------------------------------------------------------------
/rollup/es.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     
 8 |     resolve({module: true}),
 9 |     terser()
10 |   ],
11 |   
12 |   output: {
13 |     exports: 'named',
14 |     file: './es.js',
15 |     format: 'iife',
16 |     name: 'onceDefined'
17 |   }
18 | };
19 | 


--------------------------------------------------------------------------------
/rollup/babel.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import babel from 'rollup-plugin-babel';
 3 | 
 4 | export default {
 5 |   input: './esm/index.js',
 6 |   plugins: [
 7 |     
 8 |     resolve({module: true}),
 9 |     babel({presets: ['@babel/preset-env']})
10 |   ],
11 |   
12 |   output: {
13 |     exports: 'named',
14 |     file: './index.js',
15 |     format: 'iife',
16 |     name: 'onceDefined'
17 |   }
18 | };
19 | 


--------------------------------------------------------------------------------
/esm/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param {string|string[]} names one or more `customElements` names
 3 |  * @return {HTMLElement|HTMLElement[]} one or more classes defined through
 4 |  * the `customElements` registry
 5 |  */
 6 | export default names => {
 7 |   const all = [].concat(names);
 8 |   return Promise.all(
 9 |     all.map(name => customElements.whenDefined(name).then(
10 |       Class => Class || customElements.get(name)
11 |     ))
12 |   ).then(result => all.length < 2 ? result[0] : result);
13 | };
14 | 


--------------------------------------------------------------------------------
/cjs/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /**
 3 |  * @param {string|string[]} names one or more `customElements` names
 4 |  * @return {HTMLElement|HTMLElement[]} one or more classes defined through
 5 |  * the `customElements` registry
 6 |  */
 7 | module.exports = names => {
 8 |   const all = [].concat(names);
 9 |   return Promise.all(
10 |     all.map(name => customElements.whenDefined(name).then(
11 |       Class => Class || customElements.get(name)
12 |     ))
13 |   ).then(result => all.length < 2 ? result[0] : result);
14 | };
15 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>when-defined</title>
 7 |   <script type="module">
 8 |   import(
 9 |     /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
10 |     '../esm/index.js' :
11 |     'https://unpkg.com/once-defined?module'
12 |   )
13 |   .then((module) => {
14 |     console.log(module);
15 |   });
16 |   </script>
17 | </head>
18 | <body></body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | self.onceDefined = (function (exports) {
 2 |   'use strict';
 3 | 
 4 |   /**
 5 |    * @param {string|string[]} names one or more `customElements` names
 6 |    * @return {HTMLElement|HTMLElement[]} one or more classes defined through
 7 |    * the `customElements` registry
 8 |    */
 9 |   var index = (function (names) {
10 |     var all = [].concat(names);
11 |     return Promise.all(all.map(function (name) {
12 |       return customElements.whenDefined(name).then(function (Class) {
13 |         return Class || customElements.get(name);
14 |       });
15 |     })).then(function (result) {
16 |       return all.length < 2 ? result[0] : result;
17 |     });
18 |   });
19 | 
20 |   exports.default = index;
21 | 
22 |   return exports;
23 | 
24 | }({}).default);
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ISC License
 2 | 
 3 | Copyright (c) 2020, Andrea Giammarchi, @WebReflection
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted, provided that the above
 7 | copyright notice and this permission notice appear in all copies.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
14 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15 | PERFORMANCE OF THIS SOFTWARE.
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # once-defined
 2 | 
 3 | A minimalistic, ~140 bytes, boilerplate to wait for Custom Elements, or libraries, definition.
 4 | 
 5 | ```js
 6 | import when from 'once-defined';
 7 | // const when = require('once-defined');
 8 | // <script src="//unpkg.com/once-defined">
 9 | 
10 | // other custom elements
11 | when(['outer-comp', 'inner-comp']).then(([Outer, Inner]) => {
12 |   // define your components when Outer or Inner classes
13 |   // have been registered
14 | });
15 | 
16 | // uce library example / single name
17 | when('uce-lib').then(({define, render, html, svg, css}) => {
18 |   // define your components
19 | });
20 | ```
21 | 
22 | 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.
23 | 
24 | 
25 | 
26 | ## Why
27 | 
28 | 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.
29 | 
30 | With this module, that weights nothing, you can forget about the following boilerplate:
31 | 
32 | ```js
33 | customElements
34 |   .whenDefined(thing)
35 |   .then(() => customElements.get(thing))
36 |   .then(thing => {
37 |     console.log('finally we have', thing);
38 |   });
39 | ```
40 | 
41 | Use just `when(thing).then(thing => { ... })` and call it a day 🎉
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "once-defined",
 3 |   "version": "1.0.2",
 4 |   "description": "A minimalistic boilerplate to wait for Custom Elements, or libraries, definition",
 5 |   "main": "./cjs/index.js",
 6 |   "scripts": {
 7 |     "build": "npm run cjs && npm run rollup:es && npm run rollup:babel && npm run min && npm run fix:default && npm run test",
 8 |     "cjs": "ascjs --no-default esm cjs",
 9 |     "rollup:es": "rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck",
10 |     "rollup:babel": "rollup --config rollup/babel.config.js && sed -i.bck 's/^var /self./' index.js && rm -rf index.js.bck",
11 |     "min": "terser index.js --comments='/^!/' -c -m -o min.js",
12 |     "fix:default": "sed -i 's/({})/({}).default/' index.js && sed -i 's/({})/({}).default/' es.js && sed -i 's/({})/({}).default/' min.js"
13 |   },
14 |   "keywords": [
15 |     "custom",
16 |     "elements",
17 |     "when",
18 |     "defined",
19 |     "helper"
20 |   ],
21 |   "author": "Andrea Giammarchi",
22 |   "license": "ISC",
23 |   "devDependencies": {
24 |     "@babel/core": "^7.10.5",
25 |     "@babel/preset-env": "^7.10.4",
26 |     "ascjs": "^4.0.1",
27 |     "rollup": "^2.21.0",
28 |     "rollup-plugin-babel": "^4.4.0",
29 |     "rollup-plugin-node-resolve": "^5.2.0",
30 |     "rollup-plugin-terser": "^6.1.0",
31 |     "terser": "^4.8.0"
32 |   },
33 |   "module": "./esm/index.js",
34 |   "type": "module",
35 |   "exports": {
36 |     "import": "./esm/index.js",
37 |     "default": "./cjs/index.js"
38 |   },
39 |   "unpkg": "min.js",
40 |   "repository": {
41 |     "type": "git",
42 |     "url": "git+https://github.com/WebReflection/once-defined.git"
43 |   },
44 |   "bugs": {
45 |     "url": "https://github.com/WebReflection/once-defined/issues"
46 |   },
47 |   "homepage": "https://github.com/WebReflection/once-defined#readme"
48 | }
49 | 


--------------------------------------------------------------------------------