From dd7b65c45ac8cda1313f70f1614b6e4c20e86ddb Mon Sep 17 00:00:00 2001 From: * <*> Date: Wed, 7 Jun 2023 14:50:36 +0800 Subject: [PATCH] Match-id-b3271adc745fbcd1091dfc0f70385d726500f682 --- libs/horizon/src/dom/DOMOperator.ts | 6 ++-- .../DOMPropertiesHandler.ts | 6 ++-- libs/horizon/src/external/JSXElement.ts | 9 ++---- libs/horizon/src/horizonx/CommonUtils.ts | 3 +- libs/horizon/src/horizonx/devtools/index.ts | 29 +++++++++++-------- libs/horizon/src/horizonx/proxy/Observer.ts | 4 --- .../src/horizonx/proxy/ProxyHandler.ts | 27 +++++++++-------- .../proxy/handlers/ArrayProxyHandler.ts | 2 +- .../proxy/handlers/CollectionProxyHandler.ts | 14 ++++----- .../src/horizonx/proxy/handlers/MapProxy.ts | 13 +++++---- .../proxy/handlers/ObjectProxyHandler.ts | 7 ++--- .../src/horizonx/proxy/handlers/SetProxy.ts | 5 ++-- .../horizonx/proxy/handlers/WeakMapProxy.ts | 7 ++--- .../horizonx/proxy/handlers/WeakSetProxy.ts | 5 ++-- 14 files changed, 67 insertions(+), 70 deletions(-) diff --git a/libs/horizon/src/dom/DOMOperator.ts b/libs/horizon/src/dom/DOMOperator.ts index 55c218ae..809a0ae8 100644 --- a/libs/horizon/src/dom/DOMOperator.ts +++ b/libs/horizon/src/dom/DOMOperator.ts @@ -149,7 +149,7 @@ export function submitDomUpdate(tag: string, vNode: VNode) { if (tag === DomComponent) { // DomComponent类型 - if (element !== null || element !== undefined) { + if (element !== null && element !== undefined) { const type = vNode.type; const changeList = vNode.changeList; vNode.changeList = null; @@ -210,9 +210,9 @@ export function hideDom(tag: string, dom: Element | Text) { } // 不隐藏元素 -export function unHideDom(tag: string, dom: Element | Text, props: Props) { +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 ede38907..bdf59af7 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 || propVal !== undefined) { + } else if (!isInit || (propVal !== null && propVal !== undefined)) { updateCommonProp(dom, propName, propVal, isNativeTag); } } @@ -103,7 +103,7 @@ 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 !== undefined ? oldProps[propName] : null; if ( newPropValue === oldPropValue @@ -144,7 +144,7 @@ export function compareProps(oldProps: Object, newProps: Object): Object { } else if (propName === 'dangerouslySetInnerHTML') { newHTML = newPropValue ? newPropValue.__html : undefined; oldHTML = oldPropValue ? oldPropValue.__html : undefined; - if (newHTML != null) { + if (newHTML !== null && newHTML !== undefined) { if (oldHTML !== newHTML) { toUpdateProps[propName] = newPropValue; } diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index e54e2054..5ff3db84 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -72,15 +72,10 @@ 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, ref } = 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); const props = isClone ? { ...type.props } : {}; let vNode = isClone ? type[BELONG_CLASS_VNODE_KEY] : getProcessingClassVNode(); diff --git a/libs/horizon/src/horizonx/CommonUtils.ts b/libs/horizon/src/horizonx/CommonUtils.ts index cf2c2bb8..b42ff3be 100644 --- a/libs/horizon/src/horizonx/CommonUtils.ts +++ b/libs/horizon/src/horizonx/CommonUtils.ts @@ -115,7 +115,8 @@ export function resolveMutation(from, to) { if (res[i].mutation) found = true; } } - // TODO: resolve shifts + + // need to resolve shifts return { mutation: found, items: res, from, to }; } diff --git a/libs/horizon/src/horizonx/devtools/index.ts b/libs/horizon/src/horizonx/devtools/index.ts index eda6d696..711c0d62 100644 --- a/libs/horizon/src/horizonx/devtools/index.ts +++ b/libs/horizon/src/horizonx/devtools/index.ts @@ -116,18 +116,22 @@ function makeStoreSnapshot({ type, data }) { export const devtools = { // returns vNode id from horizon devtools getVNodeId: vNode => { - if (!isPanelActive()) return; + if (!isPanelActive()) { + return null; + } window['__HORIZON_DEV_HOOK__'].send(); // update list first return window['__HORIZON_DEV_HOOK__'].getVnodeId(vNode); }, // sends horizonx devtool message to extension emit: (type, data) => { - if (!isPanelActive()) return; + if (!isPanelActive()) { + return; + } window.postMessage({ type: 'HORIZON_DEV_TOOLS', payload: makeStoreSnapshot({ type, data }), from: 'dev tool hook', - }); + }, ''); }, }; @@ -135,7 +139,7 @@ export const devtools = { function getAffectedComponents() { const allStores = getAllStores(); const keys = Object.keys(allStores); - let res = {}; + const res = {}; keys.forEach(key => { if (!allStores[key].$config.state._horizonObserver.keyVNodes) { res[key] = []; @@ -144,17 +148,17 @@ function getAffectedComponents() { const subRes = new Set(); const process = Array.from(allStores[key].$config.state._horizonObserver.keyVNodes.values()); while (process.length) { - let pivot = process.shift() as { tag: 'string' }; + const pivot = process.shift() as { tag: 'string' }; if (pivot.tag) subRes.add(pivot); - if (pivot?.toString() === '[object Set]') Array.from(pivot).forEach(item => process.push(item)); + if (pivot.toString() === '[object Set]') Array.from(pivot).forEach(item => process.push(item)); } - res[key] = Array.from(subRes).map(vnode => { + res[key] = Array.from(subRes).map(vNode => { return { - name: vnode?.type + name: vNode?.type .toString() .replace(/\{.*\}/, '{...}') .replace('function ', ''), - nodeId: window.__HORIZON_DEV_HOOK__.getVnodeId(vnode), + nodeId: window.__HORIZON_DEV_HOOK__.getVnodeId(vNode), }; }); }); @@ -163,7 +167,7 @@ function getAffectedComponents() { } // listens to messages from background -window.addEventListener('message', messageEvent => { +window.addEventListener('message', (messageEvent?) => { if (messageEvent?.data?.payload?.type === 'horizonx request observed components') { // get observed components setTimeout(() => { @@ -171,7 +175,7 @@ window.addEventListener('message', messageEvent => { type: 'HORIZON_DEV_TOOLS', payload: { type: OBSERVED_COMPONENTS, data: getAffectedComponents() }, from: 'dev tool hook', - }); + }, ''); }, 100); } @@ -216,6 +220,7 @@ window.addEventListener('message', messageEvent => { console.error(err); } } - // TODO:implement add and delete element + + // need to implement add and delete element } }); diff --git a/libs/horizon/src/horizonx/proxy/Observer.ts b/libs/horizon/src/horizonx/proxy/Observer.ts index de009283..bb5dae3d 100644 --- a/libs/horizon/src/horizonx/proxy/Observer.ts +++ b/libs/horizon/src/horizonx/proxy/Observer.ts @@ -97,10 +97,6 @@ export class Observer implements IObserver { } triggerUpdate(vNode: VNode): void { - if (!vNode) { - return; - } - // 触发VNode更新 launchUpdateFromVNode(vNode); } diff --git a/libs/horizon/src/horizonx/proxy/ProxyHandler.ts b/libs/horizon/src/horizonx/proxy/ProxyHandler.ts index b20a6dfb..b2ff5cdd 100644 --- a/libs/horizon/src/horizonx/proxy/ProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/ProxyHandler.ts @@ -62,11 +62,12 @@ export function createProxy(rawObj: any, isHookObserver: boolean, listener: { cu // 创建Proxy let proxyObj; if (!isHookObserver) { - proxyObj = createObjectProxy(rawObj, true, { - current: change => { - listener.current(change); + proxyObj = createObjectProxy(rawObj, { + current: change => { + listener.current(change); + }, }, - }); + true); } else if (isArray(rawObj)) { // 数组 proxyObj = createArrayProxy(rawObj as [], { @@ -76,18 +77,20 @@ export function createProxy(rawObj: any, isHookObserver: boolean, listener: { cu }); } else if (isCollection(rawObj)) { // 集合 - proxyObj = createCollectionProxy(rawObj, true, { - current: change => { - listener.current(change); + proxyObj = createCollectionProxy(rawObj, { + current: change => { + listener.current(change); + }, }, - }); + true); } else { // 原生对象 或 函数 - proxyObj = createObjectProxy(rawObj, false, { - current: change => { - listener.current(change); + proxyObj = createObjectProxy(rawObj, { + current: change => { + listener.current(change); + }, }, - }); + false); } proxyMap.set(rawObj, proxyObj); diff --git a/libs/horizon/src/horizonx/proxy/handlers/ArrayProxyHandler.ts b/libs/horizon/src/horizonx/proxy/handlers/ArrayProxyHandler.ts index 669f560a..630abd53 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/ArrayProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/ArrayProxyHandler.ts @@ -35,7 +35,7 @@ function set(rawObj: any[], key: string, value: any, receiver: any) { if (!isSame(newValue, oldValue)) { // 值不一样，触发监听器 - if (observer.watchers?.[key]) { + if (observer.watchers[key]) { observer.watchers[key].forEach(cb => { cb(key, oldValue, newValue, mutation); }); diff --git a/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts b/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts index e6d4309c..e5b4407e 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/CollectionProxyHandler.ts @@ -21,19 +21,17 @@ import { createMapProxy } from './MapProxy'; export function createCollectionProxy( rawObj: Object, - hookObserver: boolean, - listener: { current: (...args) => any } + listener: { current: (...args) => any }, + hookObserver = true ): Object { - hookObserver = hookObserver || true; - if (isWeakSet(rawObj)) { - return createWeakSetProxy(rawObj, hookObserver, listener); + return createWeakSetProxy(rawObj, listener, hookObserver); } if (isSet(rawObj)) { - return createSetProxy(rawObj, hookObserver, listener); + return createSetProxy(rawObj, listener, hookObserver); } if (isWeakMap(rawObj)) { - return createWeakMapProxy(rawObj, hookObserver, listener); + return createWeakMapProxy(rawObj, listener, hookObserver); } - return createMapProxy(rawObj, hookObserver, listener); + return createMapProxy(rawObj, listener, hookObserver); } diff --git a/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts index 0921cf7a..6fd0b03d 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/MapProxy.ts @@ -20,14 +20,17 @@ import { isPanelActive } from '../../devtools'; const COLLECTION_CHANGE = '_collectionChange'; -export function createMapProxy(rawObj: Object, hookObserver: boolean, listener: { current: (...args) => any }): Object { - hookObserver = hookObserver || true; +export function createMapProxy( + rawObj: Object, + listener: { current: (...args) => any }, + hookObserver = true +): Object { let listeners: ((mutation) => {})[] = []; let oldData: [any, any][] = []; let proxies = new Map(); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - function getFun(rawObj: { get: (key: any) => any; has: (key: any) => boolean }, key: any) { + function getFun(rawObj: { get: (key: any) => any; has: (key: any) => boolean }, key: any): any { const keyProxy = rawObj.has(key) ? key : proxies.get(key); if (!keyProxy) return; const observer = getObserver(rawObj); @@ -61,7 +64,7 @@ export function createMapProxy(rawObj: Object, hookObserver: boolean, listener: }, key: any, value: any - ) { + ): any { if (rawObj.has(key) || rawObj.has(proxies.get(key))) { // VALUE CHANGE (whole value for selected key is changed) const oldValue = rawObj.get(proxies.get(key)); @@ -71,7 +74,7 @@ export function createMapProxy(rawObj: Object, hookObserver: boolean, listener: const observer = getObserver(rawObj); observer.setProp(COLLECTION_CHANGE, mutation); - if (observer.watchers?.[key]) { + if (observer.watchers[key]) { observer.watchers[key].forEach(cb => { cb(key, oldValue, value, mutation); }); diff --git a/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts b/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts index 28aeb1f2..4f7448ab 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/ObjectProxyHandler.ts @@ -29,7 +29,7 @@ function set(rawObj: object, key: string, value: any, receiver: any): boolean { const mutation = isPanelActive() ? resolveMutation(oldObject, rawObj) : resolveMutation(null, rawObj); if (!isSame(newValue, oldValue)) { - if (observer.watchers?.[key]) { + if (observer.watchers[key]) { observer.watchers[key].forEach(cb => { cb(key, oldValue, newValue, mutation); }); @@ -41,10 +41,9 @@ function set(rawObj: object, key: string, value: any, receiver: any): boolean { export function createObjectProxy( rawObj: T, - singleLevel: boolean, - listener: { current: (...args) => any } + listener: { current: (...args) => any }, + singleLevel = false ): 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 e5efb07b..3eeeebd0 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/SetProxy.ts @@ -20,10 +20,9 @@ const COLLECTION_CHANGE = '_collectionChange'; export function createSetProxy( rawObj: T, - hookObserver: boolean, - listener: { current: (...args) => any } + listener: { current: (...args) => any }, + hookObserver = true ): ProxyHandler { - hookObserver = hookObserver || true; let listeners: ((mutation) => {})[] = []; let proxies = new WeakMap(); diff --git a/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts index 3792dc4d..30c32fd8 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/WeakMapProxy.ts @@ -22,10 +22,9 @@ const COLLECTION_CHANGE = '_collectionChange'; export function createWeakMapProxy( rawObj: Object, - hookObserver: boolean, - listener: { current: (...args) => any } + listener: { current: (...args) => any }, + hookObserver = true ): Object { - hookObserver = hookObserver ||true; let listeners: ((mutation) => {})[] = []; const handler = { @@ -117,7 +116,7 @@ export function createWeakMapProxy( } if (valChange) { - if (observer.watchers?.[key]) { + if (observer.watchers[key]) { observer.watchers[key].forEach(cb => { cb(key, oldValue, newValue, mutation); }); diff --git a/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts b/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts index 4fd6b788..a9914be9 100644 --- a/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts +++ b/libs/horizon/src/horizonx/proxy/handlers/WeakSetProxy.ts @@ -18,10 +18,9 @@ import { createProxy, getObserver, hookObserverMap } from '../ProxyHandler'; export function createWeakSetProxy( rawObj: T, - hookObserver: boolean, - listener: { current: (...args) => any } + listener: { current: (...args) => any }, + hookObserver = true, ): ProxyHandler { - hookObserver = hookObserver || true; let listeners: ((mutation) => {})[] = []; let proxies = new WeakMap();