fix: module will add duplicated moduleId after save meta data

packages/editor/src/services/AppStorage.ts

@@ -2,12 +2,13 @@ import { observable, makeObservable, action, toJS } from 'mobx';
 import { Application, ComponentSchema, Module, RuntimeModule } from '@sunmao-ui/core';
 import { produce } from 'immer';
 import { DefaultNewModule, EmptyAppSchema } from '../constants';
-import { addModuleId } from '../utils/addModuleId';
+import { addModuleId, removeModuleId } from '../utils/addModuleId';
 import { StorageHandler } from '../types';
 
 export class AppStorage {
   app: Application;
   modules: Module[];
+  modulesWithId: Module[];
   static AppLSKey = 'schema';
   static ModulesLSKey = 'modules';
 
@@ -17,20 +18,23 @@ export class AppStorage {
     private storageHandler?: StorageHandler
   ) {
     this.app = defaultApplication || EmptyAppSchema;
-    this.modules = defaultModules || [];
+    this.modules = defaultModules?.map(removeModuleId) || [];
+    this.modulesWithId = defaultModules || [];
 
     makeObservable(this, {
       app: observable.shallow,
       modules: observable.shallow,
+      modulesWithId: observable.shallow,
       setApp: action,
       setModules: action,
+      setModulesWithId: action,
     });
   }
 
   createModule() {
     let index = this.modules.length;
 
-    this.modules.forEach((module) => {
+    this.modules.forEach(module => {
       if (module.metadata.name === `myModule${index}`) {
         index++;
       }
@@ -46,7 +50,7 @@ export class AppStorage {
       metadata: {
         ...DefaultNewModule.metadata,
         name,
-      }
+      },
     };
 
     this.setModules([...this.modules, newModule]);
@@ -84,6 +88,8 @@ export class AppStorage {
           draft[i].impl = components;
         });
         this.setModules(newModules);
+        const modulesWithId = newModules.map(addModuleId);
+        this.setModulesWithId(modulesWithId);
         this.saveModules();
         break;
     }
@@ -118,7 +124,10 @@ export class AppStorage {
       draft[i].spec.stateMap = stateMap;
       draft[i].version = version;
     });
+
     this.setModules(newModules);
+    const modulesWithId = newModules.map(addModuleId);
+    this.setModulesWithId(modulesWithId);
     this.saveModules();
   }
 
@@ -127,8 +136,8 @@ export class AppStorage {
   }
 
   private saveModules() {
-    const modules = this.modules.map(addModuleId);
-    this.storageHandler?.onSaveModules && this.storageHandler?.onSaveModules(modules);
+    this.storageHandler?.onSaveModules &&
+      this.storageHandler?.onSaveModules(this.modulesWithId);
   }
 
   setApp(app: Application) {
@@ -138,4 +147,8 @@ export class AppStorage {
   setModules(modules: Module[]) {
     this.modules = modules;
   }
+
+  setModulesWithId(modules: Module[]) {
+    this.modulesWithId = modules;
+  }
 }

packages/editor/src/services/EditorStore.ts

@@ -5,7 +5,6 @@ import { Registry, StateManager } from '@sunmao-ui/runtime';
 import { EventBusType } from './eventBus';
 import { AppStorage } from './AppStorage';
 import { SchemaValidator } from '../validator';
-import { removeModuleId } from '../utils/addModuleId';
 import { DataSourceType } from '../components/DataSource';
 import { genOperation } from '../operations';
 import { ExplorerMenuTabs, ToolMenuTabs } from '../constants/enum';
@@ -27,7 +26,7 @@ enum DataSourceName {
   LOCALSTORAGE = 'localStorage',
 }
 
-type DataSourceId = `${DataSourceName}${number}`
+type DataSourceId = `${DataSourceName}${number}`;
 export class EditorStore {
   components: ComponentSchema[] = [];
   // currentEditingComponents, it could be app's or module's components
@@ -93,7 +92,11 @@ export class EditorStore {
           this.eventBus.send('componentsRefresh', this.originComponents);
           this.setComponents(this.originComponents);
 
-          if (this.APICount === -1 || this.stateCount === -1 || this.localStorageCount === -1) {
+          if (
+            this.APICount === -1 ||
+            this.stateCount === -1 ||
+            this.localStorageCount === -1
+          ) {
             this.initDataSourceCount();
           }
         }
@@ -122,6 +125,10 @@ export class EditorStore {
     return this.appStorage.modules;
   }
 
+  get modulesWithId() {
+    return this.appStorage.modulesWithId;
+  }
+
   get selectedComponent() {
     return this.components.find(c => c.id === this._selectedComponentId);
   }
@@ -153,10 +160,7 @@ export class EditorStore {
             m.version === this.currentEditingTarget.version &&
             m.metadata.name === this.currentEditingTarget.name
         );
-        if (module) {
-          return removeModuleId(module).impl;
-        }
-        return [];
+        return module?.impl || [];
       case 'app':
         return this.app.spec.components;
     }
@@ -189,8 +193,11 @@ export class EditorStore {
 
   clearSunmaoGlobalState() {
     this.stateManager.clear();
-    // reregister all modules
-    this.modules.forEach(m => {
+    this.setSelectedComponentId('');
+
+    // Remove old modules and re-register all modules,
+    this.registry.unregisterAllModules();
+    this.modulesWithId.forEach(m => {
       const modules = createModule(m);
       this.registry.registerModule(modules, true);
     });
@@ -258,7 +265,11 @@ export class EditorStore {
     const { apis, states, localStorages } = this.dataSources;
     let id: DataSourceId;
 
-    const getCount = (dataSource: ComponentSchema[], dataSourceName: DataSourceName, count: number): number => {
+    const getCount = (
+      dataSource: ComponentSchema[],
+      dataSourceName: DataSourceName,
+      count: number
+    ): number => {
       const ids = dataSource.map(({ id }) => id);
       let id: DataSourceId = `${dataSourceName}${count}`;
       while (ids.includes(id)) {
@@ -277,7 +288,11 @@ export class EditorStore {
         id = `state${this.stateCount}`;
         break;
       case DataSourceType.LOCALSTORAGE:
-        this.localStorageCount = getCount(localStorages, DataSourceName.LOCALSTORAGE, this.localStorageCount);
+        this.localStorageCount = getCount(
+          localStorages,
+          DataSourceName.LOCALSTORAGE,
+          this.localStorageCount
+        );
         id = `localStorage${this.localStorageCount}`;
         break;
     }

packages/runtime/src/components/_internal/ImplWrapper.tsx

@@ -26,7 +26,6 @@ const _ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>((props,
   };
 
   useEffect(() => {
-    console.log(c.id, eleRef.current, isInModule);
     if (eleRef.current && !isInModule) {
       eleMap.set(c.id, eleRef.current);
     }

packages/runtime/src/services/Registry.tsx

@@ -170,6 +170,10 @@ export class Registry {
     return this.getModule(version, name);
   }
 
+  unregisterAllModules() {
+    this.modules = new Map<string, Map<string, ImplementedRuntimeModule>>();
+  }
+
   registerUtilMethod<T>(m: UtilMethod<T>) {
     if (this.utilMethods.get(m.name)) {
       throw new Error(`Already has utilMethod ${m.name} in this registry.`);