Merge pull request #79 from ubercj/fix/vue-type-errors

Fix: Vue 2/3 lifecycle type errors and script tag cleanup

packages/vue2/src/google-translate-select.vue

@@ -118,6 +118,7 @@ export default Vue.extend<
       hoveredLanguageCode: '',
       setTimeoutId: -1,
       jsonCallbackFnName: '',
+      scriptTag: null,
       googleTranslateOriginSelectObserve: {},
       htmlAttrLangObserve: {},
       ns,
@@ -153,8 +154,17 @@ export default Vue.extend<
   },
   // @ts-ignore
   beforeUnmount() {
-    this.googleTranslateOriginSelectObserve!.stop!()
-    this.htmlAttrLangObserve!.stop!()
+    if (this.googleTranslateOriginSelectObserve?.stop) {
+      this.googleTranslateOriginSelectObserve!.stop!()
+    }
+
+    if (this.htmlAttrLangObserve?.stop) {
+      this.htmlAttrLangObserve!.stop!()
+    }
+
+    if (this.scriptTag?.unload) {
+      this.scriptTag.unload()
+    }
 
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _this = this
@@ -220,7 +230,7 @@ export default Vue.extend<
     createGoogleTranslate() {
       this.createStyle()
       this.createJsonCallback()
-      this.createScript()
+      this.scriptTag = this.createScript()
     },
     /**
      * Triggers translations by observe changes in the DOM of GoogleTranslate's original select.

packages/vue3/src/google-translate-select.vue

@@ -90,7 +90,10 @@ import {
 } from '@google-translate-select/constants'
 import '@google-translate-select/theme-chalk/src/index.scss'
 import { googleTranslateProps } from './types'
-import type { UseMutationObserverReturn } from '@google-translate-select/utils'
+import type {
+  CreateScriptTagReturn,
+  UseMutationObserverReturn,
+} from '@google-translate-select/utils'
 
 const ns = createNamespace('select')
 
@@ -106,6 +109,7 @@ export default defineComponent({
     const hoveredLanguageCode = ref<string>('')
     const setTimeoutId = ref<number>(-1)
     const jsonCallbackFnName = ref<string>('')
+    const scriptTag = ref<CreateScriptTagReturn | null>(null)
     const googleTranslateOriginSelectObserve =
       ref<Partial<UseMutationObserverReturn> | null>({})
     const htmlAttrLangObserve = ref<Partial<UseMutationObserverReturn> | null>(
@@ -178,7 +182,7 @@ export default defineComponent({
     function createGoogleTranslate() {
       createStyle()
       createJsonCallback()
-      createScript()
+      scriptTag.value = createScript()
     }
 
     /**
@@ -441,9 +445,17 @@ export default defineComponent({
     })
 
     onBeforeUnmount(() => {
-      unref(googleTranslateOriginSelectObserve)!.stop!()
-      unref(htmlAttrLangObserve)!.stop!()
+      if (unref(googleTranslateOriginSelectObserve)?.stop) {
+        unref(googleTranslateOriginSelectObserve)!.stop!()
+      }
 
+      if (unref(htmlAttrLangObserve)?.stop) {
+        unref(htmlAttrLangObserve)!.stop!()
+      }
+
+      if (unref(scriptTag)?.unload) {
+        unref(scriptTag)!.unload!()
+      }
       if (props.trigger === 'click')
         document.removeEventListener('click', handleDropdownShowOrHideByClick)
     })