Skip to content
/ nornj Public

More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.

License

Notifications You must be signed in to change notification settings

joe-sky/nornj

Repository files navigation

NornJ

NPM Version License Travis CI Status Codecov NPM Downloads Minzipped Size

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 NPM Version NPM Downloads Minzipped Size
nornj-react NPM Version NPM Downloads Minzipped Size
nornj-loader NPM Version NPM Downloads
babel-plugin-nornj-in-jsx NPM Version NPM Downloads
babel-preset-nornj-with-antd NPM Version NPM Downloads

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:
<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

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

About

More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •