@ecopages/scripts-injector 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Andrea Zanenghi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# Scripts Injector
+
+The Scripts Injector is a custom element designed to dynamically load scripts into your web page. It provides a way to load scripts based on certain conditions and events.
+
+## Usage
+
+To use the Scripts Injector, you need to include it in your HTML:
+
+```tsx
+<scripts-injector></scripts-injector>
+```
+
+## Props
+
+The ScriptInjectorProps type defines the properties that can be used to control the behavior of the script-injector custom element. Here are the available properties:
+
+`"on:idle"`: This optional boolean property determines whether the script should be loaded once the DOM is ready. For example, `<script-injector on:idle></script-injector>` will load the script as soon as the DOM is ready.
+
+`"on:interaction"`: This optional property allows you to specify a series of events that will trigger the loading of the script. It can be either "touchstart,click" or "mouseenter,focusin". For example, `<script-injector on:interaction="mouseenter, focusin"></script-injector>` will load the script when the user either mouses over the element or focuses on it.
+
+`"on:visible"`: This optional property can be either a string or a boolean. If it's a string, it should specify the root margin for an Intersection Observer that will load the script when the element comes into view. If it's a boolean and it's true, the script will be loaded when the element comes into view with a default root margin. For example, `<script-injector on:visible="50px 1px"></script-injector>` will load the script when the element comes into view, with a root margin of 50px 1px.
+
+`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.
+
+## 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>
+```
+
+## 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

@@ -0,0 +1,30 @@
+{
+	"name": "@ecopages/scripts-injector",
+	"main": "scripts-injector.js",
+	"version": "0.1.0",
+	"type": "module",
+	"types": "types.d.ts",
+	"exports": {
+		"./package.json": {
+			"import": "./package.json"
+		},
+		".": {
+			"import": "./dist/scripts-injector.js",
+			"require": "./dist/scripts-injector.js"
+		},
+		"./types": "./types.d.ts"
+	},
+	"scripts": {
+		"build:lib": "rm -rf dist && bun build --entry scripts-injector.ts --outdir . --minify"
+	},
+	"devDependencies": {
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	},
+	"files": [
+		"scripts-injector.js",
+		"/types.d.ts"
+	]
+}

package/scripts-injector.js

@@ -0,0 +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};

package/types.d.ts

@@ -0,0 +1,42 @@
+import type { ScriptsInjector } from './scripts-injector';
+import { ScriptInjectorEvents, type conditions } from './scripts-injector';
+
+export type OnDataLoadedEvent = CustomEvent<{ loadedScripts: 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;
+  }
+}
+
+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;
+};