Add `handle` helper function to skooma

This commit is contained in:
Talia 2021-10-05 19:28:36 +02:00
parent 5687ba9b22
commit 6094fd602d
Signed by: darkwiiplayer
GPG Key ID: 7808674088232B3E
2 changed files with 12 additions and 4 deletions

View File

@ -83,5 +83,7 @@ const nameSpacedProxy = (options={}) => new Proxy(Window, {
has: (target, prop) => true,
})
export const handle = fn => event => { event.preventDefault(); return fn(event) }
export const html = nameSpacedProxy({nameFilter: name => name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()})
export const svg = nameSpacedProxy({xmlns: "http://www.w3.org/2000/svg"})

View File

@ -35,15 +35,21 @@ html.div({foo: "bar"}, {foo: false})
// Special keys:
html.div(dataset: {foo: 1, bar: 2})
// Creates a <div> with the attributes "data-foo" and "data-bar" set to 1 and 2
html.div(style: {color: 'red'})
// Creates a <div> with the "style" attribute set to "color: red"
html.div(dataset: {foo: 1, bar: 2}) // Creates a <div> with the attributes "data-foo" and "data-bar" set to 1 and 2 html.div(style: {color: 'red'}) // Creates a <div> 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.
## handle
Since it is common for event handlers to call `preventDefault()`, skooma
provides a helper function called `handle` with the following definition:
```js
fn => event => { event.preventDefault(); return fn(event) }
```
## A few more examples:
Create a Button that deletes itself: