Skip to content

Commit

Permalink
feat: support use global components
Browse files Browse the repository at this point in the history
  • Loading branch information
wuchao committed Dec 17, 2024
1 parent 54773b9 commit 357a25b
Show file tree
Hide file tree
Showing 11 changed files with 149 additions and 27 deletions.
36 changes: 18 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,58 +82,58 @@
"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",
"postcss-loader": "^8.1.1",
"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"
},
Expand Down
2 changes: 1 addition & 1 deletion playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 4 additions & 0 deletions playground/src/components/Conditions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -397,6 +397,10 @@ html.dark {
.breadcrumb {
color: #fff;
}
.others-box {
color: #fff;
}
}
</style>
89 changes: 89 additions & 0 deletions playground/src/components/RegisteGloablCode.vue
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 2 additions & 4 deletions playground/src/components/constomCompo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
16 changes: 13 additions & 3 deletions playground/src/main.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
13 changes: 13 additions & 0 deletions playground/src/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -177,5 +186,9 @@ html.dark {
color: #fff;
border-color: #8a8989;
}
h2, h5 {
color: #fff;
}
}
</style>
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
};
Expand Down
2 changes: 2 additions & 0 deletions src/store/globalOptions.ts
Original file line number Diff line number Diff line change
@@ -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 });
2 changes: 2 additions & 0 deletions src/store/toastContainers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
4 changes: 3 additions & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { DefineComponent, VNode } from 'vue';
import type { App, DefineComponent, VNode } from 'vue';

/**
* Used when providing custom icon
Expand Down Expand Up @@ -165,6 +165,8 @@ export interface Options {
* @default -
*/
icon?: IconType;
/** app use hander */
useHandler?: (app: App<Element>) => void;
}

/**
Expand Down

0 comments on commit 357a25b

Please sign in to comment.