# data-stoar

> Grab all the data attributes from an HTML document, and Stoar them for use

Latest version **2.2.2** (published 2019-04-01) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2019-04-01 |
| First published | 2015-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Ben Westrate + Josh Zeltman |
| Maintainers | jzeltman, techjet |

## Links

- npm: https://www.npmjs.com/package/data-stoar
- Repository: https://github.com/jzeltman/data-stoar
- Homepage: https://github.com/jzeltman/data-stoar#readme
- Issues: https://github.com/jzeltman/data-stoar/issues
- npm.io page: https://npm.io/package/data-stoar

## Recent versions

- 2.2.2 (latest) — 2019-04-01
- 2.2.1 — 2018-02-13
- 2.2.0 — 2018-02-09
- 2.1.0 — 2018-02-01
- 2.0.0 — 2018-01-30
- 1.0.2 — 2017-05-26
- 1.0.1 — 2015-08-05
- 1.0.0 — 2015-07-29

## README

# data-stoar
data-stoar is a page parser that will look for script tags on the current page with specific data attributes and pass them back as a formatted object.

#### NPM
```bash
npm install data-stoar
```
#### Yarn
```bash
yarn add data-stoar
```

## How to use data-stoar
Data is passed to the data-stoar via data-attributes or json script tags in the rendered HTML. If you use the script tag I recommend using the type of "applicaiton/json" that way your browser will not execute the script tag.

```HTML
<script type="application/json"
        data-component="myNewComponent"
        data-component-config
        data-component-instance="1">
        {
            "myTestData"  : "Data passed to my component",
            "myTestData2" : {
                foo : "BAR",
                baz : "zing"
            }
        }
</script>

<div
    data-component="myNewComponent"
    data-component-instance="2"
    data-my-special-info="Component info specific to this instance"
    data-title-info="The Data Stoar is fantastic">
    <h1>My cool component</h1>
</div>

```
There are three data attributes that data-stoar looks for on a html tag
1) `data-component` This is the name associated with the component when the array of found components is returned
2) `data-component-config` This tells data-stoar that this particular json is a config for all components found on the page of this component type. So this json object will be passed to each component, in the example above, with the type `myNewComponent`.
3) `data-component-instance` This attribute will tell data-stoar that you want this json data to go to a specific instance of a component on the page. In the case above `1`.
4) If you have chosen to use data attributes to pass data to the data-stoar then all the other data attributes on the tag will be passed in the data or config objects returned in the data from data-stoar.

In your javascript now you can create a new instance of the data-stoar by doing the following:

```javascript
import DataStoar from 'data-stoar'

let pageComponents = new DataStoar();

/* Result from the HTML above
pageComponents [
    {
        "name": "myNewComponent",
        "instances": [
            {
                "id": "1",
                "data": {},
                "config": {
                    "myTestData"  : "Data passed to my component",
                    "myTestData2" : {
                        foo : "BAR",
                        baz : "zing"
                    }
                }
            },
            {
                "id": "2",
                "config": {
                    "myTestData"  : "Data passed to my component",
                    "myTestData2" : {
                        foo : "BAR",
                        baz : "zing"
                    }
                },
                "data": {
                    "mySpecialInfo" : "Component info specific to this instance",
                    "titleInfo" : "The Data Stoar is fantastic",
                    "element"   : <DOM ELEMENT/>
                }
            }
            }
        ]
    },
]
*/
```

## Change Log
### v2.2.1 - 02.13.2018
* Bug fixe for multiple instances of the same component. 

### v2.2.0 - 02.9.2018
* Any extra data attributes on the script tags will now be passed in either the config or the data objects just as they are for html tags.

### v2.1.0 - 01.31.2018
* In the return object I now pass back the dom element that the data-component attribute was tied to when that element is not a script tag. This allows you to have a handle on the DOM element so you can bind to the targeted element.

### v2.0.0 - 01.30.2018 - Breaking Changes
* The data attribute in the instance object is no longer an array. *This is the breaking Change*
* The instance object now returns the config with every instance
* You can now use data attributes to pass data to the data-stoar not just use the json script tag
* Added some more documentation

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