From 5dd462544fbbbccfa97165f2bcfeed8629fab2a3 Mon Sep 17 00:00:00 2001
From: liujuping <liujup@foxmail.com>
Date: Wed, 29 Jun 2022 16:17:25 +0800
Subject: [PATCH] fix: fix low-code component rendering problems: 1.
 thisRequiredInJSE does not take effect 2. jsx components cannot obtain source
 components

---
 .../rax-simulator-renderer/src/renderer.ts    |  3 ++-
 .../react-simulator-renderer/src/renderer.ts  |  3 ++-
 packages/renderer-core/src/renderer/base.tsx  | 10 +++++++++-
 packages/utils/src/build-components.ts        | 19 +++++++++++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts
index b2dcbaec0..0e42785e7 100644
--- a/packages/rax-simulator-renderer/src/renderer.ts
+++ b/packages/rax-simulator-renderer/src/renderer.ts
@@ -523,10 +523,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           ...extraProps,
           schema: _schema,
           components,
-          designMode: renderer.designMode,
+          designMode: '',
           device: renderer.device,
           appHelper: renderer.context,
           rendererName: 'LowCodeRenderer',
+          thisRequiredInJSE: host.thisRequiredInJSE,
           customCreateElement: (Comp: any, props: any, children: any) => {
             const componentMeta = host.currentDocument?.getComponentMeta(Comp.displayName);
             if (componentMeta?.isModal) {
diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
index 6c246e094..5605ba479 100644
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/packages/react-simulator-renderer/src/renderer.ts
@@ -450,10 +450,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           // 使用 _schema 为了使低代码组件在页面设计中使用变量，同 react 组件使用效果一致
           schema: _schema,
           components: renderer.components,
-          designMode: renderer.designMode,
+          designMode: '',
           device: renderer.device,
           appHelper: renderer.context,
           rendererName: 'LowCodeRenderer',
+          thisRequiredInJSE: host.thisRequiredInJSE,
           customCreateElement: (Comp: any, props: any, children: any) => {
             const componentMeta = host.currentDocument?.getComponentMeta(Comp.displayName);
             if (componentMeta?.isModal) {
diff --git a/packages/renderer-core/src/renderer/base.tsx b/packages/renderer-core/src/renderer/base.tsx
index 3a4bbd24c..28c44964a 100644
--- a/packages/renderer-core/src/renderer/base.tsx
+++ b/packages/renderer-core/src/renderer/base.tsx
@@ -116,7 +116,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
       if (func) {
         if (isJSExpression(func) || isJSFunction(func)) {
           const fn = props.thisRequiredInJSE ? parseThisRequiredExpression(func, this) : parseExpression(func, this);
-          return fn(props, state);
+          return fn?.(props, state);
         }
 
         if (typeof func === 'function') {
@@ -210,6 +210,14 @@ export default function baseRendererFactory(): IBaseRenderComponent {
       }
     };
 
+    _getComponentView = (componentName: string) => {
+      const { __components } = this.props;
+      if (!__components) {
+        return;
+      }
+      return __components[componentName];
+    };
+
     __bindCustomMethods = (props = this.props) => {
       const { __schema } = props;
       const customMethodsList = Object.keys(__schema.methods || {}) || [];
diff --git a/packages/utils/src/build-components.ts b/packages/utils/src/build-components.ts
index 78c5b6c2f..c18952af1 100644
--- a/packages/utils/src/build-components.ts
+++ b/packages/utils/src/build-components.ts
@@ -3,6 +3,7 @@ import { NpmInfo, ComponentSchema } from '@alilc/lowcode-types';
 import { Component } from '@alilc/lowcode-designer';
 import { isESModule } from './is-es-module';
 import { isReactComponent, acceptsRef, wrapReactClass } from './is-react';
+import { isObject } from './is-object';
 
 interface LibraryMap {
   [key: string]: string;
@@ -76,6 +77,22 @@ function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmI
   return getSubComponent(library, paths);
 }
 
+/**
+ * 判断是否是一个混合组件，即 components 是一个对象，对象值是 React 组件
+ * 示例：
+ * {
+ *    Button: ReactNode,
+ *    Text: ReactNode,
+ * }
+ */
+function isMixinComponent(components: any) {
+  if (!isObject(components)) {
+    return false;
+  }
+
+  return Object.keys(components).some(componentName => isReactComponent(components[componentName]));
+}
+
 export function buildComponents(libraryMap: LibraryMap,
   componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> | ComponentSchema },
   createComponent: (schema: ComponentSchema) => Component | null) {
@@ -89,6 +106,8 @@ export function buildComponents(libraryMap: LibraryMap,
         component = wrapReactClass(component as FunctionComponent);
       }
       components[componentName] = component;
+    } else if (isMixinComponent(component)) {
+      components[componentName] = component;
     } else {
       component = findComponent(libraryMap, componentName, component);
       if (component) {