feat: vue3支持使用useTeleport

[lloydzhou]

Description

通过使用Teleport避免生成多个Vue App，提升渲染性能。

1. 参考x6-react-shape提供的usePortal方法。
2. 使用一个viewId注册一个VuePortalShapeView。
3. VuePortalShapeView会将使用当前view的VueShape的Component挂载到一个动态的TeleportContainer上返回出去。
4. 用户将拿到的TeleportContainer挂载到自己的页面上。

Motivation and Context

现在的VueShapeView针对每一个VueShape生成一个独立的App，mount到对应节点的foreignObject内部。
当要挂载的 Vue 组件节点数量非常多时，挂载时长会比较长。

这里使用vue3内置的Teleport组件，封装一个useTeleport来提升节点挂载性能。#2075

使用Teleport将所有组件挂载到当前的App上面。也可以避免因为页面上出现多个App，导致不能同步使用一些Vue的全局配置。#1864 #2064

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[x6-bot]

👋 @lloydzhou

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript, JavaScript, CSS and React coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[coveralls]

Pull Request Test Coverage Report for Build 2274797810

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 0.0%

---

Totals
Change from base Build 2255934353:	0.0%
Covered Lines:	0
Relevant Lines:	0

---

💛 - Coveralls

[lloydzhou]

Breaking change

1. vue2环境，可能导致import就直接失败！！！

讨论

1. 通过判断isVue3，导出一个使用Teleport的正确版本。
2. 如果是vue2就不导出？或者导出一个mock版本（还是使用默认的VueShapeView）？

伪代码

import { defineComponent, isVue3 } from 'vue-demi'

export function useTeleport(uniqViewId: string) {
  if (isVue3) {
    const TeleportContainer = defineComponent({
      setup(props) {
        return () => h('div', {style: 'display: none'}, Object.keys(items).map((id) => h(items[id])))
      }
    })

    import('vue').then(({ reactive, h, Teleport, markRaw }) => {
      // 这里实现connect, disconnect以及VuePortalShapeView逻辑
    })
    // 按照正常逻辑返回组件
    return TeleportContainer
  } else {
    console.warn('useTeleport should run in vue3')
    import('./view').then(({ VueShapeView }) => {
      // 保证旧版可用
      NodeView.registry.register(uniqViewId, VueShapeView, true)
    })
    return defineComponent(() => null) // 函数返回值保持一致。返回一个空的component
  }
}

[x6-bot]

👋 @lloydzhou

Congrats on merging your first pull request! 🎉🎉🎉

[x6-bot]

🎉 This PR is included in the following release 🎉

• @antv/[email protected]
  • npm package (@latest dist-tag)
  • GitHub release
  • GitHub package

Thanks for being a part of the AntV community! 💪💯