refactor AppStorage

packages/editor/src/AppStorage.ts

@@ -1,32 +1,18 @@
 import { Application, ApplicationComponent } from '@sunmao-ui/core';
-import { ImplementedRuntimeModule, Registry } from '@sunmao-ui/runtime';
+import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
 import { produce } from 'immer';
-import { eventBus } from './eventBus';
 import { DefaultNewModule, EmptyAppSchema } from './constants';
 
 export class AppStorage {
-  components: ApplicationComponent[] = [];
   app: Application;
   modules: ImplementedRuntimeModule[];
   // this is current editing Model
-  private currentEditingName: string | undefined;
-  private currentEditingType: 'app' | 'module' = 'app';
   static AppLSKey = 'schema';
   static ModulesLSKey = 'modules';
 
   constructor() {
     this.app = this.getDefaultAppFromLS();
-    this.setApp(this.app);
     this.modules = this.getModulesFromLS();
-    this.setModules(this.modules);
-
-    this.updateCurrentId('app', this.app.metadata.name);
-    this.refreshComponents();
-
-    eventBus.on('componentsChange', (components: ApplicationComponent[]) => {
-      this.components = components;
-      this.saveComponentsInLS();
-    });
   }
 
   getDefaultAppFromLS(): Application {
@@ -53,20 +39,14 @@ export class AppStorage {
     }
   }
 
-  updateCurrentId(type: 'app' | 'module', name: string) {
-    this.currentEditingType = type;
-    this.currentEditingName = name;
-    this.refreshComponents();
-  }
-
   createModule() {
     this.setModules([...this.modules, DefaultNewModule]);
     this.saveModulesInLS();
   }
 
   removeModule(v: string, n: string) {
-    console.log(v, n)
-    console.log(this.modules)
+    console.log(v, n);
+    console.log(this.modules);
     this.setModules(
       this.modules.filter(
         ({ version, metadata: { name } }) => version !== v && name !== n
@@ -75,21 +55,24 @@ export class AppStorage {
     this.saveModulesInLS();
   }
 
-  saveComponentsInLS() {
-    switch (this.currentEditingType) {
+  // name is `${module.version}/${module.metadata.name}`
+  saveComponentsInLS(
+    type: 'app' | 'module',
+    name: string,
+    components: ApplicationComponent[]
+  ) {
+    switch (type) {
       case 'app':
         const newApp = produce(this.app, draft => {
-          draft.spec.components = this.components;
+          draft.spec.components = components;
         });
         this.setApp(newApp);
         this.saveAppInLS();
         break;
       case 'module':
-        const i = this.modules.findIndex(
-          m => m.metadata.name === this.currentEditingName
-        );
+        const i = this.modules.findIndex(m => m.metadata.name === name);
         const newModules = produce(this.modules, draft => {
-          draft[i].components = this.components;
+          draft[i].components = components;
         });
         this.setModules(newModules);
         this.saveModulesInLS();
@@ -99,12 +82,10 @@ export class AppStorage {
 
   private setApp(app: Application) {
     this.app = app;
-    eventBus.send('appChange', app);
   }
 
   private setModules(modules: ImplementedRuntimeModule[]) {
     this.modules = modules;
-    eventBus.send('modulesChange', modules);
   }
 
   private saveAppInLS() {
@@ -114,27 +95,4 @@ export class AppStorage {
   private saveModulesInLS() {
     localStorage.setItem(AppStorage.ModulesLSKey, JSON.stringify(this.modules));
   }
-
-  // update components by currentEditingType & cache
-  private refreshComponents() {
-    switch (this.currentEditingType) {
-      case 'module':
-        const module = this.modules.find(
-          m => m.metadata.name === this.currentEditingName
-        );
-        const componentsOfModule = module?.components || [];
-        this.components = componentsOfModule;
-
-        break;
-      case 'app':
-        const componentsOfApp = this.app.spec.components;
-        this.components = componentsOfApp;
-        break;
-    }
-    this.emitComponentsChange();
-  }
-
-  private emitComponentsChange() {
-    eventBus.send('componentsReload', this.components);
-  }
 }

packages/editor/src/EditorStore.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, autorun, observable } from 'mobx';
 import { Application, ApplicationComponent } from '@sunmao-ui/core';
 import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
 import { eventBus } from './eventBus';
@@ -11,34 +11,70 @@ class EditorStore {
   components: ApplicationComponent[] = [];
   modules: ImplementedRuntimeModule[];
   // it could be app or module's name
-  currentEditingName: string | undefined;
+  // name is `${module.version}/${module.metadata.name}`
+  currentEditingName: string = '';
   currentEditingType: 'app' | 'module' = 'app';
   app: Application;
 
   appStorage = new AppStorage();
 
   constructor() {
+    makeAutoObservable(this, {
+      components: observable.shallow,
+      app: observable.shallow,
+      modules: observable.shallow,
+    });
     this.app = this.appStorage.app;
     this.modules = this.appStorage.modules;
+    this.setApp(this.appStorage.app);
+    this.setModules(this.appStorage.modules);
+
     eventBus.on('selectComponent', id => {
       this.setSelectedComponentId(id);
     });
-    eventBus.on('componentsChange', components => {
-      this.setComponents(components);
+    eventBus.on('appChange', app => {
+      this.setApp(app);
     });
     eventBus.on('modulesChange', modules => {
       this.setModules(modules);
       // reregister modules to activate immediately
       this.modules.forEach(m => registry.registerModule(m, true));
     });
-    makeAutoObservable(this);
+    // listen the change by operations, and save newComponents
+    eventBus.on('componentsChange', components => {
+      this.setComponents(components);
+      this.appStorage.saveComponentsInLS(
+        this.currentEditingType,
+        this.currentEditingName,
+        components
+      );
+    });
+    
+    autorun(() => {
+      console.log('componentsReload', this.originComponents)
+      eventBus.send('componentsReload', this.originComponents)
+      this.setComponents(this.originComponents);
+    })
+  }
+
+  // init components of app of module
+  get originComponents(): ApplicationComponent[] {
+    switch (this.currentEditingType) {
+      case 'module':
+        const module = this.modules.find(
+          m => m.metadata.name === this.currentEditingName
+        );
+        return module?.components || [];
+      case 'app':
+        console.log('this.app', this.app)
+        return this.app.spec.components;
+    }
   }
 
   updateCurrentEditingTarget = (type: 'app' | 'module', name: string) => {
-    this.appStorage.updateCurrentId(type, name);
-    // this.setCurrentEditingType(type);
-    // this.setCurrentEditingName(name);
-  }
+    this.setCurrentEditingType(type);
+    this.setCurrentEditingName(name);
+  };
 
   setSelectedComponentId(val: string) {
     this.selectedComponentId = val;
@@ -49,12 +85,15 @@ class EditorStore {
   private setCurrentEditingType(val: 'app' | 'module') {
     this.currentEditingType = val;
   }
-  setComponents(val: ApplicationComponent[]) {
+  private setComponents(val: ApplicationComponent[]) {
     this.components = val;
   }
-  setModules(val: ImplementedRuntimeModule[]) {
+  private setModules(val: ImplementedRuntimeModule[]) {
     this.modules = val;
   }
+  private setApp(val: Application) {
+    this.app = val;
+  }
 }
 
 export const editorStore = new EditorStore();

packages/editor/src/operations/AppModelManager.ts

@@ -6,14 +6,13 @@ export class AppModelManager implements IUndoRedoManager {
   components: ApplicationComponent[] = [];
   operationStack: OperationList<IOperation> = new OperationList();
 
-  constructor(components: ApplicationComponent[]) {
-    this.components = components;
-    this.updateComponents(components);
+  constructor() {
     eventBus.on('undo', () => this.undo());
     eventBus.on('redo', () => this.redo());
     eventBus.on('operation', o => this.do(o));
     eventBus.on('componentsReload', components => {
-      this.updateComponents(components);
+      this.components = components;
+      this.operationStack = new OperationList();
     });
   }
 

packages/editor/src/setup.ts

@@ -1,5 +1,4 @@
 import { initSunmaoUI } from '@sunmao-ui/runtime';
-import { editorStore } from './EditorStore';
 import { AppModelManager } from './operations/AppModelManager';
 
 const ui = initSunmaoUI();
@@ -8,7 +7,7 @@ const App = ui.App;
 const registry = ui.registry;
 const apiService = ui.apiService;
 const stateStore = ui.stateManager.store;
-const appModelManager = new AppModelManager(editorStore.appStorage.components);
+const appModelManager = new AppModelManager();
 
 export {
   ui,