github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-03-01 05:30:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(perf): 优化插入 style 节点的逻辑, 避免无意义的删除和插入

Browse Source
This commit is contained in:
力皓 2021-04-21 09:44:52 +08:00
parent 4157aa0443
commit bedd598fc7
4 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/designer/src/builtin-simulator/host.ts
View File

@ -291,6 +291,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
this._iframe = iframe;
this._contentWindow = iframe.contentWindow!;
this._contentDocument = this._contentWindow.document;
const library = this.get('library') as LibraryItem[];
const libraryAsset: AssetList = this.buildLibrary();
@ -337,7 +338,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
renderer.run();
// init events, overlays
this._contentDocument = this._contentWindow.document;
this.viewport.setScrollTarget(this._contentWindow);
this.setupEvents();

2
packages/editor-skeleton/src/transducers/addon-combine.ts
View File

@ -59,7 +59,7 @@ export default function (metadata: TransformedComponentMetadata): TransformedCom
},
{
description: '更新时',
name: 'componentDidMount',
name: 'componentDidUpdate',
},
{
description: '卸载时',

2
packages/react-simulator-renderer/src/renderer.ts
View File

@ -463,7 +463,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
container.id = containerId;
}
// ==== compatiable vision
// ==== compatible vision
document.documentElement.classList.add('engine-page');
document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends

55
packages/vision-polyfill/src/props-reducers/style-reducer.ts
View File

@ -2,24 +2,28 @@ import { editor, designer } from '@ali/lowcode-engine';
import { toCss } from '@ali/vu-css-style';
export function stylePropsReducer(props: any, node: any) {
let cssId;
let cssClass;
let styleProp;
if (props && typeof props === 'object' && props.__style__) {
const cssId = `_style_pesudo_${ node.id.replace(/\$/g, '_')}`;
const cssClass = `_css_pesudo_${ node.id.replace(/\$/g, '_')}`;
const styleProp = props.__style__;
cssId = `_style_pesudo_${node.id.replace(/\$/g, '_')}`;
cssClass = `_css_pesudo_${node.id.replace(/\$/g, '_')}`;
styleProp = props.__style__;
appendStyleNode(props, styleProp, cssClass, cssId);
}
if (props && typeof props === 'object' && props.pageStyle) {
const cssId = '_style_pesudo_engine-document';
const cssClass = 'engine-document';
const styleProp = props.pageStyle;
cssId = '_style_pesudo_engine-document';
cssClass = 'engine-document';
styleProp = props.pageStyle;
appendStyleNode(props, styleProp, cssClass, cssId);
}
if (props && typeof props === 'object' && props.containerStyle) {
const cssId = `_style_pesudo_${ node.id}`;
const cssClass = `_css_pesudo_${ node.id.replace(/\$/g, '_')}`;
const styleProp = props.containerStyle;
cssId = `_style_pesudo_${node.id}`;
cssClass = `_css_pesudo_${node.id.replace(/\$/g, '_')}`;
styleProp = props.containerStyle;
appendStyleNode(props, styleProp, cssClass, cssId);
}
props.className = cssClass;
return props;
}
@ -28,21 +32,38 @@ function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: st
if (!doc) {
return;
}
const dom = doc.getElementById(cssId);
if (dom) {
dom.parentNode?.removeChild(dom);
}
const dom = doc.getElementById(cssId) as HTMLStyleElement;
if (typeof styleProp === 'object') {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const newStyleStr = transformStyleStr(styleProp, cssClass);
if (dom && stringEquals(dom.textContent!, newStyleStr)) {
return;
}
if (dom) {
dom.parentNode?.removeChild(dom);
}
const s = doc.createElement('style');
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
doc.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(doc.createTextNode(styleProp.replace(/(\d+)rpx/g, (a, b) => {
return `${b / 2}px`;
}).replace(/:root/g, `.${cssClass}`)));
s.appendChild(doc.createTextNode(newStyleStr));
}
}
function stringEquals(str: string, targetStr: string): boolean {
return removeWhitespace(str) === removeWhitespace(targetStr);
}
function removeWhitespace(str: string = ''): string {
return str.replace(/\s/g, '');
}
function transformStyleStr(styleStr: string = '', cssClass: string): string {
return styleStr
.replace(/(\d+)rpx/g, (all, num) => {
return `${num / 2}px`;
})
.replace(/:root/g, `.${cssClass}`);
}