decouple localstorage with sunmaoEditor

packages/editor/__tests__/sevices.ts

@@ -1,4 +1,4 @@
-import { initSunmaoEditor } from '../src';
+import { initSunmaoUIEditor } from '../src';
 import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
-export const { registry } = initSunmaoEditor();
+export const { registry } = initSunmaoUIEditor();
 registry.installLib(sunmaoChakraUILib);

packages/editor/src/AppStorage.ts

@@ -17,8 +17,8 @@ export class AppStorage {
     defaultModules?: Module[],
     private storageHanlder?: StorageHandler
   ) {
-    this.app = this.getAppFromLS() || defaultApplication || EmptyAppSchema;
-    this.modules = this.getModulesFromLS() || defaultModules || [];
+    this.app = defaultApplication || EmptyAppSchema;
+    this.modules = defaultModules?.map(removeModuleId) || []
 
     makeObservable(this, {
       app: observable.shallow,
@@ -28,31 +28,9 @@ export class AppStorage {
     });
   }
 
-  private getAppFromLS(): Application | void {
-    try {
-      const appFromLS = localStorage.getItem(AppStorage.AppLSKey);
-      if (appFromLS) {
-        return JSON.parse(appFromLS);
-      }
-    } catch (error) {
-      return undefined;
-    }
-  }
-
-  private getModulesFromLS(): Module[] | void {
-    try {
-      const modulesFromLS = localStorage.getItem(AppStorage.ModulesLSKey);
-      if (modulesFromLS) {
-        return JSON.parse(modulesFromLS).map(removeModuleId);
-      }
-    } catch (error) {
-      return undefined;
-    }
-  }
-
   createModule() {
     this.setModules([...this.modules, DefaultNewModule]);
-    this.saveModulesInLS();
+    this.saveModules();
   }
 
   removeModule(v: string, n: string) {
@@ -61,10 +39,10 @@ export class AppStorage {
         ({ version, metadata: { name } }) => version !== v && name !== n
       )
     );
-    this.saveModulesInLS();
+    this.saveModules();
   }
 
-  saveComponentsInLS(
+  saveComponents(
     type: 'app' | 'module',
     version: string,
     name: string,
@@ -76,7 +54,7 @@ export class AppStorage {
           draft.spec.components = components;
         });
         this.setApp(newApp);
-        this.saveAppInLS();
+        this.saveApplication();
         break;
       case 'module':
         const i = this.modules.findIndex(
@@ -86,21 +64,21 @@ export class AppStorage {
           draft[i].impl = components;
         });
         this.setModules(newModules);
-        this.saveModulesInLS();
+        this.saveModules();
         break;
     }
   }
 
-  saveAppMetaDataInLS({ version, name }: { version: string; name: string }) {
+  saveAppMetaData({ version, name }: { version: string; name: string }) {
     const newApp = produce(toJS(this.app), draft => {
       draft.metadata.name = name;
       draft.version = version;
     });
     this.setApp(newApp);
-    this.saveAppInLS();
+    this.saveApplication();
   }
 
-  saveModuleMetaDataInLS(
+  saveModuleMetaData(
     { originName, originVersion }: { originName: string; originVersion: string },
     {
       version,
@@ -121,19 +99,16 @@ export class AppStorage {
       draft[i].version = version;
     });
     this.setModules(newModules);
-    this.saveModulesInLS();
+    this.saveModules();
   }
 
-  private saveAppInLS() {
-    localStorage.setItem(AppStorage.AppLSKey, JSON.stringify(this.app));
+  private saveApplication() {
     this.storageHanlder?.onSaveApp && this.storageHanlder?.onSaveApp(toJS(this.app));
   }
 
-  private saveModulesInLS() {
+  private saveModules() {
     const modules = cloneDeep(this.modules).map(addModuleId);
-    localStorage.setItem(AppStorage.ModulesLSKey, JSON.stringify(modules));
-    this.storageHanlder?.onSaveModules &&
-      this.storageHanlder?.onSaveModules(toJS(modules));
+    this.storageHanlder?.onSaveModules && this.storageHanlder?.onSaveModules(modules);
   }
 
   setApp(app: Application) {

packages/editor/src/EditorStore.ts

@@ -133,7 +133,7 @@ export class EditorStore {
   }
 
   saveCurrentComponents() {
-    this.appStorage.saveComponentsInLS(
+    this.appStorage.saveComponents(
       this.currentEditingTarget.kind,
       this.currentEditingTarget.version,
       this.currentEditingTarget.name,

packages/editor/src/LocalStorageManager.ts

@@ -0,0 +1,39 @@
+import { Application, Module } from '@sunmao-ui/core';
+import { EmptyAppSchema } from './constants';
+
+export class LocalStorageManager {
+  static AppLSKey = 'schema';
+  static ModulesLSKey = 'modules';
+
+  getAppFromLS(): Application {
+    try {
+      const appFromLS = localStorage.getItem(LocalStorageManager.AppLSKey);
+      if (appFromLS) {
+        return JSON.parse(appFromLS);
+      }
+      return EmptyAppSchema;
+    } catch (error) {
+      return EmptyAppSchema;
+    }
+  }
+
+  getModulesFromLS(): Module[] {
+    try {
+      const modulesFromLS = localStorage.getItem(LocalStorageManager.ModulesLSKey);
+      if (modulesFromLS) {
+        return JSON.parse(modulesFromLS);
+      }
+      return [];
+    } catch (error) {
+      return [];
+    }
+  }
+
+  saveAppInLS(app: Application) {
+    localStorage.setItem(LocalStorageManager.AppLSKey, JSON.stringify(app));
+  }
+
+  saveModulesInLS(modules: Module[]) {
+    localStorage.setItem(LocalStorageManager.ModulesLSKey, JSON.stringify(modules));
+  }
+}

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

@@ -18,7 +18,7 @@ export const AppMetaDataForm: React.FC<AppMetaDataFormProps> = observer(
   ({ data, services }) => {
     const { editorStore } = services;
     const onSubmit = (value: AppMetaDataFormData) => {
-      editorStore.appStorage.saveAppMetaDataInLS(value);
+      editorStore.appStorage.saveAppMetaData(value);
     };
     const formik = useFormik({
       initialValues: data,

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

@@ -20,7 +20,7 @@ export const ModuleMetaDataForm: React.FC<ModuleMetaDataFormProps> = observer(
   ({ initData, services }) => {
     const { editorStore } = services;
     const onSubmit = (value: ModuleMetaDataFormData) => {
-      editorStore.appStorage.saveModuleMetaDataInLS(
+      editorStore.appStorage.saveModuleMetaData(
         { originName: initData.name, originVersion: initData.version },
         value
       );

packages/editor/src/index.ts

@@ -1 +1 @@
-export { initSunmaoEditor } from './init';
+export { initSunmaoUIEditor } from './init';

packages/editor/src/init.tsx

@@ -21,7 +21,7 @@ type SunmaoUIEditorProps = {
   defaultModules?: Module[];
 };
 
-export function initSunmaoEditor(props: SunmaoUIEditorProps = {}) {
+export function initSunmaoUIEditor(props: SunmaoUIEditorProps = {}) {
   const editorTheme = extendTheme(
     withDefaultSize({
       size: 'sm',

packages/editor/src/main.tsx

@@ -1,8 +1,9 @@
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import { Registry } from '@sunmao-ui/runtime';
-import { initSunmaoEditor } from './init';
 import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
+import { initSunmaoUIEditor } from './init';
+import { LocalStorageManager } from './LocalStorageManager';
 
 import './styles.css';
 
@@ -13,12 +14,18 @@ type Options = Partial<{
   container: Element;
 }>;
 
-const { Editor, registry } = initSunmaoEditor({
+const lsManager = new LocalStorageManager();
+const { Editor, registry } = initSunmaoUIEditor({
   storageHanlder: {
     onSaveApp(app) {
-      console.log('save', app);
+       lsManager.saveAppInLS(app);
+    },
+    onSaveModules(modules) {
+      lsManager.saveModulesInLS(modules);
     },
   },
+  defaultApplication: lsManager.getAppFromLS(),
+  defaultModules: lsManager.getModulesFromLS(),
 });
 
 export default function renderApp(options: Options = {}) {

packages/editor/src/playground.tsx

@@ -5,7 +5,7 @@ import { StrictMode, useState } from 'react';
 import ReactDOM from 'react-dom';
 import './styles.css';
 
-import { initSunmaoEditor } from './init';
+import { initSunmaoUIEditor } from './init';
 import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
 
 type Example = {
@@ -16,7 +16,7 @@ type Example = {
   };
 };
 
-const { Editor, registry } = initSunmaoEditor();
+const { Editor, registry } = initSunmaoUIEditor();
 
 registry.installLib(sunmaoChakraUILib);