fix(portal): correctly render content only once

fix vexip-ui#502
alphaelf · Aug 21, 2024 · 9cd9c6d · 9cd9c6d
1 parent 6cde713
commit 9cd9c6d
Show file tree

Hide file tree

Showing 16 changed files with 112 additions and 239 deletions.
diff --git a/common/config/package.json b/common/config/package.json
@@ -1,9 +1,10 @@
 {
   "name": "@vexip-ui/config",
   "version": "1.8.1",
+  "type": "module",
   "license": "MIT",
+  "private": false,
   "author": "qmhc",
-  "type": "module",
   "scripts": {
     "build": "vite build"
   },
@@ -17,22 +18,21 @@
       "import": "./dist/index.mjs"
     }
   },
-  "private": false,
   "files": [
     "dist"
   ],
-  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/config#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vexip-ui/vexip-ui.git",
     "directory": "common/config"
   },
+  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/config#readme",
   "dependencies": {
     "@vexip-ui/bem-helper": "workspace:*",
     "@vexip-ui/icons": "workspace:*",
     "@vexip-ui/utils": "workspace:*",
     "lucide-vue-next": "^0.365.0",
-    "vue": "~3.3.13"
+    "vue": "^3.4.38"
   },
   "peerDependencies": {
     "vue": "^3.2.25"

diff --git a/common/hooks/package.json b/common/hooks/package.json
@@ -1,15 +1,16 @@
 {
   "name": "@vexip-ui/hooks",
   "version": "2.5.0",
+  "type": "module",
   "license": "MIT",
+  "private": false,
   "author": "qmhc",
   "scripts": {
     "build": "vite build",
     "test": "vitest run",
     "test:cover": "vitest run --coverage",
     "test:dev": "vitest dev"
   },
-  "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -20,23 +21,22 @@
       "import": "./dist/index.mjs"
     }
   },
-  "private": false,
   "files": [
     "dist"
   ],
-  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/hooks#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vexip-ui/vexip-ui.git",
     "directory": "common/hooks"
   },
+  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/hooks#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
     "@juggle/resize-observer": "^3.4.0",
     "@vexip-ui/utils": "workspace:*"
   },
   "devDependencies": {
-    "vue": "~3.3.13"
+    "vue": "^3.4.38"
   },
   "peerDependencies": {
     "vue": "^3.2.25"

diff --git a/common/icons/package.json b/common/icons/package.json
@@ -1,18 +1,14 @@
 {
   "name": "@vexip-ui/icons",
   "version": "1.2.1",
+  "type": "module",
   "license": "MIT",
-  "anchor": "qmhc",
   "scripts": {
     "build": "tsx scripts/build.ts"
   },
-  "type": "module",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "types/index.d.ts",
-  "sideEffects": [
-    "dist/*"
-  ],
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
@@ -34,29 +30,33 @@
     "./package.json": "./package.json",
     "./*": "./*"
   },
+  "sideEffects": [
+    "dist/*"
+  ],
   "files": [
     "dist",
     "es",
     "lib",
     "types",
     "vue"
   ],
-  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/icons#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vexip-ui/vexip-ui.git",
     "directory": "common/icons"
   },
+  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/icons#readme",
   "devDependencies": {
     "@types/node": "^20.12.5",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0",
     "prettier": "^3.3.3",
-    "vue": "~3.3.13"
+    "vue": "^3.4.38"
   },
   "peerDependencies": {
     "vue": "^3.2.25"
-  }
+  },
+  "anchor": "qmhc"
 }
diff --git a/components/ellipsis/tests/ellipsis.spec.tsx b/components/ellipsis/tests/ellipsis.spec.tsx
@@ -28,7 +28,7 @@ describe('Ellipsis', () => {
   })
 
   it('tooltip visible', async () => {
-    const wrapper = mount(() => <Ellipsis>{TEXT}</Ellipsis>)
+    const wrapper = mount(() => <Ellipsis transfer={false}>{TEXT}</Ellipsis>)
     const rectMock = vi
       .spyOn(wrapper.find('.vxp-ellipsis').element, 'getBoundingClientRect')
       .mockImplementation(() => ({
@@ -46,15 +46,15 @@ describe('Ellipsis', () => {
     // expect(wrapper.findComponent(Ellipsis).vm.active).toBe(false)
     expect(wrapper.findComponent(Ellipsis).vm.visible).toBe(false)
 
-    wrapper.find('.vxp-ellipsis').trigger('mouseenter')
+    await wrapper.find('.vxp-ellipsis').trigger('mouseenter')
     vi.runOnlyPendingTimers()
     await nextTick()
     // expect(wrapper.findComponent(Ellipsis).vm.active).toBe(true)
     expect(wrapper.findComponent(Ellipsis).vm.visible).toBe(true)
     expect(wrapper.find('.vxp-tooltip__popper').exists()).toBe(true)
     expect(wrapper.find('.vxp-tooltip__popper').text()).toBe(TEXT)
 
-    wrapper.find('.vxp-ellipsis').trigger('mouseleave')
+    await wrapper.find('.vxp-ellipsis').trigger('mouseleave')
     vi.runOnlyPendingTimers()
     await nextTick()
     expect(wrapper.findComponent(Ellipsis).vm.visible).toBe(false)

diff --git a/components/full-screen/tests/fullScreen.spec.tsx b/components/full-screen/tests/fullScreen.spec.tsx
@@ -49,7 +49,9 @@ describe('FullScreen', () => {
     const vm = wrapper.findComponent(FullScreen).vm
 
     await vm.enter()
-    expect(wrapper.find('.vxp-full-screen').classes()).toContain('vxp-full-screen--full')
+    expect(
+      document.body.querySelector('.vxp-full-screen')?.classList.contains('vxp-full-screen--full')
+    ).toBe(true)
     expect(vm.full).toEqual('window')
     await vm.exit()
     expect(wrapper.find('.vxp-full-screen').classes()).not.toContain('vxp-full-screen--full')
@@ -69,7 +71,9 @@ describe('FullScreen', () => {
     const { toggle } = wrapper.findComponent(FullScreen).vm
 
     await toggle()
-    expect(wrapper.find('.vxp-full-screen').classes()).toContain('vxp-full-screen--full')
+    expect(
+      document.body.querySelector('.vxp-full-screen')?.classList.contains('vxp-full-screen--full')
+    ).toBe(true)
     await toggle()
     expect(wrapper.classes()).not.toContain('vxp-full-screen--full')
   })
@@ -81,7 +85,7 @@ describe('FullScreen', () => {
 
     expect(wrapper.find('.vxp-full-screen').attributes().style).eq(undefined)
     await enter('window', 1)
-    expect(wrapper.find('.vxp-full-screen').attributes().style).toContain(
+    expect(document.body.querySelector<HTMLElement>('.vxp-full-screen')?.style.cssText).toContain(
       '--vxp-full-screen-z-index: 1;'
     )
     await exit()
@@ -94,7 +98,9 @@ describe('FullScreen', () => {
     const vm = wrapper.findComponent(FullScreen).vm
 
     await vm.toggle()
-    expect(wrapper.find('.vxp-full-screen').classes()).toContain('vxp-full-screen--full')
+    expect(
+      document.body.querySelector('.vxp-full-screen')?.classList.contains('vxp-full-screen--full')
+    ).toBe(true)
     expect(vm.full).toBe('window')
 
     await vm.toggle('browser')

diff --git a/components/portal/portal.vue b/components/portal/portal.vue
@@ -1,35 +1,16 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
-
-// import { isClient } from '@vexip-ui/utils'
-
 defineOptions({ name: 'Portal' })
 
-const props = defineProps({
+defineProps({
   to: {
     type: String,
     default: ''
   }
 })
-
-const testMode = import.meta.env.MODE === 'test'
-const isMounted = ref(false)
-const disabled = computed(() => !isMounted.value || !props.to)
-
-onMounted(() => {
-  nextTick(() => {
-    isMounted.value = true
-  })
-})
 </script>
 
 <template>
-  <Teleport
-    v-if="testMode ? !disabled : isMounted"
-    :to="disabled ? undefined : to || undefined"
-    :disabled="disabled"
-  >
+  <Teleport :to="to || 'body'" :disabled="!to">
     <slot></slot>
   </Teleport>
-  <slot v-else></slot>
 </template>
diff --git a/components/portal/tests/portal.spec.tsx b/components/portal/tests/portal.spec.tsx
@@ -1,5 +1,4 @@
 import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 
 import { Portal } from '..'
@@ -19,17 +18,12 @@ describe('Portal', () => {
   })
 
   it('transfer', async () => {
-    const wrapper = mount(() => (
+    mount(() => (
       <Portal to={'body'}>
         <span class={'test'}>{TEXT}</span>
       </Portal>
     ))
 
-    expect(wrapper.find('.test').exists()).toBe(true)
-
-    await nextTick()
-    await nextTick()
-    expect(wrapper.find('.test').exists()).toBe(false)
-    expect(document.body.querySelector('.test')).not.toBeNull()
+    expect(document.body.querySelector('.test')).toBeTruthy()
   })
 })
diff --git a/dev-server/.gitignore b/dev-server/.gitignore
@@ -1,2 +1,3 @@
 /router.ts
 play.vue
+play-*.vue
diff --git a/dev-server/package.json b/dev-server/package.json
@@ -9,6 +9,6 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "unplugin-vue-components": "^0.26.0",
-    "vue": "~3.3.13"
+    "vue": "^3.4.38"
   }
 }
diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
@@ -1,4 +1,4 @@
-import * as compiler from '@vue/compiler-sfc'
+// import * as compiler from '@vue/compiler-sfc'
 
 import { withPwa } from '@vite-pwa/vitepress'
 
@@ -17,7 +17,7 @@ import { getPwaConfig } from './pwa'
 
 import type { AsideMenuTag, ThemeConfig } from '../theme/types'
 
-compiler.parseCache.max = 10000
+// compiler.parseCache.max = 10000
 
 export default async () => {
   const updated = await getUpdatedFiles()
@@ -32,7 +32,7 @@ export default async () => {
         config: markdownItSetup
       },
       vue: {
-        compiler: compiler as any,
+        // compiler: compiler as any,
         template: {
           compilerOptions: {
             isCustomElement: tag => tag === 'iconify-icon'

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,5 +1,7 @@
 import './style/index.scss'
 
+import { version } from 'vue'
+
 import { withBase } from 'vitepress'
 import { Loading, install as VexipUI } from 'vexip-ui'
 import { isClient, isColor } from '@vexip-ui/utils'
@@ -15,6 +17,12 @@ import 'prismjs/plugins/highlight-keywords/prism-highlight-keywords'
 import type { App, Ref } from 'vue'
 import type { Router } from 'vitepress'
 
+declare global {
+  interface Window {
+    vueVersion: string
+  }
+}
+
 export default {
   Layout,
   enhanceApp({ app, router }: { app: App, router: Router }) {
@@ -24,6 +32,10 @@ export default {
     syncDirection()
     enhanceApp(app)
     enhanceRouter(router)
+
+    if (isClient) {
+      window.vueVersion = version
+    }
   }
 }
 

diff --git a/docs/package.json b/docs/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@vexip-ui/docs",
-  "author": "qmhc",
   "type": "module",
+  "private": true,
+  "author": "qmhc",
   "scripts": {
     "build": "vitepress build",
     "preview": "vitepress preview",
     "serve": "NODE_ENV=development vitepress dev --test"
   },
-  "private": true,
   "dependencies": {
     "@vexip-ui/bem-helper": "workspace:*",
     "@vexip-ui/config": "workspace:*",
@@ -19,9 +19,9 @@
     "lucide-vue-next": "^0.365.0",
     "prismjs": "^1.29.0",
     "vexip-ui": "workspace:*",
-    "vue": "~3.3.13",
+    "vue": "^3.4.38",
     "vue-i18n": "^9.14.0",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
@@ -32,7 +32,6 @@
     "@vite-pwa/vitepress": "^0.4.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/compiler-sfc": "3.3.4",
     "autoprefixer": "^10.4.19",
     "compare-versions": "6.1.0",
     "execa": "^8.0.1",