@tarojs/with-weapp 3.8.0-canary.0 → 4.0.0-beta.0

package/src/convert-tools.ts

@@ -0,0 +1,69 @@
+/**
+ * 该模块仅存放 convert 转换时用到的工具函数或变量
+ */
+
+export const cacheOptions = {
+  cacheOptions: {},
+  setOptionsToCache: function (options) {
+    if (Object.keys(options).length !== 0) {
+      this.cacheOptions = options
+    }
+  },
+  getOptionsFromCache: function () {
+    return this.cacheOptions
+  }
+}  
+
+function toCamelCase (s) {
+  let camel = ''
+  let nextCap = false
+  for (let i = 0; i < s.length; i++) {
+    if (s[i] !== '-') {
+      camel += nextCap ? s[i].toUpperCase() : s[i]
+      nextCap = false
+    } else {
+      nextCap = true
+    }
+  }
+  return camel
+}
+
+export const convertToArray = function (value, fn) {
+  if (value instanceof Array) {
+    return value.map(fn)
+  } else if (typeof value === 'number') {
+    return Array.from({
+      length: value
+    }, (_, index) => index).map(fn)
+  } else if (typeof value === 'string') {
+    return Array.from(value).map(fn)
+  } else if (typeof value === 'object' && value !== null && Object.getPrototypeOf(value) === Object.prototype) {
+    const result = Object.keys(value).map((item) => {
+      return fn(value[item], item)
+    })
+    return result
+  }
+}
+
+export const getTarget = (target, Taro) => {
+  if (!target) {
+    return { dataset: {} }
+  }
+  if (Taro.getEnv() === Taro.ENV_TYPE.MPHARMONY || Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+    if (target.fullDataset) {
+      return { dataset: target.fullDataset }
+    }
+    const fullDataset = {}
+    // 获取元素的所有属性
+    const targetAttrKeys = Object.keys(target)
+    // 遍历所有属性
+    for (let i = 0; i < targetAttrKeys.length; i++) {
+      if (targetAttrKeys[i].startsWith('data-')) {
+        fullDataset[toCamelCase(targetAttrKeys[i].replace(/^data-/, '').toLowerCase())] = target[targetAttrKeys[i]]
+      }
+    }
+    target.fullDataset = fullDataset
+    return { dataset: fullDataset }
+  }
+  return target
+}

package/src/index.ts

@@ -1,5 +1,5 @@
 import { Func, getCurrentInstance } from '@tarojs/runtime'
-import { ComponentLifecycle, eventCenter, nextTick } from '@tarojs/taro'
+import { ComponentLifecycle, createIntersectionObserver, createMediaQueryObserver, createSelectorQuery, eventCenter, nextTick } from '@tarojs/taro'
 
 import { clone } from './clone'
 import { diff } from './diff'
@@ -10,7 +10,8 @@ type Observer = (newProps, oldProps, changePath: string) => void
 
 interface ObserverProperties {
   name: string
-  observer: string | Observer
+  observers: (string | Observer)[]
+  // observer: string | Observer
 }
 
 interface ComponentClass<P = Record<string, any>, S = Record<string, any>> extends ComponentLifecycle<P, S> {
@@ -39,14 +40,19 @@ function defineGetter (component, key: string, getter: string) {
       if (getter === 'props') {
         return component.props
       }
-      return {
-        ...component.state,
-        ...component.props
-      }
+      return component.state
+      // return {
+      //   ...component.state,
+      //   ...component.props
+      // }
     }
   })
 }
 
+function propToState (newValue, _oldValue, key: string) {
+  this.state[key] = newValue
+}
+
 function isFunction (o): o is Func {
   return typeof o === 'function'
 }
@@ -63,7 +69,8 @@ export default function withWeapp (weappConf: WxOptions, isApp = false) {
       ['created', []],
       ['attached', []],
       ['ready', []],
-      ['detached', []]
+      ['detached', []],
+      ['lifetimes', []]
     ])
     const behaviorProperties = {}
     if (weappConf.behaviors?.length) {
@@ -123,20 +130,47 @@ export default function withWeapp (weappConf: WxOptions, isApp = false) {
       }
 
       private initProps (props: any) {
+        const properties = {}
         for (const propKey in props) {
           if (props.hasOwnProperty(propKey)) {
             const propValue = props[propKey]
             // propValue 可能是 null, 构造函数, 对象
-            if (propValue && !isFunction(propValue)) {
+            const observers = [propToState]
+            if (propValue === null || propValue === undefined){ // propValue为null、undefined情况
+              properties[propKey] = null
+            }
+            else if (isFunction(propValue)) { // propValue为Function，即Array、String、Boolean等情况时
+              if (propValue.name === 'Array') {
+                properties[propKey] = []
+              } else if (propValue.name === 'String'){
+                properties[propKey] = ''
+              } else if (propValue.name === 'Boolean'){
+                properties[propKey] = false
+              } else if (propValue.name === 'Number') {
+                properties[propKey] = 0
+              } else {
+                properties[propKey] = null
+              }
+            }
+            else if (typeof propValue === 'object') { // propValue为对象时
+              properties[propKey] = propValue.value
               if (propValue.observer) {
-                this._observeProps.push({
-                  name: propKey,
-                  observer: propValue.observer
-                })
+                observers.push(propValue.observer)
               }
             }
+            else {
+              properties[propKey] = null
+            }
+            this._observeProps.push({
+              name: propKey,
+              observers: observers
+            })
           }
         }
+        this.state = {
+          ...properties,
+          ...this.state
+        }
       }
 
       private init (options: WxOptions) {
@@ -285,6 +319,13 @@ export default function withWeapp (weappConf: WxOptions, isApp = false) {
                   }
                 })
                 break
+              case 'lifetimes':
+                list.forEach(lifetimesObject => {
+                  for (const key in lifetimesObject) {
+                    this.initLifeCycles(key, lifetimesObject[key])
+                  }
+                })
+                break
               default:
                 break
             }
@@ -367,19 +408,21 @@ export default function withWeapp (weappConf: WxOptions, isApp = false) {
       }
 
       private triggerPropertiesObservers (prevProps, nextProps) {
-        this._observeProps.forEach(({ name: key, observer }) => {
+        this._observeProps.forEach(({ name: key, observers }) => {
           const prop = prevProps?.[key]
           const nextProp = nextProps[key]
           // 小程序是深比较不同之后才 trigger observer
           if (!isEqual(prop, nextProp)) {
-            if (typeof observer === 'string') {
-              const ob = this[observer]
-              if (isFunction(ob)) {
-                ob.call(this, nextProp, prop, key)
+            observers.forEach((observer)=>{
+              if (typeof observer === 'string') {
+                const ob = this[observer]
+                if (isFunction(ob)) {
+                  ob.call(this, nextProp, prop, key)
+                }
+              } else if (isFunction(observer)) {
+                observer.call(this, nextProp, prop, key)
               }
-            } else if (isFunction(observer)) {
-              observer.call(this, nextProp, prop, key)
-            }
+            })
           }
         })
       }
@@ -563,6 +606,13 @@ export default function withWeapp (weappConf: WxOptions, isApp = false) {
           const page = this.current.page
           if (page?.[method]) {
             return page[method](...args)
+          } else if (method === 'createSelectorQuery') {
+            return createSelectorQuery()
+          } else if (method === 'createIntersectionObserver') {
+            // @ts-ignore
+            return createIntersectionObserver(...args)
+          } else if (method === 'createMediaQueryObserver') {
+            return createMediaQueryObserver()
           } else {
             console.error(`page 下没有 ${method} 方法`)
           }
@@ -625,3 +675,5 @@ export default function withWeapp (weappConf: WxOptions, isApp = false) {
     return BaseComponent
   }
 }
+
+export * from './convert-tools'