@ecopages/scripts-injector 0.1.1 → 0.1.2

package/package.json

@@ -1,9 +1,13 @@
 {
 	"name": "@ecopages/scripts-injector",
 	"main": "scripts-injector.js",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"type": "module",
 	"types": "types.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ecopages/scripts-injector"
+	},
 	"exports": {
 		"./package.json": {
 			"import": "./package.json"
@@ -15,10 +19,14 @@
 		"./types": "./types.d.ts"
 	},
 	"scripts": {
-		"build:lib": "rm -rf dist && bun build --entry scripts-injector.ts --outdir . --minify"
+		"build:lib": "rm -rf dist && bun build --entry scripts-injector.ts --outdir . --minify",
+		"test": "vitest",
+		"test:run": "vitest run"
 	},
 	"devDependencies": {
-		"@types/bun": "latest"
+		"@types/bun": "latest",
+		"@vitest/browser-playwright": "^4.0.16",
+		"vitest": "^4.0.16"
 	},
 	"peerDependencies": {
 		"typescript": "^5.0.0"

package/scripts-injector.js

@@ -1 +1 @@
-var i;(function(t){t["DATA_LOADED"]="data-loaded"})(i||(i={}));var o=["on:visible","on:idle","on:interaction"];class n extends HTMLElement{intersectionObserver=null;scriptsToLoad=[];registeredEvents=[];conditionsMap={visible:this.onVisible.bind(this),idle:this.onIdle.bind(this),interaction:this.onInteraction.bind(this)};constructor(){super();this.loadScripts=this.loadScripts.bind(this),this.listenToDataLoaded=this.listenToDataLoaded.bind(this)}connectedCallback(){this.scriptsToLoad=this.getAttribute("scripts")?.split(",")||[],document.addEventListener(i.DATA_LOADED,this.listenToDataLoaded),this.applyConditions()}disconnectedCallback(){if(this.unregisterEvents(),this.intersectionObserver)this.intersectionObserver.disconnect()}notifyInjectors(){document.dispatchEvent(new CustomEvent(i.DATA_LOADED,{detail:{loadedScripts:this.scriptsToLoad}}))}applyConditions(){const e=Object.keys(this.conditionsMap);for(let t of e)if(this.hasAttribute(`on:${t}`))this.conditionsMap[t]()}onVisible(){return this.setupIntersectionObserver()}onIdle(){return this.loadScripts()}onInteraction(){const e=this.getAttribute("on:interaction");if(!e)return;for(let t of e.split(","))this.addEventListener(t,this.loadScripts),this.registeredEvents.push({type:t,listener:this.loadScripts})}listenToDataLoaded(e){if(this.hasAttribute("data-loaded"))return;const{loadedScripts:t}=e.detail;if(this.scriptsToLoad=this.scriptsToLoad.filter((s)=>!t.includes(s)),this.scriptsToLoad.length===0)this.setAttribute("data-loaded",""),this.unregisterEvents()}unregisterEvents(){document.dispatchEvent(new CustomEvent(i.DATA_LOADED,{detail:{loadedScripts:this.scriptsToLoad}})),this.intersectionObserver?.disconnect();for(let{type:e,listener:t}of this.registeredEvents)this.removeEventListener(e,t)}loadScripts(){try{for(let e of this.scriptsToLoad)this.loadScript(e)}catch(e){console.error("Error loading scripts",e)}finally{this.setAttribute("data-loaded",""),this.unregisterEvents(),this.notifyInjectors()}}loadScript(e){const t=document.createElement("script");t.src=e,t.type="module",document.head.appendChild(t)}setupIntersectionObserver(){const e={rootMargin:"50px   0px",threshold:0.1};this.intersectionObserver=new IntersectionObserver((t)=>{for(let s of t)if(s.isIntersecting)this.loadScripts()},e),this.intersectionObserver.observe(this)}}customElements.define("scripts-injector",n);export{o as conditions,n as ScriptsInjector,i as ScriptInjectorEvents};
+var B;((k)=>k.DATA_LOADED="data-loaded")(B||={});var C=["on:visible","on:idle","on:interaction"];class w extends HTMLElement{intersectionObserver=null;scriptsToLoad=[];registeredEvents=[];conditionsMap={"on:visible":this.onVisible.bind(this),"on:idle":this.onIdle.bind(this),"on:interaction":this.onInteraction.bind(this)};constructor(){super();this.loadScripts=this.loadScripts.bind(this),this.listenToDataLoaded=this.listenToDataLoaded.bind(this)}connectedCallback(){let h=this.getAttribute("scripts");this.scriptsToLoad=h?h.split(",").map((k)=>k.trim()).filter(Boolean):[],document.addEventListener("data-loaded",this.listenToDataLoaded),this.applyConditions()}disconnectedCallback(){if(document.removeEventListener("data-loaded",this.listenToDataLoaded),this.unregisterEvents(),this.intersectionObserver)this.intersectionObserver.disconnect(),this.intersectionObserver=null}notifyInjectors(){document.dispatchEvent(new CustomEvent("data-loaded",{detail:{loadedScripts:this.scriptsToLoad}}))}applyConditions(){let h=Object.keys(this.conditionsMap);for(let k of h)if(this.hasAttribute(k))this.conditionsMap[k]()}onVisible(){this.setupIntersectionObserver()}onIdle(){this.loadScripts()}onInteraction(){let h=this.getAttribute("on:interaction");if(!h)return;for(let k of h.split(",")){let q=k.trim();if(q)this.addEventListener(q,this.loadScripts),this.registeredEvents.push({type:q,listener:this.loadScripts})}}listenToDataLoaded(h){if(this.hasAttribute("data-loaded"))return;let{loadedScripts:k}=h.detail;if(this.scriptsToLoad=this.scriptsToLoad.filter((q)=>!k.includes(q)),this.scriptsToLoad.length===0)this.setAttribute("data-loaded",""),this.unregisterEvents()}unregisterEvents(){this.intersectionObserver?.disconnect();for(let{type:h,listener:k}of this.registeredEvents)this.removeEventListener(h,k);this.registeredEvents=[]}loadScripts(){if(this.hasAttribute("data-loaded"))return;try{for(let h of this.scriptsToLoad)if(!this.isScriptLoaded(h))this.loadScript(h)}catch(h){console.error("[scripts-injector] Error loading scripts:",h)}finally{this.setAttribute("data-loaded",""),this.unregisterEvents(),this.notifyInjectors()}}isScriptLoaded(h){return document.querySelector(`script[src="${h}"]`)!==null}loadScript(h){let k=document.createElement("script");k.src=h,k.type="module",k.async=!0,k.onerror=(q)=>{console.error(`[scripts-injector] Failed to load script: ${h}`,q)},document.head.appendChild(k)}setupIntersectionObserver(){let h=this.getAttribute("on:visible"),q={rootMargin:h&&h!==""&&h!=="true"?h:"50px 0px",threshold:0.1};this.intersectionObserver=new IntersectionObserver((x)=>{for(let z of x)if(z.isIntersecting)this.loadScripts()},q),this.intersectionObserver.observe(this)}}if(!customElements.get("scripts-injector"))customElements.define("scripts-injector",w);export{C as conditions,w as ScriptsInjector,B as ScriptInjectorEvents};