replace manager

packages/editor/__tests__/sevices.ts

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

packages/editor/src/init.tsx

@@ -1,5 +1,5 @@
 import { Editor as _Editor } from './components/Editor';
-import { initSunmaoUI, SunmaoUIRuntimeProps } from '@sunmao-ui/runtime';
+import { initSunmaoUI, SunmaoLib, SunmaoUIRuntimeProps } from '@sunmao-ui/runtime';
 import { AppModelManager } from './operations/AppModelManager';
 import React from 'react';
 import {
@@ -15,6 +15,7 @@ import { AppStorage } from './services/AppStorage';
 import { Application, Module } from '@sunmao-ui/core';
 
 type SunmaoUIEditorProps = {
+  libs?: SunmaoLib[];
   runtimeProps?: SunmaoUIRuntimeProps;
   storageHanlder?: StorageHandler;
   defaultApplication?: Application;
@@ -45,14 +46,18 @@ export function initSunmaoUIEditor(props: SunmaoUIEditorProps = {}) {
 
   const App = ui.App;
   const registry = ui.registry;
+  props.libs?.forEach(lib => {
+    registry.installLib(lib);
+  });
+
   const stateManager = ui.stateManager;
   const eventBus = initEventBus();
-  const appModelManager = new AppModelManager(eventBus);
   const appStorage = new AppStorage(
     props.defaultApplication,
     props.defaultModules,
     props.storageHanlder
   );
+  const appModelManager = new AppModelManager(eventBus, registry, appStorage.app.spec.components);
   const editorStore = new EditorStore(eventBus, registry, stateManager, appStorage);
   const services = {
     App,

packages/editor/src/main.tsx

@@ -16,6 +16,7 @@ type Options = Partial<{
 
 const lsManager = new LocalStorageManager();
 const { Editor, registry } = initSunmaoUIEditor({
+  libs: [sunmaoChakraUILib],
   storageHanlder: {
     onSaveApp(app) {
        lsManager.saveAppInLS(app);
@@ -38,7 +39,6 @@ export default function renderApp(options: Options = {}) {
   components.forEach(c => registry.registerComponent(c));
   traits.forEach(t => registry.registerTrait(t));
   modules.forEach(m => registry.registerModule(m));
-  registry.installLib(sunmaoChakraUILib);
 
   ReactDOM.render(
     <StrictMode>

packages/editor/src/operations/AppModelManager.ts

@@ -1,30 +1,34 @@
 import { ComponentSchema } from '@sunmao-ui/core';
+import { Registry } from '@sunmao-ui/runtime';
 import { EventBusType } from '../services/eventBus';
+import { AppModel } from '../AppModel/AppModel';
 import { IUndoRedoManager, IOperation, OperationList } from './type';
 
 export class AppModelManager implements IUndoRedoManager {
-  components: ComponentSchema[] = [];
+  appModel: AppModel;
   operationStack: OperationList<IOperation> = new OperationList();
 
-  constructor(private eventBus: EventBusType) {
+  constructor(private eventBus: EventBusType, private registry: Registry, initComponents: ComponentSchema[]) {
+    this.appModel = new AppModel(initComponents, this.registry)
+  
     eventBus.on('undo', () => this.undo());
     eventBus.on('redo', () => this.redo());
     eventBus.on('operation', o => this.do(o));
     eventBus.on('componentsRefresh', components => {
-      this.components = components;
+      this.appModel = new AppModel(components, this.registry);
       this.operationStack = new OperationList();
     });
   }
 
-  updateComponents(components: ComponentSchema[]) {
-    this.components = components;
-    this.eventBus.send('componentsChange', this.components);
+  updateComponents(appModel: AppModel) {
+    this.appModel = appModel;
+    this.eventBus.send('componentsChange', this.appModel.toSchema());
   }
 
   do(operation: IOperation): void {
     // TODO: replace by logger
     // console.log('do', operation);
-    const newComponents = operation.do(this.components);
+    const newComponents = operation.do(this.appModel);
     this.operationStack.insert(operation);
     this.updateComponents(newComponents);
   }
@@ -39,7 +43,7 @@ export class AppModelManager implements IUndoRedoManager {
       console.warn('cannot redo as cannot move to next cursor', this.operationStack);
       return;
     }
-    const newComponents = this.operationStack.cursor?.val?.redo(this.components);
+    const newComponents = this.operationStack.cursor?.val?.redo(this.appModel);
     // console.log('redo', this.operationStack.cursor?.val);
     if (newComponents) {
       this.updateComponents(newComponents);
@@ -60,7 +64,7 @@ export class AppModelManager implements IUndoRedoManager {
       console.warn('cannot undo as cannot move to prev cursor', this.operationStack);
       return;
     }
-    const newComponents = this.operationStack.cursor.next?.val?.undo(this.components);
+    const newComponents = this.operationStack.cursor.next?.val?.undo(this.appModel);
     // console.log('undo', this.operationStack.cursor.next?.val);
     if (newComponents) {
       this.updateComponents(newComponents);

packages/editor/src/operations/type.ts

@@ -1,5 +1,5 @@
-import { ComponentSchema } from '@sunmao-ui/core';
 import { Registry } from '@sunmao-ui/runtime';
+import { AppModel } from "../AppModel/AppModel";
 
 export const leafSymbol = Symbol('leaf');
 export const branchSymbol = Symbol('branch');
@@ -131,9 +131,9 @@ export interface IOperation<TContext = any> extends IUndoRedo {
    * infer the type of operation, leaf or branch
    */
   type: symbol;
-  do(prev: ComponentSchema[]): ComponentSchema[];
-  redo(prev: ComponentSchema[]): ComponentSchema[];
-  undo(prev: ComponentSchema[]): ComponentSchema[];
+  do(prev: AppModel): AppModel;
+  redo(prev: AppModel): AppModel;
+  undo(prev: AppModel): AppModel;
 }
 
 /**
@@ -153,13 +153,13 @@ export abstract class BaseLeafOperation<TContext> implements IOperation<TContext
    * @param prev prev application schema
    * @returns changed application schema
    */
-  abstract do(prev: ComponentSchema[]): ComponentSchema[];
+  abstract do(prev: AppModel): AppModel;
   /**
    * for leaf operation, most time redo is the same as do, override it if not
    * @param prev prev application schema
    * @returns changed application schema
    */
-  redo(prev: ComponentSchema[]): ComponentSchema[] {
+  redo(prev: AppModel): AppModel {
     return this.do(prev);
   }
   /**
@@ -167,7 +167,7 @@ export abstract class BaseLeafOperation<TContext> implements IOperation<TContext
    * @param prev prev application schema
    * @returns changed application schema
    */
-  abstract undo(prev: ComponentSchema[]): ComponentSchema[];
+  abstract undo(prev: AppModel): AppModel;
 
   static isLeafOperation<T>(op: IOperation<T>): op is BaseLeafOperation<T> {
     return op.type === leafSymbol;
@@ -196,14 +196,14 @@ export abstract class BaseBranchOperation<TContext>
    * @param prev prev application schema
    * @returns changed application schema
    */
-  abstract do(prev: ComponentSchema[]): ComponentSchema[];
+  abstract do(prev: AppModel): AppModel;
 
   /**
    * for branch operation, redo is the same as do
    * @param prev prev application schema
    * @returns changed application schema
    */
-  redo(prev: ComponentSchema[]): ComponentSchema[] {
+  redo(prev: AppModel): AppModel {
     return this.operationStack.reduce((prev, node) => {
       prev = node.redo(prev);
       return prev;
@@ -216,7 +216,7 @@ export abstract class BaseBranchOperation<TContext>
    * @param prev prev application schema
    * @returns changed application schema
    */
-  undo(prev: ComponentSchema[]): ComponentSchema[] {
+  undo(prev: AppModel): AppModel {
     return this.operationStack.reduceRight((prev, node) => {
       prev = node.undo(prev);
       return prev;

packages/editor/src/playground.tsx

@@ -19,9 +19,9 @@ type Example = {
 const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
   const [example, setExample] = useState<Example | null>(examples[0]);
   const { Editor, registry } = initSunmaoUIEditor({
+    libs: [sunmaoChakraUILib],
     defaultApplication: example?.value.app,
   });
-  registry.installLib(sunmaoChakraUILib);
   example?.value.modules?.forEach(m => registry.registerModule(m));
 
   return (