@mundoit-lib/plugin-vue-event 1.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -0
- package/dist/eventBus.cjs +114 -36
- package/dist/eventBus.d.cts +53 -14
- package/dist/eventBus.d.ts +53 -14
- package/dist/eventBus.js +84 -31
- package/dist/index.cjs +11 -91
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +4 -82
- package/dist/plugin.cjs +36 -88
- package/dist/plugin.d.cts +24 -9
- package/dist/plugin.d.ts +24 -9
- package/dist/plugin.js +34 -82
- package/dist/useEvents.cjs +51 -0
- package/dist/useEvents.d.cts +11 -0
- package/dist/useEvents.d.ts +11 -0
- package/dist/useEvents.js +50 -0
- package/package.json +80 -59
- package/src/eventBus.ts +0 -72
- package/src/index.ts +0 -3
- package/src/plugin.ts +0 -91
package/package.json
CHANGED
|
@@ -1,81 +1,102 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mundoit-lib/plugin-vue-event",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "Vue 3
|
|
3
|
+
"version": "2.0.3",
|
|
4
|
+
"description": "Plugin de Vue 3 con un bus de eventos global basado en mitt: $events, la opción de componente events: y useEvents() con auto-desregistro, con eventos tipados por module augmentation.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"custom-events",
|
|
7
|
+
"event-bus",
|
|
8
|
+
"event-system",
|
|
9
|
+
"events",
|
|
10
|
+
"frontend",
|
|
11
|
+
"javascript",
|
|
12
|
+
"vue",
|
|
13
|
+
"vue-events",
|
|
14
|
+
"vue-global-events",
|
|
15
|
+
"vue-library",
|
|
16
|
+
"vue-plugin",
|
|
17
|
+
"vue-plugin-event-bus",
|
|
18
|
+
"vue-plugin-events",
|
|
19
|
+
"vue3"
|
|
20
|
+
],
|
|
21
|
+
"homepage": "https://github.com/mundoit-lib/monorepo/tree/main/packages/plugin-vue-event#readme",
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": "https://github.com/mundoit-lib/monorepo/issues"
|
|
24
|
+
},
|
|
5
25
|
"license": "MIT",
|
|
26
|
+
"author": "@mundoit-lib",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/mundoit-lib/monorepo.git",
|
|
30
|
+
"directory": "packages/plugin-vue-event"
|
|
31
|
+
},
|
|
32
|
+
"files": [
|
|
33
|
+
"dist",
|
|
34
|
+
"README.md"
|
|
35
|
+
],
|
|
6
36
|
"type": "module",
|
|
37
|
+
"sideEffects": false,
|
|
7
38
|
"main": "./dist/index.cjs",
|
|
8
39
|
"module": "./dist/index.js",
|
|
9
|
-
"types": "./dist/index.d.
|
|
40
|
+
"types": "./dist/index.d.cts",
|
|
10
41
|
"exports": {
|
|
11
42
|
".": {
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
43
|
+
"import": {
|
|
44
|
+
"types": "./dist/index.d.ts",
|
|
45
|
+
"default": "./dist/index.js"
|
|
46
|
+
},
|
|
47
|
+
"require": {
|
|
48
|
+
"types": "./dist/index.d.cts",
|
|
49
|
+
"default": "./dist/index.cjs"
|
|
50
|
+
}
|
|
15
51
|
},
|
|
16
52
|
"./plugin": {
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
53
|
+
"import": {
|
|
54
|
+
"types": "./dist/plugin.d.ts",
|
|
55
|
+
"default": "./dist/plugin.js"
|
|
56
|
+
},
|
|
57
|
+
"require": {
|
|
58
|
+
"types": "./dist/plugin.d.cts",
|
|
59
|
+
"default": "./dist/plugin.cjs"
|
|
60
|
+
}
|
|
20
61
|
},
|
|
21
62
|
"./eventBus": {
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
63
|
+
"import": {
|
|
64
|
+
"types": "./dist/eventBus.d.ts",
|
|
65
|
+
"default": "./dist/eventBus.js"
|
|
66
|
+
},
|
|
67
|
+
"require": {
|
|
68
|
+
"types": "./dist/eventBus.d.cts",
|
|
69
|
+
"default": "./dist/eventBus.cjs"
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
"./useEvents": {
|
|
73
|
+
"import": {
|
|
74
|
+
"types": "./dist/useEvents.d.ts",
|
|
75
|
+
"default": "./dist/useEvents.js"
|
|
76
|
+
},
|
|
77
|
+
"require": {
|
|
78
|
+
"types": "./dist/useEvents.d.cts",
|
|
79
|
+
"default": "./dist/useEvents.cjs"
|
|
80
|
+
}
|
|
25
81
|
}
|
|
26
82
|
},
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"src"
|
|
30
|
-
],
|
|
31
|
-
"repository": {
|
|
32
|
-
"type": "git",
|
|
33
|
-
"url": "https://github.com/mundoit-lib/plugin-vue-event"
|
|
34
|
-
},
|
|
35
|
-
"bugs": {
|
|
36
|
-
"url": "https://github.com/mundoit-lib/plugin-vue-event/issues"
|
|
37
|
-
},
|
|
38
|
-
"homepage": "https://github.com/mundoit-lib/plugin-vue-event",
|
|
39
|
-
"keywords": [
|
|
40
|
-
"vue",
|
|
41
|
-
"vue3",
|
|
42
|
-
"vue2",
|
|
43
|
-
"vue-plugin",
|
|
44
|
-
"events",
|
|
45
|
-
"event-bus",
|
|
46
|
-
"custom-events",
|
|
47
|
-
"vue-global-events",
|
|
48
|
-
"vue-plugin-event-bus",
|
|
49
|
-
"vue-plugin-events",
|
|
50
|
-
"vue-events",
|
|
51
|
-
"javascript",
|
|
52
|
-
"event-system",
|
|
53
|
-
"frontend",
|
|
54
|
-
"vue-library"
|
|
55
|
-
],
|
|
56
|
-
"author": "@mundoit-lib",
|
|
57
|
-
"scripts": {
|
|
58
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
59
|
-
"build": "tsup",
|
|
60
|
-
"clean": "rm -rf dist && rm -rf node_modules",
|
|
61
|
-
"postinstall": "npx vue-demi-fix"
|
|
83
|
+
"publishConfig": {
|
|
84
|
+
"access": "public"
|
|
62
85
|
},
|
|
63
86
|
"dependencies": {
|
|
64
|
-
"mitt": "^3.0.1"
|
|
65
|
-
"vue-demi": "0.14.10"
|
|
87
|
+
"mitt": "^3.0.1"
|
|
66
88
|
},
|
|
67
89
|
"devDependencies": {
|
|
68
|
-
"@
|
|
69
|
-
"
|
|
70
|
-
"typescript": "5.9.3"
|
|
90
|
+
"@mundoit-lib/tsconfig": "0.0.0",
|
|
91
|
+
"@mundoit-lib/tsdown-config": "0.0.0"
|
|
71
92
|
},
|
|
72
93
|
"peerDependencies": {
|
|
73
|
-
"
|
|
74
|
-
"vue": "^2.0.0 || >=3.0.0"
|
|
94
|
+
"vue": "^3.3.0"
|
|
75
95
|
},
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
96
|
+
"scripts": {
|
|
97
|
+
"test": "vitest run --config ../../vitest.config.ts",
|
|
98
|
+
"build": "tsdown",
|
|
99
|
+
"typecheck": "tsc --noEmit",
|
|
100
|
+
"check:exports": "publint && attw --pack . --profile node16"
|
|
80
101
|
}
|
|
81
|
-
}
|
|
102
|
+
}
|
package/src/eventBus.ts
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import mitt, { type Emitter, type EventType, type Handler } from 'mitt';
|
|
2
|
-
|
|
3
|
-
// Define el tipo de eventos de tu aplicación
|
|
4
|
-
// Puedes extender este tipo según tus necesidades
|
|
5
|
-
export type EventBusEvents = Record<EventType, any>;
|
|
6
|
-
|
|
7
|
-
// Tipos para los listeners
|
|
8
|
-
type EventListener<T = any> = (args: T) => void;
|
|
9
|
-
type UnwrappedHandler<T = any> = (...args: any[]) => T;
|
|
10
|
-
|
|
11
|
-
// Exportamos una única instancia del event bus
|
|
12
|
-
export const eventBus: Emitter<EventBusEvents> = mitt<EventBusEvents>();
|
|
13
|
-
|
|
14
|
-
// Interface para el retorno de useEventBus
|
|
15
|
-
export interface EventBusInstance {
|
|
16
|
-
emit<K extends keyof EventBusEvents>(event: K, ...args: any[]): void;
|
|
17
|
-
on<K extends keyof EventBusEvents>(
|
|
18
|
-
event: K,
|
|
19
|
-
callback: UnwrappedHandler
|
|
20
|
-
): Handler<EventBusEvents[K]>;
|
|
21
|
-
fire<K extends keyof EventBusEvents>(event: K, ...args: any[]): void;
|
|
22
|
-
off<K extends keyof EventBusEvents>(
|
|
23
|
-
event: K,
|
|
24
|
-
listener: Handler<EventBusEvents[K]>
|
|
25
|
-
): void;
|
|
26
|
-
once<K extends keyof EventBusEvents>(
|
|
27
|
-
event: K,
|
|
28
|
-
callback: UnwrappedHandler
|
|
29
|
-
): Handler<EventBusEvents[K]>;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// Exportamos helpers para usar en composables o archivos JS/TS
|
|
33
|
-
export const useEventBus = (): EventBusInstance => {
|
|
34
|
-
return {
|
|
35
|
-
emit<K extends keyof EventBusEvents>(event: K, ...args: any[]): void {
|
|
36
|
-
eventBus.emit(event, args);
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
on<K extends keyof EventBusEvents>(
|
|
40
|
-
event: K,
|
|
41
|
-
callback: UnwrappedHandler
|
|
42
|
-
): Handler<EventBusEvents[K]> {
|
|
43
|
-
const listener: Handler<EventBusEvents[K]> = (args: any) => callback(...args);
|
|
44
|
-
eventBus.on(event, listener);
|
|
45
|
-
return listener;
|
|
46
|
-
},
|
|
47
|
-
|
|
48
|
-
fire<K extends keyof EventBusEvents>(event: K, ...args: any[]): void {
|
|
49
|
-
eventBus.emit(event, args);
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
off<K extends keyof EventBusEvents>(
|
|
53
|
-
event: K,
|
|
54
|
-
listener: Handler<EventBusEvents[K]>
|
|
55
|
-
): void {
|
|
56
|
-
eventBus.off(event, listener);
|
|
57
|
-
},
|
|
58
|
-
|
|
59
|
-
once<K extends keyof EventBusEvents>(
|
|
60
|
-
event: K,
|
|
61
|
-
callback: UnwrappedHandler
|
|
62
|
-
): Handler<EventBusEvents[K]> {
|
|
63
|
-
const listener: Handler<EventBusEvents[K]> = (args: any) => callback(...args);
|
|
64
|
-
const wrappedListener: Handler<EventBusEvents[K]> = (args: any) => {
|
|
65
|
-
listener(args);
|
|
66
|
-
eventBus.off(event, wrappedListener);
|
|
67
|
-
};
|
|
68
|
-
eventBus.on(event, wrappedListener);
|
|
69
|
-
return wrappedListener;
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
};
|
package/src/index.ts
DELETED
package/src/plugin.ts
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { isVue2, isVue3 } from 'vue-demi';
|
|
2
|
-
import type { App, ComponentOptions } from 'vue-demi';
|
|
3
|
-
import { useEventBus, type EventBusInstance } from './eventBus';
|
|
4
|
-
|
|
5
|
-
// Tipos para Vue 2
|
|
6
|
-
interface Vue2Constructor {
|
|
7
|
-
prototype: any;
|
|
8
|
-
mixin: (options: any) => void;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
// Tipos para las opciones de componentes extendidas
|
|
12
|
-
interface ComponentWithEvents extends ComponentOptions {
|
|
13
|
-
events?: Record<string, (...args: any[]) => void>;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// Tipo interno para los listeners almacenados
|
|
17
|
-
interface StoredListener {
|
|
18
|
-
event: string;
|
|
19
|
-
listener: any;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// Extensión de tipos para Vue 2
|
|
23
|
-
interface Vue2Instance {
|
|
24
|
-
$options: ComponentWithEvents;
|
|
25
|
-
_eventListeners?: StoredListener[];
|
|
26
|
-
$events?: EventBusInstance;
|
|
27
|
-
}
|
|
28
|
-
// Sobrecarga de tipos para el plugin
|
|
29
|
-
function plugin(app: App): void;
|
|
30
|
-
function plugin(Vue: Vue2Constructor): void;
|
|
31
|
-
function plugin(VueOrApp: App | Vue2Constructor): void {
|
|
32
|
-
const bus = useEventBus();
|
|
33
|
-
|
|
34
|
-
if (isVue3) {
|
|
35
|
-
// Vue 3
|
|
36
|
-
const app = VueOrApp as App;
|
|
37
|
-
app.config.globalProperties.$events = bus;
|
|
38
|
-
|
|
39
|
-
app.mixin({
|
|
40
|
-
beforeCreate(this: any) {
|
|
41
|
-
if (typeof this.$options.events !== 'object') return;
|
|
42
|
-
this._eventListeners = [] as StoredListener[];
|
|
43
|
-
|
|
44
|
-
for (const [event, handler] of Object.entries(this.$options.events)) {
|
|
45
|
-
// @ts-ignore
|
|
46
|
-
const boundHandler = handler.bind(this);
|
|
47
|
-
const listener = bus.on(event, boundHandler);
|
|
48
|
-
this._eventListeners.push({ event, listener });
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
beforeUnmount(this: any) {
|
|
52
|
-
if (!this._eventListeners) return;
|
|
53
|
-
|
|
54
|
-
for (const { event, listener } of this._eventListeners as StoredListener[]) {
|
|
55
|
-
bus.off(event, listener);
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
});
|
|
59
|
-
} else if (isVue2) {
|
|
60
|
-
// Vue 2
|
|
61
|
-
const Vue = VueOrApp as Vue2Constructor;
|
|
62
|
-
|
|
63
|
-
Object.defineProperty(Vue.prototype, '$events', {
|
|
64
|
-
get() {
|
|
65
|
-
return bus;
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
Vue.mixin({
|
|
70
|
-
beforeCreate(this: Vue2Instance) {
|
|
71
|
-
if (typeof this.$options.events !== 'object') return;
|
|
72
|
-
this._eventListeners = [];
|
|
73
|
-
|
|
74
|
-
for (const [event, handler] of Object.entries(this.$options.events)) {
|
|
75
|
-
const boundHandler = handler.bind(this);
|
|
76
|
-
const listener = bus.on(event, boundHandler);
|
|
77
|
-
this._eventListeners.push({ event, listener });
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
beforeDestroy(this: Vue2Instance) {
|
|
81
|
-
if (!this._eventListeners) return;
|
|
82
|
-
|
|
83
|
-
for (const { event, listener } of this._eventListeners) {
|
|
84
|
-
bus.off(event, listener);
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
export default plugin;
|