express-live-reloading
Version:
Live reloading middleware express
1 lines • 5.62 kB
JavaScript
document.addEventListener("DOMContentLoaded",()=>{if(!(io instanceof Function))throw"io not exists";const t=io("/live-reload");let e=document.location.host,s=null;const a=(t,a,o)=>{const n=new RegExp(".(min|(pre-)?prod|dist)."+("style"===o?"css":"js")+"$");return!(!t||(t=>t.split("://")[1].split("/")[0])(t)!==e||s[o+"s"].includes(a)||n.test(a))};t.on("skip",e=>{s=e,function(){const e=[...document.querySelectorAll("link")].filter(t=>a(t.href,t.getAttribute("href"),"style")).map(t=>t.getAttribute("href")),s=[...document.querySelectorAll("script")].filter(t=>a(t.src,t.getAttribute("src"),"script")).map(t=>t.getAttribute("src"));t.emit("assets",{styles:e,scripts:s})}()}),t.on("connect",()=>{o.onReloadStatus(!0),console.info("%c[live reload] on","color:green;background:rgb(0,0,25);padding: 3px 5px;")}),t.on("disconnect",()=>{o.onReloadStatus(!1),console.warn("%c[live reload] off","color:red;background:rgb(0,0,25);padding: 3px 5px;")}),t.on("reload",()=>document.location.reload()),t.on("success watch",t=>{o.onWatch.success(t),console.info(t," --watched with success")}),t.on("fail watch",t=>{o.onWatch.fail(t),console.warn(t," fail watch")}),t.on("toolbar show",t=>{t?o.inject():console.info('you can show an toolbar status for live reloading from you `server.js` use: `liveReload.toolbar( true )` \nand inside you view call `<link rel="stylesheet" href="/toolbar-live-reload.css">` ')});const o={entryPoint:document.querySelector("body"),_wrap:null,get wrap(){return this._wrap},set wrap(t){if(this._wrap=t instanceof Node?t:null,!this._wrap)throw new TypeError("wrap render for Toolbar must be an Node")},state:{TCP:null,files:[]},nodeNameBlock(t){if(!("string"==typeof t||t instanceof Node))throw new TypeError("arg1 of nodeNameBlock must be an string or an Node");if(t instanceof Node)return t.nodeName;const e=t.indexOf("<"),s=t.indexOf(">");return t.slice(e+1,s).trim().toLocaleLowerCase()},get nodeNameStateView(){const{stateView:t}=this;return this.nodeNameBlock(t)},stateView:'\n <section>\n <h2>\n Live Reloading status\n <small\n data-state\n data-state-key="TCP"\n data-state-type="boolean"\n >\n unknow\n </small>\n </h2>\n\n <ul\n data-prototype=\'<li> <span data-state data-state-key="path" data-state-type="string"></span> <span data-state data-state-key="status" data-state-type="boolean"></span></li>\'\n\n data-state\n data-state-key="files"\n data-state-type="array[]"\n data-state-builder="data-prototype"\n >\n </ul>\n\n <p>\n develop by\n <a href="https://orivoir.github.io/profil-reactjs">Gaborieau.S</a>\n with ❤️ for open source\n </p>\n </section>\n ',setState(t){const{state:e}=this;Object.keys(t).forEach(s=>e[s]=t[s]),this.state=e,this.wrap&&this.upgradeRender()},buildBlock(t){const e=this.nodeNameBlock(t),s=(t=t.replace(`<${e}>`,"")).lastIndexOf(`</${e}>`);t=t.slice(0,s);const a=document.createElement(e);return a.innerHTML=t,a},get update(){const t=this;return{TCP(t,e){if(!(e instanceof Node))throw new TypeError("node update of TCP updater must be an node");e.textContent=t?"on":"off",t?(e.classList.add("toolbar-express-live-reloading-status-tcp-on"),e.classList.remove("toolbar-express-live-reloading-status-tcp-off"),e.parentNode.classList.add("toolbar-express-live-reloading-status-tcp-on"),e.parentNode.classList.remove("toolbar-express-live-reloading-status-tcp-off")):(e.classList.remove("toolbar-express-live-reloading-status-tcp-on"),e.classList.add("toolbar-express-live-reloading-status-tcp-off"),e.parentNode.classList.remove("toolbar-express-live-reloading-status-tcp-on"),e.parentNode.classList.add("toolbar-express-live-reloading-status-tcp-off"))},files(e,s){if(!(s instanceof Node))throw new TypeError("node update of files updater must be an node");const a=s.getAttribute("data-state-builder"),o=s.getAttribute(a),n=t.buildBlock(o);e.forEach(t=>{this.file(n,t),s.appendChild(n)})},file(t,e){t.querySelectorAll("[data-state]").forEach(t=>{const s=t.getAttribute("data-state-key"),a=t.getAttribute("data-state-type");if(typeof e[s]!==a)throw new ReferenceError(`state file ${s} is not recognize`);this.fileState({stateValue:e[s],stateNode:t})})},fileState({stateValue:t,stateNode:e}){e.textContent="string"==typeof t?t:"","boolean"==typeof t&&(t?(e.classList.add("toolbar-express-live-reloading-status-file-success"),e.classList.remove("toolbar-express-live-reloading-status-file-fail")):(e.classList.remove("toolbar-express-live-reloading-status-file-success"),e.classList.add("toolbar-express-live-reloading-status-file-fail")))}}},upgradeRender(){const{wrap:t,state:e}=this;[...t.querySelectorAll("[data-state]")].forEach(t=>{const s=t.getAttribute("data-state-key");this.update[s]instanceof Function&&this.update[s](e[s],t)})},onReloadStatus(t){this.setState({TCP:!!t})},get onWatch(){const{state:t}=this,e=this;return{fail(s){e.setState({files:[...t.files,{path:s,status:!1}]})},success(s){e.setState({files:[...t.files,{path:s,status:!0}]})}}},inject(){const{stateView:t,entryPoint:e}=this;if(!(e instanceof Node))throw new TypeError("parent node render for Toolbar component not exists");{const s=this.buildBlock(t);s.id="toolbar-express-live-reloading",this.wrap=s,e.appendChild(s)}}}});