roostjs

json to html parser

roost can run server side or client side, it won't need extra dependencies either...

usage

// CJS
const roost = require("roostjs");

// ESM
import roost from "roostjs";

roost.convert({
    "":{
        child:"text!"
    }
})
//text!

roost.convert({
    "h1-0":{
        child:{
            "i-0":{
                child:"text!"
            }
        }
    }
})
//<h1><i>text</i></h1>

roost.convert({
    "-0":{
        child:"one!"
    },
    "br-0":{
        closed:true
    },
    "-1":{
        child:"two!"
    }
})
//one!<br/>two!

JSX?

it can work with JSX but not exactly like React as there aren't any states, hooks...

babel.config.json:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "classic",
        "pragma": "roost.convertJSX",
        "pragmaFrag": "roost.convertJSX"
      }
    ]
  ]
}

the code might work but not in the exact way you would do in React

(there's no useState, hooks... you would have to reinvent the wheel for that)

// (taken from test2 in test/)
// original reference (for comparison)
console.log(roost.convert({
    "h1-0":{
        child:{
            "-0":{
                child:"test 2!"
            },
            "br-0":{closed:true},
            "-1":{
                child:"test 1!"
            },
        }
    }
}))

/*******************************/

// the JSX version
console.log(roost.convert(
    <h1>
        test 2!
        <br />
        test 1!
    </h1>
))

// after a babel transpile of the JSX file
console.log(roost.convert(roost.convertJSX("h1", null, "test 2!", roost.convertJSX("br", null), "test 1!")));