diff --git a/skooma.md b/skooma.md new file mode 100644 index 0000000..3cf996f --- /dev/null +++ b/skooma.md @@ -0,0 +1,45 @@ +# Skooma + +A functional-friendly helper library for procedural DOM generation and +templating. + +Skooma provides two proxies: `html` and `svg`. + +## Interface / Examples + +```js +html.div() +// Creates a
element +html.div("hello", "world") +// Creates a
element with the content "helloworld" +html.div(html.span()) +// Creates a
element with a nested element +html.div([html.span(), html.span()]) +// Creates a
element with two nested elements +html.div({class: "foo"}) +// Creates a
with the class "foo" +html.div({class: ["foo", "bar"]}) +// Creates a
with the classes "foo" and "bar" +html.div({click: 1}) +// Creates a
with the attribute "click" set to "1" +html.div({click: event => console.log(event.target)}) +// Creates a
with an event listener for "click" events +html.div(player: {username: "KhajiitSlayer3564"}) +// Creates a
with the attribute "player" set to a JSON-encoded Object +html.div(self => self.innerHTML = "Hello, World!") +// Creates a
and passes it to a function that sets its inner HTML +html.div({foo: true}) +// Creates a
, adds the attribute "foo" +html.div({foo: "bar"}, {foo: false}) +// Creates a
, sets the "foo" attribute to "bar", then removes it again + +// Special keys: + +html.div(dataset: {foo: 1, bar: 2}) +// Creates a
with the attributes "data-foo" and "data-bar" set to 1 and 2 +html.div(style: {color: 'red'}) +// Creates a
with the "style" attribute set to "color: red" +``` + +Generators can be called with many arguments. Arrays get iterated recursively as +if they were part of a flat argument list.