js.foresight
Version:
Predicts where users will click based on mouse movement, keyboard navigation, and scroll behavior. Includes touch device support. Triggers callbacks before interactions happen to enable prefetching and faster UI responses. Works with any framework.
2 lines (1 loc) • 14.7 kB
JavaScript
import{a as C,b as u,c as v,d as p}from"./chunk-PAYO6NXN.js";function k(){let i=S(),e=I();return{isTouchDevice:i,isLimitedConnection:e,shouldRegister:!e}}function S(){return typeof window>"u"||typeof navigator>"u"?!1:window.matchMedia("(pointer: coarse)").matches&&navigator.maxTouchPoints>0}function I(){let i=navigator.connection;if(!i)return!1;let e=g.instance.getManagerData.globalSettings.minimumConnectionType,t=["slow-2g","2g","3g","4g"],n=t.indexOf(i.effectiveType),a=t.indexOf(e);return n<a||i.saveData}function T(i){if(typeof window>"u"||typeof document>"u")return!1;let e=window.innerWidth||document.documentElement.clientWidth,t=window.innerHeight||document.documentElement.clientHeight;return i.top<t&&i.bottom>0&&i.left<e&&i.right>0}function H(){return{mouse:{hover:0,trajectory:0},tab:{forwards:0,reverse:0},scroll:{down:0,left:0,right:0,up:0},touch:0,viewport:0,total:0}}function F(){return{debug:!1,enableManagerLogging:!1,enableMousePrediction:!0,enableScrollPrediction:!0,positionHistorySize:8,trajectoryPredictionTime:120,scrollMargin:150,defaultHitSlop:{top:0,left:0,right:0,bottom:0},enableTabPrediction:!0,tabOffset:2,touchDeviceStrategy:"onTouchStart",minimumConnectionType:"3g"}}function M(i,e,t){let{element:n,callback:a,hitSlop:s,name:o,meta:c,reactivateAfter:b}=i,d=n.getBoundingClientRect(),r=s?u(s):t;return{id:e,element:n,callback:a,elementBounds:{originalRect:d,expandedRect:v(d,r),hitSlop:r},name:o||n.id||"unnamed",isIntersectingWithViewport:T(d),registerCount:1,meta:c??{},callbackInfo:{callbackFiredCount:0,lastCallbackInvokedAt:void 0,lastCallbackCompletedAt:void 0,lastCallbackRuntime:void 0,lastCallbackStatus:void 0,lastCallbackErrorMessage:void 0,reactivateAfter:b??1/0,isCallbackActive:!0,isRunningCallback:!1,reactivateTimeoutId:void 0}}}var f=class{constructor(){this.eventListeners=new Map}addEventListener(e,t,n){if(n?.signal?.aborted)return;let a=this.eventListeners.get(e)??[];a.push(t),this.eventListeners.set(e,a),n?.signal?.addEventListener("abort",()=>this.removeEventListener(e,t))}removeEventListener(e,t){let n=this.eventListeners.get(e);if(!n)return;let a=n.indexOf(t);a>-1&&n.splice(a,1)}emit(e){let t=this.eventListeners.get(e.type);if(!(!t||t.length===0))for(let n=0;n<t.length;n++)try{let a=t[n];a&&a(e)}catch(a){console.error(`Error in ForesightManager event listener ${n} for ${e.type}:`,a)}}hasListeners(e){let t=this.eventListeners.get(e);return t!==void 0&&t.length>0}getEventListeners(){return this.eventListeners}};function y(i,e){return i!==void 0&&e!==i}var L={trajectoryPredictionTime:{min:10,max:200},positionHistorySize:{min:2,max:30},scrollMargin:{min:30,max:300},tabOffset:{min:0,max:20}};function h(i,e,t){if(!y(t,i[e]))return!1;let{min:n,max:a}=L[e];return i[e]=C(t,n,a,e),!0}function m(i,e,t){return y(t,i[e])?(i[e]=t,!0):!1}function D(i,e){h(i,"trajectoryPredictionTime",e.trajectoryPredictionTime),h(i,"positionHistorySize",e.positionHistorySize),h(i,"scrollMargin",e.scrollMargin),h(i,"tabOffset",e.tabOffset),m(i,"enableMousePrediction",e.enableMousePrediction),m(i,"enableScrollPrediction",e.enableScrollPrediction),m(i,"enableTabPrediction",e.enableTabPrediction),m(i,"enableManagerLogging",e.enableManagerLogging),e.defaultHitSlop!==void 0&&(i.defaultHitSlop=u(e.defaultHitSlop)),e.touchDeviceStrategy!==void 0&&(i.touchDeviceStrategy=e.touchDeviceStrategy),e.minimumConnectionType!==void 0&&(i.minimumConnectionType=e.minimumConnectionType),e.debug!==void 0&&(i.debug=e.debug)}function R(i,e){let t=[],n=!1,a=!1,s=!1,o=!1,c=!1;if(!e)return{changedSettings:t,positionHistorySizeChanged:n,scrollPredictionChanged:a,tabPredictionChanged:s,hitSlopChanged:o,touchStrategyChanged:c};let b=["trajectoryPredictionTime","positionHistorySize","scrollMargin","tabOffset"];for(let r of b){let l=i[r];h(i,r,e[r])&&(t.push({setting:r,oldValue:l,newValue:i[r]}),r==="positionHistorySize"&&(n=!0))}let d=["enableMousePrediction","enableScrollPrediction","enableTabPrediction"];for(let r of d){let l=i[r];m(i,r,e[r])&&(t.push({setting:r,oldValue:l,newValue:i[r]}),r==="enableScrollPrediction"&&(a=!0),r==="enableTabPrediction"&&(s=!0))}if(e.defaultHitSlop!==void 0){let r=i.defaultHitSlop,l=u(e.defaultHitSlop);p(r,l)||(i.defaultHitSlop=l,t.push({setting:"defaultHitSlop",oldValue:r,newValue:l}),o=!0)}if(e.touchDeviceStrategy!==void 0){let r=i.touchDeviceStrategy;i.touchDeviceStrategy=e.touchDeviceStrategy,t.push({setting:"touchDeviceStrategy",oldValue:r,newValue:e.touchDeviceStrategy}),c=!0}if(e.minimumConnectionType!==void 0){let r=i.minimumConnectionType;i.minimumConnectionType=e.minimumConnectionType,t.push({setting:"minimumConnectionType",oldValue:r,newValue:e.minimumConnectionType})}return{changedSettings:t,positionHistorySizeChanged:n,scrollPredictionChanged:a,tabPredictionChanged:s,hitSlopChanged:o,touchStrategyChanged:c}}var g=class i{constructor(e){this.elements=new Map;this.checkableElements=new Set;this.idCounter=0;this.activeElementCount=0;this.desktopHandler=null;this.touchDeviceHandler=null;this.currentlyActiveHandler=null;this.isSetup=!1;this.pendingPointerEvent=null;this.rafId=null;this.domObserver=null;this.currentDeviceStrategy=S()?"touch":"mouse";this.eventEmitter=new f;this._globalCallbackHits=H();this._globalSettings=F();this.handlePointerMove=e=>{this.pendingPointerEvent=e,e.pointerType!==this.currentDeviceStrategy&&(this.eventEmitter.emit({type:"deviceStrategyChanged",timestamp:Date.now(),newStrategy:e.pointerType,oldStrategy:this.currentDeviceStrategy}),this.currentDeviceStrategy=e.pointerType,this.setDeviceStrategy(this.currentDeviceStrategy)),!this.rafId&&(this.rafId=requestAnimationFrame(()=>{if(!this.isUsingDesktopHandler){this.rafId=null;return}this.pendingPointerEvent&&this.desktopHandler?.processMouseMovement(this.pendingPointerEvent),this.rafId=null}))};this.handleDomMutations=e=>{if(!e.length)return;this.desktopHandler?.invalidateTabCache();let t=!1;for(let n=0;n<e.length;n++){let a=e[n];if(a&&a.type==="childList"&&a.removedNodes.length>0){t=!0;break}}if(t)for(let n of this.elements.keys())n.isConnected||this.unregister(n,"disconnected")};e!==void 0&&D(this._globalSettings,e),this.handlerDependencies={elements:this.elements,callCallback:this.callCallback.bind(this),emit:this.eventEmitter.emit.bind(this.eventEmitter),hasListeners:this.eventEmitter.hasListeners.bind(this.eventEmitter),settings:this._globalSettings},this.devLog(`ForesightManager initialized with device strategy: ${this.currentDeviceStrategy}`),this.initializeGlobalListeners()}async getOrCreateDesktopHandler(){if(!this.desktopHandler){let{DesktopHandler:e}=await import("./DesktopHandler-BOXAW4XX.js");this.desktopHandler=new e(this.handlerDependencies),this.devLog("DesktopHandler lazy loaded")}return this.desktopHandler}async getOrCreateTouchHandler(){if(!this.touchDeviceHandler){let{TouchDeviceHandler:e}=await import("./TouchDeviceHandler-JWBQ2YOV.js");this.touchDeviceHandler=new e(this.handlerDependencies),this.devLog("TouchDeviceHandler lazy loaded")}return this.touchDeviceHandler}static initialize(e){return this.isInitiated||(i.manager=new i(e)),i.manager}static get isInitiated(){return!!i.manager}static get instance(){return this.initialize()}generateId(){return`foresight-${++this.idCounter}`}get isUsingDesktopHandler(){return this.currentDeviceStrategy==="mouse"||this.currentDeviceStrategy==="pen"}addEventListener(e,t,n){this.eventEmitter.addEventListener(e,t,n)}removeEventListener(e,t){this.eventEmitter.removeEventListener(e,t)}hasListeners(e){return this.eventEmitter.hasListeners(e)}get getManagerData(){let e=this.desktopHandler?.loadedPredictors,t=this.touchDeviceHandler?.loadedPredictors;return{registeredElements:this.elements,globalSettings:this._globalSettings,globalCallbackHits:this._globalCallbackHits,eventListeners:this.eventEmitter.getEventListeners(),currentDeviceStrategy:this.currentDeviceStrategy,activeElementCount:this.activeElementCount,loadedModules:{desktopHandler:this.desktopHandler!==null,touchHandler:this.touchDeviceHandler!==null,predictors:{mouse:e?.mouse??!1,tab:e?.tab??!1,scroll:e?.scroll??!1,viewport:t?.viewport??!1,touchStart:t?.touchStart??!1}}}}get registeredElements(){return this.elements}register(e){let{isTouchDevice:t,isLimitedConnection:n,shouldRegister:a}=k();if(!a)return{isLimitedConnection:n,isTouchDevice:t,isRegistered:!1,unregister:()=>{}};let s=this.elements.get(e.element);if(s)return s.registerCount++,{isLimitedConnection:n,isTouchDevice:t,isRegistered:!1,unregister:()=>{}};this.isSetup||this.initializeGlobalListeners();let o=M(e,this.generateId(),this._globalSettings.defaultHitSlop);return this.elements.set(e.element,o),this.activeElementCount++,this.updateCheckableStatus(o),this.currentlyActiveHandler?.observeElement(e.element),this.eventEmitter.emit({type:"elementRegistered",timestamp:Date.now(),elementData:o}),{isTouchDevice:t,isLimitedConnection:n,isRegistered:!0,unregister:()=>{this.unregister(e.element)}}}unregister(e,t){let n=this.elements.get(e);if(!n)return;this.clearReactivateTimeout(n),this.currentlyActiveHandler?.unobserveElement(e),this.elements.delete(e),this.checkableElements.delete(n),n.callbackInfo.isCallbackActive&&this.activeElementCount--;let a=this.elements.size===0&&this.isSetup;a&&(this.devLog("All elements unregistered, removing global listeners"),this.removeGlobalListeners()),this.eventEmitter.emit({type:"elementUnregistered",elementData:n,timestamp:Date.now(),unregisterReason:t??"by user",wasLastRegisteredElement:a})}reactivate(e){let t=this.elements.get(e);t&&(this.isSetup||this.initializeGlobalListeners(),this.clearReactivateTimeout(t),t.callbackInfo.isRunningCallback||(t.callbackInfo.isCallbackActive=!0,this.activeElementCount++,this.updateCheckableStatus(t),this.currentlyActiveHandler?.observeElement(e),this.eventEmitter.emit({type:"elementReactivated",elementData:t,timestamp:Date.now()})))}clearReactivateTimeout(e){clearTimeout(e.callbackInfo.reactivateTimeoutId),e.callbackInfo.reactivateTimeoutId=void 0}updateCheckableStatus(e){e.isIntersectingWithViewport&&e.callbackInfo.isCallbackActive&&!e.callbackInfo.isRunningCallback?this.checkableElements.add(e):this.checkableElements.delete(e)}callCallback(e,t){e.callbackInfo.isRunningCallback||!e.callbackInfo.isCallbackActive||(this.markElementAsRunning(e),this.executeCallbackAsync(e,t))}markElementAsRunning(e){e.callbackInfo.callbackFiredCount++,e.callbackInfo.lastCallbackInvokedAt=Date.now(),e.callbackInfo.isRunningCallback=!0,this.clearReactivateTimeout(e),this.checkableElements.delete(e)}async executeCallbackAsync(e,t){this.updateHitCounters(t),this.eventEmitter.emit({type:"callbackInvoked",timestamp:Date.now(),elementData:e,hitType:t});let n=performance.now(),a,s=null;try{await e.callback(),a="success"}catch(o){s=o instanceof Error?o.message:String(o),a="error",console.error(`Error in callback for element ${e.name}:`,o)}this.finalizeCallback(e,t,n,a,s)}finalizeCallback(e,t,n,a,s){e.callbackInfo.lastCallbackCompletedAt=Date.now(),e.callbackInfo.isRunningCallback=!1,e.callbackInfo.isCallbackActive=!1,this.activeElementCount--,this.currentlyActiveHandler?.unobserveElement(e.element),e.callbackInfo.reactivateAfter!==1/0&&(e.callbackInfo.reactivateTimeoutId=setTimeout(()=>{this.reactivate(e.element)},e.callbackInfo.reactivateAfter));let o=this.activeElementCount===0;o&&(this.devLog("All elements unactivated, removing global listeners"),this.removeGlobalListeners()),this.eventEmitter.emit({type:"callbackCompleted",timestamp:Date.now(),elementData:e,hitType:t,elapsed:e.callbackInfo.lastCallbackRuntime=performance.now()-n,status:e.callbackInfo.lastCallbackStatus=a,errorMessage:e.callbackInfo.lastCallbackErrorMessage=s,wasLastActiveElement:o})}updateHitCounters(e){switch(e.kind){case"mouse":this._globalCallbackHits.mouse[e.subType]++;break;case"tab":this._globalCallbackHits.tab[e.subType]++;break;case"scroll":this._globalCallbackHits.scroll[e.subType]++;break;case"touch":this._globalCallbackHits.touch++;break;case"viewport":this._globalCallbackHits.viewport++;break;default:}this._globalCallbackHits.total++}async setDeviceStrategy(e){let t=this.currentDeviceStrategy;t!==e&&this.devLog(`Switching device strategy from ${t} to ${e}`),this.currentlyActiveHandler?.disconnect(),this.currentlyActiveHandler=e==="mouse"||e==="pen"?await this.getOrCreateDesktopHandler():await this.getOrCreateTouchHandler(),this.currentlyActiveHandler.connect()}initializeGlobalListeners(){this.isSetup||typeof document>"u"||(this.devLog("Initializing global listeners (pointermove, MutationObserver)"),this.setDeviceStrategy(this.currentDeviceStrategy),document.addEventListener("pointermove",this.handlePointerMove),this.domObserver=new MutationObserver(this.handleDomMutations),this.domObserver.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!1}),this.isSetup=!0)}removeGlobalListeners(){typeof document>"u"||(this.isSetup=!1,this.domObserver?.disconnect(),this.domObserver=null,document.removeEventListener("pointermove",this.handlePointerMove),this.currentlyActiveHandler?.disconnect(),this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.pendingPointerEvent=null)}alterGlobalSettings(e){let t=R(this._globalSettings,e);t.positionHistorySizeChanged&&this.desktopHandler&&this.desktopHandler.trajectoryPositions.positions.resize(this._globalSettings.positionHistorySize),t.scrollPredictionChanged&&this.isUsingDesktopHandler&&this.desktopHandler&&(this._globalSettings.enableScrollPrediction?this.desktopHandler.connectScrollPredictor():this.desktopHandler.disconnectScrollPredictor()),t.tabPredictionChanged&&this.isUsingDesktopHandler&&this.desktopHandler&&(this._globalSettings.enableTabPrediction?this.desktopHandler.connectTabPredictor():this.desktopHandler.disconnectTabPredictor()),t.hitSlopChanged&&this.forceUpdateAllElementBounds(),t.touchStrategyChanged&&!this.isUsingDesktopHandler&&this.touchDeviceHandler&&this.touchDeviceHandler.setTouchPredictor(),t.changedSettings.length>0&&this.eventEmitter.emit({type:"managerSettingsChanged",timestamp:Date.now(),managerData:this.getManagerData,updatedSettings:t.changedSettings})}forceUpdateAllElementBounds(){for(let e of this.elements.values())e.isIntersectingWithViewport&&this.forceUpdateElementBounds(e)}forceUpdateElementBounds(e){let t=e.element.getBoundingClientRect(),n=v(t,e.elementBounds.hitSlop);if(!p(n,e.elementBounds.expandedRect)){let a={...e,elementBounds:{...e.elementBounds,originalRect:t,expandedRect:n}};this.elements.set(e.element,a),this.eventEmitter.emit({type:"elementDataUpdated",elementData:a,updatedProps:["bounds"]})}}devLog(e){this._globalSettings.enableManagerLogging&&console.log(`%c\u{1F6E0}\uFE0F ForesightManager: ${e}`,"color: #16a34a; font-weight: bold;")}};export{g as ForesightManager};