Skip to content

Commit

Permalink
Split out into separate imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@croxton
croxton committed Dec 5, 2023
1 parent 24e5336 commit f69a376
Show file tree
Hide file tree
Showing 16 changed files with 696 additions and 691 deletions.
270 changes: 133 additions & 137 deletions dist/booster.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {}
};
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
};
})();
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="booster-config" content='{ "basePath" : "/scripts/boosts/" }'>
<link rel="stylesheet" href="/styles/styles.css" />
<script defer src="https://cdn.jsdelivr.net/gh/bigskysoftware/[email protected]/src/htmx.min.js"></script>
<script defer src="/lib/ext/booster.js"></script>
<script src="/main.js" type="module"></script>
</head>
<body hx-ext="booster">
<header id="header">
Expand Down
Loading

0 comments on commit f69a376

Please sign in to comment.