Add comments documenting what stuff does
This commit is contained in:
parent
5cf868a904
commit
523a720196
4 changed files with 51 additions and 14 deletions
35
better.js
35
better.js
|
@ -1,3 +1,24 @@
|
|||
/*
|
||||
An improved version of the default HTMLElement that provides a bunch of nice
|
||||
things, most significantly:
|
||||
- Automatically registering the custom element type
|
||||
- Built-in event-emitting mutation observer to more easily listen to changes
|
||||
- Split attribute-changed callbacks that automatically register attributes
|
||||
|
||||
Example:
|
||||
class FooBar extends Better {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({mode: "open"});
|
||||
this.shadowRoot.innerHTML = `<h1>Hello, <span part="name"></span>!</h1>`
|
||||
this.userName = "World";
|
||||
}
|
||||
|
||||
userNameChanged(name) { this.shadowRoot.querySelector('[part="name"]').innerHTML = this.userName; }
|
||||
}
|
||||
FooBar.initialize()
|
||||
*/
|
||||
|
||||
export class Better extends HTMLElement {
|
||||
#observer
|
||||
constructor() {
|
||||
|
@ -67,17 +88,3 @@ export class Better extends HTMLElement {
|
|||
return name
|
||||
}
|
||||
}
|
||||
|
||||
/* Example:
|
||||
class FooBar extends Better {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({mode: "open"});
|
||||
this.shadowRoot.innerHTML = `<h1>Hello, <span part="name"></span>!</h1>`
|
||||
this.userName = "World";
|
||||
}
|
||||
|
||||
userNameChanged(name) { this.shadowRoot.querySelector('[part="name"]').innerHTML = this.userName; }
|
||||
}
|
||||
FooBar.initialize()
|
||||
*/
|
||||
|
|
10
listener.js
10
listener.js
|
@ -1,3 +1,13 @@
|
|||
/*
|
||||
A somewhat refined Proxy generator that lets you selectively listen to changed
|
||||
properties and react accordingly.
|
||||
|
||||
Example:
|
||||
const l = listener()
|
||||
l.listen("contract", contract => speaker.handle(contract))
|
||||
l.contract = new Contract()
|
||||
*/
|
||||
|
||||
export const listener = (target={}) => {
|
||||
let callbacks = new Map()
|
||||
function listen(prop, callback) {
|
||||
|
|
12
skooma.js
12
skooma.js
|
@ -1,3 +1,15 @@
|
|||
/*
|
||||
A functional HTML generation library.
|
||||
|
||||
Example:
|
||||
html.label(
|
||||
html.span("Delete everything", {class: ["warning", "important"]}),
|
||||
html.button("Click", {onClick: e => document.body.innerHTML=""}),
|
||||
)
|
||||
or
|
||||
html.ul([1, 2, 3, 4, 5].map(x => html.li(x)), {class: "numbers"})
|
||||
*/
|
||||
|
||||
const parseAttribute = (attribute) => {
|
||||
if (typeof attribute == "string" || typeof attribute == "number")
|
||||
return attribute
|
||||
|
|
|
@ -1,3 +1,11 @@
|
|||
/*
|
||||
A simple function to more easily write HTML in Javascript
|
||||
|
||||
Example:
|
||||
const greeting = name => template`<p>Hello, ${name}!</p><br>`
|
||||
document.append(greeting(bob).cloneNode(true))
|
||||
*/
|
||||
|
||||
export const template = (strings, ...args) => {
|
||||
let buf = []
|
||||
for (let i=0;i<strings.length;i++) {
|
||||
|
|
Loading…
Reference in a new issue