Simple components and unidirectional data flow

increment.js

// `createElement` and `createComponent` comprise the entire framework

const createElement = elementName => (props={}, children=[]) => {
    const element = document.createElement(elementName);
    Object.assign(element, props);

    for (const child of children) {
        element.appendChild(child);
    }

    return element;
};

const createComponent = config => {
    config.state = config.state || {};
    config.render = config.render || div();
    let element = config.render(config.state);
    config.setState = changes => {
        config.state = Object.assign(config.state, changes);
        const rerendered = config.render(config.state);
        if (element.isEqualNode(rerendered)) return;
        
        element.parentNode.replaceChild(rerendered, element);
        element = rerendered;
    };
    
    return element;
}


// The following code is an example use of the above framework to create a series of content paragraphs and an increment count button

const div = createElement('div');
const p = createElement('p');
const button = createElement('button');
const h1 = createElement('h1');
const contentParagraph = text => p({ innerText: text, className: 'content-para' });

const inc = createComponent({
    state: { count: 0 },
    render: function() {
        return p({ innerText: `COUNT ${this.state.count}` }, [
            button({ innerText: 'increment', href: '#', onclick: () => this.setState({ count: this.state.count + 1 }) })
        ]);
    }    
});

const app = createComponent({
    render: function() {
        return div({ id: 'app' }, [
            h1({ innerText: 'Hello World' }),
            contentParagraph(`Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.`),
            contentParagraph(`Lorem Ipsum: usage Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups.`),
            contentParagraph(`In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful ...`),
            contentParagraph(`If you've ever come near a design mockup, you're likely familiar with lorem ipsum, the random text used as placeholder copy in designs. Lorem ...`),
            contentParagraph(`Lorem Ipsum is also known as: Greeked text, blind text, placeholder text, dummy content, filler text, lipsum, and mock-content.`),
            inc
        ]);
    }
});

document.body.appendChild(app);