hyperbole.js

/*! For license information please see hyperbole.js.LICENSE.txt */
(()=>{var e={296:e=>{function t(e,t=100,n={}){if("function"!=typeof e)throw new TypeError(`Expected the first parameter to be a function, got \`${typeof e}\`.`);if(t<0)throw new RangeError("`wait` must not be negative.");const{immediate:o}="boolean"==typeof n?{immediate:n}:n;let r,i,a,s,c;function u(){const t=r,n=i;return r=void 0,i=void 0,c=e.apply(t,n),c}function d(){const e=Date.now()-s;e<t&&e>=0?a=setTimeout(d,t-e):(a=void 0,o||(c=u()))}const l=function(...e){if(r&&this!==r&&Object.getPrototypeOf(this)===Object.getPrototypeOf(r))throw new Error("Debounced method called with different contexts of the same prototype.");r=this,i=e,s=Date.now();const n=o&&!a;return a||(a=setTimeout(d,t)),n&&(c=u()),c};return Object.defineProperty(l,"isPending",{get:()=>void 0!==a}),l.clear=()=>{a&&(clearTimeout(a),a=void 0)},l.flush=()=>{a&&l.trigger()},l.trigger=()=>{c=u(),l.clear()},l}e.exports.debounce=t,e.exports=t},147:e=>{"use strict";e.exports=JSON.parse('{"name":"web-ui","version":"0.6.0","description":"Development -----------","main":"index.js","directories":{"client":"client"},"scripts":{"build":"npx webpack"},"author":"","license":"ISC","devDependencies":{"ts-loader":"^9.4.1","typescript":"^4.8.3","uglify":"^0.1.5","webpack":"^5.88.2","webpack-cli":"^4.10.0"},"dependencies":{"omdomdom":"^0.3.2","debounce":"^2.2.0"}}')}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}(()=>{"use strict";var e=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t=function(e,t){var n=e.length,o=-1;if(n)for(;++o<n&&!1!==t(e[o],o););},o=function(e,t,n){return e.node.insertBefore(t.node,n)};function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,r,i,a,s=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(o=i.call(n)).done)&&(s.push(o.value),s.length!==t);c=!0);}catch(e){u=!0,r=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw r}}return s}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var a="string",s="number",c="boolean",u={},d=function(e,t,n){return{attrName:e,propName:t,type:n}};t([["style","cssText"],["class","className"]],(function(e){var t=r(e,2),n=t[0],o=t[1];u[n]=d(n,o||n,a)})),t(["autofocus","draggable","hidden","checked","multiple","muted","selected"],(function(e){u[e]=d(e,e,c)})),t([["tabindex","tabIndex"]],(function(e){var t=r(e,2),n=t[0],o=t[1];u[n]=d(n,o,s)}));var l="xlink:",f="http://www.w3.org/1999/xlink",v="xml:",p="http://www.w3.org/XML/1998/namespace",h=function(e,t,n,o){switch(t){case a:n===u.style.propName?e.style[n]=null===o?"":o:e[n]=null===o?"":o;break;case s:if(null===o){var r=n.toLowerCase();e.removeAttribute(r)}else if("0"===o)e[n]=0;else if("-1"===o)e[n]=-1;else{var i=parseInt(o,10);isNaN(i)||(e[n]=i)}break;case c:["","true"].indexOf(o)<0?e[n]=!1:e[n]=!0}},m=function n(r,i,s){if(r&&i){s=s||i.node.parentNode;var c=r.content&&r.content!==i.content;if(r.type!==i.type||c)return s.replaceChild(r.node,i.node),function(e,t){for(var n in e)t[n]=e[n]}(r,i);(function(n,o){var r=[],i={};for(var s in o.attributes){var c=o.attributes[s],d=n.attributes[s];c!==d&&void 0===d&&r.push(s)}for(var m in n.attributes){var y=o.attributes[m],g=n.attributes[m];y!==g&&void 0!==g&&(i[m]=g)}!function(n,o){t(o,(function(t){if(e(u,t)){var o=u[t];h(n.node,o.type,o.propName,null)}else t in n.node&&h(n.node,a,t,null),n.node.removeAttribute(t);delete n.attributes[t]}))}(o,r),function(t,n){for(var o in n){var r=n[o];if(t.attributes[o]=r,e(u,o)){var i=u[o];h(t.node,i.type,i.propName,r)}else o.startsWith(l)?t.node.setAttributeNS(f,o,r):o.startsWith(v)?t.node.setAttributeNS(p,o,r):(o in t.node&&h(t.node,a,o,r),t.node.setAttribute(o,r||""))}}(o,i)})(r,i),function(n,r,i){var a=n.children.length,s=r.children.length;if(a||s){var c=function(n){var o={};for(var r in t(n,(function(t){var n=t.attributes["data-key"];(function(t,n){return!(!n||e(t,n)&&(console.warn("[OmDomDom]: Children with duplicate keys detected. Children with duplicate keys will be skipped, resulting in dropped node references. Keys must be unique and non-indexed."),1))})(o,n)&&(o[n]=t)})),o)return o}(r.children),u=Array(a);t(n.children,void 0!==c?function(e,t){var n=r.node.childNodes,a=e.attributes["data-key"];if(Object.prototype.hasOwnProperty.call(c,a)){var s=c[a];Array.prototype.indexOf.call(n,s.node)!==t&&o(r,s,n[t]),u[t]=s,delete c[a],i(e,u[t])}else o(r,e,n[t]),u[t]=e}:function(e,t){var n=r.children[t];void 0!==n?(i(e,n),u[t]=n):(r.node.appendChild(e.node),u[t]=e)}),r.children=u;var d=r.node.childNodes.length,l=d-a;if(l>0)for(;l>0;)r.node.removeChild(r.node.childNodes[d-1]),d--,l--}}(r,i,n)}},y=function n(o){var r,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];"string"==typeof o&&(r=o.trim().replace(/\s+</g,"<").replace(/>\s+/g,">"),o=(new DOMParser).parseFromString(r,"text/html").body);var a="BODY"===o.tagName,s=o.childNodes,c=s?s.length:0;if(a){if(c>1)throw new Error("[OmDomDom]: Your element should not have more than one root node.");if(0===c)throw new Error("[OmDomDom]: Your element should have at least one root node.");return n(s[0])}var d=3===o.nodeType?"text":8===o.nodeType?"comment":o.tagName.toLowerCase(),l=i||"svg"===d,f=1===o.nodeType?function(t){var n=function(t){return Array.prototype.reduce.call(t.attributes,(function(t,n){return e(u,n.name)||(t[n.name]=n.value),t}),{})}(t);return function(e,t){for(var n in u){var o=u[n].propName,r=e.getAttribute(n);n===u.style.attrName?t[n]=e.style[o]:"string"==typeof r&&(t[n]=r)}}(t,n),n}(o):{},v=c>0?null:o.textContent,p=Array(c);return t(s,(function(e,t){p[t]=n(e,l)})),{type:d,attributes:f,children:p,content:v,node:o,isSVGContext:l}};function g(e,t){var n=[];for(var o of t){let t=e(o);if(!t)break;n.push(t)}return n}function w(e){return{cookies:e.filter((e=>"Cookie"==e.key)).map((e=>e.value)),error:E("Error",e),query:E("Query",e),pageTitle:E("PageTitle",e),events:C("Event",e).map(q),actions:C("Trigger",e).map(I)}}function b(e){return w(g(k,e.trim().split("\n")))}function E(e,t){return t.find((t=>t.key==e))?.value}function C(e,t){return t.filter((t=>t.key==e)).map((e=>e.value))}function k(e){let t=e.match(/^(\w+)\: (.*)$/);if(t)return{key:t[1],value:t[2]}}function q(e){let[t,n]=S(e);return{name:t,detail:JSON.parse(n)}}function I(e){let[t,n]=S(e);return[t,n]}function S(e){let t=e.indexOf("|");if(-1===t){let t=new Error("Bad Encoding, Expected Segment");throw t.message=e,t}return[e.slice(0,t),e.slice(t+1)]}function A(e){if(!e)return;const t=new URLSearchParams;return e.forEach(((e,n)=>{t.append(n,e)})),t}let x=0;function L(e,t){return e+" "+function(e){return""==e?"|":e.replace(/_/g,"\\_").replace(/\s+/g,"_")}(t)}const T=`${"https:"===window.location.protocol?"wss:":"ws:"}//${window.location.host}${window.location.pathname}`;class D extends Error{constructor(e,t){super(e+"\n"+t),this.name="ProtocolError"}}var R=n(296);function O(e,t){document.addEventListener(e.toLowerCase(),(function(n){let o=n.target,r="on"+e+n.key,i=o.dataset[r];i&&(n.preventDefault(),t(V(o),i))}))}function N(e,t){document.addEventListener(e,(function(n){let o=n.target.closest("[data-on"+e+"]");if(!o)return;n.preventDefault();let r=V(o);t(r,o.dataset["on"+e])}))}function M(e){e.querySelectorAll("[data-onload]").forEach((e=>{let t=parseInt(e.dataset.delay)||0,n=e.dataset.onload;setTimeout((()=>{let t=V(e);if(e.dataset.onload!=n)return;const o=new CustomEvent("hyp-load",{bubbles:!0,detail:{target:t,onLoad:n}});e.dispatchEvent(o)}),t)}))}function j(e){e.querySelectorAll("[data-onmouseenter]").forEach((e=>{let t=e.dataset.onmouseenter,n=V(e);e.onmouseenter=()=>{const o=new CustomEvent("hyp-mouseenter",{bubbles:!0,detail:{target:n,onMouseEnter:t}});e.dispatchEvent(o)}}))}function P(e){e.querySelectorAll("[data-onmouseleave]").forEach((e=>{let t=e.dataset.onmouseleave,n=V(e);e.onmouseleave=()=>{const o=new CustomEvent("hyp-mouseleave",{bubbles:!0,detail:{target:n,onMouseLeave:t}});e.dispatchEvent(o)}}))}function V(e){let t=function(e){let t=e.closest("[data-target]");return t?.dataset.target||e.closest("[id]")?.id}(e),n=document.getElementById(t);if(n)return n;console.error("Cannot find target: ",t,e)}let B,U=n(147);console.log("Hyperbole "+U.version+"b");let Q=new Set;async function $(e,t,n){if(void 0===e)return void console.error("Undefined HyperView!",t);if(void 0===t)return void console.error("Undefined Action!",e.id);if(e.activeRequest&&!e.activeRequest?.isCancelled&&"Drop"==e.concurrency)return void console.warn("Drop action overlapping with active request ("+e.activeRequest+")",t);e._timeout=setTimeout((()=>{e.classList.add("hyp-loading")}),100);let o=e.dataset.state,r={requestId:++x,isCancelled:!1},i=function(e,t,n,o,r){return{viewId:e,action:t,state:n,requestId:o,meta:[{key:"Cookie",value:decodeURI(document.cookie)},{key:"Query",value:window.location.search}],form:A(r)}}(e.id,t,o,r.requestId,n);e.activeRequest=r,Y.sendAction(i)}function H(e){let t=e.targetViewId||e.viewId,n=document.getElementById(t);if(!n)return console.error("Missing Update Target: ",t,e),n;if(e.requestId<n.activeRequest?.requestId)return console.warn("Ignore Stale Action ("+e.requestId+") vs ("+n.activeRequest.requestId+"): "+e.action),n;if(n.activeRequest?.isCancelled)return console.warn("Cancelled request",n.activeRequest?.requestId),delete n.activeRequest,n;let o=function(e){const t=(new DOMParser).parseFromString(e,"text/html"),n=t.querySelector("style");return{content:t.querySelector("div"),css:n}}(e.body);if(!o.content)return console.error("Empty Response!",e.body),n;!function(e){if(!e)return;const t=e.sheet.cssRules;for(const e of t)0==Q.has(e.cssText)&&(B.sheet.insertRule(e.cssText),Q.add(e.cssText))}(o.css);const r=y(n);let i=y(o.content),a=i.attributes["data-state"];i.attributes=r.attributes,m(i,r);let s=document.getElementById(n.id);return J(s),s?(s.dataset.state=a,_(e.meta,s),W(e.meta.cookies),M(s),j(s),P(s),function(e){let t=e.querySelector("[autofocus]");t?.focus&&t.focus(),e.querySelectorAll("input[value]").forEach((e=>{let t=e.getAttribute("value");void 0!==t&&(e.value=t)})),e.querySelectorAll("input[type=checkbox]").forEach((e=>{let t="True"==e.dataset.checked;e.checked=t}))}(s),F(s),n):(console.warn("Target Missing: ",n.id),n)}function W(e){e.forEach((e=>{console.log("SetCookie: ",e),document.cookie=e}))}function _(e,t){null!=e.query&&function(e){if(e!=function(){const e=window.location.search;return e.startsWith("?")?e.substring(1):e}()){""!=e&&(e="?"+e);let t=location.pathname+e;window.history.replaceState({},"",t)}}(e.query),null!=e.pageTitle&&(document.title=e.pageTitle),e.events.forEach((e=>{setTimeout((()=>{let n=new CustomEvent(e.name,{bubbles:!0,detail:e.detail});(t||document).dispatchEvent(n)}),10)})),e.actions.forEach((([e,t])=>{setTimeout((()=>{let n=window.Hyperbole.hyperView(e);n&&$(n,t)}),10)}))}function F(e){e.querySelectorAll("[id]").forEach((t=>{t.runAction=function(e){$(this,e)}.bind(t),t.concurrency=t.dataset.concurrency||"Drop",t.cancelActiveRequest=function(){t.activeRequest&&!t.activeRequest?.isCancelled&&(t.activeRequest.isCancelled=!0)},J(e)}))}function J(e){let t=new Event("hyp-content",{bubbles:!0});e.dispatchEvent(t)}document.addEventListener("DOMContentLoaded",(function(){var e;_(b(document.getElementById("hyp.metadata").innerText)),B=document.body.querySelector("style"),B||(console.warn("rootStyles missing from page, creating..."),B=document.createElement("style"),B.type="text/css",document.body.appendChild(B)),e=async function(e,t){$(e,t)},document.addEventListener("hyp-load",(function(t){let n=t.detail.onLoad,o=t.detail.target;e(o,n)})),document.addEventListener("hyp-mouseenter",(function(t){let n=t.detail.onMouseEnter,o=t.detail.target;e(o,n)})),document.addEventListener("hyp-mouseleave",(function(t){let n=t.detail.onMouseLeave,o=t.detail.target;e(o,n)})),M(document.body),j(document.body),P(document.body),F(document.body),N("click",(async function(e,t){$(e,t)})),N("dblclick",(async function(e,t){$(e,t)})),O("keydown",(async function(e,t){$(e,t)})),O("keyup",(async function(e,t){$(e,t)})),document.addEventListener("submit",(function(e){let t=e.target;if(!t?.dataset.onsubmit)return void console.error("Missing onSubmit: ",t);e.preventDefault();let n=V(t);const o=new FormData(t);!async function(e,t,n){$(e,t,n)}(n,t.dataset.onsubmit,o)})),document.addEventListener("change",(function(e){let t=e.target.closest("[data-onchange]");t&&(e.preventDefault(),null!=t.value?async function(e,t){$(e,t)}(V(t),L(t.dataset.onchange,t.value)):console.error("Missing input value:",t))})),document.addEventListener("input",(function(e){let t=e.target.closest("[data-oninput]");if(!t)return;let n=parseInt(t.dataset.delay)||250;if(n<250&&console.warn("Input delay < 250 can result in poor performance."),!t?.dataset.oninput)return void console.error("Missing onInput: ",t);e.preventDefault();let o=V(t);(function(e){"Replace"==e.concurrency&&e.cancelActiveRequest()})(o),t.debouncedCallback||(t.debouncedCallback=R((()=>{let e=L(t.dataset.oninput,t.value);!async function(e,t){$(e,t)}(o,e)}),n)),t.debouncedCallback()}))}));const Y=new class{constructor(){this.hasEverConnected=!1,this.isConnected=!1,this.reconnectDelay=0,this.queue=[],this.events=new EventTarget}connect(e=T){const t=new WebSocket(e);function n(e){console.error("Connect Error",e)}function o(e){console.error("Socket Error",e)}this.socket=t,t.addEventListener("error",n),t.addEventListener("open",(e=>{console.log("Websocket Connected"),this.hasEverConnected&&document.dispatchEvent(new Event("hyp-socket-reconnect")),this.isConnected=!0,this.hasEverConnected=!0,this.reconnectDelay=1e3,t.removeEventListener("error",n),t.addEventListener("error",o),document.dispatchEvent(new Event("hyp-socket-connect")),this.runQueue()})),t.addEventListener("close",(n=>{console.log("CLOSE SOCKET"),this.isConnected&&document.dispatchEvent(new Event("hyp-socket-disconnect")),this.isConnected=!1,t.removeEventListener("error",o),this.hasEverConnected&&(console.log("Reconnecting in "+this.reconnectDelay/1e3+"s"),setTimeout((()=>this.connect(e)),this.reconnectDelay)),t.removeEventListener("error",o)})),t.addEventListener("message",(e=>this.onMessage(e)))}async sendAction(e){if(this.isConnected){let t=function(e){let t=["|ACTION|","ViewId: "+e.viewId,"Action: "+e.action];return e.state&&t.push("State: "+e.state),t.push("RequestId: "+e.requestId),[t.join("\n"),(o=e.meta,o.map((e=>e.key+": "+e.value)).join("\n"))].join("\n")+((n=e.form)?"\n\n"+n:"");var n,o}(e);this.socket.send(t)}else this.queue.push(e)}runQueue(){let e=this.queue.pop();e&&(console.log("runQueue: ",e),this.sendAction(e),this.runQueue())}onMessage(e){let{command:t,metas:n,rest:o}=function(e){let t=e.split("\n"),n=t[0],o=g(k,t.slice(1));return{command:n,metas:o,rest:function(e,t){let n=0;for(;n<t.length&&""==t[n];)n++;return t.slice(n)}(0,t.slice(o.length+1))}}(e.data),r=parseInt(i("RequestId"),0);function i(t){let o=E(t,n);if(!o)throw new D("Missing Required Metadata: "+t,e.data);return o}function a(e){let t=i("ViewId"),o=i("Action");return{requestId:r,targetViewId:void 0,viewId:t,action:o,meta:w(n),body:e.join("\n")}}switch(t){case"|UPDATE|":return this.dispatchEvent(new CustomEvent("update",{detail:function(e){let t=a(e);return t.targetViewId=E("TargetViewId",n),t}(o)}));case"|RESPONSE|":return this.dispatchEvent(new CustomEvent("response",{detail:a(o)}));case"|REDIRECT|":return this.dispatchEvent(new CustomEvent("redirect",{detail:function(e){let t=e[0];return{requestId:r,meta:w(n),url:t}}(o)}))}}addEventListener(e,t){this.events.addEventListener(e,t)}dispatchEvent(e){this.events.dispatchEvent(e)}disconnect(){this.isConnected=!1,this.hasEverConnected=!1,this.socket.close()}};Y.connect(),Y.addEventListener("update",(e=>H(e.detail))),Y.addEventListener("response",(e=>function(e){let t=H(e);delete t.activeRequest,clearTimeout(t._timeout),t.classList.remove("hyp-loading")}(e.detail))),Y.addEventListener("redirect",(e=>{return t=e.detail,console.log("REDIRECT",t),W(t.meta.cookies),void(window.location.href=t.url);var t})),window.Hyperbole={runAction:$,parseMetadata:b,action:function(e,...t){return e+t.reduce(((e,t)=>e+" "+JSON.stringify(t)),"")},hyperView:function(e){let t=document.getElementById(e);if(t?.runAction)return t;console.error("Element id="+e+" was not a HyperView")},socket:Y}})()})();
//# sourceMappingURL=hyperbole.js.map