fix: memoization when injecting magic (#4276)

* fix: memoization when injecting magic

* extract get utlilties to a function

* add return comment

* fix tests

* refactor

* wip

---------

Co-authored-by: Caleb Porzio <[email protected]>

Author: AbhiShake1

packages/alpinejs/src/magics.js

@@ -9,28 +9,26 @@ export function magic(name, callback) {
 }
 
 export function injectMagics(obj, el) {
-    Object.entries(magics).forEach(([name, callback]) => {
-        let memoizedUtilities = null;
-        function getUtilities() {
-            if (memoizedUtilities) {
-                return memoizedUtilities;
-            } else {
-                let [utilities, cleanup] = getElementBoundUtilities(el)
-
-                memoizedUtilities = {interceptor, ...utilities}
-
-                onElRemoved(el, cleanup)
-                return memoizedUtilities;
-            }
-        }
+    let memoizedUtilities = getUtilities(el)
 
+    Object.entries(magics).forEach(([name, callback]) => {
         Object.defineProperty(obj, `$${name}`, {
             get() {
-                return callback(el, getUtilities());
+                return callback(el, memoizedUtilities);
             },
             enumerable: false,
         })
     })
 
     return obj
 }
+
+export function getUtilities(el) {
+    let [utilities, cleanup] = getElementBoundUtilities(el)
+
+    let utils = { interceptor, ...utilities }
+
+    onElRemoved(el, cleanup)
+
+    return utils;
+}