{"id":18496283,"url":"https://github.com/oddbird/source-element","last_synced_at":"2025-06-30T20:05:56.127Z","repository":{"id":214253700,"uuid":"735678053","full_name":"oddbird/source-element","owner":"oddbird","description":"An exploratory Web Component to conditionally load one of several scripts based on user and browser settings.","archived":false,"fork":false,"pushed_at":"2024-01-09T21:07:40.000Z","size":17,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-18T12:23:39.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/oddbird.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2023-12-25T19:39:45.000Z","updated_at":"2024-02-16T18:59:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"e09e70d9-874f-49ae-bbd0-5cf186a461e8","html_url":"https://github.com/oddbird/source-element","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.125,"last_synced_commit":"ec995e2f70956c391dee23c9b7d54353f0f12d83"},"previous_names":["oddbird/source-element"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oddbird/source-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsource-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsource-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsource-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsource-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/source-element/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fsource-element/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261376023,"owners_count":23149232,"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-06T13:28:48.874Z","updated_at":"2025-06-30T20:05:55.248Z","avatar_url":"https://github.com/oddbird.png","language":"JavaScript","readme":"# `source-element`\n\nA Web Component for conditionally loading scripts based on user-specific\nconditions. \n\nThis is inspired by the\n[Picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) and\n[Video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)\nelements, and wondering what possibilities we could enable by allowing the\nbrowser to determine what JavaScript files to load.\n\n* We could load translation files only in the user's language.\n* We could load a simpler site for users requesting [reduced\n  data](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData)\n  or [reduced\n  motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion),\n  and a complex Three.js site for everyone else.\n\nAs a Web Component, this is still happening after the page loads – but if this\nwas moved into the browser, we could see even more speed and data improvements.\n\n**[Demo](https://oddbird.github.io/source-element/index.html)**\n\n## Examples\n\n### Media Query\n\nLoad separate JavaScript files based on any media query match, in this case\nlight/dark theme preference.\n\n```html\n\u003cscript type=\"module\" src=\"source-element.js\"\u003e\u003c/script\u003e\n\n\u003csource-element\u003e\n  \u003cscript-source\n    src=\"scripts/dark.js\"\n    when=\"(prefers-color-scheme: dark)\"\n  \u003e\u003c/script-source\u003e\n  \u003cscript-source\n    src=\"scripts/light.js\"\n    when=\"(prefers-color-scheme: light)\"\n  \u003e\u003c/script-source\u003e\n\u003c/source-element\u003e\n```\n\n### Language\n\nLoad just the needed translations with the `lang` attribute. This looks to see\nif an exact match is present in `navigator.languages`.\n\n```html\n\u003cscript type=\"module\" src=\"source-element.js\"\u003e\u003c/script\u003e\n\n\u003csource-element\u003e\n  \u003cscript-source src=\"scripts/es.js\" lang=\"es\"\u003e\u003c/script-source\u003e\n  \u003cscript-source src=\"scripts/de.js\" lang=\"de\"\u003e\u003c/script-source\u003e\n  \u003cscript-source src=\"scripts/en.js\" lang=\"en\"\u003e\u003c/script-source\u003e\n\u003c/source-element\u003e\n```\n\n## Fallback\n\nIdeally, we would have a `script` element that would be used as a fallback if\nthe SourceElement component fails to load. However, it does not seem possible to\nhave a `script` element in the DOM without loading the script.\n\nFor now, you can set a default by not adding any conditions. Because elements\nare checked in the order they appear in the DOM, this must be last.\n\n```html\n\u003cscript type=\"module\" src=\"source-element.js\"\u003e\u003c/script\u003e\n\n\u003csource-element\u003e\n  \u003cscript-source src=\"scripts/es.js\" lang=\"es\"\u003e\u003c/script-source\u003e\n  \u003cscript-source src=\"scripts/de.js\" lang=\"de\"\u003e\u003c/script-source\u003e\n  \u003cscript-source src=\"scripts/en.js\"\u003e\u003c/script-source\u003e\n\u003c/source-element\u003e\n```\n\n## Installation\n\nYou have a few options (choose one of these):\n\n1. ~~Install via [npm](https://www.npmjs.com/package/@oddbird/source-element):\n   `npm install @oddbird/source-element`~~ NOT AVAILABLE YET\n1. [Download the source manually from GitHub](https://github.com/oddbird/source-element/releases)\n   into your project.\n1. ~~Skip this step and use the script directly via a 3rd party CDN (not\n   recommended for production use)~~ NOT AVAILABLE YET\n\n### Usage\n\nMake sure you include the `\u003cscript\u003e` in your project:\n\n```html\n\u003c!-- Host yourself --\u003e\n\u003cscript type=\"module\" src=\"source-element.js\"\u003e\u003c/script\u003e\n```\n\n## Next steps\n\n- Figure out fallback using `\u003cscript\u003e`.\n- Better script insertion, using the attributes from the `script-source` element.\n- Propose a native, non-Web Component for inclusion in browsers.\n\n## Credit\n\nWith thanks to the following people:\n\n- [Zach Leatherman](https://zachleat.com) for the conditional inspiration in [is-land](https://github.com/11ty/is-land).\n- David Darnes for the [Component Template](https://github.com/daviddarnes/component-template).\n\n## Support\n\nAt OddBird,\nwe enjoy collaborating and contributing\nas part of an open web community.\nBut those contributions take time and effort.\nIf you're interested in supporting our\nopen-source work,\nconsider becoming a\n[GitHub sponsor](https://github.com/sponsors/oddbird),\nor contributing to our\n[Open Collective](https://opencollective.com/oddbird-open-source).\n","funding_links":["https://github.com/sponsors/oddbird","https://opencollective.com/oddbird-open-source"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fsource-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Fsource-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fsource-element/lists"}