@ecopages/scripts-injector 0.1.1 → 0.1.3

package/README.md

@@ -22,16 +22,75 @@ The ScriptInjectorProps type defines the properties that can be used to control
 
 `scripts`: This property should be a comma-separated string of scripts to be loaded. For example, `<script-injector scripts="script1.js,script2.js"></script-injector>` will load script1.js and script2.js.
 
+## Latest Features
+
+### Full Event Replay with Property Preservation
+
+For all interaction events, the Scripts Injector intercepts the initial event, prevents the default action, loads the required script, and then **replays the event** with all original properties preserved. This ensures that user actions are never lost, even if they happen before the script is fully loaded.
+
+-   **Click events**: Use native `.click()` for best compatibility with links and forms
+-   **Mouse events**: Preserve `clientX`, `clientY`, `screenX`, `screenY`, `button`, `buttons`, and modifier keys
+-   **Keyboard events**: Preserve `key`, `code`, `location`, `repeat`, and modifier keys
+-   **Focus events**: Preserve `relatedTarget`
+-   **Touch events**: Preserve `touches`, `targetTouches`, `changedTouches`, and modifier keys
+
+### Race Condition Prevention
+
+Multiple script injectors requesting the same script will coordinate to prevent duplicate loading. A static registry tracks scripts currently being loaded, ensuring only one network request is made even when multiple injectors trigger simultaneously.
+
+### Load Reason Tracking
+
+After loading, the element receives a `data-load-reason` attribute indicating what triggered the load:
+
+-   `idle` - Loaded via `on:idle`
+-   `visible` - Loaded via `on:visible`
+-   `interaction:click`, `interaction:mouseenter`, etc. - Loaded via the specific interaction event
+
+### Error Tracking
+
+If any scripts fail to load, the element receives a `data-error` attribute containing the comma-separated list of failed script URLs. The `DATA_LOADED` event also includes a `failedScripts` array in its detail.
+
+```tsx
+// Listen for load completion with error info
+document.addEventListener('data-loaded', (event) => {
+	const { loadedScripts, failedScripts } = event.detail;
+	if (failedScripts.length > 0) {
+		console.warn('Some scripts failed to load:', failedScripts);
+	}
+});
+```
+
 ## Typical usage
 
 This passage provides a standard use case for the custom element. The script is designed to load when the user interacts with it, either through mouse entry or a focus event. If multiple script injectors are present with the same script, only the first one will execute the load. This is because once a script is loaded, all script injectors are notified and subsequently remove the script from their loading responsibilities.
 
 ```tsx
-<script-injector on:interaction="mouseenter,focusin" scripts={["path/to/my/element"]}>
-  <lit-counter class="lit-counter" count={8}></lit-counter>
+<script-injector on:interaction="mouseenter,focusin" scripts={['path/to/my/element']}>
+	<lit-counter class="lit-counter" count={8}></lit-counter>
 </script-injector>
 ```
 
+## Supported Events
+
+The `on:interaction` prop supports a wide range of DOM events, as defined in `InteractionEvent`.
+
+-   **Mouse:** `click`, `dblclick`, `mousedown`, `mouseup`, `mouseenter`, `mouseleave`, `mousemove`, `mouseover`, `mouseout`
+-   **Touch:** `touchstart`, `touchend`, `touchmove`, `touchcancel`
+-   **Focus:** `focus`, `blur`, `focusin`, `focusout`
+-   **Keyboard:** `keydown`, `keypress`, `keyup`
+-   **Form:** `input`, `change`, `submit`
+-   **UI:** `scroll`, `resize`
+
+## Data Attributes
+
+After script loading completes, the following attributes are set on the element:
+
+| Attribute          | Description                                                                        |
+| ------------------ | ---------------------------------------------------------------------------------- |
+| `data-loaded`      | Present when all scripts have been loaded (or attempted)                           |
+| `data-load-reason` | The trigger that caused scripts to load (`idle`, `visible`, `interaction:<event>`) |
+| `data-error`       | Comma-separated list of script URLs that failed to load (only if errors occurred)  |
+
 ## Inspiration
 
 This is undeniably heavily influenced by [11ty/is-land](https://github.com/11ty/is-land), [Astro island](https://docs.astro.build/en/concepts/islands/) and the "component island" concept, originally introduced by Etsy's frontend architect, Katie Sylor-Miller.

package/package.json

@@ -1,9 +1,13 @@
 {
 	"name": "@ecopages/scripts-injector",
 	"main": "scripts-injector.js",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"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 Q=new Set,Z=new Set(["click","dblclick","mousedown","mouseup","mouseenter","mouseleave","mousemove","mouseover","mouseout"]),$=new Set(["keydown","keypress","keyup"]),k=new Set(["focus","blur","focusin","focusout"]),B=new Set(["touchstart","touchend","touchmove","touchcancel"]),D;((z)=>z.DATA_LOADED="data-loaded")(D||={});var H=["on:visible","on:idle","on:interaction"];class X extends HTMLElement{intersectionObserver=null;scriptsToLoad=[];failedScripts=[];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 q=this.getAttribute("scripts");this.scriptsToLoad=q?q.split(",").map((z)=>z.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,failedScripts:this.failedScripts}}))}applyConditions(){let q=Object.keys(this.conditionsMap);for(let z of q)if(this.hasAttribute(z))this.conditionsMap[z]()}onVisible(){this.setupIntersectionObserver()}onIdle(){queueMicrotask(()=>this.loadScripts("idle"))}onInteraction(){let q=this.getAttribute("on:interaction");if(!q)return;for(let z of q.split(",")){let J=z.trim();if(J){let G=async(P)=>{await this.handleInteraction(P)};this.addEventListener(J,G),this.registeredEvents.push({type:J,listener:G})}}}async handleInteraction(q){if(q.stopImmediatePropagation(),q.preventDefault(),await this.loadScripts(`interaction:${q.type}`),q.target===this)return;if(q.type==="click"&&q.target instanceof HTMLElement){q.target.click();return}let z=this.cloneEvent(q);if(z)q.target?.dispatchEvent(z)}cloneEvent(q){let z={bubbles:q.bubbles,cancelable:q.cancelable,composed:q.composed};if(Z.has(q.type)&&q instanceof MouseEvent)return new MouseEvent(q.type,{...z,screenX:q.screenX,screenY:q.screenY,clientX:q.clientX,clientY:q.clientY,button:q.button,buttons:q.buttons,ctrlKey:q.ctrlKey,shiftKey:q.shiftKey,altKey:q.altKey,metaKey:q.metaKey,relatedTarget:q.relatedTarget});if($.has(q.type)&&q instanceof KeyboardEvent)return new KeyboardEvent(q.type,{...z,key:q.key,code:q.code,location:q.location,repeat:q.repeat,isComposing:q.isComposing,ctrlKey:q.ctrlKey,shiftKey:q.shiftKey,altKey:q.altKey,metaKey:q.metaKey});if(k.has(q.type)&&q instanceof FocusEvent)return new FocusEvent(q.type,{...z,relatedTarget:q.relatedTarget});if(B.has(q.type)&&q instanceof TouchEvent)return new TouchEvent(q.type,{...z,touches:Array.from(q.touches),targetTouches:Array.from(q.targetTouches),changedTouches:Array.from(q.changedTouches),ctrlKey:q.ctrlKey,shiftKey:q.shiftKey,altKey:q.altKey,metaKey:q.metaKey});return new Event(q.type,z)}listenToDataLoaded(q){if(this.hasAttribute("data-loaded"))return;let{loadedScripts:z}=q.detail;if(this.scriptsToLoad=this.scriptsToLoad.filter((J)=>!z.includes(J)),this.scriptsToLoad.length===0)this.setAttribute("data-loaded",""),this.unregisterEvents()}unregisterEvents(){this.intersectionObserver?.disconnect();for(let{type:q,listener:z}of this.registeredEvents)this.removeEventListener(q,z);this.registeredEvents=[]}async loadScripts(q="unknown"){if(this.hasAttribute("data-loaded"))return;this.failedScripts=[];let z=[];for(let G of this.scriptsToLoad)if(!this.isScriptLoaded(G)&&!Q.has(G))Q.add(G),z.push({script:G,promise:this.loadScript(G)});let J=await Promise.allSettled(z.map((G)=>G.promise));try{for(let G=0;G<J.length;G++)if(J[G].status==="rejected")this.failedScripts.push(z[G].script)}finally{for(let{script:G}of z)Q.delete(G)}if(this.setAttribute("data-loaded",""),this.setAttribute("data-load-reason",q),this.failedScripts.length>0)this.setAttribute("data-error",this.failedScripts.join(","));this.unregisterEvents(),this.notifyInjectors()}isScriptLoaded(q){return document.querySelector(`script[src="${q}"]`)!==null}loadScript(q){return new Promise((z,J)=>{if(this.isScriptLoaded(q)){z();return}let G=document.createElement("script");G.src=q,G.type="module",G.async=!0,G.onload=()=>z(),G.onerror=(P)=>{console.error(`[scripts-injector] Failed to load script: ${q}`,P),J(P)},document.head.appendChild(G)})}setupIntersectionObserver(){let q=this.getAttribute("on:visible"),J={rootMargin:q&&q!==""&&q!=="true"?q:"50px 0px",threshold:0.1};this.intersectionObserver=new IntersectionObserver((G)=>{for(let P of G)if(P.isIntersecting)this.loadScripts("visible")},J),this.intersectionObserver.observe(this)}}if(typeof window<"u"&&!customElements.get("scripts-injector"))customElements.define("scripts-injector",X);export{H as conditions,X as ScriptsInjector,D as ScriptInjectorEvents};

package/types.d.ts

@@ -1,42 +1,81 @@
 import type { ScriptsInjector } from './scripts-injector';
 import { ScriptInjectorEvents, type conditions } from './scripts-injector';
 
-export type OnDataLoadedEvent = CustomEvent<{ loadedScripts: string[] }>;
+export type OnDataLoadedEvent = CustomEvent<{
+	/** Array of script URLs that were successfully loaded or already existed */
+	loadedScripts: string[];
+	/** Array of script URLs that failed to load */
+	failedScripts: string[];
+}>;
 
 export type Conditions = (typeof conditions)[number];
 
 declare global {
-  interface HTMLElementTagNameMap {
-    'scripts-injector': ScriptsInjector;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      'scripts-injector': HtmlTag & ScriptInjectorProps;
-    }
-  }
-  interface HTMLElementEventMap {
-    [ScriptInjectorEvents.DATA_LOADED]: OnDataLoadedEvent;
-  }
+	interface HTMLElementTagNameMap {
+		'scripts-injector': ScriptsInjector;
+	}
+	namespace JSX {
+		interface IntrinsicElements {
+			'scripts-injector': HtmlTag & ScriptInjectorProps;
+		}
+	}
+	interface HTMLElementEventMap {
+		[ScriptInjectorEvents.DATA_LOADED]: OnDataLoadedEvent;
+	}
 }
 
+export type InteractionEvent =
+	| 'click'
+	| 'dblclick'
+	| 'mousedown'
+	| 'mouseup'
+	| 'mouseenter'
+	| 'mouseleave'
+	| 'mousemove'
+	| 'mouseover'
+	| 'mouseout'
+	| 'touchstart'
+	| 'touchend'
+	| 'touchmove'
+	| 'touchcancel'
+	| 'keydown'
+	| 'keypress'
+	| 'keyup'
+	| 'focus'
+	| 'blur'
+	| 'focusin'
+	| 'focusout'
+	| 'input'
+	| 'change'
+	| 'submit'
+	| 'scroll'
+	| 'resize';
+
+export type InteractionEventsString =
+	| InteractionEvent
+	| `${InteractionEvent},${InteractionEvent}`
+	| `${InteractionEvent},${InteractionEvent},${InteractionEvent}`
+	| (string & {});
+
 export declare type ScriptInjectorProps = {
-  /**
-   * @description Load the script once the dom is ready
-   * @example <script-injector on:idle></script-injector>
-   */
-  'on:idle'?: boolean;
-  /**
-   * @description Load the script based on a series of events
-   * @example <script-injector on:interaction="mouseenter, focusin"></script-injector>
-   */
-  'on:interaction'?: 'touchstart,click' | 'mouseenter,focusin';
-  /**
-   * @description Import a script to be loaded when the observer detects the element is in the viewport
-   * @example <script-injector on:visible="50px 1px"></script-injector>
-   */
-  'on:visible'?: string | boolean;
-  /**
-   * A list of scripts to be loaded, comma separated.
-   */
-  scripts: string;
+	/**
+	 * @description Load the script once the dom is ready
+	 * @example <script-injector on:idle></script-injector>
+	 */
+	'on:idle'?: boolean;
+	/**
+	 * @description Load the script based on a series of events.
+	 * Accepts a comma-separated list of event names.
+	 * @example <script-injector on:interaction="mouseenter,focusin"></script-injector>
+	 */
+	'on:interaction'?: InteractionEventsString;
+	/**
+	 * @description Import a script to be loaded when the observer detects the element is in the viewport
+	 * @example <script-injector on:visible="50px 1px"></script-injector>
+	 */
+	'on:visible'?: string | boolean;
+	/**
+	 * A list of scripts to be loaded, comma separated.
+	 */
+	scripts: string;
 };