Merge pull request #694 from smartxworks/feat/debug

Add logging of runtime related debugging information

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

@@ -5,7 +5,6 @@ export function useGlobalHandlerMap(props: ImplWrapperProps) {
   const { component: c, services } = props;
   const { apiService, globalHandlerMap } = services;
 
-  
   useEffect(() => {
     if (!globalHandlerMap.has(c.id)) {
       globalHandlerMap.set(c.id, {});

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/debugger';
 
 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 info
+      services.apiService.send('mergeState', {
+        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

@@ -8,6 +8,7 @@ import { AppHooks } from './types';
 import { enableES5, setAutoFreeze } from 'immer';
 import './style.css';
 import { initSlotReceiver } from './services/SlotReciver';
+import { debugLogger, DebuggerHandler } from './services/debugger';
 
 // immer would make some errors when read the states, so we do these to avoid it temporarily
 // ref: https://github.com/immerjs/immer/issues/916
@@ -19,6 +20,7 @@ export type SunmaoUIRuntimeProps = {
   dependencies?: Record<string, any>;
   hooks?: AppHooks;
   isInEditor?: boolean;
+  debugHandler?: DebuggerHandler;
 };
 
 export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) {
@@ -39,6 +41,9 @@ export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) {
     utilMethodManager
   );
 
+  // record debug info
+  debugLogger(apiService, stateManager, props.debugHandler);
+
   props.libs?.forEach(lib => {
     registry.installLib(lib);
   });
@@ -104,3 +109,4 @@ export { formatSlotKey } from './components/_internal/ImplWrapper/hooks/useSlotC
 
 // TODO: check this export
 export { watch } from './utils/watchReactivity';
+export { printDebugInfo, saveDebugInfoToLocalstorage } from './services/debugger';

packages/runtime/src/services/apiService.ts

@@ -17,6 +17,10 @@ export function initApiService() {
       fromId: string;
       eventType: string;
     };
+    /**
+     * @description: record merge state info for debug
+     */
+    mergeState: Record<string, any>;
   }>();
   const apiService = {
     on: emitter.on,

packages/runtime/src/services/debugger/const.ts

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

packages/runtime/src/services/debugger/debugLogger.ts

@@ -0,0 +1,30 @@
+import { ApiService } from '../apiService';
+import { StateManager } from '../StateManager';
+import { DebugLoggerType } from './const';
+import type { DebuggerHandler } from './type';
+
+export const debugLogger = (
+  services: ApiService,
+  stateManager: StateManager,
+  debugHandler?: DebuggerHandler
+) => {
+  services.on('mergeState', params => {
+    debugHandler?.onDebug(stateManager.store, {
+      type: DebugLoggerType.TRIGGER_EVENT,
+      ...params,
+    });
+  });
+  services.on('uiMethod', params => {
+    debugHandler?.onDebug(stateManager.store, {
+      type: DebugLoggerType.TRIGGER_EVENT,
+      ...params,
+    });
+  });
+
+  services.on('moduleEvent', params => {
+    debugHandler?.onDebug(stateManager.store, {
+      type: DebugLoggerType.MODULE_EVENT,
+      ...params,
+    });
+  });
+};

packages/runtime/src/services/debugger/index.ts

@@ -0,0 +1,5 @@
+export * from './logger';
+export * from './localStorage';
+export * from './const';
+export * from './debugLogger';
+export * from './type';

packages/runtime/src/services/debugger/localStorage.ts

@@ -0,0 +1,29 @@
+import type { DebugLog } from './type';
+type DebugInfo = {
+  state: Record<string, any>;
+  debugLogs: DebugLog[];
+};
+
+const getDebugInfo = (key: string): DebugInfo | null => {
+  try {
+    const debugInfoStr = localStorage.getItem(key);
+    return debugInfoStr ? JSON.parse(debugInfoStr) : null;
+  } catch {
+    return null;
+  }
+};
+
+const setDebugInfo = (key: string, debugInfo: DebugInfo) => {
+  localStorage.setItem(key, JSON.stringify(debugInfo));
+};
+
+export const saveDebugInfoToLocalstorage = (
+  message: DebugLog,
+  state: Record<string, any>,
+  key = 'sunmao-debug-info'
+) => {
+  const debugInfo = getDebugInfo(key) || { state: {}, debugLogs: [] };
+  debugInfo.state = state;
+  debugInfo.debugLogs.push(message);
+  setDebugInfo(key, debugInfo);
+};

packages/runtime/src/services/debugger/logger.ts

@@ -0,0 +1,24 @@
+import { DebugLoggerType } from './const';
+import type { DebugLog } from './type';
+const getDate = () => {
+  return new Date().toLocaleTimeString();
+};
+
+export const printDebugInfo = (log: DebugLog, state?: Record<string, any>) => {
+  const { type, ...restParams } = log;
+  switch (type) {
+    case DebugLoggerType.MERGE_STATE:
+      console.debug(`%c[${getDate()}]${type}`, 'color:#105D1A;', restParams);
+      if (state) {
+        console.debug(`%c[All current state]`, 'color:#105D1A;', state);
+      }
+      break;
+    case DebugLoggerType.MODULE_EVENT:
+    case DebugLoggerType.TRIGGER_EVENT:
+      console.debug(`%c[${getDate()}]${type}`, 'color:#EEB422;', restParams);
+      break;
+    default:
+      console.debug(`%c[${getDate()}]${type}`, 'color:#105D1A;', restParams);
+      break;
+  }
+};

packages/runtime/src/services/debugger/type.ts

@@ -0,0 +1,10 @@
+import { DebugLoggerType } from './const';
+
+export type DebugLog = {
+  type: DebugLoggerType;
+  [k: string]: any;
+};
+
+export type DebuggerHandler = {
+  onDebug: (currentState: Record<string, any>, debugLog: DebugLog) => void;
+};