Objective Rendering

Objective Rendering simplifies your interactions with the DOM by rendering elements based on objects you define.

Installation

CDN (reccomended)

<script src="https://unpkg.com/[email protected]/render.js"></script>
NPM not reccomended

Implementation

To implement, call the render() function. It takes four arguments: | name | type | required or default | description | | --- | --- | --- | --- | | contents | array | required | The objects to render. See below for how to define. | | parent | DOM element object | required | the parent element to render within | | clear | boolean | default: true | If clear is true, all of parent's children will be cleared before rendering | documentCtx | object | default: document | Reference to the document object. No need to change as long as you are using CDN

render() returns an object with references to some DOM elements. See refName below for how to get an element included in this object.

The contents array

This is an array of element objects. The element objects can be either DOM element objects or user-defined objects. User-defined objects can have any of the properties below. The type property is required, all others are optional. | name | type | description | | --- | --- | --- | | type | string | The HTML element type, same as you would use in document.createElement()| | style | object | CSS styling, in {property: value} format. For properties with hyphens (e.g. background-color), use an underscore (e.g. background_color) | | textContent | string | Sets the text content of the element | | children | array | All children of the element. Can be DOM elements or user-defined | | listeners | object | Event listeners to attatch to the element, in {eventType: onFire} format. For example: {click: myFunction} | | contentEditable | boolean | Corresponds to the HTML attribute contenteditable | | id | string | Corresponds to the HTML attribute id | | className | string | Corresponds to the HTML attribute class | | refName | string | Define this in order to get the element included in the references returned by render(). The name you give it will be the name you can use to access it later | | attributes | object | Use this to set any other html attrubutes. Use {name: value} format for any attrubute. For example: {src: "htpps://www.website.com/image"}|

Examples

Hello world

// define the object
// only one element, a <p> with the text 'Hello, world'
myDoc = [
    {
        type: 'p',
        textContent: 'Hello, world'
    }
];
// render myDoc within the document body
render(myDoc, document.body);

Adding children, styles, and listeners

const myDoc = [
    {
        type: 'div',
        children: [
            {
                type: 'button',
                id: 'my_button',
                textContent: 'Press Me',
                listeners: {
                    click: () => console.log('Button clicked'),
                    mouseover: (e) => {
                        e.target.style.backgroundColor = 'red'
                    },
                    mouseout: (e) => {
                        e.target.style.backgroundColor = 'white'
                    }
                }
            },
            {type: 'hr'},
            {
                type: 'p',
                className: 'myClass',
                textContent: 'Hello, World',
                contentEditable: true,
                style: {
                    background_color: 'green',
                    border: '1px solid black',
                    border_radius: '10px'
                }
            },
            myP
        ]
    }
];

render(myDoc, document.body);

Getting references and rendering in different places

const myDoc = [
    {
        type: 'div',
        refName: 'myDiv',
        children: [
            {
                type: 'button',
                id: 'my_button',
                refName: 'myButton',
                textContent: 'Press Me',
                listeners: {
                    click: () => console.log('Button clicked'),
                    mouseover: (e) => {
                        e.target.style.backgroundColor = 'red'
                    },
                    mouseout: (e) => {
                        e.target.style.backgroundColor = 'white'
                    }
                }
            },
            {type: 'hr'},
            {
                type: 'p',
                className: 'myClass',
                textContent: 'Hello, World',
                contentEditable: true,
                style: {
                    background_color: 'green',
                    border: '1px solid black',
                    border_radius: '10px'
                }
            },
            myP
        ]
    }
];

const refs = render(myDoc, document.body);
/*
Notice the refName property in the div and the button.
refs will now contain this:
{
    myButton: <reference to the button>,
    myDiv: <reference to the div>
}
*/

// add another <p> to the <div>, without erasing the existing content
// the second argument specifies to render within refs.myDiv
// the third argument specifies not to erase the existing content
render(
    {
        type: 'p',
        textContent: 'More text'
    }, 
    refs.myDiv, 
    false
);

// you can perform normal DOM manipulation on references
refs.myButton.classList.add('myClass');

Render a normal DOM element

domDiv = document.createElement('div');
domDiv.textContent = 'This is a normal DOM element';
myDoc = [
    {
        type: 'p',
        textContent: 'This is a user-defined object'
    },
    {
        type: 'div',
        children: [
            domDiv
        ]
    }
];

render(myDoc, document.body);