Nornj
More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.
Install / Use
/learn @joe-sky/NornjREADME
English | 简体中文
Introduction
NornJ(pronounced [ˌnɔ:nˈdʒeɪ]，abbreviated as nj) is a JS/JSX extension solution based on Template Engine.
Documents
Packages
| Package | Badges | | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | nornj | <a href="https://www.npmjs.org/package/nornj"><img src="https://img.shields.io/npm/v/nornj.svg" alt="NPM Version"></a> <a href="https://www.npmjs.org/package/nornj"><img src="https://img.shields.io/npm/dm/nornj.svg" alt="NPM Downloads"></a> <a href="https://bundlephobia.com/result?p=nornj"><img src="https://img.shields.io/bundlephobia/minzip/nornj.svg?style=flat" alt="Minzipped Size"></a> | | nornj-react | <a href="https://www.npmjs.org/package/nornj-react"><img src="https://img.shields.io/npm/v/nornj-react.svg" alt="NPM Version"></a> <a href="https://www.npmjs.org/package/nornj-react"><img src="https://img.shields.io/npm/dm/nornj-react.svg" alt="NPM Downloads"></a> <a href="https://bundlephobia.com/result?p=nornj-react"><img src="https://img.shields.io/bundlephobia/minzip/nornj-react.svg?style=flat" alt="Minzipped Size"></a> | | nornj-loader | <a href="https://www.npmjs.org/package/nornj-loader"><img src="https://img.shields.io/npm/v/nornj-loader.svg" alt="NPM Version"></a> <a href="https://www.npmjs.org/package/nornj-loader"><img src="https://img.shields.io/npm/dm/nornj-loader.svg" alt="NPM Downloads"></a> | | babel-plugin-nornj-in-jsx | <a href="https://www.npmjs.org/package/babel-plugin-nornj-in-jsx"><img src="https://img.shields.io/npm/v/babel-plugin-nornj-in-jsx.svg" alt="NPM Version"></a> <a href="https://www.npmjs.org/package/babel-plugin-nornj-in-jsx"><img src="https://img.shields.io/npm/dm/babel-plugin-nornj-in-jsx.svg" alt="NPM Downloads"></a> | | babel-preset-nornj-with-antd | <a href="https://www.npmjs.org/package/babel-preset-nornj-with-antd"><img src="https://img.shields.io/npm/v/babel-preset-nornj-with-antd.svg" alt="NPM Version"></a> <a href="https://www.npmjs.org/package/babel-preset-nornj-with-antd"><img src="https://img.shields.io/npm/dm/babel-preset-nornj-with-antd.svg" alt="NPM Downloads"></a> |
Overview
<!-- > At present, only JSX API is available in the `v5.x` document. The author is sorting out the latest version of NornJ Template Engine document, which is released recently. -->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 :wink:.
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, 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.
Playground
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"
]
}
Boilerplate projects
Syntax highlight
License
MIT
Related Skills
bluebubbles
337.1kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
slack
337.1kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
83.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
83.1kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
