# data-loader

> data-loader Custom Element to load data declaratively

Latest version **3.8.22** (published 2024-10-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install data-loader
pnpm add data-loader
yarn add data-loader
bun add data-loader
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.8.22 |
| Published | 2024-10-04 |
| First published | 2016-10-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 92.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 152 |
| Author | Aurélien Luciani |
| Maintainers | xwatkins, ljgarcia, mmahmoudy, 4ndr01d3, aurel-l, swaathik, dlrice2 |
| Keywords | webcomponents, customelements, data, data-loader, dataloader, loader, nightingale, protvista |

## Links

- npm: https://www.npmjs.com/package/data-loader
- Repository: https://github.com/ebi-webcomponents/nightingale
- Homepage: https://ebi-webcomponents.github.io/nightingale/
- Issues: https://github.com/ebi-webcomponents/nightingale/issues
- npm.io page: https://npm.io/package/data-loader

## Dependencies (2)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.11
- [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) 4.17.3

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 3.8.22 (latest) — 2024-10-04
- 3.0.0-alpha.21 (canary) — 2020-10-02
- 3.8.21 — 2024-10-04
- 3.8.20 — 2024-10-04
- 3.8.18 — 2024-10-04
- 3.8.4 — 2022-12-01
- 3.5.7 — 2022-02-02
- 3.0.0 — 2020-10-02
- 2.12.0 — 2020-06-17
- 2.11.0 — 2020-06-15
- 2.9.1 — 2020-04-24
- 2.9.0 — 2020-04-24
- 2.5.1 — 2020-04-07
- 2.4.2 — 2020-04-01
- 2.3.0 — 2019-12-12
- … 31 more at https://npm.io/package/data-loader/versions

## README

# data-loader

A standard Custom Element fetching data declaratively.

It follows the current v1 draft.

Will load the data at the URL defined in the `src` property of a
`source` element that it contains.

It can also parse JSON from the content of a script tag of type
`application/json`.

## Usage

### Example

```html
<data-loader>
  <source src="https://www.example.com/some/data" />
</data-loader>
```

See it running [Here](https://ebi-ppf.github.io/data-loader/).

### Use with custom namespace

Only needed if the `data-loader` name clashes with an other existing
Custom Element.

```js
import DataLoader from "data-loader";

// Register the Custom Elements
customElements.define("namespaced-data-loader", DataLoader);
```

And then in the HTML, use like so:

```html
<namespaced-data-loader>
  <source src="https://www.example.com/some/data" />
</namespaced-data-loader>
```

## Compatibility

This element assumes support for at least ES2015.
To support older browsers you might need to transpile the code you use
down to the version you are planning on supporting.

You might need to use a polyfill for browsers not supporting Custom
Elements **v1** (not v0).
See [webcomponents.js](https://github.com/webcomponents/webcomponentsjs) or
[SkateJS Web Components](https://github.com/skatejs/web-components).

## API

To be completed

### Properties

| name       | default value | information                                                                                             | DOM attribute | writable |
| ---------- | ------------- | ------------------------------------------------------------------------------------------------------- | ------------- | -------- |
| `data`     | `null`        | data loaded by the component (same than the data dispatched in the `load` event)                        | no            | no       |
| `loaded`   | `false`       | flag informing if data is currently loaded                                                              | no            | no       |
| `selector` | `null`        | selector to extract data from the payload (see [lodash.get documentation](https://lodash.com/docs#get)) | yes           | no       |

### Events

| event name | information                                                                                           |
| ---------- | ----------------------------------------------------------------------------------------------------- |
| `error`    | Fired when none of the URL defined in the `source` elements is reachable nor returns a valid response |
| `load`     | Fired when a URL returns a valid response, contains the data loaded (same as `data` property)         |

---
_Source: https://npm.io/package/data-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._