Feat harmony mode

packages/api-proxy/src/platform/api/system/rnSystem.js

@@ -12,7 +12,7 @@ const getWindowInfo = function () {
   }
   let safeArea = {}
   let { top = 0, bottom = 0, left = 0, right = 0 } = insets
-  if (Platform.OS === 'android') {
+  if (Platform.OS === 'android' || Platform.OS === 'harmony') {
     top = StatusBar.currentHeight || 0
   }
   const screenHeight = dimensionsScreen.height
@@ -101,7 +101,7 @@ const getSystemInfo = function (options = {}) {
 
 const getDeviceInfo = function () {
   const deviceInfo = {}
-  if (Platform.OS === 'android') {
+  if (Platform.OS === 'android' || Platform.OS === 'harmony') {
     const deviceAbi = DeviceInfo.supported64BitAbisSync() || []
     deviceInfo.deviceAbi = deviceAbi[0] || null
   }

packages/api-proxy/src/platform/api/vibrate/index.ios.js

@@ -9,6 +9,7 @@ const vibrateShort = function (options = {}) {
   const { type = 'light', success, fail, complete } = options
   try {
     ReactNativeHapticFeedback.trigger(getType(type), {
+      // harmony RN 属性不变
       ignoreAndroidSystemSettings: true,
       enableVibrateFallback: true
     })

packages/core/@types/global.d.ts

@@ -1,5 +1,5 @@
 // declaration for mpx mode
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'ios' | 'android' | 'harmony'
 
 // declaration for mpx env
 declare let __mpx_env__: string

packages/core/src/convertor/convertor.js

@@ -58,7 +58,8 @@ const rulesMap = {
   wxToDd: { ...defaultConvertRule, ...wxToDdRule },
   wxToJd: { ...defaultConvertRule, ...wxToJdRule },
   wxToIos: { ...defaultConvertRule, ...wxToReactRule },
-  wxToAndroid: { ...defaultConvertRule, ...wxToReactRule }
+  wxToAndroid: { ...defaultConvertRule, ...wxToReactRule },
+  wxToHarmony: { ...defaultConvertRule, ...wxToReactRule }
 }
 
 export function getConvertRule (convertMode) {

packages/core/src/convertor/getConvertMode.js

@@ -7,7 +7,8 @@ const convertModes = {
   'wx-jd': 'wxToJd',
   'wx-dd': 'wxToDd',
   'wx-ios': 'wxToIos',
-  'wx-android': 'wxToAndroid'
+  'wx-android': 'wxToAndroid',
+  'wx-harmony': 'wxToHarmony'
 }
 
 export function getConvertMode (srcMode) {

packages/core/src/core/proxy.js

@@ -27,7 +27,8 @@ import {
   callWithErrorHandling,
   warn,
   error,
-  getEnvObj
+  getEnvObj,
+  isReact
 } from '@mpxjs/utils'
 import {
   BEFORECREATE,
@@ -171,7 +172,7 @@ export default class MpxProxy {
     this.state = CREATED
     this.callHook(CREATED)
 
-    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'ios' && __mpx_mode__ !== 'android') {
+    if (__mpx_mode__ !== 'web' && !isReact) {
       this.initRender()
     }
 
@@ -259,7 +260,7 @@ export default class MpxProxy {
   }
 
   initProps () {
-    if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+    if (isReact) {
       // react模式下props内部对象透传无需深clone，依赖对象深层的数据响应触发子组件更新
       this.props = this.target.__getProps()
     } else {
@@ -687,7 +688,7 @@ export default class MpxProxy {
       this.forceUpdateAll = true
     }
 
-    if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+    if (isReact) {
       // rn中不需要setdata
       this.forceUpdateData = {}
       this.forceUpdateAll = false

packages/core/src/platform/builtInMixins/index.js

@@ -1,3 +1,4 @@
+import { isReact } from '@mpxjs/utils'
 import pageStatusMixin from './pageStatusMixin'
 import proxyEventMixin from './proxyEventMixin'
 import renderHelperMixin from './renderHelperMixin'
@@ -16,7 +17,7 @@ import directiveHelperMixin from './directiveHelperMixin'
 
 export default function getBuiltInMixins ({ type, rawOptions = {} }) {
   let bulitInMixins
-  if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+  if (isReact) {
     bulitInMixins = [
       proxyEventMixin(),
       directiveHelperMixin(),

packages/core/src/platform/patch/index.js

@@ -5,14 +5,14 @@ import { getDefaultOptions as getAliDefaultOptions } from './ali/getDefaultOptio
 import { getDefaultOptions as getSwanDefaultOptions } from './swan/getDefaultOptions'
 import { getDefaultOptions as getWebDefaultOptions } from './web/getDefaultOptions'
 import { getDefaultOptions as getReactDefaultOptions } from './react/getDefaultOptions'
-import { error } from '@mpxjs/utils'
+import { error, isReact } from '@mpxjs/utils'
 
 export default function createFactory (type) {
   return (options = {}, { isNative, customCtor, customCtorType } = {}) => {
     options.__nativeRender__ = !!isNative
     options.__type__ = type
     let ctor
-    if (__mpx_mode__ !== 'web' && __mpx_mode__ !== 'ios' && __mpx_mode__ !== 'android') {
+    if (__mpx_mode__ !== 'web' && !isReact) {
       if (customCtor) {
         ctor = customCtor
         customCtorType = customCtorType || type
@@ -40,7 +40,7 @@ export default function createFactory (type) {
     }
 
     let getDefaultOptions
-    if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+    if (isReact) {
       getDefaultOptions = getReactDefaultOptions
     } else if (__mpx_mode__ === 'web') {
       getDefaultOptions = getWebDefaultOptions
@@ -60,7 +60,7 @@ export default function createFactory (type) {
     // 将合并后的用户定义的rawOptions传入获取当前应该注入的内建mixins
     rawOptions.mixins = getBuiltInMixins({ type, rawOptions, currentInject })
     const defaultOptions = getDefaultOptions({ type, rawOptions, currentInject })
-    if (__mpx_mode__ === 'web' || __mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+    if (__mpx_mode__ === 'web' || isReact) {
       global.__mpxOptionsMap = global.__mpxOptionsMap || {}
       global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     } else if (ctor) {

packages/core/src/platform/patch/react/getDefaultOptions.ios.js

@@ -427,7 +427,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
         })
         const isCustom = pageConfig.navigationStyle === 'custom'
         let opt = {}
-        if (__mpx_mode__ === 'android') {
+        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
           opt = {
             statusBarTranslucent: isCustom,
             statusBarStyle: pageConfig.statusBarStyle, // 枚举值 'auto' | 'dark' | 'light' 控制statusbar字体颜色

packages/utils/src/env.js

@@ -25,7 +25,7 @@ export const isBrowser = typeof window !== 'undefined'
 
 export const isDev = process.env.NODE_ENV !== 'production'
 
-export const isReact = __mpx_mode__ === 'ios' || __mpx_mode__ === 'android'
+export const isReact = __mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony'
 
 export function getFocusedNavigation () {
   if (global.__mpxPagesMap) {

packages/webpack-plugin/lib/config.js

@@ -552,5 +552,6 @@ module.exports = {
     }
   },
   ios: reactConfig,
-  android: reactConfig
+  android: reactConfig,
+  harmony: reactConfig
 }

packages/webpack-plugin/lib/index.js

@@ -129,7 +129,7 @@ class MpxWebpackPlugin {
       errors.push('MpxWebpackPlugin supports mode to be "web" only when srcMode is set to "wx"!')
     }
     if (isReact(options.mode) && options.srcMode !== 'wx') {
-      errors.push('MpxWebpackPlugin supports mode to be "ios" or "android" only when srcMode is set to "wx"!')
+      errors.push('MpxWebpackPlugin supports mode to be "ios" or "android" of "harmony" only when srcMode is set to "wx"!')
     }
     if (options.dynamicComponentRules && !options.dynamicRuntime) {
       errors.push('Please make sure you have set dynamicRuntime true in mpx webpack plugin config because you have use the dynamic runtime feature.')

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -7,7 +7,9 @@ module.exports = function getSpec ({ warn, error }) {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,
     // React Native android 不支持的 CSS property
-    android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
+    android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/,
+    // TODO: rnoh 文档暂未找到 css 属性支持说明，暂时同步 android，同时需要注意此处校验是否有缺失，类似 will-change 之类属性
+    harmony: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
   // var(xx)
   const cssVariableExp = /var\(/
@@ -549,7 +551,7 @@ module.exports = function getSpec ({ warn, error }) {
       return false
     }
     const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
-    if (mode === 'android') return cssMap
+    if (mode === 'android' || mode === 'harmony') return cssMap
     // ios 阴影需要额外设置 shadowOpacity=1
     cssMap.push({
       prop: 'shadowOpacity',
@@ -559,59 +561,69 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   return {
-    supportedModes: ['ios', 'android'],
+    supportedModes: ['ios', 'android', 'harmony'],
     rules: [
       { // 背景相关属性的处理
         test: /^(background|background-image|background-size|background-position)$/,
         ios: checkBackgroundImage,
-        android: checkBackgroundImage
+        android: checkBackgroundImage,
+        harmony: checkBackgroundImage
       },
       {
         test: 'border-radius',
         ios: getBorderRadius,
-        android: getBorderRadius
+        android: getBorderRadius,
+        harmony: getBorderRadius
       },
       { // margin padding 内外边距的处理
         test: /^(margin|padding)$/,
         ios: formatMargins,
-        android: formatMargins
+        android: formatMargins,
+        harmony: formatMargins
       },
       { // line-height 换算
         test: 'line-height',
         ios: formatLineHeight,
-        android: formatLineHeight
+        android: formatLineHeight,
+        harmony: formatLineHeight
       },
       {
         test: 'transform',
         ios: formatTransform,
-        android: formatTransform
+        android: formatTransform,
+        harmony: formatTransform
       },
       {
         test: 'flex',
         ios: formatFlex,
-        android: formatFlex
+        android: formatFlex,
+        harmony: formatFlex
       },
       {
         test: 'font-family',
         ios: formatFontFamily,
-        android: formatFontFamily
+        android: formatFontFamily,
+        harmony: formatFontFamily
       },
       {
         test: 'box-shadow',
         ios: formatBoxShadow,
-        android: formatBoxShadow
+        android: formatBoxShadow,
+        harmony: formatBoxShadow
       },
       // 通用的简写格式匹配
       {
         test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),
         ios: formatAbbreviation,
-        android: formatAbbreviation
+        android: formatAbbreviation,
+        harmony: formatAbbreviation
       },
       // 属性&属性值校验
       {
         test: () => true,
         ios: verification,
-        android: verification
+        android: verification,
+        harmony: verification
       }
     ]
   }

packages/webpack-plugin/lib/platform/template/wx/component-config/button.js

@@ -37,6 +37,10 @@ module.exports = function ({ print }) {
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
+  const harmonyValueLogError = print({ platform: 'harmony', tag: TAG_NAME, isError: true, type: 'value' })
+  const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
+  const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
+
   return {
     test: TAG_NAME,
     web (tag, { el }) {
@@ -51,6 +55,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-button'
     },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-button'
+    },
     props: [
       {
         test: 'open-type',
@@ -123,6 +131,7 @@ module.exports = function ({ print }) {
           }
         },
         ios ({ name, value }) {
+          // TODO 此处open-type无其他属性支持了？
           const supported = ['share']
           if (!supported.includes(value)) {
             iosValueLogError({ name, value })
@@ -133,6 +142,12 @@ module.exports = function ({ print }) {
           if (!supported.includes(value)) {
             androidValueLogError({ name, value })
           }
+        },
+        harmony ({ name, value }) {
+          const supported = ['share']
+          if (!supported.includes(value)) {
+            harmonyValueLogError({ name, value })
+          }
         }
       },
       {
@@ -173,7 +188,8 @@ module.exports = function ({ print }) {
       {
         test: /^(lang|from-type|hover-class|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/,
         ios: iosPropLog,
-        android: androidPropLog
+        android: androidPropLog,
+        harmony: harmonyPropLog
       }
     ],
     event: [
@@ -210,7 +226,8 @@ module.exports = function ({ print }) {
       {
         test: /^(getuserinfo|contact|getphonenumber|bindgetrealtimephonenumber|error|opensetting|launchapp|chooseavatar|agreeprivacyauthorization)$/,
         ios: iosEventLog,
-        android: androidEventLog
+        android: androidEventLog,
+        harmony: harmonyEventLog
       }
     ]
   }

packages/webpack-plugin/lib/platform/template/wx/component-config/checkbox-group.js

@@ -14,6 +14,10 @@ module.exports = function () {
     android (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-checkbox-group'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-checkbox-group'
     }
   }
 }

packages/webpack-plugin/lib/platform/template/wx/component-config/checkbox.js

@@ -15,6 +15,10 @@ module.exports = function () {
       el.isBuiltIn = true
       return 'mpx-checkbox'
     },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-checkbox'
+    },
     event: [
       {
         test: 'tap',

packages/webpack-plugin/lib/platform/template/wx/component-config/cover-image.js

@@ -4,6 +4,7 @@ module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
+  const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   return {
     test: TAG_NAME,
     web (tag, { el }) {
@@ -21,6 +22,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-image'
     },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-image'
+    },
     props: [
       {
         test: 'use-built-in',
@@ -31,7 +36,8 @@ module.exports = function ({ print }) {
       {
         test: /^(referrer-policy)$/,
         ios: iosPropLog,
-        android: androidPropLog
+        android: androidPropLog,
+        harmony: harmonyPropLog
       }
     ],
     event: [

packages/webpack-plugin/lib/platform/template/wx/component-config/cover-view.js

@@ -28,6 +28,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-view'
     },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-view'
+    },
     props: [
       {
         test: 'scroll-top',