nornj
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.4 • Public • Published

    NornJ

      ____        __   
    /\  __ \     /\ \  
    \ \ \/\ \   _\_\ \ `<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.

    NPM Version License Travis CI Status Codecov NPM Downloads

    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

    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.

    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

    Install

    npm i nornj

    DownloadsWeekly Downloads

    1,208

    Version

    5.3.4

    License

    MIT

    Unpacked Size

    895 kB

    Total Files

    90

    Last publish

    Collaborators

    • joe_sky