Merge pull request #146 from webzard-io/refactor/mobx

import mobx
2025-04-06 21:40:23 +08:00 · 2021-12-01 14:17:37 +08:00 · 2021-12-01 14:17:37 +08:00 · bac95d2485
commit bac95d2485
parent 51c33c24fd c1d8211435
18 changed files with 383 additions and 408 deletions
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@ -42,6 +42,8 @@
    "framer-motion": "^4",
    "immer": "^9.0.6",
    "lodash-es": "^4.17.21",
+    "mobx": "^6.3.8",
+    "mobx-react-lite": "^3.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
--- a/packages/editor/src/AppStorage.ts
+++ b/packages/editor/src/AppStorage.ts
@ -1,31 +1,21 @@
+import { observable, makeObservable, action } from 'mobx';
 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';
+  app: Application = this.getDefaultAppFromLS();
+  modules: ImplementedRuntimeModule[] = this.getModulesFromLS();
  static AppLSKey = 'schema';
  static ModulesLSKey = 'modules';

-  constructor(private registry: Registry) {
-    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();
+  constructor() {
+    makeObservable(this, {
+      app: observable.shallow,
+      modules: observable.shallow,
+      setApp: action,
+      setModules: action
    });
  }

@ -53,37 +43,38 @@ 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(module: ImplementedRuntimeModule) {
-    this.setModules(this.modules.filter(m => m !== module));
+  removeModule(v: string, n: string) {
+    this.setModules(
+      this.modules.filter(
+        ({ version, metadata: { name } }) => version !== v && name !== n
+      )
+    );
    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();
@ -91,15 +82,7 @@ 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() {
    localStorage.setItem(AppStorage.AppLSKey, JSON.stringify(this.app));
@ -107,30 +90,12 @@ 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
-  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();
+  setApp(app: Application) {
+    this.app = app;
  }
-
-  private emitComponentsChange() {
-    eventBus.send('componentsReload', this.components);
+  setModules(modules: ImplementedRuntimeModule[]) {
+    this.modules = modules;
  }
 }
--- a/packages/editor/src/EditorStore.ts
+++ b/packages/editor/src/EditorStore.ts
@ -0,0 +1,84 @@
+import { makeAutoObservable, autorun, observable } from 'mobx';
+import { ApplicationComponent } from '@sunmao-ui/core';
+import { eventBus } from './eventBus';
+import { AppStorage } from './AppStorage';
+import { registry } from './setup';
+
+class EditorStore {
+  components: ApplicationComponent[] = [];
+  // currentEditingComponents, it could be app's or module's components
+  selectedComponentId = '';
+  hoverComponentId = '';
+  // it could be app or module's name
+  // name is `${module.version}/${module.metadata.name}`
+  currentEditingName = '';
+  currentEditingType: 'app' | 'module' = 'app';
+
+  appStorage = new AppStorage();
+
+  get app() {
+    return this.appStorage.app;
+  }
+
+  get modules() {
+    return this.appStorage.modules;
+  }
+
+  constructor() {
+    makeAutoObservable(this, {
+      components: observable.shallow,
+    });
+
+    eventBus.on('selectComponent', id => {
+      this.setSelectedComponentId(id);
+    });
+    // listen the change by operations, and save newComponents
+    eventBus.on('componentsChange', components => {
+      this.setComponents(components);
+      this.appStorage.saveComponentsInLS(
+        this.currentEditingType,
+        this.currentEditingName,
+        components
+      );
+      if (this.currentEditingType === 'module') {
+        // reregister modules to activate immediately
+        this.modules.forEach(m => registry.registerModule(m, true));
+      }
+    });
+
+    autorun(() => {
+      eventBus.send('componentsRefresh', this.originComponents);
+      this.setComponents(this.originComponents);
+    });
+  }
+
+  // origin components of app of module
+  // when switch app or module, components should refresh
+  get originComponents(): ApplicationComponent[] {
+    switch (this.currentEditingType) {
+      case 'module':
+        const module = this.modules.find(
+          m => m.metadata.name === this.currentEditingName
+        );
+        return module?.components || [];
+      case 'app':
+        return this.app.spec.components;
+    }
+  }
+
+  updateCurrentEditingTarget = (type: 'app' | 'module', name: string) => {
+    this.currentEditingType = type;
+    this.currentEditingName = name;
+  };
+  setSelectedComponentId = (val: string) => {
+    this.selectedComponentId = val;
+  };
+  setHoverComponentId = (val: string) => {
+    this.hoverComponentId = val;
+  };
+  setComponents = (val: ApplicationComponent[]) => {
+    this.components = val;
+  };
+}
+
+export const editorStore = new EditorStore();
--- a/packages/editor/src/components/ComponentForm/ComponentForm.tsx
+++ b/packages/editor/src/components/ComponentForm/ComponentForm.tsx
@ -11,7 +11,6 @@ import { GeneralTraitFormList } from './GeneralTraitFormList';
 import { FetchTraitForm } from './FetchTraitForm';
 import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
 import SchemaField from './JsonSchemaForm/SchemaField';
-import { AppModelManager } from '../../operations/AppModelManager';
 import {
  ModifyComponentPropertiesLeafOperation,
  ModifyTraitPropertiesLeafOperation,
@ -22,7 +21,6 @@ type Props = {
  registry: Registry;
  selectedId: string;
  app: Application;
-  appModelManager: AppModelManager;
 };

 export const renderField = (properties: {
@ -78,7 +76,7 @@ export const renderField = (properties: {
 };

 export const ComponentForm: React.FC<Props> = props => {
-  const { selectedId, app, registry, appModelManager } = props;
+  const { selectedId, app, registry } = props;

  const selectedComponent = useMemo(
    () => app.spec.components.find(c => c.id === selectedId),
@ -146,12 +144,10 @@ export const ComponentForm: React.FC<Props> = props => {
      <EventTraitForm
        component={selectedComponent}
        registry={registry}
-        appModelManager={appModelManager}
      />
      <FetchTraitForm
        component={selectedComponent}
        registry={registry}
-        appModelManager={appModelManager}
      />
      <GeneralTraitFormList component={selectedComponent} registry={registry} />
    </VStack>
--- a/packages/editor/src/components/ComponentForm/EventTraitForm/EventHandlerForm.tsx
+++ b/packages/editor/src/components/ComponentForm/EventTraitForm/EventHandlerForm.tsx
@ -11,13 +11,12 @@ import {
 } from '@chakra-ui/react';
 import { Static } from '@sinclair/typebox';
 import { CloseIcon } from '@chakra-ui/icons';
+import { observer } from 'mobx-react-lite';
 import { useFormik } from 'formik';
-import { EventHandlerSchema } from '@sunmao-ui/runtime';
-import { useAppModel } from '../../../operations/useAppModel';
+import { EventHandlerSchema, Registry } from '@sunmao-ui/runtime';
 import { formWrapperCSS } from '../style';
 import { KeyValueEditor } from '../../KeyValueEditor';
-import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
-import { AppModelManager } from '../../../operations/AppModelManager';
+import { editorStore } from '../../../EditorStore';

 type Props = {
  registry: Registry;
@ -26,12 +25,18 @@ type Props = {
  onChange: (hanlder: Static<typeof EventHandlerSchema>) => void;
  onRemove: () => void;
  hideEventType?: boolean;
-  appModelManager: AppModelManager
 };

-export const EventHandlerForm: React.FC<Props> = props => {
-  const { handler, eventTypes, onChange, onRemove, hideEventType, registry, appModelManager } = props;
-  const { components } = useAppModel(appModelManager);
+export const EventHandlerForm: React.FC<Props> = observer(props => {
+  const {
+    handler,
+    eventTypes,
+    onChange,
+    onRemove,
+    hideEventType,
+    registry,
+  } = props;
+  const { components } = editorStore;
  const [methods, setMethods] = useState<string[]>([]);

  function updateMethods(componentId: string) {
@ -193,4 +198,4 @@ export const EventHandlerForm: React.FC<Props> = props => {
      />
    </Box>
  );
-};
+});
--- a/packages/editor/src/components/ComponentForm/EventTraitForm/EventTraitForm.tsx
+++ b/packages/editor/src/components/ComponentForm/EventTraitForm/EventTraitForm.tsx
@ -8,7 +8,6 @@ import { EventHandlerSchema } from '@sunmao-ui/runtime';
 import { eventBus } from '../../../eventBus';
 import { EventHandlerForm } from './EventHandlerForm';
 import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
-import { AppModelManager } from '../../../operations/AppModelManager';
 import {
  CreateTraitLeafOperation,
  ModifyTraitPropertiesLeafOperation,
@ -19,11 +18,10 @@ type EventHandler = Static<typeof EventHandlerSchema>;
 type Props = {
  registry: Registry;
  component: ApplicationComponent;
-  appModelManager: AppModelManager
 };

 export const EventTraitForm: React.FC<Props> = props => {
-  const { component, registry, appModelManager } = props;
+  const { component, registry } = props;

  const handlers: EventHandler[] = useMemo(() => {
    return component.traits.find(t => t.type === 'core/v1/event')?.properties
@ -116,7 +114,6 @@ export const EventTraitForm: React.FC<Props> = props => {
          onChange={onChange}
          onRemove={onRemove}
          registry={registry}
-          appModelManager={appModelManager}
        />
      );
    });
--- a/packages/editor/src/components/ComponentForm/FetchTraitForm/FetchTraitForm.tsx
+++ b/packages/editor/src/components/ComponentForm/FetchTraitForm/FetchTraitForm.tsx
@ -19,7 +19,6 @@ import { KeyValueEditor } from '../../KeyValueEditor';
 import { EventHandlerForm } from '../EventTraitForm/EventHandlerForm';
 import { eventBus } from '../../../eventBus';
 import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
-import { AppModelManager } from '../../../operations/AppModelManager';
 import {
  ModifyTraitPropertiesLeafOperation,
  RemoveTraitLeafOperation,
@ -30,13 +29,12 @@ type EventHandler = Static<typeof EventHandlerSchema>;
 type Props = {
  component: ApplicationComponent;
  registry: Registry;
-  appModelManager: AppModelManager;
 };

 const httpMethods = ['get', 'post', 'put', 'delete', 'patch'];

 export const FetchTraitForm: React.FC<Props> = props => {
-  const { component, registry, appModelManager } = props;
+  const { component, registry } = props;

  const fetchTrait = component.traits.find(t => t.type === 'core/v1/fetch')
    ?.properties as Static<typeof FetchTraitPropertiesSchema>;
@ -172,7 +170,6 @@ export const FetchTraitForm: React.FC<Props> = props => {
            onChange={onChange}
            onRemove={onRemove}
            registry={registry}
-            appModelManager={appModelManager}
          />
        );
      })}
--- a/packages/editor/src/components/ComponentWrapper.tsx
+++ b/packages/editor/src/components/ComponentWrapper.tsx
@ -1,34 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { css } from '@emotion/react';
 import { ComponentWrapperType } from '@sunmao-ui/runtime';
-import { eventBus, HoverComponentEvent, SelectComponentEvent } from '../eventBus';
+import { observer } from 'mobx-react-lite';
+import { editorStore } from '../EditorStore';

 // children of components in this list should render height as 100%
 const fullHeightList = ['core/v1/grid_layout'];
 const inlineList = ['chakra_ui/v1/checkbox', 'chakra_ui/v1/radio'];

-export const ComponentWrapper: ComponentWrapperType = props => {
+export const ComponentWrapper: ComponentWrapperType = observer(props => {
  const { component, parentType } = props;
-  const [selectedComponentId, setSelectedComponentId] = useState('');
-  const [hoverComponentId, setHoverComponentId] = useState('');
-
-  useEffect(() => {
-    const handler = (event: string, payload: any) => {
-      switch (event) {
-        case SelectComponentEvent:
-          setSelectedComponentId(payload);
-          break;
-        case HoverComponentEvent:
-          setHoverComponentId(payload);
-          break;
-      }
-    };
-    eventBus.on('*', handler);
-    return () => eventBus.off('*', handler);
-  }, [setSelectedComponentId, setHoverComponentId]);
+  const {
+    selectedComponentId,
+    setSelectedComponentId,
+    hoverComponentId,
+    setHoverComponentId,
+  } = editorStore;

  const isHover = hoverComponentId === component.id;
  const isSelected = selectedComponentId === component.id;
+
  let borderColor = 'transparent';
  if (isSelected) {
    borderColor = 'red';
@ -52,15 +43,15 @@ export const ComponentWrapper: ComponentWrapperType = props => {
  `;
  const onClickWrapper = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
-    eventBus.send(SelectComponentEvent as any, component.id);
+    setSelectedComponentId(component.id);
  };
  const onMouseEnterWrapper = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
-    eventBus.send(HoverComponentEvent as any, component.id);
+    setHoverComponentId(component.id);
  };
  const onMouseLeaveWrapper = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
-    eventBus.send(HoverComponentEvent as any, '');
+    setHoverComponentId('');
  };
  return (
    <div
@ -72,4 +63,4 @@ export const ComponentWrapper: ComponentWrapperType = props => {
      {props.children}
    </div>
  );
-};
+});
--- a/packages/editor/src/components/Editor.tsx
+++ b/packages/editor/src/components/Editor.tsx
@ -1,25 +1,24 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Application } from '@sunmao-ui/core';
 import { GridCallbacks, DIALOG_CONTAINER_ID, initSunmaoUI } from '@sunmao-ui/runtime';
 import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Flex } from '@chakra-ui/react';
+import { observer } from 'mobx-react-lite';
 import { StructureTree } from './StructureTree';
-import { eventBus, SelectComponentEvent } from '../eventBus';
+import { eventBus } from '../eventBus';
 import { ComponentForm } from './ComponentForm';
 import { ComponentList } from './ComponentsList';
-import { useAppModel } from '../operations/useAppModel';
 import { EditorHeader } from './EditorHeader';
 import { PreviewModal } from './PreviewModal';
 import { KeyboardEventWrapper } from './KeyboardEventWrapper';
 import { ComponentWrapper } from './ComponentWrapper';
 import { StateEditor, SchemaEditor } from './CodeEditor';
-import { AppModelManager } from '../operations/AppModelManager';
 import { Explorer } from './Explorer';
-import { AppStorage } from '../AppStorage';
 import {
  ModifyComponentPropertiesLeafOperation,
  ReplaceAppLeafOperation,
 } from '../operations/leaf';
 import { CreateComponentBranchOperation } from '../operations/branch';
+import { editorStore } from '../EditorStore';

 type ReturnOfInit = ReturnType<typeof initSunmaoUI>;

@ -28,207 +27,199 @@ type Props = {
  registry: ReturnOfInit['registry'];
  stateStore: ReturnOfInit['stateManager']['store'];
  apiService: ReturnOfInit['apiService'];
-  appModelManager: AppModelManager;
-  appStorage: AppStorage;
 };

-export const Editor: React.FC<Props> = ({
-  App,
-  registry,
-  stateStore,
-  appModelManager,
-  appStorage,
-}) => {
-  const { components } = useAppModel(appModelManager);
+export const Editor: React.FC<Props> = observer(
+  ({ App, registry, stateStore }) => {
+    const { components, selectedComponentId } = editorStore;

-  const [selectedComponentId, setSelectedComponentId] = useState(
-    components?.[0]?.id || ''
-  );
-  const [scale, setScale] = useState(100);
-  const [preview, setPreview] = useState(false);
-  const [codeMode, setCodeMode] = useState(false);
-  const [code, setCode] = useState('');
+    const [scale, setScale] = useState(100);
+    const [preview, setPreview] = useState(false);
+    const [codeMode, setCodeMode] = useState(false);
+    const [code, setCode] = useState('');

-  useEffect(() => {
-    eventBus.on(SelectComponentEvent, id => {
-      setSelectedComponentId(id);
-    });
-  }, [setSelectedComponentId]);
+    const gridCallbacks: GridCallbacks = useMemo(() => {
+      return {
+        // drag an existing component
+        onDragStop(id, layout) {
+          eventBus.send(
+            'operation',
+            new ModifyComponentPropertiesLeafOperation({
+              componentId: id,
+              properties: { layout },
+            })
+          );
+        },
+        // drag a new component from tool box
+        onDrop(id, layout, _, e) {
+          const component = e.dataTransfer?.getData('component') || '';
+          eventBus.send(
+            'operation',
+            new CreateComponentBranchOperation({
+              componentType: component,
+              parentId: id,
+              slot: 'content',
+              layout,
+            })
+          );
+        },
+      };
+    }, []);

-  const gridCallbacks: GridCallbacks = useMemo(() => {
-    return {
-      // drag an existing component
-      onDragStop(id, layout) {
-        eventBus.send(
-          'operation',
-          new ModifyComponentPropertiesLeafOperation({
-            componentId: id,
-            properties: { layout },
-          })
-        );
-      },
-      // drag a new component from tool box
-      onDrop(id, layout, _, e) {
-        const component = e.dataTransfer?.getData('component') || '';
-        eventBus.send(
-          'operation',
-          new CreateComponentBranchOperation({
-            componentType: component,
-            parentId: id,
-            slot: 'content',
-            layout,
-          })
-        );
-      },
-    };
-  }, []);
+    const app = useMemo<Application>(() => {
+      return {
+        version: 'sunmao/v1',
+        kind: 'Application',
+        metadata: {
+          name: 'some App',
+        },
+        spec: {
+          components,
+        },
+      };
+    }, [components]);

-  const app = useMemo<Application>(() => {
-    return {
-      version: 'sunmao/v1',
-      kind: 'Application',
-      metadata: {
-        name: 'some App',
-      },
-      spec: {
-        components,
-      },
-    };
-  }, [components]);
-
-  const appComponent = useMemo(() => {
-    return (
-      <App
-        options={app}
-        debugEvent={false}
-        debugStore={false}
-        gridCallbacks={gridCallbacks}
-        componentWrapper={ComponentWrapper}
-      />
-    );
-  }, [app, gridCallbacks]);
-
-  const renderMain = () => {
-    const appBox = (
-      <Box flex="1" background="gray.50" p={4}>
-        <Box
-          width="100%"
-          height="100%"
-          background="white"
-          transform={`scale(${scale / 100})`}
-        >
-          <Box id={DIALOG_CONTAINER_ID} width="full" height="full" position="absolute" />
-          {appComponent}
-        </Box>
-      </Box>
-    );
-
-    if (codeMode) {
+    const appComponent = useMemo(() => {
      return (
-        <Flex width="100%" height="100%">
-          <Box flex="1">
-            <SchemaEditor defaultCode={JSON.stringify(app, null, 2)} onChange={setCode} />
+        <App
+          options={app}
+          debugEvent={false}
+          debugStore={false}
+          gridCallbacks={gridCallbacks}
+          componentWrapper={ComponentWrapper}
+        />
+      );
+    }, [app, gridCallbacks]);
+
+    const renderMain = () => {
+      const appBox = (
+        <Box flex="1" background="gray.50" p={4}>
+          <Box
+            width="100%"
+            height="100%"
+            background="white"
+            transform={`scale(${scale / 100})`}
+          >
+            <Box
+              id={DIALOG_CONTAINER_ID}
+              width="full"
+              height="full"
+              position="absolute"
+            />
+            {appComponent}
+          </Box>
+        </Box>
+      );
+
+      if (codeMode) {
+        return (
+          <Flex width="100%" height="100%">
+            <Box flex="1">
+              <SchemaEditor
+                defaultCode={JSON.stringify(app, null, 2)}
+                onChange={setCode}
+              />
+            </Box>
+            {appBox}
+          </Flex>
+        );
+      }
+      return (
+        <>
+          <Box width="280px" borderRightWidth="1px" borderColor="gray.200">
+            <Tabs
+              align="center"
+              height="100%"
+              display="flex"
+              flexDirection="column"
+              textAlign="left"
+              isLazy
+            >
+              <TabList background="gray.50">
+                <Tab>Explorer</Tab>
+                <Tab>UI Tree</Tab>
+                <Tab>State</Tab>
+              </TabList>
+              <TabPanels flex="1" overflow="auto">
+                <TabPanel>
+                  <Explorer />
+                </TabPanel>
+                <TabPanel p={0}>
+                  <StructureTree
+                    components={components}
+                    selectedComponentId={selectedComponentId}
+                    onSelectComponent={id => editorStore.setSelectedComponentId(id)}
+                    registry={registry}
+                  />
+                </TabPanel>
+                <TabPanel p={0} height="100%">
+                  <StateEditor code={JSON.stringify(stateStore, null, 2)} />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
          </Box>
          {appBox}
-        </Flex>
-      );
-    }
-    return (
-      <>
-        <Box width="280px" borderRightWidth="1px" borderColor="gray.200">
-          <Tabs
-            align="center"
-            height="100%"
-            display="flex"
-            flexDirection="column"
-            textAlign="left"
-            isLazy
-          >
-            <TabList background="gray.50">
-              <Tab>Explorer</Tab>
-              <Tab>UI Tree</Tab>
-              <Tab>State</Tab>
-            </TabList>
-            <TabPanels flex="1" overflow="auto">
-              <TabPanel>
-                <Explorer appStorage={appStorage} />
-              </TabPanel>
-              <TabPanel p={0}>
-                <StructureTree
-                  components={components}
-                  selectedComponentId={selectedComponentId}
-                  onSelectComponent={id => setSelectedComponentId(id)}
-                  registry={registry}
-                />
-              </TabPanel>
-              <TabPanel p={0} height="100%">
-                <StateEditor code={JSON.stringify(stateStore, null, 2)} />
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </Box>
-        {appBox}
-        <Box width="320px" borderLeftWidth="1px" borderColor="gray.200" overflow="auto">
-          <Tabs
-            align="center"
-            textAlign="left"
-            height="100%"
-            display="flex"
-            flexDirection="column"
-          >
-            <TabList background="gray.50">
-              <Tab>Inspect</Tab>
-              <Tab>Insert</Tab>
-            </TabList>
-            <TabPanels flex="1" overflow="auto">
-              <TabPanel p={0}>
-                <ComponentForm
-                  app={app}
-                  selectedId={selectedComponentId}
-                  registry={registry}
-                  appModelManager={appModelManager}
-                />
-              </TabPanel>
-              <TabPanel p={0}>
-                <ComponentList registry={registry} />
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </Box>
-      </>
-    );
-  };
-
-  return (
-    <KeyboardEventWrapper selectedComponentId={selectedComponentId}>
-      <Box display="flex" height="100%" width="100%" flexDirection="column">
-        <EditorHeader
-          scale={scale}
-          setScale={setScale}
-          onPreview={() => setPreview(true)}
-          codeMode={codeMode}
-          onCodeMode={v => {
-            setCodeMode(v);
-            if (!v && code) {
-              eventBus.send('operation', new ReplaceAppLeafOperation(JSON.parse(code)));
-            }
-          }}
-        />
-        <Box display="flex" flex="1" overflow="auto">
-          {renderMain()}
-        </Box>
-      </Box>
-      {preview && (
-        <PreviewModal onClose={() => setPreview(false)}>
-          <Box width="100%" height="100%">
-            <App
-              options={JSON.parse(JSON.stringify(app))}
-              debugEvent={false}
-              debugStore={false}
-            />
+          <Box width="320px" borderLeftWidth="1px" borderColor="gray.200" overflow="auto">
+            <Tabs
+              align="center"
+              textAlign="left"
+              height="100%"
+              display="flex"
+              flexDirection="column"
+            >
+              <TabList background="gray.50">
+                <Tab>Inspect</Tab>
+                <Tab>Insert</Tab>
+              </TabList>
+              <TabPanels flex="1" overflow="auto">
+                <TabPanel p={0}>
+                  <ComponentForm
+                    app={app}
+                    selectedId={selectedComponentId}
+                    registry={registry}
+                  />
+                </TabPanel>
+                <TabPanel p={0}>
+                  <ComponentList registry={registry} />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
          </Box>
-        </PreviewModal>
-      )}
-    </KeyboardEventWrapper>
-  );
-};
+        </>
+      );
+    };
+
+    return (
+      <KeyboardEventWrapper selectedComponentId={selectedComponentId}>
+        <Box display="flex" height="100%" width="100%" flexDirection="column">
+          <EditorHeader
+            scale={scale}
+            setScale={setScale}
+            onPreview={() => setPreview(true)}
+            codeMode={codeMode}
+            onCodeMode={v => {
+              setCodeMode(v);
+              if (!v && code) {
+                eventBus.send('operation', new ReplaceAppLeafOperation(JSON.parse(code)));
+              }
+            }}
+          />
+          <Box display="flex" flex="1" overflow="auto">
+            {renderMain()}
+          </Box>
+        </Box>
+        {preview && (
+          <PreviewModal onClose={() => setPreview(false)}>
+            <Box width="100%" height="100%">
+              <App
+                options={JSON.parse(JSON.stringify(app))}
+                debugEvent={false}
+                debugStore={false}
+              />
+            </Box>
+          </PreviewModal>
+        )}
+      </KeyboardEventWrapper>
+    );
+  }
+);
--- a/packages/editor/src/components/Explorer/Explorer.tsx
+++ b/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 = {
-  appStorage: AppStorage;
-};
-
-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;
+export const Explorer: React.FC = observer(() => {
+  const { app, modules, updateCurrentEditingTarget } = editorStore;
  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,14 @@ export const Explorer: React.FC<ExplorerProps> = ({ appStorage }) => {
    />
  );

-  const { modules } = useAppStorage(appStorage);
  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 +61,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;
--- a/packages/editor/src/eventBus.ts
+++ b/packages/editor/src/eventBus.ts
@ -1,23 +1,17 @@
 import mitt from 'mitt';
-import { Application, ApplicationComponent } from '@sunmao-ui/core';
+import { ApplicationComponent } from '@sunmao-ui/core';
 import { IOperation } from './operations/type';
-import { ImplementedRuntimeModule } from '../../runtime/lib';
-
-export const SelectComponentEvent = 'selectComponent';
-export const HoverComponentEvent = 'hoverComponent';

 export type EventNames = {
  operation: IOperation;
  redo: undefined;
  undo: undefined;
-  componentsReload: ApplicationComponent[];
+  // when switch app or module, current components refresh
+  componentsRefresh: ApplicationComponent[];
+  // components change by operation
  componentsChange: ApplicationComponent[];
-  [SelectComponentEvent]: string;
-  [HoverComponentEvent]: string;
-
-  // for state decorators
-  appChange: Application;
-  modulesChange: ImplementedRuntimeModule[];
+  // it is only used for some operations' side effect
+  selectComponent: string;
 }

 const emitter = mitt<EventNames>();
--- a/packages/editor/src/main.tsx
+++ b/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>,
--- a/packages/editor/src/operations/AppModelManager.ts
+++ b/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);
+    eventBus.on('componentsRefresh', components => {
+      this.components = components;
+      this.operationStack = new OperationList();
    });
  }

--- a/packages/editor/src/operations/leaf/updateSelectComponentLeafOperation.ts
+++ b/packages/editor/src/operations/leaf/updateSelectComponentLeafOperation.ts
@ -1,5 +1,5 @@
 import { ApplicationComponent } from '@sunmao-ui/core';
-import { eventBus, SelectComponentEvent } from '../../eventBus';
+import { eventBus } from '../../eventBus';
 import { BaseLeafOperation } from '../type';

 export type UpdateSelectComponentLeafOperationContext = {
@ -12,21 +12,21 @@ export class UpdateSelectComponentLeafOperation extends BaseLeafOperation<Update
  do(prev: ApplicationComponent[]): ApplicationComponent[] {
    this.prevId = this.context.componentId || prev[0].id;
    setTimeout(() => {
-      eventBus.send(SelectComponentEvent, this.context.newId);
+      eventBus.send('selectComponent', this.context.newId);
    });
    return prev;
  }

  redo(prev: ApplicationComponent[]): ApplicationComponent[] {
    setTimeout(() => {
-      eventBus.send(SelectComponentEvent, this.context.newId);
+      eventBus.send('selectComponent', this.context.newId);
    });
    return prev;
  }

  undo(prev: ApplicationComponent[]): ApplicationComponent[] {
    setTimeout(() => {
-      eventBus.send(SelectComponentEvent, this.prevId);
+      eventBus.send('selectComponent', this.prevId);
    });
    return prev;
  }
--- a/packages/editor/src/operations/useAppModel.ts
+++ b/packages/editor/src/operations/useAppModel.ts
@ -1,25 +0,0 @@
-import { ApplicationComponent } from '@sunmao-ui/core';
-import { useEffect, useState } from 'react';
-import { eventBus } from '../eventBus';
-import { AppModelManager } from './AppModelManager';
-
-export function useAppModel(appModalManager: AppModelManager) {
-  const [components, setComponents] = useState<ApplicationComponent[]>(
-    appModalManager.components
-  );
-
-  useEffect(() => {
-    const onComponents = (components: ApplicationComponent[]) => {
-      setComponents(() => components);
-    };
-    eventBus.on('componentsChange', onComponents);
-
-    return () => {
-      eventBus.off('componentsChange', onComponents);
-    };
-  }, []);
-
-  return {
-    components,
-  };
-}
--- a/packages/editor/src/playground.tsx
+++ b/packages/editor/src/playground.tsx
@ -8,8 +8,6 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';

 import { Editor } from './components/Editor';
-import { AppModelManager } from './operations/AppModelManager';
-import { appStorage } from './setup';

 type Example = {
  name: string;
@ -22,7 +20,7 @@ type Example = {
 const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
  const [example, setExample] = useState<Example | null>(examples[0]);

-  const { App, registry, stateStore, appModelManager, apiService } = useMemo(() => {
+  const { App, registry, stateStore, apiService } = useMemo(() => {
    if (!example) {
      return {};
    }
@ -37,13 +35,11 @@ const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
      registry.registerModule(m);
    });
    localStorage.removeItem('schema');
-    const appModelManager = new AppModelManager(appStorage.components);

    return {
      App,
      registry,
      stateStore,
-      appModelManager,
      apiService,
    };
  }, [example]);
@ -82,17 +78,13 @@ const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
        </Box>
      </Box>
      <Box flex="1">
-        {appModelManager && (
-          <Editor
-            key={example!.name}
-            App={App!}
-            registry={registry!}
-            stateStore={stateStore!}
-            apiService={apiService!}
-            appModelManager={appModelManager}
-            appStorage={appStorage}
-          />
-        )}
+        <Editor
+          key={example!.name}
+          App={App!}
+          registry={registry!}
+          stateStore={stateStore!}
+          apiService={apiService!}
+        />
      </Box>
    </Flex>
  );
--- a/packages/editor/src/setup.ts
+++ b/packages/editor/src/setup.ts
@ -1,5 +1,4 @@
 import { initSunmaoUI } from '@sunmao-ui/runtime';
-import { AppStorage } from './AppStorage';
 import { AppModelManager } from './operations/AppModelManager';

 const ui = initSunmaoUI();
@ -8,8 +7,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(appStorage.components);
+const appModelManager = new AppModelManager();

 export {
  ui,
@ -17,6 +15,5 @@ export {
  registry,
  apiService,
  stateStore,
-  appStorage,
  appModelManager,
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -7264,6 +7264,16 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==

+mobx-react-lite@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.2.tgz#cee5f09e6b0e4d2705d87276baf1de74d997fa33"
+  integrity sha512-FxJJMqmHcnQYOVVs2DdjNHioGlFsXF5/9VHztS9NAfIT3DYrxNZzVi119Zr/OmlWKkWNkAsssSNzPkqautfL4A==
+
+mobx@^6.3.8:
+  version "6.3.8"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.8.tgz#a4654b1b69c683237f2444cf0af39a621d4611af"
+  integrity sha512-RfG2y766P1o9u9xrQht/HBXEoUPIr4B3Gjri3reLW/TuHm3I/3TfBBS0OaeMbw19RIF0AymqjDNlJgakN4ZK7g==
+
 modify-values@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"