# jsx-template

> Static template engine based on the JSX Specification

Latest version **0.9.0** (published 2016-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsx-template
pnpm add jsx-template
yarn add jsx-template
bun add jsx-template
```

## 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.9.0 |
| Published | 2016-11-27 |
| First published | 2016-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Iddan Aharonson |
| Maintainers | iddan |

## Links

- npm: https://www.npmjs.com/package/jsx-template
- Repository: https://github.com/aniddan/jsx-template
- Homepage: https://github.com/aniddan/jsx-template#readme
- Issues: https://github.com/aniddan/jsx-template/issues
- npm.io page: https://npm.io/package/jsx-template

## Recent versions

- 0.9.0 (latest) — 2016-11-27
- 0.8.1 — 2016-11-26
- 0.8.0 — 2016-11-26

## README

# JSX Template
## Static template engine based on the JSX Specification

```JavaScript
import JSX from 'jsx-template';

JSX.compile(
    '<Header><h1>{title}</h1></Header>',
    {
        title: 'JSX Templates are Awesome'
    },
    {
        Header: '<div class="header">{children}</div>'
    }
); === '<div class="header"><h1>JSX Templating Engine is Cool</h1></div>';
```

## Table of contents

* [Motivation](#motivation)
* [Prior Art](#prior-art)
* [Syntax Nodes](#syntax-notes)
* [API](#api)
* [Todo](#todo)

## Motivation

Since the launch of React.js a many developers in the JavaScript community have been exposed to the JSX synatx which React uses to declare it's elements.

Meanwhile those developers who also may build static pages (frontend or backend) can't just use the JSX syntax for templating as it requires the whole use of React.

JSX Template is intended to bring a solution for developers who are familiar with the syntax and would like to use it for static templates.

The template engine borrows the props logic of well known templating engines like {{ mustache }}. The components registeration idea was inspired by Handlebars Partials.

## Prior Art

* [The JSX Specification][JSX]
* [React][React]
* [{{ mustache }}][mustache]
* [Handlebars][Handlebars]

## Syntax notes

*  A component can not invoke itself as it creates an endless recursion. 

## API

### JSX.compile()

```JavaScript
JSX.compile(template, props, components);
```

Compile JSX templates and props into a HTML string.

#### Parameters

* **template** - JSX template string
* **props** - *Optional*, Props to use with the template defaults to an empty object.
* **components** - *Optional*, Components to use with the template defaults to the components registered. 

### JSX.register()

```JavaScript
JSX.register(name || {name: component}, component);
```

Register components (partials) to use within your JSX templates.

* **name** - Component name to be referenced in the template.
* **component** - Component JSX template.
* **{name:compoennt}** - A map of component names and JSX templates.

## Todo

* formal testing

[JSX]: https://facebook.github.io/jsx
[React]: https://facebook.github.io/react
[mustache]: https://mustache.github.io
[Handlebars]: https://handlebarsjs.com

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