diff --git a/libs/horizon/src/dom/DOMExternal.ts b/libs/horizon/src/dom/DOMExternal.ts index dbd78da4..6c459952 100644 --- a/libs/horizon/src/dom/DOMExternal.ts +++ b/libs/horizon/src/dom/DOMExternal.ts @@ -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); diff --git a/libs/horizon/src/dom/DOMOperator.ts b/libs/horizon/src/dom/DOMOperator.ts index f83893e5..55c218ae 100644 --- a/libs/horizon/src/dom/DOMOperator.ts +++ b/libs/horizon/src/dom/DOMOperator.ts @@ -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; } diff --git a/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts b/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts index 5c0773c1..ede38907 100644 --- a/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts +++ b/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts @@ -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; } diff --git a/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts b/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts index e2fca141..522fa956 100644 --- a/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts +++ b/libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts @@ -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 = ''; } diff --git a/libs/horizon/src/dom/SelectionRangeHandler.ts b/libs/horizon/src/dom/SelectionRangeHandler.ts index e09e0dad..f9488f9b 100644 --- a/libs/horizon/src/dom/SelectionRangeHandler.ts +++ b/libs/horizon/src/dom/SelectionRangeHandler.ts @@ -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; } diff --git a/libs/horizon/src/external/ChildrenUtil.ts b/libs/horizon/src/external/ChildrenUtil.ts index 3624a736..55f66e3c 100644 --- a/libs/horizon/src/external/ChildrenUtil.ts +++ b/libs/horizon/src/external/ChildrenUtil.ts @@ -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, 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, 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, prefix: string, callback: Fu } } +function mapChildrenToArray(children: any, arr: Array, 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 { if (children === null || children === undefined) { diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index 5ff3db84..e54e2054 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -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(); diff --git a/libs/horizon/src/horizonx/adapters/redux.ts b/libs/horizon/src/horizonx/adapters/redux.ts index 97b7a483..ffffc59f 100644 --- a/libs/horizon/src/horizonx/adapters/redux.ts +++ b/libs/horizon/src/horizonx/adapters/redux.ts @@ -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); diff --git a/libs/horizon/src/horizonx/devtools/index.ts b/libs/horizon/src/horizonx/devtools/index.ts index 64a0f189..eda6d696 100644 --- a/libs/horizon/src/horizonx/devtools/index.ts +++ b/libs/horizon/src/horizonx/devtools/index.ts @@ -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); } diff --git a/libs/horizon/src/horizonx/proxy/HooklessObserver.ts b/libs/horizon/src/horizonx/proxy/HooklessObserver.ts index a47ad752..c823ef0e 100644 --- a/libs/horizon/src/horizonx/proxy/HooklessObserver.ts +++ b/libs/horizon/src/horizonx/proxy/HooklessObserver.ts @@ -41,9 +41,6 @@ export class HooklessObserver implements IObserver { triggerChangeListeners(mutation: any): void { this.listeners.forEach(listener => { - if (!listener) { - return; - } listener(mutation); }); } diff --git a/libs/horizon/src/horizonx/proxy/Observer.ts b/libs/horizon/src/horizonx/proxy/Observer.ts index b1aa43d7..de009283 100644 --- a/libs/horizon/src/horizonx/proxy/Observer.ts +++ b/libs/horizon/src/horizonx/proxy/Observer.ts @@ -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; diff --git a/libs/horizon/src/horizonx/proxy/ProxyHandler.ts b/libs/horizon/src/horizonx/proxy/ProxyHandler.ts index be83bee5..b20a6dfb 100644 --- a/libs/horizon/src/horizonx/proxy/ProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/ProxyHandler.ts @@ -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); }, }); } diff --git a/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts b/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts index 1b0f0d37..e6d4309c 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts @@ -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); } diff --git a/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts index dd51f07f..0921cf7a 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts @@ -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[]) => { diff --git a/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts b/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts index 0afa6583..28aeb1f2 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts @@ -41,9 +41,10 @@ function set(rawObj: object, key: string, value: any, receiver: any): boolean { export function createObjectProxy( rawObj: T, - singleLevel = false, + singleLevel: boolean, listener: { current: (...args) => any } ): ProxyHandler { + singleLevel = singleLevel || false; let listeners = [] as ((...args) => void)[]; function get(rawObj: object, key: string | symbol, receiver: any): any { diff --git a/libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts index b0409ad6..e5efb07b 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts @@ -20,9 +20,10 @@ const COLLECTION_CHANGE = '_collectionChange'; export function createSetProxy( rawObj: T, - hookObserver = true, + hookObserver: boolean, listener: { current: (...args) => any } ): ProxyHandler { + hookObserver = hookObserver || true; let listeners: ((mutation) => {})[] = []; let proxies = new WeakMap(); @@ -129,6 +130,20 @@ export function createSetProxy( 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( }); } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - 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); diff --git a/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts index d5f87ff3..3792dc4d 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts @@ -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); diff --git a/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts index 27becbe9..4fd6b788 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts @@ -18,12 +18,20 @@ import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler'; export function createWeakSetProxy( rawObj: T, - hookObserver = true, + hookObserver: boolean, listener: { current: (...args) => any } ): ProxyHandler { + 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( return false; } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - const handler = { - get, - add, - delete: deleteFun, - has, - }; - ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// getObserver(rawObj).addListener(change => { if (!change.parents) change.parents = []; change.parents.push(rawObj);