NornJ logo

  ____        __   
/\  __ \     /\ \  
\ \ \/\ \   _\_\ \ `<html>
 \ \_\ \_\ /\_____\   Hello World!
  \/_/\/_/ \/_____/ </html>`();

NornJ(读音[ˈnɔ:ndʒeɪ],简称nj)是一个可以同React一起工作的模板引擎,JSX的增强或替代工具

NPM Version License Travis CI Status Codecov NPM Downloads

概述

ReactJSX几乎可以使用javascript的全部语法且非常灵活,可配合babel适应各种复杂的使用场景。但是,使用NornJ配合React开发还能做得更好,因为它能给JSX带来模板引擎的特性:

  • 支持流程控制语法:
<each of={[1, 2, 3]}><i>{item}</i></each>
  • 支持指令语法:
<img n-show={false} />
  • 支持过滤器语法:
<button>{n`${foo} | capitalize`}</button>
  • 支持自定义运算符:
<input value={n`(1 .. 100).join('-')`} />

NornJ不仅有预置的上述几类可增强JSX的语法,并且还实现了支持用户扩展更多的语法NornJ还同时提供了JSXtagged templates两套几乎相同的语法API,以适应不同用户的口味 :wink:

基本示例

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>
    );
  }
}

如上例,配合NornJ提供的配套babel插件,便可以在JSX中编写各种新的增强语法。

const template = nj`
  <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);
  }
}

上例中使用了NornJtagged templates API创建了一个模板函数,它可以做到与React组件的逻辑代码分离,并且还能支持比JSX API更加简练的写法。

在线演示地址

使用JSX

使用tagged templates

安装

npm install babel-plugin-nornj-in-jsx@next  #or yarn add babel-plugin-nornj-in-jsx@next

然后配置.babelrc:

{
  "plugins": [
    "nornj-in-jsx"
  ]
}

示例项目

相关项目及工具

语法高亮插件

浏览器支持

  • 可支持所有现代浏览器以及Internet Explorer 9+。

License

MIT

results matching ""

    No results matching ""