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",