From f6d23e1accc72d1b8140ffb7c0475518ec9394b7 Mon Sep 17 00:00:00 2001
From: Hwaphon <ghwaphon@gmail.com>
Date: Mon, 22 May 2023 11:53:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(runtime-web):=20fields=20=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E5=92=8C=20scrollOffset,boundingClientRect=20?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E9=9A=94=E7=A6=BB=20(#42)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/ui/element-query/index.ts         | 46 +++++++++++--------
 packages/runtime-web/src/api/utils/index.ts   |  4 ++
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/runtime-web/src/api/ui/element-query/index.ts b/packages/runtime-web/src/api/ui/element-query/index.ts
index b8e6fd88..102d342b 100644
--- a/packages/runtime-web/src/api/ui/element-query/index.ts
+++ b/packages/runtime-web/src/api/ui/element-query/index.ts
@@ -1,6 +1,6 @@
 // 节点相关查询接口
 import { getRootView, updateRootView } from '../../global'
-import { wait } from '../../utils'
+import { isFunction, isObject, wait } from '../../utils'
 import IntersectionObserver from './intersection-observer'
 import { FIELD_CONFIG_METHODS_MAP, mapTarget } from './utils'
 
@@ -17,6 +17,7 @@ class SelectorQuery {
   private target: HTMLElement | NodeListOf<HTMLElement>
 
   private execPromises: Promise<any>[] = []
+  private fieldsPromise: Promise<any>[] = []
 
   select(selector: string) {
     this.target = getRootView().querySelector(selector) as HTMLElement
@@ -61,27 +62,28 @@ class SelectorQuery {
     return this
   }
 
-  fields(config) {
+  fields(config, callback) {
     const target = this.target
 
-    this.execPromises.push(
-      wait().then(() => {
-        return mapTarget(target, (el: HTMLElement) => {
-          return Object.keys(config).reduce((res, key) => {
-            if (
-              config[key] &&
-              typeof FIELD_CONFIG_METHODS_MAP[key] === 'function'
-            ) {
-              const value = FIELD_CONFIG_METHODS_MAP[key](el, config[key])
-
-              if (typeof value === 'object') res = { ...res, ...value }
-              else res[key] = value
-            }
-
-            return res
-          }, {})
+    this.fieldsPromise.push(
+      wait()
+        .then(() => {
+          return mapTarget(target, (el: HTMLElement) => {
+            return Object.keys(config).reduce((res, key) => {
+              if (
+                config[key] &&
+                typeof FIELD_CONFIG_METHODS_MAP[key] === 'function'
+              ) {
+                const value = FIELD_CONFIG_METHODS_MAP[key](el, config[key])
+
+                if (isObject(value)) res = { ...res, ...value }
+                else res[key] = value
+              }
+              return res
+            }, {})
+          })
         })
-      })
+        .then((res) => isFunction(callback) && callback(res))
     )
 
     return this
@@ -89,7 +91,11 @@ class SelectorQuery {
 
   exec(callback) {
     Promise.all(this.execPromises).then((res) => {
-      callback(res)
+      isFunction(callback) && callback(res)
     })
+
+    if (this.fieldsPromise.length > 0) {
+      Promise.all(this.fieldsPromise)
+    }
   }
 }
diff --git a/packages/runtime-web/src/api/utils/index.ts b/packages/runtime-web/src/api/utils/index.ts
index 45227656..5b96cc57 100644
--- a/packages/runtime-web/src/api/utils/index.ts
+++ b/packages/runtime-web/src/api/utils/index.ts
@@ -135,3 +135,7 @@ export const wait = (millisecond = 67) => {
     setTimeout(resolve, millisecond)
   })
 }
+
+export const isObject = (param) => param && typeof param === 'object'
+
+export const isFunction = (param) => typeof param === 'function'