diff --git a/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js b/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js index fcf1ad87..b2ab0477 100644 --- a/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js +++ b/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js @@ -10,6 +10,21 @@ const useBootstrapComponentDynamicImport = (importFiles, { let filesLoaded = false; const callStack = []; const jQueryCallStack = []; + const instancesMap = new Map(); + + const setInstanceInMap = (element, instance) => { + if (!instancesMap.has(element)) { + instancesMap.set(element, instance); + } + } + + const getInstanceFromMap = (element) => { + if (!instancesMap.has(element)) { + return null; + } + + return instancesMap.get(element); + } if (!componentName) { throw new Error('Component name is required'); @@ -40,18 +55,18 @@ const useBootstrapComponentDynamicImport = (importFiles, { const pluginInstance = getComponentInstance(element); if (pluginInstance) { - return pluginInstance.instanceProxy; + return pluginInstance.proxyInstance; } - return new ComponentObjectConstructorFunction(element); - } + const proxyInstance = new ComponentObjectConstructorFunction(element); - const getComponentInstance = (element) => { - const pluginInstance = callStack.find(({ element: instanceElement }) => instanceElement === element); + setInstanceInMap(element, proxyInstance); - return pluginInstance ? pluginInstance.componentInstance : null; + return proxyInstance; } + const getComponentInstance = (element) => getInstanceFromMap(element); + const proxyFactory = (pluginInstance) => { const pluginObject = {}; const proxyHandler = { @@ -83,14 +98,13 @@ const useBootstrapComponentDynamicImport = (importFiles, { args, instanceMethodCall: [], componentInstance: null, - element: null, } - pluginInstance.instanceProxy = proxyFactory(pluginInstance); + pluginInstance.proxyInstance = proxyFactory(pluginInstance); callStack.push(pluginInstance); - return pluginInstance.instanceProxy; + return pluginInstance.proxyInstance; }; ComponentObjectConstructorFunction.getOrCreateInstance = getOrCreateInstance; @@ -110,7 +124,8 @@ const useBootstrapComponentDynamicImport = (importFiles, { componentInstance = new window.bootstrap[componentName](args); callStack[i].componentInstance = componentInstance; - callStack[i].element = componentInstance._element; + + setInstanceInMap(componentInstance._element, componentInstance); instanceMethodCall.forEach(({ prop, args }) => { componentInstance[prop](...args);