From 357a25b27d9db06ad65efac1ddeb8a97cde8e666 Mon Sep 17 00:00:00 2001
From: wuchao <wuchao>
Date: Tue, 17 Dec 2024 11:22:40 +0800
Subject: [PATCH] feat: support use global components

---
 package.json                                  | 36 ++++----
 playground/package.json                       |  2 +-
 playground/src/components/Conditions.vue      |  4 +
 .../src/components/RegisteGloablCode.vue      | 89 +++++++++++++++++++
 playground/src/components/constomCompo.vue    |  6 +-
 playground/src/main.ts                        | 16 +++-
 playground/src/pages/index.vue                | 13 +++
 src/index.ts                                  |  2 +
 src/store/globalOptions.ts                    |  2 +
 src/store/toastContainers.ts                  |  2 +
 src/types.ts                                  |  4 +-
 11 files changed, 149 insertions(+), 27 deletions(-)
 create mode 100644 playground/src/components/RegisteGloablCode.vue

diff --git a/package.json b/package.json
index 33a0790..05add8a 100644
--- a/package.json
+++ b/package.json
@@ -82,39 +82,39 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.25.9",
-    "@babel/plugin-transform-typescript": "^7.25.9",
+    "@babel/plugin-transform-typescript": "^7.26.3",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@stylistic/eslint-plugin-js": "^2.11.0",
-    "@stylistic/eslint-plugin-jsx": "^2.11.0",
-    "@stylistic/eslint-plugin-plus": "^2.11.0",
-    "@stylistic/eslint-plugin-ts": "^2.11.0",
-    "@swc/core": "^1.9.3",
+    "@stylistic/eslint-plugin-js": "^2.12.1",
+    "@stylistic/eslint-plugin-jsx": "^2.12.1",
+    "@stylistic/eslint-plugin-plus": "^2.12.1",
+    "@stylistic/eslint-plugin-ts": "^2.12.1",
+    "@swc/core": "^1.10.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lz-string": "^1.5.0",
-    "@types/node": "^22.10.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@types/node": "^22.10.2",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vitest/ui": "^2.1.6",
+    "@vitest/ui": "^2.1.8",
     "@vue/babel-plugin-jsx": "^1.2.5",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "browserslist-to-esbuild": "^2.1.1",
-    "bumpp": "^9.8.1",
+    "bumpp": "^9.9.1",
     "core-js": "^3.39.0",
     "cssnano": "^7.0.6",
     "esbuild-plugin-babel": "^0.2.3",
-    "eslint-plugin-vue": "^9.31.0",
+    "eslint-plugin-vue": "^9.32.0",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
-    "npm": "^10.9.1",
+    "lint-staged": "^15.2.11",
+    "npm": "^10.9.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
@@ -122,18 +122,18 @@
     "postcss-nested": "^7.0.2",
     "postcss-scss": "^4.0.9",
     "rimraf": "^5.0.10",
-    "sass": "^1.81.0",
+    "sass": "^1.83.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.1",
     "tsup": "^8.3.5",
     "typescript": "~5.6.3",
-    "vite": "^6.0.1",
+    "vite": "^6.0.3",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^2.1.6",
+    "vitest": "^2.1.8",
     "vue-eslint-parser": "^9.4.3",
     "vue-tsc": "^2.1.10"
   },
diff --git a/playground/package.json b/playground/package.json
index 8ce9efe..c7e29da 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "ant-design-vue": "^4.2.6",
-    "highlight.js": "^11.10.0",
+    "highlight.js": "^11.11.0",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
diff --git a/playground/src/components/Conditions.vue b/playground/src/components/Conditions.vue
index faaeeda..ca3b950 100644
--- a/playground/src/components/Conditions.vue
+++ b/playground/src/components/Conditions.vue
@@ -397,6 +397,10 @@ html.dark {
   .breadcrumb {
     color: #fff;
   }
+
+  .others-box {
+    color: #fff;
+  }
 }
 
 </style>
diff --git a/playground/src/components/RegisteGloablCode.vue b/playground/src/components/RegisteGloablCode.vue
new file mode 100644
index 0000000..86f825a
--- /dev/null
+++ b/playground/src/components/RegisteGloablCode.vue
@@ -0,0 +1,89 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="code-container">
+    <pre>
+      <code class="language-javascript" v-html="highlightedCode" />
+    </pre>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import 'highlight.js/styles/monokai.css';
+
+hljs.registerLanguage('javascript', javascript);
+
+const highlightedCode = ref('');
+
+onMounted(() => {
+  const highlighted = hljs.highlight(`
+import { App, createApp } from 'vue';
+import router from './routes';
+
+import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify';
+
+import Root from './App.vue';
+
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/reset.css';
+
+function resolveGLobalComponents(instance: App<Element>) {
+  instance.use(Antd);
+}
+
+const app = createApp(Root);
+
+app.use(router);
+
+resolveGLobalComponents(app);
+
+app.use(
+  Vue3Toasity,
+  {
+    // the Toast application is separate from the main application, so we need to call .use
+    useHandler: resolveGLobalComponents,
+    // other props...
+  } as ToastContainerOptions,
+);
+
+app.mount('#app');
+`, { language: 'javascript' }).value;
+
+  highlightedCode.value = highlighted;
+});
+</script>
+
+<style>
+.code-container {
+  font-family: Hack, monospace;
+  border-radius: 5px;
+  box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
+  position: relative;
+  padding: 0 12px;
+  overflow-x: auto;
+  transition: background-color .5s;
+  color: #CFD2D1 !important;
+  background-color: #151718 !important;
+  font-size: 14px;
+  font-style: normal;
+  font-variant-ligatures: contextual;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-height: 18.6167px
+}
+
+pre{
+  margin: 0;
+}
+
+.hljs-keyword {
+  color: #c586c0;
+}
+
+.hljs-string {
+  color: #ce9178;
+}
+
+</style>
diff --git a/playground/src/components/constomCompo.vue b/playground/src/components/constomCompo.vue
index 9d79948..89d0cc1 100644
--- a/playground/src/components/constomCompo.vue
+++ b/playground/src/components/constomCompo.vue
@@ -2,14 +2,12 @@
   <div>
     {{ contentProps.title }}
   </div>
-  <Button type="primary" size="small">
+  <a-button type="primary" size="small">
     Click me
-  </Button>
+  </a-button>
 </template>
 
 <script setup>
-import { Button } from 'ant-design-vue';
-
 const props = defineProps({
   contentProps: {
     type: Object,
diff --git a/playground/src/main.ts b/playground/src/main.ts
index e9e98e0..6257e03 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,22 +1,32 @@
-import { createApp } from 'vue';
+import { App, createApp } from 'vue';
 import router from './routes';
 
 import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify';
 
-import App from './App.vue';
+import Root from './App.vue';
+
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/reset.css';
 
 import './styles/main.css';
 import './index.css';
 
 import '../../src/styles/main.scss'; // 不要修改或删除
 
-const app = createApp(App);
+const app = createApp(Root);
 
 app.use(router);
 
+resolveGLobalComponents(app);
+
+function resolveGLobalComponents(instance: App<Element>) {
+  instance.use(Antd);
+}
+
 app.use(
   Vue3Toasity,
   {
+    useHandler: resolveGLobalComponents,
     // rtl: true,
     containerClassName: 'container-classsssssss',
     toastClassName: 'toast-classssssss',
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 177d4c0..9a4f99d 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -5,6 +5,7 @@ import { toast, ToastOptions } from 'vue3-toastify';
 import constomCompo from '../components/constomCompo.vue';
 import Conditions from '../components/Conditions.vue';
 import ToastCode from '../components/ToastCode.vue';
+import RegisteGloablCode from '../components/RegisteGloablCode.vue';
 
 import 'ant-design-vue/es/button/style/index.js';
 import 'ant-design-vue/es/divider/style/index.js';
@@ -119,6 +120,14 @@ const displayPromise = () => {
     />
     <ToastCode :options="options" />
 
+    <Divider />
+
+    <h5 align="center" style="font-size: 16px; text-align: left;">
+      Registe global components (For example antd)
+    </h5>
+
+    <RegisteGloablCode />
+
     <br>
     <br>
 
@@ -177,5 +186,9 @@ html.dark {
     color: #fff;
     border-color: #8a8989;
   }
+
+  h2, h5 {
+    color: #fff;
+  }
 }
 </style>
diff --git a/src/index.ts b/src/index.ts
index df2118a..6ece434 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,9 +2,11 @@ import { Plugin } from 'vue';
 import { ToastContainerOptions } from './types';
 import { defaultGlobalOptions } from './utils/constant';
 import { mergeOptions, saveGlobalOptions } from './utils/tools';
+import { appInstance } from './store';
 
 const Vue3Toastify: Plugin = {
   install(_, options = {} as Partial<ToastContainerOptions>) {
+    appInstance.useHandler = options.useHandler || (() => {});
     updateGlobalOptions(options);
   },
 };
diff --git a/src/store/globalOptions.ts b/src/store/globalOptions.ts
index e1ad862..5fca497 100644
--- a/src/store/globalOptions.ts
+++ b/src/store/globalOptions.ts
@@ -1,6 +1,8 @@
 import { ToastContainerOptions } from '..';
 import { reactive } from 'vue';
 
+export const appInstance = reactive<{ useHandler: any }>({ useHandler: undefined });
+
 export const globalOptions = reactive<{ [key: string]: ToastContainerOptions }>({});
 
 export const globalCache = reactive({} as { lastUrl: string });
diff --git a/src/store/toastContainers.ts b/src/store/toastContainers.ts
index 5d0abdc..ed50e52 100644
--- a/src/store/toastContainers.ts
+++ b/src/store/toastContainers.ts
@@ -120,6 +120,8 @@ function resolveAppend(content: Content, options = {} as ToastOptions) {
     const rootDom = generateRenderRoot(options);
     const app = createApp(ToastifyContainer, options as Data);
 
+    if (options.useHandler) options.useHandler(app);
+
     app.mount(rootDom);
     cacheRenderInstance(app, rootDom.id);
   }
diff --git a/src/types.ts b/src/types.ts
index ed0c666..a59e9a9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,4 @@
-import type { DefineComponent, VNode } from 'vue';
+import type { App, DefineComponent, VNode } from 'vue';
 
 /**
  * Used when providing custom icon
@@ -165,6 +165,8 @@ export interface Options {
    * @default -
    */
   icon?: IconType;
+  /** app use hander */
+  useHandler?: (app: App<Element>) => void;
 }
 
 /**