brieftpl's Introduction

Brief Tpl

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

Usage

From CDN:

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

With NPM:

npm install @briefjs/brieftpl

Example

Basic

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

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

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

const h1 = tags.h1;

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

Work with omi

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');

Recommend Projects