ref: rename func

.changeset/famous-houses-clap.md

@@ -2,4 +2,4 @@
 "@sv443-network/userutils": minor
 ---
 
-Added function observeElementProperty to allow observing element property changes
+Added function `observeElementProp` to allow observing element property changes

README-summary.md

@@ -31,7 +31,7 @@ Or view the documentation of previous major releases: [3.0.0](https://github.com
     - [interceptEvent()](https://github.com/Sv443-Network/UserUtils#interceptevent) - conditionally intercepts events registered by `addEventListener()` on any given EventTarget object
     - [interceptWindowEvent()](https://github.com/Sv443-Network/UserUtils#interceptwindowevent) - conditionally intercepts events registered by `addEventListener()` on the window object
     - [isScrollable()](https://github.com/Sv443-Network/UserUtils#isscrollable) - check if an element has a horizontal or vertical scroll bar
-    - [observeElementProperty()](https://github.com/Sv443-Network/UserUtils#observeelementproperty) - observe changes to an element's property that can't be observed with MutationObserver
+    - [observeElementProp()](https://github.com/Sv443-Network/UserUtils#observeelementprop) - observe changes to an element's property that can't be observed with MutationObserver
 - Math:
     - [clamp()](https://github.com/Sv443-Network/UserUtils#clamp) - constrain a number between a min and max value
     - [mapRange()](https://github.com/Sv443-Network/UserUtils#maprange) - map a number from one range to the same spot in another range

README.md

@@ -33,7 +33,7 @@ View the documentation of previous major releases: [3.0.0](https://github.com/Sv
     - [interceptEvent()](#interceptevent) - conditionally intercepts events registered by `addEventListener()` on any given EventTarget object
     - [interceptWindowEvent()](#interceptwindowevent) - conditionally intercepts events registered by `addEventListener()` on the window object
     - [isScrollable()](#isscrollable) - check if an element has a horizontal or vertical scroll bar
-    - [observeElementProperty()](#observeelementproperty) - observe changes to an element's property that can't be observed with MutationObserver
+    - [observeElementProp()](#observeelementprop) - observe changes to an element's property that can't be observed with MutationObserver
   - [**Math:**](#math)
     - [clamp()](#clamp) - constrain a number between a min and max value
     - [mapRange()](#maprange) - map a number from one range to the same spot in another range
@@ -678,26 +678,26 @@ console.log("Element has a vertical scroll bar:", vertical);
 
 <br>
 
-### observeElementProperty()
+### observeElementProp()
 Usage:  
 ```ts
-observeElementProperty(
+observeElementProp(
   element: Element,
   property: string,
   callback: (oldValue: any, newValue: any) => void
 ): void
 ```
   
-Observes changes to an element's property.  
-While regular attributes can be observed using a MutationObserver, this is not always possible for properties that are changed through setter functions and assignment.  
+This function observes changes to the given property of a given element.  
+While regular HTML attributes can be observed using a MutationObserver, this is not always possible for properties that are assigned on the JS object.  
 This function shims the setter of the provided property and calls the callback function whenever it is changed through any means.  
   
-When using TypeScript, the types for `element`, `property` and the arguments for `callback` will be automatically inferred.
+When using TypeScript, the types for `element`, `property` and the arguments for `callback` will be automatically inferred.  
   
 <details><summary><b>Example - click to view</b></summary>
 
 ```ts
-import { observeElementProperty } from "@sv443-network/userutils";
+import { observeElementProp } from "@sv443-network/userutils";
 
 const myInput = document.querySelector("input#my-input");
 
@@ -721,7 +721,7 @@ observer.observe(myInput, {
 });
 
 
-observeElementProperty(myInput, "value", (oldValue, newValue) => {
+observeElementProp(myInput, "value", (oldValue, newValue) => {
   // will be called every time the value changes:
   console.log("Value changed from", oldValue, "to", newValue);
 });

lib/dom.ts

@@ -150,13 +150,13 @@ export function isScrollable(element: Element) {
  * @param property The name of the property to observe
  * @param callback Callback to execute when the value is changed
  */
-export function observeElementProperty<
+export function observeElementProp<
   TElem extends Element = HTMLElement,
-  TProp extends keyof TElem = keyof TElem,
+  TPropKey extends keyof TElem = keyof TElem,
 >(
   element: TElem,
-  property: TProp,
-  callback: (oldVal: TElem[TProp], newVal: TElem[TProp]) => void
+  property: TPropKey,
+  callback: (oldVal: TElem[TPropKey], newVal: TElem[TPropKey]) => void
 ) {
   const elementPrototype = Object.getPrototypeOf(element);
   // eslint-disable-next-line no-prototype-builtins