Fix: go-live-component-id

component.go

@@ -15,7 +15,7 @@ import (
 	"golang.org/x/net/html"
 )
 
-const ComponentIdAttrKey = "go-live-Component-id"
+const ComponentIdAttrKey = "go-live-component-id"
 
 var (
 	ErrComponentNotPrepared = errors.New("Component need to be prepared")

go.mod

@@ -6,5 +6,6 @@ require (
 	github.com/gofiber/fiber/v2 v2.2.3
 	github.com/gofiber/websocket/v2 v2.0.2
 	github.com/logrusorgru/aurora/v3 v3.0.0
+	github.com/tdewolff/minify/v2 v2.9.13 // indirect
 	golang.org/x/net v0.0.0-20201202161906-c7110b5ffcbb
 )

go.sum

@@ -1,7 +1,10 @@
 github.com/andybalholm/brotli v1.0.0 h1:7UCwP93aiSfvWpapti8g88vVVGp2qqtGyePsSuDafo4=
 github.com/andybalholm/brotli v1.0.0/go.mod h1:loMXtMfwqflxFJPmdbJO0a3KNoPuLBgiu3qAvBg8x/Y=
+github.com/cheekybits/is v0.0.0-20150225183255-68e9c0620927/go.mod h1:h/aW8ynjgkuj+NQRlZcDbAbM1ORAbXjXX77sX7T289U=
+github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
 github.com/fasthttp/websocket v1.4.3 h1:qjhRJ/rTy4KB8oBxljEC00SDt6HUY9jLRfM601SUdS4=
 github.com/fasthttp/websocket v1.4.3/go.mod h1:5r4oKssgS7W6Zn6mPWap3NWzNPJNzUUh3baWTOhcYQk=
+github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
 github.com/gofiber/fiber/v2 v2.1.0/go.mod h1:aG+lMkwy3LyVit4CnmYUbUdgjpc3UYOltvlJZ78rgQ0=
 github.com/gofiber/fiber/v2 v2.2.3 h1:mnaX66dpJOQYS0uii2Nd8fVzpqXMjiXqI5ci1QhM0EI=
 github.com/gofiber/fiber/v2 v2.2.3/go.mod h1:Aso7/M+EQOinVkWp4LUYjdlTpKTBoCk2Qo4djnMsyHE=
@@ -12,8 +15,16 @@ github.com/klauspost/compress v1.10.7 h1:7rix8v8GpI3ZBb0nSozFRgbtXKv+hOe+qfEpZqy
 github.com/klauspost/compress v1.10.7/go.mod h1:aoV0uJVorq1K+umq18yTdKaF57EivdYsUV+/s2qKfXs=
 github.com/logrusorgru/aurora/v3 v3.0.0 h1:R6zcoZZbvVcGMvDCKo45A9U/lzYyzl5NfYIvznmDfE4=
 github.com/logrusorgru/aurora/v3 v3.0.0/go.mod h1:vsR12bk5grlLvLXAYrBsb5Oc/N+LxAlxggSjiwMnCUc=
+github.com/matryer/try v0.0.0-20161228173917-9ac251b645a2/go.mod h1:0KeJpeMD6o+O4hW7qJOT7vyQPKrWmj26uf5wMc/IiIs=
 github.com/savsgio/gotils v0.0.0-20200608150037-a5f6f5aef16c h1:2nF5+FZ4/qp7pZVL7fR6DEaSTzuDmNaFTyqp92/hwF8=
 github.com/savsgio/gotils v0.0.0-20200608150037-a5f6f5aef16c/go.mod h1:TWNAOTaVzGOXq8RbEvHnhzA/A2sLZzgn0m6URjnukY8=
+github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/tdewolff/minify v2.3.6+incompatible h1:2hw5/9ZvxhWLvBUnHE06gElGYz+Jv9R4Eys0XUzItYo=
+github.com/tdewolff/minify/v2 v2.9.13 h1:RrwQhgGoYBhKN/ezStGB+crU64wPK1ZE5Jmkl63lif0=
+github.com/tdewolff/minify/v2 v2.9.13/go.mod h1:faNOp+awAoo+fhFHD+NAkBOaXBAvJI2X2SDERGKnARo=
+github.com/tdewolff/parse/v2 v2.5.10 h1:vj35n+ljq8LuYUx436s4qB18wuwP7thrLv+t1syE39M=
+github.com/tdewolff/parse/v2 v2.5.10/go.mod h1:WzaJpRSbwq++EIQHYIRTpbYKNA3gn9it1Ik++q4zyho=
+github.com/tdewolff/test v1.0.6/go.mod h1:6DAvZliBAAnD7rhVgwaM7DE5/d9NMOAJ09SqYqeK4QE=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasthttp v1.14.0/go.mod h1:ol1PCaL0dX20wC0htZ7sYCsvCYmrouYra0zHzaclZhE=
@@ -33,8 +44,10 @@ golang.org/x/net v0.0.0-20201202161906-c7110b5ffcbb h1:eBmm0M9fYhWpKZLjQUUKka/Lt
 golang.org/x/net v0.0.0-20201202161906-c7110b5ffcbb/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20191005200804-aed5e4c7ecf9/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200602225109-6fdc65e7d980/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200724161237-0e2f3a69832c/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201015000850-e3ed0017c211/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68 h1:nxC68pudNYkKU6jWhgrqdreuFiOQWj1Fs7T3VrH4Pjw=

html_page.go

@@ -8,13 +8,14 @@ var BasePageString = `<!DOCTYPE html>
     <meta charset="UTF-8" />
     <title>{{ .Title }}</title>
     {{ .Head }}
-    <script type="application/javascript">
-      const GO_LIVE_CONNECTED="go-live-connected",GO_LIVE_COMPONENT_ID="go-live-Component-id",EVENT_LIVE_DOM_COMPONENT_ID_KEY="cid",EVENT_LIVE_DOM_INSTRUCTIONS_KEY="i",EVENT_LIVE_DOM_TYPE_KEY="t",EVENT_LIVE_DOM_CONTENT_KEY="c",EVENT_LIVE_DOM_ATTR_KEY="a",EVENT_LIVE_DOM_SELECTOR_KEY="s",EVENT_LIVE_DOM_INDEX_KEY="i",handleChange={"{{ .Enum.DiffSetAttr }}":handleDiffSetAttr,"{{ .Enum.DiffRemoveAttr }}":handleDiffRemoveAttr,"{{ .Enum.DiffReplace }}":handleDiffReplace,"{{ .Enum.DiffRemove }}":handleDiffRemove,"{{ .Enum.DiffSetInnerHTML }}":handleDiffSetInnerHTML,"{{ .Enum.DiffAppend }}":handleDiffAppend,"{{ .Enum.DiffMove }}":handleDiffMove},goLive={server:createConnection(),handlers:[],once:createOnceEmitter(),getLiveComponent(a){return document.querySelector(["*[",GO_LIVE_COMPONENT_ID,"=",a,"]"].join(""))},on(a,b){const c=this.handlers.push({name:a,handler:b});return c-1},findHandler(a){return this.handlers.filter(b=>b.name===a)},emit(a,b){for(const c of this.findHandler(a))c.handler(b)},off(a){this.handlers.splice(a,1)},send(a){goLive.server.send(JSON.stringify(a))},connectChildren(a){const b=a.querySelectorAll("*["+GO_LIVE_COMPONENT_ID+"]");b.forEach(a=>{this.connectElement(a)})},connectElement(a){if(typeof a=="string"){console.warn("is string");return}if(!isElement(a)){console.warn("not element");return}console.trace("connecting elmeent",a);const b=[],c=findLiveClicksFromElement(a);c.forEach(function(a){const c=getComponentIdFromElement(a);a.addEventListener("click",function(b){goLive.send({name:"{{ .Enum.EventLiveMethod }}",component_id:c,method_name:a.getAttribute("go-live-click"),method_data:dataFromElementAttributes(a)})}),b.push(a)});const d=findLiveKeyDownFromElement(a);d.forEach(function(a){const e=getComponentIdFromElement(a),f=a.getAttribute("go-live-keydown"),c=a.attributes;let d=[];for(let a=0;a<c.length;a++)(c[a].name==="go-live-key"||c[a].name.startsWith("go-live-key-"))&&d.push(c[a].value);a.addEventListener("keydown",function(g){const c=String(g.code);let b=!0;if(d.length!==0){b=!1;for(let a=0;a<d.length;a++)if(d[a]===c){b=!0;break}}b&&goLive.send({name:"{{ .Enum.EventLiveMethod }}",component_id:e,method_name:f,method_data:dataFromElementAttributes(a),dom_event:{keyCode:c}})}),b.push(a)});const e=findLiveInputsFromElement(a);e.forEach(function(a){const c=a.getAttribute("type"),d=getComponentIdFromElement(a);a.addEventListener("input",function(e){let b=a.value;c==="checkbox"&&(b=a.checked),goLive.send({name:"{{ .Enum.EventLiveInput }}",component_id:d,key:a.getAttribute("go-live-input"),value:String(b)})}),b.push(a)});for(const a of b)a.setAttribute(GO_LIVE_CONNECTED,!0)},connect(a){const b=goLive.getLiveComponent(a);goLive.connectElement(b),goLive.on("{{ .Enum.EventLiveDom }}",function(b){if(a===b[EVENT_LIVE_DOM_COMPONENT_ID_KEY])for(const c of b[EVENT_LIVE_DOM_INSTRUCTIONS_KEY]){const f=c[EVENT_LIVE_DOM_TYPE_KEY],g=c[EVENT_LIVE_DOM_CONTENT_KEY],h=c[EVENT_LIVE_DOM_ATTR_KEY],d=c[EVENT_LIVE_DOM_SELECTOR_KEY],i=c[EVENT_LIVE_DOM_INDEX_KEY],e=document.querySelector(d);if(!e){console.error("Element not found",d);return}handleChange[f]({content:g,attr:h,index:i},e,a)}})}};goLive.once.on("WS_CONNECTION_OPEN",()=>{goLive.on("{{ .Enum.EventLiveConnectElement }}",a=>{const b=a[EVENT_LIVE_DOM_COMPONENT_ID_KEY];goLive.connect(b)}),goLive.on("{{ .Enum.EventLiveError }}",a=>{console.error("message",a.m),a.m==='{{ index .EnumLiveError ` + "`LiveErrorSessionNotFound`" + `}}'&&window.location.reload(!1)})}),goLive.server.onmessage=a=>{try{const b=JSON.parse(a.data);goLive.emit(b.t,b)}catch(b){console.log("Error",b),console.log("Error message",a.data)}},goLive.server.onopen=()=>{goLive.once.emit("WS_CONNECTION_OPEN")};function createConnection(){const a=[];return window.location.protocol==="https:"?a.push("wss"):a.push("ws"),a.push("://",window.location.host,"/ws"),new WebSocket(a.join(""))}function createOnceEmitter(){const a={},b=(b,c)=>(a[b]={called:c,cbs:[]},a[b]);return{on(d,e){let c=a[d];c||(c=b(d,!1)),c.cbs.push(e)},emit(c,...e){const d=a[c];if(!d){b(c,!0);return}for(const a of d.cbs)a()}}}const findLiveInputsFromElement=a=>a.querySelectorAll(["*[go-live-input]:not([",GO_LIVE_CONNECTED,"])"].join("")),findLiveClicksFromElement=a=>a.querySelectorAll(["*[go-live-click]:not([",GO_LIVE_CONNECTED,"])"].join("")),findLiveKeyDownFromElement=a=>a.querySelectorAll(["*[go-live-keydown]:not([",GO_LIVE_CONNECTED,"])"].join("")),dataFromElementAttributes=c=>{const a=c.attributes;let b={};for(let c=0;c<a.length;c++)a[c].name.startsWith("go-live-data-")&&(b[a[c].name.substring(13)]=a[c].value);return b};function getElementChild(b,c){let a=b.firstElementChild;while(c>0){if(!a){console.log("Element not found in path",b);return}if(a=a.nextSibling,a.nodeType!==Node.ELEMENT_NODE)continue;c--}return a}function isElement(a){return typeof HTMLElement=="object"?a instanceof HTMLElement:a&&typeof a=="object"&&a.nodeType===1&&typeof a.nodeName=="string"}function handleDiffSetAttr(c,b){const{attr:a}=c;a.Name==="value"&&b.value?b.value=a.Value:b.setAttribute(a.Name,a.Value)}function handleDiffRemoveAttr(a,b){const{attr:c}=a;b.removeAttribute(c.Name)}function handleDiffReplace(d,a){const{content:e}=d,b=document.createElement("div");b.innerHTML=e;const c=a.parentElement;c.replaceChild(b.firstChild,a),goLive.connectElement(c)}function handleDiffRemove(c,a){const b=a.parentElement;b.removeChild(a)}function handleDiffSetInnerHTML(c,a){let{content:b}=c;if(b===void 0&&(b=""),a.nodeType===Node.TEXT_NODE){a.textContent=b;return}a.innerHTML=b,goLive.connectElement(a)}function handleDiffAppend(c,a){const{content:d}=c,b=document.createElement("div");b.innerHTML=d;const e=b.firstChild;a.appendChild(e),goLive.connectElement(a)}function handleDiffMove(c,a){const b=a.parentNode;b.removeChild(a);const d=getElementChild(b,c.index);b.replaceChild(a,d)}const getComponentIdFromElement=a=>{const b=a.getAttribute("go-live-Component-id");return b?b:a.parentElement?getComponentIdFromElement(a.parentElement):void 0}
-    </script>
   </head>
 
   <body>
     {{ .Body }}
   </body>
+
+  <script type="application/javascript">
+    const GO_LIVE_CONNECTED="go-live-connected",GO_LIVE_COMPONENT_ID="go-live-component-id",EVENT_LIVE_DOM_COMPONENT_ID_KEY="cid",EVENT_LIVE_DOM_INSTRUCTIONS_KEY="i",EVENT_LIVE_DOM_TYPE_KEY="t",EVENT_LIVE_DOM_CONTENT_KEY="c",EVENT_LIVE_DOM_ATTR_KEY="a",EVENT_LIVE_DOM_SELECTOR_KEY="s",EVENT_LIVE_DOM_INDEX_KEY="i",handleChange={"{{ .Enum.DiffSetAttr }}":handleDiffSetAttr,"{{ .Enum.DiffRemoveAttr }}":handleDiffRemoveAttr,"{{ .Enum.DiffReplace }}":handleDiffReplace,"{{ .Enum.DiffRemove }}":handleDiffRemove,"{{ .Enum.DiffSetInnerHTML }}":handleDiffSetInnerHTML,"{{ .Enum.DiffAppend }}":handleDiffAppend,"{{ .Enum.DiffMove }}":handleDiffMove},goLive={server:createConnection(),handlers:[],once:createOnceEmitter(),getLiveComponent(a){return document.querySelector(["*[",GO_LIVE_COMPONENT_ID,"=",a,"]"].join(""))},on(a,b){const c=this.handlers.push({name:a,handler:b});return c-1},findHandler(a){return this.handlers.filter(b=>b.name===a)},emit(a,b){for(const c of this.findHandler(a))c.handler(b)},off(a){this.handlers.splice(a,1)},send(a){goLive.server.send(JSON.stringify(a))},connectChildren(a){const b=a.querySelectorAll("*["+GO_LIVE_COMPONENT_ID+"]");b.forEach(a=>{this.connectElement(a)})},connectElement(a){if(typeof a=="string"){console.warn("is string");return}if(!isElement(a)){console.warn("not element");return}const b=[],c=findLiveClicksFromElement(a);c.forEach(function(a){const c=getComponentIdFromElement(a);a.addEventListener("click",function(b){goLive.send({name:"{{ .Enum.EventLiveMethod }}",component_id:c,method_name:a.getAttribute("go-live-click"),method_data:dataFromElementAttributes(a)})}),b.push(a)});const d=findLiveKeyDownFromElement(a);d.forEach(function(a){const e=getComponentIdFromElement(a),f=a.getAttribute("go-live-keydown"),c=a.attributes;let d=[];for(let a=0;a<c.length;a++)(c[a].name==="go-live-key"||c[a].name.startsWith("go-live-key-"))&&d.push(c[a].value);a.addEventListener("keydown",function(g){const c=String(g.code);let b=!0;if(d.length!==0){b=!1;for(let a=0;a<d.length;a++)if(d[a]===c){b=!0;break}}b&&goLive.send({name:"{{ .Enum.EventLiveMethod }}",component_id:e,method_name:f,method_data:dataFromElementAttributes(a),dom_event:{keyCode:c}})}),b.push(a)});const e=findLiveInputsFromElement(a);e.forEach(function(a){const c=a.getAttribute("type"),d=getComponentIdFromElement(a);a.addEventListener("input",function(e){let b=a.value;c==="checkbox"&&(b=a.checked),goLive.send({name:"{{ .Enum.EventLiveInput }}",component_id:d,key:a.getAttribute("go-live-input"),value:String(b)})}),b.push(a)});for(const a of b)a.setAttribute(GO_LIVE_CONNECTED,!0)},connect(a){const b=goLive.getLiveComponent(a);goLive.connectElement(b),goLive.on("{{ .Enum.EventLiveDom }}",function(b){if(a===b[EVENT_LIVE_DOM_COMPONENT_ID_KEY])for(const c of b[EVENT_LIVE_DOM_INSTRUCTIONS_KEY]){const f=c[EVENT_LIVE_DOM_TYPE_KEY],g=c[EVENT_LIVE_DOM_CONTENT_KEY],h=c[EVENT_LIVE_DOM_ATTR_KEY],d=c[EVENT_LIVE_DOM_SELECTOR_KEY],i=c[EVENT_LIVE_DOM_INDEX_KEY],e=document.querySelector(d);if(!e){console.error("Element not found",d);return}handleChange[f]({content:g,attr:h,index:i},e,a)}})}};goLive.once.on("WS_CONNECTION_OPEN",()=>{goLive.on("{{ .Enum.EventLiveConnectElement }}",a=>{const b=a[EVENT_LIVE_DOM_COMPONENT_ID_KEY];goLive.connect(b)}),goLive.on("{{ .Enum.EventLiveError }}",a=>{console.error("message",a.m),a.m==='{{ index .EnumLiveError ` + "`LiveErrorSessionNotFound`" + `}}'&&window.location.reload(!1)})}),goLive.server.onmessage=a=>{try{const b=JSON.parse(a.data);goLive.emit(b.t,b)}catch(b){console.log("Error",b),console.log("Error message",a.data)}},goLive.server.onopen=()=>{goLive.once.emit("WS_CONNECTION_OPEN")};function createConnection(){const a=[];return window.location.protocol==="https:"?a.push("wss"):a.push("ws"),a.push("://",window.location.host,"/ws"),new WebSocket(a.join(""))}function createOnceEmitter(){const a={},b=(b,c)=>(a[b]={called:c,cbs:[]},a[b]);return{on(d,e){let c=a[d];c||(c=b(d,!1)),c.cbs.push(e)},emit(c,...e){const d=a[c];if(!d){b(c,!0);return}for(const a of d.cbs)a()}}}const findLiveInputsFromElement=a=>a.querySelectorAll(["*[go-live-input]:not([",GO_LIVE_CONNECTED,"])"].join("")),findLiveClicksFromElement=a=>a.querySelectorAll(["*[go-live-click]:not([",GO_LIVE_CONNECTED,"])"].join("")),findLiveKeyDownFromElement=a=>a.querySelectorAll(["*[go-live-keydown]:not([",GO_LIVE_CONNECTED,"])"].join("")),dataFromElementAttributes=c=>{const a=c.attributes;let b={};for(let c=0;c<a.length;c++)a[c].name.startsWith("go-live-data-")&&(b[a[c].name.substring(13)]=a[c].value);return b};function getElementChild(b,c){let a=b.firstElementChild;while(c>0){if(!a){console.error("Element not found in path",b);return}if(a=a.nextSibling,a.nodeType!==Node.ELEMENT_NODE)continue;c--}return a}function isElement(a){return typeof HTMLElement=="object"?a instanceof HTMLElement:a&&typeof a=="object"&&a.nodeType===1&&typeof a.nodeName=="string"}function handleDiffSetAttr(c,b){const{attr:a}=c;a.Name==="value"&&b.value?b.value=a.Value:b.setAttribute(a.Name,a.Value)}function handleDiffRemoveAttr(a,b){const{attr:c}=a;b.removeAttribute(c.Name)}function handleDiffReplace(d,a){const{content:e}=d,b=document.createElement("div");b.innerHTML=e;const c=a.parentElement;c.replaceChild(b.firstChild,a),goLive.connectElement(c)}function handleDiffRemove(c,a){const b=a.parentElement;b.removeChild(a)}function handleDiffSetInnerHTML(c,a){let{content:b}=c;if(b===void 0&&(b=""),a.nodeType===Node.TEXT_NODE){a.textContent=b;return}a.innerHTML=b,goLive.connectElement(a)}function handleDiffAppend(c,a){const{content:d}=c,b=document.createElement("div");b.innerHTML=d;const e=b.firstChild;a.appendChild(e),goLive.connectElement(a)}function handleDiffMove(c,a){const b=a.parentNode;b.removeChild(a);const d=getElementChild(b,c.index);b.replaceChild(a,d)}const getComponentIdFromElement=a=>{const b=a.getAttribute("go-live-component-id");return b?b:a.parentElement?getComponentIdFromElement(a.parentElement):void 0}
+  </script>
 </html>
 `