# brief-tpl

> The JSX alternative template for declarative JavaScript frameworks.

Latest version **0.2.1** (published 2018-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install brief-tpl
pnpm add brief-tpl
yarn add brief-tpl
bun add brief-tpl
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2018-12-24 |
| First published | 2018-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | akira-cn |
| Maintainers | akira_cn |

## Links

- npm: https://www.npmjs.com/package/brief-tpl
- npm.io page: https://npm.io/package/brief-tpl

## Recent versions

- 0.2.1 (latest) — 2018-12-24
- 0.2.0 — 2018-12-23
- 0.1.0 — 2018-12-23

## README

# Brief Tpl

The JSX alternative template for declarative JavaScript frameworks, **no compilation is necessary**.

## Usage

From CDN:

```html
<script src="https://unpkg.com/brieftpl/dist/brieftpl.min.js"></script>
```

With NPM:

```bash
npm install brief-tpl
```

## Example

### Basic

```js
const {div, span, button} = brieftpl.tags;

document.body.innerHTML = div({id: 'main'})`
  ${span`Hello, world!`}
  ${button({onclick: e => alert('hi!')})`Click Me`}
`;
```

### Work with [preact](https://github.com/developit/preact)

```js
const {h, render} = preact;
const {adapter, tags} = brieftpl;
adapter.createElement = h;

const {div, span, button} = tags;

render(div({id: 'foo'})`
  ${span`Hello, world!`}
  ${button({onClick: e => alert('hi!')})`Click Me`}
`, document.body);
```

### Work with react(https://github.com/facebook/react)

```js
const {adapter, tags} = brieftpl;
adapter.createElement = React.createElement;

const h1 = tags.h1;

ReactDOM.render(
  h1`Hello, world!`,
  document.body
);
```

### Work with [omi](https://github.com/Tencent/omi)

```js
const {WeElement, h, render, define} = Omi;
const {adapter, tags, tagged} = brieftpl;
adapter.createElement = h;

const {button} = tags;

define('like-button', class extends WeElement {
  install() {
    this.data = {liked: false};
  }

  render() {
    if(this.data.liked) {
      return 'You liked this.';
    }
    return button({
      onClick: () => {
        this.data.liked = true;
        this.update();
      },
    })`
      Like
    `;
  }
});

const LikeButton = tagged('like-button');

render(LikeButton``, 'body');
```

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