From 5df4b3fb62ff9701e7fa9d3a4f8d9f32df28d013 Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 11 Jul 2022 11:26:59 +0800 Subject: [PATCH 1/6] Match-id-d53acc1317e8127872f29d9c62bc92f5407f609c --- scripts/__tests__/jest/testUtils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/__tests__/jest/testUtils.js b/scripts/__tests__/jest/testUtils.js index 6d4b7ac2..65cea65e 100755 --- a/scripts/__tests__/jest/testUtils.js +++ b/scripts/__tests__/jest/testUtils.js @@ -1,4 +1,4 @@ -import { allDelegatedNativeEvents } from '../../../libs/horizon/src/event/EventCollection'; +import { allDelegatedNativeEvents } from '@cloudsop/horizon/src/event/EventHub'; //import * as LogUtils from './logUtils'; export const stopBubbleOrCapture = (e, value) => { @@ -107,4 +107,4 @@ export function getLogUtils() { logger = new LogUtils(); } return logger; -} \ No newline at end of file +} From a6b693fd47e753d5135a58e1d579612227099806 Mon Sep 17 00:00:00 2001 From: * <8> Date: Fri, 15 Jul 2022 18:03:33 +0800 Subject: [PATCH 2/6] Match-id-8985a188b9e706d98196d5e0aee46b3f475aa68f --- libs/horizon/src/external/devtools.ts | 35 +++++++++++++------ libs/horizon/src/renderer/hooks/HookType.ts | 4 +-- .../src/renderer/vnode/VNodeCreator.ts | 25 +++++++++++++ 3 files changed, 51 insertions(+), 13 deletions(-) diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index 10e70e80..1bc367ba 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,27 +1,37 @@ import { travelVNodeTree } from '../renderer/vnode/VNodeUtils'; -import { Hook, Reducer, Ref } from '../renderer/hooks/HookType'; +import { Hook, Reducer, Ref, Effect, CallBack } 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'; + +const isEffectHook = (state: any): state is Effect => !!state.effect; +const isRefHook = (state: any): state is Ref => state.hasOwnProperty('current'); +const isCallbackHook = (state: any): state is CallBack => state.func !== undefined; export const helper = { - travelVNodeTree: (rootVNode, fun) => { - travelVNodeTree(rootVNode, fun, null, rootVNode, null); + travelVNodeTree: (rootVNode, fun, childFilter: ((node: VNode) => boolean) | null = null) => { + travelVNodeTree(rootVNode, fun, childFilter, rootVNode, null); }, // 获取 hook 名，hIndex值和存储的值 - // 目前只处理 useState和useRef - getHookInfo:(hook: Hook) => { + getHookInfo: (hook: Hook) => { const { hIndex, state } = hook; if ((state as Reducer).trigger) { if ((state as Reducer).isUseState) { - return {name: 'state', hIndex, value: (state as Reducer).stateValue}; + return { name: 'State', hIndex, value: (state as Reducer).stateValue }; } - } else if ((state as Ref).current) { - return {name: 'ref', hIndex, value: (state as Ref).current}; + } else if (isRefHook(state)) { + return { name: 'Ref', hIndex, value: (state as Ref).current }; + } else if (isEffectHook(state)) { + const name = state.effectConstant == 2 ? 'LayoutEffect' : 'Effect'; + return { name, hIndex, value: (state as Effect).effect }; + } else if (isCallbackHook(state)) { + return { name:'Callback', hIndex, value: (state as CallBack).func }; } return null; }, - updateProps: (vNode: VNode, props: any) =>{ + updateProps: (vNode: VNode, props: any) => { vNode.devProps = props; launchUpdateFromVNode(vNode); }, @@ -44,7 +54,7 @@ export const helper = { }, getComponentInfo: (vNode: VNode) => { const { props, state, hooks } = vNode; - const info:any = {}; + const info: any = {}; if (props && Object.keys(props).length !== 0) { info['Props'] = props; } @@ -53,7 +63,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); @@ -72,6 +82,9 @@ export const helper = { }, null, vNode, null); return info; }, + getElementTag: (element: JSXElement) => { + return getElementTag(element); + } }; export function injectUpdater() { diff --git a/libs/horizon/src/renderer/hooks/HookType.ts b/libs/horizon/src/renderer/hooks/HookType.ts index e965fdf1..dce9e1c8 100644 --- a/libs/horizon/src/renderer/hooks/HookType.ts +++ b/libs/horizon/src/renderer/hooks/HookType.ts @@ -1,5 +1,5 @@ import {EffectConstant} from './EffectConstant'; - +type ValueOf = T[keyof T]; export interface Hook { state: Reducer | Effect | Memo | CallBack | Ref; hIndex: number; @@ -25,7 +25,7 @@ export type Effect = { effect: () => (() => void) | void; removeEffect: (() => void) | void; dependencies: Array | null; - effectConstant: typeof EffectConstant; + effectConstant: ValueOf; }; export type Memo = { diff --git a/libs/horizon/src/renderer/vnode/VNodeCreator.ts b/libs/horizon/src/renderer/vnode/VNodeCreator.ts index 8b7ad630..c5b4c306 100644 --- a/libs/horizon/src/renderer/vnode/VNodeCreator.ts +++ b/libs/horizon/src/renderer/vnode/VNodeCreator.ts @@ -132,6 +132,31 @@ export function createUndeterminedVNode(type, key, props) { return vNode; } +export function getElementTag(element: JSXElement): string { + const type = element.type; + + if (type === TYPE_STRICT_MODE || type === TYPE_FRAGMENT || type === TYPE_PROFILER) { + return Fragment; + } else { + let vNodeTag = FunctionComponent; + const componentType = typeof type; + + if (componentType === 'function') { + if (isClassComponent(type)) { + vNodeTag = ClassComponent; + } + } else if (componentType === 'string') { + vNodeTag = DomComponent; + } else if (type === TYPE_SUSPENSE) { + vNodeTag = SuspenseComponent; + } else if (componentType === 'object' && type !== null && typeMap[type.vtype]) { + vNodeTag = typeMap[type.vtype]; + } + + return vNodeTag; + } +} + export function createTreeRootVNode(container) { const vNode = newVirtualNode(TreeRoot, null, null, container); vNode.path = '0'; From cdf14b10585f1ccc2b737dabfd8f95d8d74b8273 Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 18 Jul 2022 10:43:45 +0800 Subject: [PATCH 3/6] Match-id-0840625f84229082e5edeac1860a9ae029b8b159 --- libs/horizon/src/external/devtools.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index 1bc367ba..959911d6 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,5 +1,5 @@ import { travelVNodeTree } from '../renderer/vnode/VNodeUtils'; -import { Hook, Reducer, Ref, Effect, CallBack } 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'; @@ -7,8 +7,9 @@ import { getElementTag } from '../renderer/vnode/VNodeCreator'; import { JSXElement } from '../renderer/Types'; const isEffectHook = (state: any): state is Effect => !!state.effect; -const isRefHook = (state: any): state is Ref => state.hasOwnProperty('current'); +const isRefHook = (state: any): state is Ref => Object.prototype.hasOwnProperty.call(state, 'current'); const isCallbackHook = (state: any): state is CallBack => state.func !== undefined; +const isMemokHook = (state: any): state is Memo => Object.prototype.hasOwnProperty.call(state, 'result'); export const helper = { travelVNodeTree: (rootVNode, fun, childFilter: ((node: VNode) => boolean) | null = null) => { @@ -20,6 +21,8 @@ export const helper = { if ((state as Reducer).trigger) { if ((state as Reducer).isUseState) { return { name: 'State', hIndex, value: (state as Reducer).stateValue }; + } else if ((state as Reducer).reducer) { + return { name: 'Reducer', hIndex, value: (state as Reducer).stateValue }; } } else if (isRefHook(state)) { return { name: 'Ref', hIndex, value: (state as Ref).current }; @@ -28,6 +31,8 @@ export const helper = { return { name, hIndex, value: (state as Effect).effect }; } else if (isCallbackHook(state)) { return { name:'Callback', hIndex, value: (state as CallBack).func }; + } else if (isMemokHook(state)) { + return { name:'Memo', hIndex, value: (state as Memo).result }; } return null; }, From d7668884eeeb29e6d5023363fc78ad56c0170f0b Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 18 Jul 2022 10:59:41 +0800 Subject: [PATCH 4/6] Match-id-3a475e6cc9b1a4c29798c56e1516329740412265 --- libs/horizon/src/external/devtools.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index 959911d6..5e939960 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,5 +1,12 @@ 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'; From 0110fac93153b7f053448289c61392fc287e6093 Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 18 Jul 2022 11:03:34 +0800 Subject: [PATCH 5/6] Match-id-c6815e1f47eca5f588e4a488e40e54d34e800585 --- libs/horizon/src/external/devtools.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index 5e939960..b5aea7e6 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -16,7 +16,7 @@ import { JSXElement } from '../renderer/Types'; const isEffectHook = (state: any): state is Effect => !!state.effect; const isRefHook = (state: any): state is Ref => Object.prototype.hasOwnProperty.call(state, 'current'); const isCallbackHook = (state: any): state is CallBack => state.func !== undefined; -const isMemokHook = (state: any): state is Memo => Object.prototype.hasOwnProperty.call(state, 'result'); +const isMemoHook = (state: any): state is Memo => Object.prototype.hasOwnProperty.call(state, 'result'); export const helper = { travelVNodeTree: (rootVNode, fun, childFilter: ((node: VNode) => boolean) | null = null) => { @@ -38,7 +38,7 @@ export const helper = { return { name, hIndex, value: (state as Effect).effect }; } else if (isCallbackHook(state)) { return { name:'Callback', hIndex, value: (state as CallBack).func }; - } else if (isMemokHook(state)) { + } else if (isMemoHook(state)) { return { name:'Memo', hIndex, value: (state as Memo).result }; } return null; From f7cf6529702d7c92f0f46424956ac44cace5cd04 Mon Sep 17 00:00:00 2001 From: * <8> Date: Mon, 18 Jul 2022 14:56:20 +0800 Subject: [PATCH 6/6] Match-id-b56ce63dc42ee751d8573c2416409a00a58cdcc5 --- libs/horizon/src/external/devtools.ts | 29 ++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/libs/horizon/src/external/devtools.ts b/libs/horizon/src/external/devtools.ts index b5aea7e6..e1edf1ff 100644 --- a/libs/horizon/src/external/devtools.ts +++ b/libs/horizon/src/external/devtools.ts @@ -1,6 +1,6 @@ import { travelVNodeTree } from '../renderer/vnode/VNodeUtils'; -import { - Hook, +import { + Hook, Reducer, Ref, Effect, @@ -12,12 +12,23 @@ 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'); -const isCallbackHook = (state: any): state is CallBack => state.func !== undefined; +const isCallbackHook = (state: any): state is CallBack => Object.prototype.hasOwnProperty.call(state, 'func'); const isMemoHook = (state: any): state is Memo => Object.prototype.hasOwnProperty.call(state, 'result'); +const HookName = { + StateHook: 'State', + EffectHook: 'Effect', + LayoutEffectHook: 'LayoutEffect', + MemoHook: 'Memo', + RefHook: 'Ref', + ReducerHook: 'Reducer', + CallbackHook: 'Callback' +}; + export const helper = { travelVNodeTree: (rootVNode, fun, childFilter: ((node: VNode) => boolean) | null = null) => { travelVNodeTree(rootVNode, fun, childFilter, rootVNode, null); @@ -27,19 +38,19 @@ export const helper = { const { hIndex, state } = hook; if ((state as Reducer).trigger) { if ((state as Reducer).isUseState) { - return { name: 'State', hIndex, value: (state as Reducer).stateValue }; + return { name: HookName.StateHook, hIndex, value: (state as Reducer).stateValue }; } else if ((state as Reducer).reducer) { - return { name: 'Reducer', hIndex, value: (state as Reducer).stateValue }; + return { name: HookName.ReducerHook, hIndex, value: (state as Reducer).stateValue }; } } else if (isRefHook(state)) { - return { name: 'Ref', hIndex, value: (state as Ref).current }; + return { name: HookName.RefHook, hIndex, value: (state as Ref).current }; } else if (isEffectHook(state)) { - const name = state.effectConstant == 2 ? 'LayoutEffect' : 'Effect'; + const name = state.effectConstant == EffectConstant.LayoutEffect ? HookName.LayoutEffectHook : HookName.EffectHook; return { name, hIndex, value: (state as Effect).effect }; } else if (isCallbackHook(state)) { - return { name:'Callback', hIndex, value: (state as CallBack).func }; + return { name: HookName.CallbackHook, hIndex, value: (state as CallBack).func }; } else if (isMemoHook(state)) { - return { name:'Memo', hIndex, value: (state as Memo).result }; + return { name: HookName.MemoHook, hIndex, value: (state as Memo).result }; } return null; },