@tarojs/plugin-platform-harmony-ets 4.0.0-beta.0 → 4.0.0-beta.10

package/dist/components-harmony-ets/utils/styles.ets

@@ -1,15 +1,18 @@
+import { isUndefined } from '@tarojs/shared'
 import { ObjectAssign } from '@tarojs/runtime'
 
+import { FlexManager } from './FlexManager'
 import { TEXT_DEFAULT_STYLE } from './constant/style'
 
-import type { StandardProps } from '@tarojs/components/types'
+import type { StandardProps, TextProps } from '@tarojs/components/types'
 import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyType, HarmonyStyle } from '@tarojs/runtime'
 
 export function getFontAttributes (node: TaroElement): TaroTextStyleType {
   const hmStyle = node.hmStyle
+  const attrs: TextProps = node._attrs || {}
 
   const attributes: TaroAny = {
-    maxLines: hmStyle.maxLines || Infinity,
+    WebkitLineClamp: attrs.maxLines || hmStyle.WebkitLineClamp || Infinity,
     // 已做处理的属性
     letterSpacing: hmStyle.letterSpacing,
     textAlign: hmStyle.textAlign,
@@ -19,17 +22,25 @@ export function getFontAttributes (node: TaroElement): TaroTextStyleType {
   return attributes
 }
 
+// 模拟 div 自动撑满父元素的情况
+function isMaxWidthView (node: TaroElement) {
+  const parentNode: TaroElement = node.parentNode as TaroElement
+  
+  return node.tagName === 'VIEW' && parentNode && parentNode.tagName === 'VIEW' &&
+    !(FlexManager.isFlexNode(parentNode) && FlexManager.flexOptions(parentNode).direction !== FlexDirection.Column)
+}
+
 export function getNormalAttributes (node: TaroElement): TaroStyleType {
   const hmStyle = node.hmStyle
 
   const _nid = node._nid
   const _attrs: StandardProps = node._attrs || {}
 
-  const transform: TaroAny = hmStyle.transform
-  const transformRotate: HarmonyType.Transform.Rotate = transform?.rotate?.[0]
-  const transformTranslate: HarmonyType.Transform.Translate = transform?.translate?.[0]
-  const transformScale: HarmonyType.Transform.Scale = transform?.scale?.[0]
-  const transformTransform: HarmonyType.Transform.Transform = transform?.transform?.[0]
+  let linearGradient: HarmonyType.LinearGradient | undefined = undefined
+  // 渐变
+  if (hmStyle.backgroundImage?.colors) {
+    linearGradient = hmStyle.backgroundImage
+  }
 
   let normalAttributes: HarmonyStyle = {
     // Flex相关
@@ -38,28 +49,54 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     flexShrink: hmStyle.flexShrink,
     alignSelf: hmStyle.alignSelf,
     // 尺寸相关
-    width: hmStyle.width,
+    width: isMaxWidthView(node) && isUndefined(hmStyle.width) ? '100%' : hmStyle.width,
     height: hmStyle.height,
-    constraintSize: hmStyle.constraintSize,
-    margin: hmStyle.margin,
-    padding: hmStyle.padding,
+    minHeight: hmStyle.minHeight,
+    maxHeight: hmStyle.maxHeight,
+    minWidth: hmStyle.minWidth,
+    maxWidth: hmStyle.maxWidth,
+    marginTop: hmStyle.marginTop,
+    marginRight: hmStyle.marginRight,
+    marginBottom: hmStyle.marginBottom,
+    marginLeft: hmStyle.marginLeft,
+    paddingTop: hmStyle.paddingTop,
+    paddingRight: hmStyle.paddingRight,
+    paddingBottom: hmStyle.paddingBottom,
+    paddingLeft: hmStyle.paddingLeft,
     // 边框相关
     borderStyle: hmStyle.borderStyle,
+    borderTopStyle: hmStyle.borderTopStyle,
+    borderRightStyle: hmStyle.borderRightStyle,
+    borderBottomStyle: hmStyle.borderBottomStyle,
+    borderLeftStyle: hmStyle.borderLeftStyle,
     borderWidth: hmStyle.borderWidth,
+    borderTopWidth: hmStyle.borderTopWidth,
+    borderRightWidth: hmStyle.borderRightWidth,
+    borderBottomWidth: hmStyle.borderBottomWidth,
+    borderLeftWidth: hmStyle.borderLeftWidth,
     borderColor: hmStyle.borderColor,
+    borderTopColor: hmStyle.borderTopColor,
+    borderRightColor: hmStyle.borderRightColor,
+    borderBottomColor: hmStyle.borderBottomColor,
+    borderLeftColor: hmStyle.borderLeftColor,
     borderRadius: hmStyle.borderRadius,
+    borderTopLeftRadius: hmStyle.borderTopLeftRadius,
+    borderTopRightRadius: hmStyle.borderTopRightRadius,
+    borderBottomRightRadius: hmStyle.borderBottomRightRadius,
+    borderBottomLeftRadius: hmStyle.borderBottomLeftRadius,
     // 背景相关
     backgroundColor: hmStyle.backgroundColor,
     backgroundImage: hmStyle.backgroundImage,
-    backgroundImageSize: hmStyle.backgroundImageSize,
+    backgroundSize: hmStyle.backgroundSize,
     backgroundRepeat: hmStyle.backgroundRepeat,
-    backgroundImagePosition: hmStyle.backgroundImagePosition,
-    linearGradient: hmStyle.linearGradient,
+    backgroundPosition: hmStyle.backgroundPosition,
+    linearGradient,
     // 变换相关
-    rotate: transformRotate,
-    translate: transformTranslate,
-    scale: transformScale,
-    transform: transformTransform,
+    transform: hmStyle.transform,
+    transformOrigin: {
+      x: hmStyle.transformOrigin?.x || 0,
+      y: hmStyle.transformOrigin?.y || 0
+    },
     // 通用文本相关
     color: hmStyle.color,
     fontSize: hmStyle.fontSize,
@@ -67,11 +104,12 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     fontWeight: hmStyle.fontWeight,
     fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
     lineHeight: hmStyle.lineHeight,
-    decoration: hmStyle.decoration,
+    textDecoration: hmStyle.textDecoration,
     // 其他
-    clip: hmStyle.clip,
+    overflow: hmStyle.overflow,
     id: _attrs.id || _nid,
     opacity: hmStyle.opacity,
+    zIndex: hmStyle.zIndex
     // focus: _attrs.focus || false,
   }
 

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

@@ -1,9 +1,10 @@
 import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
+import commonStyleModify from './style'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroStyleType, TaroAny, TaroVideoElement, TaroEvent } from '@tarojs/runtime'
+import type { TaroAny, TaroVideoElement, TaroEvent } from '@tarojs/runtime'
 
 export interface VideoOptions {
   src?: string | Resource
@@ -21,37 +22,6 @@ export interface VideoUpdateEvent {
   time: number
 }
 
-@Extend(Video)
-function attrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
 @Extend(Video)
 function props(attr: VideoAttrs) {
   .muted(attr.muted)
@@ -111,7 +81,7 @@ function handleUpdate (node: TaroVideoElement, e: VideoUpdateEvent) {
 @Builder
 export default function TaroVideo (node: TaroVideoElement) {
   Video(getVideoData(node))
-    .attrs(getNormalAttributes(node))
+    .attributeModifier(commonStyleModify.setNode(node))
     .props(getVideoProps(node))
     .aspectRatio(4 / 3)
     .onStart(shouldBindEvent(() => { emitEvent(node, 'play') }, node, ['play']))

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

@@ -1,96 +1,54 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
+import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/FlexManager'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
 
-import type { TaroViewElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
+import type { TaroViewElement, TaroStyleType, TaroAny } from '@tarojs/runtime'
 
-@Extend(Flex)
-function flexAttrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
+@Extend(Row)
+function rowAttrs (style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth || style.width,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
 }
 
-
 @Extend(Column)
 function columnAttrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
-function isFlexNode (node: TaroViewElement) {
-  return !!node.hmStyle?.display?.includes('flex')
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
 }
 
 @Builder
 export default function TaroView (node: TaroViewElement) {
-  if (isFlexNode(node)) {
-    Flex(FlexManager.flexOptions(node)) {
+  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
+    Row() {
       createLazyChildren(node)
     }
-    .flexAttrs(getNormalAttributes(node))
+    .attributeModifier(commonStyleModify.setNode(node))
+    .rowAttrs(getNormalAttributes(node))
     .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
     .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
     .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
       node._nodeInfo.areaInfo = res[1]
     }))
     .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .alignItems(FlexManager.flexOptions(node).alignItems as VerticalAlign)
+    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   } else {
     Column() {
       createLazyChildren(node)
     }
+    .attributeModifier(commonStyleModify.setNode(node))
     .columnAttrs(getNormalAttributes(node))
     .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
     .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
@@ -98,7 +56,7 @@ export default function TaroView (node: TaroViewElement) {
       node._nodeInfo.areaInfo = res[1]
     }))
     .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(HorizontalAlign.Start)
-    .justifyContent(node.hmStyle.justifyContent)
+    .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
+    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   }
 }

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

@@ -0,0 +1,50 @@
+import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroWebViewElement, TaroStyleType, TaroEvent } from '@tarojs/runtime'
+
+interface IPageLoad {
+  url: string
+}
+
+interface IError {
+  request: WebResourceRequest
+  error: WebResourceError
+}
+
+@Builder
+export default function TaroWebView (node: TaroWebViewElement) {
+  Web({ src: node._attrs.src, controller: node.controller })
+    .attributeModifier(commonStyleModify.setNode(node))
+    .onPageEnd((e: IPageLoad) => {
+      // 1. 创建消息端口
+      node.ports = node.controller.createWebMessagePorts(true)
+      // 2. 发送端口1到HTML5
+      node.controller.postMessage('init_web_messageport', [node.ports[1]], '*');
+      // 3. 保存端口0到本地
+      node.nativePort = node.ports[0]
+      // 4. 设置回调函数
+      node.nativePort.onMessageEventExt((result) => {
+        const message = node.handleMessageFromWeb(result)
+        const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, node)
+
+        eventHandler(messageEvent, 'message', node)
+      })
+
+      const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: node._attrs.src } }, node)
+
+      eventHandler(onLoadEvent, 'load', node)
+    })
+    .onErrorReceive(shouldBindEvent((e: IError) => {
+      const event: TaroEvent = createTaroEvent('error', { detail: { url: node._attrs.src, fullUrl: e.request.getRequestUrl() } }, node)
+      
+      eventHandler(event, 'error', node)
+    }, node, ['error']))
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
+    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      node._nodeInfo.areaInfo = res[1]
+    }))
+    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+}

package/dist/index.js

@@ -44,7 +44,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -68,6 +68,91 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function apiLoader(str) {
+    return `import {
+  useAddToFavorites,
+  useDidHide,
+  useDidShow,
+  useError,
+  useLaunch,
+  useLoad,
+  useOptionMenuClick,
+  usePageNotFound,
+  usePageScroll,
+  usePullDownRefresh,
+  usePullIntercept,
+  useReachBottom,
+  useReady,
+  useResize,
+  useRouter,
+  useSaveExitState,
+  useShareAppMessage,
+  useShareTimeline,
+  useTabItemTap,
+  useTitleClick,
+  useScope,
+  useUnhandledRejection,
+  useUnload
+} from '@tarojs/plugin-framework-react/dist/runtime'
+${str}
+
+taro.useAddToFavorites = useAddToFavorites
+taro.useDidHide = useDidHide
+taro.useDidShow = useDidShow
+taro.useError = useError
+taro.useLaunch = useLaunch
+taro.useLoad = useLoad
+taro.useOptionMenuClick = useOptionMenuClick
+taro.usePageNotFound = usePageNotFound
+taro.usePageScroll = usePageScroll
+taro.usePullDownRefresh = usePullDownRefresh
+taro.usePullIntercept = usePullIntercept
+taro.useReachBottom = useReachBottom
+taro.useReady = useReady
+taro.useResize = useResize
+taro.useRouter = useRouter
+taro.useSaveExitState = useSaveExitState
+taro.useShareAppMessage = useShareAppMessage
+taro.useShareTimeline = useShareTimeline
+taro.useTabItemTap = useTabItemTap
+taro.useTitleClick = useTitleClick
+taro.useScope = useScope
+taro.useUnhandledRejection = useUnhandledRejection
+taro.useUnload = useUnload
+
+export {
+  useAddToFavorites,
+  useDidHide,
+  useDidShow,
+  useError,
+  useLaunch,
+  useLoad,
+  useOptionMenuClick,
+  usePageNotFound,
+  usePageScroll,
+  usePullDownRefresh,
+  usePullIntercept,
+  useReachBottom,
+  useReady,
+  useResize,
+  useRouter,
+  useSaveExitState,
+  useShareAppMessage,
+  useShareTimeline,
+  useTabItemTap,
+  useTitleClick,
+  useScope,
+  useUnhandledRejection,
+  useUnload
+}
+`;
 }
 
 const PLATFORM_NAME = 'harmony';
@@ -159,7 +244,8 @@ class TaroPlatformHarmony extends service.TaroPlatform {
                 FRAMEWORK: JSON.stringify(this.config.framework),
                 TARO_ENV: JSON.stringify(this.platform),
                 TARO_PLATFORM: JSON.stringify(this.platformType),
-                TARO_VERSION: JSON.stringify(_package.getPkgVersion())
+                TARO_VERSION: JSON.stringify(_package.getPkgVersion()),
+                SUPPORT_TARO_POLYFILL: 'disabled',
             },
         });
         return Object.assign(Object.assign(Object.assign({}, config), { buildAdapter: config.platform, fileType: this.fileType, platformType: this.platformType, useETS: this.useETS, useJSON5: this.useJSON5 }), extraOptions);
@@ -364,8 +450,16 @@ let Harmony$1 = class Harmony extends TaroPlatformHarmony {
                         ? path__namespace.join(path__namespace.dirname(target), `${basename}${ext}`)
                         : path__namespace.join(target, `index${isDTS ? '.d.ts' : ext}`);
                 }
-                else if (libDir !== path__namespace.relative(targetPath, target)) {
-                    target = path__namespace.join(targetPath, libDir);
+                else {
+                    const libPath = path__namespace.relative(targetPath, target);
+                    if (libDir !== libPath) {
+                        if (path__namespace.relative(libPath, libDir).startsWith('.')) {
+                            target = path__namespace.join(targetPath, libDir);
+                        }
+                        else {
+                            target = path__namespace.join(targetPath, libName, `index${ext}`);
+                        }
+                    }
                 }
             }
         }
@@ -380,6 +474,10 @@ let Harmony$1 = class Harmony extends TaroPlatformHarmony {
         }
         else if (stat.isFile()) {
             let code = helper.fs.readFileSync(lib, { encoding: 'utf8' });
+            // TODO: 后续这部分代码应该根据使用的框架抽离到对应的平台插件处
+            if ([/(@tarojs[\\/]plugin-platform-harmony-ets|taro-platform-harmony)[\\/]dist[\\/]apis[\\/]index\.ts/].some(e => e.test(lib))) {
+                code = apiLoader(code);
+            }
             if (this.extensions.includes(path__namespace.extname(lib))) {
                 code = code.replace(/(?:import\s|from\s|require\()['"]([^.][^'"\s]+)['"]\)?/g, (src, p1) => {
                     const { outputRoot } = this.ctx.runOpts.config;
@@ -552,7 +650,7 @@ function App(props) {
             isFile: (file) => {
                 try {
                     const stat = helper.fs.lstatSync(file);
-                    return stat.isFile() || (file.endsWith(mediaPath) && stat.isDirectory());
+                    return stat.isFile() || (file.endsWith(mediaPath.replace('/', path__namespace.sep)) && stat.isDirectory());
                 }
                 catch (_) { } // eslint-disable-line no-empty
                 return false;