Created new typeguards/instances utils

.changeset/long-seahorses-argue.md

@@ -0,0 +1,5 @@
+---
+'@finsweet/ts-utils': minor
+---
+
+Created new typeguards/instances utils

src/helpers/clearFormField.ts

@@ -2,6 +2,7 @@ import { FORM_CSS_CLASSES } from '../webflow/css';
 import { simulateEvent } from './simulateEvent';
 
 import type { FormField } from '../types';
+import { isHTMLInputElement } from '../type-guards';
 
 const {
   radioInput: radioInputCSSClass,
@@ -19,7 +20,7 @@ const {
 export const clearFormField = (field: FormField, omitEvents: Parameters<typeof simulateEvent>['1'] = []): void => {
   const { type } = field;
 
-  if (field instanceof HTMLInputElement && ['checkbox', 'radio'].includes(type)) {
+  if (isHTMLInputElement(field) && ['checkbox', 'radio'].includes(type)) {
     if (!field.checked) return;
 
     // Reset the field's value

src/helpers/findTextNode.ts

@@ -1,3 +1,5 @@
+import { isHTMLElement } from '../type-guards';
+
 /**
  * Finds the first child text node of an element
  * @param element The element to search into.
@@ -6,7 +8,7 @@ export const findTextNode = (element: HTMLElement): ChildNode | undefined => {
   let textNode: ChildNode | undefined;
 
   for (const node of element.childNodes) {
-    if (node instanceof HTMLElement && node.childNodes.length) textNode = findTextNode(node);
+    if (isHTMLElement(node) && node.childNodes.length) textNode = findTextNode(node);
     else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) textNode = node;
 
     if (textNode) break;

src/helpers/getFormFieldValue.ts

@@ -1,3 +1,4 @@
+import { isHTMLInputElement } from '../type-guards';
 import type { FormField } from '../types/FormField';
 
 /**
@@ -14,7 +15,7 @@ export const getFormFieldValue = (input: FormField): string => {
     const checkedOption = input.closest('form')?.querySelector(`input[name="${input.name}"]:checked`);
 
     // If exists, set its value
-    value = checkedOption instanceof HTMLInputElement ? checkedOption.value : '';
+    value = isHTMLInputElement(checkedOption) ? checkedOption.value : '';
   }
 
   return value.toString();

src/helpers/setFormFieldValue.ts

@@ -1,6 +1,7 @@
 import { simulateEvent } from '.';
 
 import type { FormField } from '..';
+import { isHTMLInputElement } from '..';
 
 /**
  * Sets a value to a FormField element and emits `click`, `input` and `change` Events.
@@ -16,7 +17,7 @@ export const setFormFieldValue = (element: FormField, value: string | boolean):
 
   if (isRadio || isCheckbox) {
     if (
-      !(element instanceof HTMLInputElement) ||
+      !isHTMLInputElement(element) ||
       typeof value !== 'boolean' ||
       value === element.checked ||
       (isRadio && value === false)

src/type-guards/index.ts

@@ -1,3 +1,4 @@
+export * from './instances';
 export { isFormField } from './isFormField';
 export { isKeyOf } from './isKeyOf';
 export { isNotEmpty } from './isNotEmpty';

src/type-guards/instances.ts

@@ -0,0 +1,13 @@
+export const isNode = (target: unknown): target is Node => target instanceof Node;
+
+export const isElement = (target: unknown): target is Element => target instanceof Element;
+
+export const isHTMLElement = (target: unknown): target is HTMLElement => target instanceof HTMLElement;
+
+export const isHTMLInputElement = (target: unknown): target is HTMLInputElement => target instanceof HTMLInputElement;
+
+export const isHTMLSelectElement = (target: unknown): target is HTMLSelectElement =>
+  target instanceof HTMLSelectElement;
+
+export const isHTMLTextAreaElement = (target: unknown): target is HTMLTextAreaElement =>
+  target instanceof HTMLTextAreaElement;

src/type-guards/isFormField.ts

@@ -1,8 +1,9 @@
 import type { FormField } from '../types/FormField';
+import { isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement } from './instances';
 
 /**
  * Checks if an element is a form field element
  * @param element
  */
 // prettier-ignore
-export const isFormField = (element: Element | EventTarget | null): element is FormField => element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement;
+export const isFormField = (element: Element | EventTarget | null): element is FormField => isHTMLInputElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element);