https://github.com/bahrus/repetir
https://github.com/bahrus/repetir
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bahrus/repetir
- Owner: bahrus
- License: mit
- Created: 2021-03-21T13:03:38.000Z (about 4 years ago)
- Default Branch: baseline
- Last Pushed: 2021-03-21T20:30:50.000Z (about 4 years ago)
- Last Synced: 2025-02-01T10:33:09.137Z (5 months ago)
- Language: TypeScript
- Size: 61.5 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# re-petir
re-petir provides a repeating web component. It extends [i-bid](https://github.com/bahrus/ib-id). Whereas i-bid has [no support for light children](https://github.com/bahrus/ib-id#what-if-i-want-to-repeat-some-web-components-that-require-non-shadow-light-children), re-peter does. It uses github's [template parts library](https://github.com/github/template-parts/) to populate the light children.
## Sample syntax
```html
{{msg}}
- header
- footer
{
"imports":{
"xtal-element/": "../node_modules/xtal-element/",
"trans-render/": "../node_modules/trans-render/",
"ib-id/": "../node_modules/ib-id/",
"@github/": "../node_modules/@github/"
}
}
import 're-petir/re-petir.js';
repetir.list = [
{msg: 'hello 1'},
{msg: 'hello 2'},
{msg: 'hello 3'},
{msg: 'hello 4'}
];
setTimeout(() => {
repetir.list = [
{msg: 'hello 3'},
{msg: 'hello 4'}
];
setTimeout(() => {
repetir.list = [
{msg: 'hello 1'},
{msg: 'hello 2'},
{msg: 'hello 3'},
{msg: 'hello 4'}
];
}, 10000)
}, 10000);
```
## Viewing the component locally
1. Install git
2. Clone or fork repo https://github.com/bahrus/repetir
3. Install node
4. Open command window from cloned location of step 2.
5. Run command "npm run install"
6. Run command "npm run serve"
7. Open browser to http://localhost:3030/demo/dev