# be-repeated

> A repeating decorator web component.

Latest version **0.0.140** (published 2024-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-repeated
pnpm add be-repeated
yarn add be-repeated
bun add be-repeated
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.140 |
| Published | 2024-08-09 |
| First published | 2021-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web components, web component, custom elements, custom element, loop, repeat |

## Links

- npm: https://www.npmjs.com/package/be-repeated
- Repository: https://github.com/bahrus/be-repeated
- Homepage: https://github.com/bahrus/be-repeated#readme
- Issues: https://github.com/bahrus/be-repeated/issues
- npm.io page: https://npm.io/package/be-repeated

## Dependencies (3)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.201
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.131
- [trans-render](https://npm.io/package/trans-render.md) 0.0.821

## Recent versions

- 0.0.140 (latest) — 2024-08-09
- 0.0.139 — 2024-07-21
- 0.0.138 — 2024-07-14
- 0.0.137 — 2024-07-08
- 0.0.136 — 2024-07-04
- 0.0.135 — 2024-07-02
- 0.0.134 — 2024-06-30
- 0.0.133 — 2024-06-27
- 0.0.132 — 2024-06-12
- 0.0.131 — 2024-06-10
- 0.0.130 — 2024-06-09
- 0.0.129 — 2024-06-04
- 0.0.128 — 2024-06-04
- 0.0.127 — 2024-05-31
- 0.0.126 — 2024-05-27
- … 125 more at https://npm.io/package/be-repeated/versions

## README

# be-repeated (♻️)

## Example 1

```html
<div role="grid" aria-rowcount="100" >
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Position</span>
    </div>
  </div>
  <div role="rowgroup" be-repeated='{
      "startIdx": 2,
      "endIdx": 99,
      "templIdx": 0
    }'>
    <div role="row" aria-rowindex="0">
        <span role="gridcell" itemprop=first></span>
        <span role="gridcell" itemprop=second></span>
        <span role="gridcell" itemprop=third></span>
    </div>
    <div role="row" aria-rowindex="2">
      <span role="gridcell" itemprop=first>Morgan</span>
      <span role="gridcell" itemprop=second>Brian</span>
      <span role="gridcell" itemprop=third>Midfielder</span>
    </div>
    <div role="row" aria-rowindex="3">
      <span role="gridcell" itemprop=first>Abby</span>
      <span role="gridcell" itemprop=second>Dahlkemper</span>
      <span role="gridcell" itemprop=third>Defender</span>
    </div>
    <div role="row" aria-rowindex="4">
      <span role="gridcell" itemprop=first>Ashlyn</span>
      <span role="gridcell" itemprop=second>Harris</span>
      <span role="gridcell" itemprop=third>Goalkeeper</span>
    </div>
  </div>
</div>
```

What be-repeated does:

1.  Finds the element with aria-index=0, creates a template from it.
2.  Appends/deletes clones of the template, updating the aria-rowindex, until the indexes match the range specified.  When finished, raises an event, allowing subscribers to modify content as needed.  It then deletes the item with aria-rowindex="0".
3.  This does not alter server or previously rendered HTML and works around it.

Example 2 in the demo folder shows how we can separate out the JSON attribute into individual attributes.  We will skip that here, in favor of the example below which shows an alternative shorter name that this package provides [support for](https://github.com/bahrus/be-repeated/blob/baseline/%E2%99%BB%EF%B8%8F.ts).

## Example 3 Alternate name and more semantic syntax

```html
<div role="grid" aria-rowcount="100" >
  <div role="rowgroup">
    <div role="row" aria-rowindex="0">
      <span role="columnheader">First Name</span>
      <span role="columnheader">Last Name</span>
      <span role="columnheader">Position</span>
    </div>
  </div>
  <div role="rowgroup" ♻️-start-idx=2 ♻️-end-idx=99 ♻️-templ-idx=0>
    <div role="row" aria-rowindex="0">
        <span role="gridcell" itemprop=first></span>
        <span role="gridcell" itemprop=second></span>
        <span role="gridcell" itemprop=third></span>
    </div>
    <div role="row" aria-rowindex="2">
      <span role="gridcell" itemprop=first>Morgan</span>
      <span role="gridcell" itemprop=second>Brian</span>
      <span role="gridcell" itemprop=third>Midfielder</span>
    </div>
    <div role="row" aria-rowindex="3">
      <span role="gridcell" itemprop=first>Abby</span>
      <span role="gridcell" itemprop=second>Dahlkemper</span>
      <span role="gridcell" itemprop=third>Defender</span>
    </div>
    <div role="row" aria-rowindex="4">
      <span role="gridcell" itemprop=first>Ashlyn</span>
      <span role="gridcell" itemprop=second>Harris</span>
      <span role="gridcell" itemprop=third>Goalkeeper</span>
    </div>
  </div>
</div>
```

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