tagu-tagu 3.5.1 → 4.0.0-alpha.0

package/dist/bundle.min.js

@@ -1 +1 @@
-var b=class{node2Data=new WeakMap;addCallbacks(e,n){if(!n)return;this.node2DescendantCallbacks.has(e)||this.node2DescendantCallbacks.set(e,{});let o=this.node2DescendantCallbacks.get(e);D(o,n);let i=this.node2Data.get(e);k(o,i)}setDataRecord(e,n){n&&this.node2Data.set(e,n)}resolveCallbacks(e,n){let o=(l,f)=>{if(k(f,this.node2Data.get(l)),!!Object.keys(f).length){if(!l.parentElement){this.node2DescendantCallbacks.has(l)||this.node2DescendantCallbacks.set(l,{});let m=this.node2DescendantCallbacks.get(l);m&&D(m,f);return}o(l.parentElement,f)}},i=this.node2DescendantCallbacks.get(n);i&&o(e,i)}node2DescendantCallbacks=new WeakMap};function k(t,e){for(let n in e)if(n in t){for(let o of t[n])o(e[n]);delete t[n]}}var s=new b;function H(t,e){s.setDataRecord(t,e)}function O(t){if(!t)return;let e={};for(let n in t){let o=t[n];e[n]=[o]}if(Object.keys(e).length)return e}function D(t,e){for(let n in e)t[n]||(t[n]=[]),t[n].push(...e[n])}function C(t,e){if(!t)return;let n=s.node2Data.get(t);return n&&e in n?n[e]:C(t.parentElement,e)}function h(t,e){if(typeof e=="string")return P(t,e);s.addCallbacks(t,O(e))}function P(t,e){return new Promise(n=>{let o=C(t,e);o!==void 0?n(o):s.addCallbacks(t,{[e]:[n]})})}function j(t,e=n=>n){return new T(t,e)}var T=class{constructor(e,n){this.key=e;this.map=n}};var c=class{next=null;firstNode=null};var d=class{#t;constructor(e){this.#t=e}get=()=>this.#t;set(e){this.#t=e,this.#n("change")}#n(e){this.#e.dispatchEvent(new Event(e))}#e=new EventTarget;on(e,n){this.#e.addEventListener(e,n)}};function z(t,e){return typeof e=="function"?Array.isArray(t)?R(t,e):R([t],()=>e(t.get())):new d(t)}function R(t,e){let n=new d(e()),o=()=>{n.set(e())};for(let i of t)i.on("change",o);return n}function B(t,e){let n=V(e);K(n);for(let o of n)q(t,o)}function q(t,e){e instanceof c?e.run(t):(s.resolveCallbacks(t,e),t.appendChild(e))}function V(t){return t.map(e=>{if(typeof e=="string"||e instanceof d){let n=document.createTextNode("");return v(e,o=>{n.textContent=o}),n}return e})}function K(t){for(let e=0;e<t.length;e++){let n=t[e];n instanceof c&&(n.next=t[e+1]??null)}}function F(t){let e=t.next;return e===null?null:e instanceof Node?e:e.firstNode?e.firstNode:F(e)}function g(t){let e=F(t);return e?.parentElement?e:null}function v(t,e){if(typeof t=="string")e(t);else if(t instanceof d){let n=()=>{e(t.get())};n(),t.on("change",n)}else e(t)}function x(t,e,n){e instanceof T?h(t,{[e.key]:o=>{let l=o instanceof d?z([o],()=>e.map(o.get())):e.map(o);v(l,n)}}):v(e,n)}function G(t,e){e!==void 0&&x(t,e,n=>{t.innerHTML=n})}function A(t,e){e!==void 0&&x(t,e,n=>{t.textContent=n})}function U(t,e){let n=t.style;if(n instanceof CSSStyleDeclaration)for(let o in e){let i=e[o];x(t,i,l=>n.setProperty(o,l))}}function W(t,e){for(let n in e){let o=e[n];x(t,o,i=>{i?t.setAttribute(n,i):t.removeAttribute(n)})}}function Q(t,e){for(let n in e){let o=e[n];x(t,o,i=>{t[n]=i})}}function _(t,e){for(let n in e){let o=t.querySelector(n);o&&w(o,e[n])}}function J(t,e){for(let n in e){let o=t.querySelectorAll(n);for(let i of o)w(i,e[n])}}function X(t,e){for(let n in e){let i=e[n];i&&(typeof i=="function"?t.addEventListener(n,i):i instanceof T?h(t,{[i.key]:l=>{let f=i.map(l);t.addEventListener(n,f)}}):t.addEventListener(n,i.listener,i.options))}}function w(t,e){t&&(typeof e=="string"||e instanceof d?A(t,e):Array.isArray(e)?B(t,e):typeof e=="function"?e(t):(G(t,e.html),A(t,e.text),W(t,e.attr),Q(t,e.prop),U(t,e.css),_(t,e.$),J(t,e.$$),X(t,e.on),H(t,e.data)))}function y(t,...e){let n=typeof t=="string"?document.querySelector(t):t;for(let o of e)w(n,o);return n}function Tt(t,...e){for(let n of document.querySelectorAll(t))y(n,...e)}function ht(t,...e){let n=document.createElementNS("http://www.w3.org/2000/svg",t);return y(n,...e)}function r(t,...e){let n=document.createElement(t);return y(n,...e),n}function vt(t,...e){let n=L({html:t}).children[0];return y(n,...e)}function Ct(...t){return r("h1",...t)}function wt(...t){return r("h2",...t)}function Lt(...t){return r("h3",...t)}function Mt(...t){return r("h4",...t)}function Nt(...t){return r("h5",...t)}function It(...t){return r("h6",...t)}function kt(...t){return r("p",...t)}function Dt(...t){return r("section",...t)}function Ht(...t){return r("button",...t)}function Rt(...t){return r("span",...t)}function zt(t){function e(n,o){return`${n} {${Object.keys(o).map(i=>`${i}: ${o[i]};`).join("")}}`}return r("style",[Object.keys(t).map(n=>e(n,t[n])).join("")])}function L(...t){return r("div",...t)}function Bt(...t){return L({css:{display:"flex"}},...t)}function Ft(...t){return r("input",...t)}function At(...t){return r("textarea",...t)}function $t(...t){return r("select",...t)}function Ot(...t){return r("option",...t)}function Pt(...t){return r("br",...t)}function jt(...t){return r("th",...t)}function qt(...t){return r("tr",...t)}function Vt(...t){return r("td",...t)}function Kt(...t){return r("b",...t)}function Gt(...t){return r("label",...t)}function Ut(...t){return r("a",...t)}function Wt(...t){return r("blockquote",...t)}function Qt(...t){return r("li",...t)}function _t(...t){return r("ol",...t)}function Jt(...t){return r("ul",...t)}function Xt(...t){return r("audio",...t)}function Yt(...t){return r("video",...t)}function Zt(...t){return r("img",...t)}function te(...t){return r("canvas",...t)}function ee(...t){return r("iframe",...t)}function ne(...t){return r("form",...t)}function oe(...t){return r("table",...t)}function ie(...t){return r("tbody",...t)}function re(...t){return r("hr",...t)}function ae(...t){return r("main",...t)}function Y(t,e){return new M(t,e)}var M=class extends c{constructor(n,o){super();this.list=n;this.map=o}run(n){let o=new Map,i=new Map,l=()=>{let f=[];for(let a of this.list.get())o.has(a)||f.push(a);let m=[],u=new Set(this.list.get());for(let a of i.keys()){let p=i.get(a);p&&!u.has(p)&&m.push(a)}for(let a of f){let p=this.map(a),S=typeof p=="string"?document.createTextNode(p):p;s.resolveCallbacks(n,S),i.set(S,a),o.set(a,S)}for(let a of m){a.parentNode?.removeChild(a);let p=i.get(a);i.delete(a),p&&o.delete(p)}for(let a of[...i.keys()])a.parentElement?.removeChild(a);let E=g(this);for(let a of this.list.get())n.insertBefore(o.get(a),E);this.firstNode=o.get(this.list.get()[0])??null};l(),this.list.on("change",()=>{l()})}};function Z(t,e,n){return new N(t,e,n)}var N=class extends c{#t;#n;#e;constructor(e,n,o){super(),this.#t=e,this.#n=n,this.#e=o}run(e){let n,o,i=()=>{let l=g(this);this.#t.get()?(n||(n=this.#n()),s.resolveCallbacks(e,n),this.firstNode=n,o?.remove(),e.insertBefore(n,l)):(o||(o=this.#e?.()),o&&s.resolveCallbacks(e,o),this.firstNode=o??null,n?.remove(),o&&e.insertBefore(o,l))};i(),this.#t.on("change",i)}};function $(t,e,n){return Array.isArray(e)?new I(t,e,n):$(t,Object.keys(e).map(o=>({case:o,show:e[o]})),n)}var I=class extends c{#t;#n;#e;constructor(e,n,o){super(),this.#t=e,this.#n=n,this.#e=o}run(e){let n=new Map,o=new Map;for(let u of this.#n)o.set(u.case,u);let i,l,f=u=>{let E=o.get(u);if(E){if(!n.has(u)){let a=E.show();n.set(u,a)}return n.get(u)}return this.#e&&!l&&(l=this.#e()),l},m=()=>{let u=this.#t.get(),E=g(this),a=f(u);a&&s.resolveCallbacks(e,a),i?.remove(),a&&e.insertBefore(a,E),i=a};m(),this.#t.on("change",m)}};export{c as ControlFlow,Bt as FlexDiv,Y as For,r as Html,Z as If,y as Modify,Tt as ModifyAll,d as State,ht as Svg,$ as Switch,vt as Tag,Ut as a,v as applyStringOrState,Xt as audio,Kt as b,Wt as blockquote,Pt as br,Ht as button,te as canvas,L as div,C as findData,ne as form,Ct as h1,wt as h2,Lt as h3,Mt as h4,Nt as h5,It as h6,re as hr,ee as iframe,Zt as img,Ft as input,Gt as label,Qt as li,ae as main,_t as ol,Ot as option,kt as p,Dt as section,$t as select,Rt as span,zt as style,oe as table,ie as tbody,Vt as td,At as textarea,jt as th,qt as tr,Jt as ul,j as useBinding,z as useState,Yt as video,h as waitForData};
+var b=class{node2Data=new WeakMap;addCallbacks(e,n){if(!n)return;this.node2DescendantCallbacks.has(e)||this.node2DescendantCallbacks.set(e,{});let i=this.node2DescendantCallbacks.get(e);D(i,n);let o=this.node2Data.get(e);k(i,o)}setDataRecord(e,n){n&&this.node2Data.set(e,n)}resolveCallbacks(e,n){let i=(s,l)=>{if(k(l,this.node2Data.get(s)),!!Object.keys(l).length){if(!s.parentElement){this.node2DescendantCallbacks.has(s)||this.node2DescendantCallbacks.set(s,{});let m=this.node2DescendantCallbacks.get(s);m&&D(m,l);return}i(s.parentElement,l)}},o=this.node2DescendantCallbacks.get(n);o&&i(e,o)}node2DescendantCallbacks=new WeakMap};function k(t,e){for(let n in e)if(n in t){for(let i of t[n])i(e[n]);delete t[n]}}var c=new b;function H(t,e){c.setDataRecord(t,e)}function O(t){if(!t)return;let e={};for(let n in t){let i=t[n];e[n]=[i]}if(Object.keys(e).length)return e}function D(t,e){for(let n in e)t[n]||(t[n]=[]),t[n].push(...e[n])}function w(t,e){if(!t)return;let n=c.node2Data.get(t);return n&&e in n?n[e]:w(t.parentElement,e)}function h(t,e){if(typeof e=="string")return j(t,e);c.addCallbacks(t,O(e))}function j(t,e){return new Promise(n=>{let i=w(t,e);i!==void 0?n(i):c.addCallbacks(t,{[e]:[n]})})}function q(t,e=n=>n){return new T(t,e)}var T=class{constructor(e,n){this.key=e;this.map=n}};var f=class{next=null;firstNode=null};var d=class{#t;constructor(e){this.#t=e}get=()=>this.#t;set(e){this.#t=e,this.#n("change")}#n(e){this.#e.dispatchEvent(new Event(e))}#e=new EventTarget;on(e,n){this.#e.addEventListener(e,n)}};function R(t,e){return typeof e=="function"?Array.isArray(t)?z(t,e):z([t],()=>e(t.get())):new d(t)}function z(t,e){let n=new d(e()),i=()=>{n.set(e())};for(let o of t)o.on("change",i);return n}function B(t,e){let n=K(e);W(n);for(let i of n)V(t,i)}function V(t,e){e instanceof f?e.run(t):(c.resolveCallbacks(t,e),t.appendChild(e))}function K(t){return t.map(e=>{if(typeof e=="string"||e instanceof d){let n=document.createTextNode("");return v(e,i=>{n.textContent=i}),n}return e})}function W(t){for(let e=0;e<t.length;e++){let n=t[e];n instanceof f&&(n.next=t[e+1]??null)}}function F(t){let e=t.next;return e===null?null:e instanceof Node?e:e.firstNode?e.firstNode:F(e)}function g(t){let e=F(t);return e?.parentElement?e:null}function v(t,e){if(typeof t=="string")e(t);else if(t instanceof d){let n=()=>{e(t.get())};n(),t.on("change",n)}else e(t)}function x(t,e,n){e instanceof T?h(t,{[e.key]:i=>{let s=i instanceof d?R([i],()=>e.map(i.get())):e.map(i);v(s,n)}}):v(e,n)}function G(t,e){e!==void 0&&x(t,e,n=>{t.innerHTML=n})}function A(t,e){e!==void 0&&x(t,e,n=>{t.textContent=n})}function U(t,e){let n=t.style;if(n instanceof CSSStyleDeclaration)for(let i in e){let o=e[i];x(t,o,s=>n.setProperty(i,s))}}function Q(t,e){for(let n in e){let i=e[n];x(t,i,o=>{o?t.setAttribute(n,o):t.removeAttribute(n)})}}function _(t,e){for(let n in e){let i=e[n];x(t,i,o=>{t[n]=o})}}function J(t,e){for(let n in e){let i=t.querySelector(n);i&&C(i,e[n])}}function X(t,e){for(let n in e){let i=t.querySelectorAll(n);for(let o of i)C(o,e[n])}}function Y(t,e){for(let n in e){let o=e[n];o&&(typeof o=="function"?t.addEventListener(n,o):o instanceof T?h(t,{[o.key]:s=>{let l=o.map(s);t.addEventListener(n,l)}}):t.addEventListener(n,o.listener,o.options))}}function P(t,e){G(t,e.html),A(t,e.text),Q(t,e.attr),_(t,e.prop),U(t,e.css),J(t,e.$),X(t,e.$$),Y(t,e.on),H(t,e.data)}function Z(t,e){let n={};for(let s in e.css){let l=e.css[s];typeof l=="string"&&(n[s]=l),l instanceof d&&(n[s]=l.get())}let i=e.animate;return i&&typeof i!="number"&&(i.duration??=400,i.easing??="swing",i.easing=i.easing==="swing"?"ease-in-out":i.easing),t.animate([{},n],i).finished.then(()=>P(t,e))}function C(t,e){if(t)if(typeof e=="string"||e instanceof d)A(t,e);else if(Array.isArray(e))B(t,e);else if(typeof e=="function"){let n=e(t);if(n instanceof Promise)return n}else{if(e.animate!==void 0)return Z(t,e);P(t,e)}}function y(t,...e){let n=typeof t=="string"?document.querySelector(t):t;return(async()=>{for(let i of e){let o=C(n,i);o&&await o}})(),n}function yt(t,...e){for(let n of document.querySelectorAll(t))y(n,...e)}function xt(t,...e){return new Promise(n=>{y(t,...e,i=>{n(i)})})}function bt(t,...e){let n=document.createElementNS("http://www.w3.org/2000/svg",t);return y(n,...e)}function r(t,...e){let n=document.createElement(t);return y(n,...e),n}function wt(t,...e){let n=I({html:t}).children[0];return y(n,...e)}function Lt(...t){return r("h1",...t)}function Mt(...t){return r("h2",...t)}function Nt(...t){return r("h3",...t)}function kt(...t){return r("h4",...t)}function Dt(...t){return r("h5",...t)}function Ht(...t){return r("h6",...t)}function zt(...t){return r("p",...t)}function Rt(...t){return r("section",...t)}function Bt(...t){return r("button",...t)}function Ft(...t){return r("span",...t)}function At(t){function e(n,i){return`${n} {${Object.keys(i).map(o=>`${o}: ${i[o]};`).join("")}}`}return r("style",[Object.keys(t).map(n=>e(n,t[n])).join("")])}function I(...t){return r("div",...t)}function Pt(...t){return I({css:{display:"flex"}},...t)}function $t(...t){return r("input",...t)}function Ot(...t){return r("textarea",...t)}function jt(...t){return r("select",...t)}function qt(...t){return r("option",...t)}function Vt(...t){return r("br",...t)}function Kt(...t){return r("th",...t)}function Wt(...t){return r("tr",...t)}function Gt(...t){return r("td",...t)}function Ut(...t){return r("b",...t)}function Qt(...t){return r("label",...t)}function _t(...t){return r("a",...t)}function Jt(...t){return r("blockquote",...t)}function Xt(...t){return r("li",...t)}function Yt(...t){return r("ol",...t)}function Zt(...t){return r("ul",...t)}function te(...t){return r("audio",...t)}function ee(...t){return r("video",...t)}function ne(...t){return r("img",...t)}function ie(...t){return r("canvas",...t)}function oe(...t){return r("iframe",...t)}function re(...t){return r("form",...t)}function ae(...t){return r("table",...t)}function se(...t){return r("tbody",...t)}function le(...t){return r("hr",...t)}function ce(...t){return r("main",...t)}function tt(t,e){return new L(t,e)}var L=class extends f{constructor(n,i){super();this.list=n;this.map=i}run(n){let i=new Map,o=new Map,s=()=>{let l=[];for(let a of this.list.get())i.has(a)||l.push(a);let m=[],u=new Set(this.list.get());for(let a of o.keys()){let p=o.get(a);p&&!u.has(p)&&m.push(a)}for(let a of l){let p=this.map(a),S=typeof p=="string"?document.createTextNode(p):p;c.resolveCallbacks(n,S),o.set(S,a),i.set(a,S)}for(let a of m){a.parentNode?.removeChild(a);let p=o.get(a);o.delete(a),p&&i.delete(p)}for(let a of[...o.keys()])a.parentElement?.removeChild(a);let E=g(this);for(let a of this.list.get())n.insertBefore(i.get(a),E);this.firstNode=i.get(this.list.get()[0])??null};s(),this.list.on("change",()=>{s()})}};function et(t,e,n){return new M(t,e,n)}var M=class extends f{#t;#n;#e;constructor(e,n,i){super(),this.#t=e,this.#n=n,this.#e=i}run(e){let n,i,o=()=>{let s=g(this);this.#t.get()?(n||(n=this.#n()),c.resolveCallbacks(e,n),this.firstNode=n,i?.remove(),e.insertBefore(n,s)):(i||(i=this.#e?.()),i&&c.resolveCallbacks(e,i),this.firstNode=i??null,n?.remove(),i&&e.insertBefore(i,s))};o(),this.#t.on("change",o)}};function $(t,e,n){return Array.isArray(e)?new N(t,e,n):$(t,Object.keys(e).map(i=>({case:i,show:e[i]})),n)}var N=class extends f{#t;#n;#e;constructor(e,n,i){super(),this.#t=e,this.#n=n,this.#e=i}run(e){let n=new Map,i=new Map;for(let u of this.#n)i.set(u.case,u);let o,s,l=u=>{let E=i.get(u);if(E){if(!n.has(u)){let a=E.show();n.set(u,a)}return n.get(u)}return this.#e&&!s&&(s=this.#e()),s},m=()=>{let u=this.#t.get(),E=g(this),a=l(u);a&&c.resolveCallbacks(e,a),o?.remove(),a&&e.insertBefore(a,E),o=a};m(),this.#t.on("change",m)}};export{f as ControlFlow,Pt as FlexDiv,tt as For,r as Html,et as If,y as Modify,yt as ModifyAll,xt as ModifyAsync,d as State,bt as Svg,$ as Switch,wt as Tag,_t as a,v as applyStringOrState,te as audio,Ut as b,Jt as blockquote,Vt as br,Bt as button,ie as canvas,I as div,w as findData,re as form,Lt as h1,Mt as h2,Nt as h3,kt as h4,Dt as h5,Ht as h6,le as hr,oe as iframe,ne as img,$t as input,Qt as label,Xt as li,ce as main,Yt as ol,qt as option,zt as p,Rt as section,jt as select,Ft as span,At as style,ae as table,se as tbody,Gt as td,Ot as textarea,Kt as th,Wt as tr,Zt as ul,q as useBinding,R as useState,ee as video,h as waitForData};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tagu-tagu",
-	"version": "3.5.1",
+	"version": "4.0.0-alpha.0",
 	"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
 	"keywords": [
 		"front-end",

package/src/Modify.ts

@@ -33,6 +33,12 @@ type ElementPropertyInitializer<TEventType2Event> = {
 	$?: $Record;
 	$$?: $Record;
 	data?: DataRecord;
+	animate?: number | AnimationOptions;
+};
+
+type AnimationOptions = {
+	duration?: number;
+	easing?: string;
 };
 
 export type ElementInitializer<
@@ -43,7 +49,7 @@ export type ElementInitializer<
 	| State
 	| ElementPropertyInitializer<TEventType2Event>
 	| ChildType[]
-	| ((element: TElement) => void);
+	| ((element: TElement) => any);
 
 export function applyStringOrState(
 	value: string | State,
@@ -190,6 +196,56 @@ function initializeEventListeners<TEventType2Event>(
 	}
 }
 
+function initializePropertyInitializerWithoutAnimation<
+	TElement extends Element,
+	TEventType2Event,
+>(
+	element: TElement,
+	initializer: ElementPropertyInitializer<TEventType2Event>,
+) {
+	initializeHtml(element, initializer.html);
+	initializeText(element, initializer.text);
+	initializeAttributes(element, initializer.attr);
+	initializeProps(element, initializer.prop);
+	initializeStyle(element, initializer.css);
+	initialize$(element, initializer.$);
+	initialize$$(element, initializer.$$);
+	initializeEventListeners(element, initializer.on);
+	initializeData(element, initializer.data);
+}
+
+function initializePropertyInitializerWithAnimation<
+	TElement extends Element,
+	TEventType2Event,
+>(
+	element: TElement,
+	initializer: ElementPropertyInitializer<TEventType2Event>,
+) {
+	const css = {} as Record<string, string>;
+	for (const key in initializer.css) {
+		const value = initializer.css[key];
+		if (typeof value === "string") {
+			css[key] = value;
+		}
+		if (value instanceof State) {
+			css[key] = value.get();
+		}
+	}
+
+	const options = initializer.animate;
+	if (options && typeof options !== "number") {
+		options.duration ??= 400;
+		options.easing ??= "swing";
+		options.easing =
+			options.easing === "swing" ? "ease-in-out" : options.easing;
+	}
+
+	const animation = element.animate([{}, css], options);
+	return animation.finished.then(() =>
+		initializePropertyInitializerWithoutAnimation(element, initializer),
+	);
+}
+
 function initialize<TElement extends Element, TEventType2Event>(
 	element: TElement | null,
 	initializer: ElementInitializer<TElement, TEventType2Event>,
@@ -200,17 +256,13 @@ function initialize<TElement extends Element, TEventType2Event>(
 	} else if (Array.isArray(initializer)) {
 		initializeChildBlock(element, initializer);
 	} else if (typeof initializer === "function") {
-		initializer(element);
+		const result = initializer(element);
+		if (result instanceof Promise) return result;
 	} else {
-		initializeHtml(element, initializer.html);
-		initializeText(element, initializer.text);
-		initializeAttributes(element, initializer.attr);
-		initializeProps(element, initializer.prop);
-		initializeStyle(element, initializer.css);
-		initialize$(element, initializer.$);
-		initialize$$(element, initializer.$$);
-		initializeEventListeners(element, initializer.on);
-		initializeData(element, initializer.data);
+		if (initializer.animate !== undefined) {
+			return initializePropertyInitializerWithAnimation(element, initializer);
+		}
+		initializePropertyInitializerWithoutAnimation(element, initializer);
 	}
 }
 
@@ -222,9 +274,14 @@ export function Modify<T extends Element>(
 		typeof elementOrSelector === "string"
 			? (document.querySelector(elementOrSelector) as T)
 			: elementOrSelector;
-	for (const initializer of initializers) {
-		initialize(element, initializer);
-	}
+
+	(async () => {
+		for (const initializer of initializers) {
+			const animation = initialize(element, initializer);
+			if (animation) await animation;
+		}
+	})();
+
 	return element;
 }
 
@@ -236,3 +293,14 @@ export function ModifyAll(
 		Modify<Element>(element, ...initializers);
 	}
 }
+
+export function ModifyAsync<T extends Element>(
+	elementOrSelector: T | string,
+	...initializers: ElementInitializer<T>[]
+) {
+	return new Promise<T>((resolve) => {
+		Modify(elementOrSelector, ...initializers, (e) => {
+			resolve(e);
+		});
+	});
+}