diff --git a/js/miso.js b/js/miso.js index 49deb2016..aa46a3608 100644 --- a/js/miso.js +++ b/js/miso.js @@ -492,10 +492,13 @@ function delegateEvent(event, obj, stack, debug, context) { } } stack.splice(0, 1); + for (const child of obj.children) { + if (context.isEqual(getDOMRef(child), stack[0])) { + delegateEvent(event, child, stack, debug, context); + } + } } - for (const child of obj.children) { - delegateEvent(event, child, stack, debug, context); - } + return; } } else { if (obj.type === 0 /* VComp */) { diff --git a/js/miso.prod.js b/js/miso.prod.js index 8dcf8d4c4..0d1f35e2e 100644 --- a/js/miso.prod.js +++ b/js/miso.prod.js @@ -1 +1 @@ -function W(G,K,Q,U){if(!G&&!K)return;else if(!G)JG(K,Q,U);else if(!K)UG(G,Q,U);else if(G.type===2&&K.type===2)QG(G,K,U);else if(G.type===0&&K.type===0){if(K.key===G.key){K.child=G.child;return}P(G,K,Q,U)}else if(G.type===1&&K.type===1)if(K.tag===G.tag&&K.key===G.key)K.domRef=G.domRef,d(G,K,U);else P(G,K,Q,U);else P(G,K,Q,U)}function QG(G,K,Q){if(G.text!==K.text)Q.setTextContent(G.domRef,K.text);K.domRef=G.domRef;return}function E(G){if(!G.child)throw new Error("'drill' called on an unmounted Component. This should never happen, please make an issue.");switch(G.child.type){case 0:return E(G.child);default:return G.child.domRef}}function J(G){switch(G.type){case 0:return E(G);default:return G.domRef}}function P(G,K,Q,U){switch(G.type){case 2:break;default:R(G);break}switch(F(Q,1,J(G),K,U),G.type){case 2:break;default:D(G);break}}function UG(G,K,Q){switch(G.type){case 2:break;default:R(G);break}switch(Q.removeChild(K,J(G)),G.type){case 2:break;default:D(G);break}}function D(G){switch(XG(G),G.type){case 1:for(let K of G.children)if(K.type===1||K.type===0)D(K);break;case 0:if(G.child){if(G.child.type===1||G.child.type===0)D(G.child)}break}}function XG(G){if(G.type===1&&G.onDestroyed)G.onDestroyed();if(G.type===0)AG(G)}function YG(G){switch(G.type){case 0:if(G.onBeforeUnmounted)G.onBeforeUnmounted();break;case 1:if(G.onBeforeDestroyed)G.onBeforeDestroyed();break;default:break}}function R(G){switch(YG(G),G.type){case 1:for(let K of G.children){if(K.type===2)continue;R(K)}break;case 0:if(G.child){if(G.child.type===1||G.child.type===0)R(G.child)}break}}function d(G,K,Q){_G(G?G.props:{},K.props,K.domRef,K.ns==="svg",Q),ZG(G?G.classList:null,K.classList,K.domRef,Q),$G(G?G.css:{},K.css,K.domRef,Q),zG(G?G.children:[],K.children,K.domRef,Q),WG(K)}function ZG(G,K,Q,U){if(!G&&!K)return;if(!G){for(let X of K)U.addClass(X,Q);return}if(!K){for(let X of G)U.removeClass(X,Q);return}for(let X of G)if(!K.has(X))U.removeClass(X,Q);for(let X of K)if(!G.has(X))U.addClass(X,Q);return}function _G(G,K,Q,U,X){var Z;for(let Y in G)if(Z=K[Y],Z===void 0)if(U||!(Y in Q)||Y==="disabled")X.removeAttribute(Q,Y);else X.setAttribute(Q,Y,"");else{if(Z===G[Y]&&Y!=="checked"&&Y!=="value")continue;if(U)if(Y==="href")X.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else X.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=Z;else X.setAttribute(Q,Y,Z)}for(let Y in K){if(G&&G[Y])continue;if(Z=K[Y],U)if(Y==="href")X.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else X.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=K[Y];else X.setAttribute(Q,Y,Z)}}function $G(G,K,Q,U){U.setInlineStyle(G,K,Q)}function qG(G,K){if(G.length===0||K.length===0)return!1;for(var Q=0;Q{if(U.componentId=Z,U.child=Y,Y.parent=U,Y.type!==0){let _=J(Y);if(K===1&&Q)X.replaceChild(G,_,Q);else if(K===2)X.insertBefore(G,_,Q)}}),U.onMounted)U.onMounted(E(U))}function JG(G,K,Q){F(K,0,null,G,Q)}function N(G,K,Q,U){U.insertBefore(G,J(K),Q?J(Q):null)}function EG(G,K,Q){Q.removeChild(G,J(K))}function BG(G,K,Q,U){U.swapDOMRefs(J(G),J(K),Q)}function NG(G,K,Q,U){var X=0,Z=0,Y=G.length-1,_=K.length-1,z,q,$,H,A,I,x;for(;;){if(Z>_&&X>Y)break;if(q=K[Z],$=K[_],A=G[X],H=G[Y],X>Y)W(null,q,Q,U),N(Q,q,A,U),G.splice(Z,0,q),Z++;else if(Z>_){z=Y;while(Y>=X)EG(Q,G[Y--],U);G.splice(X,z-X+1);break}else if(A.key===q.key)W(G[X++],K[Z++],Q,U);else if(H.key===$.key)W(G[Y--],K[_--],Q,U);else if(A.key===$.key&&q.key===H.key)BG(H,A,Q,U),DG(G,X,Y),W(G[X++],K[Z++],Q,U),W(G[Y--],K[_--],Q,U);else if(A.key===$.key)N(Q,A,H.nextSibling,U),G.splice(Y,0,G.splice(X,1)[0]),W(G[Y--],K[_--],Q,U);else if(H.key===q.key)N(Q,H,A,U),G.splice(X,0,G.splice(Y,1)[0]),W(G[X++],q,Q,U),Z++;else{I=!1,z=X;while(z<=Y){if(G[z].key===q.key){I=!0,x=G[z];break}z++}if(I)G.splice(X,0,G.splice(z,1)[0]),W(G[X++],q,Q,U),N(Q,x,G[X],U),Z++;else F(Q,2,J(A),q,U),G.splice(X++,0,q),Z++,Y++}}}function DG(G,K,Q){let U=G[K];G[K]=G[Q],G[Q]=U}function L(G,K,Q,U,X){for(let Z of K)X.addEventListener(G,Z.name,function(Y){c(Y,G,Q,U,X)},Z.capture)}function C(G,K,Q,U,X){for(let Z of K)X.removeEventListener(G,Z.name,function(Y){c(Y,G,Q,U,X)},Z.capture)}function c(G,K,Q,U,X){Q(function(Z){if(Array.isArray(G))for(let Y of G)s(Y,Z,K,U,X);else s(G,Z,K,U,X)})}function s(G,K,Q,U,X){var Z=X.getTarget(G);if(Z){let Y=RG(Q,Z,X);M(G,K,Y,U,X)}}function RG(G,K,Q){var U=[];while(!Q.isEqual(G,K))if(U.unshift(K),K&&Q.parentNode(K))K=Q.parentNode(K);else return U;return U}function M(G,K,Q,U,X){if(!Q.length){if(U)console.warn('Event "'+G.type+'" did not find an event handler to dispatch on',K,G);return}else if(Q.length>1){if(K.type===2)return;else if(K.type===0){if(!K.child){if(U)throw console.error("VComp has no child property set during event delegation",K),console.error("This means the Component has not been fully mounted, this should never happen"),new Error("VComp has no .child property set during event delegation");return}return M(G,K.child,Q,U,X)}else if(K.type===1){if(X.isEqual(K.domRef,Q[0])){let Z=K.events.captures[G.type];if(Z){let Y=Z.options;if(Y.preventDefault)G.preventDefault();if(!G.captureStopped)Z.runEvent(G,K.domRef);if(Y.stopPropagation)G.captureStopped=!0}Q.splice(0,1)}for(let Z of K.children)M(G,Z,Q,U,X)}}else if(K.type===0){if(K.child)M(G,K.child,Q,U,X)}else if(K.type===1){let Z=K.events.captures[G.type];if(Z&&!G.captureStopped){let _=Z.options;if(X.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Z.runEvent(G,Q[0]),_.stopPropagation)G.captureStopped=!0}}let Y=K.events.bubbles[G.type];if(Y&&!G.captureStopped){let _=Y.options;if(X.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Y.runEvent(G,Q[0]),!_.stopPropagation)r(K.parent,G)}}else if(!G.captureStopped)r(K.parent,G)}}function r(G,K){while(G)switch(G.type){case 2:break;case 1:let Q=G.events.bubbles[K.type];if(Q){let U=Q.options;if(U.preventDefault)K.preventDefault();if(Q.runEvent(K,G.domRef),U.stopPropagation)return}G=G.parent;break;case 0:if(!G.eventPropagation)return;G=G.parent;break}}function B(G,K){if(typeof G[0]==="object"){var Q=[];for(var U=0;U0?[G[0]]:[];for(var U=1;U{return+K})}function f(G,K,Q){return n(!0,G,K,Q)}function n(G,K,Q,U){if(K.type==2){if(Q.getTag(K.domRef)!=="#text")console.warn("VText domRef not a TEXT_NODE",K),G=!1;else if(K.text!==Q.getTextContent(K.domRef))console.warn("VText node content differs",K),G=!1}else if(K.type===1){if(K.tag.toUpperCase()!==Q.getTag(K.domRef).toUpperCase())console.warn("Integrity check failed, tags differ",K.tag.toUpperCase(),Q.getTag(K.domRef)),G=!1;if("children"in K&&K.children.length!==Q.children(K.domRef).length)console.warn("Integrity check failed, children lengths differ",K,K.children,Q.children(K.domRef)),G=!1;for(let X in K.props)if(X==="href"||X==="src"){let Z=window.location.origin+"/"+K.props[X],Y=Q.getAttribute(K.domRef,X),_=K.props[X];if(Z!==Y&&_!==Y&&_+"/"!==Y&&Z+"/"!==Y)console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1}else if(X==="height"||X==="width"){if(parseFloat(K.props[X])!==parseFloat(Q.getAttribute(K.domRef,X)))console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1}else if(X==="class"||X==="className"){if(K.props[X]!==Q.getAttribute(K.domRef,"class"))console.warn("Property class differs",K.props[X],Q.getAttribute(K.domRef,"class")),G=!1}else if(K.props[X]!==Q.getAttribute(K.domRef,X))console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1;for(let X in K.css)if(X==="color"){if(o(Q.getInlineStyle(K.domRef,X)).toString()!==o(K.css[X]).toString())console.warn("Style "+X+" differs",K.css[X],Q.getInlineStyle(K.domRef,X)),G=!1}else if(K.css[X]!==Q.getInlineStyle(K.domRef,X))console.warn("Style "+X+" differs",K.css[X],Q.getInlineStyle(K.domRef,X)),G=!1;for(let X of K.children){let Z=n(G,X,Q,U);G=G&&Z}}return G}function w(G,K,Q,U,X){switch(K.type){case 0:if(!w(G,K.child,Q,U,X))return!1;break;case 2:if(Q.nodeType!==3||K.text.trim()!==Q.textContent.trim())return V(G,K,Q),!1;K.domRef=Q;break;case 1:if(Q.nodeType!==1)return V(G,K,Q),!1;K.domRef=Q,K.children=MG(K.children),p(Q,K,X);for(var Z=0;Z0?setTimeout(Q,K):Q()}function b(G,K){var Q=function(){var U=document.getElementById(G);if(U&&U.blur)U.blur()};K>0?setTimeout(Q,K):Q()}function T(G,K){var Q=function(){var U=document.getElementById(G);if(U&&typeof U.select==="function")U.select()};K>0?setTimeout(Q,K):Q()}function h(G,K,Q,U){var X=function(){var Z=document.getElementById(G);if(Z&&typeof Z.setSelectionRange==="function")Z.setSelectionRange(K,Q,"none")};U>0?setTimeout(X,U):X()}function u(G,K,Q,U,X,Z,Y){var _={method:K,headers:U};if(Q)_.body=Q;let z={},q=null;try{fetch(G,_).then(($)=>{q=$.status;for(let[H,A]of $.headers)z[H]=A;if(!$.ok)throw new Error($.statusText);if(Y=="json")return $.json();else if(Y=="text")return $.text();else if(Y==="arrayBuffer")return $.arrayBuffer();else if(Y==="blob")return $.blob();else if(Y==="bytes")return $.bytes();else if(Y==="formData")return $.formData();else if(Y==="none")return X({error:null,body:null,headers:z,status:q})}).then(($)=>X({error:null,body:$,headers:z,status:q})).catch(($)=>Z({error:null,body:$,headers:z,status:q}))}catch($){Z({body:null,error:$.message,headers:z,status:q})}}function g(G,K,Q,U,X,Z,Y,_,z){try{let q=new WebSocket(G);return q.onopen=function(){K()},q.onclose=function($){Q($)},q.onerror=function($){console.error($),_("WebSocket error received")},q.onmessage=function($){if(typeof $.data==="string")try{if(z){if(U)U($.data);return}let H=JSON.parse($.data);if(X)X(H)}catch(H){if(z&&U)U($.data);else _(H.message)}else if($.data instanceof Blob){if(Z)Z($.data)}else if($.data instanceof ArrayBuffer){if(Y)Y($.data)}else console.error("Received unknown message type from WebSocket",$),_("Unknown message received from WebSocket")},q}catch(q){_(q.message)}}function m(G){if(G)G.close(),G=null}function y(G,K){if(K&&G&&G.readyState===WebSocket.OPEN)G.send(K)}function i(G,K,Q,U,X,Z){try{let Y=new EventSource(G);return Y.onopen=function(){K()},Y.onerror=function(){X("EventSource error received")},Y.onmessage=function(_){try{if(Z){if(Q)Q(_.data);return}let z=JSON.parse(_.data);if(U)U(z)}catch(z){if(Z&&Q)Q(_.data);else X(z.message)}},Y}catch(Y){X(Y.message)}}function v(G){if(G)G.close(),G=null}function l(G,K){if(!G.classList)G.classList=new Set;for(let Q of K)for(let U of Q.trim().split(" "))if(U)G.classList.add(U)}var t={addEventListener:(G,K,Q,U)=>{G.addEventListener(K,Q,U)},removeEventListener:(G,K,Q,U)=>{G.removeEventListener(K,Q,U)},isEqual:(G,K)=>{return G===K},getTarget:(G)=>{return G.target},parentNode:(G)=>{return G.parentNode}},e={getInlineStyle:(G,K)=>{return G.style[K]},firstChild:(G)=>{return G.firstChild},lastChild:(G)=>{return G.lastChild},getAttribute:(G,K)=>{if(K==="class")return G.className;if(K in G)return G[K];return G.getAttribute(K)},getTag:(G)=>{return G.nodeName},getTextContent:(G)=>{return G.textContent},children:(G)=>{return G.childNodes}},GG={mountComponent:function(G,K,Q){return},unmountComponent:function(G){return},modelHydration:function(G){return}},KG={nextSibling:(G)=>{if(G.nextSibling)switch(G.nextSibling.type){case 0:return E(G.nextSibling);default:return G.nextSibling.domRef}return null},createTextNode:(G)=>{return document.createTextNode(G)},createElementNS:(G,K)=>{return document.createElementNS(G,K)},appendChild:(G,K)=>{return G.appendChild(K)},replaceChild:(G,K,Q)=>{return G.replaceChild(K,Q)},removeChild:(G,K)=>{return G.removeChild(K)},createElement:(G)=>{return document.createElement(G)},addClass:(G,K)=>{if(G)K.classList.add(G)},removeClass:(G,K)=>{if(G)K.classList.remove(G)},insertBefore:(G,K,Q)=>{return G.insertBefore(K,Q)},swapDOMRefs:(G,K,Q)=>{let U=G.nextSibling;Q.insertBefore(G,K),Q.insertBefore(K,U);return},setInlineStyle:(G,K,Q)=>{var U;for(let X in G)if(U=K[X],!U)if(X in Q.style)Q.style[X]="";else Q.style.setProperty(X,"");else if(U!==G[X])if(X in Q.style)Q.style[X]=U;else Q.style.setProperty(X,U);for(let X in K){if(G&&G[X])continue;if(X in Q.style)Q.style[X]=K[X];else Q.style.setProperty(X,K[X])}return},setAttribute:(G,K,Q)=>{return G.setAttribute(K,Q)},setAttributeNS:(G,K,Q,U)=>{return G.setAttributeNS(K,Q,U)},removeAttribute:(G,K)=>{return G.removeAttribute(K)},setTextContent:(G,K)=>{G.textContent=K;return},flush:()=>{return},getRoot:function(){return document.body}};globalThis.miso={hydrationContext:e,eventContext:t,drawingContext:KG,componentContext:GG,diff:W,hydrate:O,version:j,delegate:L,callBlur:b,callFocus:k,callSelect:T,callSetSelectionRange:h,eventJSON:B,fetchCore:u,eventSourceConnect:i,eventSourceClose:v,websocketConnect:g,websocketClose:m,websocketSend:y,undelegate:C,populateClass:l,integrityCheck:f,setDrawingContext:function(G){let K=globalThis[G].drawingContext,Q=globalThis[G].eventContext;if(!K)console.error('Custom rendering engine ("drawingContext") is not defined at globalThis[name].drawingContext',G);if(!Q)console.error('Custom event delegation ("eventContext") is not defined at globalThis[name].eventContext',G);globalThis.miso.drawingContext=K,globalThis.miso.eventContext=Q}}; +function W(G,K,Q,U){if(!G&&!K)return;else if(!G)JG(K,Q,U);else if(!K)UG(G,Q,U);else if(G.type===2&&K.type===2)QG(G,K,U);else if(G.type===0&&K.type===0){if(K.key===G.key){K.child=G.child;return}P(G,K,Q,U)}else if(G.type===1&&K.type===1)if(K.tag===G.tag&&K.key===G.key)K.domRef=G.domRef,d(G,K,U);else P(G,K,Q,U);else P(G,K,Q,U)}function QG(G,K,Q){if(G.text!==K.text)Q.setTextContent(G.domRef,K.text);K.domRef=G.domRef;return}function E(G){if(!G.child)throw new Error("'drill' called on an unmounted Component. This should never happen, please make an issue.");switch(G.child.type){case 0:return E(G.child);default:return G.child.domRef}}function J(G){switch(G.type){case 0:return E(G);default:return G.domRef}}function P(G,K,Q,U){switch(G.type){case 2:break;default:S(G);break}switch(F(Q,1,J(G),K,U),G.type){case 2:break;default:D(G);break}}function UG(G,K,Q){switch(G.type){case 2:break;default:S(G);break}switch(Q.removeChild(K,J(G)),G.type){case 2:break;default:D(G);break}}function D(G){switch(XG(G),G.type){case 1:for(let K of G.children)if(K.type===1||K.type===0)D(K);break;case 0:if(G.child){if(G.child.type===1||G.child.type===0)D(G.child)}break}}function XG(G){if(G.type===1&&G.onDestroyed)G.onDestroyed();if(G.type===0)AG(G)}function YG(G){switch(G.type){case 0:if(G.onBeforeUnmounted)G.onBeforeUnmounted();break;case 1:if(G.onBeforeDestroyed)G.onBeforeDestroyed();break;default:break}}function S(G){switch(YG(G),G.type){case 1:for(let K of G.children){if(K.type===2)continue;S(K)}break;case 0:if(G.child){if(G.child.type===1||G.child.type===0)S(G.child)}break}}function d(G,K,Q){_G(G?G.props:{},K.props,K.domRef,K.ns==="svg",Q),ZG(G?G.classList:null,K.classList,K.domRef,Q),$G(G?G.css:{},K.css,K.domRef,Q),zG(G?G.children:[],K.children,K.domRef,Q),WG(K)}function ZG(G,K,Q,U){if(!G&&!K)return;if(!G){for(let X of K)U.addClass(X,Q);return}if(!K){for(let X of G)U.removeClass(X,Q);return}for(let X of G)if(!K.has(X))U.removeClass(X,Q);for(let X of K)if(!G.has(X))U.addClass(X,Q);return}function _G(G,K,Q,U,X){var Z;for(let Y in G)if(Z=K[Y],Z===void 0)if(U||!(Y in Q)||Y==="disabled")X.removeAttribute(Q,Y);else X.setAttribute(Q,Y,"");else{if(Z===G[Y]&&Y!=="checked"&&Y!=="value")continue;if(U)if(Y==="href")X.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else X.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=Z;else X.setAttribute(Q,Y,Z)}for(let Y in K){if(G&&G[Y])continue;if(Z=K[Y],U)if(Y==="href")X.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else X.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=K[Y];else X.setAttribute(Q,Y,Z)}}function $G(G,K,Q,U){U.setInlineStyle(G,K,Q)}function qG(G,K){if(G.length===0||K.length===0)return!1;for(var Q=0;Q{if(U.componentId=Z,U.child=Y,Y.parent=U,Y.type!==0){let _=J(Y);if(K===1&&Q)X.replaceChild(G,_,Q);else if(K===2)X.insertBefore(G,_,Q)}}),U.onMounted)U.onMounted(E(U))}function JG(G,K,Q){F(K,0,null,G,Q)}function N(G,K,Q,U){U.insertBefore(G,J(K),Q?J(Q):null)}function EG(G,K,Q){Q.removeChild(G,J(K))}function BG(G,K,Q,U){U.swapDOMRefs(J(G),J(K),Q)}function NG(G,K,Q,U){var X=0,Z=0,Y=G.length-1,_=K.length-1,z,q,$,H,A,I,x;for(;;){if(Z>_&&X>Y)break;if(q=K[Z],$=K[_],A=G[X],H=G[Y],X>Y)W(null,q,Q,U),N(Q,q,A,U),G.splice(Z,0,q),Z++;else if(Z>_){z=Y;while(Y>=X)EG(Q,G[Y--],U);G.splice(X,z-X+1);break}else if(A.key===q.key)W(G[X++],K[Z++],Q,U);else if(H.key===$.key)W(G[Y--],K[_--],Q,U);else if(A.key===$.key&&q.key===H.key)BG(H,A,Q,U),DG(G,X,Y),W(G[X++],K[Z++],Q,U),W(G[Y--],K[_--],Q,U);else if(A.key===$.key)N(Q,A,H.nextSibling,U),G.splice(Y,0,G.splice(X,1)[0]),W(G[Y--],K[_--],Q,U);else if(H.key===q.key)N(Q,H,A,U),G.splice(X,0,G.splice(Y,1)[0]),W(G[X++],q,Q,U),Z++;else{I=!1,z=X;while(z<=Y){if(G[z].key===q.key){I=!0,x=G[z];break}z++}if(I)G.splice(X,0,G.splice(z,1)[0]),W(G[X++],q,Q,U),N(Q,x,G[X],U),Z++;else F(Q,2,J(A),q,U),G.splice(X++,0,q),Z++,Y++}}}function DG(G,K,Q){let U=G[K];G[K]=G[Q],G[Q]=U}function L(G,K,Q,U,X){for(let Z of K)X.addEventListener(G,Z.name,function(Y){c(Y,G,Q,U,X)},Z.capture)}function C(G,K,Q,U,X){for(let Z of K)X.removeEventListener(G,Z.name,function(Y){c(Y,G,Q,U,X)},Z.capture)}function c(G,K,Q,U,X){Q(function(Z){if(Array.isArray(G))for(let Y of G)s(Y,Z,K,U,X);else s(G,Z,K,U,X)})}function s(G,K,Q,U,X){var Z=X.getTarget(G);if(Z){let Y=SG(Q,Z,X);M(G,K,Y,U,X)}}function SG(G,K,Q){var U=[];while(!Q.isEqual(G,K))if(U.unshift(K),K&&Q.parentNode(K))K=Q.parentNode(K);else return U;return U}function M(G,K,Q,U,X){if(!Q.length){if(U)console.warn('Event "'+G.type+'" did not find an event handler to dispatch on',K,G);return}else if(Q.length>1){if(K.type===2)return;else if(K.type===0){if(!K.child){if(U)throw console.error("VComp has no child property set during event delegation",K),console.error("This means the Component has not been fully mounted, this should never happen"),new Error("VComp has no .child property set during event delegation");return}return M(G,K.child,Q,U,X)}else if(K.type===1){if(X.isEqual(K.domRef,Q[0])){let Z=K.events.captures[G.type];if(Z){let Y=Z.options;if(Y.preventDefault)G.preventDefault();if(!G.captureStopped)Z.runEvent(G,K.domRef);if(Y.stopPropagation)G.captureStopped=!0}Q.splice(0,1);for(let Y of K.children)if(X.isEqual(J(Y),Q[0]))M(G,Y,Q,U,X)}return}}else if(K.type===0){if(K.child)M(G,K.child,Q,U,X)}else if(K.type===1){let Z=K.events.captures[G.type];if(Z&&!G.captureStopped){let _=Z.options;if(X.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Z.runEvent(G,Q[0]),_.stopPropagation)G.captureStopped=!0}}let Y=K.events.bubbles[G.type];if(Y&&!G.captureStopped){let _=Y.options;if(X.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Y.runEvent(G,Q[0]),!_.stopPropagation)r(K.parent,G)}}else if(!G.captureStopped)r(K.parent,G)}}function r(G,K){while(G)switch(G.type){case 2:break;case 1:let Q=G.events.bubbles[K.type];if(Q){let U=Q.options;if(U.preventDefault)K.preventDefault();if(Q.runEvent(K,G.domRef),U.stopPropagation)return}G=G.parent;break;case 0:if(!G.eventPropagation)return;G=G.parent;break}}function B(G,K){if(typeof G[0]==="object"){var Q=[];for(var U=0;U0?[G[0]]:[];for(var U=1;U{return+K})}function f(G,K,Q){return n(!0,G,K,Q)}function n(G,K,Q,U){if(K.type==2){if(Q.getTag(K.domRef)!=="#text")console.warn("VText domRef not a TEXT_NODE",K),G=!1;else if(K.text!==Q.getTextContent(K.domRef))console.warn("VText node content differs",K),G=!1}else if(K.type===1){if(K.tag.toUpperCase()!==Q.getTag(K.domRef).toUpperCase())console.warn("Integrity check failed, tags differ",K.tag.toUpperCase(),Q.getTag(K.domRef)),G=!1;if("children"in K&&K.children.length!==Q.children(K.domRef).length)console.warn("Integrity check failed, children lengths differ",K,K.children,Q.children(K.domRef)),G=!1;for(let X in K.props)if(X==="href"||X==="src"){let Z=window.location.origin+"/"+K.props[X],Y=Q.getAttribute(K.domRef,X),_=K.props[X];if(Z!==Y&&_!==Y&&_+"/"!==Y&&Z+"/"!==Y)console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1}else if(X==="height"||X==="width"){if(parseFloat(K.props[X])!==parseFloat(Q.getAttribute(K.domRef,X)))console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1}else if(X==="class"||X==="className"){if(K.props[X]!==Q.getAttribute(K.domRef,"class"))console.warn("Property class differs",K.props[X],Q.getAttribute(K.domRef,"class")),G=!1}else if(K.props[X]!==Q.getAttribute(K.domRef,X))console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1;for(let X in K.css)if(X==="color"){if(o(Q.getInlineStyle(K.domRef,X)).toString()!==o(K.css[X]).toString())console.warn("Style "+X+" differs",K.css[X],Q.getInlineStyle(K.domRef,X)),G=!1}else if(K.css[X]!==Q.getInlineStyle(K.domRef,X))console.warn("Style "+X+" differs",K.css[X],Q.getInlineStyle(K.domRef,X)),G=!1;for(let X of K.children){let Z=n(G,X,Q,U);G=G&&Z}}return G}function w(G,K,Q,U,X){switch(K.type){case 0:if(!w(G,K.child,Q,U,X))return!1;break;case 2:if(Q.nodeType!==3||K.text.trim()!==Q.textContent.trim())return V(G,K,Q),!1;K.domRef=Q;break;case 1:if(Q.nodeType!==1)return V(G,K,Q),!1;K.domRef=Q,K.children=MG(K.children),p(Q,K,X);for(var Z=0;Z0?setTimeout(Q,K):Q()}function b(G,K){var Q=function(){var U=document.getElementById(G);if(U&&U.blur)U.blur()};K>0?setTimeout(Q,K):Q()}function T(G,K){var Q=function(){var U=document.getElementById(G);if(U&&typeof U.select==="function")U.select()};K>0?setTimeout(Q,K):Q()}function h(G,K,Q,U){var X=function(){var Z=document.getElementById(G);if(Z&&typeof Z.setSelectionRange==="function")Z.setSelectionRange(K,Q,"none")};U>0?setTimeout(X,U):X()}function u(G,K,Q,U,X,Z,Y){var _={method:K,headers:U};if(Q)_.body=Q;let z={},q=null;try{fetch(G,_).then(($)=>{q=$.status;for(let[H,A]of $.headers)z[H]=A;if(!$.ok)throw new Error($.statusText);if(Y=="json")return $.json();else if(Y=="text")return $.text();else if(Y==="arrayBuffer")return $.arrayBuffer();else if(Y==="blob")return $.blob();else if(Y==="bytes")return $.bytes();else if(Y==="formData")return $.formData();else if(Y==="none")return X({error:null,body:null,headers:z,status:q})}).then(($)=>X({error:null,body:$,headers:z,status:q})).catch(($)=>Z({error:null,body:$,headers:z,status:q}))}catch($){Z({body:null,error:$.message,headers:z,status:q})}}function g(G,K,Q,U,X,Z,Y,_,z){try{let q=new WebSocket(G);return q.onopen=function(){K()},q.onclose=function($){Q($)},q.onerror=function($){console.error($),_("WebSocket error received")},q.onmessage=function($){if(typeof $.data==="string")try{if(z){if(U)U($.data);return}let H=JSON.parse($.data);if(X)X(H)}catch(H){if(z&&U)U($.data);else _(H.message)}else if($.data instanceof Blob){if(Z)Z($.data)}else if($.data instanceof ArrayBuffer){if(Y)Y($.data)}else console.error("Received unknown message type from WebSocket",$),_("Unknown message received from WebSocket")},q}catch(q){_(q.message)}}function m(G){if(G)G.close(),G=null}function y(G,K){if(K&&G&&G.readyState===WebSocket.OPEN)G.send(K)}function i(G,K,Q,U,X,Z){try{let Y=new EventSource(G);return Y.onopen=function(){K()},Y.onerror=function(){X("EventSource error received")},Y.onmessage=function(_){try{if(Z){if(Q)Q(_.data);return}let z=JSON.parse(_.data);if(U)U(z)}catch(z){if(Z&&Q)Q(_.data);else X(z.message)}},Y}catch(Y){X(Y.message)}}function v(G){if(G)G.close(),G=null}function l(G,K){if(!G.classList)G.classList=new Set;for(let Q of K)for(let U of Q.trim().split(" "))if(U)G.classList.add(U)}var t={addEventListener:(G,K,Q,U)=>{G.addEventListener(K,Q,U)},removeEventListener:(G,K,Q,U)=>{G.removeEventListener(K,Q,U)},isEqual:(G,K)=>{return G===K},getTarget:(G)=>{return G.target},parentNode:(G)=>{return G.parentNode}},e={getInlineStyle:(G,K)=>{return G.style[K]},firstChild:(G)=>{return G.firstChild},lastChild:(G)=>{return G.lastChild},getAttribute:(G,K)=>{if(K==="class")return G.className;if(K in G)return G[K];return G.getAttribute(K)},getTag:(G)=>{return G.nodeName},getTextContent:(G)=>{return G.textContent},children:(G)=>{return G.childNodes}},GG={mountComponent:function(G,K,Q){return},unmountComponent:function(G){return},modelHydration:function(G){return}},KG={nextSibling:(G)=>{if(G.nextSibling)switch(G.nextSibling.type){case 0:return E(G.nextSibling);default:return G.nextSibling.domRef}return null},createTextNode:(G)=>{return document.createTextNode(G)},createElementNS:(G,K)=>{return document.createElementNS(G,K)},appendChild:(G,K)=>{return G.appendChild(K)},replaceChild:(G,K,Q)=>{return G.replaceChild(K,Q)},removeChild:(G,K)=>{return G.removeChild(K)},createElement:(G)=>{return document.createElement(G)},addClass:(G,K)=>{if(G)K.classList.add(G)},removeClass:(G,K)=>{if(G)K.classList.remove(G)},insertBefore:(G,K,Q)=>{return G.insertBefore(K,Q)},swapDOMRefs:(G,K,Q)=>{let U=G.nextSibling;Q.insertBefore(G,K),Q.insertBefore(K,U);return},setInlineStyle:(G,K,Q)=>{var U;for(let X in G)if(U=K[X],!U)if(X in Q.style)Q.style[X]="";else Q.style.setProperty(X,"");else if(U!==G[X])if(X in Q.style)Q.style[X]=U;else Q.style.setProperty(X,U);for(let X in K){if(G&&G[X])continue;if(X in Q.style)Q.style[X]=K[X];else Q.style.setProperty(X,K[X])}return},setAttribute:(G,K,Q)=>{return G.setAttribute(K,Q)},setAttributeNS:(G,K,Q,U)=>{return G.setAttributeNS(K,Q,U)},removeAttribute:(G,K)=>{return G.removeAttribute(K)},setTextContent:(G,K)=>{G.textContent=K;return},flush:()=>{return},getRoot:function(){return document.body}};globalThis.miso={hydrationContext:e,eventContext:t,drawingContext:KG,componentContext:GG,diff:W,hydrate:O,version:j,delegate:L,callBlur:b,callFocus:k,callSelect:T,callSetSelectionRange:h,eventJSON:B,fetchCore:u,eventSourceConnect:i,eventSourceClose:v,websocketConnect:g,websocketClose:m,websocketSend:y,undelegate:C,populateClass:l,integrityCheck:f,setDrawingContext:function(G){let K=globalThis[G].drawingContext,Q=globalThis[G].eventContext;if(!K)console.error('Custom rendering engine ("drawingContext") is not defined at globalThis[name].drawingContext',G);if(!Q)console.error('Custom event delegation ("eventContext") is not defined at globalThis[name].eventContext',G);globalThis.miso.drawingContext=K,globalThis.miso.eventContext=Q}}; diff --git a/ts/miso/dom.ts b/ts/miso/dom.ts index 6ffe6f7ab..684fbb433 100644 --- a/ts/miso/dom.ts +++ b/ts/miso/dom.ts @@ -45,7 +45,7 @@ export function drill(c: VComp): T { } // Extract DOM reference from any VTree (handles VComp drilling) -function getDOMRef(tree: VTree): T { +export function getDOMRef(tree: VTree): T { switch (tree.type) { case VTreeType.VComp: return drill(tree); diff --git a/ts/miso/event.ts b/ts/miso/event.ts index 2e81a871f..f23ddb21e 100644 --- a/ts/miso/event.ts +++ b/ts/miso/event.ts @@ -1,4 +1,5 @@ import { EventContext, VTree, EventCapture, EventObject, Options, VTreeType } from './types'; +import { getDOMRef } from './dom'; /* event delegation algorithm */ export function delegate ( @@ -124,10 +125,13 @@ function delegateEvent ( } } stack.splice(0,1); + for (const child of obj.children) { + if (context.isEqual(getDOMRef(child), stack[0])) { + delegateEvent(event, child, stack, debug, context); + } + } } - for (const child of obj.children) { - delegateEvent(event, child, stack, debug, context); - } + return; } } else { /* stack.length === 1, we're at the target */