Skooma.js

import {html} from 'skooma.js'

Introduction & Scope

Skooma.js is a library for generating DOM nodes within JavaScript.

What are the benefits of Skooma?

Skooma is only a small ES6 module that uses meta-programming to turn JavaScript into a DSL that generates HTML and XML subtrees.
This means you're writing plain JavaScript code that needs no additional transpilation steps and runs directly in the browser.

Showcase

Here's a few examples of how things are done in Skooma.js and how it compares to vanilla JavaScript.

Skooma.js

Vanilla JavaScript

Generating a single empty HTML element. The html namespace creates generator functions dynamically.

Using the browser API, this is a bit more verbose, but still looks similar.

return html.h1() return document.createElement("h1")

String arguments to the generator function will be inserted as text nodes.

Without Skooma.js this would already require using a variable since createElement cannot insert text content into a new node.

return html.h1("Hello, World!") let h1 = document.createElement("h1") h1.innerText = "Hello, World!" return h1

DOM Nodes can also be passed into the generator function to add them as child-elements.

This would normally require two separate variables, one for each element.

return html.div(html.b("Hello!")) let div = document.createElement("div") let b = document.createElement("b") b.innerText = "Hello!" div.append(b) return div

When passing an object, its key/value pairs will be added as attributes to the new element.

Once again, in plain JS this requires a variable.

return html.div({attribute: "value"}) let div = document.createElement("div") div.setAttribute("attribute", "value") return div

When an object value is a function, it will instead be added as an event handler. The corresponding key will be used as the event name.

You guessed it: variable.

return html.button("Click Me!", { click: event => console.log(event) }) let button document.createElement("button") button.innerText = "Click Me!" button.addEventListener( "click", event => console.log(event) ) return button

Adding a shadow-root to the new element can be done witht he shadowRoot property.

return html.div({ shadowRoot: html.p("Shadow-DOM text content") }, "Light-DOM text content") let div = document.createElement("div") let p = document.createElement("p") p.innerText = "Shadow-DOM text content" div.attachShadow({mode: "open"}).append(p) div.innerText = "Light-DOM text content" return div