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 {
|
export class Better extends HTMLElement {
|
||||||
#observer
|
#observer
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -67,17 +88,3 @@ export class Better extends HTMLElement {
|
||||||
return name
|
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={}) => {
|
export const listener = (target={}) => {
|
||||||
let callbacks = new Map()
|
let callbacks = new Map()
|
||||||
function listen(prop, callback) {
|
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) => {
|
const parseAttribute = (attribute) => {
|
||||||
if (typeof attribute == "string" || typeof attribute == "number")
|
if (typeof attribute == "string" || typeof attribute == "number")
|
||||||
return attribute
|
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) => {
|
export const template = (strings, ...args) => {
|
||||||
let buf = []
|
let buf = []
|
||||||
for (let i=0;i<strings.length;i++) {
|
for (let i=0;i<strings.length;i++) {
|
||||||
|
|
Loading…
Reference in a new issue