@mpxjs/core 2.7.43 → 2.7.44

package/@types/index.d.ts

@@ -80,6 +80,7 @@ interface WatchOpt {
   immediateAsync?: boolean
   deep?: boolean
   sync?: boolean
+  once?: boolean | ((newVal: any, oldVal: any) => boolean)
 }
 
 interface WatchOptWithHandler extends WatchOpt {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.7.43",
+  "version": "2.7.44",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -23,6 +23,7 @@
     "miniprogram-api-typings": "^3.0.2"
   },
   "peerDependencies": {
+    "@mpxjs/api-proxy": "^2.7.44",
     "vue": "^2.6.10",
     "vue-i18n": "^8.15.3"
   },
@@ -41,5 +42,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "9ba777d5b52c8a2f802c47c2dc10c6984deff1d8"
+  "gitHead": "306aee23bc55c7f1af58b8de0c6e6394370c88d4"
 }

package/src/platform/builtInMixins/refsMixin.web.js

@@ -1,245 +1,6 @@
 import { BEFOREMOUNT, UPDATED } from '../../core/innerLifecycle'
 import { error } from '../../helper/log'
-
-class SelectQuery {
-  constructor () {
-    this._component = null
-    this._queue = []
-    this._queueCb = []
-  }
-
-  in (component) {
-    this._component = component
-    return this
-  }
-
-  select (selector) {
-    if (typeof selector === 'string') {
-      selector = selector.replace('>>>', '>')
-    }
-    return new NodesRef(selector, this, true)
-  }
-
-  selectAll (selector) {
-    if (typeof selector === 'string') {
-      selector = selector.replace('>>>', '>')
-    }
-    return new NodesRef(selector, this, false)
-  }
-
-  selectViewport () {
-    return new NodesRef('html', this, true)
-  }
-
-  exec (callback) {
-    const res = []
-    const handleFields = this._handleFields
-    const queueCb = this._queueCb
-    this._queue.forEach(item => {
-      const { selector, component, single, fields } = item
-
-      let curComponent = document
-
-      if (component && component.$el) {
-        curComponent = component.$el
-      } else if (component && component.nodeType === 1) {
-        curComponent = component
-      }
-
-      if (this._isEl(selector)) {
-        if (single) {
-          res.push(handleFields(fields, selector, null))
-        } else {
-          res.push(selector.map(el => handleFields(fields, el, null)))
-        }
-      } else {
-        const selectSelf =
-          curComponent === document
-            ? false
-            : Array
-              .from(curComponent.parentNode.querySelectorAll(selector))
-              .every(item => item === curComponent)
-
-        if (single) {
-          const el = selectSelf ? curComponent : curComponent.querySelector(selector)
-          res.push(handleFields(fields, el, selector))
-        } else {
-          const els = selectSelf
-            ? [curComponent]
-            : Array.from(curComponent.querySelectorAll(selector))
-          const elsArr = els.map(el => handleFields(fields, el, null))
-          res.push(elsArr)
-        }
-      }
-    })
-    res.forEach((item, idx) => {
-      typeof queueCb[idx] === 'function' && queueCb[idx].call(this, item)
-    })
-    typeof callback === 'function' && callback.call(this, res)
-  }
-
-  _handleFields (fields, el, selector) {
-    const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], node } = fields
-    const { left, right, top, bottom, width, height } = el.getBoundingClientRect()
-
-    const res = {}
-    const isViewport = selector === 'html'
-    if (id) res.id = el.id
-    if (dataset) res.dataset = Object.assign({}, el.dataset)
-    if (rect) {
-      if (isViewport) {
-        res.left = 0
-        res.right = 0
-        res.top = 0
-        res.bottom = 0
-      } else {
-        res.left = left
-        res.right = right
-        res.top = top
-        res.bottom = bottom
-      }
-    }
-    if (size) {
-      if (isViewport) {
-        res.width = el.clientWidth
-        res.height = el.clientHeight
-      } else {
-        res.width = width
-        res.height = height
-      }
-    }
-    // 添加获取节点信息
-    if (node) {
-      res.node = el
-      if (isCanvas(el)) {
-        // 避免lint检查报错
-        el.createImage = function () {
-          return new Image()  // eslint-disable-line
-        }
-
-        el.createPath2D = function (path) {
-          return window.Path2D(path)
-        }
-
-        el.requestAnimationFrame = function (callback) {
-          return window.requestAnimationFrame(callback)
-        }
-
-        el.cancelAnimationFrame = function (requestID) {
-          return window.cancelAnimationFrame(requestID)
-        }
-
-        const rawGetContext = el.getContext
-        el.getContext = function (...args) {
-          const context = rawGetContext.apply(this, args)
-          // 如果实例方法有变动，可以在这里进行处理
-          return context
-        }
-      }
-    }
-    if (scrollOffset) {
-      res.scrollLeft = el.scrollLeft
-      res.scrollTop = el.scrollTop
-    }
-    properties.forEach(prop => {
-      const attr = el.getAttribute(prop)
-      if (attr) {
-        res[prop] = attr
-      }
-    })
-    if (computedStyle.length) {
-      const styles = window.getComputedStyle(el)
-      computedStyle.forEach(style => {
-        const midLineStyle = style.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)
-        const value = styles.getPropertyValue(midLineStyle)
-        if (value) {
-          res[style] = value
-        }
-      })
-    }
-    return res
-  }
-
-  _push (selector, component, single, fields, callback) {
-    this._queue.push({
-      component,
-      selector,
-      single,
-      fields
-    })
-    this._queueCb.push(callback)
-  }
-
-  _isEl (selector) {
-    if (Array.isArray(selector)) return this._isEl(selector[0])
-    return selector && selector.nodeType === 1
-  }
-}
-
-class NodesRef {
-  constructor (selector, selectorQuery, single) {
-    this._selector = selector
-    this._selectorQuery = selectorQuery
-    this._component = selectorQuery._component
-    this._single = single
-  }
-
-  boundingClientRect (callback) {
-    this._selectorQuery._push(
-      this._selector,
-      this._component,
-      this._single,
-      {
-        id: true,
-        dataset: true,
-        rect: true,
-        size: true
-      },
-      callback
-    )
-    return this._selectorQuery
-  }
-
-  scrollOffset (callback) {
-    this._selectorQuery._push(
-      this._selector,
-      this._component,
-      this._single,
-      {
-        id: true,
-        dataset: true,
-        scrollOffset: true
-      },
-      callback
-    )
-    return this._selectorQuery
-  }
-
-  fields (fields, callback) {
-    this._selectorQuery._push(
-      this._selector,
-      this._component,
-      this._single,
-      fields,
-      callback
-    )
-    return this._selectorQuery
-  }
-
-  // 获取Node节点实例
-  node (callback) {
-    this._selectorQuery._push(
-      this._selector,
-      this._component,
-      this._single,
-      {
-        node: true
-      },
-      callback
-    )
-    return this._selectorQuery
-  }
-}
+import * as webApi from '@mpxjs/api-proxy/src/web/api'
 
 function getIdentifier (vnode) {
   let identifier = ''
@@ -280,13 +41,13 @@ function processRefs (refs) {
       const ref = refs[key]
       if (Array.isArray(ref)) {
         if (getEl(ref[0])) {
-          refs[rKey] = new SelectQuery().in(this).selectAll(ref.map(getEl))
+          refs[rKey] = webApi.createSelectorQuery().in(this).selectAll(ref.map(getEl))
         } else {
           refs[rKey] = ref
         }
       } else {
         if (getEl(ref)) {
-          refs[rKey] = new SelectQuery().in(this).select(getEl(ref))
+          refs[rKey] = webApi.createSelectorQuery().in(this).select(getEl(ref))
         } else {
           refs[rKey] = ref
         }
@@ -305,7 +66,10 @@ export default function getRefsMixin () {
     },
     methods: {
       createSelectorQuery () {
-        return new SelectQuery().in(this)
+        return webApi.createSelectorQuery().in(this)
+      },
+      createIntersectionObserver (component, options) {
+        return webApi.createIntersectionObserver(component, options)
       },
       selectComponent (selector, all) {
         const result = []
@@ -322,8 +86,3 @@ export default function getRefsMixin () {
     }
   }
 }
-
-// 判断是不是canvas元素
-function isCanvas (el) {
-  return el.nodeName && el.nodeName.toLowerCase() === 'canvas'
-}