New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@solid-primitives/idle

Package Overview
Dependencies
Maintainers
3
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@solid-primitives/idle - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/createIdleTimer.d.ts

125

dist/index.d.ts

@@ -1,123 +0,2 @@

import { Accessor } from 'solid-js';
type EventTypeName = keyof HTMLElementEventMap | keyof DocumentEventMap;
/**
* An option object to initialize the timer.
*/
interface IdleTimerOptions {
/**
* The DOM events that will be listened to in order to monitor the user's activity.
* @default ['mousemove', 'keydown', 'wheel', 'resize', 'mousedown', 'pointerdown', 'touchstart', 'touchmove', 'visibilitychange']
*/
events?: EventTypeName[];
/**
* DOM element to which the event listeners will be attached.
* @default document
*/
element?: HTMLElement;
/**
* Time of user's inactivity in milliseconds before the idle status changes to idle.
* This time is extended by the promptTimeout option.
* @default 900000 (15 minutes)
*/
idleTimeout?: number;
/**
* To meet the typical use case when we want to prompt the user to check if they are still active, an additional timer starts running right after the idleTimeout expires.
* In this time slot, the user is in the prompt phase, whose duration is decided by promptTimeout.
* onActive is not fired in this phase, which cn only be interrupted by the methods reset, stop, pause, triggerIdle.
* @default 0
*/
promptTimeout?: number;
/**
* Requires the event-listeners to be bound manually by using the start method, instead of on mount.
* @default false
*/
startManually?: boolean;
/**
* Callback triggered when the user status passes to idle. When invoked, the last event fired before the prompt phase will be passed as a parameter.
* @param {Event} lastEvt - the last event fired before the prompt phase. Events fired in the prompt phase will not count.
* @returns {void}
* @default () => {}
*/
onIdle?: (lastEvt: Event) => void;
/**
* Callback called when the user resumes activity after having been idle (resuming from prompt phase doesn't trigger `onActive`).
* @param {Event} activyEvt - the last event fired before the prompt phase.
* @returns {void}
* @default () => {}
*/
onActive?: (activyEvt: Event) => void;
/**
* Callback triggered when the idleTimeout timer expires, before declaring the idle status, onPrompt callback is fired, starting the prompt timer.
* @param {Event} promptEvt - the last event fired before the prompt phase.
* @returns {void}
* @default () => {}
*/
onPrompt?: (promptEvt: Event) => void;
}
/**
* The instance of the idle timer
*/
interface IdleTimer {
/**
* Shows when the user is idle
*/
isIdle: Accessor<boolean>;
/**
* Tells whether onPrompt has been called or not, and consequently if the promptTimeout countdown has started
*/
isPrompted: Accessor<boolean>;
/**
* Resets timers, doesn't trigger onActive
*/
reset: () => void;
/**
* Adds listeners and starts timers, doesn't trigger onActive
*/
start: () => void;
/**
* Removes listeners and cleans up the timers, doesn't trigger onActive.
*/
stop: () => void;
/**
* Set the idle status to idle and trigger the onIdle callback. Doesn't trigger onActive or onPrompt.
*/
triggerIdle: () => void;
}
/**
* @deprecated
* IdleTimerReturn has been renamed to IdleTimer for clarity and coherence.
* Please use IdleTimer instead.
*/
type IdleTimerReturn = IdleTimer;
/**
* @typedef {Object} IdleTimer
* @method isIdle - Shows when the user is idle.
* @method isPrompted - Tells whether onPrompt has been called or not, and consequently if the promptTimeout countdown has started
* @method reset - Resets timers, doesn't trigger onActive
* @method start - Adds listeners and starts timers, doesn't trigger onActive
* @method stop - Removes listeners and cleans up the timers, doesn't trigger onActive.
* @method triggerIdle - Set the idle status to idle and trigger the onIdle callback. Doesn't trigger onActive or onPrompt.
*/
/**
* A primitive to observe the user's idle state and react to its changes.
* @param {Object} [params={}] {@link IdleTimerOptions} - An options object to initialize the timer.
* @param {string[]} [params.events=['mousemove', 'keydown', 'wheel', 'resize', 'mousedown', 'pointerdown', 'touchstart', 'touchmove', 'visibilitychange']] {@link EventTypeName} - The DOM events that will be listened to in order to monitor the user's activity.
* @param {number} [params.idleTimeout=900000] - Time of user's inactivity in milliseconds before the idle status changes to idle. This time is extended by the promptTimeout option.
* @param {number} [params.promptTimeout=0] - To meet the typical use case when we want to prompt the user to check if they are still active, an additional timer starts running right after the idleTimeout expires. In this time slot, the user is in the prompt phase, whose duration is decided by promptTimeout. onActive is not fired in this phase, which cn only be interrupted by the methods {@link IdleTimer.reset}, {@link IdleTimer.stop}, {@link IdleTimer.pause}, {@link IdleTimer.triggerIdle}.
* @param {function(Event): void} [params.onActive=() => {}] - Callback called when the user resumes activity after having been idle (resuming from prompt phase doesn't trigger `onActive`). The event that triggered the return to activity is passed as a parameter.
* @param {function(Event): void} [params.onIdle=() => {}] - Callback triggered when the user status passes to idle. When invoked, the last event fired before the prompt phase will be passed as a parameter. Events fired in the prompt phase will not count.
* @param {function(Event): void} [params.onPrompt=() => {}] - When the idleTimeout timer expires, before declaring the idle status, onPrompt callback is fired, starting the prompt timer. When invoked, the last event fired before the prompt phase will be passed as a parameter.
* @param {HTMLElement} [params.element=document] - DOM element to which the event listeners will be attached.
* @param {boolean} [params.startManually=false] - Requires the event-listeners to be bound manually by using the start method (see {@link IdleTimer}), instead of on mount.
* @returns {IdleTimer} - The instance of the idle timer. It contains the following accessors and methods:
* - isIdle: Accessor<boolean>; shows when the user is idle
* - isPrompted: Accessor<boolean>; tells whether params.onPrompt has been called or not, and consequently if the promptTimeout countdown has started
* - reset: () => void; resets timers, doesn't trigger onActive
* - start: () => void; adds listeners and starts timers, doesn't trigger onActive
* - stop: () => void; removes listeners and cleans up the timers, doesn't trigger onActive
*/
declare const createIdleTimer: ({ element, events, idleTimeout, promptTimeout, onActive, onIdle, onPrompt, startManually, }?: IdleTimerOptions) => IdleTimer;
export { EventTypeName, IdleTimer, IdleTimerOptions, IdleTimerReturn, createIdleTimer };
export * from "./createIdleTimer.js";
export * from "./types.js";

@@ -1,150 +0,2 @@

import { createSignal, onMount, onCleanup, batch } from 'solid-js';
import { isServer } from 'solid-js/web';
// src/createIdleTimer.ts
var THROTTLE_DELAY = 250;
var FIFTEEN_MINUTES = 9e5;
var EVENTS = [
"mousemove",
"keydown",
"wheel",
"resize",
"wheel",
"mousedown",
"pointerdown",
"touchstart",
"touchmove",
"visibilitychange"
];
var createIdleTimer = ({
element,
events = EVENTS,
idleTimeout = FIFTEEN_MINUTES,
promptTimeout = 0,
onActive,
onIdle,
onPrompt,
startManually = false
} = {}) => {
if (isServer) {
return {
isIdle: () => false,
isPrompted: () => false,
reset: () => {
},
start: () => {
},
stop: () => {
},
triggerIdle: () => {
}
};
}
let listenersAreOn = false;
const [isPrompted, setIsPrompted] = createSignal(false);
const [isIdle, setIsIdle] = createSignal(false);
let idle;
let prompt;
let lastThrottle = 0;
function shouldPreventRunning() {
const now = (/* @__PURE__ */ new Date()).getTime();
const shouldPrevent = now - lastThrottle < THROTTLE_DELAY;
if (!shouldPrevent)
lastThrottle = now;
return shouldPrevent;
}
function handleEvent(evt) {
if (shouldPreventRunning())
return;
if (isIdle())
onActive?.(evt);
if (!isPrompted())
timerReset(evt);
}
function addListeners() {
if (listenersAreOn)
return;
const target = element ?? document;
for (const evt of events) {
target.addEventListener(evt, handleEvent);
}
listenersAreOn = true;
}
function timerReset(evt) {
if (!listenersAreOn)
return;
timerCleanup();
cleanState();
setIdleTimer(evt);
}
function timerCleanup() {
if (typeof idle === "number")
clearTimeout(idle);
if (typeof prompt === "number")
clearTimeout(prompt);
}
function setIdleTimer(evt) {
idle = setTimeout(() => {
setIsPrompted(true);
onPrompt?.(evt);
setPromptTimer(evt);
}, idleTimeout);
}
function setPromptTimer(evt) {
prompt = setTimeout(() => {
batch(() => {
setIsIdle(true);
setIsPrompted(false);
});
onIdle?.(evt);
}, promptTimeout);
}
function cleanState() {
batch(() => {
setIsIdle(false);
setIsPrompted(false);
});
}
function startListening(evt = new CustomEvent("manualstart")) {
timerCleanup();
cleanState();
addListeners();
timerReset(evt);
}
function stopListening() {
timerCleanup();
cleanState();
removeListeners();
}
function removeListeners() {
if (!listenersAreOn)
return;
const target = element ?? document;
for (const evt of events) {
target.removeEventListener(evt, handleEvent);
}
listenersAreOn = false;
}
function triggerIdle() {
stopListening();
setIsIdle(true);
onIdle?.(new CustomEvent("manualidle"));
addListeners();
}
onMount(() => {
if (startManually)
return;
startListening(new CustomEvent("mount"));
});
onCleanup(stopListening);
return {
isIdle,
isPrompted,
start: () => startListening(),
reset: () => timerReset(new CustomEvent("manualreset")),
stop: stopListening,
triggerIdle
};
};
export { createIdleTimer };
export * from "./createIdleTimer.js";
export * from "./types.js";
{
"name": "@solid-primitives/idle",
"version": "0.1.2",
"version": "0.2.0",
"description": "A primitive to observe the user's idle status and react to its changes.",

@@ -30,3 +30,2 @@ "author": "Aylo Srd <aylo.srd@gmail.com>",

"type": "module",
"main": "./dist/index.cjs",
"module": "./dist/index.js",

@@ -36,9 +35,6 @@ "browser": {},

"exports": {
"@solid-primitives/source": "./src/index.ts",
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"require": {
"types": "./dist/index.d.cts",
"default": "./dist/index.cjs"
}

@@ -45,0 +41,0 @@ },

@@ -7,3 +7,2 @@ <p>

[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/idle?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/idle)

@@ -10,0 +9,0 @@ [![version](https://img.shields.io/npm/v/@solid-primitives/idle?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/idle)

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc