-------
```
____ __
/\ __ \ /\ \
\ \ \/\ \ _\_\ \ `
\ \_\ \_\ /\_____\ Hello World!
\/_/\/_/ \/_____/ `();
```
`NornJ`(pronounced [ˌnɔ:nˈdʒeɪ]，abbreviated as `nj`) is a template engine that can works with React, JSX enhancement or alternative tools.
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][npm-url]
[](https://bundlephobia.com/result?p=nornj)
English | [简体中文](https://github.com/joe-sky/nornj/blob/master/README.zh.md)
## Documents
* [NornJ Guide(v5)](https://joe-sky.github.io/nornj-guide/zh)
* [NornJ Guide(v0.4)](https://joe-sky.github.io/nornj-guide-v0.4)
## Introduction
In `React` development, the `JSX` can use almost all the syntax of javascript and it's very flexible. But if we use `NornJ` with `React` and `JSX`, we can do better, because it can gives JSX `template engine` features:
* Support control statements：
```js
{item}
```
* Support directives：
```js
```
* Support filters：
```js
```
* Support custom operators：
```js
```
`NornJ` presets the above `JSX` enhancement syntaxs, and also **supports custom extensions of more syntaxs**. It provides two kinds of similar API: `JSX` and `Tagged templates`, can adapt to the preferences of different users :wink:.
## Basic
* Use NornJ syntaxs in JSX(with [styled-jsx](https://github.com/zeit/styled-jsx))：
```js
class App extends Component {
addTodo = e => {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
};
render({ page }, { todos = [] }) {
return (
5}>
{todo * 2}
10}>
{todo * 3}
);
}
}
```
For above example, combining with the [Babel plugin provided by NornJ](https://github.com/joe-sky/nornj/tree/master/packages/babel-plugin-nornj-in-jsx), it is possible to write various new enhancement syntaxs in JSX.
* Use NornJ tagged templates syntaxs(with [styled-components](https://github.com/styled-components/styled-components))：
```js
const template = html`
5}>
{@item * 2}
10}>
{@item * 3}
`;
const Container = styled.div`
padding: 20px;
font-size: .75rem;
`;
class App extends Component {
addTodo = e => {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
};
render() {
return template({ components: { Container } }, this.state, this);
}
}
```
In the above example, a template function was created using `tagged templates API of NornJ`. In this way, the template can be separated from the component logic code, and it also supports more concise writing than `NornJ JSX API`.
## Playground
### Use it in JSX
* [NornJ playground(codesandbox)](https://codesandbox.io/s/z2nj54r3wx)
### Use tagged templates
* [NornJ playground(codepen)](https://codepen.io/joe_sky/pen/ooPNbj)
## Install
```sh
npm install babel-plugin-nornj-in-jsx #or yarn add babel-plugin-nornj-in-jsx
```
Next, add `nornj-in-jsx` to plugins in your babel configuration:
```js
{
"plugins": [
"nornj-in-jsx"
]
}
```
## Syntax highlight
* [nornj-highlight(vscode)](https://github.com/joe-sky/nornj-highlight)
## License
MIT
[npm-image]: http://img.shields.io/npm/v/nornj.svg
[downloads-image]: http://img.shields.io/npm/dm/nornj.svg
[npm-url]: https://www.npmjs.org/package/nornj
[![NPM Downloads][downloads-image]][npm-url]
[](https://bundlephobia.com/result?p=nornj)
English | [简体中文](https://github.com/joe-sky/nornj/blob/master/README.zh.md)
## Documents
* [NornJ Guide(v5)](https://joe-sky.github.io/nornj-guide/zh)
* [NornJ Guide(v0.4)](https://joe-sky.github.io/nornj-guide-v0.4)
## Introduction
In `React` development, the `JSX` can use almost all the syntax of javascript and it's very flexible. But if we use `NornJ` with `React` and `JSX`, we can do better, because it can gives JSX `template engine` features:
* Support control statements：
```js