# jsor

> jsor is a fast and very small JavaScript library with only 2.0 KB

Latest version **1.0.16** (published 2019-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsor
pnpm add jsor
yarn add jsor
bun add jsor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2019-08-29 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Carlos De Los Santos |
| Maintainers | itoxdls |
| Keywords | preprocesador, javascript, sintaxis, html, javascript, js, json, html |

## Links

- npm: https://www.npmjs.com/package/jsor
- Repository: https://github.com/itoxdls/jshtml
- Homepage: https://github.com/itoxdls/jshtml#readme
- Issues: https://github.com/itoxdls/jshtml/issues
- npm.io page: https://npm.io/package/jsor

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.16 (latest) — 2019-08-29
- 1.0.15 — 2019-08-29
- 1.0.14 — 2019-08-29
- 1.0.13 — 2019-08-29
- 1.0.12 — 2019-08-29
- 1.0.11 — 2019-08-29
- 1.0.10 — 2018-11-20
- 1.0.9 — 2018-11-20
- 1.0.8 — 2018-11-20
- 1.0.7 — 2018-11-20
- 1.0.6 — 2018-11-19
- 1.0.5 — 2018-11-15
- 1.0.4 — 2018-11-15
- 1.0.3 — 2018-11-15
- 1.0.2 — 2018-11-15
- … 2 more at https://npm.io/package/jsor/versions

## README

# jsor

> jsor is a fast and very small JavaScript library with only 2.0 KB.

It helps convert javascript objects into HTML documents, this makes the code cleaner, clearer and more readable, the programming is simpler, easier and more reusable, it is compatible with most browsers since it uses native javascript.

If you are new to jsor, we recommend that you take a look at the information below.

# Browser
Script tag
```javascript
<script src="https://unpkg.com/jsor@1.0.4/dist/jsor.min.js"></script>
```

# Node
To include jsor in Node, first install with npm.
```javascript
$ npm install jsor
```

# Example

```javascript
import JSOR from 'jsor';
 
console.log(
    JSOR.render({tag: 'div', id:1, className: 'my-class', childNodes: [
      {tag: 'p', innerHTML:'First element'},
      {tag: 'p', innerHTML:'Second element'}
    ]})
);

/* logs:
<div id="1" class="my-class">
  <p>First element</p>
  <p>Second element</p>
</div>
*/
```

# Example backend data

```javascript
import JSOR from 'jsor';

//data from the backend
var data = '{"tag":"div","className":"my-class","id":"1","childNodes":[{"tag":"p","innerHTML":"First element"},{"tag":"p","innerHTML":"Second element"}]}';

console.log(
    JSOR.render(JSON.parse(data))
);

/* logs:
<div class="my-class" id="1">
  <p>First element</p>
  <p>Second element</p>
</div>
*/
```

# Example each data

```javascript
import JSOR from 'jsor';

var data = [{name: 'First element'}, {name: 'Second element'}]
 
console.log(
    JSOR.render({tag: 'div', className: 'container', childNodes: data.map(function (e) {
      return {tag:'p', innerHTML:e.name};
    })})
);

/* logs:
<div class="container">
  <p>First element</p>
  <p>Second element</p>
</div>
*/
```

# Simple example, hidden element

```javascript
import JSOR from 'jsor';

let enabled = false;

console.log(
    JSOR.render({tag: 'div', id:1, className: 'my-class', childNodes: [
      !enabled || {tag: 'p', innerHTML:'First element'},
      {tag: 'p', innerHTML:'Second element', style:{display:enabled || 'none'}},
      {tag: 'p', innerHTML:'Third element', className:enabled || 'hidde'}
    ]})
);

/* logs:
<div id="1" class="my-class">
  <p style="display: none;">Second element</p>
  <p class="hidde">Third element</p>
</div>
*/
```

# Separate by components

```javascript
const FirstElement = (props) => {
  return {tag: 'div', onClick: props.handleChange, childNodes: [
    {tag: 'h1', innerHTML: 'First element'}
  ]};
};

const SecondElement = (props) => {
  return {tag: 'div', onClick: props.handleChange, childNodes: [
    {tag: 'h1', innerHTML: 'Second element'}
  ]};
};

class Parent {
  constructor(props) {
    this.props = props;
  }
  handleChange(event) {
    console.log(event.target.innerHTML);
  }
  render() {
    return {tag: 'div', className: 'btn', style: {color: '#999'}, id: 'parent', childNodes: [
      {tag: FirstElement, handleChange: this.handleChange},
      {tag: SecondElement, handleChange: this.handleChange},
      this.props.childNodes
    ]};
  }
}

console.log(
  JSOR.render({tag: Parent, hide: true, childNodes: [
    {tag: 'div', childNodes: [
      {tag: 'h1', innerHTML: 'Third element'}
    ]}
  ]})
);

/* logs:
<div class="btn" id="parent" style="color: rgb(153, 153, 153);">
  <div><h1>First element</h1></div>
  <div><h1>Second element</h1></div>
  <div><div><h1>Third element</h1></div></div>
</div>
*/
```

# Extend Components

```javascript
class Parent extends JSOR.Component {
  constructor(props) {
    super(props);
    this.state = {
        running:true
    };
    this.handleChangeStop = this.handleChangeStop.bind(this);
  }
  handleChangeStop() {
    this.setState({
        running:false
    })
  }
  render() {
    return {tag: 'div', childNodes: [
      {tag: 'span', handleChangeStop: this.handleChangeStop, innerHTML:'[Stop]'},
      {tag: 'div', innerHTML: this.state.running ? 'Loading...' : ''}
    ]};
  }
}

console.log(
  JSOR.render({tag: Parent})
);

/* logs:
<div>
  <span>[Stop]</div>
  <div>Loading...</div>
</div>
*/
```

---
_Source: https://npm.io/package/jsor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._