From 82e096f43a26ca85ef281f000da45c05e8c6850a Mon Sep 17 00:00:00 2001 From: Murtuzaali Surti <68743212+murtuzaalisurti@users.noreply.github.com> Date: Fri, 14 Jun 2024 21:27:17 +0530 Subject: [PATCH] perf: minify prod output --- build.js | 3 +- main.js | 11 +- public/main.js | 366 +------------------------------------------------ 3 files changed, 5 insertions(+), 375 deletions(-) diff --git a/build.js b/build.js index ea9bf5b..dbbbfd4 100644 --- a/build.js +++ b/build.js @@ -6,7 +6,8 @@ const config = { entryPoints: ['main.js'], bundle: true, target: ['es2020'], - outdir: './public' + outdir: './public', + minify: true }; mode === "watch" diff --git a/main.js b/main.js index 4d3ddef..a88731a 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,4 @@ -/** - * @license - * This component uses a custom loash build which includes only the 'throttle' module - */ +// This component uses a custom loash build which includes only the 'throttle' module import throttle from "./modularize/throttle.js" class BackToTop extends HTMLElement { @@ -9,11 +6,7 @@ class BackToTop extends HTMLElement { super(); this.currentScrollPos = 0; this.throttleRate = 400; // milliseconds - this.buttonContent = ` - - ` + this.buttonContent = `` } static get observedAttributes() { diff --git a/public/main.js b/public/main.js index a4c3558..91b848f 100644 --- a/public/main.js +++ b/public/main.js @@ -1,365 +1 @@ -(() => { - var __typeError = (msg) => { - throw TypeError(msg); - }; - var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg); - var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj)); - var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value); - - // modularize/isObject.js - function isObject(value) { - var type = typeof value; - return value != null && (type == "object" || type == "function"); - } - var isObject_default = isObject; - - // modularize/_freeGlobal.js - var freeGlobal = typeof global == "object" && global && global.Object === Object && global; - var freeGlobal_default = freeGlobal; - - // modularize/_root.js - var freeSelf = typeof self == "object" && self && self.Object === Object && self; - var root = freeGlobal_default || freeSelf || Function("return this")(); - var root_default = root; - - // modularize/now.js - var now = function() { - return root_default.Date.now(); - }; - var now_default = now; - - // modularize/_Symbol.js - var Symbol2 = root_default.Symbol; - var Symbol_default = Symbol2; - - // modularize/_getRawTag.js - var objectProto = Object.prototype; - var hasOwnProperty = objectProto.hasOwnProperty; - var nativeObjectToString = objectProto.toString; - var symToStringTag = Symbol_default ? Symbol_default.toStringTag : void 0; - function getRawTag(value) { - var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag]; - try { - value[symToStringTag] = void 0; - var unmasked = true; - } catch (e) { - } - var result = nativeObjectToString.call(value); - if (unmasked) { - if (isOwn) { - value[symToStringTag] = tag; - } else { - delete value[symToStringTag]; - } - } - return result; - } - var getRawTag_default = getRawTag; - - // modularize/_objectToString.js - var objectProto2 = Object.prototype; - var nativeObjectToString2 = objectProto2.toString; - function objectToString(value) { - return nativeObjectToString2.call(value); - } - var objectToString_default = objectToString; - - // modularize/_baseGetTag.js - var nullTag = "[object Null]"; - var undefinedTag = "[object Undefined]"; - var symToStringTag2 = Symbol_default ? Symbol_default.toStringTag : void 0; - function baseGetTag(value) { - if (value == null) { - return value === void 0 ? undefinedTag : nullTag; - } - return symToStringTag2 && symToStringTag2 in Object(value) ? getRawTag_default(value) : objectToString_default(value); - } - var baseGetTag_default = baseGetTag; - - // modularize/isObjectLike.js - function isObjectLike(value) { - return value != null && typeof value == "object"; - } - var isObjectLike_default = isObjectLike; - - // modularize/isSymbol.js - var symbolTag = "[object Symbol]"; - function isSymbol(value) { - return typeof value == "symbol" || isObjectLike_default(value) && baseGetTag_default(value) == symbolTag; - } - var isSymbol_default = isSymbol; - - // modularize/toNumber.js - var NAN = 0 / 0; - var reTrim = /^\s+|\s+$/g; - var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; - var reIsBinary = /^0b[01]+$/i; - var reIsOctal = /^0o[0-7]+$/i; - var freeParseInt = parseInt; - function toNumber(value) { - if (typeof value == "number") { - return value; - } - if (isSymbol_default(value)) { - return NAN; - } - if (isObject_default(value)) { - var other = typeof value.valueOf == "function" ? value.valueOf() : value; - value = isObject_default(other) ? other + "" : other; - } - if (typeof value != "string") { - return value === 0 ? value : +value; - } - value = value.replace(reTrim, ""); - var isBinary = reIsBinary.test(value); - return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value; - } - var toNumber_default = toNumber; - - // modularize/debounce.js - var FUNC_ERROR_TEXT = "Expected a function"; - var nativeMax = Math.max; - var nativeMin = Math.min; - function debounce(func, wait, options) { - var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true; - if (typeof func != "function") { - throw new TypeError(FUNC_ERROR_TEXT); - } - wait = toNumber_default(wait) || 0; - if (isObject_default(options)) { - leading = !!options.leading; - maxing = "maxWait" in options; - maxWait = maxing ? nativeMax(toNumber_default(options.maxWait) || 0, wait) : maxWait; - trailing = "trailing" in options ? !!options.trailing : trailing; - } - function invokeFunc(time) { - var args = lastArgs, thisArg = lastThis; - lastArgs = lastThis = void 0; - lastInvokeTime = time; - result = func.apply(thisArg, args); - return result; - } - function leadingEdge(time) { - lastInvokeTime = time; - timerId = setTimeout(timerExpired, wait); - return leading ? invokeFunc(time) : result; - } - function remainingWait(time) { - var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall; - return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting; - } - function shouldInvoke(time) { - var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime; - return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait; - } - function timerExpired() { - var time = now_default(); - if (shouldInvoke(time)) { - return trailingEdge(time); - } - timerId = setTimeout(timerExpired, remainingWait(time)); - } - function trailingEdge(time) { - timerId = void 0; - if (trailing && lastArgs) { - return invokeFunc(time); - } - lastArgs = lastThis = void 0; - return result; - } - function cancel() { - if (timerId !== void 0) { - clearTimeout(timerId); - } - lastInvokeTime = 0; - lastArgs = lastCallTime = lastThis = timerId = void 0; - } - function flush() { - return timerId === void 0 ? result : trailingEdge(now_default()); - } - function debounced() { - var time = now_default(), isInvoking = shouldInvoke(time); - lastArgs = arguments; - lastThis = this; - lastCallTime = time; - if (isInvoking) { - if (timerId === void 0) { - return leadingEdge(lastCallTime); - } - if (maxing) { - timerId = setTimeout(timerExpired, wait); - return invokeFunc(lastCallTime); - } - } - if (timerId === void 0) { - timerId = setTimeout(timerExpired, wait); - } - return result; - } - debounced.cancel = cancel; - debounced.flush = flush; - return debounced; - } - var debounce_default = debounce; - - // modularize/throttle.js - var FUNC_ERROR_TEXT2 = "Expected a function"; - function throttle(func, wait, options) { - var leading = true, trailing = true; - if (typeof func != "function") { - throw new TypeError(FUNC_ERROR_TEXT2); - } - if (isObject_default(options)) { - leading = "leading" in options ? !!options.leading : leading; - trailing = "trailing" in options ? !!options.trailing : trailing; - } - return debounce_default(func, wait, { - "leading": leading, - "maxWait": wait, - "trailing": trailing - }); - } - var throttle_default = throttle; - - // main.js - var _defaultStyles, _hidden, _show; - var _BackToTop = class _BackToTop extends HTMLElement { - constructor() { - super(); - __privateAdd(this, _defaultStyles, { - position: "fixed", - display: "flex", - alignItems: "center", - justifyContent: "center" - }); - __privateAdd(this, _hidden, this.getCSSFromJSDeclaration({ - ...__privateGet(this, _defaultStyles), - opacity: 0, - visibility: "hidden" - })); - __privateAdd(this, _show, this.getCSSFromJSDeclaration({ - ...__privateGet(this, _defaultStyles), - opacity: 1, - visibility: "visible" - })); - this.currentScrollPos = 0; - this.throttleRate = 400; - this.buttonContent = ` - - `; - } - static get observedAttributes() { - return ["throttle"]; - } - static register(tagName) { - if ("customElements" in window) { - customElements.define(tagName || "back-to-top", _BackToTop); - } - } - /** - * @explain - * Converting camelCase CSS properties defined in JS objects to kebab case - * and returning the CSS block - */ - getCSSFromJSDeclaration(obj) { - return Object.keys(obj).map((key) => { - const camelCaseProperty = key.split("").some((letter) => letter.toLowerCase() !== letter); - const parsedKey = camelCaseProperty ? key.split("").splice( - key.split("").findIndex((letter) => letter.toLowerCase() !== letter) - ).join("").toLowerCase().concat("-").concat( - key.split("").splice( - 0, - key.split("").findIndex((letter) => letter.toLowerCase() !== letter) - ).join("").toLowerCase() - ).split("-").reverse().join("-") : key; - return `${parsedKey}: ${obj[key]}`; - }).join(";").concat(";"); - } - get svg() { - return this.backToTopButton.querySelector("svg"); - } - get getThrottleRate() { - return this.throttleRate; - } - set setThrottleRate(value) { - this.throttleRate = Number(value); - } - get getButtonContent() { - return this.buttonContent; - } - set setButtonContent(value) { - this.buttonContent = value; - } - backToTopChildElement(selector) { - return this.querySelector(selector); - } - get backToTopLink() { - return this.backToTopChildElement(".back-to-top-fallback") ?? this.backToTopChildElement("a"); - } - get backToTopButton() { - return this.backToTopChildElement("button"); - } - parseHTMLFromString(htmlAsString) { - return new DOMParser().parseFromString(htmlAsString, "text/html"); - } - templateContent(element) { - return element.querySelector("template")?.content.cloneNode(true); - } - getComputedStyles(e) { - return window.getComputedStyle(e, null); - } - handleClick() { - document.body.scrollTop = document.documentElement.scrollTop = 0; - } - throttledFunction(rate) { - return throttle_default(() => { - let prevScrollPos = document.documentElement.scrollTop || window.scrollY || document.body.scrollTop; - this.currentScrollPos <= prevScrollPos ? this.backToTopButton.style = __privateGet(this, _hidden) : this.backToTopButton.style = __privateGet(this, _show); - this.currentScrollPos = prevScrollPos; - this.currentScrollPos === 0 && (this.backToTopButton.style = __privateGet(this, _hidden)); - }, rate); - } - connectedCallback() { - this.backToTopLink && this.backToTopLink.setAttribute("hidden", true); - this.backToTopLink && (this.backToTopLink.style.display = "none"); - this.append(document.createElement("button")); - this.backToTopButton.classList.add("back-to-top"); - this.backToTopButton.style = __privateGet(this, _hidden); - this.backToTopButton.removeAttribute("hidden"); - this.setButtonContent = this.templateContent(this.parseHTMLFromString(this.buttonContent)); - const buttonContent = this.templateContent(this); - if (buttonContent) this.setButtonContent = buttonContent; - this.backToTopButton.append(this.buttonContent); - this.currentScrollPos = document.documentElement.scrollTop || window.scrollY || document.body.scrollTop; - this.handleThrottle = this.throttledFunction(this.getThrottleRate); - window.addEventListener("scroll", this.handleThrottle); - this.backToTopButton.addEventListener("click", this.handleClick); - if (this.svg) { - const currentSVGStyles = this.getComputedStyles(this.svg); - if (currentSVGStyles.getPropertyValue("display") === "inline") { - this.svg.style.display = "block"; - } - } - } - // observing the "throttle" attribute - attributeChangedCallback(name, oldVal, newVal) { - name === "throttle" && (this.setThrottleRate = newVal) && (this.handleThrottle = this.throttledFunction(this.getThrottleRate)); - } - // when the component is removed from the document, removing the listeners - disconnectedCallback() { - window.removeEventListener("scroll", this.handleThrottle); - this.backToTopButton.removeEventListener("click", this.handleClick); - } - }; - _defaultStyles = new WeakMap(); - _hidden = new WeakMap(); - _show = new WeakMap(); - var BackToTop = _BackToTop; - BackToTop.register(); -})(); -/** - * @license - * This component uses a custom loash build which includes only the 'throttle' module - */ +(()=>{var M=t=>{throw TypeError(t)};var z=(t,o,e)=>o.has(t)||M("Cannot "+e);var u=(t,o,e)=>(z(t,o,"read from private field"),e?e.call(t):o.get(t)),C=(t,o,e)=>o.has(t)?M("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(t):o.set(t,e);function Q(t){var o=typeof t;return t!=null&&(o=="object"||o=="function")}var d=Q;var Z=typeof global=="object"&&global&&global.Object===Object&&global,N=Z;var tt=typeof self=="object"&&self&&self.Object===Object&&self,et=N||tt||Function("return this")(),k=et;var ot=function(){return k.Date.now()},v=ot;var nt=k.Symbol,m=nt;var A=Object.prototype,rt=A.hasOwnProperty,it=A.toString,T=m?m.toStringTag:void 0;function st(t){var o=rt.call(t,T),e=t[T];try{t[T]=void 0;var n=!0}catch{}var s=it.call(t);return n&&(o?t[T]=e:delete t[T]),s}var G=st;var lt=Object.prototype,at=lt.toString;function ct(t){return at.call(t)}var V=ct;var ut="[object Null]",dt="[object Undefined]",W=m?m.toStringTag:void 0;function ft(t){return t==null?t===void 0?dt:ut:W&&W in Object(t)?G(t):V(t)}var $=ft;function mt(t){return t!=null&&typeof t=="object"}var D=mt;var pt="[object Symbol]";function ht(t){return typeof t=="symbol"||D(t)&&$(t)==pt}var H=ht;var q=NaN,bt=/^\s+|\s+$/g,gt=/^[-+]0x[0-9a-f]+$/i,Tt=/^0b[01]+$/i,yt=/^0o[0-7]+$/i,St=parseInt;function Ct(t){if(typeof t=="number")return t;if(H(t))return q;if(d(t)){var o=typeof t.valueOf=="function"?t.valueOf():t;t=d(o)?o+"":o}if(typeof t!="string")return t===0?t:+t;t=t.replace(bt,"");var e=Tt.test(t);return e||yt.test(t)?St(t.slice(2),e?2:8):gt.test(t)?q:+t}var L=Ct;var kt="Expected a function",vt=Math.max,xt=Math.min;function jt(t,o,e){var n,s,f,i,l,c,h=0,R=!1,b=!1,j=!0;if(typeof t!="function")throw new TypeError(kt);o=L(o)||0,d(e)&&(R=!!e.leading,b="maxWait"in e,f=b?vt(L(e.maxWait)||0,o):f,j="trailing"in e?!!e.trailing:j);function w(r){var a=n,g=s;return n=s=void 0,h=r,i=t.apply(g,a),i}function _(r){return h=r,l=setTimeout(S,o),R?w(r):i}function K(r){var a=r-c,g=r-h,F=o-a;return b?xt(F,f-g):F}function P(r){var a=r-c,g=r-h;return c===void 0||a>=o||a<0||b&&g>=f}function S(){var r=v();if(P(r))return I(r);l=setTimeout(S,K(r))}function I(r){return l=void 0,j&&n?w(r):(n=s=void 0,i)}function X(){l!==void 0&&clearTimeout(l),h=0,n=c=s=l=void 0}function Y(){return l===void 0?i:I(v())}function E(){var r=v(),a=P(r);if(n=arguments,s=this,c=r,a){if(l===void 0)return _(c);if(b)return l=setTimeout(S,o),w(c)}return l===void 0&&(l=setTimeout(S,o)),i}return E.cancel=X,E.flush=Y,E}var J=jt;var wt="Expected a function";function Et(t,o,e){var n=!0,s=!0;if(typeof t!="function")throw new TypeError(wt);return d(e)&&(n="leading"in e?!!e.leading:n,s="trailing"in e?!!e.trailing:s),J(t,o,{leading:n,maxWait:o,trailing:s})}var U=Et;var y,p,x,B=class B extends HTMLElement{constructor(){super();C(this,y,{position:"fixed",display:"flex",alignItems:"center",justifyContent:"center"});C(this,p,this.getCSSFromJSDeclaration({...u(this,y),opacity:0,visibility:"hidden"}));C(this,x,this.getCSSFromJSDeclaration({...u(this,y),opacity:1,visibility:"visible"}));this.currentScrollPos=0,this.throttleRate=400,this.buttonContent=''}static get observedAttributes(){return["throttle"]}static register(e){"customElements"in window&&customElements.define(e||"back-to-top",B)}getCSSFromJSDeclaration(e){return Object.keys(e).map(n=>`${n.split("").some(i=>i.toLowerCase()!==i)?n.split("").splice(n.split("").findIndex(i=>i.toLowerCase()!==i)).join("").toLowerCase().concat("-").concat(n.split("").splice(0,n.split("").findIndex(i=>i.toLowerCase()!==i)).join("").toLowerCase()).split("-").reverse().join("-"):n}: ${e[n]}`).join(";").concat(";")}get svg(){return this.backToTopButton.querySelector("svg")}get getThrottleRate(){return this.throttleRate}set setThrottleRate(e){this.throttleRate=Number(e)}get getButtonContent(){return this.buttonContent}set setButtonContent(e){this.buttonContent=e}backToTopChildElement(e){return this.querySelector(e)}get backToTopLink(){return this.backToTopChildElement(".back-to-top-fallback")??this.backToTopChildElement("a")}get backToTopButton(){return this.backToTopChildElement("button")}parseHTMLFromString(e){return new DOMParser().parseFromString(e,"text/html")}templateContent(e){return e.querySelector("template")?.content.cloneNode(!0)}getComputedStyles(e){return window.getComputedStyle(e,null)}handleClick(){document.body.scrollTop=document.documentElement.scrollTop=0}throttledFunction(e){return U(()=>{let n=document.documentElement.scrollTop||window.scrollY||document.body.scrollTop;this.currentScrollPos<=n?this.backToTopButton.style=u(this,p):this.backToTopButton.style=u(this,x),this.currentScrollPos=n,this.currentScrollPos===0&&(this.backToTopButton.style=u(this,p))},e)}connectedCallback(){this.backToTopLink&&this.backToTopLink.setAttribute("hidden",!0),this.backToTopLink&&(this.backToTopLink.style.display="none"),this.append(document.createElement("button")),this.backToTopButton.classList.add("back-to-top"),this.backToTopButton.style=u(this,p),this.backToTopButton.removeAttribute("hidden"),this.setButtonContent=this.templateContent(this.parseHTMLFromString(this.buttonContent));let e=this.templateContent(this);e&&(this.setButtonContent=e),this.backToTopButton.append(this.buttonContent),this.currentScrollPos=document.documentElement.scrollTop||window.scrollY||document.body.scrollTop,this.handleThrottle=this.throttledFunction(this.getThrottleRate),window.addEventListener("scroll",this.handleThrottle),this.backToTopButton.addEventListener("click",this.handleClick),this.svg&&this.getComputedStyles(this.svg).getPropertyValue("display")==="inline"&&(this.svg.style.display="block")}attributeChangedCallback(e,n,s){e==="throttle"&&(this.setThrottleRate=s)&&(this.handleThrottle=this.throttledFunction(this.getThrottleRate))}disconnectedCallback(){window.removeEventListener("scroll",this.handleThrottle),this.backToTopButton.removeEventListener("click",this.handleClick)}};y=new WeakMap,p=new WeakMap,x=new WeakMap;var O=B;O.register();})();