____ __
/\ __ \ /\ \
\ \ \/\ \ _\_\ \ `<html>
\ \_\ \_\ /\_____\ Hello World!
\/_/\/_/ \/_____/ </html>`();
NornJ
(pronounced [ˌnɔ:nˈdʒeɪ],abbreviated as nj
) is a template engine that can works with React, JSX enhancement or alternative tools.
English | 简体中文
Documents
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:
<Each of={[1, 2, 3]}><i>{item}</i></Each>
- Support directives:
<img n-show={false} />
- Support filters:
<button>{n`foo | upperFirst`}</button>
- Support custom operators:
<input value={n`(1 .. 100).join('-')`} />
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
Basic
- Use NornJ syntaxs in JSX(with styled-jsx):
class App extends Component {
addTodo = e => {
const { todos = [] } = this.state;
this.setState({ todos: todos.concat(`Item ${todos.length}`) });
};
render({ page }, { todos = [] }) {
return (
<div className="app">
<style jsx>`
.app {
padding: 20px;
font-size: .75rem;
}
`</style>
<ul>
<Each of={todos} item="todo">
<If condition={index > 5}>
<li>{todo * 2}</li>
<Elseif condition={index > 10}>
<li>{todo * 3}</li>
</Elseif>
</If>
</Each>
</ul>
<button n-show={todos.length > 0} onClick={this.addTodo}>Add Todo</button>
</div>
);
}
}
For above example, combining with the Babel plugin provided by NornJ, it is possible to write various new enhancement syntaxs in JSX.
- Use NornJ tagged templates syntaxs(with styled-components):
const template = html`
<Container>
<ul>
<each of={todos}>
<if {@index > 5}>
<li>{@item * 2}</li>
<elseif {@index > 10}>
<li>{@item * 3}</li>
</elseif>
</if>
</each>
</ul>
<button n-show="{todos.length > 0}" :onClick="addTodo">Add Todo</button>
</Container>
`;
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
Use tagged templates
Install
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:
{
"plugins": [
"nornj-in-jsx"
]
}
Syntax highlight
License
MIT