Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joe-sky/nornj
More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.
https://github.com/joe-sky/nornj
babel-plugin jsx nornj react template-engine
Last synced: 2 days ago
JSON representation
More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.
- Host: GitHub
- URL: https://github.com/joe-sky/nornj
- Owner: joe-sky
- License: mit
- Created: 2016-01-18T11:07:08.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-08-04T09:16:13.000Z (over 1 year ago)
- Last Synced: 2024-12-31T21:05:29.731Z (10 days ago)
- Topics: babel-plugin, jsx, nornj, react, template-engine
- Language: TypeScript
- Homepage: https://joe-sky.github.io/nornj
- Size: 18.2 MB
- Stars: 101
- Watchers: 13
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
English | [简体中文](https://github.com/joe-sky/nornj/blob/master/README.zh.md)
## Introduction
`NornJ`(pronounced [ˌnɔ:nˈdʒeɪ]，abbreviated as `nj`) is a JS/JSX extension solution based on Template Engine.
## Documents
- [NornJ Guide(github.io)](https://joe-sky.github.io/nornj)
- [NornJ Guide(gitee.io)](https://joe-sky.gitee.io/nornj)
## Packages
| Package | Badges |
| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [nornj](https://github.com/joe-sky/nornj/tree/master/packages/nornj) | 
|
| [nornj-react](https://github.com/joe-sky/nornj/tree/master/packages/nornj-react) | 
|
| [nornj-loader](https://github.com/joe-sky/nornj/tree/master/packages/nornj-loader) | 
|
| [babel-plugin-nornj-in-jsx](https://github.com/joe-sky/nornj/tree/master/packages/babel-plugin-nornj-in-jsx) | 
|
| [babel-preset-nornj-with-antd](https://github.com/joe-sky/nornj/tree/master/packages/babel-preset-nornj-with-antd) | 
|
## Overview
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：
```js
{item}
```
- Support directives：
```js
![]()
```
- Support filters：
```js
{n`foo | upperFirst`}
```
- 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 (
`
.app {
padding: 20px;
font-size: .75rem;
}
`
5}>
- {todo * 2}
10}>
- {todo * 3}
0} onClick={this.addTodo}>Add Todo
);
}
}
```
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), the Template Engine documents are being sorted out and released recently)：
```js
const template = html`
- {@item * 2}
- {@item * 3}
Add Todo
`;
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
- [nornj-antd-v4-demo(Codesandbox)](https://codesandbox.io/s/nostalgic-driscoll-t8kty)
## 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"
]
}
```
## Boilerplate projects
- [nornj-antd-v4-demo](https://github.com/joe-sky/nornj-antd-v4-demo)
- [nornj-react-vite-demo](https://github.com/joe-sky/nornj-react-vite-demo)
## Syntax highlight
- [nornj-highlight(vscode)](https://github.com/joe-sky/nornj-highlight)
## License
MIT