Match-id-a177994d0b3fe27dac34cee64bf01b1ba92b9310

2022-08-03 18:14:30 +08:00 · 2022-08-03 18:14:30 +08:00 · eec4863d61
parent e31ed399de
commit eec4863d61
8 changed files with 62 additions and 99 deletions
--- 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<any>,
-  prefix: string,
-  callback?: Function,
-): number | void {
+function mapChildrenToArray(children: any, arr: Array<any>, 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<any>,
-  prefix: string,
-  callback: Function,
-) {
+function processArrayChildren(children: any, arr: Array<any>, 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<any>,
-  prefix: string,
-  callback: Function,
-) {
+function callMapFun(children: any, arr: Array<any>, 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<any> {
+function mapChildren(children: any, func: Function, context?: any): Array<any> {
  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 };
--- 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编译时调用
--- 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<any> => Object.prototype.hasOwnProperty.call(state, 'current');
@ -28,23 +28,23 @@ export const helper = {
  },
  // 获取 hook 名，hIndex值和存储的值
  getHookInfo: (hook: Hook<any, any>) => {
-    const { hIndex, state } = hook;
+    const {hIndex, state} = hook;
    if ((state as Reducer<any, any>).trigger) {
      if ((state as Reducer<any, any>).isUseState) {
-        return { name: HookName.StateHook, hIndex, value: (state as Reducer<any, any>).stateValue };
+        return {name: HookName.StateHook, hIndex, value: (state as Reducer<any, any>).stateValue};
      } else if ((state as Reducer<any, any>).reducer) {
-        return { name: HookName.ReducerHook, hIndex, value: (state as Reducer<any, any>).stateValue };
+        return {name: HookName.ReducerHook, hIndex, value: (state as Reducer<any, any>).stateValue};
      }
    } else if (isRefHook(state)) {
-      return { name: HookName.RefHook, hIndex, value: (state as Ref<any>).current };
+      return {name: HookName.RefHook, hIndex, value: (state as Ref<any>).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<any>).func };
+      return {name: HookName.CallbackHook, hIndex, value: (state as CallBack<any>).func};
    } else if (isMemoHook(state)) {
-      return { name: HookName.MemoHook, hIndex, value: (state as Memo<any>).result };
+      return {name: HookName.MemoHook, hIndex, value: (state as Memo<any>).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) => {
--- a/libs/horizon/src/renderer/Types.ts
+++ b/libs/horizon/src/renderer/Types.ts
@ -27,8 +27,8 @@ export type ProviderType<T> = {

 export type ContextType<T> = {
  vtype: number;
-  Consumer: ContextType<T>;
-  Provider: ProviderType<T>;
+  Consumer: ContextType<T> | null;
+  Provider: ProviderType<T> | null;
  value: T;
 };

--- 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;
--- 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<VNode> | null; // 保存要更新的节点
-  delegatedEvents: Set<string>
-  delegatedNativeEvents: Set<string>
+  delegatedEvents: Set<string>;
+  delegatedNativeEvents: Set<string>;

  belongClassVNode: VNode | null = null; // 记录JSXElement所属class vNode，处理ref的时候使用

@ -86,7 +86,7 @@ export class VNode {
  isStoreChange: boolean;
  observers: Set<any> | 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;
--- 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;
 }

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