fix appContext

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tippy",
-  "version": "6.3.0-beta.2",
+  "version": "6.3.0",
   "main": "index.js",
   "module": "dist/vue-tippy.mjs",
   "unpkg": "dist/vue-tippy.iife.js",

playground/main.ts

@@ -11,6 +11,7 @@ import PageIndex from './pages/Index.vue'
 import PageNestedComponents from './pages/NestedComponents.vue'
 import PageSingletonComponents from './pages/SingletonComponents.vue'
 import PageWga from './pages/Wga.vue'
+import PageAppContext from './pages/AppContext.vue'
 import ReactiveProps from './pages/ReactiveProps.vue'
 import Testing from './pages/Testing.vue'
 import ReactiveState from './pages/ReactiveState.vue'
@@ -29,6 +30,7 @@ const router = createRouter({
     { path: '/reactive-state', component: ReactiveState },
     { path: '/theme', component: Theme },
     { path: '/wga', component: PageWga },
+    { path: '/app-context', component: PageAppContext },
   ]
 })
 
@@ -37,8 +39,12 @@ const app = createApp(App)
 app.component('counter', Counter)
 app.component("ui-icon", UiIcon);
 
+app.provide('settings', {
+  appName: 'Vue Tippy',
+})
+
 app.use(router)
 app.use(VueTippy, {
   defaultProps: { placement: 'right' },
 })
-app.mount('#app')
+app.mount('#app')

playground/pages/AppContext.vue

@@ -0,0 +1,25 @@
+<template>
+    <button ref="btn">Hi!</button>
+</template>
+
+<script setup lang="ts">
+import { ref, h, defineComponent, resolveComponent, inject } from "vue";
+import { useTippy } from "../../src";
+
+const btn = ref()
+
+useTippy(btn, {
+    interactive: true,
+    content: defineComponent({
+        setup() {
+            const settings = inject("settings") as any
+
+            return () => h("div", {}, [
+                JSON.stringify(settings),
+                h(resolveComponent("counter")),
+            ])
+        }
+    })
+})
+
+</script>

src/composables/useTippy.ts

@@ -12,6 +12,8 @@ import {
   onUnmounted,
   getCurrentInstance,
   createApp,
+  shallowRef,
+  App,
 } from 'vue'
 import { TippyOptions, TippyContent } from '../types'
 
@@ -31,7 +33,7 @@ export function useTippy(
   } = { mount: true, appName: 'Tippy' }
 ) {
   settings = Object.assign({ mount: true, appName: 'Tippy' }, settings);
-  
+
   const vm = getCurrentInstance()
   const instance = ref<Instance>()
   const state = ref({
@@ -41,13 +43,13 @@ export function useTippy(
     isMounted: false,
     isShown: false,
   })
-  const createAppMounted = ref(false)
+  const headlessApp = shallowRef<App>()
 
   let container: any = null
 
   const getContainer = () => {
     if (container) return container
-    container = document.createElement("aside")
+    container = document.createDocumentFragment()
     return container
   }
 
@@ -62,33 +64,34 @@ export function useTippy(
 
 
     if (isVNode(unwrappedContent)) {
-      if (!createAppMounted.value) {
-        if (vm) {
-          unwrappedContent.appContext = vm.appContext
-        }
-        createApp({
+      if (!headlessApp.value) {
+        headlessApp.value = createApp({
           name: settings.appName,
           render: () => unwrappedContent,
         })
-          .mount(getContainer())
-        createAppMounted.value = true
+
+        if (vm) {
+          Object.assign(headlessApp.value._context, vm.appContext)
+        }
+
+        headlessApp.value.mount(getContainer())
       }
       newContent = () => getContainer()
     } else if (typeof unwrappedContent === 'object') {
-      if (!createAppMounted.value) {
+      if (!headlessApp.value) {
 
         let comp = h(unwrappedContent)
 
-        if (vm) {
-          comp.appContext = vm.appContext
-        }
-
-        createApp({
+        headlessApp.value = createApp({
           name: settings.appName,
           render: () => comp,
         })
-          .mount(getContainer())
-        createAppMounted.value = true
+
+        if (vm) {
+          Object.assign(headlessApp.value._context, vm.appContext)
+        }
+
+        headlessApp.value.mount(getContainer())
       }
 
       newContent = () => getContainer()
@@ -194,6 +197,8 @@ export function useTippy(
       instance.value = undefined
     }
     container = null
+    headlessApp.value?.unmount()
+    headlessApp.value = undefined
   }
 
   const show = () => {
@@ -255,15 +260,15 @@ export function useTippy(
       } else {
         onMounted(mount)
       }
-
-      onUnmounted(() => {
-        destroy()
-      })
     } else {
       mount()
     }
   }
 
+  onUnmounted(() => {
+    destroy()
+  })
+
   if (isRef(opts) || isReactive(opts)) {
     watch(opts, refresh, { immediate: false })
   } else if (isRef(opts.content)) {