{"id":24481077,"url":"https://github.com/nonsalant/definer","last_synced_at":"2026-05-12T16:02:45.858Z","repository":{"id":272696416,"uuid":"917462761","full_name":"nonsalant/definer","owner":"nonsalant","description":"One file responsible for defining all web components (you load them using URL query parameters)","archived":false,"fork":false,"pushed_at":"2025-02-16T14:38:29.000Z","size":37,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T18:20:59.974Z","etag":null,"topics":["javascript","library","web-components","web-components-library"],"latest_commit_sha":null,"homepage":"https://definer.netlify.app/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nonsalant.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-16T03:08:18.000Z","updated_at":"2025-02-16T14:38:32.000Z","dependencies_parsed_at":"2025-01-16T04:28:08.173Z","dependency_job_id":"994dc53a-d0ab-4418-81a6-ce8f2f7e9bc7","html_url":"https://github.com/nonsalant/definer","commit_stats":null,"previous_names":["nonsalant/definer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nonsalant/definer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fdefiner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fdefiner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fdefiner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fdefiner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nonsalant","download_url":"https://codeload.github.com/nonsalant/definer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fdefiner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32946410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T09:19:52.626Z","status":"ssl_error","status_checked_at":"2026-05-12T09:17:33.438Z","response_time":102,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","library","web-components","web-components-library"],"created_at":"2025-01-21T11:18:52.485Z","updated_at":"2026-05-12T16:02:45.839Z","avatar_url":"https://github.com/nonsalant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# definer\n\u003ci\u003eLoad and (re)define multiple web components from a single script using URL query parameters.\u003c/i\u003e\n\n## Demos\n- Live Test: https://definer.netlify.app/demo/\n- Live CodePen Demo: https://codepen.io/nonsalant/pen/bNbKjZR?editors=1010\n\nIn the pen above multiple web components are being imported as modules from the pen's own JS tab along with some other components from a different source.\n\n## Usage Examples\n\n### 1. Components from a local folder\n\n```html\n\u003cscript type=\"module\" src=\"../definer.js?load=my-component.js,my-other-component.js\"\u003e\n\u003c/script\u003e\n```\n\n```html\n\u003cmy-component\u003e\u003c/my-component\u003e\n\u003cmy-other-component\u003e\u003c/my-other-component\u003e\n```\n\n### 2. With renamed tags\n\n```html\n\u003cscript type=\"module\" src=\"../definer.js?load=\n    my-component.js|component-one,\n    my-other-component.js|component-two,\n\"\u003e\u003c/script\u003e\n```\n```html\n\u003ccomponent-one\u003e\u003c/component-one\u003e\n\u003ccomponent-two\u003e\u003c/component-two\u003e\n```\n\n### 3. Components from external URL's\n```html\n\u003cscript type=\"module\" src=\"../definer.js?load=\n    https://web-component-definer.netlify.app/my-component.js,\n    https://web-component-definer.netlify.app/my-other-component.js,\n\"\u003e\u003c/script\u003e\n```\n```html\n\u003cmy-component\u003e\u003c/my-component\u003e\n\u003cmy-other-component\u003e\u003c/my-other-component\u003e\n```\n\n### 4. From external URL's with renamed tags and a `base` parameter\n```html\n\u003cscript type=\"module\" src=\"../definer.js?load=\n    my-component.js|external-component,\n    my-other-component.js|other-external-component,\n\u0026base=https://web-component-definer.netlify.app\n\"\u003e\u003c/script\u003e\n```\n```html\n\u003cexternal-component\u003e\u003c/external-component\u003e\n\u003cother-external-component\u003e\u003c/other-external-component\u003e\n```\n\n### 5. External and local combined + base parameter\nNote: the `base` parameter never affects URL's that start with `http://` or `https://`\n```html\n\u003cscript type=\"module\" src=\"../definer.js?load=\n    my-component.js,\n    https://web-component-definer.netlify.app/my-other-component.js,\n    my-other-component.js|renamed-component,\n\u0026base=scripts/components\n\"\u003e\u003c/script\u003e\n```\n```html\n\u003cmy-component\u003e\u003c/my-component\u003e\n\u003cmy-other-component\u003e\u003c/my-other-component\u003e\n\u003crenamed-component\u003e\u003c/renamed-component\u003e\n```\n\n## Options for the web component files which are being loaded\n\n1. Components should export their classes, and their class names should be PascalCase versions of the tag names (e.g. `MyComponent` for the tag `my-component`); see the `.js` files in the demo folder for examples.\n\n\u003chr\u003e\n\n2. If you need to specify the class name (if it’s not a PascalCase version of the component-name) you can do so using a second pipe delimiter, eg:\n\n`definer.js?load=filename.js|component-name|ClassName`\n\nThis can also allow you to import multiple classes exported from the same file. See this CodePen for an example of multiple components being imported from classes in the JS tab of the pen: https://codepen.io/nonsalant/pen/bNbKjZR?editors=1011\n\n\u003chr\u003e\n\n3. There's no need to do this anymore:\n```javascript\ncustomElements.define('my-component', MyComponent)\n```\n…unless you want to, in which case you’ll need to add `|false` to the corresponding tag in the `load` parameter, e.g:\n\n```html\n\u003cscript type=\"module\" src=\"../definer.js?load=my-component.js|false\"\u003e\u003c/script\u003e\n```\n\n(See example 2 above — it's as if you're renaming the tag to `false`)\n\n\n## Notes\n- Trailing commas are allowed in the `load` parameter.\n- Trailing slashes are allowed in the `base` parameter.\n- Whitespace (for readability) is allowed anywhere in the parameter values, but not between the `?` sign and the first `=` or the `\u0026` sign and the next `=`.\n\n## Credits\nThe `WebComponent` class is based on code from [this post](https://til.jakelazaroff.com/html/define-a-custom-element/) by Jake Lazaroff, which is in turn based on code from [this post](https://mayank.co/blog/defining-custom-elements/) by Mayank and [an idea](https://knowler.dev/blog/to-define-custom-elements-or-not-when-distributing-them) about using `import.meta.url` and search params from Nathan Knowler.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnonsalant%2Fdefiner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnonsalant%2Fdefiner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnonsalant%2Fdefiner/lists"}