From 4957c54c5eefc96a4190089af5dda29db17b52df Mon Sep 17 00:00:00 2001 From: run-nan <1608272694@qq.com> Date: Sun, 5 Mar 2023 02:27:10 +0800 Subject: [PATCH] feat(@rallie/block): bind the trigger name of event and methods on the `this` object of the listener --- packages/block/src/base-block.ts | 16 ++++++++------ packages/block/src/created-block.ts | 8 +++---- packages/block/src/utils.ts | 27 +++++++++++++++++++++-- packages/block/test/utils.test.ts | 34 +++++++++++++++++++++++++++++ playground/apps/host-app/app.ts | 3 ++- 5 files changed, 74 insertions(+), 14 deletions(-) diff --git a/packages/block/src/base-block.ts b/packages/block/src/base-block.ts index 8afd5d9..03c1ecc 100644 --- a/packages/block/src/base-block.ts +++ b/packages/block/src/base-block.ts @@ -1,10 +1,10 @@ import type { Socket } from '@rallie/core' -import { constant, errors } from './utils' +import { constant, errors, enhancedEventsTrigger, enhancedEventsListener } from './utils' export type BlockType = { state?: Record - events?: Record - methods?: Record + events?: Record any> + methods?: Record any> } export class BaseBlock { @@ -15,11 +15,13 @@ export class BaseBlock { #socket: Socket - constructor(name: string, socket: Socket) { + constructor(name: string, triggerName: string, socket: Socket) { this.name = name this.#socket = socket - this.events = this.#socket.createBroadcaster() - this.methods = this.#socket.createUnicaster() + const broadcaster = this.#socket.createBroadcaster() + const unicaster = this.#socket.createUnicaster() + this.events = enhancedEventsTrigger(broadcaster, triggerName) as T['events'] + this.methods = enhancedEventsTrigger(unicaster, triggerName) as T['methods'] Reflect.defineProperty(this, 'state', { get: () => this.#socket.getState(constant.stateNamespace(this.name)), set: () => { @@ -45,6 +47,6 @@ export class BaseBlock { } public listenEvents(events: Partial) { - return this.#socket.onBroadcast(events) + return this.#socket.onBroadcast(enhancedEventsListener(events)) } } diff --git a/packages/block/src/created-block.ts b/packages/block/src/created-block.ts index 68b53ef..0af93fa 100644 --- a/packages/block/src/created-block.ts +++ b/packages/block/src/created-block.ts @@ -1,5 +1,5 @@ import { Bus, Socket, MiddlewareFnType, ConfType, touchBus, App } from '@rallie/core' -import { constant } from './utils' +import { constant, enhancedEventsListener } from './utils' import { BaseBlock, type BlockType } from './base-block' export interface Env { @@ -22,7 +22,7 @@ export class CreatedBlock extends BaseBlock { constructor(name: string, globalBus: Bus, globalSocket: Socket, isEntry: boolean) { const [bus] = touchBus(constant.privateBus(name)) const socket = bus.createSocket() - super(name, socket) + super(name, name, socket) this.#socket = socket this.#globalBus = globalBus this.#globalSocket = globalSocket @@ -36,7 +36,7 @@ export class CreatedBlock extends BaseBlock { } public addMethods(methods: Partial) { - return this.#socket.onUnicast(methods) + return this.#socket.onUnicast(enhancedEventsListener(methods)) } public relyOn(dependencies: string[]) { @@ -58,7 +58,7 @@ export class CreatedBlock extends BaseBlock { if (!this.#connectedBlocks[name]) { const [bus] = touchBus(constant.privateBus(name)) const socket = bus.createSocket() - this.#connectedBlocks[name] = new BaseBlock

(name, socket) + this.#connectedBlocks[name] = new BaseBlock

(name, this.name, socket) } return this.#connectedBlocks[name] as BaseBlock

} diff --git a/packages/block/src/utils.ts b/packages/block/src/utils.ts index 593f7bb..7a07954 100644 --- a/packages/block/src/utils.ts +++ b/packages/block/src/utils.ts @@ -1,5 +1,3 @@ -export type ConstraintedType = T extends P ? T : Default - export const constant = { privateBus: (blockName: string) => `${blockName}.bus`, stateNamespace: (blockName: string) => `${blockName}.state`, @@ -19,3 +17,28 @@ export const errors = { message(`the block ${blockName} is already registered before, please rename your block`), stateIsReadonly: (blockName: string) => message(`the state of ${blockName} is readonly`), } + +export const enhancedEventsTrigger = >( + events: T, + trigger: string, +) => { + return new Proxy(events, { + get: (target, eventName) => { + return (...args: any[]) => { + const fn = target[eventName as string] + return fn(args, trigger) + } + }, + set: () => false, + }) +} + +export const enhancedEventsListener = >(listeners: T) => { + const result: Record = {} + Object.entries(listeners).forEach(([eventName, listener]) => { + result[eventName] = (args: any[], trigger: string) => { + return listener.call({ trigger }, ...args) + } + }) + return result +} diff --git a/packages/block/test/utils.test.ts b/packages/block/test/utils.test.ts index 8ee2902..ceb2e45 100644 --- a/packages/block/test/utils.test.ts +++ b/packages/block/test/utils.test.ts @@ -24,4 +24,38 @@ describe('Test errors and warnings', () => { } }).toThrowError(errors.stateIsReadonly('case2')) }) + + test('#case3: trigger', () => { + let normalFuncMethodTrigger = '' + let normalFuncEventTrigger = '' + type BlockType = { + methods: { + normalFunc: () => void + } + events: { + normalFunc: () => void + } + } + const block = createBlock('case3') + block.addMethods({ + normalFunc(this: { trigger: string }) { + normalFuncMethodTrigger = this.trigger + }, + }) + block.listenEvents({ + normalFunc(this: { trigger: string }) { + normalFuncEventTrigger = this.trigger + }, + }) + const tester = createBlock('tester') + const connectedBlock = tester.connect(block.name) + connectedBlock.methods.normalFunc() + expect(normalFuncMethodTrigger).toEqual('tester') + connectedBlock.events.normalFunc() + expect(normalFuncEventTrigger).toEqual('tester') + block.methods.normalFunc() + expect(normalFuncMethodTrigger).toEqual('case3') + block.events.normalFunc() + expect(normalFuncEventTrigger).toEqual('case3') + }) }) diff --git a/playground/apps/host-app/app.ts b/playground/apps/host-app/app.ts index e4ea607..dc4f5a6 100644 --- a/playground/apps/host-app/app.ts +++ b/playground/apps/host-app/app.ts @@ -5,7 +5,8 @@ import { hostApp } from './block' import { NButton, create } from 'naive-ui' hostApp.addMethods({ - useNaiveUI: () => { + useNaiveUI(this: { trigger: string }) { + console.log(this.trigger) const naive = create({ components: [NButton], })