2024-01-15 10:50:27 +00:00
|
|
|
// Keep a referee alive until a referrer is collected
|
2023-12-23 16:31:01 +00:00
|
|
|
const weakReferences = new WeakMap()
|
|
|
|
const untilDeathDoThemPart = (referrer, reference) => {
|
2024-01-24 13:50:51 +00:00
|
|
|
if (!weakReferences.has(referrer)) weakReferences.set(referrer, new Set())
|
2023-12-23 16:31:01 +00:00
|
|
|
weakReferences.get(referrer).add(reference)
|
|
|
|
}
|
|
|
|
|
2024-01-24 15:43:50 +00:00
|
|
|
// Like AbortController, but resets after each abort
|
2024-01-24 13:50:51 +00:00
|
|
|
class MultiAbortController {
|
|
|
|
#controller = new AbortController()
|
|
|
|
get signal() { return this.#controller.signal }
|
|
|
|
abort() { this.#controller.abort(); this.#controller = new AbortController() }
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** A symbol representing nothing to be appended to an element */
|
2022-03-26 11:40:50 +00:00
|
|
|
export const empty = Symbol("Explicit empty argument for Skooma")
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Converts a snake-case string to a CSS property name
|
|
|
|
* @param {string} key
|
|
|
|
* @return {string}
|
|
|
|
*/
|
2024-01-24 15:43:50 +00:00
|
|
|
const snakeToCSS = key => key.replace(/^[A-Z]/, a => "-"+a).replace(/[A-Z]/g, a => '-'+a.toLowerCase())
|
2023-09-18 09:45:36 +00:00
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/**
|
|
|
|
* @param {CSSStyleDeclaration} style The style property of a node
|
|
|
|
* @param {object} rules A map of snake case property names to css values
|
|
|
|
*/
|
|
|
|
const insertStyles = (style, rules) => {
|
|
|
|
for (const [key, value] of Object.entries(rules))
|
2021-08-16 15:57:10 +00:00
|
|
|
if (typeof value == "undefined")
|
2024-02-12 12:38:57 +00:00
|
|
|
style.removeProperty(snakeToCSS(key))
|
2021-08-16 15:57:10 +00:00
|
|
|
else
|
2024-02-12 12:38:57 +00:00
|
|
|
style.setProperty(snakeToCSS(key), value.toString())
|
2021-08-16 15:57:10 +00:00
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** @typedef SpecialAttributeDescriptor
|
|
|
|
* @type {object}
|
|
|
|
* @property {function(this:any):void} [get]
|
|
|
|
* @property {function(this:any,any):void} [set]
|
|
|
|
* @property {function(this:any,function():void):void} [hook]
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @type {Object<string,SpecialAttributeDescriptor>}
|
|
|
|
*/
|
2024-02-06 16:07:31 +00:00
|
|
|
const specialAttributes = {
|
|
|
|
value: {
|
|
|
|
get() { return this.value },
|
|
|
|
set(value) {
|
|
|
|
this.setAttribute("value", value)
|
|
|
|
this.value = value
|
|
|
|
},
|
|
|
|
hook(callback) { this.addEventListener("input", callback) }
|
|
|
|
},
|
|
|
|
style: {
|
|
|
|
set(value) { insertStyles(this.style, value) }
|
|
|
|
},
|
|
|
|
dataset: {
|
|
|
|
set(value) {
|
|
|
|
for (const [attribute2, value2] of Object.entries(value)) {
|
|
|
|
this.dataset[attribute2] = processAttribute(value2)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
shadowRoot: {
|
|
|
|
set(value) {
|
|
|
|
processArgs((this.shadowRoot || this.attachShadow({mode: "open"})), value)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
const processAttribute = attribute => {
|
2021-05-22 12:34:17 +00:00
|
|
|
if (typeof attribute == "string" || typeof attribute == "number")
|
2021-02-19 20:37:13 +00:00
|
|
|
return attribute
|
2022-04-12 20:35:44 +00:00
|
|
|
else if (attribute && "join" in attribute)
|
2021-02-19 20:37:13 +00:00
|
|
|
return attribute.join(" ")
|
|
|
|
else
|
|
|
|
return JSON.stringify(attribute)
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Returns a fallback if value is defined */
|
2022-04-12 20:36:35 +00:00
|
|
|
const defined = (value, fallback) => typeof value != "undefined" ? value : fallback
|
2024-02-12 12:38:57 +00:00
|
|
|
|
|
|
|
/** Recursively finds the last 'is' attribute in a list nested array of objects
|
|
|
|
* @param {Array} args
|
|
|
|
*/
|
2023-12-14 23:10:45 +00:00
|
|
|
const getCustom = args => args.reduce(
|
|
|
|
(current, argument) => Array.isArray(argument)
|
|
|
|
? defined(getCustom(argument), current)
|
|
|
|
: (argument && typeof argument == "object")
|
|
|
|
? defined(argument.is, current)
|
|
|
|
: current
|
|
|
|
,undefined
|
2022-04-12 20:36:35 +00:00
|
|
|
)
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/**
|
|
|
|
* @typedef Observable
|
|
|
|
* @type {EventTarget|object}
|
|
|
|
* @property {any} value
|
|
|
|
*/
|
|
|
|
|
|
|
|
/** Returns whether an object is an observable according to skooma's contract
|
|
|
|
* @param {any} object
|
|
|
|
* @return {object is Observable}
|
|
|
|
*/
|
2024-02-06 16:07:31 +00:00
|
|
|
export const isObservable = object => object && object.observable
|
2023-12-21 22:36:48 +00:00
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Turns an argument into something that can be inserted as a child into a DOM node
|
|
|
|
* @param {any} value
|
|
|
|
* @return {Element|Text}
|
|
|
|
*/
|
|
|
|
const toElement = value => {
|
|
|
|
if (typeof value == "string" || typeof value == "number")
|
|
|
|
return document.createTextNode(value.toString())
|
|
|
|
else if (value instanceof Element)
|
|
|
|
return value
|
|
|
|
else if (isObservable(value))
|
|
|
|
return reactiveElement(value)
|
2023-12-21 22:36:48 +00:00
|
|
|
}
|
|
|
|
|
2024-02-29 14:29:20 +00:00
|
|
|
class ReplaceEvent extends Event {
|
|
|
|
/** @param {Element|Text} next */
|
|
|
|
constructor(next) {
|
|
|
|
super("replace", {bubbles: true, cancelable: true})
|
|
|
|
this.next = next
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class ReplacedEvent extends Event {
|
|
|
|
/** @param {Element|Text} next */
|
|
|
|
constructor(next) {
|
|
|
|
super("replaced")
|
|
|
|
this.next = next
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/**
|
|
|
|
* @param {Observable} observable
|
|
|
|
* @return {Element|Text}
|
|
|
|
*/
|
2024-02-06 16:07:31 +00:00
|
|
|
export const reactiveElement = observable => {
|
|
|
|
const element = toElement(observable.value)
|
|
|
|
untilDeathDoThemPart(element, observable)
|
|
|
|
const ref = new WeakRef(element)
|
|
|
|
observable.addEventListener("change", () => {
|
|
|
|
const next = reactiveElement(observable)
|
2024-02-29 14:29:20 +00:00
|
|
|
const element = ref.deref()
|
|
|
|
if (element.dispatchEvent(new ReplaceEvent(next)))
|
|
|
|
element.replaceWith(next)
|
|
|
|
element.dispatchEvent(new ReplacedEvent(next))
|
2024-02-06 16:07:31 +00:00
|
|
|
}, {once: true})
|
|
|
|
return element
|
2023-12-21 22:36:48 +00:00
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Set an attribute on an element
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {string} attribute
|
|
|
|
* @param {any} value
|
|
|
|
* @param {AbortSignal} [cleanupSignal]
|
|
|
|
*/
|
2023-12-21 22:36:48 +00:00
|
|
|
const setAttribute = (element, attribute, value, cleanupSignal) => {
|
|
|
|
const special = specialAttributes[attribute]
|
2024-02-06 09:45:47 +00:00
|
|
|
if (isObservable(value))
|
2023-12-21 22:36:48 +00:00
|
|
|
setReactiveAttribute(element, attribute, value)
|
|
|
|
else if (typeof value === "function")
|
2024-01-24 13:51:45 +00:00
|
|
|
element.addEventListener(attribute, value, {signal: cleanupSignal})
|
2024-01-24 15:13:01 +00:00
|
|
|
else if (special?.set)
|
2024-01-24 13:50:51 +00:00
|
|
|
special.set.call(element, value)
|
2023-12-21 22:36:48 +00:00
|
|
|
else if (value === true)
|
|
|
|
{if (!element.hasAttribute(attribute)) element.setAttribute(attribute, '')}
|
|
|
|
else if (value === false)
|
|
|
|
element.removeAttribute(attribute)
|
|
|
|
else {
|
2024-01-24 15:43:50 +00:00
|
|
|
element.setAttribute(attribute, processAttribute(value))
|
2023-12-21 22:36:48 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Set up a binding between an attribute and an observable
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {string} attribute
|
|
|
|
* @param {Observable} observable
|
|
|
|
*/
|
2024-02-06 09:45:47 +00:00
|
|
|
const setReactiveAttribute = (element, attribute, observable) => {
|
2024-01-24 13:50:51 +00:00
|
|
|
const multiAbort = new MultiAbortController()
|
2024-02-06 16:07:31 +00:00
|
|
|
|
|
|
|
observable.addEventListener("change", () => {
|
2024-01-24 13:50:51 +00:00
|
|
|
multiAbort.abort()
|
2024-02-06 16:07:31 +00:00
|
|
|
setAttribute(element, attribute, observable.value, multiAbort.signal)
|
2024-01-24 13:50:51 +00:00
|
|
|
})
|
2024-02-06 16:07:31 +00:00
|
|
|
setAttribute(element, attribute, observable.value, multiAbort.signal)
|
|
|
|
|
2024-01-24 15:13:01 +00:00
|
|
|
const special = specialAttributes[attribute]
|
2024-02-06 16:07:31 +00:00
|
|
|
if (special.hook) {
|
|
|
|
untilDeathDoThemPart(element, observable)
|
2024-01-24 13:50:51 +00:00
|
|
|
special.hook.call(element, () => {
|
2024-02-06 16:07:31 +00:00
|
|
|
const current = special.get.call(element, attribute)
|
|
|
|
if (current != observable.value) observable.value = current
|
2023-12-21 22:36:48 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Processes a list of arguments for an HTML Node
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {Array} args
|
|
|
|
*/
|
2024-01-24 15:43:50 +00:00
|
|
|
const processArgs = (element, ...args) => {
|
2023-12-21 22:36:48 +00:00
|
|
|
for (const arg of args) if (arg !== empty) {
|
2024-02-12 12:38:57 +00:00
|
|
|
if (Array.isArray(arg)) {
|
2024-01-24 15:43:50 +00:00
|
|
|
processArgs(element, ...arg)
|
2024-01-24 08:51:49 +00:00
|
|
|
} else {
|
2024-02-06 16:07:31 +00:00
|
|
|
const child = toElement(arg)
|
2024-01-24 08:51:49 +00:00
|
|
|
if (child)
|
|
|
|
element.append(child)
|
|
|
|
else if (arg === undefined || arg == null)
|
|
|
|
console.warn(`An argument of type ${typeof arg} has been ignored`, element)
|
|
|
|
else if (typeof arg == "function" && arg.length == 0)
|
2024-01-24 15:43:50 +00:00
|
|
|
processArgs(element, arg())
|
2024-01-24 08:51:49 +00:00
|
|
|
else if (typeof arg == "function")
|
|
|
|
arg(element)
|
|
|
|
else
|
|
|
|
for (const key in arg)
|
|
|
|
setAttribute(element, key, arg[key])
|
|
|
|
}
|
2023-12-21 22:36:48 +00:00
|
|
|
}
|
2021-02-17 10:03:21 +00:00
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Creates a new node
|
|
|
|
* @param {String} name
|
|
|
|
* @param {Array} args
|
|
|
|
* @param {Object} options
|
|
|
|
*/
|
2022-04-12 20:36:35 +00:00
|
|
|
const node = (name, args, options) => {
|
2021-03-05 12:29:21 +00:00
|
|
|
let element
|
2023-09-18 06:57:14 +00:00
|
|
|
const custom = getCustom(args)
|
2023-12-14 23:10:45 +00:00
|
|
|
const opts = custom && {is: String(custom)}
|
|
|
|
|
2022-04-28 07:11:11 +00:00
|
|
|
if ("nameFilter" in options) name = options.nameFilter(name)
|
2021-07-30 10:12:00 +00:00
|
|
|
if (options.xmlns)
|
2023-12-14 23:10:45 +00:00
|
|
|
element = document.createElementNS(options.xmlns, name, opts)
|
2021-02-23 18:11:25 +00:00
|
|
|
else
|
2023-12-14 23:10:45 +00:00
|
|
|
element = document.createElement(name, opts)
|
2024-01-24 15:43:50 +00:00
|
|
|
processArgs(element, args)
|
2021-02-17 10:03:21 +00:00
|
|
|
return element
|
|
|
|
}
|
|
|
|
|
2021-08-04 15:00:00 +00:00
|
|
|
const nameSpacedProxy = (options={}) => new Proxy(Window, {
|
2024-02-12 12:38:57 +00:00
|
|
|
/** @param {string} prop */
|
2023-09-18 06:57:14 +00:00
|
|
|
get: (_target, prop, _receiver) => { return (...args) => node(prop, args, options) },
|
|
|
|
has: (_target, _prop) => true,
|
2021-08-04 15:00:00 +00:00
|
|
|
})
|
2021-02-23 18:11:25 +00:00
|
|
|
|
2023-09-18 09:45:36 +00:00
|
|
|
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"})
|
2024-01-11 14:44:11 +00:00
|
|
|
export default html
|
2023-09-18 09:45:36 +00:00
|
|
|
|
|
|
|
// Other utility exports
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Wraps an event handler in a function that calls preventDefault on the event
|
|
|
|
* @param {function(event) : event} fn
|
|
|
|
* @return {function(event)}
|
|
|
|
*/
|
2024-01-15 10:50:27 +00:00
|
|
|
export const handle = fn => event => { event.preventDefault(); return fn(event) }
|
2021-11-23 15:27:25 +00:00
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Wraps a list of elements in a document fragment
|
|
|
|
* @param {Array<Element|String>} elements
|
|
|
|
*/
|
2022-06-22 13:51:03 +00:00
|
|
|
export const fragment = (...elements) => {
|
|
|
|
const fragment = new DocumentFragment()
|
2023-09-18 06:57:14 +00:00
|
|
|
for (const element of elements)
|
2024-02-06 16:07:31 +00:00
|
|
|
fragment.append(toElement(element))
|
2022-06-22 13:51:03 +00:00
|
|
|
return fragment
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/** Turns a template literal into document fragment.
|
|
|
|
* Strings are returned as text nodes.
|
|
|
|
* Elements are inserted in between.
|
|
|
|
* @param {Array<String>} literals
|
|
|
|
* @param {Array<any>} items
|
|
|
|
* @return {DocumentFragment}
|
2024-02-06 16:07:31 +00:00
|
|
|
*/
|
2021-12-26 16:54:04 +00:00
|
|
|
const textFromTemplate = (literals, items) => {
|
|
|
|
const fragment = new DocumentFragment()
|
|
|
|
for (const key in items) {
|
|
|
|
fragment.append(document.createTextNode(literals[key]))
|
2024-02-06 16:07:31 +00:00
|
|
|
fragment.append(toElement(items[key]))
|
2021-12-26 16:54:04 +00:00
|
|
|
}
|
2024-02-12 12:38:57 +00:00
|
|
|
fragment.append(document.createTextNode(literals[literals.length-1]))
|
2021-12-26 16:54:04 +00:00
|
|
|
return fragment
|
|
|
|
}
|
|
|
|
|
2024-02-12 12:38:57 +00:00
|
|
|
/**
|
|
|
|
* @param {String|Array<String>} data
|
|
|
|
* @param {Array<String|Element>} items
|
|
|
|
*/
|
2021-12-26 16:54:04 +00:00
|
|
|
export const text = (data="", ...items) =>
|
2024-02-12 12:38:57 +00:00
|
|
|
Array.isArray(data)
|
2022-02-06 11:56:54 +00:00
|
|
|
? textFromTemplate(data, items)
|
|
|
|
: document.createTextNode(data)
|