@tarojs/plugin-platform-harmony-ets 4.0.0-beta.5 → 4.0.0-beta.50

package/dist/runtime-ets/dom/stylesheet/type.ts

@@ -1,11 +1,14 @@
 // @ts-nocheck
-import matrix4 from '@ohos.matrix4'
+// import matrix4 from '@ohos.matrix4'
 
 export interface HarmonyStyle extends TaroStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
   WebkitLineClamp?: number
+  whiteSpace?: string
   letterSpacing?: number | string
+  verticalAlign?: Alignment
+  lineHeight?: Length
 }
 
 export interface TaroStyleType {
@@ -30,11 +33,14 @@ export interface TaroStyleType {
   maxWidth?: Length
 
   display?: 'flex' | 'block' | 'none'
+  visibility?: 'visible' | 'hidden'
 
   // position
   position?: 'relative' | 'absolute' | 'fixed'
   top?: Length
   left?: Length
+  bottom?: Length
+  right?: Length
 
   // flex
   flexBasis?: number | string
@@ -54,6 +60,10 @@ export interface TaroStyleType {
   backgroundSize?: SizeOptions | ImageSize
   backgroundPosition?: Position | Alignment
 
+  // 渐变
+  linearGradient?: HarmonyType.LinearGradient
+  radialGradient?: HarmonyType.RadialGradient
+
   // transform
   rotate?: HarmonyType.Transform.Rotate
   translate?: HarmonyType.Transform.Translate
@@ -89,24 +99,36 @@ export interface TaroStyleType {
   fontStyle?: FontStyle
   fontWeight?: number | FontWeight | string
   fontFamily?: string | Resource
-  lineHeight?: string | number | Resource
-  textDecoration?: TextDecorationType
+  textDecoration?: {
+    type: TextDecorationType
+  }
 
-  // gradient
-  linearGradient?: HarmonyType.LinearGradient
+  // animation
+  animationName?: {
+    percentage: number
+    event: TaroStyleType
+  }[]
+  animationDuration?: number
+  animationTimingFunction?: string
+  animationDelay?: number
+  animationIterationCount?: number
 
   // other
   opacity?: number | Resource
   zIndex?: number
-  overflow?: boolean
+  overflow?: string
   focus?: boolean
+  content?: string
 }
 
 export interface TaroTextStyleType {
   textAlign?: TextAlign
   textOverflow?: HarmonyType.Overflow
   WebkitLineClamp?: number
+  whiteSpace?: string
   letterSpacing?: number | string
+  verticalAlign?: Alignment
+  lineHeight?: string | number | Resource
 }
 
 export namespace HarmonyType {
@@ -121,6 +143,12 @@ export namespace HarmonyType {
     colors: Array<[ResourceColor, number]>
     repeating?: boolean
   }
+  export interface RadialGradient {
+    center: any
+    radius: number | string
+    colors: Array<[ResourceColor, number]>
+    repeating?: boolean
+  }
   export interface Overflow {
     overflow: TextOverflow
   }
@@ -134,7 +162,6 @@ export namespace HarmonyType {
     export interface backgroundImage {
       src: ResourceStr
       repeat?: ImageRepeat
-      colors?: Array<[ResourceColor, number]>
     }
     export type backgroundImageSize = SizeOptions | ImageSize
     export type backgroundImagePosition = Position | Alignment
@@ -166,7 +193,11 @@ export namespace HarmonyType {
       centerX?: number | string
       centerY?: number | string
     }
-    export type Transform = matrix4.Matrix4Transit
+    // export type Transform = matrix4.Matrix4Transit
+    export type Transform = {
+      Translate?: Translate
+      Scale?: Scale
+      Rotate?: Rotate
+    }
   }
 }
-

package/dist/runtime-ets/dom/stylesheet/util.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import matrix4 from '@ohos.matrix4'
+// import matrix4 from '@ohos.matrix4'
 import { isNumber } from '@tarojs/shared'
 
 import { convertNumber2VP } from '../../'
@@ -163,7 +163,6 @@ export class FlexManager {
   }
 }
 
-
 export class BORDER_STYLE_MAP {
   static solid = BorderStyle.Solid
   static dotted = BorderStyle.Dotted
@@ -184,53 +183,53 @@ export class BORDER_STYLE_MAP {
       case BorderStyle.Solid: return 'solid'
       default: return ''
     }
-  
   }
 }
 
-
 export function getNodeMarginOrPaddingData (dataValue: string) {
   let res: any = {}
   if (dataValue) {
-    const values = dataValue.trim().split(new RegExp('\\s+'))
+    const values = dataValue.toString().trim().split(new RegExp('\\s+'))
+    let val1: string
+    let val2: string
     switch (values.length) {
       case 1:
-        res = { top: values[0], right: values[0], bottom: values[0], left: values[0] }
+        val1 = getUnit(values[0])
+        res = { top: val1, right: val1, bottom: val1, left: val1 }
         break
       case 2:
-        res = { top: values[0], right: values[1], bottom: values[0], left: values[1] }
+        val1 = getUnit(values[0])
+        val2 = getUnit(values[1])
+        res = { top: val1, right: val2, bottom: val1, left: val2 }
         break
       case 3:
-        res = { top: values[0], right: values[1], bottom: values[2], left: values[1] }
+        val2 = getUnit(values[1])
+        res = { top: getUnit(values[0]), right: val2, bottom: getUnit(values[2]), left: val2 }
         break
       case 4:
-        res = { top: values[0], right: values[1], bottom: values[2], left: values[3] }
+        res = { top: getUnit(values[0]), right: getUnit(values[1]), bottom: getUnit(values[2]), left: getUnit(values[3]) }
         break
       default:
         break
     }
-    Object.keys(res).forEach(key => {
-      res[key] = getUnit(res[key]) || 0
-    })
   }
   return res
 }
 
-
 export function getUnit (val) {
   // 空的字符串代表 Reconciler remove 了这个 prop，不进行后面的逻辑了
   if (val === '') return val
 
-  if (/\d+(vp)$/.test(val)) {
+  if (/\d+(vp|px)$/.test(val)) {
     return val
   } else if (isNumber(val)) {
-    return convertNumber2VP(parseFloat(val))
+    return parseFloat(val) + 'px'
   }
   if (val) {
     // 匹配vw\vh
-    const exec = val.match(/(\d+)(vw|vh|px)$/)
+    const exec = val.match(/(-?\d*(\.\d+)?)(vw|vh)$/)
     if (exec) {
-      const [, num, unit] = exec
+      const [, num, , unit] = exec
       return convertNumber2VP(parseFloat(num), unit)
     }
   }
@@ -238,19 +237,26 @@ export function getUnit (val) {
 }
 
 export function getTransform(transform) {
+  // if (transform) {
+  //   return transform.reduce((res, item) => {
+  //     switch (item.type) {
+  //       case 'Translate': return res.translate(item.value)
+  //       case 'Scale': return res.scale(item.value)
+  //       case 'Rotate': return res.rotate(item.value)
+  //       case 'Matrix': return res.combine(matrix4.init(item.value))
+  //     }
+  //     return res
+  //   }, matrix4.identity())
+  // }
+  const result = {}
   if (transform) {
-    return transform.reduce((res, item) => {
-      switch (item.type) {
-        case 'Translate': return res.translate(item.value)
-        case 'Scale': return res.scale(item.value)
-        case 'Rotate': return res.rotate(item.value)
-        case 'Matrix': return res.combine(matrix4.init(item.value))
-      }
-      return res
-    }, matrix4.identity())
+    transform.forEach((item) => {
+      result[item.type] = item.value
+    })
+    return result
   }
 }
 
 export function capitalizeFirstLetter (str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
-}
+}

package/dist/runtime-ets/index.ts

@@ -10,9 +10,9 @@ export * from './dom/element'
 export * from './dom/event'
 export * from './dom/node'
 export * from './dom/stylesheet'
+export * from './dom/cssNesting'
 export * from './interface'
 export * from './utils'
-export * from './utils/bind'
 export * from './utils/info'
-export { URLSearchParams, eventSource } from '@tarojs/runtime/dist/runtime.esm'
+export { URL, URLSearchParams, eventSource, Events } from '@tarojs/runtime/dist/runtime.esm'
 export { hooks } from '@tarojs/shared'

package/dist/runtime-ets/interface/event.ts

@@ -7,4 +7,4 @@ export interface EventOptions {
 export interface EventHandler<T = any, R = void> {
   (...args: T[]): R
   _stop?: boolean
-}
+}

package/dist/runtime-ets/utils/index.ts

@@ -1,5 +1,5 @@
 import _display from '@ohos.display'
-import { pxTransformHelper } from '@tarojs/taro'
+import { getSystemInfoSync, pxTransformHelper } from '@tarojs/taro'
 
 import { NodeType } from '../dom/node'
 import convertWebStyle2HmStyle from '../dom/stylesheet/covertWeb2Hm'
@@ -38,28 +38,80 @@ export function convertNumber2PX (value: number) {
   return pxTransformHelper(value, 'vp')
 }
 
-export function convertNumber2VP (value: number, unit = 'px') {
+export function convertNumber2VP (value: number, unit = 'px'): string | number {
   if (unit === 'vw' || unit === 'vh') {
     return (value / 100 * (unit === 'vw' ? display.width: display.height)) + 'px'
   }
+  if (unit === 'PX') {
+    // 特殊单位：相当于PX、pX、Px
+    return pxTransformHelper(value, 'PX')
+  }
   return pxTransformHelper(value, 'vp')
 }
 
-export function calcDynamicStyle (styleSheet: Record<string, CSSProperties>, classNames: string, style: CSSProperties): CSSProperties {
+export function parseClasses (classNames = ''): string[] {
+  return classNames.includes(' ') ? classNames.split(' ') : [classNames]
+}
+
+// 合并静态样式，从样式表里面找到对应的样式
+export function calcStaticStyle (styleSheet: Record<string, CSSProperties>, classNames = ''): CSSProperties {
   const obj: CSSProperties[] = []
-  const classes = typeof classNames === 'string' ? classNames.split(' ') : []
-  for (let i = 0; i < classes.length; i++) {
-    const className = classes[i]
-    if (styleSheet[className]) {
-      obj.push(styleSheet[className])
+
+  if (!styleSheet.cache) {
+    styleSheet.cache = {}
+  }
+  const cache: Record<string, CSSProperties> = styleSheet.cache as Record<string, CSSProperties>
+
+  const classes = parseClasses(classNames)
+  if (classes.length === 1) {
+    // 同一个引用
+    return styleSheet[classes[0]]
+  } else {
+    if (cache[classNames]) {
+      return cache[classNames]
+    } else {
+      for (let i = 0; i < classes.length; i++) {
+        const className = classes[i]
+        if (styleSheet[className]) {
+          obj.push(styleSheet[className])
+        }
+      }
+      const result = Object.assign.apply(null, [{}].concat(obj))
+
+      cache[classNames] = result
+      
+      return result
     }
   }
+}
 
+// 动态样式计算，需要经过web2harmony进行反转
+export function calcDynamicStyle (style: CSSProperties): CSSProperties {
   if (style) {
-    obj.push(convertWebStyle2HmStyle(style))
+    return convertWebStyle2HmStyle(style)
   }
+  return {}
+}
+
+// css env()环境样式获取
+export function __env__(safeAreaType: string, fallback?: string | number) {
+  const sysInfo = getSystemInfoSync()
   
-  return Object.assign.apply(null, [{}].concat(obj))
+  switch (safeAreaType) {
+    case 'safe-area-inset-top': {
+      return sysInfo.safeArea?.top ? `${sysInfo.safeArea?.top}px` : fallback
+    }
+    case 'safe-area-inset-right': {
+      return sysInfo.safeArea?.right ? `${sysInfo.screenWidth - sysInfo.safeArea?.right}px` : fallback
+    }
+    case 'safe-area-inset-bottom': {
+      return sysInfo.safeArea?.bottom ? `${sysInfo.screenHeight - sysInfo.safeArea?.bottom}px` : fallback
+    }
+    case 'safe-area-inset-left': {
+      return sysInfo.safeArea?.left ? `${sysInfo.safeArea?.left}px` : fallback
+    }
+  }
+  return fallback
 }
 
 export function getPageScrollerOrNode (scrollerOrNode: any, page: any) {
@@ -76,6 +128,10 @@ export function getPageScrollerOrNode (scrollerOrNode: any, page: any) {
   return scrollerOrNode
 }
 
+export function ObjectKeys(obj: object): string[] {
+  return Object.keys(obj)
+}
+
 export function ObjectAssign(...objects) {
   return Object.assign.apply(this, [{}].concat(...objects))
 }
@@ -91,7 +147,6 @@ export function bindFn (fn: any, ctx: any, ...args: any) {
   }
 }
 
-
 // 使用深度优先遍历寻找节点树中对应的子节点，且只需要找到第一个
 // 通过 selector 判断是 id 还是 selector，从 node 的 id 和 className 属性中寻找
 export function findChildNodeWithDFS<T extends TaroElement = TaroElement> (node: TaroElement, selector: string | ((ele: T) => boolean), selectAll: true): T[] | null;

package/dist/runtime-ets/utils/info.ts

@@ -50,7 +50,7 @@ function tapCallbackToNodeAndUpdate (node: TaroElement, eventName: string, callb
     callback && callback(...eventResult)
   }
 
-  if (!node._isDynamicNode || !node._isCompileMode) {
+  if (!node._isDynamicNode && node._isCompileMode) {
     node.updateComponent()
   }
 }

package/dist/runtime-framework/react/app.ts

@@ -1,10 +1,11 @@
 import { Current, document } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
-import { AppInstance, eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+import { eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
 
 import { setReconciler } from './connect'
 import { injectPageInstance } from './page'
 import { EMPTY_OBJ, incrementId, isClassComponent } from './utils'
 
+import type { AppInstance } from '@tarojs/runtime'
 import type React from 'react'
 
 let h: typeof React.createElement
@@ -237,7 +238,11 @@ export function createReactApp (
     }
   } as unknown as AppInstance
 
-  Current.app = app
+  if (Current.app) {
+    Current.app = Object.assign(app, Current.app)
+  } else {
+    Current.app = app
+  }
 
   return app
 }

package/dist/runtime-framework/react/index.ts

@@ -2,8 +2,6 @@ import { hooks } from '@tarojs/shared'
 
 import * as taroHooks from './hooks'
 
-// declare const __TARO_FRAMEWORK__: string;
-
 hooks.tap('initNativeApi', function (taro) {
   for (const hook in taroHooks) {
     taro[hook] = taroHooks[hook]

package/dist/runtime-framework/react/native-page.ts

@@ -1,15 +1,14 @@
 import { Current, document, requestAnimationFrame, TaroElement, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
-import { CONTEXT_ACTIONS, env, eventCenter, TFunc } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+import { addLeadingSlash, CONTEXT_ACTIONS, env, eventCenter, TFunc } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
 import { ensure, hooks, isUndefined } from '@tarojs/shared'
 
 import { ReactMeta as reactMeta } from './app'
 import { setReconciler } from './connect'
 import { ON_HIDE, ON_READY, ON_SHOW } from './constant'
 import {
-  addLeadingSlash,
   getOnHideEventKey,
   getOnReadyEventKey,
-  getOnShowEventKey, 
+  getOnShowEventKey,
   getPath,
   injectPageInstance,
   removePageInstance,
@@ -53,10 +52,16 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
 
     componentDidMount () {
       this.ctx.component = this
-      const rootElement = this.root.current!
-      rootElement.ctx = this.ctx
-      // TODO: performUpdate
-      // rootElement.performUpdate(true)
+      if (this.root.current) {
+        this.root.current = this.ctx
+      }
+    }
+
+    // React 16 uncaught error 会导致整个应用 crash，
+    // 目前把错误缩小到页面
+    componentDidCatch (error, info: React.ErrorInfo) {
+      console.warn(error)
+      console.error(info.componentStack)
     }
 
     render () {
@@ -80,13 +85,24 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
 
     componentDidMount () {
       if (isDefaultEntryDom) {
-        Current.app = this
+        if (Current.app) {
+          Current.app = Object.assign(this, Current.app)
+        } else {
+          Current.app = this
+        }
       } else {
         nativeComponentApp = this
       }
       cb && cb()
     }
 
+    // React 16 uncaught error 会导致整个应用 crash，
+    // 目前把错误缩小到页面
+    componentDidCatch (error, info: React.ErrorInfo) {
+      console.warn(error)
+      console.error(info.componentStack)
+    }
+
     mount (Component, compId, getCtx, cb?) {
       const isReactComponent = isClassComponent(R, Component)
       const inject = (node?: any) => node && injectPageInstance(node, compId)
@@ -153,7 +169,7 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
     // create
     const nativeApp = document.createElement('nativeComponent')
     // insert
-    app.appendChild(nativeApp)
+    app?.appendChild(nativeApp)
     app = nativeApp
   }
   // eslint-disable-next-line react/no-deprecated
@@ -253,7 +269,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
       window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
       // 触发onUnload生命周期
       safeExecute($taroPath, ONUNLOAD)
-      resetCurrent()
+      resetCurrent.call(this)
       unmounting = true
       Current.app!.unmount!($taroPath, () => {
         unmounting = false
@@ -274,6 +290,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
         safeExecute(this.$taroPath, ON_READY)
         // 通过事件触发子组件的生命周期
         requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady = {}
         this.onReady.called = true
       })
     },
@@ -306,12 +323,13 @@ export function createNativePageConfig (Component, pageName: string, react: type
   }
 
   function resetCurrent () {
-    // 小程序插件页面卸载之后返回到宿主页面时，需重置Current页面和路由。否则引发插件组件二次加载异常 fix:#11991
-    Current.page = null
-    Current.router = null
+    if (Current.page === this) {
+      // 小程序插件页面卸载之后返回到宿主页面时，需重置Current页面和路由。否则引发插件组件二次加载异常 fix:#11991
+      Current.page = null
+      Current.router = null
+    }
   }
 
-
   LIFECYCLES.forEach((lifecycle) => {
     pageObj[lifecycle] = function () {
       return safeExecute(this.$taroPath, lifecycle, ...arguments)

package/dist/runtime-framework/react/page.ts

@@ -1,5 +1,5 @@
 import { Current, document, requestAnimationFrame, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
-import { CONTEXT_ACTIONS, env, eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+import { addLeadingSlash, CONTEXT_ACTIONS, env, eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
 import { hooks, isArray, isFunction, isUndefined } from '@tarojs/shared'
 
 import { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, ON_UNLOAD } from './constant'
@@ -23,13 +23,6 @@ export function removePageInstance (id: string) {
   instances.delete(id)
 }
 
-export function addLeadingSlash (path?: string): string {
-  if (path == null) {
-    return ''
-  }
-  return path.charAt(0) === '/' ? path : '/' + path
-}
-
 export function safeExecute (path: string, lifecycle: string, ...args: unknown[]) {
   const instance = instances.get(path)
 
@@ -184,6 +177,8 @@ export function createPageConfig (component: any, pageName?: string, pageConfig?
         safeExecute(this.$taroPath, ON_READY)
         // 通过事件触发子组件的生命周期
         requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady = {}
+        this.onReady.called = true
       })
     },
     [ONSHOW] (options = {}) {