fix: 修复部分属性由于清空，丢失问题 & 修复 function 组件静态属性丢失问题

2026-01-12 17:08:14 +00:00 · 2021-11-04 09:22:09 +08:00 · 2021-11-04 09:22:09 +08:00 · a652b1f6f2
commit a652b1f6f2
parent 7b181521b9
14 changed files with 75 additions and 167 deletions
--- a/packages/ignitor/public/favicon.png
+++ b/packages/ignitor/public/favicon.png
--- a/packages/ignitor/public/index.html
+++ b/packages/ignitor/public/index.html
@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width" />
-    <title>LowCodeEngine Editor DEMO</title>
-    <link rel="shortcut icon" href="./favicon.png" />
-    <link rel="stylesheet"  data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.0/min/vs/editor/editor.main.css"/>
-    <script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
-    <script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
-    <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
-    <script>
-      React.PropTypes = PropTypes;
-    </script>
-    <script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js,natty-storage/2.0.2/dist/natty-storage.min.js,natty-fetch/2.6.0/dist/natty-fetch.pc.min.js,tinymce/4.2.5/tinymce-full.js"></script>
-    <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
-    <link rel="stylesheet" href="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.css" />
-    <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.20.25/dist/next.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.js"></script>
-    <!-- <script src="http://192.168.0.106:8000/lc-engine.js"></script> -->
-    <script>
-			var require = { paths: { vs: 'https://g.alicdn.com/code/lib/monaco-editor/0.21.2/min/vs' } };
-		</script>
-    <script src="https://g.alicdn.com/code/lib/monaco-editor/0.21.2/min/vs/loader.min.js"></script>
-    <script src="https://g.alicdn.com/code/lib/monaco-editor/0.21.2/min/vs/editor/editor.main.nls.js"></script>
-    <script src="https://g.alicdn.com/code/lib/monaco-editor/0.21.2/min/vs/editor/editor.main.js"></script>
-    <link rel="stylesheet" href="/css/editor-preset-vision.css" />
-    <script>
-      window.pageConfig = {
-        env: 'release',
-        locale: 'zh_CN',
-        pageType: 'single',
-        deviceType: 'web',
-        appName: '基础包管理后台',
-        appType: 'legao_base_packages',
-        templateType: '',
-        pageId: 'FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V',
-        slug: 'test',
-        appMode: 'back',
-        isAppAdmin: 'y',
-        isSuperAdmin: 'n',
-        isBetaDeveloper: 'n',
-        formType: 'display',
-        title: { en_US: '测试', type: 'i18n', zh_CN: '测试' },
-        urlPrefix: 'https://go.alibaba-inc.com',
-        APIUrlPrefix: 'https://go.alibaba-inc.com',
-        devVersion: '0.1.0', // 这个是子应用的变更 id
-        subAppType: '0.1.0',
-        appKey: 'legao_base_packages',
-        RE_VERSION: '7.1.1',
-        appSource: '',
-        isDomainDefault: 'n',
-        useReleaseBundle: 'n',
-        isDomainPkg: 'n',
-        medusaAppName: '',
-        domainCode: 'kS6SyH',
-        aecp: {
-          mdcDomain: '',
-          projectId: '',
-          appCode: '',
-        },
-        designerConfigs: {},
-        navConfig:
-          '{"appName":{"en_US":"基础包管理后台","key":"","type":"i18n","zh_CN":"基础包管理后台"},"bgColor":"white","data":[{"children":[],"hidden":false,"icon":"","inner":true,"navUuid":"FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V","relateUuid":"FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V","slug":"test","targetNew":false,"title":{"en_US":"测试","type":"i18n","zh_CN":"测试"}}],"isFixed":"y","isFold":"y","isFoldHorizontal":"n","languageChangeUrl":{"en_US":"/common/account/changeAccountLanguage.json","type":"i18n","zh_CN":"/common/account/changeAccountLanguage.json"},"layout":"auto","navStyle":"orange","navTheme":"light","openSubMode":false,"showAppTitle":true,"showCrumb":true,"showIcon":false,"showLanguageChange":true,"showNav":true,"showSearch":"n","singletons":{"FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V":{"isFixed":"n","isFold":"n","isFoldHorizontal":"n","showAppTitle":false,"showCrumb":false,"showLanguageChange":false,"showNav":false,"showSearch":"n","singleton":false},"test":{"$ref":"$.singletons.FORM\\-3KYJN7RV\\-DIOD8LLK1WGQ89S7NHA92\\-QJVH497K\\-V"}},"type":"top_fold"}',
-        historyType: 'HASH',
-        isSinglePage: 'n',
-        rhino: 'n',
-        isMiniApp: '',
-        taskId: '',
-        appSchema: 'V5',
-        openSubMode: 'n',
-      };
-      window.g_config = {};
-    </script>
-  </head>
-
-  <body>
-    <!-- lowcode engine globals -->
-    <div id="lce-container"></div>
-    <!-- vision 测试使用
-
-    -->
-    <script src="/js/editor-preset-vision.js"></script>
-    <script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script>
-  </body>
-</html>
--- a/packages/ignitor/public/preview.html
+++ b/packages/ignitor/public/preview.html
@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width" />
-    <title>LowCodeEngine DEMO</title>
-    <script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
-    <script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
-    <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
-    <script> React.PropTypes = PropTypes; </script>
-    <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
-
-    <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css">
-    <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
-  </head>
-
-  <body>
-    <div id="lce-container"></div>
-  </body>
-</html>
--- a/packages/renderer-core/package.json
+++ b/packages/renderer-core/package.json
@ -29,7 +29,8 @@
    "react-is": "^16.10.1",
    "serialize-javascript": "^1.7.0",
    "socket.io-client": "^2.2.0",
-    "whatwg-fetch": "^3.0.0"
+    "whatwg-fetch": "^3.0.0",
+    "zen-logger": "^1.1.4"
  },
  "devDependencies": {
    "@alib/build-scripts": "^0.1.18",
--- a/packages/renderer-core/src/hoc/index.tsx
+++ b/packages/renderer-core/src/hoc/index.tsx
@ -1,3 +1,4 @@
+import { cloneEnumerableProperty } from '@ali/lowcode-utils';
 import adapter from '../adapter';

 export function compWrapper(Comp: any) {
@ -8,15 +9,16 @@ export function compWrapper(Comp: any) {
    // }

    render() {
-      const { forwardRef } = this.props;
+      const { forwardRef, ...rest } = this.props;
+
      return createElement(Comp, {
-        ...this.props,
+        ...rest,
        ref: forwardRef,
      });
    }
  }

-  return forwardRef((props: any, ref: any) => {
+  return cloneEnumerableProperty(forwardRef((props: any, ref: any) => {
    return createElement(Wrapper, { ...props, forwardRef: ref });
-  });
+  }), Comp);
 }
--- a/packages/renderer-core/src/hoc/leaf.tsx
+++ b/packages/renderer-core/src/hoc/leaf.tsx
@ -1,16 +1,10 @@
 import { BuiltinSimulatorHost, Node, PropChangeOptions } from '@ali/lowcode-designer';
 import { GlobalEvent, TransformStage } from '@ali/lowcode-types';
-import { isReactComponent } from '@ali/lowcode-utils';
+import { isReactComponent, cloneEnumerableProperty } from '@ali/lowcode-utils';
 import { EngineOptions } from '@ali/lowcode-editor-core';
 import adapter from '../adapter';
 import * as types from '../types/index';

-const compDefaultPropertyNames = [
-  '$$typeof',
-  'render',
-  'defaultProps',
-  'props',
-];

 export interface IComponentHocInfo {
  schema: any;
@ -315,8 +309,8 @@ export function leafWrapper(Comp: types.IBaseRenderer, {

    makeUnitRender() {
      this.beforeRender(RerenderType.MinimalRenderUnit);
-      const nextProps = getProps(this.leaf?.export?.(TransformStage.Render) as types.ISchema, Comp, componentInfo);
-      const children = getChildren(this.leaf?.export?.(TransformStage.Render) as types.ISchema, Comp);
+      const nextProps = getProps(this.leaf?.export?.(TransformStage.Render) as types.ISchema, scope, Comp, componentInfo);
+      const children = getChildren(this.leaf?.export?.(TransformStage.Render) as types.ISchema, scope, Comp);
      const nextState = {
        nextProps,
        nodeChildren: children,
@ -358,6 +352,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
      const dispose = leaf?.onPropChange?.((propChangeInfo: PropChangeOptions) => {
        const {
          key,
+          newValue = null,
        } = propChangeInfo;
        const node = leaf;

@ -368,18 +363,24 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
          container.rerender();
          return;
        }
-
-        __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange event`);
        if (!this.shouldRenderSingleNode()) {
          return;
        }
        this.beforeRender(RerenderType.PropsChanged);
-        const nextProps = getProps(node?.export?.(TransformStage.Render) as types.ISchema, scope, Comp, componentInfo);
-        this.setState(nextProps.children ? {
-          nodeChildren: nextProps.children,
-          nodeProps: nextProps,
+        const nodeProps = getProps(node?.export?.(TransformStage.Render) as types.ISchema, scope, Comp, componentInfo);
+        const preNodeProps = this.state.nodeProps;
+        const newNodeProps = {
+          ...preNodeProps,
+          [key as string]: newValue,
+          ...nodeProps,
+        };
+        __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange event`, newNodeProps);
+        this.setState('children' in nodeProps ? {
+          nodeChildren: nodeProps.children,
+          nodeProps: newNodeProps,
+          childrenInState: true,
        } : {
-          nodeProps: nextProps,
+          nodeProps: newNodeProps,
        });
      });

@ -395,11 +396,11 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
          return;
        }

-        __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange event`);
        if (!this.shouldRenderSingleNode()) {
          return;
        }

+        __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange(${flag}) event`);
        this.beforeRender(RerenderType.VisibleChanged);
        this.setState({
          visible: flag,
@ -418,7 +419,6 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
          type,
          node,
        } = param || {};
-        __debug(`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`);
        if (!this.shouldRenderSingleNode()) {
          return;
        }
@ -427,6 +427,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
        // 缓存二级 children Next 查询筛选组件有问题
        // 缓存一级 children Next Tab 组件有问题
        const nextChild = getChildren(leaf?.export?.(TransformStage.Render) as types.ISchema, scope, Comp); // this.childrenMap
+        __debug(`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`, nextChild);
        this.setState({
          nodeChildren: nextChild,
          childrenInState: true,
@ -454,7 +455,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
    }

    get children(): any {
-      if (this.state.nodeChildren) {
+      if (this.state.childrenInState) {
        return this.state.nodeChildren;
      }
      if (this.props.children && !Array.isArray(this.props.children)) {
@ -476,7 +477,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
      }

      const {
-        ref,
+        forwardedRef,
        ...rest
      } = this.props;

@ -485,27 +486,23 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
        ...(this.state.nodeProps || {}),
        children: [],
        __id: this.props.componentId,
-        ref: this.props.forwardedRef,
+        ref: forwardedRef,
      };

      return engine.createElement(Comp, compProps, this.hasChildren ? this.children : null);
    }
  }

-  const LeafWrapper = forwardRef((props: any, ref: any) => (
+  let LeafWrapper = forwardRef((props: any, ref: any) => (
    // @ts-ignore
-    <LeafHoc {...props} forwardedRef={ref} ref={(ref) => cache.ref.set(props.componentId, ref)} />
+    <LeafHoc
+      {...props}
+      forwardedRef={ref}
+      ref={(_ref: any) => cache.ref.set(props.componentId, _ref)}
+    />
  ));

-  if (typeof Comp === 'object') {
-    const compExtraPropertyNames = Object.getOwnPropertyNames(Comp).filter(d => !compDefaultPropertyNames.includes(d));
-
-    __debug(`${schema.componentName} extra property names: ${compExtraPropertyNames.join(',')}`);
-
-    compExtraPropertyNames.forEach((d: string) => {
-      (LeafWrapper as any)[d] = Comp[d];
-    });
-  }
+  LeafWrapper = cloneEnumerableProperty(LeafWrapper, Comp);

  LeafWrapper.displayName = (Comp as any).displayName;

--- a/packages/renderer-core/src/renderer/base.tsx
+++ b/packages/renderer-core/src/renderer/base.tsx
@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import Debug from 'debug';
 import { create as createDataSourceEngine } from '@ali/lowcode-datasource-engine/interpret';
 import adapter from '../adapter';
 import divFactory from '../components/Div';
@ -21,7 +20,7 @@ import {
  transformStringToFunction,
  checkPropTypes,
  getI18n,
-  acceptsRef,
+  canAcceptsRef,
  getFileCssName,
  capitalizeFirstLetter,
  DataHelper,
@ -31,6 +30,7 @@ import {
 import { IRendererProps, ISchema, IInfo, ComponentModel, IRenderer } from '../types';
 import { compWrapper } from '../hoc';
 import { IComponentConstruct, IComponentHoc, leafWrapper } from '../hoc/leaf';
+import logger from '../utils/logger';

 export default function baseRenererFactory() {
  const { BaseRenderer: customBaseRenderer } = adapter.getRenderers();
@ -44,7 +44,6 @@ export default function baseRenererFactory() {
  const VisualDom = visualDomFactory();
  const AppContext = contextFactory();

-  const debug = Debug('renderer:base');
  const DESIGN_MODE = {
    EXTEND: 'extend',
    BORDER: 'border',
@ -71,7 +70,6 @@ export default function baseRenererFactory() {
      this.__beforeInit(props);
      this.__init(props);
      this.__afterInit(props);
-      this.__initDebug();
      this.__debug(`constructor - ${props?.__schema?.fileName}`);
    }

@ -88,7 +86,7 @@ export default function baseRenererFactory() {
    __afterInit(/* props: IRendererProps */) { }

    static getDerivedStateFromProps(props: IRendererProps, state: any) {
-      debug('getDerivedStateFromProps');
+      logger.log('getDerivedStateFromProps');
      const func = props?.__schema?.lifeCycles?.getDerivedStateFromProps;

      if (func) {
@ -356,7 +354,7 @@ export default function baseRenererFactory() {
      let Comp = __components[__schema.componentName];

      if (!Comp) {
-        console.error(`${__schema.componentName} is invalid!`);
+        this.__debug(`${__schema.componentName} is invalid!`);
      }

      return this.__createVirtualDom(_children, scope, ({
@ -499,8 +497,8 @@ export default function baseRenererFactory() {
          });
        });

-        // 对于可以获取到ref的组件做特殊处理
-        if (!acceptsRef(Comp)) {
+        // 对于不可以接收到 ref 的组件需要做特殊处理
+        if (!canAcceptsRef(Comp)) {
          Comp = compWrapper(Comp);
          components[schema.componentName] = Comp;
        }
@ -800,15 +798,7 @@ export default function baseRenererFactory() {
      return this.__instanceMap[filedId];
    }

-    __initDebug = () => {
-      this.__logger = Debug(`renderer:${this.__namespace || 'base'}`);
-    };
-
-    __debug = (msg = '') => {
-      if (this.__logger) {
-        this.__logger(`${this.__namespace}.${msg}`);
-      }
-    };
+    __debug = logger.log;

    __renderContextProvider = (customProps?: object, children?: any) => {
      customProps = customProps || {};
--- a/packages/renderer-core/src/types/index.ts
+++ b/packages/renderer-core/src/types/index.ts
@ -141,7 +141,7 @@ export interface IRenderer {
  __createLoopVirtualDom: (schema: any, self: any, parentInfo: IInfo, idx: number | string) => any;
  __parseProps: (props: any, self: any, path: string, info: IInfo) => any;
  __initDebug: () => void;
-  __debug: (msg: string) => void;
+  __debug: (...args: any[]) => void;
  __renderContextProvider: (customProps?: object, children?: any) => any;
  __renderContextConsumer: (children: any) => any;
  __renderContent: (children: any) => any;
--- a/packages/renderer-core/src/utils/common.ts
+++ b/packages/renderer-core/src/utils/common.ts
@ -202,8 +202,8 @@ export function getI18n(key: string, values = {}, locale = 'zh-CN', messages = {
 * 判断当前组件是否能够设置ref
 * @param {*} Comp 需要判断的组件
 */
-export function acceptsRef(Comp: any) {
-  return Comp?.$$typeof === REACT_FORWARD_REF_TYPE || Comp?.prototype?.isReactComponent || Comp?.prototype?.setState;
+export function canAcceptsRef(Comp: any) {
+  return Comp?.$$typeof === REACT_FORWARD_REF_TYPE || Comp?.prototype?.isReactComponent || Comp?.prototype?.setState || Comp._forwardRef;
 }

 /**
--- a/packages/renderer-core/src/utils/logger.ts
+++ b/packages/renderer-core/src/utils/logger.ts
@ -0,0 +1,2 @@
+import Logger from 'zen-logger';
+export default new Logger({ level: 'warn', bizName: 'renderer' });
--- a/packages/utils/src/clone-enumerable-property.ts
+++ b/packages/utils/src/clone-enumerable-property.ts
@ -0,0 +1,22 @@
+const excludePropertyNames = [
+  '$$typeof',
+  'render',
+  'defaultProps',
+  'props',
+  'length',
+  'prototype',
+  'name',
+  'caller',
+  'callee',
+  'arguments',
+];
+
+export function cloneEnumerableProperty(target: any, origin: any) {
+  const compExtraPropertyNames = Object.keys(origin).filter(d => !excludePropertyNames.includes(d));
+
+  compExtraPropertyNames.forEach((d: string) => {
+    (target as any)[d] = origin[d];
+  });
+
+  return target;
+}
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@ -23,3 +23,4 @@ export * from './app-helper';
 export * from './misc';
 export * from './schema';
 export * from './node-helper';
+export * from './clone-enumerable-property';
--- a/packages/utils/src/is-react.ts
+++ b/packages/utils/src/is-react.ts
@ -1,4 +1,5 @@
 import { ComponentClass, Component, FunctionComponent, ComponentType, createElement } from 'react';
+import { cloneEnumerableProperty } from './clone-enumerable-property';

 const hasSymbol = typeof Symbol === 'function' && Symbol.for;
 const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
@ -20,11 +21,12 @@ export function isReactComponent(obj: any): obj is ComponentType<any> {
 }

 export function wrapReactClass(view: FunctionComponent) {
-  const ViewComponentClass = class extends Component {
+  let ViewComponentClass = class extends Component {
    render() {
      return createElement(view, this.props);
    }
  } as any;
+  ViewComponentClass = cloneEnumerableProperty(ViewComponentClass, view);
  ViewComponentClass.displayName = view.displayName;
  return ViewComponentClass;
 }
--- a/packages/vision-polyfill/src/bundle/upgrade-metadata.ts
+++ b/packages/vision-polyfill/src/bundle/upgrade-metadata.ts
@ -718,7 +718,6 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
    docUrl,
    devMode: devMode || 'procode',
    schema: schema?.componentsTree[0],
-    // isMinimalRenderUnit,
  };

  if (category) {