Version 3.3.0 - Add typescript support

README.md

@@ -51,6 +51,12 @@ Cherry picking from the source file will bring in _just_ the chosen helper and s
 
 If you are using Webpack to compile your code and you are using it in production mode, it is likely doing this treeshaking and removing unused code for you automatically.
 
+### Typescript
+
+When modifying or creating helpers, dont forget to generate declaration files of your helpers.
+Please run : `npm run types`
+This will add declaration files at the same place your JS files.
+
 ## Major revision notes:
 
 ### v2.0.0+

changelog.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# 3.3
+
+## Fixed
+* Add Typescript support
+
 # 3.2.6
 
 ## Updated

package.json

@@ -1,8 +1,10 @@
 {
   "name": "@area17/a17-helpers",
-  "version": "3.2.6",
+  "version": "3.3.0",
+  "type": "module",
   "description": "A js helper package",
   "scripts": {
+    "types": "rm -f src/*.d.ts && tsc",
     "test": "jest --watchAll"
   },
   "repository": {
@@ -19,7 +21,9 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "24.0.0",
     "jsdom-global": "^3.0.2",
-    "regenerator-runtime": "^0.14.1"
+    "regenerator-runtime": "^0.14.1",
+    "@types/node": "^20.11.19",
+    "typescript": "^5.3.3"
   },
   "jest": {
     "testEnvironment": "jsdom",

src/ajaxRequest.d.ts

@@ -0,0 +1,7 @@
+export default ajaxRequest;
+/**
+ * ajaxRequest : Performs ajax requests
+ *
+ * @param {Object} settings required - settings object
+*/
+declare function ajaxRequest(settings: any): XMLHttpRequest;

src/cookieHandler.d.ts

@@ -0,0 +1,7 @@
+export default cookieHandler;
+declare namespace cookieHandler {
+    export function create(name: any, value: any, days: any): void;
+    function _delete(name: any): void;
+    export { _delete as delete };
+    export function read(name: any): string;
+}

src/copyTextToClipboard.d.ts

@@ -0,0 +1,8 @@
+export default copyTextToClipboard;
+/**
+ * copyTextToClipboard : Copies a string to the clipboard, if successful shows an alert with a message
+ *
+ * @param {string} textToCopy - required - string of text to copy
+ * @param {string} [successMsg] - optional - string of text to display in the alert if successful, default says "Copied to clipboard"
+*/
+declare function copyTextToClipboard(textToCopy: string, successMsg?: string): void;

src/copyTextToClipboard.js

@@ -23,11 +23,11 @@ const copyTextToClipboard = function(textToCopy,successMsg) {
     var textArea = document.createElement('textarea');
 
     textArea.style.position = 'fixed';
-    textArea.style.top = 0;
-    textArea.style.left = 0;
+    textArea.style.top = '0';
+    textArea.style.left = '0';
     textArea.style.width = '2em';
     textArea.style.height = '2em';
-    textArea.style.padding = 0;
+    textArea.style.padding = '0';
     textArea.style.border = 'none';
     textArea.style.outline = 'none';
     textArea.style.boxShadow = 'none';

src/debounce.d.ts

@@ -0,0 +1,10 @@
+export default debounce;
+/**
+ * debounce : Returns a function that will only run N milliseconds after it stops being called. Or optionally will only run once during multiple calls, and won't run again until N milliseconds after the last call.
+ *
+ * @param {Function} func required - function to be debounced
+ * @param {Number} wait required - delay after last call fire the func
+ * @param {Boolean} [immediate] optional - triggers the func immediately but then won't trigger it again until the wait time has passed after the last call
+ * @returns {Function}
+*/
+declare function debounce(func: Function, wait: number, immediate?: boolean): Function;

src/escapeString.d.ts

@@ -0,0 +1,8 @@
+export default escapeString;
+/**
+ * escapeString : Strips a string of HTML and returns a URI encoded string of the text content of a string, useful for social sharing links
+ *
+ * @param {string} str required - string to be stripped
+ * @returns {string} URI encoded string
+ */
+declare function escapeString(str: string): string;

src/extend.d.ts

@@ -0,0 +1,8 @@
+export default extend;
+/**
+ * extend : Merges the contents of two objects together
+ *
+ * @param {Object} object - any number of objects
+ * @returns {Object} merged object
+*/
+declare function extend(...args: any[]): any;

src/focusDisplayHandler.d.ts

@@ -0,0 +1,5 @@
+export default focusDisplayHandler;
+/**
+ * focusDisplayHandler : Adds data-focus-method to document.activeElement which differentiates between keyboard, mouse and touch focus - values of which can be touch, key or mouse. This allows you to style keyboard focus events and hide the focus ring for mouse events (because designers hate those!)
+ */
+declare function focusDisplayHandler(): void;

src/focusDisplayHandler.js

@@ -9,8 +9,8 @@ const focusDisplayHandler = function() {
   const mouse = 'mouse';
   const key = 'key';
 
-  let focusMethod = false;
-  let lastFocusMethod;
+  let focusMethod = '';
+  let lastFocusMethod = '';
 
   function _onKeyDown() {
     focusMethod = key;
@@ -34,7 +34,7 @@ const focusDisplayHandler = function() {
     if (event.target && typeof(event.target.setAttribute) === 'function') {
       event.target.setAttribute(attr, focusMethod);
       lastFocusMethod = focusMethod;
-      focusMethod = false;
+      focusMethod = '';
     }
   }
 
@@ -45,7 +45,7 @@ const focusDisplayHandler = function() {
   }
 
   function _onWindowBlur() {
-    focusMethod = false;
+    focusMethod = null;
   }
 
   document.addEventListener('keydown', _onKeyDown, true);

src/focusTrap.d.ts

@@ -0,0 +1,5 @@
+export default focusTrap;
+/**
+ * focusTrap : Traps keyboard tabbing focus within a node
+*/
+declare function focusTrap(): void;

src/generateCsv.d.ts

@@ -0,0 +1,8 @@
+export default generateCsv;
+/**
+ * generateCsv : Transforms a data array into a CSV string.
+ *
+ * @param {array[Object]} array required - data array to convert to CSV
+ * @returns {string} CSV string
+ */
+declare function generateCsv(array: any[][any]): string;

src/getCurrentMediaQuery.d.ts

@@ -0,0 +1,7 @@
+export default getCurrentMediaQuery;
+/**
+ * getCurrentMediaQuery : Returns the current media query in use by reading a CSS :root variable. Useful for running JS functions at certain breakpoints without holding breakpoint size information in CSS and JS.
+ *
+ * @returns {string} Media query string
+ */
+declare function getCurrentMediaQuery(): string;

src/getCurrentMediaQuery.js

@@ -5,7 +5,7 @@
  */
 const getCurrentMediaQuery = function() {
   // Doc: https://github.com/area17/js-helpers/wiki/getCurrentMediaQuery
-
+  if(typeof window === 'undefined') return '';
   return getComputedStyle(document.documentElement).getPropertyValue('--breakpoint').trim().replace(/"/g, '');
 };
 

src/getFocusableElements.d.ts

@@ -0,0 +1,9 @@
+export default getFocusableElements;
+/**
+ * getFocusableElements : Returns a list of focusable elements within a target, optionally also including the target (if it itself is also focusable)
+ *
+ * @param {HTMLElement} $target an HTML Element
+ * @param {Boolean} includeTarget Whether or not to include the target itself in the returned array
+ * @returns {Array} An array of focusable elements
+ */
+declare function getFocusableElements($target: HTMLElement, includeTarget?: boolean): any[];

src/getFocusableElements.js

@@ -20,7 +20,7 @@ function focusableFilter($el) {
  *
  * @param {HTMLElement} $target an HTML Element
  * @param {Boolean} includeTarget Whether or not to include the target itself in the returned array
- * @returns {array} An array of focusable elements
+ * @returns {Array} An array of focusable elements
  */
 const getFocusableElements = function($target, includeTarget = false) {
   if (!$target) {

src/getIndex.d.ts

@@ -0,0 +1,9 @@
+export default getIndex;
+/**
+ * getIndex : Returns the index of a node in a nodeList
+ *
+ * @param {HTMLElement} node The node to get the index of
+ * @param {NodeList} nodeList The nodeList to search in
+ * @returns {number} The index of the node
+ */
+declare function getIndex(node: HTMLElement, nodeList: NodeList): number;

src/getMetaContentByName.d.ts

@@ -0,0 +1,8 @@
+export default getMetaContentByName;
+/**
+ * getMetaContentByName : Returns a metatag content by name
+ *
+ * @param {string} name The name of the metatag
+ * @returns {string|null} The content of the metatag
+ */
+declare function getMetaContentByName(name: string): string | null;

src/getOffset.d.ts

@@ -0,0 +1,8 @@
+export default getOffset;
+/**
+ * getOffset : Get the current coordinates of a node, relative to the document, corrected by scroll. Uses getBoundingClientRect
+ *
+ * @param {HTMLElement} node The node to get the offset of
+ * @returns {Object|null} The offset of the node
+ */
+declare function getOffset(node: HTMLElement): any | null;

src/getUrlParameterByName.d.ts

@@ -0,0 +1,9 @@
+export default getUrlParameterByName;
+/**
+ * getUrlParameterByName : Returns value of a parameter from a query string
+ *
+ * @param {string} name The name of the parameter
+ * @param {string} [url] The url to get the parameter from
+ * @returns {string|undefined} returns value of requested parameter
+ */
+declare function getUrlParameterByName(name: string, url?: string): string | undefined;

src/index.d.ts

@@ -0,0 +1,41 @@
+export { default as ajaxRequest } from "./ajaxRequest.js";
+export { default as cookieHandler } from "./cookieHandler.js";
+export { default as copyTextToClipboard } from "./copyTextToClipboard";
+export { default as debounce } from "./debounce";
+export { default as escapeString } from "./escapeString.js";
+export { default as extend } from "./extend.js";
+export { default as focusDisplayHandler } from "./focusDisplayHandler";
+export { default as focusTrap } from "./focusTrap";
+export { default as getCurrentMediaQuery } from "./getCurrentMediaQuery.js";
+export { default as getFocusableElements } from "./getFocusableElements.js";
+export { default as getIndex } from "./getIndex.js";
+export { default as getMetaContentByName } from "./getMetaContentByName.js";
+export { default as getOffset } from "./getOffset.js";
+export { default as getUrlParameterByName } from "./getUrlParameterByName.js";
+export { default as ios100vhFix } from "./ios100vhFix";
+export { default as isBreakpoint } from "./isBreakpoint.js";
+export { default as isVisible } from "./isVisible.js";
+export { default as jsonpRequest } from "./jsonpRequest.js";
+export { default as keycodes } from "./keycodes.js";
+export { default as listeners } from "./listeners.js";
+export { default as nl2br } from "./nl2br.js";
+export { default as messages } from "./messages.js";
+export { default as objectifyForm } from "./objectifyForm.js";
+export { default as orientationChangeFix } from "./orientationChangeFix.js";
+export { default as purgeProperties } from "./purgeProperties.js";
+export { default as queryStringHandler } from "./queryStringHandler";
+export { default as removeEmoji } from "./removeEmoji";
+export { default as removeHTMLentities } from "./removeHTMLentities";
+export { default as removeNoneASCIICharacters } from "./removeNoneASCIICharacters";
+export { default as removeNonePrintableCharacters } from "./removeNonePrintableCharacters";
+export { default as replaceAccentedCharacters } from "./replaceAccentedCharacters";
+export { default as resized } from "./resized.js";
+export { default as responsiveImageSizes } from "./responsiveImageSizes";
+export { default as responsiveImageSrcset } from "./responsiveImageSrcset";
+export { default as responsiveImageUpdate } from "./responsiveImageUpdate";
+export { default as scrolled } from "./scrolled.js";
+export { default as sendEventToSegmentio } from "./sendEventToSegmentio.js";
+export { default as setFocusOnTarget } from "./setFocusOnTarget";
+export { default as SplitText } from "./splitText";
+export { default as Store } from "./store";
+export { default as toChars } from "./toChars";

src/ios100vhFix.d.ts

@@ -0,0 +1,5 @@
+export default ios100vhFix;
+/**
+ * ios100vhFix : Create a CSS variable --vh representing 1% of the window height to fix the 100vh issue on iOS
+ */
+declare function ios100vhFix(): void;

src/ios100vhFix.js

@@ -1,8 +1,9 @@
 /**
  * ios100vhFix : Create a CSS variable --vh representing 1% of the window height to fix the 100vh issue on iOS
  */
-export function ios100vhFix() {
+const ios100vhFix = function () {
   // Doc: https://github.com/area17/js-helpers/wiki/ios100vhFix
+  if(typeof window === 'undefined') return;
 
   function setVh() {
     const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) * 0.01;

src/isBreakpoint.d.ts

@@ -0,0 +1,9 @@
+export default isBreakpoint;
+/**
+ * isBreakpoint : Checks if the current breakpoint matches the passed breakpoint. It supports querying with or without +/- modifiers.
+ *
+ * @param {string} breakpoint The breakpoint to check against
+ * @param {string[]} [breakpoints] Array of breakpoint names to test against
+ * @returns {boolean} Returns true if the breakpoint matches, false if not
+ */
+declare function isBreakpoint(breakpoint: string, breakpoints?: string[]): boolean;