github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-03-10 09:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 修复循环，插槽等作用域获取失败问题 & 新增最小渲染单元功能，解决增量更新机制的问题

Browse Source
This commit is contained in:
liujuping.liujupin 2021-11-03 11:38:37 +08:00
parent b02b62fbe3
commit 7b181521b9
5 changed files with 154 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/designer/src/component-meta.ts
View File

@ -85,6 +85,10 @@ export class ComponentMeta {
return this._isContainer! || this.isRootComponent(); return this._isContainer! || this.isRootComponent();
} }
get isMinimalRenderUnit(): boolean {
return this._isMinimalRenderUnit || false;
}
private _isModal?: boolean; private _isModal?: boolean;
get isModal(): boolean { get isModal(): boolean {
@ -128,6 +132,8 @@ export class ComponentMeta {
private _title?: TitleContent; private _title?: TitleContent;
private _isMinimalRenderUnit?: boolean;
get title(): string | I18nData | ReactElement { get title(): string | I18nData | ReactElement {
// TODO: 标记下。这块需要康师傅加一下API，页面正常渲染。 // TODO: 标记下。这块需要康师傅加一下API，页面正常渲染。
// string | i18nData | ReactElement // string | i18nData | ReactElement
@ -220,6 +226,7 @@ export class ComponentMeta {
this._isModal = !!component.isModal; this._isModal = !!component.isModal;
this._descriptor = component.descriptor; this._descriptor = component.descriptor;
this._rootSelector = component.rootSelector; this._rootSelector = component.rootSelector;
this._isMinimalRenderUnit = component.isMinimalRenderUnit;
if (component.nestingRule) { if (component.nestingRule) {
const { parentWhitelist, childWhitelist } = component.nestingRule; const { parentWhitelist, childWhitelist } = component.nestingRule;
this.parentWhitelist = buildFilter(parentWhitelist); this.parentWhitelist = buildFilter(parentWhitelist);

115
packages/renderer-core/src/hoc/leaf.tsx
View File

@ -16,6 +16,7 @@ export interface IComponentHocInfo {
schema: any; schema: any;
baseRenderer: types.IBaseRendererInstance; baseRenderer: types.IBaseRendererInstance;
componentInfo: any; componentInfo: any;
scope: any;
} }
type DesignMode = Pick<EngineOptions, 'designMode'>['designMode']; type DesignMode = Pick<EngineOptions, 'designMode'>['designMode'];
@ -45,6 +46,7 @@ enum RerenderType {
ChildChanged = 'ChildChanged', ChildChanged = 'ChildChanged',
PropsChanged = 'PropsChanged', PropsChanged = 'PropsChanged',
VisibleChanged = 'VisibleChanged', VisibleChanged = 'VisibleChanged',
MinimalRenderUnit = 'MinimalRenderUnit',
} }
// 缓存 Leaf 层组件，防止重新渲染问题 // 缓存 Leaf 层组件，防止重新渲染问题
@ -63,6 +65,8 @@ class LeafCache {
* 订阅事件缓存，导致 rerender 的订阅事件 * 订阅事件缓存，导致 rerender 的订阅事件
*/ */
event = new Map(); event = new Map();
ref = new Map();
} }
let cache: LeafCache; let cache: LeafCache;
@ -119,6 +123,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
schema, schema,
baseRenderer, baseRenderer,
componentInfo, componentInfo,
scope,
}: IComponentHocInfo) { }: IComponentHocInfo) {
const { const {
__debug, __debug,
@ -152,8 +157,8 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
getNode, getNode,
}); });
if (curDocumentId && cache.component.has(schema.componentName)) { if (curDocumentId && cache.component.has(schema.id)) {
return cache.component.get(schema.componentName); return cache.component.get(schema.id);
} }
class LeafHoc extends Component { class LeafHoc extends Component {
@ -259,9 +264,71 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
setSchemaChangedSymbol?.(true); setSchemaChangedSymbol?.(true);
} }
// get isInWhitelist() { renderUnitInfo: {
// return whitelist.includes(schema.componentName); minimalUnitId?: string,
// } minimalUnitName?: string;
singleRender?: boolean,
};
shouldRenderSingleNode(): boolean {
if (!this.renderUnitInfo) {
this.getRenderUnitInfo();
}
const renderUnitInfo = this.renderUnitInfo;
if (renderUnitInfo.singleRender) {
return true;
}
const ref = cache.ref.get(renderUnitInfo.minimalUnitId);
if (!ref) {
__debug('Cant find minimalRenderUnit ref! This make rerender!');
container.rerender();
return false;
}
__debug(`${this.leaf?.componentName}(${this.props.componentId}) need render, make its minimalRenderUnit ${renderUnitInfo.minimalUnitName}(${renderUnitInfo.minimalUnitId})`);
ref.makeUnitRender();
return false;
}
getRenderUnitInfo(leaf = this.leaf) {
if (leaf?.isRoot()) {
this.renderUnitInfo = {
singleRender: true,
...(this.renderUnitInfo || {}),
};
}
if (leaf?.componentMeta.isMinimalRenderUnit) {
this.renderUnitInfo = {
minimalUnitId: leaf.id,
minimalUnitName: leaf.componentName,
singleRender: false,
};
}
if (leaf?.parent) {
this.getRenderUnitInfo(leaf.parent);
}
}
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 nextState = {
nextProps,
nodeChildren: children,
childrenInState: true,
};
if ('children' in nextProps) {
nextState.nodeChildren = nextProps.children;
}
__debug(`${this.leaf?.componentName}(${this.props.componentId}) MinimalRenderUnit Render!`);
this.setState(nextState);
}
componentWillReceiveProps(nextProps: any) { componentWillReceiveProps(nextProps: any) {
let { _leaf, componentId } = nextProps; let { _leaf, componentId } = nextProps;
@ -294,11 +361,6 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
} = propChangeInfo; } = propChangeInfo;
const node = leaf; const node = leaf;
// if (this.isInWhitelist) {
// container.rerender();
// return;
// }
// 如果循坏条件变化，从根节点重新渲染 // 如果循坏条件变化，从根节点重新渲染
// 目前多层循坏无法判断需要从哪一层开始渲染，故先粗暴解决 // 目前多层循坏无法判断需要从哪一层开始渲染，故先粗暴解决
if (key === '___loop___') { if (key === '___loop___') {
@ -307,9 +369,12 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
return; return;
} }
this.beforeRender(RerenderType.PropsChanged);
__debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange event`); __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange event`);
const nextProps = getProps(node?.export?.(TransformStage.Render) as types.ISchema, Comp, componentInfo); 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 ? { this.setState(nextProps.children ? {
nodeChildren: nextProps.children, nodeChildren: nextProps.children,
nodeProps: nextProps, nodeProps: nextProps,
@ -330,12 +395,11 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
return; return;
} }
// if (this.isInWhitelist) {
// container.rerender();
// return;
// }
__debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange event`); __debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange event`);
if (!this.shouldRenderSingleNode()) {
return;
}
this.beforeRender(RerenderType.VisibleChanged); this.beforeRender(RerenderType.VisibleChanged);
this.setState({ this.setState({
visible: flag, visible: flag,
@ -354,16 +418,15 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
type, type,
node, node,
} = param || {}; } = param || {};
// if (this.isInWhitelist) {
// container.rerender();
// return;
// }
this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node);
__debug(`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`); __debug(`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`);
if (!this.shouldRenderSingleNode()) {
return;
}
this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node);
// TODO: 缓存同级其他元素的 children。 // TODO: 缓存同级其他元素的 children。
// 缓存二级 children Next 查询筛选组件有问题 // 缓存二级 children Next 查询筛选组件有问题
// 缓存一级 children Next Tab 组件有问题 // 缓存一级 children Next Tab 组件有问题
const nextChild = getChildren(leaf?.export?.(TransformStage.Render) as types.ISchema, Comp); // this.childrenMap const nextChild = getChildren(leaf?.export?.(TransformStage.Render) as types.ISchema, scope, Comp); // this.childrenMap
this.setState({ this.setState({
nodeChildren: nextChild, nodeChildren: nextChild,
childrenInState: true, childrenInState: true,
@ -431,7 +494,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
const LeafWrapper = forwardRef((props: any, ref: any) => ( const LeafWrapper = forwardRef((props: any, ref: any) => (
// @ts-ignore // @ts-ignore
<LeafHoc {...props} forwardedRef={ref} /> <LeafHoc {...props} forwardedRef={ref} ref={(ref) => cache.ref.set(props.componentId, ref)} />
)); ));
if (typeof Comp === 'object') { if (typeof Comp === 'object') {
@ -446,9 +509,7 @@ export function leafWrapper(Comp: types.IBaseRenderer, {
LeafWrapper.displayName = (Comp as any).displayName; LeafWrapper.displayName = (Comp as any).displayName;
if (curDocumentId) { cache.component.set(schema.id, LeafWrapper);
cache.component.set(schema.componentName, LeafWrapper);
}
return LeafWrapper; return LeafWrapper;
} }

100
packages/renderer-core/src/renderer/base.tsx
View File

@ -347,34 +347,31 @@ export default function baseRenererFactory() {
__createDom = () => { __createDom = () => {
const { __schema, __ctx, __components = {} } = this.props; const { __schema, __ctx, __components = {} } = this.props;
const self: any = {}; const scope: any = {};
self.__proto__ = __ctx || this; scope.__proto__ = __ctx || this;
if (!this._self) { if (!this._self) {
this._self = self; this._self = scope;
} }
const _children = this.getSchemaChildren(__schema); const _children = this.getSchemaChildren(__schema);
let Comp = __components[__schema.componentName]; let Comp = __components[__schema.componentName];
return this.__createVirtualDom(_children, self, ({ if (!Comp) {
console.error(`${__schema.componentName} is invalid!`);
}
return this.__createVirtualDom(_children, scope, ({
schema: __schema, schema: __schema,
Comp: this.__getHocComp(Comp, __schema), Comp: this.__getHocComp(Comp, __schema, scope),
} as IInfo)); } as IInfo));
}; };
private get self() {
const { __ctx } = this.props;
const self: any = {};
self.__proto__ = __ctx || this;
return self;
}
// 将模型结构转换成react Element // 将模型结构转换成react Element
// schema 模型结构 // schema 模型结构
// self 为每个渲染组件构造的上下文，self是自上而下继承的 // self 为每个渲染组件构造的上下文，self是自上而下继承的
// parentInfo 父组件的信息，包含schema和Comp // parentInfo 父组件的信息，包含schema和Comp
// idx 若为循环渲染的循环Index // idx 若为循环渲染的循环Index
__createVirtualDom = (schema: ISchema, self: any, parentInfo: IInfo, idx: string | number = ''): any => { __createVirtualDom = (schema: ISchema, scope: any, parentInfo: IInfo, idx: string | number = ''): any => {
const { engine } = this.context || {}; const { engine } = this.context || {};
try { try {
if (!schema) return null; if (!schema) return null;
@ -388,28 +385,28 @@ export default function baseRenererFactory() {
const { __appHelper: appHelper, __components: components = {} } = this.props || {}; const { __appHelper: appHelper, __components: components = {} } = this.props || {};
if (isJSExpression(schema)) { if (isJSExpression(schema)) {
return parseExpression(schema, self); return parseExpression(schema, scope);
} }
if (isI18n(schema)) { if (isI18n(schema)) {
return parseI18n(schema, self); return parseI18n(schema, scope);
} }
if (isJSSlot(schema)) { if (isJSSlot(schema)) {
return this.__createVirtualDom(schema.value, self, parentInfo); return this.__createVirtualDom(schema.value, scope, parentInfo);
} }
if (typeof schema === 'string') return schema; if (typeof schema === 'string') return schema;
if (typeof schema === 'number' || typeof schema === 'boolean') { if (typeof schema === 'number' || typeof schema === 'boolean') {
return String(schema); return String(schema);
} }
if (Array.isArray(schema)) { if (Array.isArray(schema)) {
if (schema.length === 1) return this.__createVirtualDom(schema[0], self, parentInfo); if (schema.length === 1) return this.__createVirtualDom(schema[0], scope, parentInfo);
return schema.map((item, idy) => this.__createVirtualDom(item, self, parentInfo, item?.__ctx?.lceKey ? '' : String(idy))); return schema.map((item, idy) => this.__createVirtualDom(item, scope, parentInfo, item?.__ctx?.lceKey ? '' : String(idy)));
} }
// FIXME // FIXME
const _children = this.getSchemaChildren(schema); const _children = this.getSchemaChildren(schema);
// 解析占位组件 // 解析占位组件
if (schema.componentName === 'Flagment' && _children) { if (schema.componentName === 'Flagment' && _children) {
const tarChildren = isJSExpression(_children) ? parseExpression(_children, self) : _children; const tarChildren = isJSExpression(_children) ? parseExpression(_children, scope) : _children;
return this.__createVirtualDom(tarChildren, self, parentInfo); return this.__createVirtualDom(tarChildren, scope, parentInfo);
} }
if (schema.$$typeof) { if (schema.$$typeof) {
@ -429,26 +426,26 @@ export default function baseRenererFactory() {
} }
if (schema.loop != null) { if (schema.loop != null) {
const loop = parseData(schema.loop, self); const loop = parseData(schema.loop, scope);
if ((Array.isArray(loop) && loop.length > 0) || isJSExpression(loop)) { if ((Array.isArray(loop) && loop.length > 0) || isJSExpression(loop)) {
return this.__createLoopVirtualDom( return this.__createLoopVirtualDom(
{ {
...schema, ...schema,
loop, loop,
}, },
self, scope,
parentInfo, parentInfo,
idx, idx,
); );
} }
} }
const condition = schema.condition == null ? true : parseData(schema.condition, self); const condition = schema.condition == null ? true : parseData(schema.condition, scope);
if (!condition) return null; if (!condition) return null;
let scopeKey = ''; let scopeKey = '';
// 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上 // 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上
if (Comp.generateScope) { if (Comp.generateScope) {
const key = parseExpression(schema.props.key, self); const key = parseExpression(schema.props.key, scope);
if (key) { if (key) {
// 如果组件自己设置key则使用组件自己的key // 如果组件自己设置key则使用组件自己的key
scopeKey = key; scopeKey = key;
@ -469,8 +466,8 @@ export default function baseRenererFactory() {
// 如果组件有设置scope，需要为组件生成一个新的scope上下文 // 如果组件有设置scope，需要为组件生成一个新的scope上下文
if (scopeKey && this.__compScopes[scopeKey]) { if (scopeKey && this.__compScopes[scopeKey]) {
const compSelf = { ...this.__compScopes[scopeKey] }; const compSelf = { ...this.__compScopes[scopeKey] };
compSelf.__proto__ = self; compSelf.__proto__ = scope;
self = compSelf; scope = compSelf;
} }
// 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题 // 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题
@ -488,7 +485,7 @@ export default function baseRenererFactory() {
otherProps.__tag = Math.random(); otherProps.__tag = Math.random();
} }
const componentInfo: any = {}; const componentInfo: any = {};
const props: any = this.__getComponentProps(schema, Comp, { const props: any = this.__getComponentProps(schema, scope, Comp, {
...componentInfo, ...componentInfo,
props: transformArrayToMap(componentInfo.props, 'name'), props: transformArrayToMap(componentInfo.props, 'name'),
}) || {}; }) || {};
@ -498,6 +495,7 @@ export default function baseRenererFactory() {
schema, schema,
componentInfo, componentInfo,
baseRenderer: this, baseRenderer: this,
scope,
}); });
}); });
@ -522,7 +520,7 @@ export default function baseRenererFactory() {
} }
if (schema?.__ctx?.lceKey) { if (schema?.__ctx?.lceKey) {
if (!isFileSchema(schema)) { if (!isFileSchema(schema)) {
engine?.props?.onCompGetCtx(schema, self); engine?.props?.onCompGetCtx(schema, scope);
} }
props.key = props.key || `${schema.__ctx.lceKey}_${schema.__ctx.idx || 0}_${idx !== undefined ? idx : ''}`; props.key = props.key || `${schema.__ctx.lceKey}_${schema.__ctx.idx || 0}_${idx !== undefined ? idx : ''}`;
} else if (typeof idx === 'number' && !props.key) { } else if (typeof idx === 'number' && !props.key) {
@ -535,7 +533,7 @@ export default function baseRenererFactory() {
props.key = props.__id; props.key = props.__id;
} }
let child: any = parentInfo.componentChildren || this.__getSchemaChildrenVirtualDom(schema, Comp); let child: any = parentInfo.componentChildren || this.__getSchemaChildrenVirtualDom(schema, scope, Comp);
const renderComp = (props: any) => engine.createElement(Comp, props, child); const renderComp = (props: any) => engine.createElement(Comp, props, child);
// 设计模式下的特殊处理 // 设计模式下的特殊处理
if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) { if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
@ -568,7 +566,7 @@ export default function baseRenererFactory() {
return engine.createElement(engine.getFaultComponent(), { return engine.createElement(engine.getFaultComponent(), {
error: e, error: e,
schema, schema,
self, self: scope,
parentInfo, parentInfo,
idx, idx,
}); });
@ -594,7 +592,7 @@ export default function baseRenererFactory() {
.map((d: IComponentHoc) => d.hoc); .map((d: IComponentHoc) => d.hoc);
} }
__getSchemaChildrenVirtualDom = (schema: ISchema, Comp: any, childrenMap?: Map<any, any>) => { __getSchemaChildrenVirtualDom = (schema: ISchema, scope: any, Comp: any, childrenMap?: Map<any, any>) => {
let _children = this.getSchemaChildren(schema); let _children = this.getSchemaChildren(schema);
let children: any = []; let children: any = [];
@ -605,8 +603,8 @@ export default function baseRenererFactory() {
_children.forEach((_child: any) => { _children.forEach((_child: any) => {
const _childVirtualDom = this.__createVirtualDom( const _childVirtualDom = this.__createVirtualDom(
isJSExpression(_child) ? parseExpression(_child, this.self) : _child, isJSExpression(_child) ? parseExpression(_child, scope) : _child,
this.self, scope,
{ {
schema, schema,
Comp, Comp,
@ -625,11 +623,11 @@ export default function baseRenererFactory() {
return null; return null;
}; };
__getComponentProps = (schema: ISchema, Comp: any, componentInfo?: any) => { __getComponentProps = (schema: ISchema, scope: any, Comp: any, componentInfo?: any) => {
if (!schema) { if (!schema) {
return {}; return {};
} }
return this.__parseProps(schema?.props, this.self, '', { return this.__parseProps(schema?.props, scope, '', {
schema, schema,
Comp, Comp,
componentInfo: { componentInfo: {
@ -639,7 +637,7 @@ export default function baseRenererFactory() {
}) || {}; }) || {};
}; };
__createLoopVirtualDom = (schema: ISchema, self: any, parentInfo: IInfo, idx: number | string) => { __createLoopVirtualDom = (schema: ISchema, scope: any, parentInfo: IInfo, idx: number | string) => {
if (isFileSchema(schema)) { if (isFileSchema(schema)) {
console.warn('file type not support Loop'); console.warn('file type not support Loop');
return null; return null;
@ -652,7 +650,7 @@ export default function baseRenererFactory() {
[itemArg]: item, [itemArg]: item,
[indexArg]: i, [indexArg]: i,
}; };
loopSelf.__proto__ = self; loopSelf.__proto__ = scope;
return this.__createVirtualDom( return this.__createVirtualDom(
{ {
...schema, ...schema,
@ -670,7 +668,7 @@ export default function baseRenererFactory() {
return engine?.props?.designMode === 'design'; return engine?.props?.designMode === 'design';
} }
__parseProps = (props: any, self: any, path: string, info: IInfo): any => { __parseProps = (props: any, scope: any, path: string, info: IInfo): any => {
const { schema, Comp, componentInfo = {} } = info; const { schema, Comp, componentInfo = {} } = info;
const propInfo = getValue(componentInfo.props, path); const propInfo = getValue(componentInfo.props, path);
// FIXME! 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义 // FIXME! 将这行逻辑外置，解耦，线上环境不要验证参数，调试环境可以有，通过传参自定义
@ -683,7 +681,7 @@ export default function baseRenererFactory() {
const parseReactNode = (data: any, params: any) => { const parseReactNode = (data: any, params: any) => {
if (isEmpty(params)) { if (isEmpty(params)) {
return checkProps(this.__createVirtualDom(data, self, ({ schema, Comp } as IInfo))); return checkProps(this.__createVirtualDom(data, scope, ({ schema, Comp } as IInfo)));
} }
return checkProps(function () { return checkProps(function () {
const args: any = {}; const args: any = {};
@ -696,8 +694,8 @@ export default function baseRenererFactory() {
} }
}); });
} }
args.__proto__ = self; args.__proto__ = scope;
return self.__createVirtualDom(data, args, { schema, Comp }); return scope.__createVirtualDom(data, args, { schema, Comp });
}); });
}; };
@ -713,7 +711,7 @@ export default function baseRenererFactory() {
return checkProps(props); return checkProps(props);
} }
if (isJSExpression(props)) { if (isJSExpression(props)) {
props = parseExpression(props, self); props = parseExpression(props, scope);
// 只有当变量解析出来为模型结构的时候才会继续解析 // 只有当变量解析出来为模型结构的时候才会继续解析
if (!isSchema(props) && !isJSSlot(props)) return checkProps(props); if (!isSchema(props) && !isJSSlot(props)) return checkProps(props);
} }
@ -726,7 +724,7 @@ export default function baseRenererFactory() {
if (i18nProp) { if (i18nProp) {
props = i18nProp; props = i18nProp;
} else { } else {
return parseI18n(props, self); return parseI18n(props, scope);
} }
} }
@ -768,10 +766,10 @@ export default function baseRenererFactory() {
); );
} }
if (Array.isArray(props)) { if (Array.isArray(props)) {
return checkProps(props.map((item, idx) => this.__parseProps(item, self, path ? `${path}.${idx}` : `${idx}`, info))); return checkProps(props.map((item, idx) => this.__parseProps(item, scope, path ? `${path}.${idx}` : `${idx}`, info)));
} }
if (typeof props === 'function') { if (typeof props === 'function') {
return checkProps(props.bind(self)); return checkProps(props.bind(scope));
} }
if (props && typeof props === 'object') { if (props && typeof props === 'object') {
if (props.$$typeof) return checkProps(props); if (props.$$typeof) return checkProps(props);
@ -781,7 +779,7 @@ export default function baseRenererFactory() {
res[key] = val; res[key] = val;
return; return;
} }
res[key] = this.__parseProps(val, self, path ? `${path}.${key}` : key, info); res[key] = this.__parseProps(val, scope, path ? `${path}.${key}` : key, info);
}); });
return checkProps(res); return checkProps(res);
} }
@ -829,12 +827,13 @@ export default function baseRenererFactory() {
return createElement(AppContext.Consumer, {}, children); return createElement(AppContext.Consumer, {}, children);
}; };
__getHocComp(Comp: any, schema: any) { __getHocComp(Comp: any, schema: any, scope: any) {
this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => { this.componentHoc.forEach((ComponentConstruct: IComponentConstruct) => {
Comp = ComponentConstruct(Comp || Div, { Comp = ComponentConstruct(Comp || Div, {
schema, schema,
componentInfo: {}, componentInfo: {},
baseRenderer: this, baseRenderer: this,
scope,
}); });
}); });
@ -843,8 +842,11 @@ export default function baseRenererFactory() {
__renderComp(Comp: any, ctxProps: object) { __renderComp(Comp: any, ctxProps: object) {
const { __schema } = this.props; const { __schema } = this.props;
Comp = this.__getHocComp(Comp, __schema); const { __ctx } = this.props;
const data = this.__parseProps(__schema?.props, this.self, '', { const scope: any = {};
scope.__proto__ = __ctx || this;
Comp = this.__getHocComp(Comp, __schema, scope);
const data = this.__parseProps(__schema?.props, scope, '', {
schema: __schema, schema: __schema,
Comp, Comp,
componentInfo: {}, componentInfo: {},

2
packages/types/src/metadata.ts
View File

@ -29,6 +29,8 @@ export interface ComponentConfigure {
descriptor?: string; descriptor?: string;
nestingRule?: NestingRule; nestingRule?: NestingRule;
isMinimalRenderUnit?: boolean;
rootSelector?: string; rootSelector?: string;
// copy, move, remove | * // copy, move, remove | *
disableBehaviors?: string[] | string; disableBehaviors?: string[] | string;

6
packages/vision-polyfill/src/bundle/upgrade-metadata.ts
View File

@ -132,6 +132,7 @@ export interface OldPrototypeConfig {
componentName: string; // => componentName: string; // =>
docUrl?: string; // => docUrl?: string; // =>
defaultProps?: any; // => ? defaultProps?: any; // => ?
isMinimalRenderUnit?: boolean; // => false
/** /**
* extra actions on the outline of current selected node * extra actions on the outline of current selected node
* by default we have: remove / clone * by default we have: remove / clone
@ -702,6 +703,9 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
devMode, devMode,
schema, schema,
isTopFixed, isTopFixed,
// render
isMinimalRenderUnit,
} = oldConfig; } = oldConfig;
let { let {
canResizing, // resizing canResizing, // resizing
@ -714,6 +718,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
docUrl, docUrl,
devMode: devMode || 'procode', devMode: devMode || 'procode',
schema: schema?.componentsTree[0], schema: schema?.componentsTree[0],
// isMinimalRenderUnit,
}; };
if (category) { if (category) {
@ -732,6 +737,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
isModal, isModal,
isFloating, isFloating,
descriptor, descriptor,
isMinimalRenderUnit,
}; };
if (canOperating === false) { if (canOperating === false) {