feat(Runtime): add debug info

packages/runtime/src/components/_internal/ImplWrapper/hooks/useGlobalHandlerMap.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
+import { DebugLoggerType } from '../../../../services/debug';
 import { ImplWrapperProps } from '../../../../types';
 
 export function useGlobalHandlerMap(props: ImplWrapperProps) {
   const { component: c, services } = props;
   const { apiService, globalHandlerMap } = services;
 
-  
   useEffect(() => {
     if (!globalHandlerMap.has(c.id)) {
       globalHandlerMap.set(c.id, {});
@@ -21,6 +21,14 @@ export function useGlobalHandlerMap(props: ImplWrapperProps) {
         // maybe log?
         return;
       }
+      // Logging event-triggered debug messages
+      apiService.send('debug', {
+        type: DebugLoggerType.TRIGGER_EVENT,
+        componentId: s.componentId,
+        name: s.name,
+        parameters: s.parameters,
+        methodType: 'uiMethod',
+      });
       handlerMap[s.name](s.parameters);
     };
 

packages/runtime/src/components/_internal/ImplWrapper/hooks/useRuntimeFunctions.ts

@@ -3,6 +3,7 @@ import { RuntimeTraitSchema } from '@sunmao-ui/core';
 import { ImplWrapperProps } from '../../../../types';
 import { merge } from 'lodash';
 import { HandlerMap } from '../../../../services/handler';
+import { DebugLoggerType } from '../../../../services/debug';
 
 export function useRuntimeFunctions(props: ImplWrapperProps) {
   const { component: c, services, slotContext } = props;
@@ -12,8 +13,14 @@ export function useRuntimeFunctions(props: ImplWrapperProps) {
   const mergeState = useCallback(
     (partial: any) => {
       stateManager.store[c.id] = { ...stateManager.store[c.id], ...partial };
+      // Logging state change debug messages
+      services.apiService.send('debug', {
+        type: DebugLoggerType.MERGE_STATE,
+        id: c.id,
+        param: partial,
+      });
     },
-    [c.id, stateManager.store]
+    [c.id, services.apiService, stateManager.store]
   );
   const subscribeMethods = useCallback(
     (map: HandlerMap) => {

packages/runtime/src/index.ts

@@ -19,6 +19,9 @@ export type SunmaoUIRuntimeProps = {
   dependencies?: Record<string, any>;
   hooks?: AppHooks;
   isInEditor?: boolean;
+  debugHandler?: {
+    onDebug: (currentState: Record<string, any>, message: Record<string, any>) => void;
+  };
 };
 
 export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) {
@@ -43,6 +46,10 @@ export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) {
     registry.installLib(lib);
   });
 
+  apiService.on('debug', params => {
+    props.debugHandler?.onDebug(stateManager.store, params);
+  });
+
   return {
     App: genApp(
       {

packages/runtime/src/services/UtilMethodManager.ts

@@ -1,6 +1,7 @@
 import { GLOBAL_MODULE_ID, GLOBAL_UTIL_METHOD_ID } from '../constants';
 import { ApiService } from './apiService';
 import { ImplementedUtilMethod, UIServices } from '../types';
+import { DebugLoggerType } from './debug';
 
 export class UtilMethodManager {
   constructor(private apiService: ApiService) {
@@ -13,6 +14,13 @@ export class UtilMethodManager {
         componentId === GLOBAL_UTIL_METHOD_ID &&
         name === `${utilMethod.version}/${utilMethod.metadata.name}`
       ) {
+        this.apiService.send('debug', {
+          type: DebugLoggerType.TRIGGER_EVENT,
+          id: componentId,
+          methodType: 'uiMethod',
+          name,
+          parameters,
+        });
         utilMethod.impl(parameters, services);
       }
     });
@@ -23,6 +31,13 @@ export class UtilMethodManager {
       switch (componentId) {
         // handler as module event
         case GLOBAL_MODULE_ID:
+          this.apiService.send('debug', {
+            type: DebugLoggerType.TRIGGER_EVENT,
+            id: componentId,
+            methodType: 'uiMethod',
+            name,
+            parameters,
+          });
           this.apiService.send('moduleEvent', {
             fromId: parameters.moduleId,
             eventType: name,

packages/runtime/src/services/apiService.ts

@@ -1,4 +1,5 @@
 import mitt from 'mitt';
+import { DebugLoggerType } from './debug';
 export type ApiService = ReturnType<typeof initApiService>;
 
 export function initApiService() {
@@ -16,6 +17,12 @@ export function initApiService() {
       fromId: string;
       eventType: string;
     };
+    /**
+     * @description: record debug info
+     */
+    debug: {
+      type: DebugLoggerType;
+    } & Record<string, any>;
   }>();
   const apiService = {
     on: emitter.on,

packages/runtime/src/services/debug.ts

@@ -0,0 +1,4 @@
+export const enum DebugLoggerType {
+  MERGE_STATE = 'Merge State',
+  TRIGGER_EVENT = 'Trigger Event',
+}