Implement container for the inspected application and components

packages/devtools-backend/src/handles.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
+ */
+
+/**
+ * This map is used by `DevtoolsHandle`
+ */
+export const handles = new Map<string, unknown>();

packages/devtools-backend/src/index.ts

@@ -10,3 +10,4 @@ export * from './serialize';
 export * from './search';
 export * from './ui';
 export * from './interface';
+export * from './handles';

packages/devtools-core/README.md

@@ -9,6 +9,7 @@ exclusive APIs', such as: `chrome.runtime`, `chrome.devtools`, etc.
 ## Table of contents <!-- omit in toc -->
 
 - [Quick Start](#quick-start)
+- [Interaction with the inspected application](#interaction-with-the-inspected-application)
 
 ## Quick Start
 
@@ -17,3 +18,60 @@ exclusive APIs', such as: `chrome.runtime`, `chrome.devtools`, etc.
 3. `yarn dev`
 4. Open new terminal and run `yarn start`
 5. Open browser at `http://localhost:3333`
+
+## Interaction with the inspected application
+
+```mermaid
+classDiagram
+  direction TB
+  %% V4Fire Types
+  class ComponentInterface
+  <<interface>>ComponentInterface
+
+  %% Devtools Types
+  class ComponentData {
+    string componentId
+    string componentName
+    Dictionary values
+    string[] hierarchy
+    %% other props are omitted
+  }
+
+  class DevtoolsHandle~Target~ {
+    -Nullable~string~ id
+    evaluate~T~((Target ctx) => T) Promise~T~
+    dispose() Promise~void~
+  }
+
+  class ComponentHandle~ComponentInterface~ {
+    highlight(boolean autoHide) void
+    getData() Promise~ComponentData~
+    setMod(string key, string value) Promise~boolean~
+    subscribe(Function callback) Function
+  }
+
+  ComponentHandle o-- ComponentInterface
+  ComponentHandle --|> DevtoolsHandle
+  ComponentHandle o-- ComponentData
+
+  class TreeItem {
+    string value
+    string label
+    string componentName
+    number renderCounterProp
+    boolean isFunctionalProp
+    TreeItem[] children
+  }
+
+  class InspectedApp {
+    Components components
+  }
+  <<interface>> InspectedApp
+
+  class Components {
+    tree() Promise~TreeItem[]~
+  }
+
+  Components o-- TreeItem
+  InspectedApp *-- Components
+```

packages/devtools-core/components-lock.json

@@ -1,5 +1,5 @@
 {
-  "hash": "b1f092ba867cc6f75520d31a06c0b387336890ccc7bbe045022f86c3856f3fa9",
+  "hash": "016ae34d4dca9e70c1af1c98fe7f9109c708eb2e0bbbb8f26e7eeed588125187",
   "data": {
     "%data": "%data:Map",
     "%data:Map": [
@@ -11,19 +11,27 @@
             "name": "b-bottom-slide",
             "parent": "i-block",
             "dependencies": [],
-            "libs": []
+            "libs": [
+              "components/directives/on-resize"
+            ]
           },
           "name": "b-bottom-slide",
           "parent": "i-block",
           "dependencies": [],
-          "libs": [],
+          "libs": [
+            "components/directives/on-resize"
+          ],
           "resolvedLibs": {
             "%data": "%data:Set",
-            "%data:Set": []
+            "%data:Set": [
+              "components/directives/on-resize"
+            ]
           },
           "resolvedOwnLibs": {
             "%data": "%data:Set",
-            "%data:Set": []
+            "%data:Set": [
+              "components/directives/on-resize"
+            ]
           },
           "type": "block",
           "mixin": false,
@@ -111,6 +119,38 @@
           "etpl": null
         }
       ],
+      [
+        "b-component-interface-dummy",
+        {
+          "index": "node_modules/@v4fire/client/src/core/component/interface/component/test/b-component-interface-dummy/index.js",
+          "declaration": {
+            "name": "b-component-interface-dummy",
+            "parent": "i-block",
+            "dependencies": [],
+            "libs": []
+          },
+          "name": "b-component-interface-dummy",
+          "parent": "i-block",
+          "dependencies": [],
+          "libs": [],
+          "resolvedLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "resolvedOwnLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "type": "block",
+          "mixin": false,
+          "logic": "node_modules/@v4fire/client/src/core/component/interface/component/test/b-component-interface-dummy/b-component-interface-dummy.ts",
+          "styles": [
+            "node_modules/@v4fire/client/src/core/component/interface/component/test/b-component-interface-dummy/b-component-interface-dummy.styl"
+          ],
+          "tpl": "node_modules/@v4fire/client/src/core/component/interface/component/test/b-component-interface-dummy/b-component-interface-dummy.ss",
+          "etpl": null
+        }
+      ],
       [
         "b-components-actions",
         {
@@ -1247,6 +1287,38 @@
           "etpl": null
         }
       ],
+      [
+        "b-scroll-element-dummy",
+        {
+          "index": "node_modules/@v4fire/client/src/components/base/b-dynamic-page/test/b-scroll-element-dummy/index.js",
+          "declaration": {
+            "name": "b-scroll-element-dummy",
+            "parent": "b-dummy",
+            "dependencies": [],
+            "libs": []
+          },
+          "name": "b-scroll-element-dummy",
+          "parent": "b-dummy",
+          "dependencies": [],
+          "libs": [],
+          "resolvedLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "resolvedOwnLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "type": "block",
+          "mixin": false,
+          "logic": "node_modules/@v4fire/client/src/components/base/b-dynamic-page/test/b-scroll-element-dummy/b-scroll-element-dummy.ts",
+          "styles": [
+            "node_modules/@v4fire/client/src/components/base/b-dynamic-page/test/b-scroll-element-dummy/b-scroll-element-dummy.styl"
+          ],
+          "tpl": "node_modules/@v4fire/client/src/components/base/b-dynamic-page/test/b-scroll-element-dummy/b-scroll-element-dummy.ss",
+          "etpl": null
+        }
+      ],
       [
         "b-select",
         {

packages/devtools-core/index.d.ts

@@ -6,4 +6,11 @@
  * https://github.com/V4Fire/DevTools/blob/main/LICENSE
  */
 
+/* eslint-disable no-var */
+
 /// <reference types="@v4fire/client"/>
+
+/**
+ * Devtools backend API - available only in the inspected window context
+ */
+declare var __V4FIRE_DEVTOOLS_BACKEND__: typeof import('@v4fire/devtools-backend');