eltonpp v0.2.1

Example app: files:

index.js src/ index.html topbar.js

index.js:

const Elton = require("eltonpp")
const elton = new Elton({
    template: "./src/index.html",
    components: [require("./src/topbar.js")],
	addons: {
        googleFont: ['FontName', 'sans-serif'],
        bootstrap5: true,
        jQuery: true
    }
})

elton.run()

index.html:

<Data>
    {
        "text": "Hello world!",
        "manyIterations": 10
    }
</Data>
<Topbar />

<h2>{text}</h2>

<ul>
    <li loop='i of ["Cat", "Dog"]'>{i}</li>
</ul>

<ul>
    <li loop="i in {manyIterations}">{i}</li>
</ul>

topbar.js:

const Elton = require("eltonpp")

class Topbar extends Elton.component {

    name = 'Topbar'

    render(element) {
        return 'Hello Topbar'
    }
}

module.exports = Topbar

After running node index.js your application will be ready and showed!

Fast documentation

    template: "./src/index.html", // <- this is the path to index.html file
    components: [require("./src/topbar.js")], // <- this is the array with all components
	addons: {
        googleFont: ['FontName', 'sans-serif'], // first index is name of font that will be imported from fonts.goole.com (font-family: 'FIRST_INDEX', SECOND_INDEX;)
        bootstrap5: true, // do import bootstrap?
        jQuery: true // do import jQuery?
    }
})

<Data> // <- this is component which will use it's content (JSON object below) as data for application.
    {
        "text": "Hello world!", // each of this "variables" you can use in your application by typing {variablename}
        "manyIterations": 10
    }
</Data>
<Topbar /> // <- using component

<h2>{text}</h2> // <- showing text variable from Data component 

<ul>
    <li loop='i of ["Cat", "Dog"]'>{i}</li> // array foreach
</ul>

<ul>
    <li loop="i in {manyIterations}">{i}</li> // simple for loop
</ul>

const Elton = require("eltonpp") // imports elton++

class Topbar extends Elton.component { // creating class topbar that extends Elton.component

    name = 'Topbar' // Name of component (this what we using e.g. here: <Topbar />)

    render(element) { // function render with 1 parameter (element is "caller" e.g. <Topbar test="a" />)
        return 'Hello Topbar' // return html to render
    }
}

module.exports = Topbar // exporting class