diff --git a/packages/ignitor/public/favicon.png b/packages/ignitor/public/favicon.png deleted file mode 100644 index 307ffbd82..000000000 Binary files a/packages/ignitor/public/favicon.png and /dev/null differ diff --git a/packages/ignitor/public/index.html b/packages/ignitor/public/index.html deleted file mode 100644 index 1d64096b5..000000000 --- a/packages/ignitor/public/index.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - LowCodeEngine Editor DEMO - - - - - - - - - - - - - - - - - - - - - - -
- - - - - diff --git a/packages/ignitor/public/preview.html b/packages/ignitor/public/preview.html deleted file mode 100644 index c8f2cfdcb..000000000 --- a/packages/ignitor/public/preview.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - LowCodeEngine DEMO - - - - - - - - - - - -
- - diff --git a/packages/renderer-core/package.json b/packages/renderer-core/package.json index 41fe3cbe6..d2562e16e 100644 --- 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", diff --git a/packages/renderer-core/src/hoc/index.tsx b/packages/renderer-core/src/hoc/index.tsx index e8745f5e9..b8ab424c5 100644 --- 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); } diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx index aaa15de4d..951ceea27 100644 --- 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 - cache.ref.set(props.componentId, ref)} /> + 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; diff --git a/packages/renderer-core/src/renderer/base.tsx b/packages/renderer-core/src/renderer/base.tsx index f75b51385..67a0d7542 100644 --- 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 || {}; diff --git a/packages/renderer-core/src/types/index.ts b/packages/renderer-core/src/types/index.ts index 49b8c895d..8bee549f9 100644 --- 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; diff --git a/packages/renderer-core/src/utils/common.ts b/packages/renderer-core/src/utils/common.ts index 928ddbfd8..78bead5ac 100644 --- 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; } /** diff --git a/packages/renderer-core/src/utils/logger.ts b/packages/renderer-core/src/utils/logger.ts new file mode 100644 index 000000000..1feb9f6c8 --- /dev/null +++ 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' }); \ No newline at end of file diff --git a/packages/utils/src/clone-enumerable-property.ts b/packages/utils/src/clone-enumerable-property.ts new file mode 100644 index 000000000..414f8dccd --- /dev/null +++ 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; +} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 891c1c54f..087591d99 100644 --- 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'; diff --git a/packages/utils/src/is-react.ts b/packages/utils/src/is-react.ts index 7261b6a07..02ef50fa6 100644 --- 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 { } 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; } diff --git a/packages/vision-polyfill/src/bundle/upgrade-metadata.ts b/packages/vision-polyfill/src/bundle/upgrade-metadata.ts index 89487ac73..953e85062 100644 --- 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) {