feat(helper): add hasGlobalComponent (#46)

themes/theme-default/package.json

@@ -42,6 +42,7 @@
     "copy": "cpx \"src/**/*.{d.ts,vue,scss}\" lib"
   },
   "dependencies": {
+    "@vuepress/helper": "workspace:*",
     "@vuepress/plugin-active-header-links": "workspace:*",
     "@vuepress/plugin-back-to-top": "workspace:*",
     "@vuepress/plugin-container": "workspace:*",

themes/theme-default/src/client/config.ts

@@ -1,3 +1,4 @@
+import { hasGlobalComponent } from '@vuepress/helper/client'
 import { h } from 'vue'
 import { defineClientConfig } from 'vuepress/client'
 import type { ClientConfig } from 'vuepress/client'
@@ -14,9 +15,10 @@ import './styles/index.scss'
 
 export default defineClientConfig({
   enhance({ app, router }) {
-    app.component('Badge', Badge)
-    app.component('CodeGroup', CodeGroup)
-    app.component('CodeGroupItem', CodeGroupItem)
+    if (!hasGlobalComponent('Badge')) app.component('Badge', Badge)
+    if (!hasGlobalComponent('CodeGroup')) app.component('CodeGroup', CodeGroup)
+    if (!hasGlobalComponent('CodeGroupItem'))
+      app.component('CodeGroupItem', CodeGroupItem)
 
     // compat with @vuepress/plugin-external-link-icon
     app.component('AutoLinkExternalIcon', () => {

tools/helper/src/client/utils/hasGlobalComponent.ts

@@ -0,0 +1,15 @@
+import type { App } from 'vue'
+import { camelize, capitalize, getCurrentInstance } from 'vue'
+
+export const hasGlobalComponent = (name: string, app?: App): boolean => {
+  const globalComponents = (app?._instance || getCurrentInstance())?.appContext
+    .components
+
+  if (!globalComponents) return false
+
+  return (
+    name in globalComponents ||
+    camelize(name) in globalComponents ||
+    capitalize(camelize(name)) in globalComponents
+  )
+}

tools/helper/src/client/utils/index.ts

@@ -1 +1,2 @@
 export * from './data.js'
+export * from './hasGlobalComponent.js'