{"id":20513878,"url":"https://github.com/webreflection/once-defined","last_synced_at":"2025-08-01T04:11:24.441Z","repository":{"id":57314481,"uuid":"279348278","full_name":"WebReflection/once-defined","owner":"WebReflection","description":"A minimalistic boilerplate to wait for Custom Elements, or libraries, definition","archived":false,"fork":false,"pushed_at":"2020-09-08T15:01:14.000Z","size":11,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T14:11:13.028Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://medium.com/@WebReflection/some-web-components-hint-75dce339ac6b","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-13T15:57:21.000Z","updated_at":"2021-07-29T01:24:35.000Z","dependencies_parsed_at":"2022-09-20T23:21:53.378Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/once-defined","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fonce-defined","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fonce-defined/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fonce-defined/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fonce-defined/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/once-defined/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799933,"owners_count":21163403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T21:13:43.731Z","updated_at":"2025-04-14T00:02:13.791Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# once-defined\n\nA minimalistic, ~140 bytes, boilerplate to wait for Custom Elements, or libraries, definition.\n\n```js\nimport when from 'once-defined';\n// const when = require('once-defined');\n// \u003cscript src=\"//unpkg.com/once-defined\"\u003e\n\n// other custom elements\nwhen(['outer-comp', 'inner-comp']).then(([Outer, Inner]) =\u003e {\n  // define your components when Outer or Inner classes\n  // have been registered\n});\n\n// uce library example / single name\nwhen('uce-lib').then(({define, render, html, svg, css}) =\u003e {\n  // define your components\n});\n```\n\nIf 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.\n\n\n\n## Why\n\nThe 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.\n\nWith this module, that weights nothing, you can forget about the following boilerplate:\n\n```js\ncustomElements\n  .whenDefined(thing)\n  .then(() =\u003e customElements.get(thing))\n  .then(thing =\u003e {\n    console.log('finally we have', thing);\n  });\n```\n\nUse just `when(thing).then(thing =\u003e { ... })` and call it a day 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fonce-defined","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fonce-defined","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fonce-defined/lists"}