diff --git a/.changeset/gorgeous-ways-jam.md b/.changeset/gorgeous-ways-jam.md new file mode 100644 index 00000000000..a2bfe76886b --- /dev/null +++ b/.changeset/gorgeous-ways-jam.md @@ -0,0 +1,5 @@ +--- +'@aws-amplify/ui-vue': patch +--- + +Added wrapper for useAuthenticator to handle better memory usage diff --git a/packages/vue/package.json b/packages/vue/package.json index a67bb0a3b52..b2007285529 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -30,6 +30,7 @@ }, "dependencies": { "@aws-amplify/ui": "3.0.5", + "@vueuse/core": "^7.4.1", "@xstate/vue": "^0.8.0", "qrcode": "^1.4.4" }, diff --git a/packages/vue/src/composables/useAuth.ts b/packages/vue/src/composables/useAuth.ts index f466bc6d7eb..1857081bff8 100644 --- a/packages/vue/src/composables/useAuth.ts +++ b/packages/vue/src/composables/useAuth.ts @@ -3,6 +3,7 @@ import { ref, reactive, Ref, watchEffect } from 'vue'; import { getServiceFacade } from '@aws-amplify/ui'; import { facade } from './useUtils'; import { InterpretService } from '@/components'; +import { createSharedComposable } from '@vueuse/core'; const service = ref() as Ref; let useAuthenticatorValue = reactive({ ...facade, send: '', state: '' }) as any; @@ -14,7 +15,7 @@ export const useAuth = (serv?: InterpretService) => { return useActor(service.value); }; -export const useAuthenticator = () => { +const useInternalAuthenticator = () => { createValues(); watchEffect(() => { createValues(); @@ -22,6 +23,10 @@ export const useAuthenticator = () => { return useAuthenticatorValue; }; +export const useAuthenticator = createSharedComposable( + useInternalAuthenticator +); + function createValues() { if (!service.value) return; diff --git a/yarn.lock b/yarn.lock index 08bf0976bfb..73626634783 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6024,6 +6024,21 @@ resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.17.tgz#e6dcf5b5bd3ae23595bdb154b9b578ebcdffd698" integrity sha512-7LHZKsFRV/HqDoMVY+cJamFzgHgsrmQFalROHC5FMWrzPzd+utG5e11krj1tVsnxYufGA2ABShX4nlcHXED+zQ== +"@vueuse/core@^7.4.1": + version "7.4.1" + resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-7.4.1.tgz#81ede3f67dfd58af8284c910ac2fee25458892c6" + integrity sha512-8UeLPCAieeQLXFHF1/28SIEK6ILLPb/4hp03hR+xkXF00gB/YUp0CEVcRAL9uQ8HTZa3S2T/jTISMc1ZjilM0A== + dependencies: + "@vueuse/shared" "7.4.1" + vue-demi "*" + +"@vueuse/shared@7.4.1": + version "7.4.1" + resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-7.4.1.tgz#0aa090147fbd66ba56334ada1ffa2dafab815c1b" + integrity sha512-Pzb7XoHIcgPwwBJ5Ow9lZb0HTDyaLDV3pgxKauPGTMN9qvEylG06kUG+VTjJXkPsRtiGu46di8XyFeMw2dongA== + dependencies: + vue-demi "*" + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -22237,6 +22252,11 @@ vscode-vue-languageservice@0.27.26, vscode-vue-languageservice@^0.27.0: vscode-pug-languageservice "^0.27.24" vscode-typescript-languageservice "^0.27.25" +vue-demi@*: + version "0.12.1" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c" + integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw== + vue-jest@^5.0.0-alpha.10: version "5.0.0-alpha.10" resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.10.tgz#4326977b3b0268b1def140f3b69113c2d82fb090"