@vettvangur/vanilla 0.0.2

package/dist/index.esm.js

@@ -0,0 +1,587 @@
+import path from 'node:path';
+import process from 'node:process';
+import dotenv from 'dotenv';
+
+/**
+ * @memberof @vettvangur/react
+ */
+
+
+/**
+ * Capitalizes the first letter of a given string.
+ *
+ * @function capitalize
+ * @param {string|null|undefined} value - The string to capitalize. If null or undefined, returns an empty string.
+ * @param {boolean} [lowerRest=false] - If true, converts the rest of the string to lowercase.
+ * @returns {string} The capitalized string, or an empty string if the input is falsy.
+ *
+ * @example capitalize(string)
+ */
+function capitalize(value, lowerRest = false) {
+  if (!value) {
+    return '';
+  }
+  const firstChar = value[0].toUpperCase();
+  const rest = lowerRest ? value.slice(1).toLowerCase() : value.slice(1);
+  return firstChar + rest;
+}
+
+/**
+ * Retrieves a translated string from a dictionary based on a given key and culture.
+ *
+ * @function dictionary
+ * @param {string} key - The key for the translation.
+ * @param {Array} data - The array of translation objects.
+ * @param {string} [culture='is-IS'] - The language code to search for (default: 'is-IS').
+ * @returns {string} The translated string if found, otherwise '[Translation not found]'.
+ *
+ * @example
+ * dictionary(key)
+ */
+function dictionary(key, data, culture = 'is-IS') {
+  const notFound = '[Translation not found]';
+  for (const item of data) {
+    if (item.itemKey === key) {
+      const translation = item.values.find(b => b.language === culture)?.value;
+      return translation || notFound;
+    }
+  }
+  return notFound;
+}
+
+/**
+ * Fetches data from a given URL with customizable options and error handling.
+ *
+ * @async
+ * @function fetcher
+ * @param {Object} params - The parameters for the fetcher function.
+ * @param {string} params.url - The URL to fetch data from.
+ * @param {RequestInit|null} [params.options={}] - Fetch API options (headers, method, body, etc.).
+ * @param {boolean} [params.throwOnError=false] - Whether to throw an error on non-OK HTTP responses.
+ * @returns {Promise<Object|null>} The parsed JSON response or null if an error occurs.
+ * @throws Will throw an error if `throwOnError` is true and the fetch fails or returns a non-OK status.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+ *
+ * @example
+ * const getData = await fetcher({
+ *  url,
+ *  {
+ *    method: 'POST',
+ *    headers: {
+ *      'Content-Type': 'application/json'
+ *    }
+ *  }
+ * })
+ */
+
+async function fetcher({
+  url,
+  options = null,
+  throwOnError = false
+}) {
+  const errorMessage = `[fetcher :: fetcher] Error: ${url}`;
+  try {
+    const request = await fetch(url, options);
+    if (!request.ok) {
+      const errorDetails = await request.text();
+      const fullErrorMessage = `${errorMessage} - Status: ${request.status}, ${request.statusText}, Details: ${errorDetails}`;
+      console.error(fullErrorMessage);
+      if (throwOnError) {
+        throw new Error(fullErrorMessage);
+      }
+
+      // Return null instead of undefined on error for predictable handling
+      return null;
+    }
+    return await request.json();
+  } catch (error) {
+    const fullErrorMessage = `${errorMessage} - ${error}`;
+    console.error(fullErrorMessage);
+    if (throwOnError) {
+      throw error;
+    }
+
+    // Return null instead of undefined on error for predictable handling
+    return null;
+  }
+}
+
+/**
+ * Loads environment variables from `.env` and `.env.[NODE_ENV]` files.
+ *
+ * This function first loads the base `.env` file, then loads an environment-specific file
+ * based on `NODE_ENV` (e.g., `.env.production`, `.env.development`). If `NODE_ENV` is not set,
+ * it defaults to `'development'`.
+ *
+ * @async
+ * @function loadEnvFiles
+ * @param {boolean} [showMessage=true] - Whether to log a message indicating which env file was loaded.
+ * @throws {Error} Throws an error if loading the environment-specific file fails.
+ * @returns {Promise<void>} Resolves when environment files are loaded.
+ */
+async function loadEnvFiles(showMessage = true) {
+  // Always load the .env file first
+  const envFilePath = path.resolve(process.cwd(), '.env');
+  const baseResult = dotenv.config({
+    path: envFilePath
+  });
+  if (baseResult.error) {
+    console.warn(`Warning: Failed to load environment variables from .env: ${baseResult.error.message}`);
+  }
+  const env = process.env.NODE_ENV || 'development'; // Default to 'development' if NODE_ENV is not set
+  const envFile = `.env.${env}`;
+
+  // Load the specified environment file
+  const result = dotenv.config({
+    path: path.resolve(process.cwd(), envFile)
+  });
+  if (result.error) {
+    throw new Error(`Failed to load environment variables from ${envFile}: ${result.error.message}`);
+  }
+  if (showMessage) {
+    console.log(`Loaded environment variables from ${envFile}\n`);
+  }
+}
+
+/**
+ * Checks if a given string is a valid regular expression pattern.
+ *
+ * @ignore
+ * @param {string} pattern - The regex pattern to validate.
+ * @returns {boolean} Returns `true` if the pattern is a valid regex, otherwise `false`.
+ */
+function isValidRegex(pattern) {
+  try {
+    new RegExp(pattern);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Utility object for regex operations.
+ */
+const regexr = {
+  /**
+   * Tests whether a given value matches a regex pattern.
+   *
+   * @param {Object} params - Parameters for testing regex.
+   * @param {string} params.value - The string to test against the regex.
+   * @param {string} params.pattern - The regex pattern to match.
+   * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+   * @returns {boolean} Returns `true` if the value matches the pattern, otherwise `false`.
+   *
+   * @example
+   * const isMatch = regexr.match(pattern)
+   * console.log(isMatch) // return true or false
+   */
+  test({
+    value,
+    pattern,
+    flags = 'g'
+  }) {
+    if (!value || !pattern || !isValidRegex(pattern)) {
+      return false;
+    }
+    const regexp = new RegExp(pattern, flags);
+    return regexp.test(value);
+  },
+  /**
+   * Matches a given value against a regex pattern and returns the matches.
+   *
+   * @param {Object} params - Parameters for matching regex.
+   * @param {string} params.value - The string to match against the regex.
+   * @param {string} params.pattern - The regex pattern to match.
+   * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+   * @returns {Array<string>|null} Returns an array of matches, or `null` if no match is found.
+   */
+  match({
+    value,
+    pattern,
+    flags = 'g'
+  }) {
+    if (!value || !pattern || !isValidRegex(pattern)) {
+      return null;
+    }
+    const regexp = new RegExp(pattern, flags);
+    return value.match(regexp);
+  }
+};
+
+/**
+ * Recursively flattens a nested object into a single-level object with prefixed keys.
+ *
+ * @param {Object} obj - The object to flatten.
+ * @param {string} [prefix=''] - The prefix to append to keys for nested properties.
+ * @returns {Object} A new object with flattened keys.
+ *
+ * @example
+ * const nested = { sm: '640px', md: { base: '768px', xl: '1024px' } };
+ * const result = flatten(nested);
+ * console.log(result); // { sm: '640px', md-base: '768px', md-xl: '1024px' }
+ */
+const flatten = (obj, prefix = '') => {
+  try {
+    if (!obj || typeof obj !== 'object') {
+      console.error('❌ FLATTEN ERROR: Received invalid data:', obj);
+      return {};
+    }
+    return Object.keys(obj).reduce((acc, key) => {
+      const fullKey = key === 'DEFAULT' ? prefix : prefix ? `${prefix}-${key}` : key;
+      if (typeof obj[key] === 'object' && key !== 'DEFAULT') {
+        Object.assign(acc, flatten(obj[key], fullKey));
+      } else if (typeof obj[key] === 'string') {
+        acc[fullKey] = obj[key];
+      } else {
+        console.warn('⚠️ Skipping Invalid Key:', key, 'Value:', obj[key]);
+      }
+      return acc;
+    }, {});
+  } catch (error) {
+    console.error('🚨 Flatten Function Error:', error);
+    return {}; // Prevents Tailwind from crashing
+  }
+};
+
+/**
+ * Retrieves a template based on an alias, capitalizing the alias before lookup.
+ *
+ * @param {string} alias - The alias to search for in the templates object.
+ * @param {Object} templates - An object containing templates indexed by alias.
+ * @returns {*} - The matching template, or the 'Subpage' template if not found.
+ *
+ * @example
+ * const template = getTemplate('name', templates);
+ *
+ */
+function getTemplate(alias, templates) {
+  const template = templates[capitalize(alias)];
+  if (!template) {
+    return templates.Subpage;
+  }
+  return template;
+}
+
+/**
+ * Checks if a given value is empty (i.e., '', undefined, or null).
+ *
+ * @param {*} value - The value to check.
+ * @returns {boolean} - Returns `true` if the value is empty, otherwise `false`.
+ *
+ * @example
+ * console.log(isEmpty('')); // true
+ * console.log(isEmpty(null)); // true
+ * console.log(isEmpty('hello')); // false
+ */
+function isEmpty(value) {
+  if (value === '' || value === undefined || value === null) {
+    return true;
+  }
+  return false;
+}
+/**
+ * Compiles a module map, converting a selector-importer pair into a `Map` for efficient lookups.
+ *
+ * @function createModuleMap
+ * @param {Object} moduleMap - The module map where selectors are keys and dynamic imports are values.
+ * @returns {Map} A Map where selectors are keys and dynamic import functions are values.
+ *
+ * @example
+ * const moduleMap = {
+ *   '.selector': () => import('components/component'),
+ *   '.selector-1, .selector-2, .selector-3': () => import('components/component')
+ * };
+ * const compiledMap = createModuleMap(moduleMap);
+ */
+function createModuleMap(moduleMap) {
+  const compiledModuleMap = new Map();
+  Object.entries(moduleMap).forEach(([selector, importer]) => {
+    selector.split(',').forEach(subSelector => {
+      compiledModuleMap.set(subSelector.trim(), importer);
+    });
+  });
+  return compiledModuleMap;
+}
+
+/**
+ * Adds a preload class to the body element after a short delay.
+ * Also hides the preload animation after another delay.
+ *
+ * @function preloadTimeout
+ *
+ * @example
+ * preloadTimeout(); // Adds 'loaded' class after a short delay, hides preload animation after another delay.
+ */
+function preloadTimeout() {
+  const body = document.querySelector('.body');
+  if (!body) {
+    return;
+  }
+  setTimeout(() => body.classList.add('loaded'), 100);
+  setTimeout(() => {
+    body.classList.add('preload--hidden');
+    body.classList.remove('preload--transitions');
+  }, 400);
+}
+
+/**
+ * Lazy loads modules based on a selector in the provided module map using the IntersectionObserver API.
+ *
+ * @function lazyModules
+ * @param {Map} moduleMap - A map of selectors to dynamic import functions.
+ * @param {Element} [root=document] - The root element to query for selectors (defaults to `document`).
+ *
+ * @example
+ * const moduleMap = new Map([
+ *   ['.selector', () => import('components/component')],
+ *   ['.selector-1, .selector-2, .selector-3', () => import('components/compomnent')],
+ * ]);
+ * lazyModules(moduleMap); // Lazy load the components when their selectors are in view.
+ */
+// @ts-ignore
+function lazyModules(moduleMap, root = document) {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const target = entry.target;
+        const matchedImporters = Array.from(moduleMap.entries()).filter(([selector]) => target.matches(selector)).map(([_, importer]) => importer);
+        if (matchedImporters.length > 0) {
+          Promise.allSettled(matchedImporters.map(importer => importer())).then(results => {
+            results.forEach(result => {
+              if (result.status === 'fulfilled' && result.value?.default?.init) {
+                result.value.default.init(target);
+              }
+            });
+          }).catch(console.error);
+        }
+        observer.unobserve(target);
+      }
+    });
+  });
+  moduleMap.forEach((_, selector) => {
+    root.querySelectorAll(selector).forEach(element => observer.observe(element));
+  });
+}
+
+/**
+ * Initializes core scripts with an optional callback function.
+ *
+ * @function initCoreScripts
+ * @param {Function} callback - The callback function to initialize core scripts.
+ *
+ * @example
+ * initCoreScripts(() => { console.log('Core scripts initialized'); });
+ */
+function initCoreScripts(callback = null) {
+  import(path.resolve(process.cwd(), 'scripts', 'core', 'prefetch.ts')).then(module => module.default.init());
+  import(path.resolve(process.cwd(), 'scripts', 'core', 'recaptcha.ts')).then(module => module.default.init());
+  if (callback) {
+    callback();
+  }
+}
+
+/**
+ * Handles the `DOMContentLoaded` event to initialize core scripts and lazy load modules.
+ *
+ * @function onDomReady
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `DOMContentLoaded` event handling.
+ *
+ * @example
+ * onDomReady(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('DOM content loaded'); });
+ */
+function onDomReady(moduleMap, initCoreScriptsCallback, callback = null) {
+  document.addEventListener('DOMContentLoaded', e => {
+    preloadTimeout();
+    initCoreScripts(initCoreScriptsCallback);
+    lazyModules(moduleMap);
+    if (callback) {
+      callback(e);
+    }
+  });
+}
+
+/**
+ * Handles the `popstate` event to initialize core scripts and lazy load modules.
+ *
+ * @function onPopstate
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `popstate` event handling.
+ *
+ * @example
+ * onPopstate(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('Popstate event triggered'); });
+ */
+function onPopstate(moduleMap, initCoreScriptsCallback, callback = null) {
+  window.addEventListener('popstate', e => {
+    initCoreScripts(initCoreScriptsCallback);
+    lazyModules(moduleMap);
+    if (callback) {
+      callback(e);
+    }
+  });
+}
+
+/**
+ * Handles the `htmx:beforeSwap` event to perform actions before HTMX swaps.
+ *
+ * @function onHtmxBeforeSwap
+ * @param {Function} callback - The callback function to execute during `htmx:beforeSwap` event handling.
+ *
+ * @example
+ * onHtmxBeforeSwap((e) => { console.log('HTMX before swap:', e); });
+ */
+function onHtmxBeforeSwap(callback = null) {
+  document.body.addEventListener('htmx:beforeSwap', e => {
+    document.querySelectorAll('.button--loading')?.forEach(btn => btn.classList.remove('button--loading'));
+    if (callback) {
+      callback(e);
+    }
+    setTimeout(() => window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    }), 100);
+  });
+}
+
+/**
+ * Handles the `htmx:afterSwap` event to initialize core scripts and lazy load modules.
+ *
+ * @function onHtmxAfterSwap
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} [callback] - An optional callback to execute during `htmx:afterSwap` event handling.
+ *
+ * @example
+ * onHtmxAfterSwap(moduleMap, () => { console.log('HTMX after swap completed'); });
+ */
+function onHtmxAfterSwap(moduleMap, callback = null) {
+  document.body.addEventListener('htmx:afterSwap', e => {
+    // TODO: is initCoreScripts needed here?
+    // initCoreScripts()
+    lazyModules(moduleMap);
+    if (callback) {
+      callback(e);
+    }
+  });
+}
+
+/**
+ * Handles the `htmx:afterSettle` event to initialize core scripts and lazy load modules.
+ *
+ * @function onHtmxAfterSettle
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `htmx:afterSettle` event handling.
+ *
+ * @example
+ * onHtmxAfterSettle(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('HTMX settle completed'); });
+ */
+function onHtmxAfterSettle(moduleMap, initCoreScriptsCallback, callback = null) {
+  document.body.addEventListener('htmx:afterSettle', e => {
+    initCoreScripts(initCoreScriptsCallback);
+    lazyModules(moduleMap);
+    if (callback) {
+      callback(e);
+    }
+  });
+}
+
+// /**
+//  * Handles the `htmx:responseErrnr` event to display error messages based on the HTTP status code.
+//  *
+//  * @function onHtmxResponseError
+//  * @param {Function} [callback] - An optional callback function to execute during handling of the error.
+//  * @ignore
+//  * @example
+//  * onHtmxResponseError(toaster, (e) => {
+//  *   console.log('Custom error handling:', e);
+//  * });
+//  */
+// export function onHtmxResponseError(callback) {
+//   if (!toaster) {
+//     console.error('[@vettvangur/vanilla | onHtmxResponseError | No toaster provided.')
+//     return
+//   }
+
+//   document.addEventListener('htmx:responseError', (e) => {
+//     e.stopImmediatePropagation()
+//     // @ts-ignore
+//     const statusCode = e?.detail?.xhr?.status
+
+//     if (statusCode === 404) {
+//       toaster.error('Page not found (404)')
+//     } else if (statusCode === 500) {
+//       toaster.error('Server error (500)')
+//     } else {
+//       toaster.error(`HTMX error with status code: ${statusCode}`)
+//     }
+
+//     e.stopPropagation()
+
+//     if (callback) {
+//       callback(e)
+//     }
+//   })
+// }
+
+/**
+ * Handles click outside and ESC key events to trigger a callback and close open elements with the `open` class.
+ *
+ * @function clickOutside
+ * @param {Function} callback - The callback function to be executed when a click outside or ESC key event occurs.
+ * @description
+ * This function listens for `click` events and `keyup` events:
+ * - When a click outside of `.co-trigger` is detected, the provided callback is executed.
+ * - When the `ESC` key is pressed, the provided callback is executed, and any open elements (with the `open` class) are closed.
+ *
+ * @example
+ * ClickOutside(() => {
+ *   console.log('Click outside or ESC pressed!');
+ * });
+ */
+function clickOutside(callback) {
+  // Clicks
+  document.addEventListener('click', e => {
+    const target = e.target;
+    const classTargets = document.querySelectorAll('.co-el');
+
+    // Check if the click target is inside an element with class `.co-trigger`
+    // @ts-ignore
+    if (target.closest('.co-trigger')) {
+      return;
+    }
+
+    // Execute the callback function
+    callback(e);
+
+    // Close open elements
+    Array.prototype.forEach.call(classTargets, item => {
+      if (item.classList.contains('open')) {
+        item.classList.remove('open');
+      }
+    });
+  }, false);
+
+  // ESC key
+  document.addEventListener('keyup', e => {
+    const openElements = document.querySelectorAll('.open');
+    const keys = e.keyCode || e.which;
+
+    // If ESC key (key code 27) is pressed
+    if (keys === 27) {
+      // Execute the callback function
+      callback(e);
+
+      // Close open elements
+      Array.prototype.forEach.call(openElements, item => {
+        if (item.classList.contains('open')) {
+          item.classList.remove('open');
+        }
+      });
+    }
+  });
+}
+
+export { capitalize, clickOutside, createModuleMap, dictionary, fetcher, flatten, getTemplate, initCoreScripts, isEmpty, lazyModules, loadEnvFiles, onDomReady, onHtmxAfterSettle, onHtmxAfterSwap, onHtmxBeforeSwap, onPopstate, preloadTimeout, regexr };

package/dist/types/index.d.mts

@@ -0,0 +1,249 @@
+/**
+ * Capitalizes the first letter of a given string.
+ *
+ * @function capitalize
+ * @param {string|null|undefined} value - The string to capitalize. If null or undefined, returns an empty string.
+ * @param {boolean} [lowerRest=false] - If true, converts the rest of the string to lowercase.
+ * @returns {string} The capitalized string, or an empty string if the input is falsy.
+ *
+ * @example capitalize(string)
+ */
+export function capitalize(value: string | null | undefined, lowerRest?: boolean): string;
+/**
+ * Retrieves a translated string from a dictionary based on a given key and culture.
+ *
+ * @function dictionary
+ * @param {string} key - The key for the translation.
+ * @param {Array} data - The array of translation objects.
+ * @param {string} [culture='is-IS'] - The language code to search for (default: 'is-IS').
+ * @returns {string} The translated string if found, otherwise '[Translation not found]'.
+ *
+ * @example
+ * dictionary(key)
+ */
+export function dictionary(key: string, data: any[], culture?: string): string;
+/**
+ * Fetches data from a given URL with customizable options and error handling.
+ *
+ * @async
+ * @function fetcher
+ * @param {Object} params - The parameters for the fetcher function.
+ * @param {string} params.url - The URL to fetch data from.
+ * @param {RequestInit|null} [params.options={}] - Fetch API options (headers, method, body, etc.).
+ * @param {boolean} [params.throwOnError=false] - Whether to throw an error on non-OK HTTP responses.
+ * @returns {Promise<Object|null>} The parsed JSON response or null if an error occurs.
+ * @throws Will throw an error if `throwOnError` is true and the fetch fails or returns a non-OK status.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+ *
+ * @example
+ * const getData = await fetcher({
+ *  url,
+ *  {
+ *    method: 'POST',
+ *    headers: {
+ *      'Content-Type': 'application/json'
+ *    }
+ *  }
+ * })
+ */
+export function fetcher({ url, options, throwOnError }: {
+    url: string;
+    options?: RequestInit | null;
+    throwOnError?: boolean;
+}): Promise<any | null>;
+/**
+ * Loads environment variables from `.env` and `.env.[NODE_ENV]` files.
+ *
+ * This function first loads the base `.env` file, then loads an environment-specific file
+ * based on `NODE_ENV` (e.g., `.env.production`, `.env.development`). If `NODE_ENV` is not set,
+ * it defaults to `'development'`.
+ *
+ * @async
+ * @function loadEnvFiles
+ * @param {boolean} [showMessage=true] - Whether to log a message indicating which env file was loaded.
+ * @throws {Error} Throws an error if loading the environment-specific file fails.
+ * @returns {Promise<void>} Resolves when environment files are loaded.
+ */
+export function loadEnvFiles(showMessage?: boolean): Promise<void>;
+/**
+ * Retrieves a template based on an alias, capitalizing the alias before lookup.
+ *
+ * @param {string} alias - The alias to search for in the templates object.
+ * @param {Object} templates - An object containing templates indexed by alias.
+ * @returns {*} - The matching template, or the 'Subpage' template if not found.
+ *
+ * @example
+ * const template = getTemplate('name', templates);
+ *
+ */
+export function getTemplate(alias: string, templates: any): any;
+/**
+ * Checks if a given value is empty (i.e., '', undefined, or null).
+ *
+ * @param {*} value - The value to check.
+ * @returns {boolean} - Returns `true` if the value is empty, otherwise `false`.
+ *
+ * @example
+ * console.log(isEmpty('')); // true
+ * console.log(isEmpty(null)); // true
+ * console.log(isEmpty('hello')); // false
+ */
+export function isEmpty(value: any): boolean;
+/**
+ * Compiles a module map, converting a selector-importer pair into a `Map` for efficient lookups.
+ *
+ * @function createModuleMap
+ * @param {Object} moduleMap - The module map where selectors are keys and dynamic imports are values.
+ * @returns {Map} A Map where selectors are keys and dynamic import functions are values.
+ *
+ * @example
+ * const moduleMap = {
+ *   '.selector': () => import('components/component'),
+ *   '.selector-1, .selector-2, .selector-3': () => import('components/component')
+ * };
+ * const compiledMap = createModuleMap(moduleMap);
+ */
+export function createModuleMap(moduleMap: any): Map<any, any>;
+/**
+ * Adds a preload class to the body element after a short delay.
+ * Also hides the preload animation after another delay.
+ *
+ * @function preloadTimeout
+ *
+ * @example
+ * preloadTimeout(); // Adds 'loaded' class after a short delay, hides preload animation after another delay.
+ */
+export function preloadTimeout(): void;
+/**
+ * Lazy loads modules based on a selector in the provided module map using the IntersectionObserver API.
+ *
+ * @function lazyModules
+ * @param {Map} moduleMap - A map of selectors to dynamic import functions.
+ * @param {Element} [root=document] - The root element to query for selectors (defaults to `document`).
+ *
+ * @example
+ * const moduleMap = new Map([
+ *   ['.selector', () => import('components/component')],
+ *   ['.selector-1, .selector-2, .selector-3', () => import('components/compomnent')],
+ * ]);
+ * lazyModules(moduleMap); // Lazy load the components when their selectors are in view.
+ */
+export function lazyModules(moduleMap: Map<any, any>, root?: Element): void;
+/**
+ * Initializes core scripts with an optional callback function.
+ *
+ * @function initCoreScripts
+ * @param {Function} callback - The callback function to initialize core scripts.
+ *
+ * @example
+ * initCoreScripts(() => { console.log('Core scripts initialized'); });
+ */
+export function initCoreScripts(callback?: Function): void;
+/**
+ * Handles the `DOMContentLoaded` event to initialize core scripts and lazy load modules.
+ *
+ * @function onDomReady
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `DOMContentLoaded` event handling.
+ *
+ * @example
+ * onDomReady(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('DOM content loaded'); });
+ */
+export function onDomReady(moduleMap: Map<any, any>, initCoreScriptsCallback: Function, callback?: Function): void;
+/**
+ * Handles the `popstate` event to initialize core scripts and lazy load modules.
+ *
+ * @function onPopstate
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `popstate` event handling.
+ *
+ * @example
+ * onPopstate(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('Popstate event triggered'); });
+ */
+export function onPopstate(moduleMap: Map<any, any>, initCoreScriptsCallback: Function, callback?: Function): void;
+/**
+ * Handles the `htmx:beforeSwap` event to perform actions before HTMX swaps.
+ *
+ * @function onHtmxBeforeSwap
+ * @param {Function} callback - The callback function to execute during `htmx:beforeSwap` event handling.
+ *
+ * @example
+ * onHtmxBeforeSwap((e) => { console.log('HTMX before swap:', e); });
+ */
+export function onHtmxBeforeSwap(callback?: Function): void;
+/**
+ * Handles the `htmx:afterSwap` event to initialize core scripts and lazy load modules.
+ *
+ * @function onHtmxAfterSwap
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} [callback] - An optional callback to execute during `htmx:afterSwap` event handling.
+ *
+ * @example
+ * onHtmxAfterSwap(moduleMap, () => { console.log('HTMX after swap completed'); });
+ */
+export function onHtmxAfterSwap(moduleMap: Map<any, any>, callback?: Function): void;
+/**
+ * Handles the `htmx:afterSettle` event to initialize core scripts and lazy load modules.
+ *
+ * @function onHtmxAfterSettle
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `htmx:afterSettle` event handling.
+ *
+ * @example
+ * onHtmxAfterSettle(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('HTMX settle completed'); });
+ */
+export function onHtmxAfterSettle(moduleMap: Map<any, any>, initCoreScriptsCallback: Function, callback?: Function): void;
+/**
+ * Handles click outside and ESC key events to trigger a callback and close open elements with the `open` class.
+ *
+ * @function clickOutside
+ * @param {Function} callback - The callback function to be executed when a click outside or ESC key event occurs.
+ * @description
+ * This function listens for `click` events and `keyup` events:
+ * - When a click outside of `.co-trigger` is detected, the provided callback is executed.
+ * - When the `ESC` key is pressed, the provided callback is executed, and any open elements (with the `open` class) are closed.
+ *
+ * @example
+ * ClickOutside(() => {
+ *   console.log('Click outside or ESC pressed!');
+ * });
+ */
+export function clickOutside(callback: Function): void;
+export namespace regexr {
+    /**
+     * Tests whether a given value matches a regex pattern.
+     *
+     * @param {Object} params - Parameters for testing regex.
+     * @param {string} params.value - The string to test against the regex.
+     * @param {string} params.pattern - The regex pattern to match.
+     * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+     * @returns {boolean} Returns `true` if the value matches the pattern, otherwise `false`.
+     *
+     * @example
+     * const isMatch = regexr.match(pattern)
+     * console.log(isMatch) // return true or false
+     */
+    function test({ value, pattern, flags }: {
+        value: string;
+        pattern: string;
+        flags?: string;
+    }): boolean;
+    /**
+     * Matches a given value against a regex pattern and returns the matches.
+     *
+     * @param {Object} params - Parameters for matching regex.
+     * @param {string} params.value - The string to match against the regex.
+     * @param {string} params.pattern - The regex pattern to match.
+     * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+     * @returns {Array<string>|null} Returns an array of matches, or `null` if no match is found.
+     */
+    function match({ value, pattern, flags }: {
+        value: string;
+        pattern: string;
+        flags?: string;
+    }): Array<string> | null;
+}
+export function flatten(obj: any, prefix?: string): any;

package/dist/types/index.d.ts

@@ -0,0 +1,249 @@
+/**
+ * Capitalizes the first letter of a given string.
+ *
+ * @function capitalize
+ * @param {string|null|undefined} value - The string to capitalize. If null or undefined, returns an empty string.
+ * @param {boolean} [lowerRest=false] - If true, converts the rest of the string to lowercase.
+ * @returns {string} The capitalized string, or an empty string if the input is falsy.
+ *
+ * @example capitalize(string)
+ */
+export function capitalize(value: string | null | undefined, lowerRest?: boolean): string;
+/**
+ * Retrieves a translated string from a dictionary based on a given key and culture.
+ *
+ * @function dictionary
+ * @param {string} key - The key for the translation.
+ * @param {Array} data - The array of translation objects.
+ * @param {string} [culture='is-IS'] - The language code to search for (default: 'is-IS').
+ * @returns {string} The translated string if found, otherwise '[Translation not found]'.
+ *
+ * @example
+ * dictionary(key)
+ */
+export function dictionary(key: string, data: any[], culture?: string): string;
+/**
+ * Fetches data from a given URL with customizable options and error handling.
+ *
+ * @async
+ * @function fetcher
+ * @param {Object} params - The parameters for the fetcher function.
+ * @param {string} params.url - The URL to fetch data from.
+ * @param {RequestInit|null} [params.options={}] - Fetch API options (headers, method, body, etc.).
+ * @param {boolean} [params.throwOnError=false] - Whether to throw an error on non-OK HTTP responses.
+ * @returns {Promise<Object|null>} The parsed JSON response or null if an error occurs.
+ * @throws Will throw an error if `throwOnError` is true and the fetch fails or returns a non-OK status.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+ *
+ * @example
+ * const getData = await fetcher({
+ *  url,
+ *  {
+ *    method: 'POST',
+ *    headers: {
+ *      'Content-Type': 'application/json'
+ *    }
+ *  }
+ * })
+ */
+export function fetcher({ url, options, throwOnError }: {
+    url: string;
+    options?: RequestInit | null;
+    throwOnError?: boolean;
+}): Promise<any | null>;
+/**
+ * Loads environment variables from `.env` and `.env.[NODE_ENV]` files.
+ *
+ * This function first loads the base `.env` file, then loads an environment-specific file
+ * based on `NODE_ENV` (e.g., `.env.production`, `.env.development`). If `NODE_ENV` is not set,
+ * it defaults to `'development'`.
+ *
+ * @async
+ * @function loadEnvFiles
+ * @param {boolean} [showMessage=true] - Whether to log a message indicating which env file was loaded.
+ * @throws {Error} Throws an error if loading the environment-specific file fails.
+ * @returns {Promise<void>} Resolves when environment files are loaded.
+ */
+export function loadEnvFiles(showMessage?: boolean): Promise<void>;
+/**
+ * Retrieves a template based on an alias, capitalizing the alias before lookup.
+ *
+ * @param {string} alias - The alias to search for in the templates object.
+ * @param {Object} templates - An object containing templates indexed by alias.
+ * @returns {*} - The matching template, or the 'Subpage' template if not found.
+ *
+ * @example
+ * const template = getTemplate('name', templates);
+ *
+ */
+export function getTemplate(alias: string, templates: any): any;
+/**
+ * Checks if a given value is empty (i.e., '', undefined, or null).
+ *
+ * @param {*} value - The value to check.
+ * @returns {boolean} - Returns `true` if the value is empty, otherwise `false`.
+ *
+ * @example
+ * console.log(isEmpty('')); // true
+ * console.log(isEmpty(null)); // true
+ * console.log(isEmpty('hello')); // false
+ */
+export function isEmpty(value: any): boolean;
+/**
+ * Compiles a module map, converting a selector-importer pair into a `Map` for efficient lookups.
+ *
+ * @function createModuleMap
+ * @param {Object} moduleMap - The module map where selectors are keys and dynamic imports are values.
+ * @returns {Map} A Map where selectors are keys and dynamic import functions are values.
+ *
+ * @example
+ * const moduleMap = {
+ *   '.selector': () => import('components/component'),
+ *   '.selector-1, .selector-2, .selector-3': () => import('components/component')
+ * };
+ * const compiledMap = createModuleMap(moduleMap);
+ */
+export function createModuleMap(moduleMap: any): Map<any, any>;
+/**
+ * Adds a preload class to the body element after a short delay.
+ * Also hides the preload animation after another delay.
+ *
+ * @function preloadTimeout
+ *
+ * @example
+ * preloadTimeout(); // Adds 'loaded' class after a short delay, hides preload animation after another delay.
+ */
+export function preloadTimeout(): void;
+/**
+ * Lazy loads modules based on a selector in the provided module map using the IntersectionObserver API.
+ *
+ * @function lazyModules
+ * @param {Map} moduleMap - A map of selectors to dynamic import functions.
+ * @param {Element} [root=document] - The root element to query for selectors (defaults to `document`).
+ *
+ * @example
+ * const moduleMap = new Map([
+ *   ['.selector', () => import('components/component')],
+ *   ['.selector-1, .selector-2, .selector-3', () => import('components/compomnent')],
+ * ]);
+ * lazyModules(moduleMap); // Lazy load the components when their selectors are in view.
+ */
+export function lazyModules(moduleMap: Map<any, any>, root?: Element): void;
+/**
+ * Initializes core scripts with an optional callback function.
+ *
+ * @function initCoreScripts
+ * @param {Function} callback - The callback function to initialize core scripts.
+ *
+ * @example
+ * initCoreScripts(() => { console.log('Core scripts initialized'); });
+ */
+export function initCoreScripts(callback?: Function): void;
+/**
+ * Handles the `DOMContentLoaded` event to initialize core scripts and lazy load modules.
+ *
+ * @function onDomReady
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `DOMContentLoaded` event handling.
+ *
+ * @example
+ * onDomReady(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('DOM content loaded'); });
+ */
+export function onDomReady(moduleMap: Map<any, any>, initCoreScriptsCallback: Function, callback?: Function): void;
+/**
+ * Handles the `popstate` event to initialize core scripts and lazy load modules.
+ *
+ * @function onPopstate
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `popstate` event handling.
+ *
+ * @example
+ * onPopstate(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('Popstate event triggered'); });
+ */
+export function onPopstate(moduleMap: Map<any, any>, initCoreScriptsCallback: Function, callback?: Function): void;
+/**
+ * Handles the `htmx:beforeSwap` event to perform actions before HTMX swaps.
+ *
+ * @function onHtmxBeforeSwap
+ * @param {Function} callback - The callback function to execute during `htmx:beforeSwap` event handling.
+ *
+ * @example
+ * onHtmxBeforeSwap((e) => { console.log('HTMX before swap:', e); });
+ */
+export function onHtmxBeforeSwap(callback?: Function): void;
+/**
+ * Handles the `htmx:afterSwap` event to initialize core scripts and lazy load modules.
+ *
+ * @function onHtmxAfterSwap
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} [callback] - An optional callback to execute during `htmx:afterSwap` event handling.
+ *
+ * @example
+ * onHtmxAfterSwap(moduleMap, () => { console.log('HTMX after swap completed'); });
+ */
+export function onHtmxAfterSwap(moduleMap: Map<any, any>, callback?: Function): void;
+/**
+ * Handles the `htmx:afterSettle` event to initialize core scripts and lazy load modules.
+ *
+ * @function onHtmxAfterSettle
+ * @param {Map} moduleMap - The compiled module map for lazy loading.
+ * @param {Function} initCoreScriptsCallback - The callback function to initialize core scripts.
+ * @param {Function} [callback] - An optional callback to execute during `htmx:afterSettle` event handling.
+ *
+ * @example
+ * onHtmxAfterSettle(moduleMap, () => { console.log('Core scripts initialized'); }, () => { console.log('HTMX settle completed'); });
+ */
+export function onHtmxAfterSettle(moduleMap: Map<any, any>, initCoreScriptsCallback: Function, callback?: Function): void;
+/**
+ * Handles click outside and ESC key events to trigger a callback and close open elements with the `open` class.
+ *
+ * @function clickOutside
+ * @param {Function} callback - The callback function to be executed when a click outside or ESC key event occurs.
+ * @description
+ * This function listens for `click` events and `keyup` events:
+ * - When a click outside of `.co-trigger` is detected, the provided callback is executed.
+ * - When the `ESC` key is pressed, the provided callback is executed, and any open elements (with the `open` class) are closed.
+ *
+ * @example
+ * ClickOutside(() => {
+ *   console.log('Click outside or ESC pressed!');
+ * });
+ */
+export function clickOutside(callback: Function): void;
+export namespace regexr {
+    /**
+     * Tests whether a given value matches a regex pattern.
+     *
+     * @param {Object} params - Parameters for testing regex.
+     * @param {string} params.value - The string to test against the regex.
+     * @param {string} params.pattern - The regex pattern to match.
+     * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+     * @returns {boolean} Returns `true` if the value matches the pattern, otherwise `false`.
+     *
+     * @example
+     * const isMatch = regexr.match(pattern)
+     * console.log(isMatch) // return true or false
+     */
+    function test({ value, pattern, flags }: {
+        value: string;
+        pattern: string;
+        flags?: string;
+    }): boolean;
+    /**
+     * Matches a given value against a regex pattern and returns the matches.
+     *
+     * @param {Object} params - Parameters for matching regex.
+     * @param {string} params.value - The string to match against the regex.
+     * @param {string} params.pattern - The regex pattern to match.
+     * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+     * @returns {Array<string>|null} Returns an array of matches, or `null` if no match is found.
+     */
+    function match({ value, pattern, flags }: {
+        value: string;
+        pattern: string;
+        flags?: string;
+    }): Array<string> | null;
+}
+export function flatten(obj: any, prefix?: string): any;

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@vettvangur/vanilla",
+  "version": "0.0.2",
+  "description": "Vettvangur | Vanilla JS Utility Library",
+  "access": "private",
+  "type": "module",
+  "keywords": [],
+  "author": "Vettvangur",
+  "license": "ISC",
+  "main": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.esm.js"
+  },
+  "dependencies": {
+    "dotenv": "16.4.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "28.0.1",
+    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-typescript": "12.1.1",
+    "rollup": "4.28.1",
+    "rollup-plugin-terser": "7.0.2",
+    "shx": "0.3.4",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "bundle": "pnpm types & rollup -c",
+    "dist": "pnpm publish",
+    "types": "tsc -p tsconfig.json & shx mv dist/types/index.d.mts dist/types/index.d.ts"
+  }
+}