@olton/renderjs NPM

Welcome to RenderJS

RenderJS - is a library to create a site in pure JavaScript. The one contains functions to create html tags. You can use RenderJS with Webpack, Parcel or other builders or directly for using in the browser with pre-build version.

Using with Webpack, Parcel, ...

Create a simple index:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

Add structure in model, and render it:

// model.js
import {h1, section, header, main, footer, p} from "./src"

export const articleModel = article([
    h1("This is a title"),
    section([
        p(`
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Accusamus aliquam culpa debitis distinctio nesciunt?
            Aliquid animi atque blanditiis, explicabo facilis magnam
            modi nihil nostrum nulla perspiciatis qui recusandae sed, vero!
        `)
    ])
])

export const model = [
    header('header'),
    main([articleModel]),
    footer('footer')
]

// index.js
import {articleModel, model} from "./model"
import render from "../src"

render(model, document.querySelector('#app'));

Browser mode

Also, you can use render directly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <script src="../lib/render.min.js"></script>
    <script>
        (function(){
            html.registerGlobal();

            const articleModel = article([
                h1("This is a title"),
                section([
                    p(`
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Accusamus aliquam culpa debitis distinctio nesciunt?
                        Aliquid animi atque blanditiis, explicabo facilis magnam
                        modi nihil nostrum nulla perspiciatis qui recusandae sed, vero!
                    `)
                ])
            ])

            const model = [
                header('header'),
                main([articleModel]),
                footer('footer')
            ]

            render(model, document.querySelector('#app'));

            html.restoreGlobal();
        })()
    </script>
</body>
</html>

Extend standard HTML components for any libs and frameworks

You can create extensions for any libs and frameworks. For example Metro4-RenderJS

Create a wrapper for Metro 4 accordion:

import {Div} from "@olton/renderjs"
import {addRole, addClasses} from "../helpers"; // Funcs inside a Metro4-RenderJS

export class Accordion extends Div {
    constructor(children = '', options = {}) {
        super(children, addRole('accordion', options))
    }
}

export const accordion = (children = '', options = {}) => new Accordion(children, options)

export class AccordionFrame extends Div {
    constructor(title = '', children = '', options = {}) {
        const className = addClasses('frame', options.className)
        super(children, {...options, className})
        this.title = title
    }

    template(content){
        return `
            <${this.tag} ${this.attributes().join(" ")} ${this.events}>
                <div class="heading">${this.title}</div>
                <div class="content">${content}</div>
            </${this.tag}>
        `
    }
}

export const accordionFrame = (title, children, options) => new AccordionFrame(title, children, options)

RenderJS - set of HTML tags as js functions

RenderJS contains different functions to create HTML tags. All functions divided into two type: Tag - can contain a children, TagEmpty - can't contain a children. For example:

section(...) correspond to HTML tag <section>...</section>. This tag can contain children inside.
br(...) correspond to <br>. This tag can't contain children.

Supported tags

RenderJS supports almost all HTML tags.

TagEmpty

area()
img(), image()
br()
frame()
hr()
input()
source()
col()
colgroup()
track()
wbr()

Render

THe main function - render(mode, mountPoint). This function receive model as array of HTML tag functions and element where model will be added.

import {render} from "./src";

const model = [/*...*/]

render(model, document.body)

Model

RenderJS use model as array to definition HTML structure. You can define sub-model to create reusable components.

import {main, header, footer} from "./src"

const model = [
    header(),
    main(),
    footer()
]

Function arguments

All functions inherited from a TagEmpty receive one argument as object - options = {...}. A functions inherited from Tag receive two arguments, and more. For example: