fix: 修复修改 componentsMap 后无法刷新视图的 bug

packages/designer/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   extends: 'eslint-config-ali/typescript/react',
+  ignorePatterns: [ 'tests/* '],
   rules: {
     'react/no-multi-comp': 0,
     'no-unused-expressions': 1,

packages/designer/jest.config.js

@@ -1,17 +1,11 @@
-// jest.config.js
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
-// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
-// which contains the path mapping (ie the `compilerOptions.paths` option):
-
 const esModules = ['@recore/obx-react'].join('|');
-// console.log('>>> compilerOptions', compilerOptions);
+
-// console.log('>>> compilerOptions', pathsToModuleNameMapper(compilerOptions.paths));
 module.exports = {
-  /* transform: {
+  // transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest',
+  //   '^.+\\.[jt]sx?$': 'babel-jest',
-    // '^.+\\.(ts|tsx)$': 'ts-jest',
+  //   // '^.+\\.(ts|tsx)$': 'ts-jest',
-    // '^.+\\.(js|jsx)$': 'babel-jest',
+  //   // '^.+\\.(js|jsx)$': 'babel-jest',
-  }, */
+  // },
   // testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
   transformIgnorePatterns: [
     `/node_modules/(?!${esModules})/`,

packages/designer/src/document/node/node.ts

@@ -263,6 +263,16 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     }
   }
 
+  private didDropOut(dragment: Node) {
+    const callbacks = this.componentMeta.getMetadata().experimental?.callbacks;
+    if (callbacks?.onNodeRemove) {
+      callbacks?.onNodeRemove.call(this, dragment, this);
+    }
+    if (this._parent) {
+      this._parent.didDropOut(dragment);
+    }
+  }
+
   /**
    * 内部方法，请勿使用
    * @param useMutator 是否触发联动逻辑
@@ -280,6 +290,9 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
         this._parent.children.unlinkChild(this);
       }
     }
+    // if (useMutator) {
+    //   this._parent?.didDropOut(this);
+    // }
     // 建立新的父子关系
     this._parent = parent;
     if (parent) {

packages/designer/tests/project/project.test.ts

@@ -27,7 +27,7 @@ jest.mock('../../src/designer/designer', () => {
 
 let designer = null;
 beforeAll(() => {
-  designer = new Designer({});
+  designer = new Designer({} as any);
 });
 
 describe('schema 渲染测试', () => {
@@ -47,7 +47,7 @@ describe('schema 渲染测试', () => {
           },
         }],
       }],
-    });
+    } as any);
     project.open();
     expect(project).toBeTruthy();
     const { currentDocument } = project;

packages/react-renderer/package.json

@@ -54,5 +54,5 @@
   "publishConfig": {
     "registry": "http://registry.npm.alibaba-inc.com"
   },
-  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@0.13.1-4/build/index.html"
+  "homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-react-renderer@0.13.1-5/build/index.html"
 }

packages/react-simulator-renderer/src/renderer.ts

@@ -178,7 +178,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
 
   constructor() {
     this.dispose = host.connect(this, async () => {
-      await host.waitForCurrentDocument();
       // sync layout config
       this._layout = host.project.get('config').layout;
 
@@ -186,6 +185,9 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {
         this._libraryMap = host.libraryMap || {};
         this._componentsMap = host.designer.componentsMap;
+        // 需要注意的是，autorun 依赖收集的是同步执行的代码，所以 await / promise / callback 里的变量不会被收集依赖
+        // 此例中，host.designer.componentsMap 是需要被收集依赖的，否则无法响应式
+        await host.waitForCurrentDocument();
         this.buildComponents();
       }
 
@@ -211,11 +213,9 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
         : '/';
       if (firstRun) {
         initialEntry = path;
-      } else {
+      } else if (this.history.location.pathname !== path) {
-        if (this.history.location.pathname !== path) {
         this.history.replace(path);
       }
-      }
     });
     const history = createMemoryHistory({
       initialEntries: [initialEntry],