@cicctencent/low-code-simulate-base 0.0.0-stage → 1.1.9-beta.5

package/src/event/generateEventHandler.ts

@@ -0,0 +1,162 @@
+import compose from 'koa-compose';
+import type {
+  IEventDescriptor,
+  IConfiguredEvent,
+  Middleware,
+  Next,
+  IConfiguredMiddleware,
+} from '@jt/low-code-core';
+import {
+  eventRegistry,
+  eventMiddlewareRegistry,
+  nativeEventTypeRegistry,
+} from './register';
+
+type PlainObject<T = any> = { [key: string]: T };
+
+/**
+ * 关键：返回事件处理，供组件调用
+ * @public
+ * @param VCComponentInstance - 组件实例
+ * @param events - 事件列表list
+ * @returns 
+ */
+export function generateEventHandlers(
+  VCComponentInstance: any,
+  events: IConfiguredEvent[]
+) {
+  if (!Array.isArray(events)) return { on: {}, nativeOn: {} };
+  const { customEvents, nativeEvents } = transformConfiguredEvents(events);
+  return {
+    on: initEventHandlers(VCComponentInstance, customEvents),
+    nativeOn: initEventHandlers(VCComponentInstance, nativeEvents),
+  };
+}
+
+/**
+ * @public
+ *  初始化事件的处理函数：同一个事件可能存在多个处理函数；  
+*/
+function initEventHandlers(
+  VCComponentInstance: any,
+  eventsMap: PlainObject<IConfiguredEvent[]>
+) {
+  const handlers: any = {};
+  for (const name of Object.keys(eventsMap)) {
+    handlers[name] = ($event: Event) => {
+      const events = eventsMap[name];
+      for (const configuredEvent of events) {
+        executeHandler(VCComponentInstance, configuredEvent, $event);
+      }
+    };
+  }
+  return handlers;
+}
+
+/**
+ * @public
+ * 执行处理程序：
+ * 1. 根据事件配置数据（handler），获取对应的处理程序：先取事件注册表中的handler，其次取组件methods中的handler
+ * 2. 若存在中间件配置，以中间件方式执行程序
+ * */
+function executeHandler(
+  VCComponentInstance: any,
+  configuredEvent: IConfiguredEvent,
+  $event?: Event
+) {
+  const renderedComponentInstance = VCComponentInstance;
+  const {
+    handler: { name: cbName, options },
+    middlewares = [],
+  } = configuredEvent;
+  let _handler: ((...args: any) => any) | null = null;
+  if (eventRegistry[cbName]) {
+    const { handler } = eventRegistry[cbName] as IEventDescriptor;
+    if (typeof handler === 'function') {
+      _handler = async () => {
+        handler(renderedComponentInstance, options, $event);
+      };
+    }
+  } else if (typeof renderedComponentInstance[cbName] === 'function') {
+    _handler = renderedComponentInstance[cbName];
+  }
+  if (_handler !== null) {
+    if (middlewares && middlewares.length > 0) {
+      executeMiddleware(
+        middlewares,
+        renderedComponentInstance,
+        _handler,
+        options
+      );
+    } else {
+      _handler(renderedComponentInstance, options, $event);
+    }
+  }
+}
+
+/**
+ * @public
+ * 使用koa-compose执行中间件
+ * @param middlewares - 中间件列表
+ * @param context - 上下文：组件实例
+ * @param next - 调用下一个中间件函数/最终执行函数
+ * @param options - 事件配置
+ */
+export function executeMiddleware(
+  middlewares: IConfiguredMiddleware[],
+  context: any,
+  next: Next = () => { },
+  options = {}
+) {
+  const middlewareFunctions: Middleware[] = [];
+  middlewares.forEach(mw => {
+    if (typeof mw === 'object' && !mw?.name) {
+      return;
+    }
+    const mwName = typeof mw === 'object' ? mw.name : mw;
+    const mwOptions = typeof mw === 'object' ? mw.options : null;
+    const mwFunc = eventMiddlewareRegistry[mwName]?.middleware;
+    if (typeof mwFunc === 'function') {
+      const func = (context, next) => {
+        const contextProxy = new Proxy(context, {
+          get(target, key) {
+            if (key === 'middlewareOptions' && mwOptions) return mwOptions;
+            else if (key === 'eventOptions') return options;
+            else if (key === 'instance') return target;
+            else return Reflect.get(target, key);
+          },
+        });
+        mwFunc(contextProxy, next);
+      };
+      middlewareFunctions.push(func);
+    }
+  });
+  compose(middlewareFunctions)(context, next);
+}
+
+/**
+ * @public
+ * 转换事件配置数据的数据结构
+ */
+function transformConfiguredEvents(events: IConfiguredEvent[]) {
+  const customEvents: PlainObject<IConfiguredEvent[]> = {};
+  const nativeEvents: PlainObject<IConfiguredEvent[]> = {};
+  for (const eventConfigData of events) {
+    const { type } = eventConfigData;
+    if (type === '') continue;
+    const nativeEentTypes = Object.values(nativeEventTypeRegistry).map(
+      it => it.name
+    );
+    if (nativeEentTypes.includes(type)) {
+      nativeEvents[type] = nativeEvents[type] || [];
+      nativeEvents[type].push(eventConfigData);
+    } else {
+      customEvents[type] = customEvents[type] || [];
+      customEvents[type].push(eventConfigData);
+    }
+  }
+  return {
+    customEvents,
+    nativeEvents,
+  };
+}

package/src/event/generateEventSchema.ts

@@ -0,0 +1,371 @@
+import type {
+  IEventDescriptor,
+  ICustomEventDescriptor,
+  InativeEventTypeDescriptor,
+} from '@jt/low-code-core';
+import { UniqueType } from '@jt/low-code-core';
+
+import {
+  eventRegistry,
+  eventMiddlewareRegistry,
+  nativeEventTypeRegistry,
+} from './register';
+
+/**
+ * @public
+ * 关键：初始化注册表中所有的事件的表单配置 json-schema
+ * @param extraEvent - 添加的事件类型
+ * @param ignoredEvent - 过滤的事件类型
+ * @returns
+ */
+export function initAllEventsFormSchema(
+  extraEvent?: InativeEventTypeDescriptor[],
+  ignoredEvent?: string[]
+) {
+  const eventDescriptors = Object.values(eventRegistry || {});
+  return {
+    type: 'object',
+    properties: {
+      list: generateEventsFormSchema(
+        eventDescriptors,
+        extraEvent,
+        ignoredEvent
+      ),
+    },
+  };
+}
+
+/**
+ *  @public
+ * @param eventDescriptors - eventDescriptors
+ * @param extraEvent - extraEvent 扩展事件
+ * @param ignoredEvent - ignoredEvent 过滤事件
+ * @returns 
+ */
+export function initEventsFormSchema(
+  eventDescriptors: Array<IEventDescriptor | ICustomEventDescriptor>,
+  extraEvent?: InativeEventTypeDescriptor[],
+  ignoredEvent?: string[]
+) {
+  return {
+    type: 'object',
+    properties: {
+      list: generateEventsFormSchema(
+        eventDescriptors,
+        extraEvent,
+        ignoredEvent
+      ),
+    },
+  };
+}
+
+/**
+ * @public
+ * 初始化事件中间件
+ * @returns
+ */
+export function initMiddlewareFormSchema() {
+  return {
+    type: 'object',
+    properties: {
+      middlewares: generateEventMiddlewareFormSchema(),
+    },
+  };
+}
+
+/**
+ * @public
+ * 生成事件json schema
+ * @param eventDescriptors - 事件信息
+ * @param ignoredEvent - 过滤事件
+ * @returns
+ */
+export function generateEventsFormSchema(
+  eventDescriptors: Array<IEventDescriptor | ICustomEventDescriptor>,
+  extraEvent?: InativeEventTypeDescriptor[],
+  ignoredEvent?: string[]
+) {
+  const properties = generateEventProperties(
+    eventDescriptors,
+    extraEvent,
+    ignoredEvent
+  );
+  return {
+    type: 'array',
+    // title: '事件配置',
+    'ui:hidden': properties === null,
+    items: {
+      type: 'object',
+      required: ['type'],
+      properties,
+    },
+  };
+}
+
+/**
+ * @public
+ * 生成事件属性json schema
+ * @param eventDescriptors - 事件描述
+ * @param ignoredEvent - 过滤事件
+ * @returns
+ */
+export function generateEventProperties(
+  eventDescriptors: Array<IEventDescriptor | ICustomEventDescriptor>,
+  extraEvent?: InativeEventTypeDescriptor[],
+  ignoredEvent?: string[]
+) {
+  if (Array.isArray(eventDescriptors) && eventDescriptors.length > 0) {
+    const targetProperties: any = {};
+    const customEventDescriptors: any[] = eventDescriptors.filter(
+      (it: any) => typeof it.handler !== 'function'
+    ) as Array<ICustomEventDescriptor>;
+    const nativeEventDeclarations: any[] = Object.values(
+      nativeEventTypeRegistry
+    );
+    let types = [...nativeEventDeclarations, ...customEventDescriptors];
+    if (ignoredEvent && ignoredEvent.length) {
+      types = types.filter(type => !ignoredEvent.includes(type.name));
+    }
+    if (extraEvent && extraEvent.length) {
+      types.push(...extraEvent);
+    }
+    targetProperties['type'] = {
+      title: '事件类型',
+      enum: types.map(it => it.name),
+      enumNames: types.map(it => it.label),
+    };
+
+    const middlewareConf = generateEventMiddlewareFormSchema();
+    if (middlewareConf !== null) {
+      targetProperties['middlewares'] = middlewareConf;
+    }
+    // 获取name配置
+    const nameConfig = getEventHandleName(eventDescriptors);
+    // 以下是新代码
+    targetProperties['handler'] = {
+      title: '事件名称',
+      type: 'object',
+      'x-reactions': {
+        dependencies: ['type'],
+        fulfill: {
+          state: {
+            // 事件类型变化,将事件名称清空
+            value: '{{$self.value = {}}}',
+          },
+        },
+      },
+      // oneOf: options,
+      properties: {
+        name: nameConfig,
+        options: getEventOptions(eventDescriptors, nameConfig),
+      },
+    };
+    return targetProperties;
+  }
+  return null;
+}
+
+/**
+ * @public
+ *  获取事件name
+ * @param data - 事件原始数据
+ * @returns
+ */
+function getEventHandleName(data) {
+  const enums = [];
+  data.forEach(it => {
+    const name = getEventNameByDescriptor(it);
+    enums.push({
+      value: name,
+      label: it.title,
+      isNoLogin: it.isNoLogin ?? false,
+      eventType: it.eventType,
+    });
+  });
+
+  return {
+    type: 'string',
+    title: '事件名称',
+    enum: enums,
+    required: true,
+    'x-reactions': {
+      dependencies: ['..type'],
+      fulfill: {
+        schema: {
+          'x-component-props.options': '{{filterOptions($deps[0])}}',
+        },
+      },
+    },
+  };
+}
+
+/**
+ * @public
+ *  获取事件options组
+ * @param data - 事件原始数据
+ * @param nameConfig - 根据name配置设置联动
+ * @returns
+ */
+function getEventOptions(data, nameConfig) {
+  const propertiesGroups = {};
+  data.forEach((it, index) => {
+    const desc = getEventOptionsPropertiesByDescriptor(it);
+    propertiesGroups[`${nameConfig.enum[index].value}`] = {
+      type: 'object',
+      properties: Object.assign(
+        {
+          buryReportName: {
+            default: '',
+            title: '埋点名',
+            description:
+              '输入埋点名，系统将补全埋点信息：例 运营.可视化创造.输入埋点名.点击',
+            type: 'string',
+            required: true,
+            unique: UniqueType.page,
+            'x-validator': {
+              asyncValidator: true,
+              type: 'buryReportName',
+            },
+            'x-component-props': {
+              description:
+                '埋点名称应为：大/小写字母、数字、中文、横杠、下划线及其组合且不可重复',
+            },
+          },
+        },
+        desc
+      ),
+    };
+  });
+  return propertiesGroups;
+}
+
+/**
+ * @public
+ * 生成中间件json schema
+ * @returns
+ */
+function generateEventMiddlewareFormSchema() {
+  const eventMiddlewareDescriptors = Object.values(eventMiddlewareRegistry);
+  if (eventMiddlewareDescriptors.length === 0) return null;
+  const middlewareDes = [];
+  return {
+    title: '前置执行程序',
+    type: 'array',
+    'x-component': 'ArrayItems',
+    'x-decorator-props': {
+      layout: 'vertical',
+    },
+    items: {
+      type: 'object',
+      properties: {
+        _btn: {
+          type: 'void',
+          'x-component': 'Row',
+          properties: {
+            remove: {
+              type: 'void',
+              'x-component': 'ArrayItems.Remove',
+            },
+            sort: {
+              type: 'void',
+              'x-component': 'ArrayItems.SortHandle',
+            },
+          },
+        },
+        name: {
+          title: '前置执行程序',
+          type: 'string',
+          'x-component-props': {
+            placeholder: '请添加(执行顺序为列表顺序，可拖动修改)',
+          },
+          enum: getMiddlewareNameConfig(eventMiddlewareDescriptors),
+          'x-reactions': '{{middlewareFilter}}',
+        },
+        options: {
+          type: 'object',
+          properties: getMiddlewareOptionsConfig(eventMiddlewareDescriptors),
+        },
+      },
+      'x-data': {
+        addButtonTitle: '添加前置执行程序配置组',
+        addButtonType: 'primary',
+        addButtonSize: 'small',
+        addButtonPlain: true,
+      },
+    },
+  };
+}
+
+/**
+ * @public
+ *  获取中间件name配置
+ */
+function getMiddlewareNameConfig(eventMiddlewareDescriptors) {
+  return eventMiddlewareDescriptors.map(it => {
+    return {
+      label: it.title,
+      value: it.name || it.middleware.name,
+      isNoLogin: it?.isNoLogin ?? false,
+    };
+  });
+}
+
+/**
+ * @public
+ *  获取中间件options 参数
+ * @param eventMiddlewareDescriptors - 中间件内容
+ * @returns
+ */
+function getMiddlewareOptionsConfig(eventMiddlewareDescriptors: any[]) {
+  const res = {};
+  eventMiddlewareDescriptors.forEach((it, index) => {
+    res['_' + it.name] = {
+      type: 'void',
+      'x-reactions': {
+        dependencies: ['..name'],
+        fulfill: {
+          schema: {
+            'x-visible': `{{$deps[0] == '${it.name}' }}`,
+          },
+        },
+      },
+      properties: it.parametersDescriptor,
+    };
+  });
+  return { ...res };
+}
+
+/**
+ * @public
+ * @param descriptor - 描述
+ * @returns 
+ */
+function getEventNameByDescriptor(
+  descriptor: IEventDescriptor | ICustomEventDescriptor | any
+) {
+  return (
+    descriptor['name'] ||
+    (typeof descriptor['handler'] === 'string'
+      ? descriptor['handler']
+      : typeof descriptor['handler'] === 'function'
+      ? descriptor['handler'].name
+      : descriptor['type'])
+  );
+}
+
+/**
+ * @public
+ * @param descriptor - 描述
+ * @returns 
+ */
+function getEventOptionsPropertiesByDescriptor(
+  descriptor: IEventDescriptor | ICustomEventDescriptor
+) {
+  const name = getEventNameByDescriptor(descriptor);
+  return (
+    (eventRegistry &&
+      eventRegistry[name] &&
+      eventRegistry[name].parametersDescriptor) ||
+    {}
+  );
+}

package/src/event/register.ts

@@ -0,0 +1,181 @@
+import type {
+  IEventDescriptor,
+  IEventMiddlewareDescriptor,
+  InativeEventTypeDescriptor,
+} from '@jt/low-code-core';
+type IValidateRules = { [key: string]: { required?: boolean; type: string } };
+/**
+ * @public
+ * 注册表管理
+ * 1. 初始化注册表；
+ * 2. 提供注册校验功能；
+ * 3. 提供单个注册和批量注册功能。
+ */
+class RegistryManager<Descriptor> {
+  /**
+   * @public
+   * 注册表
+   */
+  registry: { [key: string]: Descriptor } = {};
+  /**
+   * @public
+   * 注册的内容名称
+   */
+  registeredContent: string = '';
+  /**
+   * @public
+   */
+  invaildNames: string[] = [];
+  /**
+   * @public
+   */
+  vaildateRules: IValidateRules = {};
+
+  /**
+   * @public
+   * @param content - content
+   * @param vaildateRules - vaildateRules
+   */
+  constructor(content: string, vaildateRules: IValidateRules) {
+    this.registeredContent = content;
+    this.registry = window[`${this.registeredContent}Registry`] =
+      window[`${this.registeredContent}Registry`] || {};
+    this.vaildateRules = vaildateRules;
+  }
+
+  /**
+   *  @public
+   */
+  get errMsgPrefix() {
+    return `[${this.registeredContent} ${name}）registration failure]:`;
+  }
+
+  /**
+   * @public
+   * 批量注册
+   */
+  batchRegister(descriptors: Descriptor[]) {
+    for (const item of descriptors) {
+      this.register(item);
+    }
+    return this.registry;
+  }
+
+  /**
+   * 注册函数：往注册表添加内容，并校验内容描述
+   * @public
+   */
+  register(descriptor: Descriptor) {
+    if (!this.verifyDescriptor(descriptor)) return {};
+    //@ts-ignore
+    const name = descriptor['name'];
+    if (this.registry[name]) {
+      console.error(`${this.errMsgPrefix} name conflict。`);
+      return {};
+    }
+    this.registry[name] = descriptor;
+    return this.registry;
+  }
+
+  /** 
+   * @public
+   * 校验注册内容配置描述：
+   * 1. 检查“内容描述”是否符合规范；
+   * 2. 内容项命名不可相同
+   */
+  verifyDescriptor(descriptor: Descriptor): boolean {
+    const verifiedMsgs: string[] = [];
+    const getTypeCheckMsg = (key: string, value: any, expectedType: string) =>
+      `Parameter '${key}' is invalid, Expected ${expectedType}, but got ${typeof value}`;
+
+    for (const [key, rule] of Object.entries(this.vaildateRules)) {
+      const { required = false, type } = rule;
+      // @ts-ignore
+      const value = descriptor[key];
+      if (typeof value !== type) {
+        verifiedMsgs.push(getTypeCheckMsg(key, value, type));
+      }
+      if (required && !value) {
+        verifiedMsgs.push(`Parameter '${key}'' is required`);
+      }
+    }
+
+    if (verifiedMsgs.length > 0) {
+      console.error(this.errMsgPrefix, verifiedMsgs.join('. '), descriptor);
+      return false;
+    }
+    return true;
+  }
+}
+
+const eventRegister = new RegistryManager<IEventDescriptor>('event', {
+  handler: { required: true, type: 'function' },
+  name: { required: true, type: 'string' },
+});
+/**
+ * @public
+ *  事件注册表
+ */
+export const eventRegistry = eventRegister.registry;
+
+/**
+ * @public
+ * 批量注册事件
+ */
+export const batchRegisterEvents = (descriptors: IEventDescriptor[]) =>
+  eventRegister.batchRegister(descriptors);
+
+/**
+ * @public
+ * 注册事件：
+*/
+export const registerEvent = (descriptor: IEventDescriptor) =>
+  eventRegister.register(descriptor);
+
+const middlewareRegister = new RegistryManager<IEventMiddlewareDescriptor>(
+  'middleware',
+  {
+    middleware: { required: true, type: 'function' },
+    name: { required: true, type: 'string' },
+  }
+);
+/**
+ * 事件中间件注册表
+ * @public
+ */
+export const eventMiddlewareRegistry = middlewareRegister.registry;
+/**
+ * @public
+ * 批量注册事件中间件
+ */
+export const batchRegisterEventMiddlewares = (
+  descriptors: IEventMiddlewareDescriptor[]
+) => middlewareRegister.batchRegister(descriptors);
+
+/** 
+ * 注册事件中间件：
+ * @public
+*/
+export const registerEventMiddleware = (
+  descriptor: IEventMiddlewareDescriptor
+) => middlewareRegister.register(descriptor);
+
+const nativeEventTypeRegister = new RegistryManager<InativeEventTypeDescriptor>(
+  'nativeEventType',
+  {
+    name: { required: true, type: 'string' },
+    label: { required: true, type: 'string' },
+  }
+);
+
+/**
+ * @public
+ */
+export const nativeEventTypeRegistry = nativeEventTypeRegister.registry;
+/**
+ * @public
+ * 批量注册支持的原生事件类型
+ */
+export const batchRegisterNativeEventTypes = (
+  descriptors: InativeEventTypeDescriptor[]
+) => nativeEventTypeRegister.batchRegister(descriptors);