yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Match-id-ca947dd7a03787705a76427d3aae9528da9480e7

This commit is contained in:
* 2022-01-27 10:19:53 +08:00 committed by *
parent 42ad304f52 a31d2f6fc4
commit 59c92e0978
41 changed files with 573 additions and 584 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
libs/horizon/src/dom/DOMExternal.ts
View File

@ -10,30 +10,6 @@ import {findDOMByClassInst} from '../renderer/vnode/VNodeUtils';
import {TreeRoot} from '../renderer/vnode/VNodeTags';
import {Callback} from '../renderer/UpdateHandler';
function executeRender(
children: any,
container: Container,
callback?: Callback,
) {
let treeRoot = container._treeRoot;
if (!treeRoot) {
treeRoot = createRoot(children, container, callback);
} else { // container被render过
if (typeof callback === 'function') {
const cb = callback;
callback = function () {
const instance = getFirstCustomDom(treeRoot);
cb.call(instance);
};
}
// 执行更新操作
startUpdate(children, treeRoot, callback);
}
return getFirstCustomDom(treeRoot);
}
function createRoot(children: any, container: Container, callback?: Callback) {
// 清空容器
let child = container.lastChild;
@ -66,7 +42,31 @@ function createRoot(children: any, container: Container, callback?: Callback) {
return treeRoot;
}
function findDOMNode(domOrEle: Element): null | Element | Text {
function executeRender(
children: any,
container: Container,
callback?: Callback,
) {
let treeRoot = container._treeRoot;
if (!treeRoot) {
treeRoot = createRoot(children, container, callback);
} else { // container被render过
if (typeof callback === 'function') {
const cb = callback;
callback = function () {
const instance = getFirstCustomDom(treeRoot);
cb.call(instance);
};
}
// 执行更新操作
startUpdate(children, treeRoot, callback);
}
return getFirstCustomDom(treeRoot);
}
function findDOMNode(domOrEle?: Element): null | Element | Text {
if (domOrEle == null) {
return null;
}

8
libs/horizon/src/dom/DOMInternalKeys.ts
View File

@ -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 对象的特定属性上
@ -72,7 +73,7 @@ export function getNearestVNode(dom: Node): null | VNode {
}
// 获取 vNode 上的属性相关信息
export function getVNodeProps(dom: Element | Text): Props {
export function getVNodeProps(dom: Element | Text): Props | null{
return dom[internalKeys.props] || null;
}
@ -93,7 +94,8 @@ export function getEventListeners(dom: EventTarget): Set<string> {
export function getEventToListenerMap(target: EventTarget): Map<string, EventListener> {
let eventsMap = target[internalKeys.nonDelegatedEvents];
if (!eventsMap) {
eventsMap = target[internalKeys.nonDelegatedEvents] = new Map();
eventsMap = new Map();
target[internalKeys.nonDelegatedEvents] = eventsMap;
}
return eventsMap;
}

42
libs/horizon/src/dom/DOMOperator.ts
View File

@ -5,13 +5,13 @@ import {
import {
createDom,
} from './utils/DomCreator';
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';
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';
import {listenDelegatedEvents} from '../event/EventBinding';
import type {VNode} from '../renderer/Types';
import { listenDelegatedEvents } from '../event/EventBinding';
import type { VNode } from '../renderer/Types';
import {
setInitValue,
getPropsWithoutValue,
@ -21,10 +21,10 @@ import {
compareProps,
setDomProps, updateDomProps
} from './DOMPropertiesHandler/DOMPropertiesHandler';
import {isNativeElement, validateProps} from './validators/ValidateProps';
import {watchValueChange} from './valueHandler/ValueChangeHandler';
import {DomComponent, DomText} from '../renderer/vnode/VNodeTags';
import {updateCommonProp} from './DOMPropertiesHandler/UpdateCommonProp';
import { isNativeElement, validateProps } from './validators/ValidateProps';
import { watchValueChange } from './valueHandler/ValueChangeHandler';
import { DomComponent, DomText } from '../renderer/vnode/VNodeTags';
import { updateCommonProp } from './DOMPropertiesHandler/UpdateCommonProp';
export type Props = {
autoFocus?: boolean;
@ -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,18 +54,12 @@ function getChildNS(parentNS: string | null, tagName: string): string {
}
// 获取容器
export function getNSCtx(dom: Container, parentNS: string, type: string): string {
let namespace;
if (dom) {
namespace = getChildNS(dom.namespaceURI ?? null, dom.nodeName);
} else {
namespace = getChildNS(parentNS, type);
}
return namespace;
export function getNSCtx(parentNS: string, type: string, dom?: Container): string {
return dom ? getChildNS(dom.namespaceURI ?? null, dom.nodeName) : getChildNS(parentNS, type);
}
export function prepareForSubmit(): void {
selectionInfo = <selectionData>getSelectionInfo();
selectionInfo = <SelectionData>getSelectionInfo();
}
export function resetAfterSubmit(): void {
@ -156,7 +150,7 @@ export function newTextDom(
// 提交vNode的类型为Component或者Text的更新
export function submitDomUpdate(tag: string, vNode: VNode) {
const newProps = vNode.props;
const element: Element = vNode.realNode;
const element: Element | null = vNode.realNode;
if (tag === DomComponent) {
// DomComponent类型
@ -179,8 +173,10 @@ export function submitDomUpdate(tag: string, vNode: VNode) {
}
}
} else if (tag === DomText) {
// text类型
element.textContent = newProps;
if (element != null) {
// text类型
element.textContent = newProps;
}
}
}

53
libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts
View File

@ -8,6 +8,30 @@ import {
} from '../../event/EventBinding';
import { isEventProp, isNativeElement } from '../validators/ValidateProps';
function updateOneProp(dom, propName, isNativeTag, propVal?, isInit?: boolean) {
if (propName === 'style') {
setStyles(dom, propVal);
} else if (propName === 'dangerouslySetInnerHTML') {
dom.innerHTML = propVal.__html;
} else if (propName === 'children') { // 只处理纯文本子节点，其他children在VNode树中处理
const type = typeof propVal;
if (type === 'string') {
dom.textContent = propVal;
} else if (type === 'number') {
dom.textContent = propVal + ''; // 这种数字转字符串的方式效率最高
}
} else if (isEventProp(propName)) {
// 事件监听属性处理
if (!allDelegatedHorizonEvents.has(propName)) {
listenNonDelegatedEvent(propName, dom, propVal);
}
} else {
if (!isInit || (isInit && propVal != null)) {
updateCommonProp(dom, propName, propVal, isNativeTag);
}
}
}
// 初始化DOM属性
export function setDomProps(
tagName: string,
@ -21,7 +45,7 @@ export function setDomProps(
const propName = keysOfProps[i];
const propVal = props[propName];
updateOneProp(dom, propName, propVal, isNativeTag, true);
updateOneProp(dom, propName, isNativeTag, propVal, true);
}
}
@ -34,30 +58,7 @@ export function updateDomProps(
for (let i = 0; i < changeList.length; i++) {
const { propName, propVal } = changeList[i];
updateOneProp(dom, propName, propVal, isNativeTag);
}
}
function updateOneProp(dom, propName, propVal, isNativeTag, isInit?: boolean) {
if (propName === 'style') {
setStyles(dom, propVal);
} else if (propName === 'dangerouslySetInnerHTML') {
dom.innerHTML = propVal.__html;
} else if (propName === 'children') { // 只处理纯文本子节点，其他children在VNode树中处理
if (typeof propVal === 'string') {
dom.textContent = propVal;
} else if (typeof propVal === 'number') {
dom.textContent = propVal + ''; // 这种数字转字符串的方式效率最高
}
} else if (isEventProp(propName)) {
// 事件监听属性处理
if (!allDelegatedHorizonEvents.has(propName)) {
listenNonDelegatedEvent(propName, dom, propVal);
}
} else {
if (!isInit || (isInit && propVal != null)) {
updateCommonProp(dom, propName, propVal, isNativeTag);
}
updateOneProp(dom, propName, isNativeTag, propVal);
}
}
@ -113,7 +114,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)) {
// 新旧属性值未发生变化，或者新旧属性皆为空值，不需要进行处理

56
libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts
View File

@ -1,3 +1,31 @@
function isNeedUnitCSS(propName: string) {
return !(noUnitCSS.includes(propName)
|| propName.startsWith('borderImage')
|| propName.startsWith('flex')
|| propName.startsWith('gridRow')
|| propName.startsWith('gridColumn')
|| propName.startsWith('stroke')
|| 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;
}
/**
* 设置 DOM 节点的 style 属性
*/
@ -21,31 +49,3 @@ export function setStyles(dom, styles) {
*/
const noUnitCSS = ['animationIterationCount', 'columnCount', 'columns', 'gridArea', 'fontWeight', 'lineClamp',
'lineHeight', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'zoom'];
function isNeedUnitCSS(propName: string) {
return !(noUnitCSS.includes(propName)
|| propName.startsWith('borderImage')
|| propName.startsWith('flex')
|| propName.startsWith('gridRow')
|| propName.startsWith('gridColumn')
|| propName.startsWith('stroke')
|| 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;
}

15
libs/horizon/src/dom/DOMPropertiesHandler/UpdateCommonProp.ts
View File

@ -18,6 +18,12 @@ 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 +76,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);
};

6
libs/horizon/src/dom/SelectionRangeHandler.ts
View File

@ -105,16 +105,16 @@ export function getSelectionInfo() {
};
}
export interface selectionData {
export interface SelectionData {
focusedDom: HTMLInputElement | HTMLTextAreaElement | void;
selectionRange: {
selectionRange?: {
start: number;
end: number;
};
}
// 防止选择范围内的信息因为节点删除或其他原因导致的信息丢失
export function resetSelectionRange(preSelectionRangeData: selectionData) {
export function resetSelectionRange(preSelectionRangeData: SelectionData) {
// 当前 focus 的元素
const currentFocusedDom = getIFrameFocusedDom();

2
libs/horizon/src/dom/utils/Interface.ts
View File

@ -3,7 +3,7 @@ export interface IProperty {
}
export interface HorizonSelect extends HTMLSelectElement {
_multiple: boolean;
_multiple?: boolean;
}
export type HorizonDom = Element | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

10
libs/horizon/src/dom/validators/PropertiesData.ts
View File

@ -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;
}

10
libs/horizon/src/dom/validators/ValidateProps.ts
View File

@ -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) {

18
libs/horizon/src/dom/valueHandler/SelectValueHandler.ts
View File

@ -1,14 +1,5 @@
import {HorizonSelect, IProperty} from '../utils/Interface';
// 更新 <option>
function updateValue(options, newValues: any, isMultiple: boolean) {
if (isMultiple) {
updateMultipleValue(options, newValues);
} else {
updateSingleValue(options, newValues);
}
}
function updateMultipleValue(options, newValues) {
const newValueSet = new Set();
@ -39,6 +30,15 @@ function updateSingleValue(options, newValue) {
}
}
// 更新 <option>
function updateValue(options, newValues: any, isMultiple: boolean) {
if (isMultiple) {
updateMultipleValue(options, newValues);
} else {
updateSingleValue(options, newValues);
}
}
export function getSelectPropsWithoutValue(dom: HorizonSelect, properties: Object) {
return {
...properties,

9
libs/horizon/src/event/HorizonEventMain.ts
View File

@ -122,7 +122,9 @@ function getProcessListenersFacade(
));
}
if (nativeEvtName === 'compositionend' || nativeEvtName === 'compositionstart' || nativeEvtName === 'compositionupdate') {
if (nativeEvtName === 'compositionend' ||
nativeEvtName === 'compositionstart' ||
nativeEvtName === 'compositionupdate') {
processingListenerList = processingListenerList.concat(getCompositionListeners(
nativeEvtName,
nativeEvent,
@ -183,13 +185,14 @@ export function handleEventMain(
// 有事件正在执行，同步执行事件
if (isInEventsExecution) {
return triggerHorizonEvents(nativeEvtName, isCapture, nativeEvent, rootVNode);
triggerHorizonEvents(nativeEvtName, isCapture, nativeEvent, rootVNode);
return;
}
// 没有事件在执行，经过调度再执行事件
isInEventsExecution = true;
try {
return asyncUpdates(() =>
asyncUpdates(() =>
triggerHorizonEvents(
nativeEvtName,
isCapture,

18
libs/horizon/src/event/WrapperListener.ts
View File

@ -5,15 +5,6 @@ import {handleEventMain} from './HorizonEventMain';
import {runDiscreteUpdates} from '../renderer/Renderer';
import {getEventTarget} from './utils';
// 生成委托事件的监听方法
export function createCustomEventListener(
target: EventTarget,
nativeEvtName: string,
isCapture: boolean,
): EventListener {
return triggerDelegatedEvent.bind(null, nativeEvtName, isCapture, target);
}
// 触发委托事件
function triggerDelegatedEvent(
nativeEvtName: string,
@ -39,3 +30,12 @@ function triggerDelegatedEvent(
}
handleEventMain(nativeEvtName, isCapture, nativeEvent, targetVNode, targetDom);
}
// 生成委托事件的监听方法
export function createCustomEventListener(
target: EventTarget,
nativeEvtName: string,
isCapture: boolean,
): EventListener {
return triggerDelegatedEvent.bind(null, nativeEvtName, isCapture, target);
}

91
libs/horizon/src/event/customEvents/CustomBaseEvent.ts
View File

@ -4,6 +4,51 @@
import {VNode} from '../../renderer/Types';
// 从原生事件中复制属性到自定义事件中
function extendAttribute(target, source) {
const attributes = [
// AnimationEvent
'animationName', 'elapsedTime', 'pseudoElement',
// CompositionEvent、InputEvent
'data',
// DragEvent
'dataTransfer',
// FocusEvent
'relatedTarget',
// KeyboardEvent
'key', 'keyCode', 'charCode', 'code', 'location', 'ctrlKey', 'shiftKey',
'altKey', 'metaKey', 'repeat', 'locale', 'getModifierState', 'clipboardData',
// MouseEvent
'button', 'buttons', 'clientX', 'clientY', 'movementX', 'movementY',
'pageX', 'pageY', 'screenX', 'screenY', 'currentTarget',
// PointerEvent
'pointerId', 'width', 'height', 'pressure', 'tangentialPressure',
'tiltX', 'tiltY', 'twist', 'pointerType', 'isPrimary',
// TouchEvent
'touches', 'targetTouches', 'changedTouches',
// TransitionEvent
'propertyName',
// UIEvent
'view', 'detail',
// WheelEvent
'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
];
const length = attributes.length;
for (let i = 0; i < length; i++) {
const attr = attributes[i];
const type = source[attr];
if (type !== 'undefined') {
if (type === 'function') {
target[attr] = function() {
return source[attr].apply(source, arguments);
};
} else {
target[attr] = source[attr];
}
}
}
}
export class CustomBaseEvent {
data: string;
@ -79,49 +124,3 @@ export class CustomBaseEvent {
this.isPropagationStopped = () => true;
}
}
// 从原生事件中复制属性到自定义事件中
function extendAttribute(target, source) {
const attributes = [
// AnimationEvent
'animationName', 'elapsedTime', 'pseudoElement',
// CompositionEvent、InputEvent
'data',
// DragEvent
'dataTransfer',
// FocusEvent
'relatedTarget',
// KeyboardEvent
'key', 'keyCode', 'charCode', 'code', 'location', 'ctrlKey', 'shiftKey',
'altKey', 'metaKey', 'repeat', 'locale', 'getModifierState', 'clipboardData',
// MouseEvent
'button', 'buttons', 'clientX', 'clientY', 'movementX', 'movementY',
'pageX', 'pageY', 'screenX', 'screenY', 'currentTarget',
// PointerEvent
'pointerId', 'width', 'height', 'pressure', 'tangentialPressure',
'tiltX', 'tiltY', 'twist', 'pointerType', 'isPrimary',
// TouchEvent
'touches', 'targetTouches', 'changedTouches',
// TransitionEvent
'propertyName',
// UIEvent
'view', 'detail',
// WheelEvent
'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
];
const length = attributes.length;
for (let i = 0; i < length; i++) {
const attr = attributes[i];
const type = source[attr];
if (type !== 'undefined') {
if (type === 'function') {
target[attr] = function() {
return source[attr].apply(source, arguments);
};
} else {
target[attr] = source[attr];
}
}
}
}

2
libs/horizon/src/event/simulatedEvtHandler/BeforeInputEventHandler.ts
View File

@ -9,7 +9,7 @@ const SPACE_CHAR = String.fromCharCode(CHAR_CODE_SPACE);
function getInputCharsByNative(
eventName: string,
nativeEvent: any,
): string | void {
): string | null {
if (eventName === 'compositionend') {
return (nativeEvent.detail && nativeEvent.detail.data) || null;
}

4
libs/horizon/src/event/simulatedEvtHandler/SelectionEventHandler.ts
View File

@ -13,7 +13,7 @@ const horizonEventName = 'onSelect'
let currentElement = null;
let currentVNode = null;
let lastSelection = null;
let lastSelection: Selection | null = null;
function initTargetCache(dom, vNode) {
if (isTextInputElement(dom) || dom.contentEditable === 'true') {
@ -85,7 +85,7 @@ export function getListeners(
target: null | EventTarget,
): ProcessingListenerList {
const targetNode = vNode ? getDom(vNode) : window;
let eventUnitList = [];
let eventUnitList: ProcessingListenerList = [];
switch (name) {
case 'focusin':
initTargetCache(targetNode, vNode);

76
libs/horizon/src/external/ChildrenUtil.ts vendored
View File

@ -12,6 +12,44 @@ function getItemKey(item: any, index: number): string {
return '.' + index.toString(36);
}
function mapChildrenToArray(
children: any,
arr: Array<any>,
prefix: string,
callback?: Function,
): number | void {
const type = typeof children;
switch (type) {
// 继承原有规格，undefined和boolean类型按照null处理
case 'undefined':
case 'boolean':
callMapFun(null, arr, prefix, callback);
return;
case 'number':
case 'string':
callMapFun(children, arr, prefix, callback);
return;
case 'object':
if (children === null) {
callMapFun(null, arr, prefix, callback);
return;
}
const vtype = children.vtype;
if (vtype === TYPE_COMMON_ELEMENT || vtype === TYPE_PORTAL) {
callMapFun(children, arr, prefix, callback) ;
return;
}
if (Array.isArray(children)) {
processArrayChildren(children, arr, prefix, callback);
return;
}
throw new Error(
'Object is invalid as a Horizon child. '
);
// No Default
}
}
function processArrayChildren(
children: any,
arr: Array<any>,
@ -61,44 +99,6 @@ function callMapFun(
}
}
function mapChildrenToArray(
children: any,
arr: Array<any>,
prefix: string,
callback?: Function,
): number | void {
const type = typeof children;
switch (type) {
// 继承原有规格，undefined和boolean类型按照null处理
case 'undefined':
case 'boolean':
callMapFun(null, arr, prefix, callback);
return;
case 'number':
case 'string':
callMapFun(children, arr, prefix, callback);
return;
case 'object':
if (children === null) {
callMapFun(null, arr, prefix, callback);
return;
}
const vtype = children.vtype;
if (vtype === TYPE_COMMON_ELEMENT || vtype === TYPE_PORTAL) {
callMapFun(children, arr, prefix, callback) ;
return;
}
if (Array.isArray(children)) {
processArrayChildren(children, arr, prefix, callback);
return;
}
throw new Error(
'Object is invalid as a Horizon child. '
);
// No Default
}
}
// 在 children 里的每个直接子节点上调用一个函数，并将 this 设置为 thisArg
function mapChildren(
children: any,

2
libs/horizon/src/external/JSXElement.ts vendored
View File

@ -41,7 +41,7 @@ function buildElement(isClone, type, setting, children) {
// setting中的值优先级最高，clone情况下从 type 中取值，创建情况下直接赋值为 null
const key = (setting && setting.key !== undefined) ? String(setting.key) : (isClone ? type.key : null);
const ref = (setting && setting.ref !== undefined) ? setting.ref : (isClone ? type.ref : null);
const props = isClone ? {...type.props} : {};
const props = isClone ? { ...type.props } : {};
let vNode = isClone ? type.belongClassVNode : getProcessingClassVNode();
if (setting != null) {

2
libs/horizon/src/renderer/ContextSaver.ts
View File

@ -31,7 +31,7 @@ let ctxOldPreviousContext: Object = {};
// capture阶段设置
function setNamespaceCtx(vNode: VNode, dom?: Container) {
const nextContext = getNSCtx(dom, ctxNamespace, vNode.type);
const nextContext = getNSCtx(ctxNamespace, vNode.type, dom);
vNode.setContext(CTX_NAMESPACE, ctxNamespace);
ctxNamespace = nextContext;

128
libs/horizon/src/renderer/ErrorHandler.ts
View File

@ -8,10 +8,60 @@ import type {Update} from './UpdateHandler';
import {ClassComponent, TreeRoot} from './vnode/VNodeTags';
import {FlagUtils, Interrupted} from './vnode/VNodeFlags';
import {newUpdate, UpdateState, pushUpdate} from './UpdateHandler';
import {launchUpdateFromVNode, setBuildResultError, tryRenderRoot} from './TreeBuilder';
import {launchUpdateFromVNode, tryRenderFromRoot} from './TreeBuilder';
import {setRootThrowError} from './submit/Submit';
import {handleSuspenseChildThrowError} from './render/SuspenseComponent';
import {updateShouldUpdateOfTree} from './vnode/VNodeShouldUpdate';
import {BuildErrored, setBuildResult} from './GlobalVar';
function consoleError(error: any): void {
if (isDev) {
// 只打印message为了让测试用例能pass
console['error']('The codes throw the error: ' + error.message);
} else {
console['error'](error);
}
}
function handleRootError(
error: any,
) {
// 注意：如果根节点抛出错误，不会销毁整棵树，只打印日志，抛出异常。
setRootThrowError(error);
consoleError(error);
}
function createClassErrorUpdate(
vNode: VNode,
error: any,
): Update {
const update = newUpdate();
update.type = UpdateState.Error;
const getDerivedStateFromError = vNode.type.getDerivedStateFromError;
if (typeof getDerivedStateFromError === 'function') {
update.content = () => {
consoleError(error);
return getDerivedStateFromError(error);
};
}
const inst = vNode.realNode;
if (inst !== null && typeof inst.componentDidCatch === 'function') {
update.callback = function callback() {
if (typeof getDerivedStateFromError !== 'function') {
// 打印错误
consoleError(error);
}
// @ts-ignore
this.componentDidCatch(error, {
componentStack: '',
});
};
}
return update;
}
// 处理capture和bubble阶段抛出的错误
export function handleRenderThrowError(
@ -33,7 +83,7 @@ export function handleRenderThrowError(
}
// 抛出错误无法作为suspense内容处理（或无suspense来处理），这次当成真的错误来处理
setBuildResultError();
setBuildResult(BuildErrored);
// 向上遍历寻找ClassComponent组件（同时也是Error Boundaries组件） 或者 TreeRoot
let vNode = sourceVNode.parent;
@ -76,6 +126,19 @@ export function handleRenderThrowError(
} while (vNode !== null);
}
// 新增一个update，并且触发调度
function triggerUpdate(vNode, state) {
const update = newUpdate();
update.content = state;
pushUpdate(vNode, update);
const root = updateShouldUpdateOfTree(vNode);
if (root !== null) {
tryRenderFromRoot(root);
}
}
// 处理submit阶段的异常
export function handleSubmitError(vNode: VNode, error: any) {
if (vNode.tag === TreeRoot) {
@ -126,64 +189,3 @@ export function handleSubmitError(vNode: VNode, error: any) {
node = node.parent;
}
}
function createClassErrorUpdate(
vNode: VNode,
error: any,
): Update {
const update = newUpdate();
update.type = UpdateState.Error;
const getDerivedStateFromError = vNode.type.getDerivedStateFromError;
if (typeof getDerivedStateFromError === 'function') {
update.content = () => {
consoleError(error);
return getDerivedStateFromError(error);
};
}
const inst = vNode.realNode;
if (inst !== null && typeof inst.componentDidCatch === 'function') {
update.callback = function callback() {
if (typeof getDerivedStateFromError !== 'function') {
// 打印错误
consoleError(error);
}
// @ts-ignore
this.componentDidCatch(error, {
componentStack: '',
});
};
}
return update;
}
// 新增一个update，并且触发调度
function triggerUpdate(vNode, state) {
const update = newUpdate();
update.content = state;
pushUpdate(vNode, update);
const root = updateShouldUpdateOfTree(vNode);
if (root !== null) {
tryRenderRoot(root);
}
}
function handleRootError(
error: any,
) {
// 注意：如果根节点抛出错误，不会销毁整棵树，只打印日志，抛出异常。
setRootThrowError(error);
consoleError(error);
}
function consoleError(error: any): void {
if (isDev) {
// 只打印message为了让测试用例能pass
console['error']('The codes throw the error: ' + error.message);
} else {
console['error'](error);
}
}

46
libs/horizon/src/renderer/TreeBuilder.ts
View File

@ -129,6 +129,27 @@ function handleError(root, error): void {
bubbleVNode(processing);
}
// 判断数组中节点的path的idx元素是否都相等
function isEqualByIndex(idx: number, nodes: Array<VNode>) {
let val = nodes[0].path[idx];
for (let i = 1; i < nodes.length; i++) {
let node = nodes[i];
if (val !== node.path[idx]) {
return false;
}
}
return true;
}
function getChildByIndex(vNode: VNode, idx: number) {
let node = vNode.child;
for (let i = 0; i < idx; i++) {
node = node.next;
}
return node;
}
// 从多个更新节点中，计算出开始节点。即：找到最近的共同的父辈节点
export function calcStartUpdateVNode(treeRoot: VNode) {
const toUpdateNodes = Array.from(treeRoot.toUpdateNodes);
@ -251,7 +272,7 @@ function renderFromRoot(treeRoot) {
}
// 尝试去渲染，已有任务就跳出
export function tryRenderRoot(treeRoot: VNode) {
export function tryRenderFromRoot(treeRoot: VNode) {
if (treeRoot.shouldUpdate && treeRoot.task === null) {
// 任务放进queue，但是调度开始还是异步的
treeRoot.task = pushRenderCallback(
@ -283,7 +304,7 @@ export function launchUpdateFromVNode(vNode: VNode) {
// 不能改成下面的异步，否则会有时序问题，因为业务可能会依赖这个渲染的完成。
renderFromRoot(treeRoot);
} else {
tryRenderRoot(treeRoot);
tryRenderFromRoot(treeRoot);
if (!isExecuting()) {
// 同步执行
@ -292,27 +313,6 @@ export function launchUpdateFromVNode(vNode: VNode) {
}
}
// 判断数组中节点的path的idx元素是否都相等
function isEqualByIndex(idx: number, nodes: Array<VNode>) {
let val = nodes[0].path[idx];
for (let i = 1; i < nodes.length; i++) {
let node = nodes[i];
if (val !== node.path[idx]) {
return false;
}
}
return true;
}
function getChildByIndex(vNode: VNode, idx: number) {
let node = vNode.child;
for (let i = 0; i < idx; i++) {
node = node.next;
}
return node;
}
export function setBuildResultError() {
if (getBuildResult() !== BuildCompleted) {
setBuildResult(BuildErrored);

1
libs/horizon/src/renderer/Types.ts
View File

@ -21,7 +21,6 @@ export type JSXElement = {
key: any;
ref: any;
props: any;
belongClassVNode: any;
};

5
libs/horizon/src/renderer/diff/DiffTools.ts
View File

@ -2,9 +2,8 @@ import type { VNode, JSXElement } from '../Types';
// 当前vNode和element是同样的类型
// LazyComponent 会修改type的类型，所以特殊处理这种类型
export const isSameType = (vNode: VNode, ele: JSXElement) => {
return vNode.type === ele.type || (vNode.isLazyComponent && vNode.lazyType === ele.type);
};
export const isSameType = (vNode: VNode, ele: JSXElement) =>
vNode.type === ele.type || (vNode.isLazyComponent && vNode.lazyType === ele.type);
export function isTextType(newChild: any) {
return typeof newChild === 'string' || typeof newChild === 'number';

24
libs/horizon/src/renderer/diff/nodeDiffComparator.ts
View File

@ -17,7 +17,7 @@ enum DiffCategory {
TEXT_NODE = 'TEXT_NODE',
OBJECT_NODE = 'OBJECT_NODE',
ARR_NODE = 'ARR_NODE',
};
}
// 检查是不是被 FRAGMENT 包裹
function isNoKeyFragment(child: any) {
@ -31,7 +31,7 @@ function deleteVNode(parentNode: VNode, delVNode: VNode): void {
}
// 清除多个节点
function deleteVNodes(parentVNode: VNode, startDelVNode: VNode, endVNode?: VNode): void {
function deleteVNodes(parentVNode: VNode, startDelVNode: VNode | null, endVNode?: VNode): void {
let node = startDelVNode;
while (node !== null) {
@ -67,7 +67,7 @@ function checkCanReuseNode(oldNode: VNode | null, newChild: any): boolean {
return false;
}
function getNodeType(newChild: any): string {
function getNodeType(newChild: any): string | null {
if (newChild === null) {
return null;
}
@ -186,9 +186,7 @@ function transLeftChildrenToMap(
travelChildren(startChild, (node) => {
leftChildrenMap.set(node.key !== null ? node.key : node.eIndex, node);
}, (node) => {
return node === rightEndVNode;
});
}, node => node === rightEndVNode);
return leftChildrenMap;
}
@ -208,6 +206,11 @@ function getOldNodeFromMap(nodeMap: Map<string | number, VNode>, newIdx: number,
return null;
}
function setCIndex(vNode: VNode, idx: number) {
vNode.cIndex = idx;
updateVNodePath(vNode);
}
// diff数组类型的节点，核心算法
function diffArrayNodes(
parentNode: VNode,
@ -277,7 +280,7 @@ function diffArrayNodes(
// 从后往前，新资源的位置还没有到最末端，旧的vNode也还没遍历完，则可以考虑从后往前开始
if (rightIdx > leftIdx && oldNode !== null) {
const rightRemainingOldChildren = transRightChildrenToArray(oldNode);
let rightOldIndex = rightRemainingOldChildren.length - 1;
let rightOldIndex: number | null = rightRemainingOldChildren.length - 1;
// 2. 从右侧开始比对currentVNode和newChildren，若不能复用则跳出循环
for (; rightIdx > leftIdx; rightIdx--) {
@ -377,7 +380,7 @@ function diffArrayNodes(
if (oldNodeFromMap !== null) {
let eIndex = newNode.eIndex;
eIndexes.push(eIndex);
const last = eIndexes[result[result.length - 1]];
const last: number | undefined = eIndexes[result[result.length - 1]];
if (eIndex > last || last === undefined) { // 大的 eIndex直接放在最后
preIndex[i] = result[result.length - 1];
result.push(i);
@ -455,11 +458,6 @@ function setVNodesCIndex(startChild: VNode, startIdx: number) {
}
}
function setCIndex(vNode: VNode, idx: number) {
vNode.cIndex = idx;
updateVNodePath(vNode);
}
// 新节点是数组类型
function diffArrayNodesHandler(
parentNode: VNode,

2
libs/horizon/src/renderer/hooks/UseReducerHook.ts
View File

@ -14,7 +14,7 @@ import { getHookStage, HookStage } from './HookStage';
import type { VNode } from '../Types';
export function useReducerImpl<S, P, A>(reducer: (S, A) =>
S, initArg: P, init?: (P) => S, isUseState?: boolean): [S, Trigger<A>] {
S, initArg: P, init?: (P) => S, isUseState?: boolean): [S, Trigger<A>] | void {
const stage = getHookStage();
if (stage === null) {
throwNotInFuncError();

8
libs/horizon/src/renderer/render/Fragment.ts
View File

@ -1,10 +1,6 @@
import type {VNode} from '../Types';
import {createVNodeChildren} from './BaseComponent';
export function captureRender(processing: VNode): VNode | null {
return captureFragment(processing);
}
export function bubbleRender() {}
function captureFragment(processing: VNode) {
@ -12,3 +8,7 @@ function captureFragment(processing: VNode) {
processing.child = createVNodeChildren(processing, newElement);
return processing.child;
}
export function captureRender(processing: VNode): VNode | null {
return captureFragment(processing);
}

24
libs/horizon/src/renderer/render/IncompleteClassComponent.ts
View File

@ -10,7 +10,18 @@ import {
cacheOldCtx,
} from '../components/context/CompatibleContext';
export function captureRender(processing: VNode): Array<VNode> | null {
function captureIncompleteClassComponent(processing, Component, nextProps) {
processing.tag = ClassComponent;
const hasOldContext = isOldProvider(Component);
cacheOldCtx(processing, hasOldContext);
resetDepContexts(processing);
return getIncompleteClassComponent(Component, processing, nextProps);
}
export function captureRender(processing: VNode): VNode | null {
const Component = processing.type;
const unresolvedProps = processing.props;
const resolvedProps =
@ -28,14 +39,3 @@ export function bubbleRender(processing: VNode) {
resetOldCtx(processing);
}
}
function captureIncompleteClassComponent(processing, Component, nextProps) {
processing.tag = ClassComponent;
const hasOldContext = isOldProvider(Component);
cacheOldCtx(processing, hasOldContext);
resetDepContexts(processing);
return getIncompleteClassComponent(Component, processing, nextProps);
}

35
libs/horizon/src/renderer/render/LazyComponent.ts
View File

@ -13,10 +13,6 @@ import { captureFunctionComponent } from './FunctionComponent';
import { captureClassComponent } from './ClassComponent';
import { captureMemoComponent } from './MemoComponent';
export function captureRender(processing: VNode, shouldUpdate: boolean): VNode | null {
return captureLazyComponent(processing, processing.type, shouldUpdate);
}
export function bubbleRender() { }
const LazyRendererMap = {
@ -26,6 +22,20 @@ const LazyRendererMap = {
[MemoComponent]: captureMemoComponent,
};
export function mergeDefaultProps(Component: any, props: object): object {
if (Component && Component.defaultProps) {
const clonedProps = { ...props };
const defaultProps = Component.defaultProps;
Object.keys(defaultProps).forEach(key => {
if (clonedProps[key] === undefined) {
clonedProps[key] = defaultProps[key];
}
});
return clonedProps;
}
return props;
}
function captureLazyComponent(
processing,
lazyComponent,
@ -43,7 +53,8 @@ function captureLazyComponent(
// 加载得到的Component存在type中
processing.type = Component;
const lazyVNodeTag = processing.tag = getLazyVNodeTag(Component);
const lazyVNodeTag = getLazyVNodeTag(Component);
processing.tag = lazyVNodeTag;
const lazyVNodeProps = mergeDefaultProps(Component, processing.props);
const lazyRender = LazyRendererMap[lazyVNodeTag];
@ -68,16 +79,6 @@ function captureLazyComponent(
}
}
export function mergeDefaultProps(Component: any, props: object): object {
if (Component && Component.defaultProps) {
const clonedProps = { ...props };
const defaultProps = Component.defaultProps;
Object.keys(defaultProps).forEach(key => {
if (clonedProps[key] === undefined) {
clonedProps[key] = defaultProps[key];
}
});
return clonedProps;
}
return props;
export function captureRender(processing: VNode, shouldUpdate: boolean): VNode | null {
return captureLazyComponent(processing, processing.type, shouldUpdate);
}

8
libs/horizon/src/renderer/render/MemoComponent.ts
View File

@ -10,10 +10,6 @@ import {
} from '../../external/JSXElementType';
import {Fragment} from '../vnode/VNodeTags';
export function captureRender(processing: VNode, shouldUpdate: boolean): VNode | null {
return captureMemoComponent(processing, shouldUpdate);
}
export function bubbleRender() {}
export function captureMemoComponent(
@ -59,3 +55,7 @@ export function captureMemoComponent(
return newChild;
}
export function captureRender(processing: VNode, shouldUpdate: boolean): VNode | null {
return captureMemoComponent(processing, shouldUpdate);
}

201
libs/horizon/src/renderer/render/SuspenseComponent.ts
View File

@ -9,7 +9,7 @@ import {
Fragment,
} from '../vnode/VNodeTags';
import {pushForceUpdate} from '../UpdateHandler';
import {launchUpdateFromVNode, tryRenderRoot} from '../TreeBuilder';
import {launchUpdateFromVNode, tryRenderFromRoot} from '../TreeBuilder';
import {updateShouldUpdateOfTree} from '../vnode/VNodeShouldUpdate';
import {getContextChangeCtx} from '../ContextSaver';
@ -19,73 +19,36 @@ export enum SuspenseChildStatus {
ShowFallback = 'showFallback',
}
export function captureRender(processing: VNode, shouldUpdate: boolean): Array<VNode> | VNode | null {
if (
!processing.isCreated &&
processing.oldProps === processing.props &&
!getContextChangeCtx() &&
!shouldUpdate
) {
if (processing.suspenseChildStatus === SuspenseChildStatus.ShowFallback) {
// 当显示fallback时，suspense的子组件要更新
return updateFallback(processing);
}
return onlyUpdateChildVNodes(processing);
}
return captureSuspenseComponent(processing);
}
function updateFallback(processing: VNode): Array<VNode> | VNode | null {
// 创建fallback子节点
function createFallback(processing: VNode, fallbackChildren) {
const childFragment: VNode = processing.child;
let fallbackFragment;
childFragment.childShouldUpdate = false;
if (childFragment.childShouldUpdate) {
if (processing.promiseResolve) {
// promise已完成，展示promise返回的新节点
return captureSuspenseComponent(processing);
if (!processing.isCreated) {
const oldFallbackFragment: VNode | null = processing.oldChild ? processing.oldChild.next : null;
if (oldFallbackFragment !== null) {
fallbackFragment = updateVNode(oldFallbackFragment, fallbackChildren);
} else {
// promise未完成，继续显示fallback，不需要继续刷新子节点
const fallbackFragment: VNode = processing.child.next;
childFragment.childShouldUpdate = false;
fallbackFragment.childShouldUpdate = false;
return null;
fallbackFragment = createVNode(Fragment, null, fallbackChildren);
FlagUtils.markAddition(fallbackFragment);
}
} else {
const children = onlyUpdateChildVNodes(processing);
if (children !== null) {
// child不需要更新，跳过child处理fallback
return children[1];
} else {
return null;
}
}
}
export function bubbleRender(processing: VNode) {
if (processing.suspenseChildStatus === SuspenseChildStatus.ShowFallback
|| (!processing.isCreated && processing.oldSuspenseChildStatus === SuspenseChildStatus.ShowFallback)
) {
FlagUtils.markUpdate(processing);
// 创建
fallbackFragment = createVNode(Fragment, null, fallbackChildren);
}
return null;
}
processing.child = childFragment;
childFragment.next = fallbackFragment;
childFragment.parent = processing;
fallbackFragment.parent = processing;
fallbackFragment.eIndex = 1;
fallbackFragment.cIndex = 1;
updateVNodePath(fallbackFragment);
processing.suspenseChildStatus = SuspenseChildStatus.ShowFallback;
export function captureSuspenseComponent(processing: VNode) {
const nextProps = processing.props;
// suspense被捕获后需要展示fallback
const showFallback = processing.suspenseDidCapture;
if (showFallback) {
processing.suspenseDidCapture = false;
const nextFallbackChildren = nextProps.fallback;
return createFallback(processing, nextFallbackChildren);
} else {
const newChildren = nextProps.children;
return createSuspenseChildren(processing, newChildren);
}
return fallbackFragment;
}
// 创建子节点
@ -120,36 +83,77 @@ function createSuspenseChildren(processing: VNode, newChildren) {
return processing.child;
}
// 创建fallback子节点
function createFallback(processing: VNode, fallbackChildren) {
const childFragment: VNode = processing.child;
let fallbackFragment;
childFragment.childShouldUpdate = false;
export function captureSuspenseComponent(processing: VNode) {
const nextProps = processing.props;
if (!processing.isCreated) {
const oldFallbackFragment: VNode | null = processing.oldChild ? processing.oldChild.next : null;
// suspense被捕获后需要展示fallback
const showFallback = processing.suspenseDidCapture;
if (oldFallbackFragment !== null) {
fallbackFragment = updateVNode(oldFallbackFragment, fallbackChildren);
if (showFallback) {
processing.suspenseDidCapture = false;
const nextFallbackChildren = nextProps.fallback;
return createFallback(processing, nextFallbackChildren);
} else {
const newChildren = nextProps.children;
return createSuspenseChildren(processing, newChildren);
}
}
function updateFallback(processing: VNode): Array<VNode> | VNode | null {
const childFragment: VNode | null= processing.child;
if (childFragment?.childShouldUpdate) {
if (processing.promiseResolve) {
// promise已完成，展示promise返回的新节点
return captureSuspenseComponent(processing);
} else {
fallbackFragment = createVNode(Fragment, null, fallbackChildren);
FlagUtils.markAddition(fallbackFragment);
// promise未完成，继续显示fallback，不需要继续刷新子节点
const fallbackFragment: VNode = processing.child.next;
childFragment.childShouldUpdate = false;
fallbackFragment.childShouldUpdate = false;
return null;
}
} else {
// 创建
fallbackFragment = createVNode(Fragment, null, fallbackChildren);
const children = onlyUpdateChildVNodes(processing);
if (children !== null) {
// child不需要更新，跳过child处理fallback
return children[1];
} else {
return null;
}
}
}
export function captureRender(processing: VNode, shouldUpdate: boolean): Array<VNode> | VNode | null {
if (
!processing.isCreated &&
processing.oldProps === processing.props &&
!getContextChangeCtx() &&
!shouldUpdate
) {
if (processing.suspenseChildStatus === SuspenseChildStatus.ShowFallback) {
// 当显示fallback时，suspense的子组件要更新
return updateFallback(processing);
}
return onlyUpdateChildVNodes(processing);
}
processing.child = childFragment;
childFragment.next = fallbackFragment;
childFragment.parent = processing;
fallbackFragment.parent = processing;
fallbackFragment.eIndex = 1;
fallbackFragment.cIndex = 1;
updateVNodePath(fallbackFragment);
processing.suspenseChildStatus = SuspenseChildStatus.ShowFallback;
return captureSuspenseComponent(processing);
}
return fallbackFragment;
export function bubbleRender(processing: VNode) {
if (processing.suspenseChildStatus === SuspenseChildStatus.ShowFallback
|| (!processing.isCreated && processing.oldSuspenseChildStatus === SuspenseChildStatus.ShowFallback)
) {
FlagUtils.markUpdate(processing);
}
return null;
}
function canCapturePromise(vNode: VNode | null): boolean {
return vNode?.suspenseChildStatus !== SuspenseChildStatus.ShowFallback && vNode?.props.fallback !== undefined;
}
// 处理Suspense子组件抛出的promise
@ -196,12 +200,20 @@ export function handleSuspenseChildThrowError(parent: VNode, processing: VNode,
return false;
}
function canCapturePromise(vNode: VNode): boolean {
return vNode.suspenseChildStatus !== SuspenseChildStatus.ShowFallback && vNode.props.fallback !== undefined;
}
const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
function resolvePromise(suspenseVNode: VNode, promise: PromiseType<any>) {
const promiseCache = suspenseVNode.realNode;
if (promiseCache !== null) {
promiseCache.delete(promise);
}
suspenseVNode.promiseResolve = true;
const root = updateShouldUpdateOfTree(suspenseVNode);
if (root !== null) {
tryRenderFromRoot(root);
}
}
// 对于每个promise，添加一个侦听器，以便当它resolve时，重新渲染
export function listenToPromise(suspenseVNode: VNode) {
const promises: Set<PromiseType<any>> | null = suspenseVNode.suspensePromises;
@ -212,7 +224,8 @@ export function listenToPromise(suspenseVNode: VNode) {
let promiseCache = suspenseVNode.realNode;
if (promiseCache === null) {
// @ts-ignore
promiseCache = suspenseVNode.realNode = new PossiblyWeakSet();
promiseCache = new PossiblyWeakSet();
suspenseVNode.realNode = new PossiblyWeakSet();
}
promises.forEach(promise => {
@ -225,17 +238,3 @@ export function listenToPromise(suspenseVNode: VNode) {
});
}
}
function resolvePromise(suspenseVNode: VNode, promise: PromiseType<any>) {
const promiseCache = suspenseVNode.realNode;
if (promiseCache !== null) {
promiseCache.delete(promise);
}
suspenseVNode.promiseResolve = true;
const root = updateShouldUpdateOfTree(suspenseVNode);
if (root !== null) {
tryRenderRoot(root);
}
}

8
libs/horizon/src/renderer/render/TreeRoot.ts
View File

@ -6,10 +6,6 @@ import {resetNamespaceCtx, setNamespaceCtx} from '../ContextSaver';
import {resetOldCtx} from '../components/context/CompatibleContext';
import {onlyUpdateChildVNodes} from '../vnode/VNodeCreator';
export function captureRender(processing: VNode): VNode | null {
return updateTreeRoot(processing);
}
export function bubbleRender(processing: VNode) {
resetNamespaceCtx(processing);
resetOldCtx(processing);
@ -40,3 +36,7 @@ function updateTreeRoot(processing) {
processing.child = createVNodeChildren(processing, newElement);
return processing.child;
}
export function captureRender(processing: VNode): VNode | null {
return updateTreeRoot(processing);
}

4
libs/horizon/src/renderer/render/class/ClassLifeCycleProcessor.ts
View File

@ -1,7 +1,7 @@
import type { VNode } from '../../Types';
import type { Callback } from '../../UpdateHandler';
import {shallowCompare} from '../../utils/compare';
import { shallowCompare } from '../../utils/compare';
import {
pushUpdate,
newUpdate,
@ -40,7 +40,7 @@ function changeStateContent(type: UpdateState, content: object, callback: Callba
if (type === UpdateState.Update || type === UpdateState.Override) {
update.content = content;
}
if (callback !== undefined && callback !== null) {
if (callback) {
update.callback = callback;
}

11
libs/horizon/src/renderer/submit/LifeCycleHandler.ts
View File

@ -225,10 +225,10 @@ function unmountVNode(vNode: VNode): void {
function unmountNestedVNodes(vNode: VNode): void {
travelVNodeTree(vNode, (node) => {
unmountVNode(node);
}, (node) => {
}, node =>
// 如果是DomPortal，不需要遍历child
return node.tag === DomPortal;
});
node.tag === DomPortal
);
}
function submitAddition(vNode: VNode): void {
@ -296,10 +296,9 @@ function unmountDomComponents(vNode: VNode): void {
} else {
unmountVNode(node);
}
}, (node) => {
}, node =>
// 如果是dom不用再遍历child
return node.tag === DomComponent || node.tag === DomText;
}, null, (node) => {
node.tag === DomComponent || node.tag === DomText, null, (node) => {
if (node.tag === DomPortal) {
// 当离开portal，需要重新设置parent
currentParentIsValid = false;

4
libs/horizon/src/renderer/submit/Submit.ts
View File

@ -11,7 +11,7 @@ import {
callBeforeSubmitLifeCycles, submitDeletion, submitAddition,
submitResetTextContent, submitUpdate, detachRef, submitClear,
} from './LifeCycleHandler';
import {tryRenderRoot, setProcessing} from '../TreeBuilder';
import {tryRenderFromRoot, setProcessing} from '../TreeBuilder';
import {
BySync,
InRender,
@ -78,7 +78,7 @@ export function submitToRender(treeRoot) {
countLoopingUpdate(treeRoot);
// 在退出`submit` 之前始终调用此函数，以确保任何已计划在此根上执行的update被执行。
tryRenderRoot(treeRoot);
tryRenderFromRoot(treeRoot);
if (rootThrowError) {
const error = rootThrowError;

3
libs/horizon/src/renderer/taskExecutor/BrowserAsync.ts
View File

@ -4,6 +4,7 @@
let isMessageLoopRunning = false;
let browserCallback = null;
const { port1, port2 } = new MessageChannel();
export function isOverTime() {
@ -33,7 +34,7 @@ const callRenderTasks = () => {
}
};
const { port1, port2 } = new MessageChannel();
port1.onmessage = callRenderTasks;
export function requestBrowserCallback(callback) {

42
libs/horizon/src/renderer/taskExecutor/RenderQueue.ts
View File

@ -12,20 +12,6 @@ let callingQueueTask: any | null = null;
// 防止重入
let isCallingRenderQueue = false;
export function pushRenderCallback(callback: RenderCallback) {
if (renderQueue === null) {
renderQueue = [callback];
// 高优先级的异步调度
callingQueueTask = runAsync(callRenderQueue, ImmediatePriority);
} else {
// 不需要调度，在syncQueue创建的时候已经调度了
renderQueue.push(callback);
}
// 返回一个空对象，用于区别null
return {};
}
export function callRenderQueueImmediate() {
if (callingQueueTask !== null) {
// 取消异步调度
@ -42,25 +28,31 @@ function callRenderQueue() {
// 防止重入
isCallingRenderQueue = true;
let i = 0;
try {
for (; i < renderQueue.length; i++) {
let callback = renderQueue[i];
let callback;
while (callback = renderQueue.shift()) {
callback();
}
renderQueue = null;
} catch (error) {
// 如果有异常抛出，请将剩余的回调留在队列中
if (renderQueue !== null) {
renderQueue = renderQueue.slice(i + 1);
}
// 在下一个异步中再调用
runAsync(callRenderQueueImmediate, ImmediatePriority);
throw error;
} finally {
isCallingRenderQueue = false;
}
}
}
export function pushRenderCallback(callback: RenderCallback) {
if (renderQueue === null) {
renderQueue = [callback];
// 高优先级的异步调度
callingQueueTask = runAsync(callRenderQueue, ImmediatePriority);
} else {
// 不需要调度，在syncQueue创建的时候已经调度了
renderQueue.push(callback);
}
// 返回一个空对象，用于区别null
return {};
}

59
libs/horizon/src/renderer/taskExecutor/TaskExecutor.ts
View File

@ -2,6 +2,7 @@
* 调度器的核心实现
*/
import { Node } from '../taskExecutor/TaskQueue';
import {
requestBrowserCallback,
isOverTime,
@ -21,39 +22,11 @@ let isProcessing = false;
// 调度中，等待浏览器回调
let isWaiting = false;
function runAsync(callback, priorityLevel= NormalPriority ) {
let increment;
switch (priorityLevel) {
case ImmediatePriority:
increment = -1;
break;
case NormalPriority:
default:
increment = 10000;
break;
}
const task = {
id: idCounter++,
callback,
order: idCounter + increment,
};
add(task);
if (!isWaiting && !isProcessing) {
isWaiting = true;
requestBrowserCallback(callTasks);
}
return task;
}
function callTasks() {
isWaiting = false;
isProcessing = true;
let task = null;
let task: Node | null= null;
try {
task = first();
@ -89,6 +62,34 @@ function callTasks() {
}
}
function runAsync(callback, priorityLevel= NormalPriority ) {
let increment;
switch (priorityLevel) {
case ImmediatePriority:
increment = -1;
break;
case NormalPriority:
default:
increment = 10000;
break;
}
const task = {
id: idCounter++,
callback,
order: idCounter + increment,
};
add(task);
if (!isWaiting && !isProcessing) {
isWaiting = true;
requestBrowserCallback(callTasks);
}
return task;
}
function cancelTask(task) {
task.callback = null;
}

36
libs/horizon/src/renderer/taskExecutor/TaskQueue.ts
View File

@ -3,7 +3,7 @@
*/
type Queue = Array<Node>;
type Node = {
export type Node = {
id: number;
order: number;
};
@ -11,15 +11,10 @@ type Node = {
// 任务队列
const taskQueue: Queue = [];
export function add(node: Node): void {
// 查找第一个大于等于 value 的下标，都比 value 小则返回 -1
const idx = getBiggerIdx(node);
if (idx === -1) {
taskQueue.push(node);
} else {
taskQueue.splice(idx, 0, node);
}
function compare(a: Node, b: Node) {
// 优先先用index排序，其次用id
const diff = a.order - b.order;
return diff !== 0 ? diff : a.id - b.id;
}
// 二分法查找第一个大于等于 value 的下标，都比 value 小则返回 -1，时间复杂度O(logn)
@ -37,11 +32,22 @@ function getBiggerIdx(node: Node) {
}
}
return (left < taskQueue.length) ? left : -1;
return left < taskQueue.length ? left : -1;
}
export function add(node: Node): void {
// 查找第一个大于等于 value 的下标，都比 value 小则返回 -1
const idx = getBiggerIdx(node);
if (idx === -1) {
taskQueue.push(node);
} else {
taskQueue.splice(idx, 0, node);
}
}
export function first(): Node | null {
const val = taskQueue[0];
const val: Node | null | undefined = taskQueue[0];
return val !== undefined ? val : null;
}
@ -53,9 +59,3 @@ export function shift(): Node | null {
export function remove(node: Node) {
taskQueue.splice(taskQueue.indexOf(node), 1);
}
function compare(a: Node, b: Node) {
// 优先先用index排序，其次用id
const diff = a.order - b.order;
return diff !== 0 ? diff : a.id - b.id;
}

6
libs/horizon/src/renderer/utils/compare.ts
View File

@ -42,9 +42,9 @@ export function shallowCompare(paramX: any, paramY: any): boolean {
return false;
}
return keysX.every((key, i) => {
return Object.prototype.hasOwnProperty.call(paramY, key) && isSame(paramX[key], paramY[keysX[i]]);
});
return keysX.every((key, i) =>
Object.prototype.hasOwnProperty.call(paramY, key) && isSame(paramX[key], paramY[keysX[i]])
);
}
return false;

2
libs/horizon/src/renderer/vnode/VNodeCreator.ts
View File

@ -175,7 +175,7 @@ export function onlyUpdateChildVNodes(processing: VNode): VNode | null {
// 此vNode无需更新，但是子树需要
if (!processing.isCreated && processing.child !== null) {
// 更新子节点
let child = processing.child;
let child: VNode | null = processing.child;
while (child !== null) {
updateVNode(child, child.props);
updateVNodePath(child);

26
libs/horizon/src/renderer/vnode/VNodeShouldUpdate.ts
View File

@ -37,6 +37,19 @@ export function updateChildShouldUpdate(vNode: VNode) {
vNode.childShouldUpdate = false;
}
// 更新从当前节点到根节点的childShouldUpdate为true
export function setParentsChildShouldUpdate(parent: VNode | null) {
let node = parent;
while (node !== null) {
if (node.childShouldUpdate) {
break;
}
node.childShouldUpdate = true;
node = node.parent;
}
}
// 设置节点的所有父节点的childShouldUpdate
export function updateParentsChildShouldUpdate(vNode: VNode) {
let node = vNode.parent;
@ -51,16 +64,3 @@ export function updateParentsChildShouldUpdate(vNode: VNode) {
}
}
}
// 更新从当前节点到根节点的childShouldUpdate为true
export function setParentsChildShouldUpdate(parent: VNode | null) {
let node = parent;
while (node !== null) {
if (node.childShouldUpdate) {
break;
}
node.childShouldUpdate = true;
node = node.parent;
}
}