move appStorage in editorStore

packages/editor/src/AppStorage.ts

@@ -14,12 +14,12 @@ export class AppStorage {
   static AppLSKey = 'schema';
   static ModulesLSKey = 'modules';
 
-  constructor(private registry: Registry) {
+  constructor() {
     this.app = this.getDefaultAppFromLS();
-    this.setApp(this.app)
+    this.setApp(this.app);
     this.modules = this.getModulesFromLS();
-    this.setModules(this.modules)
+    this.setModules(this.modules);
-  
+
     this.updateCurrentId('app', this.app.metadata.name);
     this.refreshComponents();
 
@@ -64,8 +64,14 @@ export class AppStorage {
     this.saveModulesInLS();
   }
 
-  removeModule(module: ImplementedRuntimeModule) {
+  removeModule(v: string, n: string) {
-    this.setModules(this.modules.filter(m => m !== module));
+    console.log(v, n)
+    console.log(this.modules)
+    this.setModules(
+      this.modules.filter(
+        ({ version, metadata: { name } }) => version !== v && name !== n
+      )
+    );
     this.saveModulesInLS();
   }
 
@@ -107,8 +113,6 @@ export class AppStorage {
 
   private saveModulesInLS() {
     localStorage.setItem(AppStorage.ModulesLSKey, JSON.stringify(this.modules));
-    // reregister modules to activate immediately
-    this.modules.forEach(m => this.registry.registerModule(m, true));
   }
 
   // update components by currentEditingType & cache

packages/editor/src/EditorStore.ts

@@ -1,27 +1,60 @@
 import { makeAutoObservable } from 'mobx';
-import { ApplicationComponent } from '../../core/lib';
+import { Application, ApplicationComponent } from '@sunmao-ui/core';
+import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
 import { eventBus } from './eventBus';
+import { AppStorage } from './AppStorage';
+import { registry } from './setup';
 
 class EditorStore {
   selectedComponentId = '';
+  // currentEditingComponents, it could be app's or module's components
   components: ApplicationComponent[] = [];
+  modules: ImplementedRuntimeModule[];
+  // it could be app or module's name
+  currentEditingName: string | undefined;
+  currentEditingType: 'app' | 'module' = 'app';
+  app: Application;
+
+  appStorage = new AppStorage();
 
   constructor() {
+    this.app = this.appStorage.app;
+    this.modules = this.appStorage.modules;
     eventBus.on('selectComponent', id => {
       this.setSelectedComponentId(id);
     });
-    eventBus.on('componentsChange', (components: ApplicationComponent[]) => {
+    eventBus.on('componentsChange', components => {
       this.setComponents(components);
     });
+    eventBus.on('modulesChange', modules => {
+      this.setModules(modules);
+      // reregister modules to activate immediately
+      this.modules.forEach(m => registry.registerModule(m, true));
+    });
     makeAutoObservable(this);
   }
 
+  updateCurrentEditingTarget = (type: 'app' | 'module', name: string) => {
+    this.appStorage.updateCurrentId(type, name);
+    // this.setCurrentEditingType(type);
+    // this.setCurrentEditingName(name);
+  }
+
   setSelectedComponentId(val: string) {
     this.selectedComponentId = val;
   }
+  private setCurrentEditingName(val: string) {
+    this.currentEditingName = val;
+  }
+  private setCurrentEditingType(val: 'app' | 'module') {
+    this.currentEditingType = val;
+  }
   setComponents(val: ApplicationComponent[]) {
     this.components = val;
   }
+  setModules(val: ImplementedRuntimeModule[]) {
+    this.modules = val;
+  }
 }
 
-export const editorStore = new EditorStore()
+export const editorStore = new EditorStore();

packages/editor/src/components/Editor.tsx

@@ -13,7 +13,6 @@ import { KeyboardEventWrapper } from './KeyboardEventWrapper';
 import { ComponentWrapper } from './ComponentWrapper';
 import { StateEditor, SchemaEditor } from './CodeEditor';
 import { Explorer } from './Explorer';
-import { AppStorage } from '../AppStorage';
 import {
   ModifyComponentPropertiesLeafOperation,
   ReplaceAppLeafOperation,
@@ -28,11 +27,10 @@ type Props = {
   registry: ReturnOfInit['registry'];
   stateStore: ReturnOfInit['stateManager']['store'];
   apiService: ReturnOfInit['apiService'];
-  appStorage: AppStorage;
 };
 
 export const Editor: React.FC<Props> = observer(
-  ({ App, registry, stateStore, appStorage }) => {
+  ({ App, registry, stateStore }) => {
     const { components, selectedComponentId } = editorStore;
 
     const [scale, setScale] = useState(100);
@@ -144,7 +142,7 @@ export const Editor: React.FC<Props> = observer(
               </TabList>
               <TabPanels flex="1" overflow="auto">
                 <TabPanel>
-                  <Explorer appStorage={appStorage} />
+                  <Explorer />
                 </TabPanel>
                 <TabPanel p={0}>
                   <StructureTree

packages/editor/src/components/Explorer/Explorer.tsx

@@ -1,36 +1,18 @@
 import { Divider, HStack, IconButton, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
-import { AppStorage } from '../../AppStorage';
+import { observer } from 'mobx-react-lite';
 import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
-import { eventBus } from '../../eventBus';
 import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
+import { editorStore } from '../../EditorStore';
 
-type ExplorerProps = {
+export const Explorer: React.FC = observer(() => {
-  appStorage: AppStorage;
+  const { app, modules, updateCurrentEditingTarget } = editorStore;
-};
-
-const useAppStorage = (appStorage: AppStorage) => {
-  const [modules, setModules] = React.useState<ImplementedRuntimeModule[]>(
-    appStorage.modules
-  );
-
-  eventBus.on('modulesChange', newModules => {
-    setModules(newModules);
-  });
-
-  return {
-    modules,
-  };
-};
-
-export const Explorer: React.FC<ExplorerProps> = ({ appStorage }) => {
-  const app = appStorage.app;
   const appItemId = `app_${app.metadata.name}`;
   const [selectedItem, setSelectedItem] = React.useState<string | undefined>(appItemId);
 
   const onClickApp = (id: string) => {
     setSelectedItem(id);
-    appStorage.updateCurrentId('app', app.metadata.name);
+    updateCurrentEditingTarget('app', app.metadata.name);
   };
 
   const appItem = (
@@ -43,15 +25,15 @@ export const Explorer: React.FC<ExplorerProps> = ({ appStorage }) => {
     />
   );
 
-  const { modules } = useAppStorage(appStorage);
+  console.log('modules', modules);
   const moduleItems = modules.map((module: ImplementedRuntimeModule) => {
     const moduleItemId = `module_${module.metadata.name}`;
     const onClickModule = (id: string) => {
       setSelectedItem(id);
-      appStorage.updateCurrentId('module', module.metadata.name);
+      updateCurrentEditingTarget('module', module.metadata.name);
     };
     const onRemove = () => {
-      appStorage.removeModule(module);
+      editorStore.appStorage.removeModule(module.version, module.metadata.name);
     };
     return (
       <ExplorerItem
@@ -80,13 +62,13 @@ export const Explorer: React.FC<ExplorerProps> = ({ appStorage }) => {
           aria-label="create module"
           size="xs"
           icon={<AddIcon />}
-          onClick={() => appStorage.createModule()}
+          onClick={() => editorStore.appStorage.createModule()}
         />
       </HStack>
       {moduleItems}
     </VStack>
   );
-};
+});
 
 type ExplorerItemProps = {
   id: string;

packages/editor/src/main.tsx

@@ -6,7 +6,8 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
 import { Editor } from './components/Editor';
-import { apiService, App, appModelManager, appStorage, registry, stateStore } from './setup';
+import { editorStore } from './EditorStore';
+import { apiService, App, registry, stateStore } from './setup';
 
 type Options = Partial<{
   components: Parameters<Registry['registerComponent']>[0][];
@@ -19,7 +20,7 @@ export default function renderApp(options: Options = {}) {
   components.forEach(c => registry.registerComponent(c));
   traits.forEach(t => registry.registerTrait(t));
   modules.forEach(m => registry.registerModule(m));
-  appStorage.modules.forEach(m => registry.registerModule(m));
+  editorStore.appStorage.modules.forEach(m => registry.registerModule(m));
 
   ReactDOM.render(
     <StrictMode>
@@ -29,8 +30,6 @@ export default function renderApp(options: Options = {}) {
           registry={registry}
           stateStore={stateStore}
           apiService={apiService}
-          appStorage={appStorage}
-          appModelManager={appModelManager}
         />
       </ChakraProvider>
     </StrictMode>,

packages/editor/src/playground.tsx

@@ -8,7 +8,6 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
 import { Editor } from './components/Editor';
-import { appStorage } from './setup';
 
 type Example = {
   name: string;
@@ -79,16 +78,13 @@ const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
         </Box>
       </Box>
       <Box flex="1">
-        {appModelManager && (
+        <Editor
-          <Editor
+          key={example!.name}
-            key={example!.name}
+          App={App!}
-            App={App!}
+          registry={registry!}
-            registry={registry!}
+          stateStore={stateStore!}
-            stateStore={stateStore!}
+          apiService={apiService!}
-            apiService={apiService!}
+        />
-            appStorage={appStorage}
-          />
-        )}
       </Box>
     </Flex>
   );

packages/editor/src/setup.ts

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