@tarojs/plugin-platform-harmony-ets 4.0.0-beta.11 → 4.0.0-beta.13

package/dist/runtime-ets/bom/window.ts

@@ -3,6 +3,7 @@ import { History, Location } from '@tarojs/runtime/dist/runtime.esm'
 
 import { TaroEventTarget } from '../dom/eventTarget'
 import { getComputedStyle } from './getComputedStyle'
+import { nav } from './navigator'
 
 import type { TaroDocument } from '../dom/document'
 
@@ -13,6 +14,7 @@ class Window extends TaroEventTarget {
 
   public location: any
   public history: any
+  public navigator = nav
   public getComputedStyle = getComputedStyle
 
   constructor () {

package/dist/runtime-ets/current.ts

@@ -14,3 +14,5 @@ export const Current: any = {
   }),
   createHarmonyElement: null
 }
+
+export const getCurrentInstance = () => Current

package/dist/runtime-ets/dom/element/element.ts

@@ -6,7 +6,7 @@ import { initComponentNodeInfo, triggerAttributesCallback } from '../../utils/in
 import { bindAnimation } from '../bind'
 import { ClassList } from '../class-list'
 import { NodeType, TaroNode } from '../node'
-import StyleSheet from '../stylesheet'
+import StyleSheet, { HarmonyStyle } from '../stylesheet'
 
 import type { StandardProps } from '@tarojs/components/types'
 import type { TaroAny } from '../../utils'
@@ -26,9 +26,6 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public readonly tagName: string
   public _attrs: T & TaroExtraProps = {} as T & TaroExtraProps
 
-  _client?: Area
-  _scroll?: Area
-
   constructor(tagName: string) {
     super(tagName.replace(new RegExp('(?<=.)([A-Z])', 'g'), '-$1').toUpperCase(), NodeType.ELEMENT_NODE)
     this.tagName = this.nodeName
@@ -159,4 +156,44 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public get style (): ICSSStyleDeclaration | null {
     return this._style
   }
+
+  // 伪类，不存在style动态设置，均已被转换为鸿蒙样式
+  // TODO：可根据实际情况，迁移到具体的组件中，如View、ScrollView中，Text\Image其实是不需要的
+  public _pseudo_before: StyleSheet | null
+
+  public get pseudo_before () {
+    return this._pseudo_before?.hmStyle
+  }
+
+  public set_pseudo_before (value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_before) {
+        this._pseudo_before = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_before![key] = value[key]
+      })
+    } else {
+      this._pseudo_before = null
+    }
+  }
+
+  public _pseudo_after: StyleSheet | null
+
+  public get pseudo_after () {
+    return this._pseudo_after?.hmStyle
+  }
+
+  public set_pseudo_after (value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_after) {
+        this._pseudo_after = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_after![key] = value[key]
+      })
+    } else {
+      this._pseudo_after = null
+    }
+  }
 }

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

@@ -15,6 +15,7 @@ export const WEB_STYLE_MAP = {
   marginRight: ['_marginRight'],
   marginBottom: ['_marginBottom'],
   marginLeft: ['_marginLeft'],
+  position: ['_position'],
   top: ['_top'],
   left: ['_left'],
   flex: ['_flexGrow', '_flexShrink', '_flexBasis'],
@@ -74,7 +75,8 @@ export const WEB_STYLE_MAP = {
   textDecoration: ['_textDecoration'],
   textOverflow: ['_textOverflow'],
   WebkitLineClamp: ['_WebkitLineClamp'],
-  transform: ['_transform']
+  transform: ['_transform'],
+  display: ['_display']
 }
 
 // 将web端的style转换为hm端的style
@@ -458,6 +460,27 @@ export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
         hmStyle._transform = parseTransform(value)
         break
       }
+      case 'position': {
+        hmStyle._position = value
+        break
+      }
+      case 'display': {
+        hmStyle._display = value
+        break
+      }
+      case 'zIndex': {
+        hmStyle._zIndex = Number(value)
+        break
+      }
+      case 'opacity': {
+        const val = Number(value)
+        hmStyle._opacity = Number.isNaN(val) ? 1 : val
+        break
+      }
+      case 'overflow': {
+        hmStyle._overflow = value === 'hidden'
+        break
+      }
       default: {
         hmStyle[key] = value
         break
@@ -472,9 +495,9 @@ function setBackgroundImage(hmStyle, value) {
     // 如果包含 url()，则说明是 background-image 属性
     const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
     if (match) {
-      hmStyle._backgroundImage = [{
+      hmStyle._backgroundImage = {
         src: match[1]
-      }]
+      }
     }
   }
 }
@@ -482,10 +505,10 @@ function setBackgroundImage(hmStyle, value) {
 function setBackgroundRepeat(hmStyle, value) {
   if (typeof value === 'string') {
     switch (value) {
-      case 'repeat-x': hmStyle._backgroundRepeat = [ImageRepeat.X]; break
-      case 'repeat-y': hmStyle._backgroundRepeat = [ImageRepeat.Y]; break
-      case 'no-repeat': hmStyle._backgroundRepeat = [ImageRepeat.NoRepeat]; break
-      default: hmStyle._backgroundRepeat = [ImageRepeat.XY]; break
+      case 'repeat-x': hmStyle._backgroundRepeat = ImageRepeat.X; break
+      case 'repeat-y': hmStyle._backgroundRepeat = ImageRepeat.Y; break
+      case 'no-repeat': hmStyle._backgroundRepeat = ImageRepeat.NoRepeat; break
+      default: hmStyle._backgroundRepeat = ImageRepeat.XY; break
     }
   }
 }
@@ -494,9 +517,9 @@ function setBackgroundSize(hmStyle, value) {
   if (typeof value === 'string') {
     const sizes = value.split(' ')
     if (sizes.length === 1) {
-      hmStyle._backgroundSize = [{ width: getUnit(sizes[0]) }]
+      hmStyle._backgroundSize = { width: getUnit(sizes[0]) }
     } else if (sizes.length === 2) {
-      hmStyle._backgroundSize = [{ width: getUnit(sizes[0]), height: getUnit(sizes[1]) }]
+      hmStyle._backgroundSize = { width: getUnit(sizes[0]), height: getUnit(sizes[1]) }
     }
   }
 }
@@ -508,28 +531,28 @@ function setBackgroundPosistion (hmStyle, value) {
     const vertical = positions[1].toLowerCase() || 'top'
 
     if (horizontal === 'left' && vertical === 'top') {
-      hmStyle._backgroundPosition = [Alignment.TopStart]
+      hmStyle._backgroundPosition = Alignment.TopStart
     } else if (horizontal === 'center' && vertical === 'top') {
-      hmStyle._backgroundPosition = [Alignment.Top]
+      hmStyle._backgroundPosition = Alignment.Top
     } else if (horizontal === 'right' && vertical === 'top') {
-      hmStyle._backgroundPosition = [Alignment.TopEnd]
+      hmStyle._backgroundPosition = Alignment.TopEnd
     } else if (horizontal === 'left' && vertical === 'center') {
-      hmStyle._backgroundPosition = [Alignment.Start]
+      hmStyle._backgroundPosition = Alignment.Start
     } else if (horizontal === 'center' && vertical === 'center') {
-      hmStyle._backgroundPosition = [Alignment.Center]
+      hmStyle._backgroundPosition = Alignment.Center
     } else if (horizontal === 'right' && vertical === 'center') {
-      hmStyle._backgroundPosition = [Alignment.End]
+      hmStyle._backgroundPosition = Alignment.End
     } else if (horizontal === 'left' && vertical === 'bottom') {
-      hmStyle._backgroundPosition = [Alignment.BottomStart]
+      hmStyle._backgroundPosition = Alignment.BottomStart
     } else if (horizontal === 'center' && vertical === 'bottom') {
-      hmStyle._backgroundPosition = [Alignment.Bottom]
+      hmStyle._backgroundPosition = Alignment.Bottom
     } else if (horizontal === 'right' && vertical === 'bottom') {
-      hmStyle._backgroundPosition = [Alignment.BottomEnd]
+      hmStyle._backgroundPosition = Alignment.BottomEnd
     } else {
       if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(horizontal)) {
-        hmStyle._backgroundPosition = [{ x: getUnit(horizontal) }]
+        hmStyle._backgroundPosition = { x: getUnit(horizontal) }
         if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(vertical)) {
-          hmStyle._backgroundPosition = [{ x: getUnit(horizontal), y: getUnit(vertical) }]
+          hmStyle._backgroundPosition = { x: getUnit(horizontal), y: getUnit(vertical) }
         }
       }
     }

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

@@ -15,7 +15,7 @@ export default class StyleSheet {
     return this.hmStyle.display
   }
 
-  set display (value: string) {
+  set _display (value: string) {
     this.hmStyle.display = value
   }
 
@@ -23,7 +23,7 @@ export default class StyleSheet {
     return this.hmStyle.position
   }
 
-  set position (value: string) {
+  set _position (value: string) {
     this.hmStyle.position = value
   }
 
@@ -245,17 +245,17 @@ export default class StyleSheet {
   }
 
   set _background (value: TaroAny) {
-    const _backgroundImage: HarmonyType.Background.backgroundImage = value?.image?.[0]
+    const _backgroundImage: HarmonyType.Background.backgroundImage = value?.image
     if (_backgroundImage) {
       this.hmStyle.backgroundImage = _backgroundImage.src
       if (_backgroundImage.repeat) {
         this.hmStyle.backgroundRepeat = _backgroundImage.repeat
       }
     }
-    this.hmStyle.backgroundImageSize = value?.size?.[0]
+    this.hmStyle.backgroundImageSize = value?.size
     this.hmStyle.backgroundColor = this.hmStyle.backgroundImage ? null : value?.color
 
-    const _backgroundPosition: HarmonyType.Background.backgroundImagePosition = value?.position?.[0]
+    const _backgroundPosition: HarmonyType.Background.backgroundImagePosition = value?.position
     this.hmStyle.backgroundImagePosition = _backgroundPosition
   }
 
@@ -272,7 +272,7 @@ export default class StyleSheet {
   }
 
   set _backgroundImage (value) {
-    this.hmStyle.backgroundImage = value?.[0]
+    this.hmStyle.backgroundImage = value
   }
 
   get backgroundRepeat () {
@@ -287,7 +287,7 @@ export default class StyleSheet {
   }
 
   set _backgroundRepeat (value: ImageRepeat[]) {
-    this.hmStyle.backgroundRepeat = value?.[0]
+    this.hmStyle.backgroundRepeat = value
   }
 
   get backgroundSize () {
@@ -297,7 +297,7 @@ export default class StyleSheet {
   }
 
   set _backgroundSize (value: HarmonyType.Background.backgroundImageSize[]) {
-    this.hmStyle.backgroundSize = value?.[0]
+    this.hmStyle.backgroundSize = value
   }
 
   get backgroundPosition () {
@@ -322,7 +322,7 @@ export default class StyleSheet {
   }
   
   set _backgroundPosition (value: HarmonyType.Background.backgroundImagePosition[]) {
-    this.hmStyle.backgroundPosition = value?.[0]
+    this.hmStyle.backgroundPosition = value
   }
 
   get border () {
@@ -493,7 +493,7 @@ export default class StyleSheet {
     return Number(this.hmStyle.zIndex)
   }
 
-  set zIndex (value: string) {
+  set _zIndex (value: string) {
     this.hmStyle.zIndex = Number(value)
   }
 
@@ -501,16 +501,15 @@ export default class StyleSheet {
     return this.hmStyle.opacity
   }
 
-  set opacity (value: string) {
-    const val = Number(value)
-    this.hmStyle.opacity = Number.isNaN(val) ? 1 : val
+  set _opacity (value: number) {
+    this.hmStyle.opacity = value
   }
 
   get overflow () {
     return this.hmStyle.overflow ? 'hidden' : 'visible'
   }
 
-  set overflow (value: string) {
+  set _overflow (value: string) {
     this.hmStyle.overflow = value === 'hidden'
   }
 
@@ -658,5 +657,13 @@ export default class StyleSheet {
   set _transformOrigin(value) {
     this.hmStyle.transformOrigin = value
   }
+
+  get content () {
+    return this.hmStyle._content
+  }
+
+  set _content (value) {
+    this.hmStyle.content = value
+  }
 }
 

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

@@ -100,6 +100,7 @@ export interface TaroStyleType {
   zIndex?: number
   overflow?: boolean
   focus?: boolean
+  content?: string
 }
 
 export interface TaroTextStyleType {

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

@@ -237,7 +237,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/native-page.ts

@@ -80,7 +80,11 @@ 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
       }

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

@@ -184,6 +184,7 @@ export function createPageConfig (component: any, pageName?: string, pageConfig?
         safeExecute(this.$taroPath, ON_READY)
         // 通过事件触发子组件的生命周期
         requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady.called = true
       })
     },
     [ONSHOW] (options = {}) {

package/dist/runtime-utils.js

@@ -1,10 +1,10 @@
 import { isFunction, isString, isArray, isObject, isNull, isNumber, isUndefined, queryToJson, PLATFORM_TYPE, singleQuote, internalComponents } from '@tarojs/shared';
 import _display from '@ohos.display';
-import { Current, window, hooks, document as document$1, getPageScrollerOrNode, findChildNodeWithDFS, setNodeEventCallbackAndTriggerComponentUpdate, AREA_CHANGE_EVENT_NAME, disconnectEvent, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime';
+import { Current, window, hooks, document as document$1, getPageScrollerOrNode, findChildNodeWithDFS, setNodeEventCallbackAndTriggerComponentUpdate, AREA_CHANGE_EVENT_NAME, disconnectEvent, VISIBLE_CHANGE_EVENT_NAME, getCurrentInstance } from '@tarojs/runtime';
 import { eventCenter, Events, History } from '@tarojs/runtime/dist/runtime.esm';
+import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
 import deviceInfo from '@ohos.deviceInfo';
 import i18n from '@ohos.i18n';
-import deviceMethod from '@system.device';
 import errorManager from '@ohos.app.ability.errorManager';
 import sensor from '@ohos.sensor';
 import batteryInfo, { BatteryChargeState } from '@ohos.batteryInfo';
@@ -266,16 +266,37 @@ const preloadWebview = /* @__PURE__ */ temporarilyNotSupport('preloadWebview');
 const preloadSkylineView = /* @__PURE__ */ temporarilyNotSupport('preloadSkylineView');
 const preloadAssets = /* @__PURE__ */ temporarilyNotSupport('preloadAssets');
 
-// 设备信息,从 API Version 6 开始支持
-const display = _display.getDefaultDisplaySync();
-let device;
-deviceMethod.getInfo({
-    success: data => {
-        device = data;
-    }
-});
+let display;
+let safeArea = null;
+try {
+    display = _display.getDefaultDisplaySync();
+    // @ts-ignore
+    display.getCutoutInfo((err, { boundingRects = [], waterfallDisplayAreaRects = {} } = {}) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (err === null || err === void 0 ? void 0 : err.code) {
+            console.error('Failed to get cutout info', JSON.stringify(err));
+            return;
+        }
+        const top = Math.max(...boundingRects.map(rect => rect.top * 2 + rect.height), ((_a = waterfallDisplayAreaRects.top) === null || _a === void 0 ? void 0 : _a.top) + ((_b = waterfallDisplayAreaRects.top) === null || _b === void 0 ? void 0 : _b.height));
+        const bottom = (((_c = waterfallDisplayAreaRects.bottom) === null || _c === void 0 ? void 0 : _c.top) + ((_d = waterfallDisplayAreaRects.bottom) === null || _d === void 0 ? void 0 : _d.height)) || display.height;
+        const left = ((_e = waterfallDisplayAreaRects.left) === null || _e === void 0 ? void 0 : _e.left) + ((_f = waterfallDisplayAreaRects.left) === null || _f === void 0 ? void 0 : _f.width);
+        const right = (((_g = waterfallDisplayAreaRects.right) === null || _g === void 0 ? void 0 : _g.left) + ((_h = waterfallDisplayAreaRects.right) === null || _h === void 0 ? void 0 : _h.width)) || display.width;
+        safeArea = {
+            top,
+            bottom,
+            left,
+            right,
+            height: bottom - top,
+            width: right - left,
+        };
+    });
+}
+catch (e) {
+    console.error('Failed to get display', e);
+}
 /* 同步版本 */
 const getSystemInfoSync = function () {
+    var _a, _b;
     const res = {};
     res.SDKVersion = deviceInfo && deviceInfo.sdkApiVersion; // 客户端基础库版本 string
     res.albumAuthorized = false; // 允许使用相册的开关（仅 iOS 有效） boolean
@@ -285,7 +306,7 @@ const getSystemInfoSync = function () {
     res.cameraAuthorized = null; // 允许使用摄像头的开关 boolean
     res.enableDebug = null; // 是否已打开调试 boolean
     res.fontSizeSetting = null; // 用户字体大小（单位px） number
-    res.language = i18n && i18n.getSystemLanguage && i18n.getSystemLanguage(); // string
+    res.language = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.getSystemLanguage) === null || _a === void 0 ? void 0 : _a.call(i18n); // string
     res.locationAuthorized = null; // 定位的开关 boolean
     res.locationEnabled = null; // 地理位置的系统开关 boolean
     res.microphoneAuthorized = null; // 麦克风的开关 boolean
@@ -296,17 +317,18 @@ const getSystemInfoSync = function () {
     res.notificationSoundAuthorized = false; // 通知带有声音的开关（仅 iOS 有效）boolean
     res.phoneCalendarAuthorized = null; // 使用日历的开关 boolean
     res.wifiEnabled = false; // Wi-Fi 的系统开关 boolean
-    res.pixelRatio = null; // 设备像素比,number
-    res.platform = 'android'; // 客户端平台 string
-    res.safeArea = null; // 在竖屏正方向下的安全区域 General.SafeAreaResult
-    res.screenHeight = display && display.height; // 屏幕高度，单位px number
-    res.screenWidth = display && display.width; // 屏幕宽度，单位px number
-    res.statusBarHeight = null; // 状态栏的高度，单位px number
-    res.system = deviceInfo && deviceInfo.osFullName; // 操作系统及版本 string
-    res.theme = null; // 系统当前主题，取值为light或dark 'light' | 'dark'
-    res.windowWidth = device && device.windowWidth; // 可使用窗口宽度，单位px number
-    res.windowHeight = device && device.windowHeight; // 可使用窗口高度，单位px number
-    res.version = deviceInfo && deviceInfo.displayVersion; // 版本号 string
+    res.pixelRatio = display && (Math.round(display.xDPI / display.width * 100) / 100); // 设备像素比,number
+    res.platform = 'harmony'; // 客户端平台 string
+    res.safeArea = safeArea; // 在竖屏正方向下的安全区域 General.SafeAreaResult
+    res.screenHeight = display === null || display === void 0 ? void 0 : display.height; // 屏幕高度，单位px number
+    res.screenWidth = display === null || display === void 0 ? void 0 : display.width; // 屏幕宽度，单位px number
+    res.statusBarHeight = safeArea === null || safeArea === void 0 ? void 0 : safeArea.top; // 状态栏的高度，单位px number
+    res.system = deviceInfo === null || deviceInfo === void 0 ? void 0 : deviceInfo.osFullName; // 操作系统及版本 string
+    // Note: 更新配置时才能记录
+    res.theme = ((_b = AppStorage.get('__TARO_APP_CONFIG')) === null || _b === void 0 ? void 0 : _b.colorMode) === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? 'dark' : 'light'; // 系统当前主题，取值为light或dark 'light' | 'dark'
+    res.windowHeight = display === null || display === void 0 ? void 0 : display.height; // 可使用窗口高度，单位px number
+    res.windowWidth = display === null || display === void 0 ? void 0 : display.width; // 可使用窗口宽度，单位px number
+    res.version = deviceInfo === null || deviceInfo === void 0 ? void 0 : deviceInfo.displayVersion; // 版本号 string
     return res;
 };
 /* 异步版本 */
@@ -1984,7 +2006,6 @@ function getEnv() {
 }
 // TODO
 const getCurrentPages = () => [];
-const getCurrentInstance = () => Current;
 const requirePlugin$1 = temporarilyNotSupport('requirePlugin');
 
 // @ts-nocheck
@@ -4752,7 +4773,7 @@ const defaultBaseFontSize = 20;
 const defaultUnitPrecision = 5;
 const defaultTargetUnit = 'vp';
 function getApp$1() {
-    return Current.app;
+    return Current.app || {};
 }
 function initPxTransform({ designWidth = defaultDesignWidth, deviceRatio = defaultDesignRatio, baseFontSize = defaultBaseFontSize, unitPrecision = defaultUnitPrecision, targetUnit = defaultTargetUnit }) {
     const taro = Current.taro;