🆙 Improvements and fixes

docs/ru/tests/01-components.md

@@ -0,0 +1,19 @@
+# Тесты страницы "Components" 
+
+## 1. Выбор компонента на странице
+
+### Кейс 1.1
+
+1. Открыть приложение V4Fire
+2. Открыть devtools 
+3. Открыть вкладку `v4fire` в devtools
+4. Кликнуть на иконку прицела и выбрать компонент на странице -> Данные компонента отобразились в панели
+
+### Кейс 1.2
+
+1. Открыть приложение V4Fire
+2. Открыть devtools 
+3. Открыть вкладку `v4fire` в devtools
+4. Сменить вкладку в браузере
+5. Вернуться на вкладку с приложением V4Fire
+6. Кликнуть на иконку прицела и выбрать компонент на странице -> Данные компонента отобразились в панели

eslint.config.js

@@ -24,7 +24,24 @@ const copyrightTemplate = [
 	' '
 ];
 
+const ignore = [
+	'**/src/**/@(i-|b-|p-|g-|v-)*/index.js',
+	'**/src/**/test/**/*.js',
+
+	'**/assets/**',
+	'**/src/assets/**',
+
+	'**/tmp/**',
+	'**/src/entries/tmp/**',
+
+	'**/docs/**',
+	'**/dist/**',
+	'**/node_modules/**'
+];
+
 base.forEach((item) => {
+	item.ignores = ignore;
+
 	if (item.plugins) {
 		item.plugins['header'] = headerPlugin;
 	}

packages/devtools-backend/src/index.ts

@@ -7,3 +7,5 @@
  */
 
 export * from './serialize';
+export * from './search';
+export * from './ui';

packages/devtools-backend/src/search/README.md

@@ -0,0 +1,5 @@
+# Search
+
+These modules provide search API:
+
+- find component node

packages/devtools-backend/src/search/find-component-node.ts

@@ -0,0 +1,28 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+/**
+ * Find component DOM node
+ *
+ * @param id - component id
+ * @param name - component name
+ */
+export default function findComponentNode<T extends Element>(id: string, name?: string): T | null {
+	let node = Array.prototype.find.call(
+		document.querySelectorAll(`.i-block-helper.${id}`),
+		(node) => node.component?.componentId === id
+	);
+
+	if (node == null && name != null) {
+		// Maybe it's a functional component
+		const nodes = document.querySelectorAll(`.i-block-helper.${name}`);
+		node = Array.prototype.find.call(nodes, (node) => node.component?.componentId === id);
+	}
+
+	return node;
+}

packages/devtools-backend/src/search/index.ts

@@ -0,0 +1,8 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+export { default as findComponentNode } from './find-component-node';

packages/devtools-backend/src/serialize/index.ts

@@ -37,7 +37,7 @@ export function getType<T = unknown>(value: T): string {
  */
 export function serialize<T = unknown>(
 	value: T,
-	isRestrictedKey?: (key: string) => boolean
+	isRestrictedKey?: (key: string, value?: unknown) => boolean
 ): string {
 	let refCounter = 1;
 
@@ -49,7 +49,7 @@ export function serialize<T = unknown>(
 	return JSON.stringify(value, expandedStringify);
 
 	function expandedStringify(this: any, key: string, value: unknown): unknown {
-		if (isRestrictedKey?.(key)) {
+		if (isRestrictedKey?.(key, value)) {
 			return '[Restricted]';
 		}
 

packages/devtools-backend/src/ui/README.md

@@ -0,0 +1,5 @@
+# UI
+
+These modules provide API to modify the UI of inspected window:
+
+- componentHighlight - displays an overlay over the component

packages/devtools-backend/src/ui/component-highlight.ts

@@ -0,0 +1,118 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import findComponentNode from '../search/find-component-node';
+
+interface HideOptions {
+	animate?: boolean;
+	delay?: number;
+}
+
+const
+	highlightNodeId = 'v4fire-devtools-highlight',
+	highlightAnimationDuration = 300;
+
+class ComponentHighlight {
+	/**
+	 * Highlight animation timeout
+	 */
+	#animationTimeout: any;
+
+	/**
+	 * Show highlight for the component
+	 *
+	 * @param componentId
+	 * @param componentName
+	 */
+	show(componentId: string, componentName: string): void {
+		const node = findComponentNode<HTMLElement>(componentId, componentName);
+
+		if (node == null) {
+			return;
+		}
+
+		clearTimeout(this.#animationTimeout);
+
+		const highlightNode = getOrCreateHighlightNode();
+
+		const {width, height, top, left} = node.getBoundingClientRect();
+		highlightNode.style.width = `${width}px`;
+		highlightNode.style.height = `${height}px`;
+		highlightNode.style.top = `${(globalThis.scrollY + top)}px`;
+		highlightNode.style.left = `${left}px`;
+		highlightNode.style.opacity = '1';
+		highlightNode.style.display = 'block';
+	}
+
+	/**
+	 * Hide component's highlight
+	 * @param animateOrOptions
+	 */
+	hide(animateOrOptions?: boolean | HideOptions): void {
+		let animate = false;
+		let delay: number | null = null;
+
+		if (typeof animateOrOptions === 'boolean') {
+			animate = animateOrOptions;
+
+		} else if (typeof animateOrOptions === 'object') {
+			({animate = false, delay = null} = animateOrOptions);
+		}
+
+		const node = document.getElementById(highlightNodeId);
+
+		if (node == null) {
+			return;
+		}
+
+		if (animate) {
+			clearTimeout(this.#animationTimeout);
+
+			const end = () => {
+				this.#animationTimeout = setTimeout(() => {
+					node.style.display = 'none';
+				}, highlightAnimationDuration);
+			};
+
+			const start = () => {
+				node.style.opacity = '0';
+
+				end();
+			};
+
+			if (delay != null) {
+				this.#animationTimeout = setTimeout(start, delay);
+			} else {
+				start();
+			}
+
+		} else {
+			node.style.display = 'none';
+		}
+	}
+}
+
+export const componentHighlight = new ComponentHighlight();
+
+function getOrCreateHighlightNode(): HTMLElement {
+	let highlightNode = document.getElementById(highlightNodeId);
+
+	if (highlightNode == null) {
+		highlightNode = document.createElement('div');
+		highlightNode.id = highlightNodeId;
+		highlightNode.style.position = 'absolute';
+		highlightNode.style.display = 'none';
+		highlightNode.style.backgroundColor = 'rgba(250, 0, 250, 0.3)';
+		highlightNode.style.zIndex = '9999';
+		highlightNode.style.transition = `opacity ${highlightAnimationDuration}ms ease`;
+		highlightNode.style.pointerEvents = 'none';
+		document.body.appendChild(highlightNode);
+	}
+
+	return highlightNode;
+}

packages/devtools-backend/src/ui/component-locate.ts

@@ -0,0 +1,99 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import { componentHighlight } from './component-highlight';
+
+interface ComponentInterface {
+	componentId: string;
+	componentName: string;
+}
+
+class ComponentLocate {
+	#mouseoverListener: ((e: MouseEvent) => void) | null = null;
+
+	#clickListener: ((e: MouseEvent) => void) | null = null;
+
+	enable() {
+		this.disable();
+
+		let component: ComponentInterface | null = null;
+
+		this.#mouseoverListener = (e: MouseEvent) => {
+			component = e.target instanceof Element ? findComponent(e.target) : null;
+
+			if (component != null) {
+				const {componentId, componentName} = component;
+				componentHighlight.show(componentId, componentName);
+
+			} else {
+				componentHighlight.hide();
+			}
+		};
+
+		this.#clickListener = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.disable();
+
+			if (component != null) {
+				componentHighlight.hide({animate: true});
+
+				const {componentId, componentName} = component;
+
+				// TODO: create bridge
+				globalThis.postMessage({
+					source: 'v4fire-devtools-bridge',
+					payload: {
+						event: 'select-component',
+						payload: {componentId, componentName}
+					}
+				}, '*');
+			}
+		};
+
+		document.addEventListener('mouseover', this.#mouseoverListener);
+		document.addEventListener('click', this.#clickListener, {capture: true});
+	}
+
+	disable() {
+		if (this.#mouseoverListener != null) {
+			document.removeEventListener('mouseover', this.#mouseoverListener);
+			this.#mouseoverListener = null;
+		}
+
+		if (this.#clickListener != null) {
+			document.removeEventListener('click', this.#clickListener, {capture: true});
+			this.#clickListener = null;
+		}
+	}
+}
+
+export const componentLocate = new ComponentLocate();
+
+function findComponent(target: Element | null): ComponentInterface | null {
+	let component: ComponentInterface | null = null;
+
+	while (component == null && target != null) {
+		const node: Element & {component?: ComponentInterface} | null = target.closest('.i-block-helper');
+
+		if (node == null) {
+			break;
+		}
+
+		if (node.component != null) {
+			({component} = node);
+
+		} else {
+			// If `component` property is missing - search higher in hierarchy
+			target = <Element>node.parentNode;
+		}
+	}
+
+	return component;
+}

packages/devtools-backend/src/ui/index.ts

@@ -0,0 +1,9 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+export { componentHighlight } from './component-highlight';
+export { componentLocate } from './component-locate';