From 15bd209be81de0ac22b015108b310bc670bc8a6c Mon Sep 17 00:00:00 2001 From: Bowen Tan Date: Mon, 17 Jan 2022 15:01:37 +0800 Subject: [PATCH] decouple localstorage with sunmaoEditor --- packages/editor/__tests__/sevices.ts | 4 +- packages/editor/src/AppStorage.ts | 53 +++++-------------- packages/editor/src/EditorStore.ts | 2 +- packages/editor/src/LocalStorageManager.ts | 39 ++++++++++++++ .../Explorer/ExplorerForm/AppMetaDataForm.tsx | 2 +- .../ExplorerForm/ModuleMetaDataForm.tsx | 2 +- packages/editor/src/index.ts | 2 +- packages/editor/src/init.tsx | 2 +- packages/editor/src/main.tsx | 13 +++-- packages/editor/src/playground.tsx | 4 +- 10 files changed, 72 insertions(+), 51 deletions(-) create mode 100644 packages/editor/src/LocalStorageManager.ts diff --git a/packages/editor/__tests__/sevices.ts b/packages/editor/__tests__/sevices.ts index 1e87e750..b608c1e8 100644 --- a/packages/editor/__tests__/sevices.ts +++ b/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); diff --git a/packages/editor/src/AppStorage.ts b/packages/editor/src/AppStorage.ts index dc8d64f8..a9e20ffd 100644 --- a/packages/editor/src/AppStorage.ts +++ b/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) { diff --git a/packages/editor/src/EditorStore.ts b/packages/editor/src/EditorStore.ts index 3cb26f2f..755b3e4e 100644 --- a/packages/editor/src/EditorStore.ts +++ b/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, diff --git a/packages/editor/src/LocalStorageManager.ts b/packages/editor/src/LocalStorageManager.ts new file mode 100644 index 00000000..68ed8843 --- /dev/null +++ b/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)); + } +} diff --git a/packages/editor/src/components/Explorer/ExplorerForm/AppMetaDataForm.tsx b/packages/editor/src/components/Explorer/ExplorerForm/AppMetaDataForm.tsx index 1fe2ea06..ffb74d36 100644 --- a/packages/editor/src/components/Explorer/ExplorerForm/AppMetaDataForm.tsx +++ b/packages/editor/src/components/Explorer/ExplorerForm/AppMetaDataForm.tsx @@ -18,7 +18,7 @@ export const AppMetaDataForm: React.FC = observer( ({ data, services }) => { const { editorStore } = services; const onSubmit = (value: AppMetaDataFormData) => { - editorStore.appStorage.saveAppMetaDataInLS(value); + editorStore.appStorage.saveAppMetaData(value); }; const formik = useFormik({ initialValues: data, diff --git a/packages/editor/src/components/Explorer/ExplorerForm/ModuleMetaDataForm.tsx b/packages/editor/src/components/Explorer/ExplorerForm/ModuleMetaDataForm.tsx index 7025d34c..080711ca 100644 --- a/packages/editor/src/components/Explorer/ExplorerForm/ModuleMetaDataForm.tsx +++ b/packages/editor/src/components/Explorer/ExplorerForm/ModuleMetaDataForm.tsx @@ -20,7 +20,7 @@ export const ModuleMetaDataForm: React.FC = observer( ({ initData, services }) => { const { editorStore } = services; const onSubmit = (value: ModuleMetaDataFormData) => { - editorStore.appStorage.saveModuleMetaDataInLS( + editorStore.appStorage.saveModuleMetaData( { originName: initData.name, originVersion: initData.version }, value ); diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index 1a58d4ff..b60eee8f 100644 --- a/packages/editor/src/index.ts +++ b/packages/editor/src/index.ts @@ -1 +1 @@ -export { initSunmaoEditor } from './init'; +export { initSunmaoUIEditor } from './init'; diff --git a/packages/editor/src/init.tsx b/packages/editor/src/init.tsx index 5fa2223b..473c9be7 100644 --- a/packages/editor/src/init.tsx +++ b/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', diff --git a/packages/editor/src/main.tsx b/packages/editor/src/main.tsx index da83a31f..f8141cdb 100644 --- a/packages/editor/src/main.tsx +++ b/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 = {}) { diff --git a/packages/editor/src/playground.tsx b/packages/editor/src/playground.tsx index 95503446..7bd420ee 100644 --- a/packages/editor/src/playground.tsx +++ b/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);