From 14ac0163a182e3d44e7fcfe77678f32258b3e913 Mon Sep 17 00:00:00 2001 From: * <8> Date: Tue, 25 Jan 2022 18:06:11 +0800 Subject: [PATCH 1/2] Match-id-faffd764b594db29fe1fde20f07ce87444d16c7e --- libs/horizon/src/dom/DOMInternalKeys.ts | 3 +- libs/horizon/src/dom/DOMOperator.ts | 8 +-- .../DOMPropertiesHandler.ts | 8 +-- .../dom/DOMPropertiesHandler/StyleHandler.ts | 34 +++++------ .../DOMPropertiesHandler/UpdateCommonProp.ts | 16 +++-- libs/horizon/src/dom/SelectionRangeHandler.ts | 8 +-- .../src/dom/validators/PropertiesData.ts | 10 ++-- .../src/dom/validators/ValidateProps.ts | 10 ++-- .../dom/valueHandler/SelectValueHandler.ts | 18 +++--- libs/horizon/src/renderer/Types.ts | 1 - .../src/renderer/taskExecutor/BrowserAsync.ts | 3 +- .../src/renderer/taskExecutor/RenderQueue.ts | 48 +++++++-------- .../src/renderer/taskExecutor/TaskExecutor.ts | 59 ++++++++++--------- .../src/renderer/taskExecutor/TaskQueue.ts | 36 +++++------ .../src/renderer/vnode/VNodeCreator.ts | 2 +- .../src/renderer/vnode/VNodeShouldUpdate.ts | 26 ++++---- 16 files changed, 145 insertions(+), 145 deletions(-) diff --git a/libs/horizon/src/dom/DOMInternalKeys.ts b/libs/horizon/src/dom/DOMInternalKeys.ts index 309fd09b..2be5522e 100644 --- a/libs/horizon/src/dom/DOMInternalKeys.ts +++ b/libs/horizon/src/dom/DOMInternalKeys.ts @@ -24,11 +24,12 @@ const internalKeys = { }; // 通过 VNode 实例获取 DOM 节点 -export function getDom(vNode: VNode): Element | Text | void { +export function getDom(vNode: VNode): Element | Text | null { const {tag} = vNode; if (tag === DomComponent || tag === DomText) { return vNode.realNode; } + return null; } // 将 VNode 属性相关信息挂到 DOM 对象的特定属性上 diff --git a/libs/horizon/src/dom/DOMOperator.ts b/libs/horizon/src/dom/DOMOperator.ts index 68bf83b8..71204206 100644 --- a/libs/horizon/src/dom/DOMOperator.ts +++ b/libs/horizon/src/dom/DOMOperator.ts @@ -5,7 +5,7 @@ import { import { createDom, } from './utils/DomCreator'; -import { getSelectionInfo, resetSelectionRange, selectionData } from './SelectionRangeHandler'; +import { getSelectionInfo, resetSelectionRange, SelectionData } from './SelectionRangeHandler'; import { isElement, isComment, isDocument, isDocumentFragment, getDomTag, shouldAutoFocus } from './utils/Common'; import { NSS } from './utils/DomCreator'; import { adjustStyleValue } from './DOMPropertiesHandler/StyleHandler'; @@ -37,7 +37,7 @@ export type Props = { export type Container = (Element & { _treeRoot?: VNode }) | (Document & { _treeRoot?: VNode }); -let selectionInfo: null | selectionData = null; +let selectionInfo: null | SelectionData = null; function getChildNS(parentNS: string | null, tagName: string): string { if (parentNS === NSS.svg && tagName === 'foreignObject') { @@ -54,12 +54,12 @@ function getChildNS(parentNS: string | null, tagName: string): string { } // 获取容器 -export function getNSCtx(dom?: Container, parentNS: string, type: string): string { +export function getNSCtx(parentNS: string, type: string, dom: Container | undefined): string { return dom ? getChildNS(dom.namespaceURI ?? null, dom.nodeName) : getChildNS(parentNS, type); } export function prepareForSubmit(): void { - selectionInfo = getSelectionInfo(); + selectionInfo = getSelectionInfo(); } export function resetAfterSubmit(): void { diff --git a/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts b/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts index 5016d811..5ec79c33 100644 --- a/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts +++ b/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts @@ -8,7 +8,7 @@ import { } from '../../event/EventBinding'; import { isEventProp, isNativeElement } from '../validators/ValidateProps'; -function updateOneProp(dom, propName, propVal, isNativeTag, isInit?: boolean) { +function updateOneProp(dom, propName, isNativeTag, propVal?, isInit?: boolean) { if (propName === 'style') { setStyles(dom, propVal); } else if (propName === 'dangerouslySetInnerHTML') { @@ -42,7 +42,7 @@ export function setDomProps( const propName = keysOfProps[i]; const propVal = props[propName]; - updateOneProp(dom, propName, propVal, isNativeTag, true); + updateOneProp(dom, propName, isNativeTag, propVal, true); } } @@ -55,7 +55,7 @@ export function updateDomProps( for (let i = 0; i < changeList.length; i++) { const { propName, propVal } = changeList[i]; - updateOneProp(dom, propName, propVal, isNativeTag); + updateOneProp(dom, propName, isNativeTag, propVal); } } @@ -111,7 +111,7 @@ export function compareProps( for (let i = 0; i < keysOfNewProps.length; i++) { const propName = keysOfNewProps[i]; const newPropValue = newProps[propName]; - const oldPropValue = oldProps != null ? oldProps[propName] : undefined; + const oldPropValue = oldProps != null ? oldProps[propName] : null; if (newPropValue === oldPropValue || (newPropValue == null && oldPropValue == null)) { // 新旧属性值未发生变化,或者新旧属性皆为空值,不需要进行处理 diff --git a/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts b/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts index 23e1b91c..ae576bfe 100644 --- a/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts +++ b/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts @@ -1,3 +1,20 @@ +/** + * 对一些没有写单位的样式进行适配,例如:width: 10 => width: 10px + * 对空值或布尔值进行适配,转为空字符串 + * 去掉多余空字符 + */ + export function adjustStyleValue(name, value) { + let validValue = value; + + if (typeof value === 'number' && value !== 0 && isNeedUnitCSS(name)) { + validValue = `${value}px`; + } else if (value === '' || value == null || typeof value === 'boolean') { + validValue = ''; + } + + return validValue; +} + /** * 设置 DOM 节点的 style 属性 */ @@ -32,20 +49,3 @@ function isNeedUnitCSS(propName: string) { || propName.startsWith('box') || propName.endsWith('Opacity')); } - -/** - * 对一些没有写单位的样式进行适配,例如:width: 10 => width: 10px - * 对空值或布尔值进行适配,转为空字符串 - * 去掉多余空字符 - */ -export function adjustStyleValue(name, value) { - let validValue = value; - - if (typeof value === 'number' && value !== 0 && isNeedUnitCSS(name)) { - validValue = `${value}px`; - } else if (value === '' || value == null || typeof value === 'boolean') { - validValue = ''; - } - - return validValue; -} diff --git a/libs/horizon/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts b/libs/horizon/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts index 5ac5e058..a2fe3e9d 100644 --- a/libs/horizon/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts +++ b/libs/horizon/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts @@ -18,6 +18,13 @@ const svgHumpAttr = new Set(['allowReorder', 'autoReverse', 'baseFrequency', 'ba 'stitchTiles', 'surfaceScale','systemLanguage', 'tableValues', 'targetX', 'targetY', 'textLength','viewBox', 'viewTarget', 'xChannelSelector','yChannelSelector', 'zoomAndPan']); +// 驼峰 变 “-” +function convertToLowerCase(str) { + const replacer = (match, char) => `-${char.toLowerCase()}`; + + return str.replace(/([A-Z])/g, replacer); +} + /** * 给 dom 设置属性 * attrName 指代码中属性设置的属性名称(如 class) @@ -70,12 +77,3 @@ export function updateCommonProp(dom: Element, attrName: string, value: any, isN } } } - -// 驼峰 变 “-” -function convertToLowerCase(str) { - const replacer = (match, char) => { - return `-${char.toLowerCase()}`; - } - - return str.replace(/([A-Z])/g, replacer); -}; diff --git a/libs/horizon/src/dom/SelectionRangeHandler.ts b/libs/horizon/src/dom/SelectionRangeHandler.ts index f498174d..62931335 100644 --- a/libs/horizon/src/dom/SelectionRangeHandler.ts +++ b/libs/horizon/src/dom/SelectionRangeHandler.ts @@ -105,16 +105,16 @@ export function getSelectionInfo() { }; } -export interface selectionData { +export interface SelectionData { focusedDom: HTMLInputElement | HTMLTextAreaElement | void; selectionRange: { - start: number; - end: number; + start: number | null; + end: number | null; }; } // 防止选择范围内的信息因为节点删除或其他原因导致的信息丢失 -export function resetSelectionRange(preSelectionRangeData: selectionData) { +export function resetSelectionRange(preSelectionRangeData: SelectionData) { // 当前 focus 的元素 const currentFocusedDom = getIFrameFocusedDom(); diff --git a/libs/horizon/src/dom/validators/PropertiesData.ts b/libs/horizon/src/dom/validators/PropertiesData.ts index 9eb90b7b..70645aae 100644 --- a/libs/horizon/src/dom/validators/PropertiesData.ts +++ b/libs/horizon/src/dom/validators/PropertiesData.ts @@ -6,7 +6,7 @@ export enum PROPERTY_TYPE { STRING, // 普通的字符串类型 SPECIAL, // 需要特殊处理的属性类型 BOOLEAN_STR, // 字符串类型的 true false -}; +} export type PropDetails = { propName: string; @@ -15,10 +15,6 @@ export type PropDetails = { attrNS: string | null; }; -export function getPropDetails(name: string): PropDetails | null { - return propsDetailData[name] || null; -} - // 属性相关数据 // 依次为 propertyName、type、attributeName、attributeNamespace,不填则使用默认值 // type 默认 STRING @@ -123,3 +119,7 @@ propertiesData.forEach(record => { attrNS, }; }); + +export function getPropDetails(name: string): PropDetails | null { + return propsDetailData[name] || null; +} diff --git a/libs/horizon/src/dom/validators/ValidateProps.ts b/libs/horizon/src/dom/validators/ValidateProps.ts index dddd8175..5616f342 100644 --- a/libs/horizon/src/dom/validators/ValidateProps.ts +++ b/libs/horizon/src/dom/validators/ValidateProps.ts @@ -34,6 +34,11 @@ function isInvalidBoolean( return false; } +// 是事件属性 +export function isEventProp(propName) { + return propName.substr(0, 2) === 'on'; +} + function isValidProp(tagName, name, value) { // 校验事件名称 if (isEventProp(name)) { @@ -79,11 +84,6 @@ export function isInvalidValue( return false; } -// 是事件属性 -export function isEventProp(propName) { - return propName.substr(0, 2) === 'on'; -} - // dev模式下校验属性是否合法 export function validateProps(type, props) { if (!props) { diff --git a/libs/horizon/src/dom/valueHandler/SelectValueHandler.ts b/libs/horizon/src/dom/valueHandler/SelectValueHandler.ts index 6602e876..75812620 100644 --- a/libs/horizon/src/dom/valueHandler/SelectValueHandler.ts +++ b/libs/horizon/src/dom/valueHandler/SelectValueHandler.ts @@ -1,14 +1,5 @@ import {HorizonSelect, IProperty} from '../utils/Interface'; -// 更新