feat(devtools): support select node to bind $vm with console (#2682)

alibaba · Dec 27, 2021 · 80ef079 · 80ef079
1 parent 589e74b
commit 80ef079
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/devtools/chrome-extension/src/app/index.tsx b/devtools/chrome-extension/src/app/index.tsx
@@ -14,6 +14,13 @@ export default styled(({ className, dataSource }) => {
         dataSource={dataSource}
         onSelect={(info) => {
           select(info)
+          if (chrome && chrome.devtools && chrome.devtools.inspectedWindow) {
+            chrome.devtools.inspectedWindow.eval(
+              `window.__FORMILY_DEV_TOOLS_HOOK__.setVm("${info.key}","${
+                dataSource[info.current][''].id
+              }")`
+            )
+          }
         }}
       />
       <RightPanel

diff --git a/devtools/chrome-extension/src/extension/backend.ts b/devtools/chrome-extension/src/extension/backend.ts
@@ -74,6 +74,13 @@ const HOOK = {
   closeDevtools() {
     this.hasOpenDevtools = false
   },
+  setVm(fieldId: string, formId: string) {
+    if (fieldId) {
+      globalThis.$vm = this.store[formId].fields[fieldId]
+    } else {
+      globalThis.$vm = this.store[formId]
+    }
+  },
   inject(id: number, form: any) {
     this.hasFormilyInstance = true
     this.store[id] = form