Skooma.js is a library for generating DOM nodes within JavaScript.
Skooma is only a small
This means you're writing plain JavaScript code that needs no additional
transpilation steps and runs directly in the browser.
Here's a few examples of how things are done in Skooma.js and how it compares to 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.
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.
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.
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.
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.
The magic dataset
attribute can be used to set values in the object's data-set
Adding a shadow-root to the new element can be done with the magic shadowRoot
property.
Object can be styled inline via the magic style
property.
Meanwhile in Vanilla JS styling properties have to be added one by one
Function arguments will be called on the new element.
This can be used to easily add custom initialisation logic to elements.
Custom elements with hyphenated names can be created easily
Custom built-ins can be created with the is
attribute.
svg
helper
This works exactly the same as the html
helper,
except that it creates elements with the appropriate namespace
and does not convert camelCase to kebab-case.
text
helperThe text
helper provides a convenient wrapper around the
document.createTextNode
function
In its simplest form, it's only a shorthand for its vanilla counterpart
However, you don't need to pass an argument to it.
It also acts as a tag function for template literals, returning a document fragment containing a list of text nodes.
You can even interpolate actual DOM nodes in the string
bind
helper
- bind
- transform-function ⟶ update-function
- ...data ⟶ new-element
text
as this would return a document fragment which cannot be replaced.
- ...data ⟶ new-element
current
attribute into it.
A simple self-contained incrementing counter button could be implemented like this:
The initial call of update
sets the initial count of the
button, and the attached event handler updates the button every time it
is clicked, thereby replacing it with a new one.
For this next example, imagine a counter
object that works like this:
counter.count
returns the current count
counter.onUpdate
lets the user register a callback that will be called with the new count whenever the counter updates
When an element gets replaced with a newer version of itself, any variable
containing the old element will become "stale". For this reason, the
function injects a current
property into every element it
creates that will always point to the newest version of the element.
handle
helper
This helper function takes an event handler and wraps it in a new
function that calls preventDefault
on the event before
passing it to the original function.
empty
constantThis symbol will be completely ignored when it appears as a children in any skooma generator.