@tarojs/plugin-platform-harmony-ets 4.0.0-beta.21 → 4.0.0-beta.22

package/dist/apis/base/system.ts

@@ -75,7 +75,7 @@ export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
   res.notificationSoundAuthorized = false // 通知带有声音的开关（仅 iOS 有效）boolean
   res.phoneCalendarAuthorized = null // 使用日历的开关 boolean
   res.wifiEnabled = false // Wi-Fi 的系统开关 boolean
-  res.pixelRatio = display && (Math.round(display.xDPI / display.width * 100) / 100) // 设备像素比,number
+  res.pixelRatio = display && display.densityPixels // 设备像素比,number
   res.platform = 'harmony' // 客户端平台 string
   res.safeArea = safeArea // 在竖屏正方向下的安全区域 General.SafeAreaResult
   res.screenHeight = display?.height // 屏幕高度，单位px number

package/dist/apis/canvas/index.ts

@@ -1,12 +1,21 @@
+import { eventSource } from '@tarojs/runtime'
+
 import { temporarilyNotSupport } from '../utils'
 
+// @ts-ignore
+import type { TaroCanvasElement } from '@tarojs/runtime'
 // 画布
 
 /** 创建离屏 canvas 实例 */
 export const createOffscreenCanvas = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')
 
 /** 创建 canvas 的绘图上下文 CanvasContext 对象 */
-export const createCanvasContext = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')
+// export const createCanvasContext = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')
+export const createCanvasContext = (canvasId: string) => {
+  const dom = eventSource.get(`canvasId-${canvasId}`)
+  // return dom as TaroCanvasElement
+  if (dom) return (dom as unknown as TaroCanvasElement).context
+}
 
 /** 把当前画布指定区域的内容导出生成指定大小的图片 */
 export const canvasToTempFilePath = /* @__PURE__ */ temporarilyNotSupport('createOffscreenCanvas')

package/dist/apis/index.ts

@@ -78,7 +78,10 @@ function getRatio (value: number) {
 export function pxTransformHelper (size: number, unit?: string, isNumber = false): number | string {
   const config = (Current as any).taro?.config || {}
   const targetUnit = unit || config.targetUnit || defaultTargetUnit
-
+  
+  if (targetUnit === 'PX') {
+    return px2vp(size * display.scaledDensity) + 'vp'
+  }
   const ratio = getRatio(size)
   let val = size * ratio
 

package/dist/components-harmony-ets/canvas.ets

@@ -0,0 +1,43 @@
+import type { TaroCanvasElement } from '@tarojs/runtime'
+import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime'
+
+
+@Component
+export default struct TaroCanvas {
+  @ObjectLink node: TaroCanvasElement
+  rafId: number = 0
+
+
+  aboutToDisappear() {
+    if(this.rafId) {
+      cancelAnimationFrame(this.rafId)
+    }
+  }
+
+  build() {
+    Canvas(this.node._context)
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#ffff00')
+      .onReady(() => {
+        const context = this.node._context
+
+        const draw = () => {
+          if (this.node._drawList.length) {
+            while (this.node._drawList.length) {
+              const item = this.node._drawList.shift()
+              if (item) {
+                if (typeof context[item.key] === 'function') {
+                  context[item.key](...[].concat(item.value))
+                } else {
+                  context[item.key] = item.value
+                }
+              }
+            }
+          }
+          this.rafId = requestAnimationFrame(draw)
+        }
+        draw()
+      })
+  }
+}

package/dist/components-harmony-ets/index.ets

@@ -0,0 +1,53 @@
+import TaroImage from './image'
+import TaroText from './text'
+import TaroView from './view'
+import TaroIcon from './icon'
+import TaroForm from './form'
+import TaroLabel from './label'
+import TaroInput from './input'
+import TaroVideo from './video'
+import TaroCanvas from './canvas'
+import TaroButton from './button'
+import TaroPicker from './picker'
+import TaroSlider from './slider'
+import TaroSwitch from './switch'
+import TaroSwiper from './swiper'
+import TaroWebView from './webView'
+import TaroTextArea from './textArea'
+import TaroRichText from './richText'
+import TaroProgress from './progress'
+import TaroInnerHtml from './innerHtml'
+import TaroScrollView from './scrollView'
+import TaroMovableArea from './movableArea'
+import TaroMovableView from './movableView'
+import { TaroRadio, TaroRadioGroup } from './radio'
+import { TaroCheckboxGroup, TaroCheckbox } from './checkbox'
+
+export {
+  TaroImage,
+  TaroCanvas,
+  TaroText,
+  TaroView,
+  TaroIcon,
+  TaroForm,
+  TaroLabel,
+  TaroInput,
+  TaroVideo,
+  TaroButton,
+  TaroPicker,
+  TaroSlider,
+  TaroSwitch,
+  TaroSwiper,
+  TaroWebView,
+  TaroTextArea,
+  TaroRichText,
+  TaroProgress,
+  TaroInnerHtml,
+  TaroScrollView,
+  TaroMovableArea,
+  TaroMovableView,
+  TaroRadio,
+  TaroRadioGroup,
+  TaroCheckboxGroup,
+  TaroCheckbox
+}

package/dist/components-harmony-ets/utils/index.ts

@@ -110,8 +110,8 @@ function parseHtmlNode (nodes: Array<RichTextProps.Text | RichTextProps.HTMLElem
 
 // 背景偏移算法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
 export function computeBackgroundPosition(style) {
-  let offsetX = 0
-  let offsetY = 0
+  let offsetX = style.backgroundPosition?.x || 0
+  let offsetY = style.backgroundPosition?.y || 0
   if (style.backgroundSize && typeof style.backgroundSize !== 'number') {
     if (!isUndefined(style.backgroundSize.width) && style.width) {
       if (typeof style.backgroundPosition.x === 'string' && style.backgroundPosition.x.indexOf('%') > 0) {
@@ -132,5 +132,6 @@ export function computeBackgroundPosition(style) {
       }
     }
   }
-  return { offsetX: isNaN(offsetX) ? style.backgroundPosition.x : offsetX, offsetY: isNaN(offsetY) ? style.backgroundPosition.y: offsetY }
+
+  return { offsetX, offsetY }
 }

package/dist/index.d.ts

@@ -50,7 +50,7 @@ declare class Harmony extends TaroPlatformHarmony {
     runtimePath: string[] | string;
     taroComponentsPath: string;
     constructor(ctx: IPluginContext, config: TConfig);
-    get framework(): "vue3" | "react" | "preact" | "nerv" | "vue";
+    get framework(): "solid" | "vue3" | "react" | "preact" | "nerv" | "vue";
     get aliasFramework(): string;
     get apiLibrary(): string;
     get apiEntry(): RegExp[];

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

@@ -1,5 +1,6 @@
 import ohosWindow from '@ohos.window'
 import { History, Location } from '@tarojs/runtime/dist/runtime.esm'
+import { getSystemInfoSync } from '@tarojs/taro'
 
 import { TaroEventTarget } from '../dom/eventTarget'
 import { getComputedStyle } from './getComputedStyle'
@@ -30,6 +31,10 @@ class Window extends TaroEventTarget {
     return this._doc
   }
 
+  get devicePixelRatio () {
+    return getSystemInfoSync().pixelRatio
+  }
+
   setTimeout (...args: Parameters<typeof setTimeout>) {
     setTimeout(...args)
   }

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

@@ -0,0 +1,136 @@
+import { eventSource, TaroAny, TaroNode } from '@tarojs/runtime'
+
+import { TaroElement } from './element'
+
+import type { CanvasProps, CanvasTouchEvent } from '@tarojs/components/types'
+
+export class CanvasRenderingContext2DWXAdapter extends CanvasRenderingContext2D {
+  // constructor(settings?: RenderingContextSetting) {
+  //   super(settings)
+  // }
+
+  createCircularGradient() {
+    // Not supported now
+  }
+
+  draw(cb?: (...args: any[]) => any) {
+    typeof cb === 'function' && cb()
+    // Not supported now
+  }
+
+  setFillStyle(fillStyle: typeof this.fillStyle) {
+    this.fillStyle = fillStyle
+  }
+
+  setFontSize(fontSize: number) {
+    const font = this.font.split(' ')
+    font[2] = `${fontSize}`
+    this.font = font.join(' ')
+  }
+
+  setGlobalAlpha(globalAlpha: typeof this.globalAlpha) {
+    this.globalAlpha = globalAlpha
+  }
+
+  setLineCap(lineCap: typeof this.lineCap) {
+    this.lineCap = lineCap
+  }
+
+  setLineJoin(lineJoin: typeof this.lineJoin) {
+    this.lineJoin = lineJoin
+  }
+
+  setLineWidth(lineWidth: typeof this.lineWidth) {
+    this.lineWidth = lineWidth
+  }
+
+  setMiterLimit(miterLimit: typeof this.miterLimit) {
+    this.miterLimit = miterLimit
+  }
+
+  setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+    this.shadowOffsetX = offsetX
+    this.shadowOffsetY = offsetY
+    this.shadowBlur = blur
+    this.shadowColor = color
+  }
+
+  setStrokeStyle(strokeStyle: typeof this.strokeStyle) {
+    this.strokeStyle = strokeStyle
+  }
+
+  setTextAlign(textAlign: typeof this.textAlign) {
+    this.textAlign = textAlign
+  }
+
+  setTextBaseline(textBaseline: typeof this.textBaseline) {
+    this.textBaseline = textBaseline
+  }
+}
+function getContextKey(obj) {
+  let currentObj = obj
+  let res = []
+  while (currentObj) {
+    if (currentObj instanceof CanvasRenderingContext2D) {
+      res = [...res, ...Object.getOwnPropertyNames(currentObj)]
+    }
+    currentObj = Object.getPrototypeOf(currentObj)
+  }
+  return res
+}
+
+@Observed
+export class TaroCanvasElement extends TaroElement<CanvasProps, CanvasTouchEvent> {
+  _drawList: {
+    key: string
+    value: TaroAny
+  }[] = []
+
+  settings: RenderingContextSettings
+  _context: CanvasRenderingContext2D
+  _contextProxy: CanvasRenderingContext2D
+
+  constructor() {
+    super('Canvas')
+    this.settings = new RenderingContextSettings(true)
+    const context = new CanvasRenderingContext2DWXAdapter(this.settings) as CanvasRenderingContext2D
+    this._context = context
+
+    const proxyObj = getContextKey(context).reduce((obj, key) => {
+      if (typeof context[key] === 'function') {
+        obj[key] = new Proxy(context[key], {
+          apply: (target, thisArg, argumentsList) => {
+            this._drawList.push({
+              key,
+              value: argumentsList,
+            })
+          },
+        })
+      } else {
+        obj[key] = context[key]
+      }
+      return obj
+    }, {})
+
+    this._contextProxy = new Proxy(proxyObj, {
+      set: (_, property, value) => {
+        this._drawList.push({
+          key: property,
+          value,
+        })
+        return true
+      },
+    })
+  }
+
+  get context() {
+    return this._contextProxy
+  }
+
+  public setAttribute(name: string, value: TaroAny): void {
+    if (name === 'canvasId') {
+      eventSource.set(`canvasId-${value}`, this as TaroNode)
+    }
+    super.setAttribute(name, value)
+  }
+}

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

@@ -10,10 +10,10 @@ import { type ICSSStyleDeclaration, createCSSStyleDeclaration } from '../cssStyl
 import { NodeType, TaroNode } from '../node'
 import StyleSheet, { HarmonyStyle } from '../stylesheet'
 
-import type { StandardProps } from '@tarojs/components/types'
+import type { BaseTouchEvent, ITouchEvent, StandardProps } from '@tarojs/components/types'
 import type { TaroAny } from '../../utils'
 
-type NamedNodeMap = ({ name: string, value: string })[]
+type NamedNodeMap = { name: string, value: string }[]
 
 export interface TaroExtraProps {
   compileMode?: string | boolean
@@ -21,7 +21,10 @@ export interface TaroExtraProps {
   disabled?: boolean
 }
 
-export class TaroElement<T extends StandardProps = StandardProps> extends TaroNode {
+export class TaroElement<
+  T extends StandardProps<any, U> = StandardProps,
+  U extends BaseTouchEvent<any> = ITouchEvent
+> extends TaroNode {
   public _innerHTML = ''
   public _nodeInfo: TaroAny = {}
   public readonly tagName: string
@@ -36,30 +39,30 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     bindAnimation(this)
   }
 
-  public set id (value: string) {
+  public set id(value: string) {
     this.setAttribute('id', value)
   }
 
-  public get id (): string {
+  public get id(): string {
     return this.getAttribute('id') || this._nid
   }
 
-  public set className (value: string) {
+  public set className(value: string) {
     this.setAttribute('class', value)
   }
 
-  public get className (): string {
+  public get className(): string {
     return this.getAttribute('class') || ''
   }
 
-  public get classList (): ClassList {
+  public get classList(): ClassList {
     return new ClassList(this.className, this)
   }
 
-  public get attributes (): NamedNodeMap {
+  public get attributes(): NamedNodeMap {
     const list: NamedNodeMap = []
 
-    Object.keys(this._attrs).forEach(name => {
+    Object.keys(this._attrs).forEach((name) => {
       const value: TaroAny = this._attrs[name]
 
       list.push({ name, value })
@@ -68,11 +71,11 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     return list
   }
 
-  public get children (): TaroElement[] {
-    return this.childNodes.filter(node => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
+  public get children(): TaroElement[] {
+    return this.childNodes.filter((node) => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
   }
 
-  public setAttribute (name: string, value: TaroAny): void {
+  public setAttribute(name: string, value: TaroAny): void {
     switch (name) {
       case ID:
         eventSource.delete(this._attrs.id)
@@ -106,48 +109,64 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }
   }
 
-  public getAttribute (name: string): string {
+  public getAttribute(name: string): string {
     return this._attrs[name]
   }
 
-  public removeAttribute (name: string): void {
+  public removeAttribute(name: string): void {
     this._attrs[name] = null
   }
 
-  public hasAttribute (name: string): boolean {
+  public hasAttribute(name: string): boolean {
     return !!this._attrs[name]
   }
 
-  public hasAttributes (): boolean {
+  public hasAttributes(): boolean {
     return Object.keys(this._attrs).length > 0
   }
 
-  public getElementById<T extends TaroElement = TaroElement> (id: string | undefined | null) {
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      return el.id === id
-    }, false)
+  public getElementById<T extends TaroElement = TaroElement>(id: string | undefined | null) {
+    return findChildNodeWithDFS<T>(
+      this as TaroAny,
+      (el) => {
+        return el.id === id
+      },
+      false
+    )
   }
 
-  public getElementsByTagName<T extends TaroElement = TaroElement> (tagName: string) {
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      return el.nodeName === tagName || (tagName === '*' && this as TaroAny !== el)
-    }, true) || []
+  public getElementsByTagName<T extends TaroElement = TaroElement>(tagName: string) {
+    return (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          return el.nodeName === tagName || (tagName === '*' && (this as TaroAny) !== el)
+        },
+        true
+      ) || []
+    )
   }
 
-  public getElementsByClassName<T extends TaroElement = TaroElement> (className: string) {
+  public getElementsByClassName<T extends TaroElement = TaroElement>(className: string) {
     const classNames = className.trim().split(new RegExp('\\s+'))
 
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      const classList = el.classList
-      return classNames.every(c => {
-        const bool = classList.contains(c)
+    return (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          const classList = el.classList
+          return classNames.every((c) => {
+            const bool = classList.contains(c)
 
-        return bool
-      })
-    }, true) || []
+            return bool
+          })
+        },
+        true
+      ) || []
+    )
   }
 
-  public set innerHTML (value: string) {
+  public set innerHTML(value: string) {
     if (this.nodeType === NodeType.ELEMENT_NODE && this.ownerDocument) {
       const ele = this.ownerDocument.createElement('inner-html')
       ele._innerHTML = value
@@ -155,7 +174,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }
   }
 
-  public get innerHTML (): string {
+  public get innerHTML(): string {
     return this._innerHTML
   }
 
@@ -163,13 +182,13 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public _st = new StyleSheet()
 
   // 经转换后的鸿蒙样式
-  public get hmStyle () {
+  public get hmStyle() {
     return this._st.hmStyle
   }
 
   public _style: ICSSStyleDeclaration | null = null
 
-  public get style (): ICSSStyleDeclaration | null {
+  public get style(): ICSSStyleDeclaration | null {
     return this._style
   }
 
@@ -177,7 +196,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   // 可根据实际情况，迁移到具体的组件中，如View、ScrollView中，Text\Image其实是不需要的
   public _pseudo_before: StyleSheet | null = null
 
-  public set_pseudo_before (value: HarmonyStyle | null) {
+  public set_pseudo_before(value: HarmonyStyle | null) {
     if (value) {
       if (!this._pseudo_before) {
         this._pseudo_before = new StyleSheet()
@@ -192,7 +211,7 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
 
   public _pseudo_after: StyleSheet | null = null
 
-  public set_pseudo_after (value: HarmonyStyle | null) {
+  public set_pseudo_after(value: HarmonyStyle | null) {
     if (value) {
       if (!this._pseudo_after) {
         this._pseudo_after = new StyleSheet()

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

@@ -1,5 +1,6 @@
 import { Current } from '../../current'
 import { TaroTextNode } from '../node'
+import { TaroCanvasElement } from './canvas'
 import { TaroElement } from './element'
 import {
   FormElement,
@@ -55,6 +56,7 @@ export function initHarmonyElement () {
       case 'icon': return new TaroIconElement()
       case 'label': return new TaroLabelElement()
       case 'rich-text': return new TaroRichTextElement()
+      case 'canvas': return new TaroCanvasElement()
       case 'swiper': return new TaroSwiperElement()
       case 'swiper-item': return new TaroSwiperItemElement()
       case 'textarea': return new TaroTextAreaElement()
@@ -74,6 +76,7 @@ export function initHarmonyElement () {
 export {
   FormElement,
   TaroButtonElement,
+  TaroCanvasElement,
   TaroCheckboxElement,
   TaroCheckboxGroupElement,
   TaroElement,
@@ -99,5 +102,4 @@ export {
   TaroTextElement,
   TaroVideoElement,
   TaroViewElement,
-  TaroWebViewElement
-}
+  TaroWebViewElement }

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

@@ -59,8 +59,8 @@ export class TaroNode extends TaroDataSourceElement {
     return this.childNodes[index] as TaroElement
   }
 
-  public findIndex (refChild: TaroNode): number {
-    return this.childNodes.findIndex(node => node._nid === refChild._nid)
+  public findIndex (refChild?: TaroNode): number {
+    return this.childNodes.findIndex(node => node._nid === refChild?._nid)
   }
 
   public updateTextNode () {
@@ -83,7 +83,7 @@ export class TaroNode extends TaroDataSourceElement {
     if (this._isDynamicNode) {
       this._updateTrigger++
     } else {
-      this.parentNode.updateComponent()
+      this.parentNode?.updateComponent()
     }
   }
 

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

@@ -42,6 +42,10 @@ export function convertNumber2VP (value: number, unit = 'px') {
   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')
 }
 

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

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

@@ -9,7 +9,7 @@ import {
   addLeadingSlash,
   getOnHideEventKey,
   getOnReadyEventKey,
-  getOnShowEventKey, 
+  getOnShowEventKey,
   getPath,
   injectPageInstance,
   removePageInstance,
@@ -157,7 +157,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