Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oddbird/source-element
An exploratory Web Component to conditionally load one of several scripts based on user and browser settings.
https://github.com/oddbird/source-element
Last synced: 8 days ago
JSON representation
An exploratory Web Component to conditionally load one of several scripts based on user and browser settings.
- Host: GitHub
- URL: https://github.com/oddbird/source-element
- Owner: oddbird
- License: mit
- Created: 2023-12-25T19:39:45.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-01-09T21:07:40.000Z (10 months ago)
- Last Synced: 2024-10-29T18:48:52.061Z (16 days ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# `source-element`
A Web Component for conditionally loading scripts based on user-specific
conditions.
This is inspired by the
[Picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) and
[Video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
elements, and wondering what possibilities we could enable by allowing the
browser to determine what JavaScript files to load.
* We could load translation files only in the user's language.
* We could load a simpler site for users requesting [reduced
data](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData)
or [reduced
motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion),
and a complex Three.js site for everyone else.
As a Web Component, this is still happening after the page loads – but if this
was moved into the browser, we could see even more speed and data improvements.
**[Demo](https://oddbird.github.io/source-element/index.html)**
## Examples
### Media Query
Load separate JavaScript files based on any media query match, in this case
light/dark theme preference.
```html
```
### Language
Load just the needed translations with the `lang` attribute. This looks to see
if an exact match is present in `navigator.languages`.
```html
```
## Fallback
Ideally, we would have a `script` element that would be used as a fallback if
the SourceElement component fails to load. However, it does not seem possible to
have a `script` element in the DOM without loading the script.
For now, you can set a default by not adding any conditions. Because elements
are checked in the order they appear in the DOM, this must be last.
```html
```
## Installation
You have a few options (choose one of these):
1. ~~Install via [npm](https://www.npmjs.com/package/@oddbird/source-element):
`npm install @oddbird/source-element`~~ NOT AVAILABLE YET
1. [Download the source manually from GitHub](https://github.com/oddbird/source-element/releases)
into your project.
1. ~~Skip this step and use the script directly via a 3rd party CDN (not
recommended for production use)~~ NOT AVAILABLE YET
### Usage
Make sure you include the `` in your project:
```html
<!-- Host yourself -->
<script type="module" src="source-element.js">
```
## Next steps
- Figure out fallback using ``.
- Better script insertion, using the attributes from the `script-source` element.
- Propose a native, non-Web Component for inclusion in browsers.
## Credit
With thanks to the following people:
- [Zach Leatherman](https://zachleat.com) for the conditional inspiration in [is-land](https://github.com/11ty/is-land).
- David Darnes for the [Component Template](https://github.com/daviddarnes/component-template).
## Support
At OddBird,
we enjoy collaborating and contributing
as part of an open web community.
But those contributions take time and effort.
If you're interested in supporting our
open-source work,
consider becoming a
[GitHub sponsor](https://github.com/sponsors/oddbird),
or contributing to our
[Open Collective](https://opencollective.com/oddbird-open-source).