{"id":20513784,"url":"https://github.com/webreflection/uce-loader","last_synced_at":"2025-04-14T00:01:44.965Z","repository":{"id":57384836,"uuid":"279313298","full_name":"WebReflection/uce-loader","owner":"WebReflection","description":"A minimalistic, framework agnostic, lazy Custom Elements loader","archived":false,"fork":false,"pushed_at":"2020-12-24T11:17:20.000Z","size":33,"stargazers_count":34,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T14:11:14.122Z","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-13T13:40:25.000Z","updated_at":"2024-12-01T19:58:13.000Z","dependencies_parsed_at":"2022-09-05T06:21:35.904Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/uce-loader","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fuce-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fuce-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fuce-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fuce-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/uce-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799931,"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:08.287Z","updated_at":"2025-04-14T00:01:44.910Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cem\u003eµ\u003c/em\u003ece-loader\n\n\u003csup\u003e**Social Media Photo by [Guillaume Bolduc](https://unsplash.com/@guibolduc) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\nA minimalistic, framework agnostic, lazy Custom Elements loader.\n\n### Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003e\n  \u003cscript type=\"module\"\u003e\n  // \u003cscript src=\"//unpkg.com/uce-loader\"\u003e or ...\n  import loader from '//unpkg.com/uce-loader?module';\n\n  // will load every custom elements via the path\n  loader({\n    // by default it's document\n    container: document.body,\n    // invoked per each new custom-element name found\n    on(newTag) {\n      const js = document.createElement('script');\n      js.src = `js/components/${newTag}.js`;\n      document.head.appendChild(js);\n    }\n  });\n  // js/components/compo-nent.js\n  // js/components/what-ever.js\n  // which will bring in also\n  // js/components/whatever-else.js\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ccompo-nent\u003e\u003c/compo-nent\u003e\n  \u003chr\u003e\n  \u003cwhat-ever\u003e\u003c/what-ever\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf `loader({container: document, on(tagName){}})` API is too simplified, feel free to check [lazytag](https://github.com/WebReflection/lazytag#readme) out.\n\n### About ShadowDOM\n\nIf your components use `attachShadow` and internally use custom elements that should be lazy loaded, be sure the `shadowRoot` is observed.\n\n```js\nconst shadowRoot = this.attachShadow({mode: any});\nloader({\n    container: shadowRoot,\n    on(newTag) {\n      // ... load components\n    }\n  });\n```\n\n### V2 vs V1\n\nCurrent version of this module does *not* invoke the `.on(...)` method if the element is already registered as Custom Element.\n\nIn *V1* any tag name would've passed through the loader instead.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fuce-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fuce-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fuce-loader/lists"}