" to devtoolsBackground.html (or whatever name you have chosen for your devtools). (example)
-1. Now you can use the Console tab to play with the chrome.devtools API.
-
-## 全局变量注入
-通过content_scripts在document初始化时给页面添加script脚本，在新添加的脚本中给window注入全局变量
-
-## 通信方式：
-```mermaid
-sequenceDiagram
- participant web_page
- participant script_content
- participant background
- participant panel
-
- Note over web_page: window.postMessage
- web_page ->> script_content : data
- Note over script_content: window.addEventListener
- Note over script_content: chrome.runtime.sendMessage
- script_content ->> background : data
- Note over background: chrome.runtime.onMessage
- Note over background: port.postMessage
- background ->> panel : data
- Note over panel: connection.onMessage.addListener
- Note over panel: connection.postMessage
- panel ->> background : data
- Note over background: port.onMessage.addListener
- Note over background: chrome.tabs.sendMessage
- background ->> script_content : data
- Note over script_content: chrome.runtime.onMessage
- Note over script_content: window.postMessage
- script_content ->> web_page : data
- Note over web_page: window.addEventListener
-```
-
-## 传输数据结构
-**限制：chrome.runtime.sendMessage只能传递 JSON-serializable 数据**
-
-
-```ts
-type passData = {
- type: 'HORIZON_DEV_TOOLS',
- payload: {
- type: string,
- data: any,
- },
- from: string,
-}
-```
-
-## horizon和devTools的主要交互
-- App初始渲染
-- App更新
-- App销毁
-- 整个页面刷新
-- devTools触发组件属性更新
-
-
-## 对组件的操作
-我们希望插件和Horizon能够尽量解耦，所以Horizon提供了Helper注入给插件，提供相关方法操作组件。
-
-## 触发组件更新方式
-- 类组件的state：调用实例的 setState 函数触发更新
-- 类组件的props：浅复制props后更新props值并调用 forceUpdate 触发更新
-- 函数组件的props：新增了devProps属性，在特定时刻重新给props赋值，触发更新
-- 函数组件的state：调用 useState 函数触发更新
-
-## VNode的清理
-全局 hook 中保存了root VNode，在解析 VNode 树的时候也会保存 VNode 的引用，在清理VNode的时候这些 VNode 的引用也需要删除。
-
-## 数据压缩
-渲染组件树需要知道组件名和层次信息，如果把整个vNode树传递过来，传递对象太大，最好将数据进行压缩然后传递。
-- 相同的组件名可以进行压缩
-- 每个vNode有唯一的 path 属性，可以作为标识使用
-- 通过解析 path 值可以分析出组件树的结构
-
-## 组件props/state/hook等数据的传输和解析
-将数据格式进行转换后进行传递。对于 props 和 类组件的 state，他们都是对象，可以将对象进行解析然后以 k-v 的形式，树的结构显示。函数组件的 Hooks 是以数组的形式存储在 vNode 的属性中的，每个 hook 的唯一标识符是 hIndex 属性值，在对象展示的时候不能展示该属性值，需要根据 hook 类型展示一个 state/ref/effect 等值。hook 中存储的值也可能不是对象，只是一个简单的字符串或者 dom 元素，他们的解析和 props/state 的解析同样存在差异，需要单独处理。
-
-
-## 滚动动态渲染 Tree
-考虑到组件树可能很大，所以并不适合一次性全部渲染出来，可以通过滚动渲染的方式减少页面 dom 的数量。我们可以把树看成有不同缩进长度的列表，动态渲染滚动列表的实现可以参考谷歌的这篇文章：https://developers.google.com/web/updates/2016/07/infinite-scroller 这样，我们需要的组件树数据可以由树结构转变为数组，可以减少动态渲染时对树结构进行解析时的计算工作。
-
-## 虚拟列表针对 UI 框架的优化
-列表中增减不同 key 项意味着 dom 增删，我们需要让框架尽可能减少 dom 操作。
-- 不管渲染列表项怎么变化，应该始终以 index 作为 key，这样只会更新 dom 的属性，不会有 dom 增删操作。
-- 如果在滚动过程中，一个 item 没有被移出渲染列表，它在列表中的 key 值不应该发生变化，由于 item 本身的数据没有变化，所以渲染的 children 也不会发生变化。结合上条的结论，它的属性值也不会变化，所以该 item 对应的 dom 都不会更新。
-
-## 开发者页面打开场景
-- 先有页面，然后打开开发者工具：工具建立连接，发送通知，页面hook收到后发送VNode树信息给工具页面
-- 已经打开开发者工具，然后打开页面：业务页面渲染完毕，发送VNode树信息给工具页面
-
-## 开发者工具页面响应组件树变更
-组件树变更会带来新旧两个组件树信息数组，新旧数组存在数据一致而引用不一致的情况，而VTree和VList组件中相关信息的计算依赖引用而非数据本身，在收到新的组件树信息后需要对数据本身进行判断，将新数组中的相同数据使用旧对象代替。
-
-## 测试框架
-jest测试框架不提供浏览器插件的相关 api，我们在封装好相关 api 后需要模拟这些 api 的行为从而展开测试工作。
-
diff --git a/libs/extension/src/background/index.ts b/libs/extension/src/background/index.ts
deleted file mode 100644
index 01e455f8..00000000
--- a/libs/extension/src/background/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { checkMessage, packagePayload, changeSource } from '../utils/transferTool';
-import { RequestAllVNodeTreeInfos, InitDevToolPageConnection, DevToolBackground } from '../utils/constants';
-import { DevToolPanel, DevToolContentScript } from '../utils/constants';
-
-// 多个页面、tab页共享一个 background，需要建立连接池，给每个tab建立连接
-const connections = {};
-
-// panel 代码中调用 let backgroundPageConnection = chrome.runtime.connect({...}) 会触发回调函数
-chrome.runtime.onConnect.addListener(function (port) {
- function extensionListener(message) {
- const isHorizonMessage = checkMessage(message, DevToolPanel);
- if (isHorizonMessage) {
- const { payload } = message;
- // tabId 值指当前浏览器分配给 web_page 的 id 值。是panel页面查询得到，指定向该页面发送消息
- const { type, data, tabId } = payload;
- let passMessage;
- if (type === InitDevToolPageConnection) {
- // 记录 panel 所在 tab 页的tabId，如果已经记录了，覆盖原有port，因为原有port可能关闭了
- // 可能这次是 panel 发起的重新建立请求
- connections[tabId] = port;
- passMessage = packagePayload({ type: RequestAllVNodeTreeInfos }, DevToolBackground);
- } else {
- passMessage = packagePayload({type, data}, DevToolBackground);
- }
- chrome.tabs.sendMessage(tabId, passMessage);
- }
- }
- // Listen to messages sent from the DevTools page
- port.onMessage.addListener(extensionListener);
-
- port.onDisconnect.addListener(function (port) {
- port.onMessage.removeListener(extensionListener);
-
- const tabs = Object.keys(connections);
- for (let i = 0, len = tabs.length; i < len; i++) {
- if (connections[tabs[i]] == port) {
- delete connections[tabs[i]];
- break;
- }
- }
- });
-});
-
-// 监听来自 content script 的消息，并将消息发送给对应的 devTools page，也就是 panel
-chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
- // Messages from content scripts should have sender.tab set
- if (sender.tab) {
- const tabId = sender.tab.id;
- // 和 InitDevToolPageConnection 时得到的 tabId 值一致时，向指定的 panel 页面 port 发送消息
- if (tabId in connections && checkMessage(message, DevToolContentScript)) {
- changeSource(message, DevToolBackground);
- connections[tabId].postMessage(message);
- } else {
- // TODO: 如果查询失败，发送 chrome message，请求 panel 主动建立连接
- console.log('Tab not found in connection list.');
- }
- } else {
- console.log('sender.tab not defined.');
- }
- // 需要返回消息告知完成通知，否则会出现报错 message port closed before a response was received
- sendResponse({status: 'ok'});
-});
diff --git a/libs/extension/src/components/ComponentInfo.tsx b/libs/extension/src/components/ComponentInfo.tsx
deleted file mode 100644
index 844da1ba..00000000
--- a/libs/extension/src/components/ComponentInfo.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import styles from './ComponentsInfo.less';
-import Eye from '../svgs/Eye';
-import Debug from '../svgs/Debug';
-import Triangle from '../svgs/Triangle';
-import { useState, useEffect } from 'horizon';
-import { IData } from './VTree';
-import { buildAttrModifyData, IAttr } from '../parser/parseAttr';
-import { postMessageToBackground } from '../panelConnection';
-import { InspectDom, LogComponentData, ModifyAttrs } from '../utils/constants';
-
-type IComponentInfo = {
- name: string;
- attrs: {
- parsedProps?: IAttr[],
- parsedState?: IAttr[],
- parsedHooks?: IAttr[],
- };
- parents: IData[];
- id: number;
- onClickParent: (item: IData) => void;
-};
-
-function collapseAllNodes(attrs: IAttr[]) {
- return attrs.filter((item, index) => {
- const nextItem = attrs[index + 1];
- return nextItem ? nextItem.indentation - item.indentation > 0 : false;
- });
-}
-
-function ComponentAttr({ attrsName, attrsType, attrs, id }: {
- attrsName: string,
- attrsType: string,
- attrs: IAttr[],
- id: number}) {
- const [collapsedNode, setCollapsedNode] = useState(collapseAllNodes(attrs));
- const [editableAttrs, setEditableAttrs] = useState(attrs);
- useEffect(() => {
- setCollapsedNode(collapseAllNodes(attrs));
- setEditableAttrs(attrs);
- }, [attrs]);
-
- const handleCollapse = (item: IAttr) => {
- const nodes = [...collapsedNode];
- const i = nodes.indexOf(item);
- if (i === -1) {
- nodes.push(item);
- } else {
- nodes.splice(i, 1);
- }
- setCollapsedNode(nodes);
- };
-
- const showAttr = [];
- let currentIndentation = null;
- editableAttrs.forEach((item, index) => {
- const indentation = item.indentation;
- if (currentIndentation !== null) {
- if (indentation > currentIndentation) {
- return;
- } else {
- currentIndentation = null;
- }
- }
- const nextItem = editableAttrs[index + 1];
- const hasChild = nextItem ? nextItem.indentation - item.indentation > 0 : false;
- const isCollapsed = collapsedNode.includes(item);
- showAttr.push(
- handleCollapse(item)}>
- {hasChild && }
- {`${item.name}`}
- {' :'}
- {item.type === 'string' || item.type === 'number' || item.type === 'undefined' || item.type === 'null'
- ? {
- const nextAttrs = [...editableAttrs];
- const nextItem = {...item};
- nextItem.value = event.target.value;
- nextAttrs[index] = nextItem;
- setEditableAttrs(nextAttrs);
- }}
- onKeyUp={(event) => {
- const value = (event.target as HTMLInputElement).value;
- if (event.key === 'Enter') {
- if(isDev) {
- console.log('post attr change', value);
- } else {
- const data = buildAttrModifyData(attrsType,attrs, value,item, index, id);
- postMessageToBackground(ModifyAttrs, data);
- }
- }
- }}
- />
- : (item.type === 'boolean'
- ? {
- const nextAttrs = [...editableAttrs];
- const nextItem = {...item};
- nextItem.value = event.target.checked;
- nextAttrs[index] = nextItem;
- setEditableAttrs(nextAttrs);
- if (!isDev) {
- const data = buildAttrModifyData(attrsType,attrs, nextItem.value,item, index, id);
- postMessageToBackground(ModifyAttrs, data);
- }
- }}/>
- : {item.value}
- )}
-
- );
- if (isCollapsed) {
- currentIndentation = indentation;
- }
- });
-
- return (
-
-
- {attrsName}
-
-
- {showAttr}
-
-
-
- {name && <>
-
- {name}
-
- {
- postMessageToBackground(InspectDom, id);
- }}>
-
-
- {
- postMessageToBackground(LogComponentData, id);
- }}>
-
-
- }
-
-
- {Object.keys(attrs).map(attrsType => {
- const parsedAttrs = attrs[attrsType];
- if (parsedAttrs && parsedAttrs.length !== 0) {
- const attrsName = attrsType.slice(6); // parsedState => State
- return
;
- }
- return null;
- })}
-
- {name &&
- parents: {
- parents.map(item => ())
- }
-
}
-
-
- *
- *
- *
- */
-
-function timeout(fn) {
- return setTimeout(fn, 20);
-}
-
-function requestFrame(fn) {
- const raf = requestAnimationFrame || timeout;
- return raf(fn);
-}
-
-function cancelFrame(id) {
- const cancel = cancelAnimationFrame || clearTimeout;
- cancel(id);
-}
-
-// 在闲置帧触发回调事件，如果在本次触发前存在未处理回调事件，
-// 需要取消未处理的回调事件
-function resizeListener(event) {
- const win = event.target;
- if (win.__resizeRAF__) {
- cancelFrame(win.__resizeRAF__);
- }
- win.__resizeRAF__ = requestFrame(function () {
- const observeElement = win.__observeElement__;
- observeElement.__resizeCallbacks__.forEach(function (fn) {
- fn.call(observeElement, observeElement, event);
- });
- });
-}
-
-function loadObserver() {
- // 将待观测元素传递给 object 标签的 window 对象，这样在触发 resize 事件时可以拿到待观测元素
- this.contentDocument.defaultView.__observeElement__ = this.__observeElement__;
- // 给 html 的 window 对象添加 resize 事件
- this.contentDocument.defaultView.addEventListener('resize', resizeListener);
-}
-
-export function addResizeListener(element: any, fn: any) {
- if (!element.__resizeCallbacks__) {
- element.__resizeCallbacks__ = [fn];
- element.style.position = 'relative';
- const observer = document.createElement('object');
- observer.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
- observer.data = 'about:blank';
- observer.onload = loadObserver;
- observer.type = 'text/html';
- observer['__observeElement__'] = element;
- element.__observer__ = observer;
- element.appendChild(observer);
- } else {
- element.__resizeCallbacks__.push(fn);
- }
-}
-
-export function removeResizeListener(element, fn) {
- element.__resizeCallbacks__.splice(element.__resizeCallbacks__.indexOf(fn), 1);
- if (!element.__resizeCallbacks__.length) {
- element.__observer__.contentDocument.defaultView.removeEventListener('resize', resizeListener);
- element.removeChild(element.__observer__);
- element.__observer__ = null;
- }
-}
diff --git a/libs/extension/src/components/Search.less b/libs/extension/src/components/Search.less
deleted file mode 100644
index 003f8577..00000000
--- a/libs/extension/src/components/Search.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.search {
- width: 100%;
-}
diff --git a/libs/extension/src/components/Search.tsx b/libs/extension/src/components/Search.tsx
deleted file mode 100644
index 1ea264d3..00000000
--- a/libs/extension/src/components/Search.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styles from './Search.less';
-
-interface SearchProps {
- onChange: (event: any) => void,
- value: string,
-}
-
-export default function Search(props: SearchProps) {
- const { onChange, value } = props;
- const handleChange = (event) => {
- onChange(event.target.value);
- };
- return (
-
- );
-}
\ No newline at end of file
diff --git a/libs/extension/src/components/SizeObserver.tsx b/libs/extension/src/components/SizeObserver.tsx
deleted file mode 100644
index 47348bb6..00000000
--- a/libs/extension/src/components/SizeObserver.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect, useState, useRef } from 'horizon';
-import { addResizeListener, removeResizeListener } from './ResizeEvent';
-
-
-export function SizeObserver(props) {
- const { children, ...rest } = props;
- const containerRef = useRef();
- const [size, setSize] = useState<{width: number, height: number}>();
- const notifyChild = (element) => {
- setSize({
- width: element.offsetWidth,
- height: element.offsetHeight,
- });
- };
- useEffect(() => {
- const element = containerRef.current;
- setSize({
- width: element.offsetWidth,
- height: element.offsetHeight,
- });
- addResizeListener(element, notifyChild);
- return () => {
- removeResizeListener(element, notifyChild);
- };
- }, []);
- const myChild = size ? children(size.width, size.height) : null;
-
- return (
-
- {myChild}
-
- );
-}
\ No newline at end of file
diff --git a/libs/extension/src/components/VList/ItemMap.ts b/libs/extension/src/components/VList/ItemMap.ts
deleted file mode 100644
index fde33342..00000000
--- a/libs/extension/src/components/VList/ItemMap.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-// 用于在滚动的过程中，对比上一次渲染的结果和本次需要渲染项
-// 确保继续渲染项在新渲染数组中的位置和旧渲染数组中的位置不发生改变
-
-export default class ItemMap{
-
- // 不要用 indexOf 进行位置计算，它会遍历数组
- private lastRenderItemToIndexMap: Map;
-
- constructor(){
- this.lastRenderItemToIndexMap = new Map();
- }
-
- public calculateReSortedItems(nextItems: T[]): (T|undefined)[] {
- if (this.lastRenderItemToIndexMap.size === 0) {
- nextItems.forEach((item, index) => {
- this.lastRenderItemToIndexMap.set(item, index);
- });
- return nextItems;
- }
- const nextRenderItems: T[] = [];
- const length = nextItems.length;
- const nextRenderItemToIndexMap = new Map();
- const addItems = [];
- // 遍历 nextItems 找到复用 item 和 新增 item
- nextItems.forEach(item => {
- const lastIndex = this.lastRenderItemToIndexMap.get(item);
- // 处理旧 item
- if (lastIndex !== undefined) {
- // 使用上一次的位置
- nextRenderItems[lastIndex] = item;
- // 记录位置
- nextRenderItemToIndexMap.set(item, lastIndex);
- } else {
- // 记录新增的 item
- addItems.push(item);
- }
- });
-
- // 处理新增 item
- // 翻转数组，后面在调用pop时拿到的是最后一个，以确保顺序
- addItems.reverse();
- for(let i = 0; i < length; i++) {
- // 优先将新增 item 放置在空位置上
- if (!nextRenderItems[i]) {
- const item = addItems.pop();
- nextRenderItems[i] = item;
- nextRenderItemToIndexMap.set(item, i);
- }
- }
- // 剩余新 item 补在数组后面
- for(let i = addItems.length - 1; i >= 0; i--) {
- const item = addItems[i];
- nextRenderItemToIndexMap.set(item, nextRenderItems.length);
- nextRenderItems.push(item);
- }
- // 如果 nextRenderItems 中存在空 index， nextItems 已经耗尽，不用处理
- // 确保新旧数组中 item 的 index 值不会发生变化
- this.lastRenderItemToIndexMap = nextRenderItemToIndexMap;
- return nextRenderItems;
- }
-
-}
\ No newline at end of file
diff --git a/libs/extension/src/components/VList/VList.less b/libs/extension/src/components/VList/VList.less
deleted file mode 100644
index 8c14e471..00000000
--- a/libs/extension/src/components/VList/VList.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
- position: relative;
- overflow-y: auto;
- height: 100%;
- width: 100%;
-}
-
-.item {
- position: absolute;
- width: 100%;
-}
\ No newline at end of file
diff --git a/libs/extension/src/components/VList/VList.tsx b/libs/extension/src/components/VList/VList.tsx
deleted file mode 100644
index edf4b16b..00000000
--- a/libs/extension/src/components/VList/VList.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// 内部只记录滚动位置状态值
-// data 数组更新后不修改滚动位置，
-// 只有修改scrollToItem才会修改滚动位置
-
-import { useState, useRef, useEffect, useMemo } from 'horizon';
-import styles from './VList.less';
-import ItemMap from './ItemMap';
-
-interface IProps {
- data: T[],
- width: number, // 暂时未用到，当需要支持横向滚动时使用
- height: number, // VList 的高度
- children: any, // horizon 组件，组件类型是 T
- itemHeight: number,
- scrollToItem?: T, // 滚动到指定项位置，如果该项在可见区域内，不滚动，如果不在，则滚动到中间位置
- onRendered: (renderInfo: renderInfoType) => void;
- filter?(data: T): boolean, // false 表示该行不显示
-}
-
-export type renderInfoType = {
- visibleItems: T[];
-};
-
-function parseTranslate(data: T[], itemHeight: number) {
- const map = new Map();
- data.forEach((item, index) => {
- map.set(item, index * itemHeight);
- });
- return map;
-}
-
-export function VList(props: IProps) {
- const {
- data,
- height,
- children,
- itemHeight,
- scrollToItem,
- onRendered,
- } = props;
- const [scrollTop, setScrollTop] = useState(Math.max(data.indexOf(scrollToItem), 0) * itemHeight);
- const renderInfoRef: { current: renderInfoType } = useRef({
- visibleItems: [],
- });
- // 每个 item 的 translateY 值固定不变
- const itemToTranslateYMap = useMemo(() => parseTranslate(data, itemHeight), [data]);
- const itemIndexMap = useMemo(() => new ItemMap(), []);
- const containerRef = useRef();
- useEffect(() => {
- onRendered(renderInfoRef.current);
- });
-
- useEffect(() => {
- if (scrollToItem) {
- const renderInfo = renderInfoRef.current;
- // 在显示区域，不滚动
- if (!renderInfo.visibleItems.includes(scrollToItem)) {
- const index = data.indexOf(scrollToItem);
- // 显示在页面中间
- const top = Math.max(index * itemHeight - height / 2, 0);
- containerRef.current.scrollTo({ top: top });
- }
- }
- }, [scrollToItem]);
-
- // 滚动事件会频繁触发，通过框架提供的代理会有大量计算寻找 dom 元素。
- // 直接绑定到原生事件上减少计算量
- useEffect(() => {
- const handleScroll = (event: any) => {
- const scrollTop = event.target.scrollTop;
- setScrollTop(scrollTop);
- };
- const container = containerRef.current;
- container.addEventListener('scroll', handleScroll);
- return () => {
- container.removeEventListener('scroll', handleScroll);
- };
- }, []);
-
- const totalHeight = itemHeight * data.length;
- const maxIndex = data.length; // slice 截取渲染 item 数组时最大位置不能超过自身长度
- // 第一个可见 item index
- const firstInViewItemIndex = Math.floor(scrollTop / itemHeight);
- // 可见区域前最多冗余 4 个 item
- const startRenderIndex = Math.max(firstInViewItemIndex - 4, 0); // index 不能小于0
- // 最多可见数量
- const maxInViewCount = Math.floor(height / itemHeight);
- // 最后可见item index
- const lastInViewIndex = Math.min(firstInViewItemIndex + maxInViewCount, maxIndex);
- // 记录可见 items
- renderInfoRef.current.visibleItems = data.slice(firstInViewItemIndex, lastInViewIndex);
- // 可见区域后冗余 4 个 item
- const lastRenderIndex = Math.min(lastInViewIndex + 4, maxIndex);
- // 需要渲染的 items
- const renderItems = data.slice(startRenderIndex, lastRenderIndex);
- // 给 items 重新排序，确保未移出渲染数组的 item 在新的渲染数组中位置不变
- // 这样在diff算法比较后，这部分的 dom 不会发生更新
- const nextRenderList = itemIndexMap.calculateReSortedItems(renderItems);
- const list = nextRenderList.map((item, i) => {
- if (!item) {
- return null;
- }
- return (
-
- {children(item)}
-
- );
- });
-
- return (
-
- );
-}
diff --git a/libs/extension/src/components/VList/index.ts b/libs/extension/src/components/VList/index.ts
deleted file mode 100644
index f30db06a..00000000
--- a/libs/extension/src/components/VList/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { VList } from './VList';
-export type { renderInfoType } from './VList';
diff --git a/libs/extension/src/components/VTree.less b/libs/extension/src/components/VTree.less
deleted file mode 100644
index a95f6986..00000000
--- a/libs/extension/src/components/VTree.less
+++ /dev/null
@@ -1,38 +0,0 @@
-@import 'assets.less';
-
-.treeContainer {
- height: 100%;
-
- .treeItem {
- width: 100%;
- position: absolute;
- line-height: 1.125rem;
-
- &:hover {
- background-color: @select-color;
- }
-
- .treeIcon {
- color: @arrow-color;
- display: inline-block;
- width: 12px;
- padding-left: 0.5rem;
- }
-
- .componentName {
- color: @component-name-color;
- }
-
- .componentKeyName {
- color: @component-key-color;
- }
-
- .componentKeyValue {
- color: @componentKeyValue-color;
- }
- }
-
- .select {
- background-color: rgb(141 199 248 / 60%);
- }
-}
diff --git a/libs/extension/src/components/VTree.tsx b/libs/extension/src/components/VTree.tsx
deleted file mode 100644
index a41bcd79..00000000
--- a/libs/extension/src/components/VTree.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { useState, useEffect } from 'horizon';
-import styles from './VTree.less';
-import Triangle from '../svgs/Triangle';
-import { createRegExp } from '../utils/regExpUtils';
-import { SizeObserver } from './SizeObserver';
-import { renderInfoType, VList } from './VList';
-
-export interface IData {
- id: number;
- name: string;
- indentation: number;
- userKey: string;
-}
-
-interface IItem {
- hasChild: boolean,
- onCollapse: (data: IData) => void,
- onClick: (id: IData) => void,
- isCollapsed: boolean,
- isSelect: boolean,
- highlightValue: string,
- data: IData,
-}
-
-const indentationLength = 20;
-
-function Item(props: IItem) {
- const {
- hasChild,
- onCollapse,
- isCollapsed,
- data,
- onClick,
- isSelect,
- highlightValue = '',
- } = props;
-
- const {
- name,
- userKey,
- indentation,
- } = data;
-
- const isShowKey = userKey !== '';
- const showIcon = hasChild ? : '';
- const handleClickCollapse = () => {
- onCollapse(data);
- };
- const handleClick = () => {
- onClick(data);
- };
- const itemAttr: any = { className: styles.treeItem, onClick: handleClick };
- if (isSelect) {
- itemAttr.tabIndex = 0;
- itemAttr.className = styles.treeItem + ' ' + styles.select;
- }
- const reg = createRegExp(highlightValue);
- const heightCharacters = name.match(reg);
- let showName;
- if (heightCharacters) {
- let cutName = name;
- showName = [];
- // 高亮第一次匹配即可
- const char = heightCharacters[0];
- const index = name.search(char);
- const notHighlightStr = cutName.slice(0, index);
- showName.push(notHighlightStr);
- showName.push({char});
- cutName = cutName.slice(index + char.length);
- showName.push(cutName);
- } else {
- showName = name;
- }
- return (
-
-
- {showIcon}
-
-
- {showName}
-
- {isShowKey && (
- <>
-
- {' '}key
-
- {'="'}
-
- {userKey}
-
- {'"'}
-
- )}
-
-
- {this.state.name}
- {this.props?.fruit}
-
- );
- }
-
-}
\ No newline at end of file
diff --git a/libs/extension/src/devtools/mockPage/MockContext.ts b/libs/extension/src/devtools/mockPage/MockContext.ts
deleted file mode 100644
index 68bd8d1e..00000000
--- a/libs/extension/src/devtools/mockPage/MockContext.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'horizon';
-
-export const MockContext = createContext({value: 'default context value'});
diff --git a/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx b/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx
deleted file mode 100644
index 9495cd60..00000000
--- a/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState, useEffect, useRef, useContext, useReducer } from 'horizon';
-import { MockContext } from './MockContext';
-
-const initialState = {count: 0};
-
-function reducer(state, action) {
- switch (action.type) {
- case 'increment':
- return {count: state.count + 1};
- case 'decrement':
- return {count: state.count - 1};
- default:
- throw new Error();
- }
-}
-
-export default function MockFunctionComponent(props) {
- const [state, dispatch] = useReducer(reducer, initialState);
- const [age, setAge] = useState(0);
- const [name, setName] = useState({test: 1});
- const domRef = useRef();
- const objRef = useRef({ str: 'string' });
- const context = useContext(MockContext);
-
- useEffect(() => { }, []);
-
- return (
-
- age: {age}
- name: {name.test}
-
- count: {props.count}
-
-
{objRef.current.str}
-
{context.ctx}
-
-
-
-
-
-
- abc
-
- );
-}
-
-render(, root);
diff --git a/libs/extension/src/devtools/mockPage/mockPage.html b/libs/extension/src/devtools/mockPage/mockPage.html
deleted file mode 100644
index 5e6b02c8..00000000
--- a/libs/extension/src/devtools/mockPage/mockPage.html
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
- Horizon Mock Page
-
-
-
-
-
-
-
-
-
diff --git a/libs/extension/src/hooks/FilterTree.ts b/libs/extension/src/hooks/FilterTree.ts
deleted file mode 100644
index faa789f0..00000000
--- a/libs/extension/src/hooks/FilterTree.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-// 过滤树的抽象逻辑
-// 需要知道渲染了哪些数据，过滤的字符串/正则表达式
-// 控制Tree组件位置跳转，告知匹配结果
-// 清空搜索框，告知搜索框当前是第几个结果，跳转搜索结果
-//
-// 跳转搜索结果的交互逻辑：
-// 如果当前页面存在匹配项，页面不动
-// 如果当前页面不存在匹配项，页面跳转到第一个匹配项位置
-// 如果匹配项被折叠，需要展开其父节点。注意只展开当前匹配项的父节点，其他匹配项的父节点不展开
-// 跳转到上一个匹配项或下一个匹配项时，如果匹配项被折叠，需要展开其父节点
-//
-// 寻找父节点：
-// 找到该节点的缩进值，和index值，在data中向上遍历，通过缩进值判断父节点
-
-import { useState, useRef } from 'horizon';
-import { createRegExp } from '../utils/regExpUtils';
-
-/**
- * 把节点的父节点从收起节点数组中删除，并返回新的收起节点数组
- *
- * @param item 需要展开父节点的节点
- * @param data 全部数据
- * @param collapsedNodes 收起节点数据
- * @returns 新的收起节点数组
- */
-function expandItemParent(item: BaseType, data: BaseType[], collapsedNodes: BaseType[]): BaseType[] {
- const index = data.indexOf(item);
- let currentIndentation = item.indentation;
- // 不对原始数据进行修改
- const newCollapsedNodes = [...collapsedNodes];
- for (let i = index - 1; i >= 0; i--) {
- const lastData = data[i];
- const lastIndentation = lastData.indentation;
- // 缩进更小，找到了父节点
- if (lastIndentation < currentIndentation) {
- // 更新缩进值，只找父节点的父节点，避免修改父节点的兄弟节点的展开状态
- currentIndentation = lastIndentation;
- const cIndex = newCollapsedNodes.indexOf(lastData);
- if (cIndex !== -1) {
- newCollapsedNodes.splice(cIndex, 1);
- }
- }
- }
- return newCollapsedNodes;
-}
-
-type BaseType = {
- id: string,
- name: string,
- indentation: number,
-}
-
-export function FilterTree(props: { data: T[] }) {
- const { data } = props;
- const [filterValue, setFilterValue] = useState('');
- const [currentItem, setCurrentItem] = useState(null); // 当前选中的匹配项
- const showItemsRef = useRef([]); // 页面展示的 items
- const matchItemsRef = useRef([]); // 匹配过滤条件的 items
- const collapsedNodesRef = useRef([]); // 折叠节点，如果匹配 item 被折叠了，需要展开
-
- const matchItems = matchItemsRef.current;
- const collapsedNodes = collapsedNodesRef.current;
-
- const updateCollapsedNodes = (item: BaseType) => {
- const newCollapsedNodes = expandItemParent(item, data, collapsedNodes);
- // 如果新旧收起节点数组长度不一样，说明存在收起节点
- if (newCollapsedNodes.length !== collapsedNodes.length) {
- // 更新引用，确保 VTree 拿到新的 collapsedNodes
- collapsedNodesRef.current = newCollapsedNodes;
- }
- };
-
- const onChangeSearchValue = (search: string) => {
- const reg = createRegExp(search);
- let newCurrentItem = null;
- let newMatchItems = [];
- if (search !== '') {
- const showItems: T[] = showItemsRef.current;
- newMatchItems = data.reduce((pre, current) => {
- const { name } = current;
- if (reg && name.match(reg)) {
- pre.push(current);
- // 如果当前页面显示的 item 存在匹配项，则把它设置为 currentItem
- if (newCurrentItem === null && showItems.includes(current)) {
- newCurrentItem = current;
- }
- }
- return pre;
- }, []);
- if (newMatchItems.length === 0) {
- setCurrentItem(null);
- } else {
- if (newCurrentItem === null) {
- const item = newMatchItems[0];
- // 不处于当前展示页面，需要展开父节点
- updateCollapsedNodes(item);
- setCurrentItem(item);
- } else {
- setCurrentItem(newCurrentItem);
- }
- }
- } else {
- setCurrentItem(null);
- }
- matchItemsRef.current = newMatchItems;
- setFilterValue(search);
- };
- const onSelectNext = () => {
- const index = matchItems.indexOf(currentItem);
- const nextIndex = index + 1;
- const item = nextIndex < matchItemsRef.current.length ? matchItems[nextIndex] : matchItems[0];
- // 可能不处于当前展示页面，需要展开父节点
- updateCollapsedNodes(item);
- setCurrentItem(item);
- };
- const onSelectLast = () => {
- const index = matchItems.indexOf(currentItem);
- const last = index - 1;
- const item = last >= 0 ? matchItems[last] : matchItems[matchItems.length - 1];
- // 可能不处于当前展示页面，需要展开父节点
- updateCollapsedNodes(item);
- setCurrentItem(item);
- };
- const setShowItems = (items) => {
- showItemsRef.current = [...items];
- };
- const onClear = () => {
- onChangeSearchValue('');
- };
- const setCollapsedNodes = (items) => {
- // 不更新引用，避免子组件的重复渲染
- collapsedNodesRef.current.length = 0;
- collapsedNodesRef.current.push(...items);
- };
- return {
- filterValue,
- onChangeSearchValue,
- onClear,
- currentItem,
- matchItems,
- onSelectNext,
- onSelectLast,
- setShowItems,
- collapsedNodes,
- setCollapsedNodes,
- };
-}
diff --git a/libs/extension/src/injector/index.ts b/libs/extension/src/injector/index.ts
deleted file mode 100644
index 73692427..00000000
--- a/libs/extension/src/injector/index.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import parseTreeRoot, { clearVNode, queryVNode } from '../parser/parseVNode';
-import { packagePayload, checkMessage } from '../utils/transferTool';
-import {
- RequestAllVNodeTreeInfos,
- AllVNodeTreesInfos,
- RequestComponentAttrs,
- ComponentAttrs,
- DevToolHook,
- DevToolContentScript,
- ModifyAttrs,
- ModifyHooks,
- ModifyState,
- ModifyProps,
- InspectDom,
- LogComponentData
-} from '../utils/constants';
-import { VNode } from '../../../horizon/src/renderer/vnode/VNode';
-import { parseVNodeAttrs } from '../parser/parseAttr';
-
-const roots = [];
-
-function addIfNotInclude(treeRoot: VNode) {
- if (!roots.includes(treeRoot)) {
- roots.push(treeRoot);
- }
-}
-
-function send() {
- const result = roots.reduce((pre, current) => {
- const info = parseTreeRoot(helper.travelVNodeTree ,current);
- pre.push(info);
- return pre;
- }, []);
- postMessage(AllVNodeTreesInfos, result);
-}
-
-function deleteVNode(vNode: VNode) {
- // 开发工具中保存了 vNode 的引用，在清理 VNode 的时候需要一并删除
- clearVNode(vNode);
- const index = roots.indexOf(vNode);
- if (index !== -1) {
- roots.splice(index, 1);
- }
-}
-
-function postMessage(type: string, data) {
- window.postMessage(packagePayload({
- type: type,
- data: data,
- }, DevToolHook), '*');
-}
-
-function parseCompAttrs(id: number) {
- const vNode = queryVNode(id);
- if (!vNode) {
- console.error('Do not find match vNode, this is a bug, please report us');
- return;
- }
- const parsedAttrs = parseVNodeAttrs(vNode, helper.getHookInfo);
- postMessage(ComponentAttrs, parsedAttrs);
-}
-
-function calculateNextValue(editValue, value, attrPath) {
- let nextState;
- const editValueType = typeof editValue;
- if (editValueType === 'string' || editValueType === 'undefined' || editValueType === 'boolean') {
- nextState = value;
- } else if (editValueType === 'number') {
- const numValue = Number(value);
- nextState = isNaN(numValue) ? value : numValue; // 如果能转为数字，转数字，不能转数字，用原值
- } else if(editValueType === 'object') {
- if (editValue === null) {
- nextState = value;
- } else {
- const newValue = Array.isArray(editValue) ? [...editValue] : {...editValue};
- // 遍历读取到直接指向需要修改值的对象
- let attr = newValue;
- for(let i = 0; i < attrPath.length - 1; i++) {
- attr = attr[attrPath[i]];
- }
- // 修改对象上的值
- attr[attrPath[attrPath.length - 1]] = value;
- nextState = newValue;
- }
- } else {
- console.error('The devTool tried to edit a non-editable value, this is a bug, please report', editValue);
- }
- return nextState;
-}
-
-function modifyVNodeAttrs(data) {
- const {type, id, value, path} = data;
- const vNode = queryVNode(id);
- if (!vNode) {
- console.error('Do not find match vNode, this is a bug, please report us');
- return;
- }
- if (type === ModifyProps) {
- const nextProps = calculateNextValue(vNode.props, value, path);
- helper.updateProps(vNode, nextProps);
- } else if (type === ModifyHooks) {
- const hooks = vNode.hooks;
- const editHook = hooks[path[0]];
- const hookInfo = helper.getHookInfo(editHook);
- if (hookInfo) {
- const editValue = hookInfo.value;
- // path 的第一个值指向 hIndex，从第二个值才开始指向具体属性访问路径
- const nextState = calculateNextValue(editValue, value, path.slice(1));
- helper.updateHooks(vNode, path[0], nextState);
- } else {
- console.error('The devTool tried to edit a non-editable hook, this is a bug, please report', hooks);
- }
- } else if (type === ModifyState) {
- const oldState = vNode.state || {};
- const nextState = {...oldState};
- let accessRef = nextState;
- for(let i = 0; i < path.length - 1; i++) {
- accessRef = accessRef[path[i]];
- }
- accessRef[path[path.length - 1]] = value;
- helper.updateState(vNode, nextState);
- }
-}
-
-function logComponentData(id: number) {
- const vNode = queryVNode(id);
- if (vNode) {
- const info = helper.getComponentInfo(vNode);
- console.log('Component Info: ', info);
- }
-}
-
-let helper;
-
-function init(horizonHelper) {
- helper = horizonHelper;
- window.__HORIZON_DEV_HOOK__.isInit = true;
-}
-
-function injectHook() {
- if (window.__HORIZON_DEV_HOOK__) {
- return;
- }
- Object.defineProperty(window, '__HORIZON_DEV_HOOK__', {
- enumerable: false,
- value: {
- init,
- isInit: false,
- addIfNotInclude,
- send,
- deleteVNode,
- },
- });
- window.addEventListener('message', function (event) {
- // We only accept messages from ourselves
- if (event.source !== window) {
- return;
- }
- const request = event.data;
- if (checkMessage(request, DevToolContentScript)) {
- const { payload } = request;
- const { type, data } = payload;
- if (type === RequestAllVNodeTreeInfos) {
- send();
- } else if (type === RequestComponentAttrs) {
- parseCompAttrs(data);
- } else if (type === ModifyAttrs) {
- modifyVNodeAttrs(data);
- } else if (type === InspectDom) {
- console.log(data);
- } else if (type === LogComponentData) {
- logComponentData(data);
- } else {
- console.warn('unknown command', type);
- }
- }
- });
-}
-
-injectHook();
diff --git a/libs/extension/src/main/index.ts b/libs/extension/src/main/index.ts
deleted file mode 100644
index b81f544c..00000000
--- a/libs/extension/src/main/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-chrome.devtools.panels.create('Horizon',
- '',
- 'panel.html',
- function(panel) {
-
- }
-);
\ No newline at end of file
diff --git a/libs/extension/src/main/main.html b/libs/extension/src/main/main.html
deleted file mode 100644
index 540f18ae..00000000
--- a/libs/extension/src/main/main.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/libs/extension/src/manifest.json b/libs/extension/src/manifest.json
deleted file mode 100644
index 0679215a..00000000
--- a/libs/extension/src/manifest.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "name": "Horizon dev tool",
- "description": "Horizon chrome dev extension",
- "version": "1.0",
- "minimum_chrome_version": "10.0",
- "manifest_version": 3,
- "background": {
- "service_worker": "background.js"
- },
- "permissions": ["storage", "activeTab", "scripting"],
-
- "devtools_page": "main.html",
- "action": {},
- "content_scripts": [
- {
- "matches": [""],
- "js": ["contentScript.js"],
- "run_at": "document_start"
- }
- ],
- "web_accessible_resources": [
- {
- "resources": [ "injector.js", "background.js" ],
- "matches": [""]
- }
- ]
-}
diff --git a/libs/extension/src/panel/App.less b/libs/extension/src/panel/App.less
deleted file mode 100644
index b974c557..00000000
--- a/libs/extension/src/panel/App.less
+++ /dev/null
@@ -1,74 +0,0 @@
-@import '../components/assets.less';
-
-.app {
- display: flex;
- flex-direction: row;
- height: 100%;
- font-size: @common-font-size;
-}
-
-button {
- border: none;
- background: none;
- padding: 0;
-}
-
-.left {
- flex: 7;
- display: flex;
- flex-direction: column;
-
- .left_top {
- border-bottom: @divider-style;
- flex: 0 0 @top-height;
- display: flex;
- align-items: center;
- padding-right: 0.4rem;
-
- .select {
- padding: 0 0.25rem 0 0.25rem;
- flex: 0 0;
- }
-
- .divider {
- flex: 0 0 1px;
- margin: 0 0.25rem 0 0.25rem;
- border-left: @divider-style;
- height: calc(100% - 1rem);
- }
-
- .search {
- flex: 1 1 0;
- }
-
- .searchResult{
- flex: 0 0 ;
- padding: 0 0.4rem;
- }
-
- .searchAction {
- flex: 0 0 1rem;
- height: 1rem;
- color: @arrow-color;
- &:hover{
- color: @hover-color;
- }
- }
- }
-
- .left_bottom {
- flex: 1;
- height: 0;
- }
-}
-
-.right {
- flex: 3;
- border-left: @divider-style;
-}
-
-input {
- outline: none;
- border-width: 0;
- padding: 0;
-}
diff --git a/libs/extension/src/panel/App.tsx b/libs/extension/src/panel/App.tsx
deleted file mode 100644
index 22994dcc..00000000
--- a/libs/extension/src/panel/App.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { useState, useEffect, useRef } from 'horizon';
-import VTree, { IData } from '../components/VTree';
-import Search from '../components/Search';
-import ComponentInfo from '../components/ComponentInfo';
-import styles from './App.less';
-import Select from '../svgs/Select';
-import { mockParsedVNodeData, parsedMockState } from '../devtools/mock';
-import { FilterTree } from '../hooks/FilterTree';
-import Close from '../svgs/Close';
-import Arrow from './../svgs/Arrow';
-import {
- AllVNodeTreesInfos,
- RequestComponentAttrs,
- ComponentAttrs,
-} from '../utils/constants';
-import {
- addBackgroundMessageListener,
- initBackgroundConnection,
- postMessageToBackground, removeBackgroundMessageListener,
-} from '../panelConnection';
-import { IAttr } from '../parser/parseAttr';
-import { createLogger } from '../utils/logUtil';
-
-const logger = createLogger('panelApp');
-
-const parseVNodeData = (rawData, idToTreeNodeMap , nextIdToTreeNodeMap) => {
- const idIndentationMap: {
- [id: string]: number;
- } = {};
- const data: IData[] = [];
- let i = 0;
- while (i < rawData.length) {
- const id = rawData[i] as number;
- i++;
- const name = rawData[i] as string;
- i++;
- const parentId = rawData[i] as string;
- i++;
- const userKey = rawData[i] as string;
- i++;
- const indentation = parentId === '' ? 0 : idIndentationMap[parentId] + 1;
- idIndentationMap[id] = indentation;
- const lastItem = idToTreeNodeMap[id];
- if (lastItem) {
- // 由于 diff 算法限制，一个 vNode 的 name，userKey，indentation 属性不会发生变化
- // 但是在跳转到新页面时，id 值重置，此时原有 id 对应的节点都发生了变化，需要更新
- // 为了让架构尽可能简单，我们不区分是否是页面跳转，所以每次都需要重新赋值
- nextIdToTreeNodeMap[id] = lastItem;
- lastItem.name = name;
- lastItem.indentation = indentation;
- lastItem.userKey = userKey;
- data.push(lastItem);
- } else {
- const item = {
- id, name, indentation, userKey
- };
- nextIdToTreeNodeMap[id] = item;
- data.push(item);
- }
- }
- return data;
-};
-
-const getParents = (item: IData | null, parsedVNodeData: IData[]) => {
- const parents: IData[] = [];
- if (item) {
- const index = parsedVNodeData.indexOf(item);
- let indentation = item.indentation;
- for (let i = index; i >= 0; i--) {
- const last = parsedVNodeData[i];
- const lastIndentation = last.indentation;
- if (lastIndentation < indentation) {
- parents.push(last);
- indentation = lastIndentation;
- }
- }
- }
- return parents;
-};
-
-interface IIdToNodeMap {
- [id: number]: IData;
-}
-
-function App() {
- const [parsedVNodeData, setParsedVNodeData] = useState([]);
- const [componentAttrs, setComponentAttrs] = useState<{
- parsedProps?: IAttr[],
- parsedState?: IAttr[],
- parsedHooks?: IAttr[],
- }>({});
- const [selectComp, setSelectComp] = useState(null);
- const idToTreeNodeMapRef = useRef({});
-
- const {
- filterValue,
- onChangeSearchValue: setFilterValue,
- onClear,
- currentItem,
- matchItems,
- onSelectNext,
- onSelectLast,
- setShowItems,
- collapsedNodes,
- setCollapsedNodes,
- } = FilterTree({ data: parsedVNodeData });
-
- useEffect(() => {
- if (isDev) {
- const nextIdToTreeNodeMap: IIdToNodeMap = {};
- const parsedData = parseVNodeData(mockParsedVNodeData, idToTreeNodeMapRef.current, nextIdToTreeNodeMap);
- idToTreeNodeMapRef.current = nextIdToTreeNodeMap;
- setParsedVNodeData(parsedData);
- setComponentAttrs({
- parsedProps: parsedMockState,
- parsedState: parsedMockState,
- });
- } else {
- const handleBackgroundMessage = (message) => {
- const { payload } = message;
- // 对象数据只是记录了引用，内容可能在后续被修改，打印字符串可以获取当前真正内容，不被后续修改影响
- logger.info(JSON.stringify(payload));
- if (payload) {
- const { type, data } = payload;
- if (type === AllVNodeTreesInfos) {
- const idToTreeNodeMap = idToTreeNodeMapRef.current;
- const nextIdToTreeNodeMap: IIdToNodeMap = {};
- const allTreeData = data.reduce((pre, current) => {
- const parsedTreeData = parseVNodeData(current, idToTreeNodeMap, nextIdToTreeNodeMap);
- return pre.concat(parsedTreeData);
- }, []);
- idToTreeNodeMapRef.current = nextIdToTreeNodeMap;
- setParsedVNodeData(allTreeData);
- } else if (type === ComponentAttrs) {
- const {parsedProps, parsedState, parsedHooks} = data;
- setComponentAttrs({
- parsedProps,
- parsedState,
- parsedHooks,
- });
- }
- }
- };
- // 在页面渲染后初始化连接
- initBackgroundConnection();
- // 监听 background消息
- addBackgroundMessageListener(handleBackgroundMessage);
- return () => {
- removeBackgroundMessageListener(handleBackgroundMessage);
- };
- }
- }, []);
-
- const handleSearchChange = (str: string) => {
- setFilterValue(str);
- };
-
- const handleSelectComp = (item: IData) => {
- if (isDev) {
- setComponentAttrs({
- parsedProps: parsedMockState,
- parsedState: parsedMockState,
- });
- } else {
- postMessageToBackground(RequestComponentAttrs, item.id);
- }
- setSelectComp(item);
- };
-
- const handleClickParent = (item: IData) => {
- setSelectComp(item);
- };
-
- const onRendered = (info) => {
- setShowItems(info.visibleItems);
- };
- const parents = getParents(selectComp, parsedVNodeData);
-
- return (
-
-
-
-
-
-
-
-
-
-
- {filterValue !== '' && <>
-
{`${matchItems.indexOf(currentItem) + 1}/${matchItems.length}`}
-
-
-
-
- }
-
-
-
-
-
-
-
-
-
| 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';
diff --git a/package.json b/package.json
index e4b4229a..fe9836de 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"@babel/plugin-transform-destructuring": "7.16.7",
"@babel/plugin-transform-for-of": "7.16.7",
"@babel/plugin-transform-literals": "7.16.7",
+ "@babel/plugin-transform-object-assign": "7.16.7",
"@babel/plugin-transform-object-super": "7.16.7",
"@babel/plugin-transform-parameters": "7.16.7",
"@babel/plugin-transform-runtime": "7.16.7",