# tiny-lit

> Just another JavaScript library for building user interfaces using template literals ## Usage

Latest version **1.4.2** (published 2018-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install tiny-lit
pnpm add tiny-lit
yarn add tiny-lit
bun add tiny-lit
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2018-09-13 |
| First published | 2018-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | alenaksu |
| Maintainers | alenaksu |

## Links

- npm: https://www.npmjs.com/package/tiny-lit
- Repository: https://github.com/alenaksu/tiny-lit
- Homepage: https://github.com/alenaksu/tiny-lit#readme
- Issues: https://github.com/alenaksu/tiny-lit/issues
- npm.io page: https://npm.io/package/tiny-lit

## Recent versions

- 1.4.2 (latest) — 2018-09-13
- 1.0.18 (next) — 2018-03-22
- 1.4.1 — 2018-09-12
- 1.4.0 — 2018-08-02
- 1.3.2 — 2018-07-05
- 1.3.1 — 2018-07-03
- 1.3.0 — 2018-07-03
- 1.2.4 — 2018-05-21
- 1.2.3 — 2018-04-25
- 1.2.2 — 2018-04-25
- 1.2.1 — 2018-04-19
- 1.2.0 — 2018-04-12
- 1.1.3 — 2018-04-11
- 1.1.2 — 2018-04-11
- 1.1.1 — 2018-04-03
- … 19 more at https://npm.io/package/tiny-lit/versions

## README

# Tiny-Lit

Just another JavaScript library for building user interfaces using template literals
## Usage

### Html template
```js
import { html, render } from 'tiny-lit';

const quote = message => html`
    <div>
        <blockquote>
            ${message}
        </blockquote>
    </div>
`;

render(
    quote(
        `
        Neque porro quisquam est 
        qui dolorem ipsum quia dolor sit amet, 
        consectetur, adipisci velit
        `
    ),
    document.body
);
```

### List of templates

```js
import { html, render } from 'tiny-lit';

const listItem = item => (
    html`<li>${item}</li>`.withKey(item)
);

const list = items => (
    html`
        <ul>
            ${items.map(listItem)}
        </ul>
    `
);

render(
    list(['pippo', 'pluto', 'paperino']),
    document.body
);
```

### Custom element

```js
import { Element, html, withElement } from 'tiny-lit';

class Clock extends Element {
    connectedCallback() {
        setInterval(() => 
            this.setState({
                time: new Date().toLocaleTimeString()
            }), 1000);
    }

    getTemplate() {
        return html`<div>${this.state.time}</div>`;
    }
}
customElement.define('my-clock', Clock);

class Select extends withElement(HTMLSelectElement) {
    getTemplate() {
        return html`
            ${this.state.options.map( 
                option => html`
                    <option value=${option.value}>
                        ${option.label}
                    </option>`.withKey(option.value)
            )}
        `;
    }
}
customElement.define('my-select', Select);
```

```html
<my-clock></my-clock>
```

#### Observed props

All observed props will trigger an update when they change

```js
import { Element, html, withProps } from 'tiny-lit';

class Clock extends withProps(Element) {
    title = 'My clock';

    static get properties() {
        return {
            title: String
        };
    }

    connectedCallback() {
        setInterval(() => 
            this.setState({
                time: new Date().toLocaleTimeString()
            }), 1000);
    }

    getTemplate() {
        return html`
            <h1>${this.title}</h1>
            <div>${this.state.time}</div>
        `;
    }
}
customElement.define('my-clock', Clock);
```

```html
<my-clock id="clock"></my-clock>

<script>
    const clock = document.querySelector('#clock');
    clock.title = 'The clock';
</script>
```

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