{"id":15044810,"url":"https://github.com/joe-sky/nornj","last_synced_at":"2025-10-19T02:18:38.290Z","repository":{"id":3812020,"uuid":"49871406","full_name":"joe-sky/nornj","owner":"joe-sky","description":"More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.","archived":false,"fork":false,"pushed_at":"2023-08-04T09:16:13.000Z","size":19043,"stargazers_count":101,"open_issues_count":2,"forks_count":13,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-13T04:05:40.432Z","etag":null,"topics":["babel-plugin","jsx","nornj","react","template-engine"],"latest_commit_sha":null,"homepage":"https://joe-sky.github.io/nornj","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joe-sky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-18T11:07:08.000Z","updated_at":"2024-05-21T10:18:17.000Z","dependencies_parsed_at":"2024-06-18T17:04:32.297Z","dependency_job_id":"471ee227-e22b-4eec-9ca1-a01bf9e7cf58","html_url":"https://github.com/joe-sky/nornj","commit_stats":{"total_commits":1193,"total_committers":8,"mean_commits":149.125,"dds":0.1357921207041073,"last_synced_commit":"0249d4a4b8d2006e510fb8e94ae68406526ed2b1"},"previous_names":[],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-sky%2Fnornj","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-sky%2Fnornj/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-sky%2Fnornj/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joe-sky%2Fnornj/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joe-sky","download_url":"https://codeload.github.com/joe-sky/nornj/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661707,"owners_count":21141450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","jsx","nornj","react","template-engine"],"created_at":"2024-09-24T20:51:04.532Z","updated_at":"2025-10-19T02:18:33.241Z","avatar_url":"https://github.com/joe-sky.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://joe-sky.github.io/nornj/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg width=\"240\" src=\"https://joe-sky.github.io/nornj/images/nornj.png\" alt=\"NornJ\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/nornj\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/nornj.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/nornj\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/nornj.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/joe-sky/nornj\"\u003e\u003cimg src=\"https://travis-ci.org/joe-sky/nornj.svg?branch=master\" alt=\"Travis CI Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/joe-sky/nornj\"\u003e\u003cimg src=\"https://codecov.io/gh/joe-sky/nornj/branch/master/graph/badge.svg\" alt=\"Codecov\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/nornj\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/nornj.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=nornj\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/nornj@next.svg?style=flat\" alt=\"Minzipped Size\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nEnglish | [简体中文](https://github.com/joe-sky/nornj/blob/master/README.zh.md)\n\n## Introduction\n\n`NornJ`(pronounced [ˌnɔ:nˈdʒeɪ]，abbreviated as `nj`) is a JS/JSX extension solution based on Template Engine.\n\n## Documents\n\n- [NornJ Guide(github.io)](https://joe-sky.github.io/nornj)\n- [NornJ Guide(gitee.io)](https://joe-sky.gitee.io/nornj)\n\n## Packages\n\n| Package                                                                                                            | Badges                                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [nornj](https://github.com/joe-sky/nornj/tree/master/packages/nornj)                                               | \u003ca href=\"https://www.npmjs.org/package/nornj\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/nornj.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.org/package/nornj\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/nornj.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e \u003ca href=\"https://bundlephobia.com/result?p=nornj\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/nornj.svg?style=flat\" alt=\"Minzipped Size\"\u003e\u003c/a\u003e                                     |\n| [nornj-react](https://github.com/joe-sky/nornj/tree/master/packages/nornj-react)                                   | \u003ca href=\"https://www.npmjs.org/package/nornj-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/nornj-react.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.org/package/nornj-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/nornj-react.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e \u003ca href=\"https://bundlephobia.com/result?p=nornj-react\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/nornj-react.svg?style=flat\" alt=\"Minzipped Size\"\u003e\u003c/a\u003e |\n| [nornj-loader](https://github.com/joe-sky/nornj/tree/master/packages/nornj-loader)                                 | \u003ca href=\"https://www.npmjs.org/package/nornj-loader\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/nornj-loader.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.org/package/nornj-loader\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/nornj-loader.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e                                                                                                                                                                |\n| [babel-plugin-nornj-in-jsx](https://github.com/joe-sky/nornj/tree/master/packages/babel-plugin-nornj-in-jsx)       | \u003ca href=\"https://www.npmjs.org/package/babel-plugin-nornj-in-jsx\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/babel-plugin-nornj-in-jsx.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.org/package/babel-plugin-nornj-in-jsx\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/babel-plugin-nornj-in-jsx.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e                                                                                                            |\n| [babel-preset-nornj-with-antd](https://github.com/joe-sky/nornj/tree/master/packages/babel-preset-nornj-with-antd) | \u003ca href=\"https://www.npmjs.org/package/babel-preset-nornj-with-antd\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/babel-preset-nornj-with-antd.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.org/package/babel-preset-nornj-with-antd\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/babel-preset-nornj-with-antd.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e                                                                                                |\n\n## Overview\n\n\u003c!-- \u003e 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. --\u003e\n\nIn `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:\n\n- Support control statements：\n\n```js\n\u003ceach of={[1, 2, 3]}\u003e\n  \u003ci\u003e{item}\u003c/i\u003e\n\u003c/each\u003e\n```\n\n- Support directives：\n\n```js\n\u003cimg n-show={false} /\u003e\n```\n\n- Support filters：\n\n```js\n\u003cbutton\u003e{n`foo | upperFirst`}\u003c/button\u003e\n```\n\n- Support custom operators：\n\n```js\n\u003cinput value={n`(1 .. 100).join('-')`} /\u003e\n```\n\n`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:.\n\n## Basic\n\n- Use NornJ syntaxs in JSX(with [styled-jsx](https://github.com/zeit/styled-jsx))：\n\n```js\nclass App extends Component {\n  addTodo = e =\u003e {\n    const { todos = [] } = this.state;\n    this.setState({ todos: todos.concat(`Item ${todos.length}`) });\n  };\n\n  render({ page }, { todos = [] }) {\n    return (\n      \u003cdiv className=\"app\"\u003e\n        \u003cstyle jsx\u003e`\n          .app {\n            padding: 20px;\n            font-size: .75rem;\n          }\n        `\u003c/style\u003e\n        \u003cul\u003e\n          \u003ceach of={todos} item=\"todo\"\u003e\n            \u003cif condition={index \u003e 5}\u003e\n              \u003cli\u003e{todo * 2}\u003c/li\u003e\n              \u003celseif condition={index \u003e 10}\u003e\n                \u003cli\u003e{todo * 3}\u003c/li\u003e\n              \u003c/elseif\u003e\n            \u003c/if\u003e\n          \u003c/each\u003e\n        \u003c/ul\u003e\n        \u003cbutton n-show={todos.length \u003e 0} onClick={this.addTodo}\u003eAdd Todo\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nFor 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.\n\n- 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)：\n\n```js\nconst template = html`\n  \u003cContainer\u003e\n    \u003cul\u003e\n      \u003ceach of=\"{todos}\"\u003e\n        \u003cif condition=\"{@index \u003e 5}\"\u003e\n          \u003cli\u003e{@item * 2}\u003c/li\u003e\n          \u003celseif condition=\"{@index \u003e 10}\"\u003e\n            \u003cli\u003e{@item * 3}\u003c/li\u003e\n          \u003c/elseif\u003e\n        \u003c/if\u003e\n      \u003c/each\u003e\n    \u003c/ul\u003e\n    \u003cbutton n-show=\"{todos.length \u003e 0}\" :onClick=\"addTodo\"\u003eAdd Todo\u003c/button\u003e\n  \u003c/Container\u003e\n`;\n\nconst Container = styled.div`\n  padding: 20px;\n  font-size: 0.75rem;\n`;\n\nclass App extends Component {\n  addTodo = e =\u003e {\n    const { todos = [] } = this.state;\n    this.setState({ todos: todos.concat(`Item ${todos.length}`) });\n  };\n\n  render() {\n    return template({ components: { Container } }, this.state, this);\n  }\n}\n```\n\nIn 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`.\n\n## Playground\n\n- [nornj-antd-v4-demo(Codesandbox)](https://codesandbox.io/s/nostalgic-driscoll-t8kty)\n\n## Install\n\n```sh\nnpm install babel-plugin-nornj-in-jsx  #or yarn add babel-plugin-nornj-in-jsx\n```\n\nNext, add `nornj-in-jsx` to plugins in your babel configuration:\n\n```js\n{\n  \"plugins\": [\n    \"nornj-in-jsx\"\n  ]\n}\n```\n\n## Boilerplate projects\n\n- [nornj-antd-v4-demo](https://github.com/joe-sky/nornj-antd-v4-demo)\n- [nornj-react-vite-demo](https://github.com/joe-sky/nornj-react-vite-demo)\n\n## Syntax highlight\n\n- [nornj-highlight(vscode)](https://github.com/joe-sky/nornj-highlight)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-sky%2Fnornj","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoe-sky%2Fnornj","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoe-sky%2Fnornj/lists"}