add initSunmaoUIEditorProps

packages/editor/src/AppStorage.ts

@@ -1,18 +1,25 @@
 import { observable, makeObservable, action, toJS } from 'mobx';
-import { Application, ComponentSchema } from '@sunmao-ui/core';
-import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
+import { Application, ComponentSchema, Module } from '@sunmao-ui/core';
 import { produce } from 'immer';
 import { DefaultNewModule, EmptyAppSchema } from './constants';
 import { addModuleId, removeModuleId } from './utils/addModuleId';
 import { cloneDeep } from 'lodash-es';
+import { StorageHandler } from './types';
 
 export class AppStorage {
-  app: Application = this.getDefaultAppFromLS();
-  modules: ImplementedRuntimeModule[] = this.getModulesFromLS();
+  app: Application;
+  modules: Module[];
   static AppLSKey = 'schema';
   static ModulesLSKey = 'modules';
 
-  constructor() {
+  constructor(
+    defaultApplication?: Application,
+    defaultModules?: Module[],
+    private storageHanlder?: StorageHandler
+  ) {
+    this.app = this.getAppFromLS() || defaultApplication || EmptyAppSchema;
+    this.modules = this.getModulesFromLS() || defaultModules || [];
+
     makeObservable(this, {
       app: observable.shallow,
       modules: observable.shallow,
@@ -21,27 +28,25 @@ export class AppStorage {
     });
   }
 
-  getDefaultAppFromLS(): Application {
+  private getAppFromLS(): Application | void {
     try {
       const appFromLS = localStorage.getItem(AppStorage.AppLSKey);
       if (appFromLS) {
         return JSON.parse(appFromLS);
       }
-      return EmptyAppSchema;
     } catch (error) {
-      return EmptyAppSchema;
+      return undefined;
     }
   }
 
-  getModulesFromLS(): ImplementedRuntimeModule[] {
+  private getModulesFromLS(): Module[] | void {
     try {
       const modulesFromLS = localStorage.getItem(AppStorage.ModulesLSKey);
       if (modulesFromLS) {
         return JSON.parse(modulesFromLS).map(removeModuleId);
       }
-      return [];
     } catch (error) {
-      return [];
+      return undefined;
     }
   }
 
@@ -121,17 +126,20 @@ export class AppStorage {
 
   private saveAppInLS() {
     localStorage.setItem(AppStorage.AppLSKey, JSON.stringify(this.app));
+    this.storageHanlder?.onSaveApp && this.storageHanlder?.onSaveApp(toJS(this.app));
   }
 
   private saveModulesInLS() {
-    const modules = cloneDeep(this.modules).map(addModuleId)
+    const modules = cloneDeep(this.modules).map(addModuleId);
     localStorage.setItem(AppStorage.ModulesLSKey, JSON.stringify(modules));
+    this.storageHanlder?.onSaveModules &&
+      this.storageHanlder?.onSaveModules(toJS(modules));
   }
 
   setApp(app: Application) {
     this.app = app;
   }
-  setModules(modules: ImplementedRuntimeModule[]) {
+  setModules(modules: Module[]) {
     this.modules = modules;
   }
 }

packages/editor/src/EditorStore.ts

@@ -30,13 +30,13 @@ export class EditorStore {
   currentComponentsVersion = 0;
   lastSavedComponentsVersion = 0;
 
-  appStorage = new AppStorage();
   schemaValidator: SchemaValidator;
 
   constructor(
     private eventBus: EventBusType,
     private registry: Registry,
-    private stateManager: StateManager
+    private stateManager: StateManager,
+    private appStorage: AppStorage
   ) {
     this.schemaValidator = new SchemaValidator(this.registry)
     makeAutoObservable(this, {

packages/editor/src/init.tsx

@@ -1,5 +1,5 @@
 import { Editor as _Editor } from './components/Editor';
-import { initSunmaoUI } from '@sunmao-ui/runtime';
+import { initSunmaoUI, SunmaoUIRuntimeProps } from '@sunmao-ui/runtime';
 import { AppModelManager } from './operations/AppModelManager';
 import React from 'react';
 import {
@@ -10,8 +10,18 @@ import {
 } from '@chakra-ui/react';
 import { initEventBus } from './eventBus';
 import { EditorStore } from './EditorStore';
+import { StorageHandler } from './types';
+import { AppStorage } from './AppStorage';
+import { Application, Module } from '@sunmao-ui/core';
 
-export function initSunmaoEditor() {
+type SunmaoUIEditorProps = {
+  runtimeProps?: SunmaoUIRuntimeProps;
+  storageHanlder?: StorageHandler;
+  defaultApplication?: Application;
+  defaultModules?: Module[];
+};
+
+export function initSunmaoEditor(props: SunmaoUIEditorProps = {}) {
   const editorTheme = extendTheme(
     withDefaultSize({
       size: 'sm',
@@ -31,14 +41,19 @@ export function initSunmaoEditor() {
     })
   );
 
-  const ui = initSunmaoUI();
+  const ui = initSunmaoUI(props.runtimeProps);
 
   const App = ui.App;
   const registry = ui.registry;
   const stateManager = ui.stateManager;
   const eventBus = initEventBus();
   const appModelManager = new AppModelManager(eventBus);
-  const editorStore = new EditorStore(eventBus, registry, stateManager);
+  const appStorage = new AppStorage(
+    props.defaultApplication,
+    props.defaultModules,
+    props.storageHanlder
+  );
+  const editorStore = new EditorStore(eventBus, registry, stateManager, appStorage);
   const services = {
     App,
     registry: ui.registry,

packages/editor/src/main.tsx

@@ -6,7 +6,6 @@ import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
 
 import './styles.css';
 
-
 type Options = Partial<{
   components: Parameters<Registry['registerComponent']>[0][];
   traits: Parameters<Registry['registerTrait']>[0][];
@@ -14,7 +13,13 @@ type Options = Partial<{
   container: Element;
 }>;
 
-const { Editor, registry } = initSunmaoEditor();
+const { Editor, registry } = initSunmaoEditor({
+  storageHanlder: {
+    onSaveApp(app) {
+      console.log('save', app);
+    },
+  },
+});
 
 export default function renderApp(options: Options = {}) {
   const {

packages/editor/src/types.ts

@@ -1,3 +1,4 @@
+import { Application, Module } from '@sunmao-ui/core';
 import { initSunmaoUI, Registry, StateManager } from '@sunmao-ui/runtime';
 import { EditorStore } from './EditorStore';
 import { EventBusType } from './eventBus';
@@ -14,3 +15,8 @@ export type EditorServices = {
   eventBus: EventBusType;
   editorStore: EditorStore;
 };
+
+export type StorageHandler = {
+  onSaveApp?: (app: Application) => void
+  onSaveModules?: (module: Module[]) => void
+}

packages/runtime/src/index.ts

@@ -6,9 +6,13 @@ import { mountUtilMethods } from './services/util-methods';
 import { initGlobalHandlerMap } from './services/handler';
 import './style.css';
 
-export function initSunmaoUI(dependencies = {}) {
+export type SunmaoUIRuntimeProps = {
+  dependencies?: Record<string, any>
+}
+
+export function initSunmaoUI(props: SunmaoUIRuntimeProps = {}) {
   const registry = initRegistry();
-  const stateManager = new StateManager(dependencies);
+  const stateManager = new StateManager(props.dependencies);
   const globalHandlerMap = initGlobalHandlerMap();
   const apiService = initApiService();
   mountUtilMethods(apiService);