From f69a376a7db4ca29de7c4c3d2b80247fa1ad8e77 Mon Sep 17 00:00:00 2001 From: Mark Croxton Date: Tue, 5 Dec 2023 13:07:50 +0000 Subject: [PATCH] Split out into separate imports --- dist/booster.min.js | 270 ++++++++++--------- index.html | 2 +- lib/booster.js | 192 ++++++++++++++ lib/boosterFactory.js | 92 +++++++ lib/ext/booster.js | 546 +------------------------------------- lib/getEventListeners.js | 95 +++++++ lib/loadStrategies.js | 62 +++++ lib/strategies/event.js | 19 ++ lib/strategies/idle.js | 11 + lib/strategies/index.js | 11 + lib/strategies/media.js | 14 + lib/strategies/visible.js | 36 +++ main.js | 7 + page2.html | 2 +- page3.html | 2 +- vite.config.js | 26 +- 16 files changed, 696 insertions(+), 691 deletions(-) create mode 100644 lib/booster.js create mode 100644 lib/boosterFactory.js create mode 100644 lib/getEventListeners.js create mode 100644 lib/loadStrategies.js create mode 100644 lib/strategies/event.js create mode 100644 lib/strategies/idle.js create mode 100644 lib/strategies/index.js create mode 100644 lib/strategies/media.js create mode 100644 lib/strategies/visible.js create mode 100644 main.js diff --git a/dist/booster.min.js b/dist/booster.min.js index 7d3ef00..5f73e13 100644 --- a/dist/booster.min.js +++ b/dist/booster.min.js @@ -86,125 +86,149 @@ Object.defineProperty(Booster, "_globalState", { value: {}, writable: !0 }); -(function() { - let config = { - origin: location.origin, - basePath: "scripts/boosts" - }, configMeta = document.querySelector('meta[name="booster-config"]') ?? null; - configMeta && (config = { - ...config, - ...JSON.parse(configMeta.content) - }), config.basePath = config.basePath.replace(/^\/|\/$/g, ""); - const strategies = { - event: (requirement) => new Promise((resolve) => { - let topic; - if (requirement.indexOf("(") !== -1) { - const topicStart = requirement.indexOf("(") + 1; - topic = requirement.slice(topicStart, -1); +const event = (requirement) => new Promise((resolve) => { + let topic; + if (requirement.indexOf("(") !== -1) { + const topicStart = requirement.indexOf("(") + 1; + topic = requirement.slice(topicStart, -1); + } + topic ? document.body.addEventListener(topic, () => { + resolve(); + }, { once: !0 }) : resolve(); +}), idle = () => new Promise((resolve) => { + "requestIdleCallback" in window ? window.requestIdleCallback(resolve) : setTimeout(resolve, 200); +}), media = (requirement) => new Promise((resolve) => { + const queryStart = requirement.indexOf("("), query = requirement.slice(queryStart), mediaQuery = window.matchMedia(query); + mediaQuery.matches ? resolve() : mediaQuery.addEventListener("change", resolve, { once: !0 }); +}), visible = (selector = null, requirement) => selector ? new Promise((resolve) => { + let rootMargin = "0px 0px 0px 0px"; + if (requirement.indexOf("(") !== -1) { + const rootMarginStart = requirement.indexOf("(") + 1; + rootMargin = requirement.slice(rootMarginStart, -1); + } + const observer = new IntersectionObserver((entries) => { + entries[0].isIntersecting && (observer.disconnect(), resolve()); + }, { rootMargin }); + let elm = document.querySelector(selector); + elm ? observer.observe(elm) : resolve(); +}) : Promise.resolve(!0); +function loadStrategies(strategy, selector) { + let promises = []; + if (strategy) { + let requirements = strategy.split("|").map((requirement) => requirement.trim()).filter((requirement) => requirement !== "immediate").filter((requirement) => requirement !== "eager"); + for (let requirement of requirements) { + if (requirement.startsWith("event")) { + promises.push( + event(requirement) + ); + continue; } - topic ? document.body.addEventListener( - topic, - () => { - resolve(); - }, - { once: !0 } - ) : resolve(); - }), - idle: () => new Promise((resolve) => { - "requestIdleCallback" in window ? window.requestIdleCallback(resolve) : setTimeout(resolve, 200); - }), - media: (requirement) => new Promise((resolve) => { - const queryStart = requirement.indexOf("("), query = requirement.slice(queryStart), mediaQuery = window.matchMedia(query); - mediaQuery.matches ? resolve() : mediaQuery.addEventListener("change", resolve, { once: !0 }); - }), - visible: (selector = null, requirement) => selector ? new Promise((resolve) => { - let rootMargin = "0px 0px 0px 0px"; - if (requirement.indexOf("(") !== -1) { - const rootMarginStart = requirement.indexOf("(") + 1; - rootMargin = requirement.slice(rootMarginStart, -1); + if (requirement === "idle") { + promises.push( + idle() + ); + continue; } - const observer = new IntersectionObserver( - (entries) => { - entries[0].isIntersecting && (observer.disconnect(), resolve()); - }, - { rootMargin } - ); - let elm = document.querySelector(selector); - elm ? observer.observe(elm) : resolve(); - }) : Promise.resolve(!0) - }; - function loadStrategies(strategy, selector) { - let promises = []; - if (strategy) { - let requirements = strategy.split("|").map((requirement) => requirement.trim()).filter((requirement) => requirement !== "immediate").filter((requirement) => requirement !== "eager"); - for (let requirement of requirements) { - if (requirement.startsWith("event")) { - promises.push(strategies.event(requirement)); - continue; - } - if (requirement === "idle") { - promises.push(strategies.idle()); - continue; - } - if (requirement.startsWith("media")) { - promises.push(strategies.media(requirement)); - continue; - } - requirement.startsWith("visible") && promises.push(strategies.visible(selector, requirement)); + if (requirement.startsWith("media")) { + promises.push( + media(requirement) + ); + continue; } + requirement.startsWith("visible") && promises.push( + visible(selector, requirement) + ); } - return promises; } - class componentFactory extends Booster { - constructor() { - super(); - __publicField(this, "loaded", []); - this.mount(); + return promises; +} +class BoosterFactory extends Booster { + constructor() { + super(); + __publicField(this, "loaded", []); + __publicField(this, "config", {}); + this.config = { + origin: location.origin, + basePath: "scripts/boosts" + }; + let configMeta = document.querySelector('meta[name="booster-config"]') ?? null; + configMeta && (this.config = { + ...this.config, + ...JSON.parse(configMeta.content) + }), this.config.basePath = this.config.basePath.replace(/^\/|\/$/g, ""), this.mount(); + } + mount() { + let targetId = htmx.config.currentTargetId ?? "main", target = document.getElementById(targetId); + if (target) { + let components = target.querySelectorAll("[data-booster]"); + for (let el of components) + this.lazyload(el); + target = null, components = null; } - mount() { - let targetId = htmx.config.currentTargetId ?? "main", target = document.getElementById(targetId); - if (target) { - let components = target.querySelectorAll("[data-booster]"); - for (let el of components) - this.lazyload(el); - target = null, components = null; + } + unmount() { + let targetId = htmx.config.currentTargetId ?? "main", target = document.getElementById(targetId); + if (target) { + for (let i = this.loaded.length - 1; i >= 0; i--) { + let inTarget = target.querySelector(this.loaded[i].selector), inDocument = document.querySelector(this.loaded[i].selector); + (inTarget || !inDocument) && (this.loaded[i].instance.unmount(), this.loaded.splice(i, 1)); } + target = null; } - unmount() { - let targetId = htmx.config.currentTargetId ?? "main", target = document.getElementById(targetId); - if (target) { - for (let i = this.loaded.length - 1; i >= 0; i--) { - let inTarget = target.querySelector(this.loaded[i].selector), inDocument = document.querySelector(this.loaded[i].selector); - (inTarget || !inDocument) && (this.loaded[i].instance.unmount(), this.loaded.splice(i, 1)); + } + /** + * Import a component on demand, optionally using a loading strategy + * + * @param el + */ + lazyload(el) { + let component = el.dataset.booster, version = el.dataset.version ?? "1", strategy = el.dataset.load ?? null, selector = el.getAttribute("id") ? "#" + el.getAttribute("id") : '[data-booster="' + component + '"]', promises = loadStrategies(strategy, selector); + Promise.all(promises).then(() => { + import( + /* @vite-ignore */ + `${this.config.origin}/${this.config.basePath}/${component}.js?v=${version}` + ).then( + (lazyComponent) => { + let instance = new lazyComponent.default(selector); + instance.mounted = !0, this.loaded.push({ + name: component, + selector, + instance + }); } - target = null; + ); + }); + } +} +(function() { + Element.prototype._addEventListener = Element.prototype.addEventListener, Element.prototype._removeEventListener = Element.prototype.removeEventListener, Element.prototype.addEventListener = function(type, listener, useCapture = !1) { + this._addEventListener(type, listener, useCapture), this.eventListenerList || (this.eventListenerList = {}), this.eventListenerList[type] || (this.eventListenerList[type] = []), this.eventListenerList[type].push({ type, listener, useCapture }); + }, Element.prototype.removeEventListener = function(type, listener, useCapture = !1) { + this._removeEventListener(type, listener, useCapture), this.eventListenerList || (this.eventListenerList = {}), this.eventListenerList[type] || (this.eventListenerList[type] = []); + for (let i = 0; i < this.eventListenerList[type].length; i++) + if (this.eventListenerList[type][i].listener === listener && this.eventListenerList[type][i].useCapture === useCapture) { + this.eventListenerList[type].splice(i, 1); + break; } + this.eventListenerList[type].length === 0 && delete this.eventListenerList[type]; + }, Element.prototype.getEventListeners = function(type) { + return this.eventListenerList || (this.eventListenerList = {}), type === void 0 ? this.eventListenerList : this.eventListenerList[type]; + }, Element.prototype.clearEventListeners = function(a) { + if (this.eventListenerList || (this.eventListenerList = {}), a === void 0) { + for (let x in this.getEventListeners()) + this.clearEventListeners(x); + return; } - /** - * Import a component on demand, optionally using a loading strategy - * - * @param el - */ - lazyload(el) { - let component = el.dataset.booster, version = el.dataset.version ?? "1", strategy = el.dataset.load ?? null, selector = el.getAttribute("id") ? "#" + el.getAttribute("id") : '[data-booster="' + component + '"]', promises = loadStrategies(strategy, selector); - Promise.all(promises).then(() => { - import( - /* @vite-ignore */ - `${config.origin}/${config.basePath}/${component}.js?v=${version}` - ).then( - (lazyComponent) => { - let instance = new lazyComponent.default(selector); - instance.mounted = !0, this.loaded.push({ - name: component, - selector, - instance - }); - } - ); - }); - } - } - let cache = { + const el = this.getEventListeners(a); + if (el !== void 0) + for (let i = el.length - 1; i >= 0; --i) { + let ev = el[i]; + this.removeEventListener(a, ev.listener, ev.useCapture); + } + }; +})(); +(function() { + let factory, cache = { now: {}, next: {} }; @@ -225,10 +249,9 @@ Object.defineProperty(Booster, "_globalState", { ...cache.next }, cache.next = {}); } - let factory; htmx.defineExtension("booster", { init: function() { - factory = new componentFactory(), factory.mounted = !0, saveToCache(document, "now"); + factory = new BoosterFactory(), factory.mounted = !0, saveToCache(document, "now"); }, onEvent: function(name, htmxEvent) { var _a, _b; @@ -264,30 +287,3 @@ Object.defineProperty(Booster, "_globalState", { } }); })(); -(function() { - Element.prototype._addEventListener = Element.prototype.addEventListener, Element.prototype._removeEventListener = Element.prototype.removeEventListener, Element.prototype.addEventListener = function(type, listener, useCapture = !1) { - this._addEventListener(type, listener, useCapture), this.eventListenerList || (this.eventListenerList = {}), this.eventListenerList[type] || (this.eventListenerList[type] = []), this.eventListenerList[type].push({ type, listener, useCapture }); - }, Element.prototype.removeEventListener = function(type, listener, useCapture = !1) { - this._removeEventListener(type, listener, useCapture), this.eventListenerList || (this.eventListenerList = {}), this.eventListenerList[type] || (this.eventListenerList[type] = []); - for (let i = 0; i < this.eventListenerList[type].length; i++) - if (this.eventListenerList[type][i].listener === listener && this.eventListenerList[type][i].useCapture === useCapture) { - this.eventListenerList[type].splice(i, 1); - break; - } - this.eventListenerList[type].length === 0 && delete this.eventListenerList[type]; - }, Element.prototype.getEventListeners = function(type) { - return this.eventListenerList || (this.eventListenerList = {}), type === void 0 ? this.eventListenerList : this.eventListenerList[type]; - }, Element.prototype.clearEventListeners = function(a) { - if (this.eventListenerList || (this.eventListenerList = {}), a === void 0) { - for (let x in this.getEventListeners()) - this.clearEventListeners(x); - return; - } - const el = this.getEventListeners(a); - if (el !== void 0) - for (let i = el.length - 1; i >= 0; --i) { - let ev = el[i]; - this.removeEventListener(a, ev.listener, ev.useCapture); - } - }; -})(); diff --git a/index.html b/index.html index c83844c..671b03e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +