Draft

.gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+node_modules
+
+# Build && test
+/coverage
+/.nyc_output
+dist
+.env
+*.tgz
+
+# IDE
+.idea
+.vscode
+
+# Operating System Files
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 V4FIRE
+Copyright (c) 2023 V4Fire
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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

@@ -0,0 +1,54 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+'use strict';
+
+const
+	headerPlugin = require('eslint-plugin-header');
+
+const
+	base = require('@v4fire/linters/eslint.config');
+
+const copyrightTemplate = [
+	'!',
+	' * V4Fire DevTools',
+	' * https://github.com/V4Fire/DevTools',
+	' *',
+	' * Released under the MIT license',
+	' * https://github.com/V4Fire/DevTools/blob/main/LICENSE',
+	' '
+];
+
+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;
+	}
+
+	if (item.rules) {
+		item.rules['header/header'] = [2, 'block', copyrightTemplate];
+	}
+});
+
+module.exports = base;

package.json

@@ -0,0 +1,15 @@
+{
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "lint": "npx eslint ./packages"
+  },
+  "license": "MIT",
+  "packageManager": "yarn@3.6.4",
+  "devDependencies": {
+    "@v4fire/cli": "^2.1.0",
+    "@v4fire/linters": "git+https://github.com/v4fire/linters#rework_rules",
+    "typescript": "4.6.2"
+  }
+}

packages/devtools-backend/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,jsx,ts,tsx,html,css,styl,ss,ess}]
+indent_style = tab

packages/devtools-backend/.gitignore

@@ -0,0 +1 @@
+dist

packages/devtools-backend/README.md

@@ -0,0 +1,10 @@
+# V4Fire DevTools Backend
+
+This is the source code for the V4Fire DevTools backend.
+It must be injected in the inspected window as the `__V4FIRE_DEVTOOLS_BACKEND__` global variable.
+
+## Quick start
+
+1. Run at the root `yarn install`
+2. `cd ./packages/devtools-backend`
+3. `yarn dev`

packages/devtools-backend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@v4fire/devtools-backend",
+  "version": "0.1.0",
+  "packageManager": "yarn@3.6.4",
+  "scripts": {
+    "build": "npx tsc",
+    "dev": "npx tsc -w"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "license": "MIT"
+}

packages/devtools-backend/src/index.ts

@@ -0,0 +1,12 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+export * from './serialize';
+export * from './search';
+export * from './ui';
+export * from './interface';

packages/devtools-backend/src/interface/component.ts

@@ -0,0 +1,23 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+/**
+ * Parameters to search for a component
+ */
+export interface ComponentQuery {
+	/**
+	 * The unique component identifier.
+	 * The value is formed based on the passed prop or dynamically.
+	 */
+	readonly componentId: string;
+
+	/**
+	 * The component name in dash-style without special postfixes like `-functional`
+	 */
+	readonly componentName?: string;
+}

packages/devtools-backend/src/interface/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 * from './component';

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,30 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import type { ComponentQuery } from '../interface';
+
+/**
+ * Find component DOM node
+ *
+ * @param query - component query
+ */
+export default function findComponentNode<T extends Element>(query: ComponentQuery): T | null {
+	const {componentId: id, componentName: name} = query;
+	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/README.md

@@ -0,0 +1,43 @@
+# serialize
+
+This module is used to serialize complex values.
+It is mainly used to serialize component's meta and send it to the devtools.
+
+## API
+
+### serialize
+
+Serializes the given value:
+
+```ts
+import { serialize } from '@v4fire/devtools-backend';
+
+serialize({date: new Date(), set: new Set([1,2,3]), sum: (a, b) => a + b})
+
+// NOTE: the result was formatted for the example
+// {
+//   "date": "2023-11-01T12:31:56.859Z",
+//   "set": {
+//     "__DATA__": "__DATA__:Set",
+//     "__DATA__:Set": [
+//       1,
+//       2,
+//       3
+//     ]
+//   },
+//   "sum": {
+//     "__DATA__": "__DATA__:Function",
+//     "__DATA__:Function": "(a, b) => a + b"
+//   }
+// }
+```
+
+### deserialize
+
+Deserializes previously serialized value:
+
+```ts
+import { deserialize } from '@v4fire/devtools-backend';
+
+deserialize('{"set":{"__DATA__":"__DATA__:Set","__DATA__:Set":[1,2,3]}}') // {set: Set(3)}
+```