From 511fd33051f92c664a13e96c667399f392f3bd4e Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Thu, 7 Apr 2022 15:34:38 +0800
Subject: [PATCH] add comments

---
 packages/editor/src/services/AppStorage.ts    | 24 ++++++++++---------
 packages/editor/src/services/EditorStore.ts   |  6 ++---
 .../src/components/_internal/ImplWrapper.tsx  |  2 ++
 .../components/_internal/ModuleRenderer.tsx   |  1 +
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/services/AppStorage.ts b/packages/editor/src/services/AppStorage.ts
index 5f2ed0ac..ae693f64 100644
--- a/packages/editor/src/services/AppStorage.ts
+++ b/packages/editor/src/services/AppStorage.ts
@@ -8,7 +8,8 @@ import { StorageHandler } from '../types';
 export class AppStorage {
   app: Application;
   modules: Module[];
-  modulesWithId: Module[];
+  // modules that have {{$moduleId}}__
+  rawModules: Module[];
   static AppLSKey = 'schema';
   static ModulesLSKey = 'modules';
 
@@ -19,15 +20,15 @@ export class AppStorage {
   ) {
     this.app = defaultApplication || EmptyAppSchema;
     this.modules = defaultModules?.map(removeModuleId) || [];
-    this.modulesWithId = defaultModules || [];
+    this.rawModules = defaultModules || [];
 
     makeObservable(this, {
       app: observable.shallow,
       modules: observable.shallow,
-      modulesWithId: observable.shallow,
+      rawModules: observable.shallow,
       setApp: action,
       setModules: action,
-      setModulesWithId: action,
+      setRawModules: action,
     });
   }
 
@@ -88,8 +89,8 @@ export class AppStorage {
           draft[i].impl = components;
         });
         this.setModules(newModules);
-        const modulesWithId = newModules.map(addModuleId);
-        this.setModulesWithId(modulesWithId);
+        const rawModules = newModules.map(addModuleId);
+        this.setRawModules(rawModules);
         this.saveModules();
         break;
     }
@@ -126,8 +127,8 @@ export class AppStorage {
     });
 
     this.setModules(newModules);
-    const modulesWithId = newModules.map(addModuleId);
-    this.setModulesWithId(modulesWithId);
+    const rawModules = newModules.map(addModuleId);
+    this.setRawModules(rawModules);
     this.saveModules();
   }
 
@@ -136,8 +137,9 @@ export class AppStorage {
   }
 
   private saveModules() {
+    // save rawModules rather than modules because rawModules have {{$moduleId}}__
     this.storageHandler?.onSaveModules &&
-      this.storageHandler?.onSaveModules(this.modulesWithId);
+      this.storageHandler?.onSaveModules(this.rawModules);
   }
 
   setApp(app: Application) {
@@ -148,7 +150,7 @@ export class AppStorage {
     this.modules = modules;
   }
 
-  setModulesWithId(modules: Module[]) {
-    this.modulesWithId = modules;
+  setRawModules(modules: Module[]) {
+    this.rawModules = modules;
   }
 }
diff --git a/packages/editor/src/services/EditorStore.ts b/packages/editor/src/services/EditorStore.ts
index 530951df..cd3689a2 100644
--- a/packages/editor/src/services/EditorStore.ts
+++ b/packages/editor/src/services/EditorStore.ts
@@ -125,8 +125,8 @@ export class EditorStore {
     return this.appStorage.modules;
   }
 
-  get modulesWithId() {
-    return this.appStorage.modulesWithId;
+  get rawModules() {
+    return this.appStorage.rawModules;
   }
 
   get selectedComponent() {
@@ -197,7 +197,7 @@ export class EditorStore {
 
     // Remove old modules and re-register all modules,
     this.registry.unregisterAllModules();
-    this.modulesWithId.forEach(m => {
+    this.rawModules.forEach(m => {
       const modules = createModule(m);
       this.registry.registerModule(modules, true);
     });
diff --git a/packages/runtime/src/components/_internal/ImplWrapper.tsx b/packages/runtime/src/components/_internal/ImplWrapper.tsx
index 81843e4d..9c596ad1 100644
--- a/packages/runtime/src/components/_internal/ImplWrapper.tsx
+++ b/packages/runtime/src/components/_internal/ImplWrapper.tsx
@@ -19,6 +19,7 @@ const _ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>((props,
   const handlerMap = useRef(globalHandlerMap.get(c.id)!);
   const eleRef = useRef<HTMLElement>();
   const onRef = (ele: HTMLElement) => {
+    // If a component is in module, it should not have mask, so we needn't set it
     if (!isInModule) {
       eleMap.set(c.id, ele);
     }
@@ -26,6 +27,7 @@ const _ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>((props,
   };
 
   useEffect(() => {
+    // If a component is in module, it should not have mask, so we needn't set it
     if (eleRef.current && !isInModule) {
       eleMap.set(c.id, eleRef.current);
     }
diff --git a/packages/runtime/src/components/_internal/ModuleRenderer.tsx b/packages/runtime/src/components/_internal/ModuleRenderer.tsx
index 14a8f020..c6adfae8 100644
--- a/packages/runtime/src/components/_internal/ModuleRenderer.tsx
+++ b/packages/runtime/src/components/_internal/ModuleRenderer.tsx
@@ -146,6 +146,7 @@ const ModuleRendererContent = React.forwardRef<
   }, [evalScope, handlers, moduleId, services.apiService, services.stateManager]);
 
   const result = useMemo(() => {
+    // Must init components' state, otherwise store cannot listen these components' state changing
     initStateAndMethod(services.registry, services.stateManager, evaledModuleTemplate);
     const { childrenMap, topLevelComponents } = resolveChildrenMap(evaledModuleTemplate);
     return topLevelComponents.map(c => {