meryt.js

Render your client-side HTML with ease using this snappy little 2.18 kB module!

Have your cake and eat it, too. Intuitively write your markup and have all the native functions you need right at your fingertips. With meryt.js, you never leave JavaScript & you never depend on computationally expensive evals. It's all pure JavaScript, free from any distracting quirks or IDE-breaking syntax parsing issues.

npm i meryt

Usage

Import it into the 'template file' and then simply call $.MOUNT(...) on an object generated by it.

import $ from '/js/meryt.js'

// Generate a basic paragraph element displaying 'Hello World' in large red letters, and then mount it.
const template = $.p('.text-red', [ 'Hello World' ], { style: 'font-size: 72px;' })
const targetElement = document.querySelector('body')
$.MOUNT ( template, targetElement )

That's all there is to it. The library isn't fussy about the order you pass arguments in, so there's nothing to memorise there. The proxy object parses itself recursively, and it uses the property name as the element. What does this mean? $.div('Hello World') will generate <div>Hello World</div>.

Also, if you include an underscore you can insert the id at the same time, like this: $.div_introElement('Hello World'), which will generate <div id='introElement'>Hello World</div>.

That's not always useful, since your IDs may be dynamically generated in more complex pages. We'll come to that in just a moment.

If you omit the div prefix, $._introElement('Hello World') will still generate a <div id='introElement'>Hello World</div> since div is presumed to be the default. $._('Hello World') will also work, but if you are going to omit both the element and the id, be sure to pass an underscore as the property of $ or you'll receive an error about it not being a function.

Now, regarding dynamic IDs; if you pass an object as one of the arguments, the properties of that object will set the attributes of the element concerned.

$._({ id: 'introElement', style: 'font-size: 72px;' }, 'Hello World')

Event Handlers

Since the elements don't exist until it's rendered to the DOM, the workarounds for binding events to those elements are already in place for you. If you pass an object (or array of objects) as the value for the events key in same object you use to set attributes, event listeners are mapped to those elements upon mounting.

⚠️ DON'T MINDLESSLY USE ARROW FUNCTIONS. YOU WILL LOSE THE BENEFIT OF 'THIS' KEYWORD.

import $ from '/js/meryt.js'

// Generate the original example element, but also pop-up a window alert containing the text value.
const template = $.p('.text-red', [ 'Hello World' ], {
    style: 'font-size: 72px;',
    events: {
        on: 'click',
        do: function() {
            alert(this.innerText)
        }
    }
})
const targetElement = document.querySelector('body')
$.MOUNT ( template, targetElement )

You might have noticed the Pug-like class list there. That's pretty much all there is to say about it. Just remember there is no real importance to the order you pass the arguments in, if your string matches the class syntax then it'll be parsed that way, otherwise it'll just be the innerText / innerHTML.

If you pass strings / template objects into an array, however, they will always become the contents of the element. So don't worry, in the unlikely event that you want to display an element showing nothing but a Pug class sample, you can still do that, just wrap it within a single-item array.

Iterators and Looping

It's just JavaScript.

import $ from '/js/meryt.js'

const food = ['halloumi', 'lasagne', 'lahmacun']

// Generate the original example element, but also pop-up a window alert containing the text value.
const template = $._('.container', [
    $.h1('Here are some of the world\'s tastiest foods. Fight me.')
    ...food.map(item => $.p('.text-red', [ 'Hello World' ]))
])
const targetElement = document.querySelector('body')
$.MOUNT ( template, targetElement )