Add comments documenting what stuff does

This commit is contained in:
Talia 2021-06-23 16:21:33 +02:00
parent 5cf868a904
commit 523a720196
4 changed files with 51 additions and 14 deletions

View file

@ -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()
*/

View file

@ -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) {

View file

@ -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

View file

@ -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++) {