English | 简体中文
NornJ
(pronounced [ˌnɔ:nˈdʒeɪ],abbreviated as nj
) is a JS/JSX extension solution based on Template Engine.
Package | Badges |
---|---|
nornj | |
nornj-react | |
nornj-loader | |
babel-plugin-nornj-in-jsx | |
babel-preset-nornj-with-antd |
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 new 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 😉.
- 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, the Template Engine documents are being sorted out and released recently):
const template = html`
<Container>
<ul>
<each of="{todos}">
<if condition="{@index > 5}">
<li>{@item * 2}</li>
<elseif condition="{@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: 0.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
.
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"
]
}
MIT