From 7e91ecf363636a4b21506eed47900a3ee40d870c Mon Sep 17 00:00:00 2001 From: "onFire(Abhi)" <40654066+AbhiShake1@users.noreply.github.com> Date: Wed, 26 Jun 2024 10:09:55 +0545 Subject: [PATCH 1/6] fix: memoization when injecting magic --- packages/alpinejs/src/magics.js | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/alpinejs/src/magics.js b/packages/alpinejs/src/magics.js index f1dadd76e..698ee6037 100644 --- a/packages/alpinejs/src/magics.js +++ b/packages/alpinejs/src/magics.js @@ -9,24 +9,19 @@ 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 = null; + function getUtilities() { + let [utilities, cleanup] = getElementBoundUtilities(el) + memoizedUtilities = {interceptor, ...utilities} + onElRemoved(el, cleanup) + return memoizedUtilities; + } + + Object.entries(magics).forEach(([name, callback]) => { Object.defineProperty(obj, `$${name}`, { get() { - return callback(el, getUtilities()); + return callback(el, memoizedUtilities || getUtilities()); }, enumerable: false, }) From dba8b234cebe2af2684c43e9d9167c80952dc4fa Mon Sep 17 00:00:00 2001 From: abhi Date: Thu, 27 Jun 2024 15:54:10 +0545 Subject: [PATCH 2/6] extract get utlilties to a function --- packages/alpinejs/src/magics.js | 15 +++------------ packages/alpinejs/src/utils/get-utlilties.js | 12 ++++++++++++ 2 files changed, 15 insertions(+), 12 deletions(-) create mode 100644 packages/alpinejs/src/utils/get-utlilties.js diff --git a/packages/alpinejs/src/magics.js b/packages/alpinejs/src/magics.js index 698ee6037..369689c4c 100644 --- a/packages/alpinejs/src/magics.js +++ b/packages/alpinejs/src/magics.js @@ -1,6 +1,4 @@ -import { getElementBoundUtilities } from './directives' -import { interceptor } from './interceptor' -import { onElRemoved } from './mutation' +import { getUtilities } from "./utils/get-utlilties"; let magics = {} @@ -9,19 +7,12 @@ export function magic(name, callback) { } export function injectMagics(obj, el) { - let memoizedUtilities = null; + let memoizedUtilities = getUtilities(); - function getUtilities() { - let [utilities, cleanup] = getElementBoundUtilities(el) - memoizedUtilities = {interceptor, ...utilities} - onElRemoved(el, cleanup) - return memoizedUtilities; - } - Object.entries(magics).forEach(([name, callback]) => { Object.defineProperty(obj, `$${name}`, { get() { - return callback(el, memoizedUtilities || getUtilities()); + return callback(el, memoizedUtilities); }, enumerable: false, }) diff --git a/packages/alpinejs/src/utils/get-utlilties.js b/packages/alpinejs/src/utils/get-utlilties.js new file mode 100644 index 000000000..1d3123c23 --- /dev/null +++ b/packages/alpinejs/src/utils/get-utlilties.js @@ -0,0 +1,12 @@ +import { getElementBoundUtilities } from "../directives"; +import { interceptor } from "../interceptor"; +import { onElRemoved } from "../mutation"; + +/// Get the utilities for a given element. +/// @param el - The element to get the utilities for. +export function getUtilities(el) { + let [utilities, cleanup] = getElementBoundUtilities(el) + const utils = { interceptor, ...utilities } + onElRemoved(el, cleanup) + return utils; +} From 76899f9217d87e6356e287482eeccab3664a83dc Mon Sep 17 00:00:00 2001 From: abhi Date: Thu, 27 Jun 2024 15:58:00 +0545 Subject: [PATCH 3/6] add return comment --- packages/alpinejs/src/utils/get-utlilties.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/alpinejs/src/utils/get-utlilties.js b/packages/alpinejs/src/utils/get-utlilties.js index 1d3123c23..e0814b70a 100644 --- a/packages/alpinejs/src/utils/get-utlilties.js +++ b/packages/alpinejs/src/utils/get-utlilties.js @@ -2,8 +2,9 @@ import { getElementBoundUtilities } from "../directives"; import { interceptor } from "../interceptor"; import { onElRemoved } from "../mutation"; -/// Get the utilities for a given element. +/// Gets the utilities for a given element. /// @param el - The element to get the utilities for. +/// @returns The utilities for the given element. export function getUtilities(el) { let [utilities, cleanup] = getElementBoundUtilities(el) const utils = { interceptor, ...utilities } From 60d1ae83dfd1a2939ecf360c26dcdfe795c3b462 Mon Sep 17 00:00:00 2001 From: abhi Date: Thu, 27 Jun 2024 16:03:22 +0545 Subject: [PATCH 4/6] fix tests --- packages/alpinejs/src/magics.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/alpinejs/src/magics.js b/packages/alpinejs/src/magics.js index 369689c4c..86433cd77 100644 --- a/packages/alpinejs/src/magics.js +++ b/packages/alpinejs/src/magics.js @@ -7,7 +7,7 @@ export function magic(name, callback) { } export function injectMagics(obj, el) { - let memoizedUtilities = getUtilities(); + let memoizedUtilities = getUtilities(el); Object.entries(magics).forEach(([name, callback]) => { Object.defineProperty(obj, `$${name}`, { From e2c853ca349eba4273839488e0c8f4ba310faa4a Mon Sep 17 00:00:00 2001 From: Caleb Porzio Date: Thu, 27 Jun 2024 09:53:25 -0400 Subject: [PATCH 5/6] refactor --- packages/alpinejs/src/magics.js | 14 +++++++++++++- packages/alpinejs/src/utils/get-utlilties.js | 13 ------------- 2 files changed, 13 insertions(+), 14 deletions(-) delete mode 100644 packages/alpinejs/src/utils/get-utlilties.js diff --git a/packages/alpinejs/src/magics.js b/packages/alpinejs/src/magics.js index 86433cd77..934f91d32 100644 --- a/packages/alpinejs/src/magics.js +++ b/packages/alpinejs/src/magics.js @@ -1,4 +1,6 @@ -import { getUtilities } from "./utils/get-utlilties"; +import { getElementBoundUtilities } from "./directives"; +import { interceptor } from "./interceptor"; +import { onElRemoved } from "./mutation"; let magics = {} @@ -20,3 +22,13 @@ export function injectMagics(obj, el) { return obj } + +export function getUtilities(el) { + let [utilities, cleanup] = getElementBoundUtilities(el) + + let utils = { interceptor, ...utilities } + + onElRemoved(el, cleanup) + + return utils; +} diff --git a/packages/alpinejs/src/utils/get-utlilties.js b/packages/alpinejs/src/utils/get-utlilties.js deleted file mode 100644 index e0814b70a..000000000 --- a/packages/alpinejs/src/utils/get-utlilties.js +++ /dev/null @@ -1,13 +0,0 @@ -import { getElementBoundUtilities } from "../directives"; -import { interceptor } from "../interceptor"; -import { onElRemoved } from "../mutation"; - -/// Gets the utilities for a given element. -/// @param el - The element to get the utilities for. -/// @returns The utilities for the given element. -export function getUtilities(el) { - let [utilities, cleanup] = getElementBoundUtilities(el) - const utils = { interceptor, ...utilities } - onElRemoved(el, cleanup) - return utils; -} From c031d19a5367974871c2d10f2fe7977b6a0a2df5 Mon Sep 17 00:00:00 2001 From: Caleb Porzio Date: Thu, 27 Jun 2024 09:53:59 -0400 Subject: [PATCH 6/6] wip --- packages/alpinejs/src/magics.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/alpinejs/src/magics.js b/packages/alpinejs/src/magics.js index 934f91d32..21dd746e6 100644 --- a/packages/alpinejs/src/magics.js +++ b/packages/alpinejs/src/magics.js @@ -1,6 +1,6 @@ -import { getElementBoundUtilities } from "./directives"; -import { interceptor } from "./interceptor"; -import { onElRemoved } from "./mutation"; +import { getElementBoundUtilities } from './directives' +import { interceptor } from './interceptor' +import { onElRemoved } from './mutation' let magics = {} @@ -9,7 +9,7 @@ export function magic(name, callback) { } export function injectMagics(obj, el) { - let memoizedUtilities = getUtilities(el); + let memoizedUtilities = getUtilities(el) Object.entries(magics).forEach(([name, callback]) => { Object.defineProperty(obj, `$${name}`, {