Match-id-b88442c85aaf06a604c65a19c68060ba9cb9e44e

This commit is contained in:
* 2023-06-05 18:53:22 +08:00
parent 1ecc732b33
commit c6857c5bc5
18 changed files with 152 additions and 128 deletions

View File

@ -73,7 +73,7 @@ function executeRender(children: any, container: Container, callback?: Callback)
}
function findDOMNode(domOrEle?: Element): null | Element | Text {
if (domOrEle == null) {
if (domOrEle === null || domOrEle === undefined) {
return null;
}
@ -103,7 +103,7 @@ function removeRootEventLister(container: Container) {
// 卸载入口
function destroy(container: Container): boolean {
if (container && container._treeRoot) {
if (container._treeRoot) {
syncUpdates(() => {
executeRender(null, container, () => {
removeRootEventLister(container);

View File

@ -46,7 +46,7 @@ function getChildNS(parentNS: string | null, tagName: string): string {
return NSS.html;
}
if (parentNS == null || parentNS === NSS.html) {
if (parentNS === null || parentNS === NSS.html) {
// 没有父命名空间或父命名空间为xhtml
return NSS[tagName] ?? NSS.html;
}
@ -130,7 +130,8 @@ export function isTextChild(type: string, props: Props): boolean {
return (
props.dangerouslySetInnerHTML &&
typeof props.dangerouslySetInnerHTML === 'object' &&
props.dangerouslySetInnerHTML.__html != null
props.dangerouslySetInnerHTML.__html !== null &&
props.dangerouslySetInnerHTML.__html !== undefined
);
}
}
@ -148,7 +149,7 @@ export function submitDomUpdate(tag: string, vNode: VNode) {
if (tag === DomComponent) {
// DomComponent类型
if (element != null) {
if (element !== null || element !== undefined) {
const type = vNode.type;
const changeList = vNode.changeList;
vNode.changeList = null;
@ -158,7 +159,14 @@ export function submitDomUpdate(tag: string, vNode: VNode) {
updateVNodeProps(element, newProps);
// 应用diff更新Properties.
// 当一个选中的radio改变名称,浏览器使另一个radio的复选框为false.
if (type === 'input' && newProps.type === 'radio' && newProps.name != null && newProps.checked != null) {
if (
type === 'input'
&& newProps.type === 'radio'
&& newProps.name !== null
&& newProps.name !== undefined
&& newProps.checked !== null
&& newProps.checked !== undefined
) {
updateCommonProp(element, 'checked', newProps.checked, true);
}
const isNativeTag = isNativeElement(type, newProps);
@ -204,7 +212,7 @@ export function hideDom(tag: string, dom: Element | Text) {
// 不隐藏元素
export function unHideDom(tag: string, dom: Element | Text, props: Props) {
if (tag === DomComponent) {
dom.style.display = adjustStyleValue('display', props?.style?.display ?? '');
dom.style.display = adjustStyleValue('display', props.style?.display ?? '');
} else if (tag === DomText) {
dom.textContent = props;
}

View File

@ -48,7 +48,7 @@ export function setDomProps(dom: Element, props: Object, isNativeTag: boolean, i
}
} else if (propName === 'dangerouslySetInnerHTML') {
dom.innerHTML = propVal.__html;
} else if (!isInit || propVal != null) {
} else if (!isInit || propVal !== null || propVal !== undefined) {
updateCommonProp(dom, propName, propVal, isNativeTag);
}
}
@ -70,7 +70,7 @@ export function compareProps(oldProps: Object, newProps: Object): Object {
for (let i = 0; i < oldPropsLength; i++) {
propName = keysOfOldProps[i];
// 新属性中包含该属性或者该属性为空值的属性不需要处理
if ( oldProps[propName] == null || keysOfNewProps.includes(propName)) {
if ( oldProps[propName] === null || oldProps[propName] === undefined || keysOfNewProps.includes(propName)) {
continue;
}
@ -103,9 +103,13 @@ export function compareProps(oldProps: Object, newProps: Object): Object {
for (let i = 0; i < keysOfNewProps.length; i++) {
propName = keysOfNewProps[i];
newPropValue = newProps[propName];
oldPropValue = oldProps != null ? oldProps[propName] : null;
oldPropValue = oldProps !== null ? oldProps[propName] : null;
if (newPropValue === oldPropValue || (newPropValue == null && oldPropValue == null)) {
if (
newPropValue === oldPropValue
|| ((newPropValue === null || newPropValue === undefined)
&& (oldPropValue === null || oldPropValue === undefined))
) {
// 新旧属性值未发生变化,或者新旧属性皆为空值,不需要进行处理
continue;
}

View File

@ -67,7 +67,7 @@ export function adjustStyleValue(name, value) {
if (typeof value === 'number' && value !== 0 && isNeedUnitCSS(name)) {
validValue = `${value}px`;
} else if (value === '' || value == null || typeof value === 'boolean') {
} else if (value === '' || value === null || value === undefined || typeof value === 'boolean') {
validValue = '';
}

View File

@ -30,7 +30,7 @@ function setSelectionRange(dom: HTMLInputElement | HTMLTextAreaElement, range) {
const { start, end } = range;
let realEnd = end;
if (realEnd == null) {
if (realEnd === null || realEnd === undefined) {
realEnd = start;
}

View File

@ -21,44 +21,13 @@ import { BELONG_CLASS_VNODE_KEY } from '../renderer/vnode/VNode';
// 生成key
function getItemKey(item: any, index: number): string {
if (typeof item === 'object' && item !== null && item.key != null) {
if (typeof item === 'object' && item !== null && item.key !== null && item.key !== undefined) {
return '.$' + item.key;
}
// 使用36进制减少生成字符串的长度以节省空间
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>, prefix: string, callback: Function) {
for (let i = 0; i < children.length; i++) {
const childItem = children[i];
@ -93,6 +62,37 @@ function callMapFun(children: any, arr: Array<any>, prefix: string, callback: Fu
}
}
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, func: Function, context?: any): Array<any> {
if (children === null || children === undefined) {

View File

@ -72,10 +72,15 @@ function mergeDefault(sourceObj, defaultObj) {
// ['key', 'ref', '__source', '__self']属性不从setting获取
const keyArray = ['key', 'ref', '__source', '__self'];
function getSettingArgs(setting, isClone, type) {
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);
return { key, ref };
}
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 { key, ref } = getSettingArgs(setting, isClone, type);
const props = isClone ? { ...type.props } : {};
let vNode = isClone ? type[BELONG_CLASS_VNODE_KEY] : getProcessingClassVNode();

View File

@ -140,7 +140,8 @@ export function createStore(reducer: Reducer, preloadedState?: any, enhancers?):
}
export function combineReducers(reducers: { [key: string]: Reducer }): Reducer {
return (state = {}, action) => {
return (state, action) => {
state = state || {};
const newState = {};
Object.entries(reducers).forEach(([key, reducer]) => {
newState[key] = reducer(state[key], action);

View File

@ -145,7 +145,7 @@ function getAffectedComponents() {
const process = Array.from(allStores[key].$config.state._horizonObserver.keyVNodes.values());
while (process.length) {
let pivot = process.shift() as { tag: 'string' };
if (pivot?.tag) subRes.add(pivot);
if (pivot.tag) subRes.add(pivot);
if (pivot?.toString() === '[object Set]') Array.from(pivot).forEach(item => process.push(item));
}
res[key] = Array.from(subRes).map(vnode => {
@ -192,7 +192,7 @@ window.addEventListener('message', messageEvent => {
const store = getStore(data.storeId);
if (!store?.[data.action]) return;
const action = store.$queue?.[data.action];
const action = store.$queue[data.action];
const params = data.params;
action(...params);
}

View File

@ -41,9 +41,6 @@ export class HooklessObserver implements IObserver {
triggerChangeListeners(mutation: any): void {
this.listeners.forEach(listener => {
if (!listener) {
return;
}
listener(mutation);
});
}

View File

@ -81,7 +81,7 @@ export class Observer implements IObserver {
const vNodes = this.keyVNodes.get(key);
//NOTE: using Set directly can lead to deadlock
const vNodeArray = Array.from(vNodes || []);
vNodeArray?.forEach((vNode: VNode) => {
vNodeArray.forEach((vNode: VNode) => {
if (vNode.isStoreChange) {
// VNode已经被触发过不再重复触发
return;

View File

@ -31,7 +31,9 @@ export function getObserver(rawObj: any): Observer {
return rawObj[OBSERVER_KEY];
}
export function createProxy(rawObj: any, isHookObserver = true, listener: { current: (...args) => any }): any {
export function createProxy(rawObj: any, isHookObserver: boolean, listener: { current: (...args) => any }): any {
isHookObserver = isHookObserver || true;
// 不是对象(是原始数据类型)不用代理
if (!(rawObj && isObject(rawObj))) {
return rawObj;
@ -83,7 +85,7 @@ export function createProxy(rawObj: any, isHookObserver = true, listener: { curr
// 原生对象 或 函数
proxyObj = createObjectProxy(rawObj, false, {
current: change => {
listener?.current(change);
listener.current(change);
},
});
}

View File

@ -21,9 +21,11 @@ import { createMapProxy } from './MapProxy';
export function createCollectionProxy(
rawObj: Object,
hookObserver = true,
hookObserver: boolean,
listener: { current: (...args) => any }
): Object {
hookObserver = hookObserver || true;
if (isWeakSet(rawObj)) {
return createWeakSetProxy(rawObj, hookObserver, listener);
}

View File

@ -20,7 +20,8 @@ import { isPanelActive } from '../../devtools';
const COLLECTION_CHANGE = '_collectionChange';
export function createMapProxy(rawObj: Object, hookObserver = true, listener: { current: (...args) => any }): Object {
export function createMapProxy(rawObj: Object, hookObserver: boolean, listener: { current: (...args) => any }): Object {
hookObserver = hookObserver || true;
let listeners: ((mutation) => {})[] = [];
let oldData: [any, any][] = [];
let proxies = new Map();
@ -314,6 +315,20 @@ export function createMapProxy(rawObj: Object, hookObserver = true, listener: {
return wrapIterator(rawObj, rawObj.entries(), 'entries');
}
const handler = {
get,
set,
delete: deleteFun,
clear,
has,
entries,
forEach,
keys,
values,
// 判断Symbol类型兼容IE
[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']: forOf,
};
function get(rawObj: { size: number }, key: any, receiver: any): any {
if (key === 'size') {
return size(rawObj);
@ -357,20 +372,6 @@ export function createMapProxy(rawObj: Object, hookObserver = true, listener: {
return Reflect.get(rawObj, key, receiver);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const handler = {
get,
set,
delete: deleteFun,
clear,
has,
entries,
forEach,
keys,
values,
// 判断Symbol类型兼容IE
[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']: forOf,
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const boundHandler = {};
Object.entries(handler).forEach(([id, val]) => {
boundHandler[id] = (...args: any[]) => {

View File

@ -41,9 +41,10 @@ function set(rawObj: object, key: string, value: any, receiver: any): boolean {
export function createObjectProxy<T extends object>(
rawObj: T,
singleLevel = false,
singleLevel: boolean,
listener: { current: (...args) => any }
): ProxyHandler<T> {
singleLevel = singleLevel || false;
let listeners = [] as ((...args) => void)[];
function get(rawObj: object, key: string | symbol, receiver: any): any {

View File

@ -20,9 +20,10 @@ const COLLECTION_CHANGE = '_collectionChange';
export function createSetProxy<T extends object>(
rawObj: T,
hookObserver = true,
hookObserver: boolean,
listener: { current: (...args) => any }
): ProxyHandler<T> {
hookObserver = hookObserver || true;
let listeners: ((mutation) => {})[] = [];
let proxies = new WeakMap();
@ -129,6 +130,20 @@ export function createSetProxy<T extends object>(
return rawObj.size;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const handler = {
get,
add,
delete: deleteFun,
has,
clear,
forEach,
forOf,
entries,
keys,
values,
[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']: forOf,
};
function get(rawObj: { size: number }, key: any, receiver: any): any {
if (Object.prototype.hasOwnProperty.call(handler, key)) {
const value = Reflect.get(handler, key, receiver);
@ -267,20 +282,6 @@ export function createSetProxy<T extends object>(
});
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const handler = {
get,
add,
delete: deleteFun,
has,
clear,
forEach,
forOf,
entries,
keys,
values,
[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator']: forOf,
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
getObserver(rawObj).addListener(change => {
if (!change.parents) change.parents = [];
change.parents.push(rawObj);

View File

@ -22,11 +22,43 @@ const COLLECTION_CHANGE = '_collectionChange';
export function createWeakMapProxy(
rawObj: Object,
hookObserver = true,
hookObserver: boolean,
listener: { current: (...args) => any }
): Object {
hookObserver = hookObserver ||true;
let listeners: ((mutation) => {})[] = [];
const handler = {
get,
set,
add,
delete: deleteFun,
clear,
has,
};
function getFun(rawObj: { get: (key: any) => any }, key: any) {
const observer = getObserver(rawObj);
observer.useProp(key);
const value = rawObj.get(key);
// 对于value也需要进一步代理
const valProxy = createProxy(value, hookObserverMap.get(rawObj), {
current: change => {
if (!change.parents) change.parents = [];
change.parents.push(rawObj);
let mutation = resolveMutation(
{ ...rawObj, [key]: change.mutation.from },
{ ...rawObj, [key]: change.mutation.to }
);
listener.current({ ...change, mutation });
listeners.forEach(lst => lst({ ...change, mutation }));
},
});
return valProxy;
}
function get(rawObj: { size: number }, key: any, receiver: any): any {
if (key === 'get') {
return getFun.bind(null, rawObj);
@ -66,28 +98,6 @@ export function createWeakMapProxy(
return Reflect.get(rawObj, key, receiver);
}
function getFun(rawObj: { get: (key: any) => any }, key: any) {
const observer = getObserver(rawObj);
observer.useProp(key);
const value = rawObj.get(key);
// 对于value也需要进一步代理
const valProxy = createProxy(value, hookObserverMap.get(rawObj), {
current: change => {
if (!change.parents) change.parents = [];
change.parents.push(rawObj);
let mutation = resolveMutation(
{ ...rawObj, [key]: change.mutation.from },
{ ...rawObj, [key]: change.mutation.to }
);
listener.current({ ...change, mutation });
listeners.forEach(lst => lst({ ...change, mutation }));
},
});
return valProxy;
}
// Map的set方法
function set(
rawObj: { get: (key: any) => any; set: (key: any, value: any) => any; has: (key: any) => boolean },
@ -171,15 +181,6 @@ export function createWeakMapProxy(
return false;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const handler = {
get,
set,
add,
delete: deleteFun,
clear,
has,
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
getObserver(rawObj).addListener(change => {
if (!change.parents) change.parents = [];
change.parents.push(rawObj);

View File

@ -18,12 +18,20 @@ import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler';
export function createWeakSetProxy<T extends object>(
rawObj: T,
hookObserver = true,
hookObserver: boolean,
listener: { current: (...args) => any }
): ProxyHandler<T> {
hookObserver = hookObserver || true;
let listeners: ((mutation) => {})[] = [];
let proxies = new WeakMap();
const handler = {
get,
add,
delete: deleteFun,
has,
};
function get(rawObj: { size: number }, key: any, receiver: any): any {
if (Object.prototype.hasOwnProperty.call(handler, key)) {
const value = Reflect.get(handler, key, receiver);
@ -109,13 +117,6 @@ export function createWeakSetProxy<T extends object>(
return false;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const handler = {
get,
add,
delete: deleteFun,
has,
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
getObserver(rawObj).addListener(change => {
if (!change.parents) change.parents = [];
change.parents.push(rawObj);