typed-dom
Version:
A value-level and type-level DOM builder.
1,524 lines (1,455 loc) • 47 kB
JavaScript
/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["typed-dom"] = factory();
else
root["typed-dom"] = factory();
})(this, () => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 5413:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.ObjectSetPrototypeOf = exports.ObjectGetPrototypeOf = exports.ObjectCreate = exports.ObjectAssign = exports.toString = exports.isEnumerable = exports.isPrototypeOf = exports.hasOwnProperty = exports.isArray = exports.sqrt = exports.log10 = exports.log2 = exports.log = exports.tan = exports.cos = exports.sign = exports.round = exports.random = exports.min = exports.max = exports.floor = exports.ceil = exports.abs = exports.PI = exports.parseInt = exports.parseFloat = exports.isSafeInteger = exports.isNaN = exports.isInteger = exports.isFinite = exports.EPSILON = exports.MIN_VALUE = exports.MIN_SAFE_INTEGER = exports.MAX_VALUE = exports.MAX_SAFE_INTEGER = void 0;
exports.MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER, exports.MAX_VALUE = Number.MAX_VALUE, exports.MIN_SAFE_INTEGER = Number.MIN_SAFE_INTEGER, exports.MIN_VALUE = Number.MIN_VALUE, exports.EPSILON = Number.EPSILON, exports.isFinite = Number.isFinite, exports.isInteger = Number.isInteger, exports.isNaN = Number.isNaN, exports.isSafeInteger = Number.isSafeInteger, exports.parseFloat = Number.parseFloat, exports.parseInt = Number.parseInt;
exports.PI = Math.PI, exports.abs = Math.abs, exports.ceil = Math.ceil, exports.floor = Math.floor, exports.max = Math.max, exports.min = Math.min, exports.random = Math.random, exports.round = Math.round, exports.sign = Math.sign, exports.cos = Math.cos, exports.tan = Math.tan, exports.log = Math.log, exports.log2 = Math.log2, exports.log10 = Math.log10, exports.sqrt = Math.sqrt;
exports.isArray = Array.isArray;
exports.hasOwnProperty = Object.prototype.hasOwnProperty.call.bind(Object.prototype.hasOwnProperty);
exports.isPrototypeOf = Object.prototype.isPrototypeOf.call.bind(Object.prototype.isPrototypeOf);
exports.isEnumerable = Object.prototype.propertyIsEnumerable.call.bind(Object.prototype.propertyIsEnumerable);
exports.toString = Object.prototype.toString.call.bind(Object.prototype.toString);
exports.ObjectAssign = Object.assign;
exports.ObjectCreate = Object.create;
exports.ObjectGetPrototypeOf = Object.getPrototypeOf;
exports.ObjectSetPrototypeOf = Object.setPrototypeOf;
/***/ }),
/***/ 6876:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.splice = exports.pop = exports.push = exports.shift = exports.unshift = exports.indexOf = void 0;
function indexOf(as, a) {
if (as.length === 0) return -1;
return a === a ? as.indexOf(a) : as.findIndex(a => a !== a);
}
exports.indexOf = indexOf;
function unshift(as, bs) {
if ('length' in as) {
if (as.length === 1) return bs.unshift(as[0]), bs;
if (Array.isArray(as)) return bs.unshift(...as), bs;
for (let i = as.length; i--;) {
bs.unshift(as[i]);
}
} else {
bs.unshift(...as);
}
return bs;
}
exports.unshift = unshift;
function shift(as, count) {
if (count < 0) throw new Error('Unexpected negative number');
return count === undefined ? [as.shift(), as] : [splice(as, 0, count), as];
}
exports.shift = shift;
function push(as, bs) {
if ('length' in bs) {
if (bs.length === 1) return as.push(bs[0]), as;
if (Array.isArray(bs) && bs.length > 100) return as.push(...bs), as;
for (let len = bs.length, i = 0; i < len; ++i) {
as.push(bs[i]);
}
} else {
for (const b of bs) {
as.push(b);
}
}
return as;
}
exports.push = push;
function pop(as, count) {
if (count < 0) throw new Error('Unexpected negative number');
return count === undefined ? [as, as.pop()] : [as, splice(as, as.length - count, count)];
}
exports.pop = pop;
function splice(as, index, count, ...values) {
if (as.length === 0) return push(as, values), [];
if (index > as.length) {
index = as.length;
} else if (index < 0) {
index = -index > as.length ? 0 : as.length + index;
}
count = count > as.length ? as.length : count;
if (count === 0 && values.length === 0) return [];
if (count === 1 && values.length === 1) return [[as[index], as[index] = values[0]][0]];
switch (index) {
case as.length - 1:
if (as.length === 0) return push(as, values), [];
if (count >= 1) return [[as.pop()], push(as, values)][0];
break;
case 0:
if (count === 0) return unshift(values, as), [];
if (count === 1) return [[as.shift()], unshift(values, as)][0];
break;
case as.length:
return push(as, values), [];
}
switch (values.length) {
case 0:
return arguments.length > 2 ? as.splice(index, count) : as.splice(index);
case 1:
return as.splice(index, count, values[0]);
case 2:
return as.splice(index, count, values[0], values[1]);
case 3:
return as.splice(index, count, values[0], values[1], values[2]);
case 4:
return as.splice(index, count, values[0], values[1], values[2], values[3]);
case 5:
return as.splice(index, count, values[0], values[1], values[2], values[3], values[4]);
default:
return as.splice(index, count, ...values);
}
}
exports.splice = splice;
/***/ }),
/***/ 1934:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.equal = void 0;
function equal(a, b) {
return a === a ? a === b : b !== b;
}
exports.equal = equal;
/***/ }),
/***/ 1825:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.noop = exports.fix = exports.id = exports.clear = exports.singleton = void 0;
function singleton(f) {
let result;
return function (...as) {
if (f === noop) return result;
result = f.call(this, ...as);
f = noop;
return result;
};
}
exports.singleton = singleton;
function clear(f) {
return (...as) => void f(...as);
}
exports.clear = clear;
function id(a) {
return a;
}
exports.id = id;
function fix(f) {
return a1 => {
const a2 = f(a1);
return a1 === a2 || a2 !== a2 ? a2 : f(a2);
};
}
exports.fix = fix;
function noop() {}
exports.noop = noop;
/***/ }),
/***/ 6925:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.reduce = exports.memoize = void 0;
const alias_1 = __webpack_require__(5413);
const compare_1 = __webpack_require__(1934);
function memoize(f, identify, memory) {
if (typeof identify === 'object') {
memory = identify;
identify = undefined;
}
identify ??= (...as) => as[0];
switch (true) {
case (0, alias_1.isArray)(memory):
return memoizeArray(f, identify, memory);
case memory?.constructor === Object:
return memoizeObject(f, identify, memory);
default:
return memoizeDict(f, identify, memory ?? new Map());
}
}
exports.memoize = memoize;
function memoizeArray(f, identify, memory) {
return (...as) => {
const b = identify(...as);
let z = memory[b];
if (z !== undefined) return z;
z = f(...as);
memory[b] = z;
return z;
};
}
function memoizeObject(f, identify, memory) {
let nullable = false;
return (...as) => {
const b = identify(...as);
let z = memory[b];
if (z !== undefined || nullable && b in memory) return z;
z = f(...as);
nullable ||= z === undefined;
memory[b] = z;
return z;
};
}
function memoizeDict(f, identify, memory) {
let nullable = false;
return (...as) => {
const b = identify(...as);
let z = memory.get(b);
if (z !== undefined || nullable && memory.has(b)) return z;
z = f(...as);
nullable ||= z === undefined;
memory.add?.(b, z) ?? memory.set(b, z);
return z;
};
}
function reduce(f, identify = (...as) => as[0]) {
let key = {};
let val;
return (...as) => {
const b = identify(...as);
if (!(0, compare_1.equal)(key, b)) {
key = b;
val = f(...as);
}
return val;
};
}
exports.reduce = reduce;
/***/ }),
/***/ 8312:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
var _a, _b;
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.never = exports.isPromiseLike = exports.Internal = exports.AtomicPromise = exports.internal = void 0;
const alias_1 = __webpack_require__(5413);
const function_1 = __webpack_require__(1825);
exports.internal = Symbol.for('spica/promise::internal');
class AtomicPromise {
static get [(_a = Symbol.toStringTag, Symbol.species)]() {
return AtomicPromise;
}
static all(vs) {
return new AtomicPromise((resolve, reject) => {
const values = (0, alias_1.isArray)(vs) ? vs : [...vs];
const results = Array(values.length);
let done = false;
let count = 0;
for (let i = 0; !done && i < values.length; ++i) {
const value = values[i];
if (!isPromiseLike(value)) {
results[i] = value;
++count;
continue;
}
if (isAtomicPromiseLike(value)) {
const {
status
} = value[exports.internal];
switch (status.state) {
case 2 /* State.fulfilled */:
results[i] = status.value;
++count;
continue;
case 3 /* State.rejected */:
return reject(status.reason);
}
}
value.then(value => {
results[i] = value;
++count;
count === values.length && resolve(results);
}, reason => {
reject(reason);
done = true;
});
}
count === values.length && resolve(results);
});
}
static race(vs) {
return new AtomicPromise((resolve, reject) => {
const values = (0, alias_1.isArray)(vs) ? vs : [...vs];
for (let i = 0; i < values.length; ++i) {
const value = values[i];
if (!isPromiseLike(value)) {
return resolve(value);
}
if (isAtomicPromiseLike(value)) {
const {
status
} = value[exports.internal];
switch (status.state) {
case 2 /* State.fulfilled */:
return resolve(status.value);
case 3 /* State.rejected */:
return reject(status.reason);
}
}
}
let done = false;
for (let i = 0; !done && i < values.length; ++i) {
const value = values[i];
value.then(value => {
resolve(value);
done = true;
}, reason => {
reject(reason);
done = true;
});
}
});
}
static allSettled(vs) {
return new AtomicPromise(resolve => {
const values = (0, alias_1.isArray)(vs) ? vs : [...vs];
const results = Array(values.length);
let count = 0;
for (let i = 0; i < values.length; ++i) {
const value = values[i];
if (!isPromiseLike(value)) {
results[i] = {
status: 'fulfilled',
value: value
};
++count;
continue;
}
if (isAtomicPromiseLike(value)) {
const {
status
} = value[exports.internal];
switch (status.state) {
case 2 /* State.fulfilled */:
results[i] = {
status: 'fulfilled',
value: status.value
};
++count;
continue;
case 3 /* State.rejected */:
results[i] = {
status: 'rejected',
reason: status.reason
};
++count;
continue;
}
}
value.then(value => {
results[i] = {
status: 'fulfilled',
value: value
};
++count;
count === values.length && resolve(results);
}, reason => {
results[i] = {
status: 'rejected',
reason
};
++count;
count === values.length && resolve(results);
});
}
count === values.length && resolve(results);
});
}
static any(vs) {
return new AtomicPromise((resolve, reject) => {
const values = (0, alias_1.isArray)(vs) ? vs : [...vs];
const reasons = Array(values.length);
let done = false;
let count = 0;
for (let i = 0; !done && i < values.length; ++i) {
const value = values[i];
if (!isPromiseLike(value)) {
return resolve(value);
}
if (isAtomicPromiseLike(value)) {
const {
status
} = value[exports.internal];
switch (status.state) {
case 2 /* State.fulfilled */:
return resolve(status.value);
case 3 /* State.rejected */:
reasons[i] = status.reason;
++count;
continue;
}
}
value.then(value => {
resolve(value);
done = true;
}, reason => {
reasons[i] = reason;
++count;
count === values.length && reject(new AggregateError(reasons, 'All promises were rejected'));
});
}
count === values.length && reject(new AggregateError(reasons, 'All promises were rejected'));
});
}
static resolve(value) {
const p = new AtomicPromise(function_1.noop);
p[exports.internal].resolve(value);
return p;
}
static reject(reason) {
const p = new AtomicPromise(function_1.noop);
p[exports.internal].reject(reason);
return p;
}
constructor(executor) {
this[_a] = 'Promise';
this[_b] = new Internal();
if (executor === function_1.noop) return;
try {
executor(value => void this[exports.internal].resolve(value), reason => void this[exports.internal].reject(reason));
} catch (reason) {
this[exports.internal].reject(reason);
}
}
then(onfulfilled, onrejected) {
const p = new AtomicPromise(function_1.noop);
this[exports.internal].then(p[exports.internal], onfulfilled, onrejected);
return p;
}
catch(onrejected) {
return this.then(undefined, onrejected);
}
finally(onfinally) {
return this.then(onfinally, onfinally).then(() => this);
}
}
exports.AtomicPromise = AtomicPromise;
_b = exports.internal;
class Internal {
constructor() {
this.status = {
state: 0 /* State.pending */
};
this.fulfillReactions = [];
this.rejectReactions = [];
}
isPending() {
return this.status.state === 0 /* State.pending */;
}
resolve(value) {
if (!this.isPending()) return;
if (!isPromiseLike(value)) {
this.status = {
state: 2 /* State.fulfilled */,
value: value
};
return this.resume();
}
if (isAtomicPromiseLike(value)) {
return value[exports.internal].then(this);
}
this.status = {
state: 1 /* State.resolved */,
promise: value
};
return void value.then(value => {
this.status = {
state: 2 /* State.fulfilled */,
value
};
this.resume();
}, reason => {
this.status = {
state: 3 /* State.rejected */,
reason
};
this.resume();
});
}
reject(reason) {
if (!this.isPending()) return;
this.status = {
state: 3 /* State.rejected */,
reason
};
return this.resume();
}
then(internal, onfulfilled, onrejected) {
const {
status,
fulfillReactions,
rejectReactions
} = this;
switch (status.state) {
case 2 /* State.fulfilled */:
if (fulfillReactions.length !== 0) break;
return call(internal, true, onfulfilled, status.value);
case 3 /* State.rejected */:
if (rejectReactions.length !== 0) break;
return call(internal, false, onrejected, status.reason);
}
fulfillReactions.push({
internal,
state: true,
procedure: onfulfilled
});
rejectReactions.push({
internal,
state: false,
procedure: onrejected
});
}
resume() {
const {
status,
fulfillReactions,
rejectReactions
} = this;
switch (status.state) {
case 0 /* State.pending */:
case 1 /* State.resolved */:
return;
case 2 /* State.fulfilled */:
if (rejectReactions.length !== 0) {
this.rejectReactions = [];
}
if (fulfillReactions.length === 0) return;
react(fulfillReactions, status.value);
this.fulfillReactions = [];
return;
case 3 /* State.rejected */:
if (fulfillReactions.length !== 0) {
this.fulfillReactions = [];
}
if (rejectReactions.length === 0) return;
react(rejectReactions, status.reason);
this.rejectReactions = [];
return;
}
}
}
exports.Internal = Internal;
function react(reactions, param) {
for (let i = 0; i < reactions.length; ++i) {
const {
internal,
state,
procedure
} = reactions[i];
call(internal, state, procedure, param);
}
}
function call(internal, state, procedure, param) {
if (procedure == null) return state ? internal.resolve(param) : internal.reject(param);
try {
internal.resolve(procedure(param));
} catch (reason) {
internal.reject(reason);
}
}
function isPromiseLike(value) {
return value != null && typeof value === 'object' && 'then' in value && typeof value.then === 'function';
}
exports.isPromiseLike = isPromiseLike;
function isAtomicPromiseLike(value) {
return exports.internal in value;
}
exports.never = new class Never extends Promise {
static get [Symbol.species]() {
return Never;
}
constructor() {
super(function_1.noop);
}
then() {
return this;
}
catch() {
return this;
}
finally() {
return this;
}
}();
/***/ }),
/***/ 4119:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.Math = exports.SVG = exports.HTML = exports.Shadow = exports.API = void 0;
const proxy_1 = __webpack_require__(3624);
const dom_1 = __webpack_require__(5761);
function API(baseFactory, container) {
return new Proxy(() => 0, handle(baseFactory, container));
}
exports.API = API;
exports.Shadow = API(dom_1.html, dom_1.shadow);
exports.HTML = API(dom_1.html);
exports.SVG = API(dom_1.svg);
exports.Math = API(dom_1.math);
function handle(baseFactory, container) {
return {
apply(target, _, [tag, ...args]) {
return this.get(target, tag, target)(...args);
},
get: (target, prop) => target[prop] || prop in target || typeof prop !== 'string' ? target[prop] : target[prop] = builder(prop)
};
function builder(tag) {
return function build(attrs, children, factory) {
if (typeof children === 'function') return build(attrs, undefined, children);
if (typeof attrs === 'function') return build(undefined, undefined, attrs);
if (isElChildren(attrs)) return build(undefined, attrs, factory);
const el = elem(tag, factory, attrs, children);
return new proxy_1.ElementProxy(tag, el, children, container?.(el));
};
}
function elem(tag, factory, attrs, children) {
if (!factory) return baseFactory(tag, attrs);
const el = (0, dom_1.define)(factory(baseFactory, tag, attrs ?? {}, children), attrs);
switch (el.tagName) {
case tag:
case tag.toUpperCase():
return el;
default:
throw new Error(`Typed-DOM: Expected tag name is "${tag.toLowerCase()}" but actually "${el.tagName.toLowerCase()}"`);
}
}
}
function isElChildren(value) {
if (value === undefined) return false;
if (value[Symbol.iterator]) return true;
if (typeof value['nodeType'] === 'number') return true;
for (const name of Object.keys(value)) {
const val = value[name];
return val !== null && typeof val === 'object';
}
return false;
}
/***/ }),
/***/ 2423:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.Listeners = exports.symbols = void 0;
const array_1 = __webpack_require__(6876);
var symbols;
(function (symbols) {
// Optional
symbols.proxy = Symbol.for('typed-dom::proxy');
// Optional
symbols.listeners = Symbol.for('typed-dom::listeners');
})(symbols || (exports.symbols = symbols = {}));
class Listeners {
static of(target) {
return target[symbols.listeners] ?? target.element[symbols.proxy]?.[symbols.listeners];
}
constructor(element) {
this.element = element;
this.targets = [];
}
get mutation() {
return 'onmutate' in this.element && null != this.element['onmutate'];
}
get connection() {
return 'onconnect' in this.element && null != this.element['onconnect'];
}
get disconnection() {
return 'ondisconnect' in this.element && null != this.element['ondisconnect'];
}
haveConnectionListener() {
return this.targets.length > 0 || this.connection || this.disconnection;
}
add(target) {
const i = this.targets.indexOf(target);
i === -1 && this.targets.push(target);
}
del(target) {
const i = this.targets.indexOf(target);
i !== -1 && (0, array_1.splice)(this.targets, i, 1);
}
dispatchMutateEvent() {
if (!this.mutation) return;
this.element.dispatchEvent(new Event('mutate', {
bubbles: false,
cancelable: false
}));
}
dispatchConnectEvent(targets = this.targets) {
if (targets.length === 0) return;
if (targets !== this.targets && !this.element.isConnected) return;
for (const target of targets) {
const listeners = Listeners.of(target);
listeners?.dispatchConnectEvent();
if (!listeners?.connection) continue;
target.element.dispatchEvent(new Event('connect', {
bubbles: false,
cancelable: false
}));
}
}
dispatchDisconnectEvent(targets = this.targets) {
if (targets.length === 0) return;
if (targets !== this.targets && !this.element.isConnected) return;
for (const target of targets) {
const listeners = Listeners.of(target);
listeners?.dispatchDisconnectEvent();
if (!listeners?.disconnection) continue;
target.element.dispatchEvent(new Event('disconnect', {
bubbles: false,
cancelable: false
}));
}
}
}
exports.Listeners = Listeners;
/***/ }),
/***/ 3624:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
var _a;
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.ElementProxy = void 0;
const alias_1 = __webpack_require__(5413);
const internal_1 = __webpack_require__(2423);
class ElementProxy {
constructor(tag, element, children, container = element) {
this.tag = tag;
this.element = element;
this.container = container;
this.isInternalUpdate = false;
this.isInit = true;
this[_a] = new internal_1.Listeners(this.element);
this.$children = children;
const type = typeof children;
switch (true) {
case type === 'undefined':
this.type = 0 /* ElChildType.Void */;
break;
case type === 'string':
this.type = 1 /* ElChildType.Text */;
break;
case type === 'object' && typeof children['nodeType'] === 'number':
this.type = 2 /* ElChildType.Node */;
break;
case (0, alias_1.isArray)(children):
this.type = 3 /* ElChildType.Array */;
break;
case type === 'object':
this.type = 4 /* ElChildType.Struct */;
break;
default:
throw new TypeError(`Typed-DOM: Invalid children type`);
}
throwErrorIfUnavailable(this);
this.element[internal_1.symbols.proxy] = this;
switch (this.type) {
case 0 /* ElChildType.Void */:
break;
case 1 /* ElChildType.Text */:
case 2 /* ElChildType.Node */:
this.children = children;
break;
case 3 /* ElChildType.Array */:
this.$children = children;
this.children = children;
break;
case 4 /* ElChildType.Struct */:
this.$children = this.observe(children);
this.children = children;
break;
default:
throw new TypeError(`Typed-DOM: Invalid children type`);
}
this.isInit = false;
}
observe(children) {
for (const name of Object.keys(children)) {
let child = children[name];
Object.defineProperty(children, name, {
configurable: true,
enumerable: true,
get() {
return child;
},
set: newChild => {
if (!this.isInternalUpdate) {
this.children = {
[name]: newChild
};
} else {
child = newChild;
this.isInternalUpdate = false;
}
}
});
}
return children;
}
get children() {
switch (this.type) {
case 1 /* ElChildType.Text */:
return this.container.textContent;
default:
return this.$children;
}
}
set children(children) {
const container = this.container;
const removedChildren = [];
const addedChildren = [];
const listeners = this[internal_1.symbols.listeners];
let isMutated = false;
switch (this.type) {
case 0 /* ElChildType.Void */:
return;
case 2 /* ElChildType.Node */:
this.$children = children;
container.replaceChildren(children);
isMutated = true;
break;
case 1 /* ElChildType.Text */:
{
if (listeners.mutation) {
const newText = children;
const oldText = this.children;
if (newText === oldText) break;
container.textContent = newText;
isMutated = true;
} else {
container.textContent = children;
}
break;
}
case 3 /* ElChildType.Array */:
{
const sourceChildren = children;
const targetChildren = this.$children;
isMutated ||= sourceChildren.length !== targetChildren.length;
for (let i = 0; i < sourceChildren.length; ++i) {
const newChild = sourceChildren[i];
const oldChild = targetChildren[i];
if (this.isInit) {
throwErrorIfUnavailable(newChild, container);
const hasListener = internal_1.Listeners.of(newChild)?.haveConnectionListener();
if (newChild.element.parentNode !== container) {
isMutated = true;
hasListener && addedChildren.push(newChild);
} else {
isMutated ||= newChild.element !== container.childNodes[i];
}
hasListener && listeners.add(newChild);
continue;
} else if (newChild === oldChild) {
continue;
} else if (newChild.element.parentNode !== oldChild?.element.parentNode) {
throwErrorIfUnavailable(newChild, container);
internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
}
isMutated = true;
}
if (isMutated || sourceChildren.length === 0 && container.firstChild) {
container.replaceChildren(...sourceChildren.map(c => c.element));
}
this.$children = sourceChildren;
for (let i = 0; i < targetChildren.length; ++i) {
const oldChild = targetChildren[i];
if (oldChild.element.parentNode === container) continue;
internal_1.Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
}
break;
}
case 4 /* ElChildType.Struct */:
{
const sourceChildren = children;
const targetChildren = this.$children;
for (const name of Object.keys(sourceChildren)) {
const newChild = sourceChildren[name];
const oldChild = targetChildren[name];
if (!newChild) continue;
if (this.isInit) {
throwErrorIfUnavailable(newChild, container);
const hasListener = internal_1.Listeners.of(newChild)?.haveConnectionListener();
if (newChild.element.parentNode !== container) {
container.appendChild(newChild.element);
isMutated = true;
hasListener && addedChildren.push(newChild);
}
hasListener && listeners.add(newChild);
continue;
} else if (newChild === oldChild) {
continue;
} else if (newChild.element.parentNode !== oldChild.element.parentNode) {
throwErrorIfUnavailable(newChild, container);
container.replaceChild(newChild.element, oldChild.element);
internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
internal_1.Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
}
isMutated = true;
this.isInternalUpdate = true;
targetChildren[name] = newChild;
}
break;
}
}
listeners.dispatchDisconnectEvent(removedChildren);
listeners.dispatchConnectEvent(addedChildren);
isMutated && listeners.dispatchMutateEvent();
}
}
exports.ElementProxy = ElementProxy;
_a = internal_1.symbols.listeners;
function throwErrorIfUnavailable(child, newParent) {
const oldParent = child.element.parentNode;
if (!oldParent || oldParent === newParent || !(internal_1.symbols.proxy in oldParent)) return;
throw new Error(`Typed-DOM: Proxy children must be removed from the old parent proxy before assigning to the new parent proxy`);
}
/***/ }),
/***/ 3018:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.scope = void 0;
function scope(rule) {
return ` { ${rule} }`;
}
exports.scope = scope;
/***/ }),
/***/ 5761:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.defrag = exports.prepend = exports.append = exports.isChildren = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = void 0;
const alias_1 = __webpack_require__(5413);
const memoize_1 = __webpack_require__(6925);
var caches;
(function (caches) {
// Closed only.
caches.shadows = new WeakMap();
caches.shadow = (0, memoize_1.memoize)((el, opts) => el.attachShadow(opts), caches.shadows);
caches.fragment = document.createDocumentFragment();
})(caches || (caches = {}));
function shadow(el, opts, children, factory = exports.html) {
if (typeof el === 'string') return shadow(factory(el), opts, children, factory);
if (typeof opts === 'function') return shadow(el, undefined, children, opts);
if (typeof children === 'function') return shadow(el, opts, undefined, children);
if (isChildren(opts)) return shadow(el, undefined, opts, factory);
return defineChildren(!opts ? el.shadowRoot ?? caches.shadows.get(el) ?? el.attachShadow({
mode: 'open'
}) : opts.mode === 'open' ? el.shadowRoot ?? el.attachShadow(opts) : caches.shadow(el, opts), children);
}
exports.shadow = shadow;
function frag(children) {
return defineChildren(caches.fragment.cloneNode(true), children);
}
exports.frag = frag;
exports.html = element(document, "HTML" /* NS.HTML */);
exports.svg = element(document, "SVG" /* NS.SVG */);
exports.math = element(document, "MathML" /* NS.Math */);
function text(source) {
return document.createTextNode(source);
}
exports.text = text;
function element(context, ns) {
return (tag, attrs, children) => {
return !attrs || isChildren(attrs) ? defineChildren(elem(context, ns, tag, {}), attrs ?? children) : defineChildren(defineAttrs(elem(context, ns, tag, attrs), attrs), children);
};
}
exports.element = element;
function elem(context, ns, tag, attrs) {
if (!('createElement' in context)) throw new Error(`Typed-DOM: Scoped custom elements are not supported on this browser`);
const opts = 'is' in attrs ? {
is: attrs['is']
} : undefined;
switch (ns) {
case "HTML" /* NS.HTML */:
return context.createElement(tag, opts);
case "SVG" /* NS.SVG */:
return context.createElementNS('http://www.w3.org/2000/svg', tag, opts);
case "MathML" /* NS.Math */:
return context.createElementNS('http://www.w3.org/1998/Math/MathML', tag, opts);
}
}
function define(node, attrs, children) {
// Bug: TypeScript
// Need the next type assertions to suppress an impossible type error on dependent projects.
// Probably caused by typed-query-selector.
//
// typed-dom/dom.ts(113,3): Error TS2322: Type 'ParentNode & Node' is not assignable to type 'E'.
// 'E' could be instantiated with an arbitrary type which could be unrelated to 'ParentNode & Node'.
//
return !attrs || isChildren(attrs) ? defineChildren(node, attrs ?? children) : defineChildren(defineAttrs(node, attrs), children);
}
exports.define = define;
function defineAttrs(el, attrs) {
for (const name of Object.keys(attrs)) {
switch (name) {
case 'is':
continue;
}
const value = attrs[name];
switch (typeof value) {
case 'string':
el.setAttribute(name, value);
if (name.startsWith('on')) {
const type = name.slice(2).toLowerCase();
switch (type) {
case 'mutate':
case 'connect':
case 'disconnect':
const prop = `on${type}`;
el[prop] ?? Object.defineProperty(el, prop, {
configurable: true,
enumerable: false,
writable: true,
value: prop in el && !(0, alias_1.hasOwnProperty)(el, prop) ? ev => ev.returnValue : ''
});
}
}
continue;
case 'function':
if (name.length < 3) throw new Error(`Typed-DOM: Attribute names for event listeners must have an event name but got "${name}"`);
const names = name.split(/\s+/);
for (const name of names) {
if (!name.startsWith('on')) throw new Error(`Typed-DOM: Attribute names for event listeners must start with "on" but got "${name}"`);
const type = name.slice(2).toLowerCase();
el.addEventListener(type, value, {
passive: ['wheel', 'mousewheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'].includes(type)
});
switch (type) {
case 'mutate':
case 'connect':
case 'disconnect':
const prop = `on${type}`;
el[prop] ?? Object.defineProperty(el, prop, {
configurable: true,
enumerable: false,
writable: true,
value: prop in el && !(0, alias_1.hasOwnProperty)(el, prop) ? ev => ev.returnValue : ''
});
}
}
continue;
case 'object':
el.removeAttribute(name);
continue;
default:
continue;
}
}
return el;
}
function defineChildren(node, children) {
if (children === undefined) return node;
if (typeof children === 'string') {
node.textContent = children;
} else if (((0, alias_1.isArray)(children) || !(Symbol.iterator in children)) && !node.firstChild) {
for (let i = 0; i < children.length; ++i) {
const child = children[i];
typeof child === 'object' ? node.appendChild(child) : node.append(child);
}
} else {
node.replaceChildren(...children);
}
return node;
}
function isChildren(value) {
return value?.[Symbol.iterator] !== undefined;
}
exports.isChildren = isChildren;
function append(node, children) {
if (children === undefined) return node;
if (typeof children === 'string') {
node.append(children);
} else if ((0, alias_1.isArray)(children) || !(Symbol.iterator in children)) {
for (let i = 0; i < children.length; ++i) {
const child = children[i];
typeof child === 'object' ? node.appendChild(child) : node.append(child);
}
} else {
for (const child of children) {
typeof child === 'object' ? node.appendChild(child) : node.append(child);
}
}
return node;
}
exports.append = append;
function prepend(node, children) {
if (children === undefined) return node;
if (typeof children === 'string') {
node.prepend(children);
} else if ((0, alias_1.isArray)(children) || !(Symbol.iterator in children)) {
for (let i = 0; i < children.length; ++i) {
const child = children[i];
typeof child === 'object' ? node.insertBefore(child, null) : node.prepend(child);
}
} else {
for (const child of children) {
typeof child === 'object' ? node.insertBefore(child, null) : node.prepend(child);
}
}
return node;
}
exports.prepend = prepend;
function defrag(nodes) {
const acc = [];
let appendable = false;
for (let i = 0, len = nodes.length; i < len; ++i) {
const node = nodes[i];
if (typeof node === 'object') {
acc.push(node);
appendable = false;
} else if (node !== '') {
appendable ? acc[acc.length - 1] += node : acc.push(node);
appendable = true;
}
}
return acc;
}
exports.defrag = defrag;
/***/ }),
/***/ 1365:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.bind = exports.delegate = exports.once = exports.listen = exports.currentTarget = void 0;
const alias_1 = __webpack_require__(5413);
const promise_1 = __webpack_require__(8312);
const function_1 = __webpack_require__(1825);
exports.currentTarget = Symbol.for('typed-dom::currentTarget');
function listen(target, selector, type, listener, option) {
return typeof type === 'string' ? delegate(target, selector, type, listener, option) : bind(target, selector, type, listener);
}
exports.listen = listen;
function once(target, selector, type, listener, option) {
switch (typeof type) {
case 'string':
switch (typeof listener) {
case 'function':
return delegate(target, selector, type, listener, {
...(typeof option === 'boolean' ? {
capture: option
} : option),
once: true
});
case 'object':
option = {
...listener,
once: true
};
break;
default:
option = {
once: true
};
}
return new promise_1.AtomicPromise(resolve => void delegate(target, selector, type, resolve, option));
case 'function':
return bind(target, selector, type, {
...(typeof listener === 'boolean' ? {
capture: listener
} : listener),
once: true
});
case 'object':
option = {
...type,
once: true
};
break;
default:
option = {
once: true
};
}
return new promise_1.AtomicPromise(resolve => void bind(target, selector, resolve, option));
}
exports.once = once;
function delegate(target, selector, type, listener, option) {
return bind(target, type, ev => {
const cx = ev.target.shadowRoot ? ev.composedPath()[0]?.closest(selector) : ev.target?.closest(selector);
cx && once(cx, type, e => {
e === ev && listener(ev);
}, option);
}, {
...(typeof option === 'boolean' ? {
capture: true
} : option),
capture: true
});
}
exports.delegate = delegate;
function bind(target, type, listener, option) {
switch (type) {
case 'mutate':
case 'connect':
case 'disconnect':
const prop = `on${type}`;
target[prop] ?? Object.defineProperty(target, prop, {
configurable: true,
enumerable: false,
writable: true,
value: prop in target && !(0, alias_1.hasOwnProperty)(target, prop) ? ev => ev.returnValue : ''
});
}
target.addEventListener(type, handler, option);
return (0, function_1.singleton)(() => void target.removeEventListener(type, handler, option));
function handler(ev) {
ev[exports.currentTarget] = ev.currentTarget;
listener(ev);
}
}
exports.bind = bind;
/***/ }),
/***/ 2929:
/***/ ((__unused_webpack_module, exports) => {
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.querySelectorAll = exports.querySelectorAllWith = exports.querySelectorWith = void 0;
function querySelectorWith(node, selector) {
return 'matches' in node && node.matches(selector) ? node : node.querySelector(selector);
}
exports.querySelectorWith = querySelectorWith;
function querySelectorAllWith(node, selector) {
const acc = [];
if ('matches' in node && node.matches(selector)) {
acc.push(node);
}
for (let es = node.querySelectorAll(selector), len = es.length, i = 0; i < len; ++i) {
acc.push(es[i]);
}
return acc;
}
exports.querySelectorAllWith = querySelectorAllWith;
function querySelectorAll(node, selector) {
const acc = [];
for (let es = node.querySelectorAll(selector), len = es.length, i = 0; i < len; ++i) {
acc.push(es[i]);
}
return acc;
}
exports.querySelectorAll = querySelectorAll;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
var exports = __webpack_exports__;
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.scope = exports.querySelectorAllWith = exports.querySelectorWith = exports.querySelectorAll = exports.currentTarget = exports.once = exports.bind = exports.delegate = exports.listen = exports.defrag = exports.prepend = exports.append = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = exports.Math = exports.SVG = exports.HTML = exports.Shadow = exports.API = void 0;
var builder_1 = __webpack_require__(4119);
Object.defineProperty(exports, "API", ({
enumerable: true,
get: function () {
return builder_1.API;
}
}));
Object.defineProperty(exports, "Shadow", ({
enumerable: true,
get: function () {
return builder_1.Shadow;
}
}));
Object.defineProperty(exports, "HTML", ({
enumerable: true,
get: function () {
return builder_1.HTML;
}
}));
Object.defineProperty(exports, "SVG", ({
enumerable: true,
get: function () {
return builder_1.SVG;
}
}));
Object.defineProperty(exports, "Math", ({
enumerable: true,
get: function () {
return builder_1.Math;
}
}));
var dom_1 = __webpack_require__(5761);
Object.defineProperty(exports, "shadow", ({
enumerable: true,
get: function () {
return dom_1.shadow;
}
}));
Object.defineProperty(exports, "frag", ({
enumerable: true,
get: function () {
return dom_1.frag;
}
}));
Object.defineProperty(exports, "html", ({
enumerable: true,
get: function () {
return dom_1.html;
}
}));
Object.defineProperty(exports, "svg", ({
enumerable: true,
get: function () {
return dom_1.svg;
}
}));
Object.defineProperty(exports, "math", ({
enumerable: true,
get: function () {
return dom_1.math;
}
}));
Object.defineProperty(exports, "text", ({
enumerable: true,
get: function () {
return dom_1.text;
}
}));
Object.defineProperty(exports, "element", ({
enumerable: true,
get: function () {
return dom_1.element;
}
}));
Object.defineProperty(exports, "define", ({
enumerable: true,
get: function () {
return dom_1.define;
}
}));
Object.defineProperty(exports, "append", ({
enumerable: true,
get: function () {
return dom_1.append;
}
}));
Object.defineProperty(exports, "prepend", ({
enumerable: true,
get: function () {
return dom_1.prepend;
}
}));
Object.defineProperty(exports, "defrag", ({
enumerable: true,
get: function () {
return dom_1.defrag;
}
}));
var listener_1 = __webpack_require__(1365);
Object.defineProperty(exports, "listen", ({
enumerable: true,
get: function () {
return listener_1.listen;
}
}));
Object.defineProperty(exports, "delegate", ({
enumerable: true,
get: function () {
return listener_1.delegate;
}
}));
Object.defineProperty(exports, "bind", ({
enumerable: true,
get: function () {
return listener_1.bind;
}
}));
Object.defineProperty(exports, "once", ({
enumerable: true,
get: function () {
return listener_1.once;
}
}));
Object.defineProperty(exports, "currentTarget", ({
enumerable: true,
get: function () {
return listener_1.currentTarget;
}
}));
var query_1 = __webpack_require__(2929);
Object.defineProperty(exports, "querySelectorAll", ({
enumerable: true,
get: function () {
return query_1.querySelectorAll;
}
}));
Object.defineProperty(exports, "querySelectorWith", ({
enumerable: true,
get: function () {
return query_1.querySelectorWith;
}
}));
Object.defineProperty(exports, "querySelectorAllWith", ({
enumerable: true,
get: function () {
return query_1.querySelectorAllWith;
}
}));
var css_1 = __webpack_require__(3018);
Object.defineProperty(exports, "scope", ({
enumerable: true,
get: function () {
return css_1.scope;
}
}));
})();
/******/ return __webpack_exports__;
/******/ })()
;
});