Skip to content

Commit 9b3b4f9

Browse files
liujupingLeoYuan
liujuping
authored and
LeoYuan
committed
fix: renderer not rendering correct components when loading components with loadAsyncLibrary api
1 parent d5daba8 commit 9b3b4f9

File tree

10 files changed

+289
-2
lines changed

10 files changed

+289
-2
lines changed

‎packages/react-simulator-renderer/.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"plugins": [
3+
["@babel/plugin-proposal-decorators", { "legacy": true }],
4+
["@babel/plugin-proposal-class-properties", { "loose": true }]
5+
]
6+
}

‎packages/react-simulator-renderer/build.test.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"plugins": [
3+
"build-plugin-component",
4+
"@alilc/lowcode-test-mate/plugin/index.ts"
5+
]
6+
}

‎packages/react-simulator-renderer/jest.config.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const fs = require('fs');
2+
const { join } = require('path');
3+
const esModules = ['zen-logger'].join('|');
4+
const pkgNames = fs.readdirSync(join('..')).filter(pkgName => !pkgName.startsWith('.'));
5+
6+
const jestConfig = {
7+
// transform: {
8+
// '^.+\\.[jt]sx?$': 'babel-jest',
9+
// // '^.+\\.(ts|tsx)$': 'ts-jest',
10+
// // '^.+\\.(js|jsx)$': 'babel-jest',
11+
// },
12+
// testMatch: ['**/document/node/node.test.ts'],
13+
// testMatch: ['**/designer/builtin-hotkey.test.ts'],
14+
// testMatch: ['**/plugin/plugin-manager.test.ts'],
15+
// testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
16+
transformIgnorePatterns: [
17+
`/node_modules/(?!${esModules})/`,
18+
],
19+
setupFiles: ['./test/utils/host.ts'],
20+
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
21+
collectCoverage: false,
22+
collectCoverageFrom: [
23+
'src/**/*.ts',
24+
'!src/**/*.d.ts',
25+
'!**/node_modules/**',
26+
],
27+
};
28+
29+
// 只对本仓库内的 pkg 做 mapping
30+
jestConfig.moduleNameMapper = {};
31+
jestConfig.moduleNameMapper[`^@alilc/lowcode\\-(${pkgNames.join('|')})$`] = '<rootDir>/../$1/src';
32+
33+
module.exports = jestConfig;

‎packages/react-simulator-renderer/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dist"
1212
],
1313
"scripts": {
14+
"test": "build-scripts test --config build.test.json",
1415
"build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo",
1516
"build:umd": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.umd.json"
1617
},

‎packages/react-simulator-renderer/test/schema/basic.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
export default {
2+
id: 'node_ockvuu8u911',
3+
css: 'body{background-color:#f2f3f5}',
4+
flows: [],
5+
props: {
6+
className: 'page_kvuu9hym',
7+
pageStyle: {
8+
backgroundColor: '#f2f3f5',
9+
},
10+
containerStyle: {},
11+
templateVersion: '1.0.0',
12+
},
13+
state: {},
14+
title: '',
15+
methods: {
16+
__initMethods__: {
17+
type: 'JSExpression',
18+
value: "function (exports, module) { \"use strict\";\n\nexports.__esModule = true;\nexports.func1 = func1;\nexports.helloPage = helloPage;\n\nfunction func1() {\n console.info('hello, this is a page function');\n}\n\nfunction helloPage() {\n // 你可以这么调用其他函数\n this.func1(); // 你可以这么调用组件的函数\n // this.$('textField_xxx').getValue();\n // 你可以这么使用「数据源面板」定义的「变量」\n // this.state.xxx\n // 你可以这么发送一个在「数据源面板」定义的「远程 API」\n // this.dataSourceMap['xxx'].load(data)\n // API 详见：https://go.alibaba-inc.com/help3/API\n} \n}",
19+
},
20+
},
21+
children: [
22+
{
23+
id: 'node_ockvuu8u915',
24+
props: {
25+
fieldId: 'div_kvuu9gl1',
26+
behavior: 'NORMAL',
27+
__style__: {},
28+
customClassName: '',
29+
useFieldIdAsDomId: false,
30+
},
31+
title: '',
32+
children: [
33+
{
34+
id: 'node_ockvuu8u916',
35+
props: {
36+
content: {
37+
use: 'zh_CN',
38+
type: 'JSExpression',
39+
en_US: 'Tips content',
40+
value: '"我是一个简单的测试页面"',
41+
zh_CN: '我是一个简单的测试页面',
42+
extType: 'i18n',
43+
},
44+
fieldId: 'text_kvuu9gl2',
45+
maxLine: 0,
46+
behavior: 'NORMAL',
47+
__style__: {},
48+
showTitle: false,
49+
},
50+
title: '',
51+
condition: true,
52+
componentName: 'Text',
53+
},
54+
],
55+
condition: true,
56+
componentName: 'Div',
57+
},
58+
],
59+
condition: true,
60+
dataSource: {
61+
list: [],
62+
sync: true,
63+
online: [],
64+
offline: [],
65+
globalConfig: {
66+
fit: {
67+
type: 'JSExpression',
68+
value: "function main(){\n 'use strict';\n\nvar __compiledFunc__ = function fit(response) {\n var content = response.content !== undefined ? response.content : response;\n var error = {\n message: response.errorMsg || response.errors && response.errors[0] && response.errors[0].msg || response.content || '远程数据源请求出错，success is false'\n };\n var success = true;\n if (response.success !== undefined) {\n success = response.success;\n } else if (response.hasError !== undefined) {\n success = !response.hasError;\n }\n return {\n content: content,\n success: success,\n error: error\n };\n};\n return __compiledFunc__.apply(this, arguments);\n}",
69+
extType: 'function',
70+
},
71+
},
72+
},
73+
lifeCycles: {
74+
constructor: {
75+
type: 'JSExpression',
76+
value: "function constructor() {\nvar module = { exports: {} };\nvar _this = this;\nthis.__initMethods__(module.exports, module);\nObject.keys(module.exports).forEach(function(item) {\n if(typeof module.exports[item] === 'function'){\n _this[item] = module.exports[item];\n }\n});\n\n}",
77+
extType: 'function',
78+
},
79+
},
80+
componentName: 'Page',
81+
};

‎packages/react-simulator-renderer/test/src/renderer/__snapshots__/demo.test.tsx.snap‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Base should be render NotFoundComponent 1`] = `
4+
<div
5+
className="lce-page page_kvuu9hym"
6+
style={Object {}}
7+
>
8+
<div
9+
componentName="Div"
10+
>
11+
<div
12+
componentName="Text"
13+
>
14+
Component Not Found
15+
</div>
16+
</div>
17+
</div>
18+
`;
19+
20+
exports[`Base should be render Text 1`] = `
21+
<div
22+
className="lce-page page_kvuu9hym"
23+
style={Object {}}
24+
>
25+
<div
26+
componentName="Div"
27+
>
28+
<div
29+
__designMode="design"
30+
__style__={Object {}}
31+
behavior="NORMAL"
32+
componentId="node_ockvuu8u916"
33+
fieldId="text_kvuu9gl2"
34+
maxLine={0}
35+
showTitle={false}
36+
>
37+
我是一个简单的测试页面
38+
</div>
39+
</div>
40+
</div>
41+
`;

‎packages/react-simulator-renderer/test/src/renderer/demo.test.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import renderer from 'react-test-renderer';
2+
import rendererContainer from '../../../src/renderer';
3+
import SimulatorRendererView from '../../../src/renderer-view';
4+
import { Text } from '../../utils/components';
5+
6+
describe('Base', () => {
7+
const component = renderer.create(
8+
<SimulatorRendererView
9+
rendererContainer={rendererContainer}
10+
/>
11+
);
12+
13+
it('should be render NotFoundComponent', () => {
14+
let tree = component.toJSON();
15+
expect(tree).toMatchSnapshot();
16+
});
17+
18+
it('should be render Text', () => {
19+
// 更新 _componentsMap 值
20+
(rendererContainer as any)._componentsMap.Text = Text;// = host.designer.componentsMap;
21+
// 更新 components 列表
22+
(rendererContainer as any).buildComponents();
23+
24+
expect(!!(rendererContainer.components as any).Text).toBeTruthy();
25+
26+
rendererContainer.rerender();
27+
28+
let tree = component.toJSON();
29+
expect(tree).toMatchSnapshot();
30+
});
31+
})

‎packages/react-simulator-renderer/test/utils/components.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const Text = ({
2+
__tag,
3+
content,
4+
...props
5+
}: any) => (<div {...props}>{content}</div>);
6+
7+
export const Page = (props: any) => (<div>{props.children}</div>);

‎packages/react-simulator-renderer/test/utils/host.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Box, Breadcrumb, Form, Select, Input, Button, Table, Pagination, Dialog } from '@alifd/next';
2+
import defaultSchema from '../schema/basic';
3+
import { Page } from './components';
4+
5+
class Designer {
6+
componentsMap = {
7+
Box,
8+
Breadcrumb,
9+
'Breadcrumb.Item': Breadcrumb.Item,
10+
Form,
11+
'Form.Item': Form.Item,
12+
Select,
13+
Input,
14+
Button,
15+
'Button.Group': Button.Group,
16+
Table,
17+
Pagination,
18+
Dialog,
19+
Page,
20+
}
21+
}
22+
23+
class Host {
24+
designer = new Designer();
25+
26+
connect = () => {}
27+
28+
autorun = (fn: Function) => {
29+
fn();
30+
}
31+
32+
autoRender = true;
33+
34+
componentsConsumer = {
35+
consume() {}
36+
}
37+
38+
schema = defaultSchema;
39+
40+
project = {
41+
documents: [
42+
{
43+
id: '1',
44+
path: '/',
45+
fileName: '',
46+
export: () => {
47+
return this.schema;
48+
},
49+
getNode: () => {},
50+
}
51+
],
52+
get: () => ({}),
53+
}
54+
55+
setInstance() {}
56+
57+
designMode = 'design'
58+
59+
get() {}
60+
61+
injectionConsumer = {
62+
consume() {}
63+
}
64+
65+
/** 下列的函数或者方法是方便测试用 */
66+
mockSchema = (schema: any) => {
67+
this.schema = schema;
68+
};
69+
}
70+
71+
if (!(window as any).LCSimulatorHost) {
72+
(window as any).LCSimulatorHost = new Host();
73+
}
74+
75+
export default (window as any).LCSimulatorHost;

‎packages/renderer-core/src/renderer/base.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -463,8 +463,14 @@ export default function baseRendererFactory(): IBaseRenderComponent {
463463

464464
if (!Comp) {
465465
console.error(`${schema.componentName} component is not found in components list! component list is:`, components || this.props.__container?.components);
466-
Comp = engine.getNotFoundComponent();
467-
otherProps.__componentName = schema.componentName;
466+
return engine.createElement(
467+
engine.getNotFoundComponent(),
468+
{
469+
componentName: schema.componentName,
470+
componentId: schema.id,
471+
},
472+
this.__getSchemaChildrenVirtualDom(schema, scope, Comp),
473+
);
468474
}
469475

470476
// DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册

0 commit comments

Comments
 (0)