NJSX

Use jsx in your web projects without React in a new and easy way!!

Table of Contents

• Why?
• Installation
• Usage
• Examples

Why?

I am really a fan of jsx syntax but i wanted to use jsx without react. So NJSX (New-JSX) has made.

JSX Syntax is really useful and handy when you are making template element in your web projects. You can do it in react very easily. But using njsx you can do it in no-react or pure html js projects.

Here is some example of N-JSX.

Using in Javascript DOM (Hard to read when component is big)

function userProfile(name, img_url) {
	//root container
	let container = document.createElement('div')
	container.setAttribute('class', 'user-profile')
	//profile pic element
	let profile = new Image()
	profile.src = img_url
	profile.height = 28
	profile.width = 28
	container.appendChild(profile)
	//name element
	let title = document.createElement('span')
	title.setAttribute('class', 'title')
	container.appendChild(title)
	document.body.appendChild(container)
}

userProfile("Kioma", "https://xyz.com/img.png")

Using template string (Unsafe in may case)

function userProfile(name, img_url) {
	//root container
	let container = document.createElement('div')
	container.setAttribute('class', 'user-profile')
	container.innerHTML = `
	<img src="${img_url}" height="28" width="28"/>
	<span class="title">${name}</span>
	`
	document.body.appendChild(container)
}

userProfile("Kioma", "https://xyz.com/img.png")

Using n-jsx (The easy and more readable way)

function userProfile(name, img_url) {
	//root container
	let container = <div class="user-profile">
		<img src={img_url} width="28" height="28"/>
		<span class="title">{name}</span>
	</div>
	document.body.appendChild(container)
}

userProfile("Kioma", "https://xyz.com/img.png")

Transpiled javascript form n-jsx

function userProfile(name, img_url) {
	let container = new (function () {
		this.node = document.createElement("div");
		this.node.class = "user-profile";
		this.node.append("\n\t\t");
		this.node.append(new (function () {
			this.node = document.createElement("img");
			this.node.src = img_url;
			this.node.width = "28";
			this.node.height = "28";
			return this.node;
		})());
		this.node.append("\n\t\t");
		this.node.append(new (function () {
			this.node = document.createElement("span");
			this.node.class = "title";
			this.node.append(name);
			return this.node;
		})());
		this.node.append("\n\t");
		return this.node;
	})();
	document.body.appendChild(container);
}
userProfile("Kioma", "https://xyz.com/img.png");

Installation

You can install this package via npm or yarn:

Usage

npm install node-njsx
# or
yarn add node-njsx

Using in projects

const njsx = require("node-njsx")

let my_jsx_code = `
let div = <div id="my_id">{new Date().toString()}</div>
document.body.append(div)
`
let js_code = njsx.toJS(my_jsx_code) // transpile into js code
let js_code = njsx.toAST(my_jsx_code) // get jsx ast generated by acorn.js
let js_code = njsx.toJSAST(my_jsx_code) // get transpiled javascipt ast 

Using the CLI

Install :

npm install node-njsx -g

Usages :

Transpile into js

njsx compile [filename] [output-filename] 

Transpile into js when changes happen.

njsx watch [filename] [output-filename]

Watch multiple files to transpile

njsx watch-more [file 1] [file 2] [file n] 

Examples

Check out the demo folder!