From e31ed399dee17abc64fa97abe2635fc67bfad4cd Mon Sep 17 00:00:00 2001 From: * <8> Date: Wed, 3 Aug 2022 14:46:06 +0800 Subject: [PATCH 01/10] Match-id-0dfbd7fa96536fa2974eadfdad81039cf02f279a --- babel.config.js | 3 +- libs/horizon/src/external/JSXElement.ts | 15 +++++-- libs/horizon/src/external/devtools.ts | 42 +++++++++---------- libs/horizon/src/renderer/Types.ts | 20 +++++---- libs/horizon/src/renderer/vnode/VNode.ts | 11 ++++- .../src/renderer/vnode/VNodeCreator.ts | 21 +++++----- package.json | 1 + 7 files changed, 68 insertions(+), 45 deletions(-) diff --git a/babel.config.js b/babel.config.js index 9f82d978..7381b622 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,7 +2,7 @@ module.exports = { presets: [ '@babel/react', '@babel/preset-typescript', - ['@babel/preset-env', { targets: { node: 'current' } }] + ['@babel/preset-env', { targets: { node: 'current' } }], ], plugins: [ ['@babel/plugin-proposal-class-properties', { loose: true }], @@ -34,5 +34,6 @@ module.exports = { pragma: 'Horizon.createElement', pragmaFrag: 'Horizon.Fragment' }], + ['@babel/plugin-transform-react-jsx-source'], ], }; diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index d805b843..1f1f1385 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -9,10 +9,11 @@ import { getProcessingClassVNode } from '../renderer/GlobalVar'; * ref ref属性 * props 其他常规属性 */ -export function JSXElement(type, key, ref, vNode, props) { +export function JSXElement(type, key, ref, vNode, props, source) { return { // 元素标识符 vtype: TYPE_COMMON_ELEMENT, + source: source, // 属于元素的内置属性 type: type, @@ -26,7 +27,13 @@ export function JSXElement(type, key, ref, vNode, props) { } function isValidKey(key) { - return key !== 'key' && key !== 'ref' && key !== '__source'; + const keyArray = [ + 'key', + 'ref', + '__source', + '__self' + ]; + return !keyArray.includes(key); } function mergeDefault(sourceObj, defaultObj) { @@ -67,7 +74,9 @@ function buildElement(isClone, type, setting, children) { mergeDefault(props, element.defaultProps); } - return JSXElement(element, key, ref, vNode, props); + const source = setting?.__source === undefined ? null : setting.__source; + + return JSXElement(element, key, ref, vNode, props, source); } // 创建Element结构体，供JSX编译时调用 diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index e1edf1ff..0cc4d530 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,12 +1,5 @@ import { travelVNodeTree } from '../renderer/vnode/VNodeUtils'; -import { - Hook, - Reducer, - Ref, - Effect, - CallBack, - Memo -} from '../renderer/hooks/HookType'; +import { Hook, Reducer, Ref, Effect, CallBack, Memo } from '../renderer/hooks/HookType'; import { VNode } from '../renderer/vnode/VNode'; import { launchUpdateFromVNode } from '../renderer/TreeBuilder'; import { DomComponent } from '../renderer/vnode/VNodeTags'; @@ -26,7 +19,7 @@ const HookName = { MemoHook: 'Memo', RefHook: 'Ref', ReducerHook: 'Reducer', - CallbackHook: 'Callback' + CallbackHook: 'Callback', }; export const helper = { @@ -45,7 +38,8 @@ export const helper = { } else if (isRefHook(state)) { return { name: HookName.RefHook, hIndex, value: (state as Ref).current }; } else if (isEffectHook(state)) { - const name = state.effectConstant == EffectConstant.LayoutEffect ? HookName.LayoutEffectHook : HookName.EffectHook; + const name = + state.effectConstant == EffectConstant.LayoutEffect ? HookName.LayoutEffectHook : HookName.EffectHook; return { name, hIndex, value: (state as Effect).effect }; } else if (isCallbackHook(state)) { return { name: HookName.CallbackHook, hIndex, value: (state as CallBack).func }; @@ -86,7 +80,7 @@ export const helper = { } if (hooks && hooks.length !== 0) { const logHookInfo: any[] = []; - hooks.forEach((hook) => { + hooks.forEach(hook => { const state = hook.state as Reducer; if (state.trigger && state.isUseState) { logHookInfo.push(state.stateValue); @@ -94,20 +88,26 @@ export const helper = { }); info['Hooks'] = logHookInfo; } - travelVNodeTree(vNode, (node: VNode) => { - if (node.tag === DomComponent) { - // 找到组件的第一个dom元素，返回它所在父节点的全部子节点 - const dom = node.realNode; - info['Nodes'] = dom?.parentNode?.childNodes; - return true; - } - return false; - }, null, vNode, null); + travelVNodeTree( + vNode, + (node: VNode) => { + if (node.tag === DomComponent) { + // 找到组件的第一个dom元素，返回它所在父节点的全部子节点 + const dom = node.realNode; + info['Nodes'] = dom?.parentNode?.childNodes; + return true; + } + return false; + }, + null, + vNode, + null + ); return info; }, getElementTag: (element: JSXElement) => { return getElementTag(element); - } + }, }; export function injectUpdater() { diff --git a/libs/horizon/src/renderer/Types.ts b/libs/horizon/src/renderer/Types.ts index 6e1572fe..c6c2390a 100644 --- a/libs/horizon/src/renderer/Types.ts +++ b/libs/horizon/src/renderer/Types.ts @@ -3,20 +3,16 @@ export { VNode } from './vnode/VNode'; type Trigger = (A) => void; export type UseStateHookType = { - useState( - initialState: (() => S) | S - ): [S, Trigger<((S) => S) | S>]; + useState(initialState: (() => S) | S): [S, Trigger<((S) => S) | S>]; }; export type UseReducerHookType = { - useReducer( - reducer: (S, A) => S, - initArg: P, init?: (P) => S, - ): [S, Trigger]; + useReducer(reducer: (S, A) => S, initArg: P, init?: (P) => S): [S, Trigger]; }; -export type UseContextHookType = { useContext(context: ContextType,): T }; +export type UseContextHookType = { useContext(context: ContextType): T }; export type JSXElement = { vtype: any; + source: any; type: any; key: any; ref: any; @@ -50,7 +46,7 @@ export type RefType = { export interface PromiseType { then( onFulfill: (value: R) => void | PromiseType | U, - onReject: (error: any) => void | PromiseType | U, + onReject: (error: any) => void | PromiseType | U ): void | PromiseType; } @@ -61,3 +57,9 @@ export interface SuspenseState { didCapture: boolean; // suspense是否捕获了异常 promiseResolved: boolean; // suspense的promise是否resolve } + +export type Source = { + columnNumber: number; + fileName: string; + lineNumber: number; +}; diff --git a/libs/horizon/src/renderer/vnode/VNode.ts b/libs/horizon/src/renderer/vnode/VNode.ts index 7c360e47..efb31616 100644 --- a/libs/horizon/src/renderer/vnode/VNode.ts +++ b/libs/horizon/src/renderer/vnode/VNode.ts @@ -18,7 +18,7 @@ import { MemoComponent, } from './VNodeTags'; import type { VNodeTag } from './VNodeTags'; -import type { RefType, ContextType, SuspenseState } from '../Types'; +import type { RefType, ContextType, SuspenseState, Source } from '../Types'; import type { Hook } from '../hooks/HookType'; import { InitFlag } from './VNodeFlags'; @@ -86,6 +86,7 @@ export class VNode { isStoreChange: boolean; observers: Set | null = null; // 记录这个函数组件/类组件依赖哪些Observer classComponentWillUnmount: Function | null; // HorizonX会在classComponentWillUnmount中清除对VNode的引入用 + source: Source | null; // 节点所在代码位置 constructor(tag: VNodeTag, props: any, key: null | string, realNode) { this.tag = tag; // 对应组件的类型，比如ClassComponent等 @@ -116,6 +117,7 @@ export class VNode { this.isStoreChange = false; this.observers = null; this.classComponentWillUnmount = null; + this.source = null; break; case ClassComponent: this.realNode = null; @@ -130,15 +132,18 @@ export class VNode { this.isStoreChange = false; this.observers = null; this.classComponentWillUnmount = null; + this.source = null; break; case DomPortal: this.realNode = null; this.context = null; + this.source = null; break; case DomComponent: this.realNode = null; this.changeList = null; this.context = null; + this.source = null; break; case DomText: this.realNode = null; @@ -152,12 +157,15 @@ export class VNode { oldChildStatus: '', childStatus: '' }; + this.source = null; break; case ContextProvider: + this.source = null; this.context = null; break; case MemoComponent: this.effectList = null; + this.source = null; break; case LazyComponent: this.realNode = null; @@ -165,6 +173,7 @@ export class VNode { this.isLazyComponent = true; this.lazyType = null; this.updates = null; + this.source = null; break; case Fragment: break; diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index c5b4c306..1df766b4 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -17,10 +17,13 @@ import { } from './VNodeTags'; import { TYPE_CONTEXT, - TYPE_FORWARD_REF, TYPE_FRAGMENT, + TYPE_FORWARD_REF, + TYPE_FRAGMENT, TYPE_LAZY, - TYPE_MEMO, TYPE_PROFILER, - TYPE_PROVIDER, TYPE_STRICT_MODE, + TYPE_MEMO, + TYPE_PROFILER, + TYPE_PROVIDER, + TYPE_STRICT_MODE, TYPE_SUSPENSE, } from '../../external/JSXElementType'; import { VNode } from './VNode'; @@ -56,7 +59,7 @@ export function getLazyVNodeTag(lazyComp: any): string { } else if (lazyComp !== undefined && lazyComp !== null && typeLazyMap[lazyComp.vtype]) { return typeLazyMap[lazyComp.vtype]; } - throw Error('Horizon can\'t resolve the content of lazy'); + throw Error("Horizon can't resolve the content of lazy"); } // 创建processing @@ -102,7 +105,7 @@ export function createPortalVNode(portal) { return vNode; } -export function createUndeterminedVNode(type, key, props) { +export function createUndeterminedVNode(type, key, props, source) { let vNodeTag = FunctionComponent; let isLazy = false; const componentType = typeof type; @@ -129,6 +132,7 @@ export function createUndeterminedVNode(type, key, props) { if (isLazy) { vNode.lazyType = type; } + vNode.source = source; return vNode; } @@ -181,14 +185,12 @@ export function createVNode(tag: VNodeTag | string, ...secondArg) { } export function createVNodeFromElement(element: JSXElement): VNode { - const type = element.type; - const key = element.key; - const props = element.props; + const { type, key, props, source } = element; if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) { return createFragmentVNode(key, props.children); } else { - return createUndeterminedVNode(type, key, props); + return createUndeterminedVNode(type, key, props, source); } } @@ -241,4 +243,3 @@ export function onlyUpdateChildVNodes(processing: VNode): VNode | null { // 子树无需工作 return null; } - diff --git a/package.json b/package.json index fe9836de..0517610f 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@babel/plugin-transform-shorthand-properties": "7.16.7", "@babel/plugin-transform-spread": "7.16.7", "@babel/plugin-transform-template-literals": "7.16.7", + "@babel/plugin-transform-react-jsx-source": "^7.18.6", "@babel/preset-env": "7.16.7", "@babel/preset-react": "7.16.7", "@babel/preset-typescript": "7.16.7", From eec4863d61a0a719b35d866c890df9eba752736f Mon Sep 17 00:00:00 2001 From: * <8> Date: Wed, 3 Aug 2022 18:14:30 +0800 Subject: [PATCH 02/10] Match-id-a177994d0b3fe27dac34cee64bf01b1ba92b9310 --- libs/horizon/src/external/ChildrenUtil.ts | 69 +++++-------------- libs/horizon/src/external/JSXElement.ts | 12 ++-- libs/horizon/src/external/devtools.ts | 38 +++++----- libs/horizon/src/renderer/Types.ts | 4 +- .../src/renderer/render/MemoComponent.ts | 2 +- libs/horizon/src/renderer/vnode/VNode.ts | 32 ++++----- .../src/renderer/vnode/VNodeCreator.ts | 2 +- package.json | 2 +- 8 files changed, 62 insertions(+), 99 deletions(-) diff --git a/libs/horizon/src/external/ChildrenUtil.ts b/libs/horizon/src/external/ChildrenUtil.ts index d1a928fb..38424dea 100644 --- a/libs/horizon/src/external/ChildrenUtil.ts +++ b/libs/horizon/src/external/ChildrenUtil.ts @@ -1,7 +1,7 @@ -import {throwIfTrue} from '../renderer/utils/throwIfTrue'; -import {TYPE_COMMON_ELEMENT, TYPE_PORTAL} from './JSXElementType'; +import { throwIfTrue } from '../renderer/utils/throwIfTrue'; +import { TYPE_COMMON_ELEMENT, TYPE_PORTAL } from './JSXElementType'; -import {isValidElement, JSXElement} from './JSXElement'; +import { isValidElement, JSXElement } from './JSXElement'; // 生成key function getItemKey(item: any, index: number): string { @@ -12,12 +12,7 @@ function getItemKey(item: any, index: number): string { return '.' + index.toString(36); } -function mapChildrenToArray( - children: any, - arr: Array, - prefix: string, - callback?: Function, -): number | void { +function mapChildrenToArray(children: any, arr: Array, prefix: string, callback?: Function): number | void { const type = typeof children; switch (type) { // 继承原有规格，undefined和boolean类型按照null处理 @@ -36,44 +31,27 @@ function mapChildrenToArray( } const vtype = children.vtype; if (vtype === TYPE_COMMON_ELEMENT || vtype === TYPE_PORTAL) { - callMapFun(children, arr, prefix, callback) ; + 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. ' - ); + throw new Error('Object is invalid as a Horizon child. '); // No Default } } -function processArrayChildren( - children: any, - arr: Array, - prefix: string, - callback: Function, -) { +function processArrayChildren(children: any, arr: Array, prefix: string, callback: Function) { for (let i = 0; i < children.length; i++) { const childItem = children[i]; const nextPrefix = prefix + getItemKey(childItem, i); - mapChildrenToArray( - childItem, - arr, - nextPrefix, - callback, - ); + mapChildrenToArray(childItem, arr, nextPrefix, callback); } } -function callMapFun( - children: any, - arr: Array, - prefix: string, - callback: Function, -) { +function callMapFun(children: any, arr: Array, prefix: string, callback: Function) { let mappedChild = callback(children); if (Array.isArray(mappedChild)) { // 维持原有规格，如果callback返回结果是数组，处理函数修改为返回数组item @@ -83,9 +61,8 @@ function callMapFun( if (isValidElement(mappedChild)) { const childKey = prefix === '' ? getItemKey(children, 0) : ''; const mappedKey = getItemKey(mappedChild, 0); - const newKey = prefix + childKey + (mappedChild.key && mappedKey !== getItemKey(children, 0) - ? '.$' + mappedChild.key - : ''); + const newKey = + prefix + childKey + (mappedChild.key && mappedKey !== getItemKey(children, 0) ? '.$' + mappedChild.key : ''); // 返回一个修改key的children mappedChild = JSXElement( mappedChild.type, @@ -93,6 +70,7 @@ function callMapFun( mappedChild.ref, mappedChild.belongClassVNode, mappedChild.props, + mappedChild.source ); } arr.push(mappedChild); @@ -100,11 +78,7 @@ function callMapFun( } // 在 children 里的每个直接子节点上调用一个函数，并将 this 设置为 thisArg -function mapChildren( - children: any, - func: Function, - context?: any, -): Array { +function mapChildren(children: any, func: Function, context?: any): Array { if (children === null || children === undefined) { return children; } @@ -121,27 +95,22 @@ const Children = { }, map: mapChildren, // 并非所有元素都会计数,只计数调用callMapFun函数次数 - count: (children) => { + count: children => { let n = 0; mapChildren(children, () => { n++; }); return n; }, - only: (children) => { - throwIfTrue( - !isValidElement(children), - 'Horizon.Children.only function received invalid element.' - ); + only: children => { + throwIfTrue(!isValidElement(children), 'Horizon.Children.only function received invalid element.'); return children; }, - toArray: (children) => { + toArray: children => { const result = []; mapChildrenToArray(children, result, '', child => child); return result; }, -} - -export { - Children }; + +export { Children }; diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index 1f1f1385..c4ee4b9a 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -1,5 +1,5 @@ -import { TYPE_COMMON_ELEMENT } from './JSXElementType'; -import { getProcessingClassVNode } from '../renderer/GlobalVar'; +import {TYPE_COMMON_ELEMENT} from './JSXElementType'; +import {getProcessingClassVNode} from '../renderer/GlobalVar'; /** @@ -31,7 +31,7 @@ function isValidKey(key) { 'key', 'ref', '__source', - '__self' + '__self', ]; return !keyArray.includes(key); } @@ -48,7 +48,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 && setting !== undefined) { @@ -74,9 +74,7 @@ function buildElement(isClone, type, setting, children) { mergeDefault(props, element.defaultProps); } - const source = setting?.__source === undefined ? null : setting.__source; - - return JSXElement(element, key, ref, vNode, props, source); + return JSXElement(element, key, ref, vNode, props, setting?.__source ?? null); } // 创建Element结构体，供JSX编译时调用 diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index 0cc4d530..9cfa57b4 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,11 +1,11 @@ -import { travelVNodeTree } from '../renderer/vnode/VNodeUtils'; -import { Hook, Reducer, Ref, Effect, CallBack, Memo } from '../renderer/hooks/HookType'; -import { VNode } from '../renderer/vnode/VNode'; -import { launchUpdateFromVNode } from '../renderer/TreeBuilder'; -import { DomComponent } from '../renderer/vnode/VNodeTags'; -import { getElementTag } from '../renderer/vnode/VNodeCreator'; -import { JSXElement } from '../renderer/Types'; -import { EffectConstant } from '../renderer/hooks/EffectConstant'; +import {travelVNodeTree} from '../renderer/vnode/VNodeUtils'; +import {Hook, Reducer, Ref, Effect, CallBack, Memo} from '../renderer/hooks/HookType'; +import {VNode} from '../renderer/vnode/VNode'; +import {launchUpdateFromVNode} from '../renderer/TreeBuilder'; +import {DomComponent} from '../renderer/vnode/VNodeTags'; +import {getElementTag} from '../renderer/vnode/VNodeCreator'; +import {JSXElement} from '../renderer/Types'; +import {EffectConstant} from '../renderer/hooks/EffectConstant'; const isEffectHook = (state: any): state is Effect => !!state.effect; const isRefHook = (state: any): state is Ref => Object.prototype.hasOwnProperty.call(state, 'current'); @@ -28,23 +28,23 @@ export const helper = { }, // 获取 hook 名，hIndex值和存储的值 getHookInfo: (hook: Hook) => { - const { hIndex, state } = hook; + const {hIndex, state} = hook; if ((state as Reducer).trigger) { if ((state as Reducer).isUseState) { - return { name: HookName.StateHook, hIndex, value: (state as Reducer).stateValue }; + return {name: HookName.StateHook, hIndex, value: (state as Reducer).stateValue}; } else if ((state as Reducer).reducer) { - return { name: HookName.ReducerHook, hIndex, value: (state as Reducer).stateValue }; + return {name: HookName.ReducerHook, hIndex, value: (state as Reducer).stateValue}; } } else if (isRefHook(state)) { - return { name: HookName.RefHook, hIndex, value: (state as Ref).current }; + return {name: HookName.RefHook, hIndex, value: (state as Ref).current}; } else if (isEffectHook(state)) { const name = state.effectConstant == EffectConstant.LayoutEffect ? HookName.LayoutEffectHook : HookName.EffectHook; - return { name, hIndex, value: (state as Effect).effect }; + return {name, hIndex, value: (state as Effect).effect}; } else if (isCallbackHook(state)) { - return { name: HookName.CallbackHook, hIndex, value: (state as CallBack).func }; + return {name: HookName.CallbackHook, hIndex, value: (state as CallBack).func}; } else if (isMemoHook(state)) { - return { name: HookName.MemoHook, hIndex, value: (state as Memo).result }; + return {name: HookName.MemoHook, hIndex, value: (state as Memo).result}; } return null; }, @@ -70,7 +70,7 @@ export const helper = { } }, getComponentInfo: (vNode: VNode) => { - const { props, state, hooks } = vNode; + const {props, state, hooks} = vNode; const info: any = {}; if (props && Object.keys(props).length !== 0) { info['Props'] = props; @@ -98,11 +98,7 @@ export const helper = { return true; } return false; - }, - null, - vNode, - null - ); + }, null, vNode, null); return info; }, getElementTag: (element: JSXElement) => { diff --git a/libs/horizon/src/renderer/Types.ts b/libs/horizon/src/renderer/Types.ts index c6c2390a..b36e9cf3 100644 --- a/libs/horizon/src/renderer/Types.ts +++ b/libs/horizon/src/renderer/Types.ts @@ -27,8 +27,8 @@ export type ProviderType = { export type ContextType = { vtype: number; - Consumer: ContextType; - Provider: ProviderType; + Consumer: ContextType | null; + Provider: ProviderType | null; value: T; }; diff --git a/libs/horizon/src/renderer/render/MemoComponent.ts b/libs/horizon/src/renderer/render/MemoComponent.ts index 99a34364..d0331f4c 100644 --- a/libs/horizon/src/renderer/render/MemoComponent.ts +++ b/libs/horizon/src/renderer/render/MemoComponent.ts @@ -26,7 +26,7 @@ export function captureMemoComponent( if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) { newChild = createFragmentVNode(null, newProps.children); } else { - newChild = createUndeterminedVNode(type, null, newProps); + newChild = createUndeterminedVNode(type, null, newProps,processing.src); } newChild.parent = processing; newChild.ref = processing.ref; diff --git a/libs/horizon/src/renderer/vnode/VNode.ts b/libs/horizon/src/renderer/vnode/VNode.ts index efb31616..80baedc9 100644 --- a/libs/horizon/src/renderer/vnode/VNode.ts +++ b/libs/horizon/src/renderer/vnode/VNode.ts @@ -17,10 +17,10 @@ import { Profiler, MemoComponent, } from './VNodeTags'; -import type { VNodeTag } from './VNodeTags'; -import type { RefType, ContextType, SuspenseState, Source } from '../Types'; -import type { Hook } from '../hooks/HookType'; -import { InitFlag } from './VNodeFlags'; +import type {VNodeTag} from './VNodeTags'; +import type {RefType, ContextType, SuspenseState, Source} from '../Types'; +import type {Hook} from '../hooks/HookType'; +import {InitFlag} from './VNodeFlags'; export class VNode { tag: VNodeTag; @@ -77,8 +77,8 @@ export class VNode { // 根节点数据 toUpdateNodes: Set | null; // 保存要更新的节点 - delegatedEvents: Set - delegatedNativeEvents: Set + delegatedEvents: Set; + delegatedNativeEvents: Set; belongClassVNode: VNode | null = null; // 记录JSXElement所属class vNode，处理ref的时候使用 @@ -86,7 +86,7 @@ export class VNode { isStoreChange: boolean; observers: Set | null = null; // 记录这个函数组件/类组件依赖哪些Observer classComponentWillUnmount: Function | null; // HorizonX会在classComponentWillUnmount中清除对VNode的引入用 - source: Source | null; // 节点所在代码位置 + src: Source | null; // 节点所在代码位置 constructor(tag: VNodeTag, props: any, key: null | string, realNode) { this.tag = tag; // 对应组件的类型，比如ClassComponent等 @@ -117,7 +117,7 @@ export class VNode { this.isStoreChange = false; this.observers = null; this.classComponentWillUnmount = null; - this.source = null; + this.src = null; break; case ClassComponent: this.realNode = null; @@ -132,18 +132,18 @@ export class VNode { this.isStoreChange = false; this.observers = null; this.classComponentWillUnmount = null; - this.source = null; + this.src = null; break; case DomPortal: this.realNode = null; this.context = null; - this.source = null; + this.src = null; break; case DomComponent: this.realNode = null; this.changeList = null; this.context = null; - this.source = null; + this.src = null; break; case DomText: this.realNode = null; @@ -155,17 +155,17 @@ export class VNode { didCapture: false, promiseResolved: false, oldChildStatus: '', - childStatus: '' + childStatus: '', }; - this.source = null; + this.src = null; break; case ContextProvider: - this.source = null; + this.src = null; this.context = null; break; case MemoComponent: this.effectList = null; - this.source = null; + this.src = null; break; case LazyComponent: this.realNode = null; @@ -173,7 +173,7 @@ export class VNode { this.isLazyComponent = true; this.lazyType = null; this.updates = null; - this.source = null; + this.src = null; break; case Fragment: break; diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index 1df766b4..60ab6064 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -132,7 +132,7 @@ export function createUndeterminedVNode(type, key, props, source) { if (isLazy) { vNode.lazyType = type; } - vNode.source = source; + vNode.src = source; return vNode; } diff --git a/package.json b/package.json index 0517610f..497ff64e 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@babel/plugin-transform-shorthand-properties": "7.16.7", "@babel/plugin-transform-spread": "7.16.7", "@babel/plugin-transform-template-literals": "7.16.7", - "@babel/plugin-transform-react-jsx-source": "^7.18.6", + "@babel/plugin-transform-react-jsx-source": "^7.16.7", "@babel/preset-env": "7.16.7", "@babel/preset-react": "7.16.7", "@babel/preset-typescript": "7.16.7", From e3366b5752d7715e57df3054c718131a3b4b9d15 Mon Sep 17 00:00:00 2001 From: * <8> Date: Wed, 3 Aug 2022 18:19:35 +0800 Subject: [PATCH 03/10] Match-id-46ac76d97c13f36617be279f07e1096e128778fb --- libs/horizon/src/external/ChildrenUtil.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/libs/horizon/src/external/ChildrenUtil.ts b/libs/horizon/src/external/ChildrenUtil.ts index 38424dea..e42091fb 100644 --- a/libs/horizon/src/external/ChildrenUtil.ts +++ b/libs/horizon/src/external/ChildrenUtil.ts @@ -1,7 +1,7 @@ -import { throwIfTrue } from '../renderer/utils/throwIfTrue'; -import { TYPE_COMMON_ELEMENT, TYPE_PORTAL } from './JSXElementType'; +import {throwIfTrue} from '../renderer/utils/throwIfTrue'; +import {TYPE_COMMON_ELEMENT, TYPE_PORTAL} from './JSXElementType'; -import { isValidElement, JSXElement } from './JSXElement'; +import {isValidElement, JSXElement} from './JSXElement'; // 生成key function getItemKey(item: any, index: number): string { @@ -70,7 +70,7 @@ function callMapFun(children: any, arr: Array, prefix: string, callback: Fu mappedChild.ref, mappedChild.belongClassVNode, mappedChild.props, - mappedChild.source + mappedChild.source, ); } arr.push(mappedChild); @@ -113,4 +113,4 @@ const Children = { }, }; -export { Children }; +export {Children}; From 8bf49d834e86f5b590bf794b59aef28221899d1f Mon Sep 17 00:00:00 2001 From: * <8> Date: Thu, 4 Aug 2022 10:52:23 +0800 Subject: [PATCH 04/10] Match-id-ffce6035a3d1044fbc03dff754645c0567aef4f2 --- libs/horizon/src/external/JSXElement.ts | 2 +- libs/horizon/src/renderer/vnode/VNodeCreator.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index c4ee4b9a..b654a841 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -13,7 +13,7 @@ export function JSXElement(type, key, ref, vNode, props, source) { return { // 元素标识符 vtype: TYPE_COMMON_ELEMENT, - source: source, + source: isDev ? source : null, // 属于元素的内置属性 type: type, diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index 60ab6064..3a7f7085 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -109,7 +109,6 @@ export function createUndeterminedVNode(type, key, props, source) { let vNodeTag = FunctionComponent; let isLazy = false; const componentType = typeof type; - if (componentType === 'function') { if (isClassComponent(type)) { vNodeTag = ClassComponent; @@ -132,7 +131,8 @@ export function createUndeterminedVNode(type, key, props, source) { if (isLazy) { vNode.lazyType = type; } - vNode.src = source; + + vNode.src = isDev ? source : null; return vNode; } From 558678d27bb7eca742d285e81fe9e086ae8e443d Mon Sep 17 00:00:00 2001 From: * <8> Date: Thu, 4 Aug 2022 18:57:21 +0800 Subject: [PATCH 05/10] Match-id-fcb41f29c2d0ac83e94d1822a856dd5d45b3c9db --- libs/horizon/src/external/JSXElement.ts | 30 ++++++++++--------- libs/horizon/src/renderer/Types.ts | 1 - .../src/renderer/render/MemoComponent.ts | 24 +++++++-------- .../src/renderer/vnode/VNodeCreator.ts | 4 +-- 4 files changed, 29 insertions(+), 30 deletions(-) diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index b654a841..c2b4855e 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -1,6 +1,6 @@ -import {TYPE_COMMON_ELEMENT} from './JSXElementType'; -import {getProcessingClassVNode} from '../renderer/GlobalVar'; - +import { TYPE_COMMON_ELEMENT } from './JSXElementType'; +import { getProcessingClassVNode } from '../renderer/GlobalVar'; +import { Source } from '../renderer/Types'; /** * vtype 节点的类型，这里固定是element @@ -9,7 +9,7 @@ import {getProcessingClassVNode} from '../renderer/GlobalVar'; * ref ref属性 * props 其他常规属性 */ -export function JSXElement(type, key, ref, vNode, props, source) { +export function JSXElement(type, key, ref, vNode, props, source: Source | null) { return { // 元素标识符 vtype: TYPE_COMMON_ELEMENT, @@ -27,12 +27,7 @@ export function JSXElement(type, key, ref, vNode, props, source) { } function isValidKey(key) { - const keyArray = [ - 'key', - 'ref', - '__source', - '__self', - ]; + const keyArray = ['key', 'ref', '__source', '__self']; return !keyArray.includes(key); } @@ -46,9 +41,9 @@ function mergeDefault(sourceObj, defaultObj) { 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 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.belongClassVNode : getProcessingClassVNode(); if (setting !== null && setting !== undefined) { @@ -73,8 +68,15 @@ function buildElement(isClone, type, setting, children) { if (element && element.defaultProps) { mergeDefault(props, element.defaultProps); } + let src: Source | null = null; + if (setting?.__source) { + src = { + fileName: setting.__source.fileName, + lineNumber: setting.__source.lineNumber, + }; + } - return JSXElement(element, key, ref, vNode, props, setting?.__source ?? null); + return JSXElement(element, key, ref, vNode, props, src); } // 创建Element结构体，供JSX编译时调用 diff --git a/libs/horizon/src/renderer/Types.ts b/libs/horizon/src/renderer/Types.ts index b36e9cf3..b05f5be4 100644 --- a/libs/horizon/src/renderer/Types.ts +++ b/libs/horizon/src/renderer/Types.ts @@ -59,7 +59,6 @@ export interface SuspenseState { } export type Source = { - columnNumber: number; fileName: string; lineNumber: number; }; diff --git a/libs/horizon/src/renderer/render/MemoComponent.ts b/libs/horizon/src/renderer/render/MemoComponent.ts index d0331f4c..270346e7 100644 --- a/libs/horizon/src/renderer/render/MemoComponent.ts +++ b/libs/horizon/src/renderer/render/MemoComponent.ts @@ -1,21 +1,19 @@ -import type {VNode} from '../Types'; +import type { Source, VNode } from '../Types'; -import {mergeDefaultProps} from './LazyComponent'; -import {updateVNode, onlyUpdateChildVNodes, createFragmentVNode, createUndeterminedVNode} from '../vnode/VNodeCreator'; -import {shallowCompare} from '../utils/compare'; +import { mergeDefaultProps } from './LazyComponent'; import { - TYPE_FRAGMENT, - TYPE_PROFILER, - TYPE_STRICT_MODE, -} from '../../external/JSXElementType'; + updateVNode, + onlyUpdateChildVNodes, + createFragmentVNode, + createUndeterminedVNode, +} from '../vnode/VNodeCreator'; +import { shallowCompare } from '../utils/compare'; +import { TYPE_FRAGMENT, TYPE_PROFILER, TYPE_STRICT_MODE } from '../../external/JSXElementType'; import { markVNodePath } from '../utils/vNodePath'; export function bubbleRender() {} -export function captureMemoComponent( - processing: VNode, - shouldUpdate: boolean, -): VNode | null { +export function captureMemoComponent(processing: VNode, shouldUpdate: boolean): VNode | null { const Component = processing.type; // 合并 函数组件或类组件 的defaultProps const newProps = mergeDefaultProps(Component, processing.props); @@ -26,7 +24,7 @@ export function captureMemoComponent( if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) { newChild = createFragmentVNode(null, newProps.children); } else { - newChild = createUndeterminedVNode(type, null, newProps,processing.src); + newChild = createUndeterminedVNode(type, null, newProps, processing.src); } newChild.parent = processing; newChild.ref = processing.ref; diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index 3a7f7085..ff906d59 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -27,7 +27,7 @@ import { TYPE_SUSPENSE, } from '../../external/JSXElementType'; import { VNode } from './VNode'; -import { JSXElement } from '../Types'; +import { JSXElement, Source } from '../Types'; import { markVNodePath } from '../utils/vNodePath'; const typeLazyMap = { @@ -105,7 +105,7 @@ export function createPortalVNode(portal) { return vNode; } -export function createUndeterminedVNode(type, key, props, source) { +export function createUndeterminedVNode(type, key, props, source: Source | null): VNode { let vNodeTag = FunctionComponent; let isLazy = false; const componentType = typeof type; From b14bf9f4c012072ab8b1ca512fe46bdaafccafea Mon Sep 17 00:00:00 2001 From: * <8> Date: Fri, 5 Aug 2022 17:50:28 +0800 Subject: [PATCH 06/10] Match-id-63262d0c24ba5fc84d007fb93feb560ad185abb3 --- .../__tests__/EventTest/KeyboardEvent.test.js | 98 +++++-------------- 1 file changed, 24 insertions(+), 74 deletions(-) diff --git a/scripts/__tests__/EventTest/KeyboardEvent.test.js b/scripts/__tests__/EventTest/KeyboardEvent.test.js index 094cb1fe..ccc29222 100644 --- a/scripts/__tests__/EventTest/KeyboardEvent.test.js +++ b/scripts/__tests__/EventTest/KeyboardEvent.test.js @@ -1,8 +1,17 @@ import * as Horizon from '@cloudsop/horizon/index.ts'; -import { getLogUtils } from '../jest/testUtils'; +import {getLogUtils} from '../jest/testUtils'; describe('Keyboard Event', () => { const LogUtils = getLogUtils(); + const getKeyboardEvent = (type, keyCode, code, charCode) => { + return new KeyboardEvent(type, { + keyCode: keyCode ?? undefined, + code: code ?? undefined, + charCode: charCode ?? undefined, + bubbles: true, + cancelable: true, + }); + }; it('keydown,keypress,keyup的keycode,charcode', () => { const node = Horizon.render( @@ -16,26 +25,12 @@ describe('Keyboard Event', () => { />, container, ); - node.dispatchEvent( - new KeyboardEvent('keydown', { - keyCode: 50, - code: 'Digit2', - bubbles: true, - cancelable: true, - }), - ); - node.dispatchEvent( - new KeyboardEvent('keyup', { - keyCode: 50, - code: 'Digit2', - bubbles: true, - cancelable: true, - }), - ); + node.dispatchEvent(getKeyboardEvent('keydown', 50, 'Digit2')); + node.dispatchEvent(getKeyboardEvent('keyup', 50, 'Digit2')); expect(LogUtils.getAndClear()).toEqual([ 'onKeyDown: keycode: 50,charcode: 0', - 'onKeyUp: keycode: 50,charcode: 0' + 'onKeyUp: keycode: 50,charcode: 0', ]); }); @@ -48,17 +43,10 @@ describe('Keyboard Event', () => { />, container, ); - node.dispatchEvent( - new KeyboardEvent('keypress', { - charCode: 50, - code: 'Digit2', - bubbles: true, - cancelable: true, - }), - ); + node.dispatchEvent(getKeyboardEvent('keypress', undefined, 'Digit2', 50)); expect(LogUtils.getAndClear()).toEqual([ - 'onKeyPress: keycode: 0,charcode: 50' + 'onKeyPress: keycode: 0,charcode: 50', ]); }); @@ -71,15 +59,9 @@ describe('Keyboard Event', () => { />, container, ); - node.dispatchEvent( - new KeyboardEvent('keypress', { - charCode: 13, - bubbles: true, - cancelable: true, - }), - ); + node.dispatchEvent(getKeyboardEvent('keypress', undefined, undefined, 13)); expect(LogUtils.getAndClear()).toEqual([ - 'onKeyPress: keycode: 0,charcode: 13' + 'onKeyPress: keycode: 0,charcode: 13', ]); }); @@ -98,22 +80,8 @@ describe('Keyboard Event', () => { />, container, ); - node.dispatchEvent( - new KeyboardEvent('keydown', { - code: 'Digit2', - bubbles: true, - cancelable: true, - }), - ); - - node.dispatchEvent( - new KeyboardEvent('keypress', { - keyCode: 50, - code: 'Digit2', - bubbles: true, - cancelable: true, - }), - ); + node.dispatchEvent(getKeyboardEvent('keydown', undefined, 'Digit2')); + node.dispatchEvent(getKeyboardEvent('keypress', undefined, 'Digit2', 50)); node.dispatchEvent( new KeyboardEvent('keyup', { @@ -126,7 +94,7 @@ describe('Keyboard Event', () => { expect(LogUtils.getAndClear()).toEqual([ 'onKeyDown: code: Digit2', 'onKeyPress: code: Digit2', - 'onKeyUp: code: Digit2' + 'onKeyUp: code: Digit2', ]); }); @@ -149,32 +117,14 @@ describe('Keyboard Event', () => { />, container, ); + div.dispatchEvent(getKeyboardEvent('keydown', 40)); + div.dispatchEvent(getKeyboardEvent('keyup', 40)); + div.dispatchEvent(getKeyboardEvent('keypress', 40)); - div.dispatchEvent( - new KeyboardEvent('keydown', { - keyCode: 40, - bubbles: true, - cancelable: true, - }), - ); - div.dispatchEvent( - new KeyboardEvent('keyup', { - keyCode: 40, - bubbles: true, - cancelable: true, - }), - ); - div.dispatchEvent( - new KeyboardEvent('keypress', { - charCode: 40, - bubbles: true, - cancelable: true, - }), - ); expect(LogUtils.getAndClear()).toEqual([ 'keydown handle', 'keyup handle', - 'keypress handle' + 'keypress handle', ]); }); }); From 8f7e8e63e12d942f8a440e83f6ce611521e1ad19 Mon Sep 17 00:00:00 2001 From: * <8> Date: Fri, 5 Aug 2022 17:54:05 +0800 Subject: [PATCH 07/10] Match-id-9914aef941bed130e5727dba91ebbb4667de2798 --- libs/horizon/src/external/ChildrenUtil.ts | 10 +++++----- libs/horizon/src/external/JSXElement.ts | 2 +- libs/horizon/src/renderer/Types.ts | 2 +- libs/horizon/src/renderer/vnode/VNodeCreator.ts | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/libs/horizon/src/external/ChildrenUtil.ts b/libs/horizon/src/external/ChildrenUtil.ts index e42091fb..bb5b51c2 100644 --- a/libs/horizon/src/external/ChildrenUtil.ts +++ b/libs/horizon/src/external/ChildrenUtil.ts @@ -1,7 +1,7 @@ -import {throwIfTrue} from '../renderer/utils/throwIfTrue'; -import {TYPE_COMMON_ELEMENT, TYPE_PORTAL} from './JSXElementType'; +import { throwIfTrue } from '../renderer/utils/throwIfTrue'; +import { TYPE_COMMON_ELEMENT, TYPE_PORTAL } from './JSXElementType'; -import {isValidElement, JSXElement} from './JSXElement'; +import { isValidElement, JSXElement } from './JSXElement'; // 生成key function getItemKey(item: any, index: number): string { @@ -70,7 +70,7 @@ function callMapFun(children: any, arr: Array, prefix: string, callback: Fu mappedChild.ref, mappedChild.belongClassVNode, mappedChild.props, - mappedChild.source, + mappedChild._source ); } arr.push(mappedChild); @@ -113,4 +113,4 @@ const Children = { }, }; -export {Children}; +export { Children }; diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index c2b4855e..6b108461 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -13,7 +13,7 @@ export function JSXElement(type, key, ref, vNode, props, source: Source | null) return { // 元素标识符 vtype: TYPE_COMMON_ELEMENT, - source: isDev ? source : null, + _source: isDev ? source : null, // 属于元素的内置属性 type: type, diff --git a/libs/horizon/src/renderer/Types.ts b/libs/horizon/src/renderer/Types.ts index b05f5be4..c79a81c9 100644 --- a/libs/horizon/src/renderer/Types.ts +++ b/libs/horizon/src/renderer/Types.ts @@ -12,7 +12,7 @@ export type UseContextHookType = { useContext(context: ContextType): T }; export type JSXElement = { vtype: any; - source: any; + _source: any; type: any; key: any; ref: any; diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index ff906d59..88ee2928 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -185,12 +185,12 @@ export function createVNode(tag: VNodeTag | string, ...secondArg) { } export function createVNodeFromElement(element: JSXElement): VNode { - const { type, key, props, source } = element; + const { type, key, props, _source } = element; if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) { return createFragmentVNode(key, props.children); } else { - return createUndeterminedVNode(type, key, props, source); + return createUndeterminedVNode(type, key, props, _source); } } From d89c8b918ccab0a0d0aa6e3a13dca3e19224fb9f Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 8 Aug 2022 11:42:54 +0800 Subject: [PATCH 08/10] Match-id-ab7f42b4bff3778e5cf92a84b85756ca83d2235a --- libs/horizon/src/external/devtools.ts | 38 +++++++++++++++------------ 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index 9cfa57b4..0cc4d530 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,11 +1,11 @@ -import {travelVNodeTree} from '../renderer/vnode/VNodeUtils'; -import {Hook, Reducer, Ref, Effect, CallBack, Memo} from '../renderer/hooks/HookType'; -import {VNode} from '../renderer/vnode/VNode'; -import {launchUpdateFromVNode} from '../renderer/TreeBuilder'; -import {DomComponent} from '../renderer/vnode/VNodeTags'; -import {getElementTag} from '../renderer/vnode/VNodeCreator'; -import {JSXElement} from '../renderer/Types'; -import {EffectConstant} from '../renderer/hooks/EffectConstant'; +import { travelVNodeTree } from '../renderer/vnode/VNodeUtils'; +import { Hook, Reducer, Ref, Effect, CallBack, Memo } from '../renderer/hooks/HookType'; +import { VNode } from '../renderer/vnode/VNode'; +import { launchUpdateFromVNode } from '../renderer/TreeBuilder'; +import { DomComponent } from '../renderer/vnode/VNodeTags'; +import { getElementTag } from '../renderer/vnode/VNodeCreator'; +import { JSXElement } from '../renderer/Types'; +import { EffectConstant } from '../renderer/hooks/EffectConstant'; const isEffectHook = (state: any): state is Effect => !!state.effect; const isRefHook = (state: any): state is Ref => Object.prototype.hasOwnProperty.call(state, 'current'); @@ -28,23 +28,23 @@ export const helper = { }, // 获取 hook 名，hIndex值和存储的值 getHookInfo: (hook: Hook) => { - const {hIndex, state} = hook; + const { hIndex, state } = hook; if ((state as Reducer).trigger) { if ((state as Reducer).isUseState) { - return {name: HookName.StateHook, hIndex, value: (state as Reducer).stateValue}; + return { name: HookName.StateHook, hIndex, value: (state as Reducer).stateValue }; } else if ((state as Reducer).reducer) { - return {name: HookName.ReducerHook, hIndex, value: (state as Reducer).stateValue}; + return { name: HookName.ReducerHook, hIndex, value: (state as Reducer).stateValue }; } } else if (isRefHook(state)) { - return {name: HookName.RefHook, hIndex, value: (state as Ref).current}; + return { name: HookName.RefHook, hIndex, value: (state as Ref).current }; } else if (isEffectHook(state)) { const name = state.effectConstant == EffectConstant.LayoutEffect ? HookName.LayoutEffectHook : HookName.EffectHook; - return {name, hIndex, value: (state as Effect).effect}; + return { name, hIndex, value: (state as Effect).effect }; } else if (isCallbackHook(state)) { - return {name: HookName.CallbackHook, hIndex, value: (state as CallBack).func}; + return { name: HookName.CallbackHook, hIndex, value: (state as CallBack).func }; } else if (isMemoHook(state)) { - return {name: HookName.MemoHook, hIndex, value: (state as Memo).result}; + return { name: HookName.MemoHook, hIndex, value: (state as Memo).result }; } return null; }, @@ -70,7 +70,7 @@ export const helper = { } }, getComponentInfo: (vNode: VNode) => { - const {props, state, hooks} = vNode; + const { props, state, hooks } = vNode; const info: any = {}; if (props && Object.keys(props).length !== 0) { info['Props'] = props; @@ -98,7 +98,11 @@ export const helper = { return true; } return false; - }, null, vNode, null); + }, + null, + vNode, + null + ); return info; }, getElementTag: (element: JSXElement) => { From 84f44231191634f7a8cb9686917754702a2081fc Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 8 Aug 2022 11:55:07 +0800 Subject: [PATCH 09/10] Match-id-3ae3d1647a5989cce8781b3c89facc876a1b71a3 --- libs/horizon/src/external/ChildrenUtil.ts | 2 +- libs/horizon/src/external/JSXElement.ts | 6 +++--- libs/horizon/src/renderer/Types.ts | 2 +- libs/horizon/src/renderer/vnode/VNodeCreator.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/libs/horizon/src/external/ChildrenUtil.ts b/libs/horizon/src/external/ChildrenUtil.ts index bb5b51c2..b034107a 100644 --- a/libs/horizon/src/external/ChildrenUtil.ts +++ b/libs/horizon/src/external/ChildrenUtil.ts @@ -70,7 +70,7 @@ function callMapFun(children: any, arr: Array, prefix: string, callback: Fu mappedChild.ref, mappedChild.belongClassVNode, mappedChild.props, - mappedChild._source + mappedChild.src ); } arr.push(mappedChild); diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index 6b108461..e842d417 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -27,7 +27,7 @@ export function JSXElement(type, key, ref, vNode, props, source: Source | null) } function isValidKey(key) { - const keyArray = ['key', 'ref', '__source', '__self']; + const keyArray = ['key', 'ref', '__source']; return !keyArray.includes(key); } @@ -41,8 +41,8 @@ function mergeDefault(sourceObj, defaultObj) { 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 = (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.belongClassVNode : getProcessingClassVNode(); diff --git a/libs/horizon/src/renderer/Types.ts b/libs/horizon/src/renderer/Types.ts index c79a81c9..45f76fa9 100644 --- a/libs/horizon/src/renderer/Types.ts +++ b/libs/horizon/src/renderer/Types.ts @@ -12,7 +12,7 @@ export type UseContextHookType = { useContext(context: ContextType): T }; export type JSXElement = { vtype: any; - _source: any; + src: any; type: any; key: any; ref: any; diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index 88ee2928..79496323 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -185,12 +185,12 @@ export function createVNode(tag: VNodeTag | string, ...secondArg) { } export function createVNodeFromElement(element: JSXElement): VNode { - const { type, key, props, _source } = element; + const { type, key, props, src } = element; if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) { return createFragmentVNode(key, props.children); } else { - return createUndeterminedVNode(type, key, props, _source); + return createUndeterminedVNode(type, key, props, src); } } From 2a11f59de8099eca668074aca38b4fec608c766f Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 8 Aug 2022 14:25:18 +0800 Subject: [PATCH 10/10] Match-id-1736f139f9f6279b195bc5959b5a5698e57ede44 --- libs/horizon/src/external/JSXElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/horizon/src/external/JSXElement.ts b/libs/horizon/src/external/JSXElement.ts index e842d417..f44219ee 100644 --- a/libs/horizon/src/external/JSXElement.ts +++ b/libs/horizon/src/external/JSXElement.ts @@ -13,7 +13,7 @@ export function JSXElement(type, key, ref, vNode, props, source: Source | null) return { // 元素标识符 vtype: TYPE_COMMON_ELEMENT, - _source: isDev ? source : null, + src: isDev ? source : null, // 属于元素的内置属性 type: type,