BD Web Utilities is an npm package that provides a comprehensive suite of tools for modern web applications. It simplifies common tasks such as cookie management, page context extraction, user management, and user agent detection, while also offering utility functions for dynamic script loading and performance optimization through throttling and debouncing.
This package is designed to help developers manage essential aspects of web applications with ease. It includes:
- Cookie Management: A simple wrapper around js-cookie to handle browser cookies.
- Page Context Extraction: A class to manage and extract page information such as locale, country, language, and query parameters.
- User Management: An abstract class for handling user login, fingerprinting, geolocation, and locale determination.
- User Agent Detection: An abstract class for parsing the browser’s user agent string to identify operating system and browser details.
- Utility Functions: Standalone functions for dynamically loading scripts and optimizing function execution using throttling and debouncing.
- Modular Design: Import only the components you need.
- Intuitive API: Simple classes with clear public methods, properties, and getters.
- Performance Optimization: Throttling and debouncing functions improve responsiveness.
- Cross-Platform Support: Robust user agent detection for adapting to different devices and browsers.
- User-Centric: Manage user context with automated locale and geolocation detection.
Install via npm or yarn:
npm install @repobit/dex-utilsA wrapper around the js-cookie library (https://www.npmjs.com/package/js-cookie) for managing browser cookies. Alongside the already existing methods, we have also added the has function.
-
Use Case: Set a cookie with the corresponding name, value and options. For expires you pass the number of days.
-
Use Case: Get the cookie value if it exists.
-
Use Case: Checks if a cookie with the specified name exists. This is useful before attempting to access or modify cookie data.
Cookies.set('key', 'value', { expires: 1 });
if (Cookies.has('key')) {
console.log(Cookies.get('key'));
}Manages page-related context such as locale, country, language, page name, and URL query parameters.
-
Locale in the format
${string}-${string}(e.g., "en-us"). It is passed as a parameter to the constructor so it is up to the developer to set it correctly. -
Derived from the locale (e.g., for "en-us", country is "us").
-
Derived from the locale (e.g., for "en-us", language is "en").
-
Identifier for the page. It's the last part of the link in most cases (e.g, for "https://www.example.com/page", the name should be "page"). It is passed as a parameter to the constructor so it is up to the developer how they wish to set it.
-
URL query parameters extracted from the current page link.
-
Current deployment environment. It is passed as a parameter to the constructor so it is up to the developer to set it correctly depending on the project.
- Use Case: Retrieves the value of a specific query parameter from the URL.
const page = new Page('en-us', 'homepage', 'prod');
console.log(page.country); // Outputs: "us"
console.log(page.getParamValue('ref')); // Retrieves the value of 'ref' from the URL query parametersAn abstract class that manages user-related operations such as login, fingerprint generation, and geolocation-based locale determination.
-
Logged-in user's information (if available) received from Connect.
-
A unique ID for the user.
-
The user's country based on geolocation.
-
The user's locale (e.g., "en-us") fetched using his country.
- Use Case: Initiates the user login process. If the user is not logged in, this method redirects to the login endpoint.
User.info.then(info => {
if (!info) {
User.login();
} else {
console.log('User Info:', info);
}
});An abstract class that parses the user agent string to identify operating system and browser details. This is built upon the already existing cssua (https://cssuseragent.org/).
- Use Case: Identify the user's operating system.
- Use Case: Determine the user's browser.
- Use Case: Quickly check the device type and browser for conditional logic in the application.
-
Use Case: Returns a string representing the detected operating system.
-
Use Case: Returns a string representing the detected browser.
if (UserAgent.isMobile) {
console.log('Operating System:', UserAgent.os);
} else {
console.log('Browser:', UserAgent.browser);
}Dynamically loads an external JavaScript file by appending a script element to the document head, ensuring the same script is not loaded multiple times. The return type of this call is a promise, making it ideal for checks where you need to make sure that the script was loaded successfully or unsuccessfully.
loadScript('https://example.com/some-library.js', { async: 'true' })
.then(() => console.log('Script loaded successfully'))
.catch(error => console.error('Error loading script:', error));Creates a throttled version of a function, ensuring it is executed at most once every specified delay period.
const throttledFunction = throttle(() => {
console.log('Throttled function executed');
}, 500);
window.addEventListener('resize', throttledFunction);Creates a debounced version of a function that delays its execution until a specified time has elapsed since the last invocation. Especially usefull when you know that there will be a lot of clicks on a button for example.
const debouncedFunction = debounce(() => {
console.log('Debounced function executed');
}, 300);
document.querySelector('input')?.addEventListener('input', debouncedFunction);