@tarojs/plugin-platform-harmony-ets 4.0.0-beta.12 → 4.0.0-beta.121

package/dist/runtime-framework/solid/connect.ts

@@ -1,11 +1,29 @@
-import { TaroNode } from '@tarojs/runtime'
 import { hooks } from '@tarojs/shared'
 import { batch } from 'solid-js'
 
-export type Component = (props?: any) => TaroNode
+import { ensureIsArray } from './utils'
 
-export function setReconciler() {
+import type { TaroNode } from '@tarojs/runtime'
+
+export type SolidComponent = (props?: any) => TaroNode
+
+export function setReconciler () {
   hooks.tap('batchedEventUpdates', function (cb) {
     batch(cb)
   })
+
+  hooks.tap('mergePageInstance', function (prev, next) {
+    if (!prev || !next) return
+
+    // 子组件使用 lifecycle hooks 注册了生命周期后，会存在 prev，里面是注册的生命周期回调。
+
+    // prev 使用 Object.create(null) 创建，H5 的 fast-refresh 可能也会导致存在 prev，要排除这些意外产生的 prev
+    if ('constructor' in prev) return
+
+    Object.keys(prev).forEach(item => {
+      const prevList = prev[item]
+      const nextList = ensureIsArray<() => any>(next[item])
+      next[item] = nextList.concat(prevList)
+    })
+  })
 }

package/dist/runtime-framework/solid/hooks.ts

@@ -1,9 +1,4 @@
-import {
-  AppInstance,
-  Current,
-  PageLifeCycle,
-  TFunc
-} from '@tarojs/runtime'
+import { Current } from '@tarojs/runtime'
 import { isArray, isFunction } from '@tarojs/shared'
 import {
   createMemo,
@@ -15,6 +10,12 @@ import { ReactMeta } from './app'
 import { getPageInstance, injectPageInstance } from './page'
 import { HOOKS_APP_ID } from './utils'
 
+import type {
+  AppInstance,
+  PageLifeCycle,
+  TFunc
+} from '@tarojs/runtime'
+
 const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
   return (fn: TFunc) => {
     const id = ReactMeta.PageContext || HOOKS_APP_ID
@@ -30,10 +31,13 @@ const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
         })
       }
 
-      if (isFunction(inst![lifecycle])) {
-        inst![lifecycle] = [inst?.[lifecycle], fn]
+      if (isFunction(inst[lifecycle])) {
+        inst[lifecycle] = [inst[lifecycle], fn]
       } else {
-        inst![lifecycle] = [...(inst![lifecycle] || []), fn]
+        inst[lifecycle] = [
+          ...((inst[lifecycle]) || []),
+          fn
+        ]
       }
 
       if (first) {
@@ -43,9 +47,9 @@ const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
       onCleanup(() => {
         const list = inst![lifecycle]
         if (list === fn) {
-          inst![lifecycle] = undefined
+          (inst[lifecycle]) = undefined
         } else if (isArray(list)) {
-          inst![lifecycle] = list.filter((item) => item !== fn)
+          (inst[lifecycle]) = list.filter(item => item !== fn)
         }
       })
     })
@@ -58,6 +62,7 @@ export const useDidShow = createTaroHook('componentDidShow')
 
 /** App */
 export const useError = createTaroHook('onError')
+export const useUnhandledRejection = createTaroHook('onUnhandledRejection')
 export const useLaunch = createTaroHook('onLaunch')
 export const usePageNotFound = createTaroHook('onPageNotFound')
 

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

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

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

@@ -1,13 +1,16 @@
-import { Current } from '@tarojs/runtime'
-import { isArray, isFunction, isUndefined } from '@tarojs/shared'
+import { addLeadingSlash, CONTEXT_ACTIONS, Current, document, env, eventCenter, requestAnimationFrame, window } from '@tarojs/runtime'
+import { hooks, isArray, isFunction, isUndefined } from '@tarojs/shared'
 
-import { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, ON_UNLOAD } from './contant'
+import { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, ON_UNLOAD } from './constant'
 import { incrementId } from './utils'
 
+import type { PageConfig } from '@tarojs/taro'
+
 const instances = new Map<string, any>()
-const pageId = incrementId()
+const pageId = incrementId(1)
 
 export function injectPageInstance (inst: any, id: string) {
+  hooks.call('mergePageInstance', instances.get(id), inst)
   instances.set(id, inst)
 }
 
@@ -19,13 +22,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)
 
@@ -33,6 +29,7 @@ export function safeExecute (path: string, lifecycle: string, ...args: unknown[]
     return
   }
 
+  lifecycle = lifecycle.replace(/^on(Show|Hide)$/, 'componentDid$1')
   const func = instance[lifecycle]
 
   if (isArray(func)) {
@@ -75,9 +72,19 @@ export function getOnHideEventKey (path: string) {
   return path + '.' + ON_HIDE
 }
 
-export function createPageConfig (component: any, pageName?: string) {
+export function createPageConfig (component: any, pageName?: string, pageConfig?: PageConfig) {
   // 小程序 Page 构造器是一个傲娇小公主，不能把复杂的对象挂载到参数上
   const id = pageName ?? `taro_page_${pageId()}`
+  const [
+    ONLOAD,
+    ONUNLOAD,
+    ONREADY,
+    ONSHOW,
+    ONHIDE,
+    LIFECYCLES,
+    SIDE_EFFECT_LIFECYCLES,
+  ] = hooks.call('getMiniLifecycleImpl')!.page
+
   let pageElement: any = null
   let unmounting = false
   let prepareMountList: (() => void)[] = []
@@ -102,7 +109,7 @@ export function createPageConfig (component: any, pageName?: string) {
   let loadResolver: (...args: any[]) => void
   let hasLoaded: Promise<void>
   const page = {
-    onLoad (options: Readonly<Record<string, unknown>> = {}, cb?: (...args: any[]) => any) {
+    [ONLOAD] (options: Readonly<Record<string, unknown>> = {}, cb?: (...args: any[]) => any) {
       hasLoaded = new Promise(resolve => { loadResolver = resolve })
 
       Current.page = this as any
@@ -118,21 +125,21 @@ export function createPageConfig (component: any, pageName?: string) {
 
       setCurrentRouter(this)
 
-      // window.trigger(CONTEXT_ACTIONS.INIT, $taroPath)
+      window.trigger(CONTEXT_ACTIONS.INIT, $taroPath)
 
       const mount = () => {
+        // @ts-ignore
         Current.app!.mount!(component, $taroPath, () => {
-          // pageElement = document.getElementById($taroPath)
+          pageElement = document.getElementById($taroPath)
 
-          // if (!pageElement) {
-          //   throw new Error(`没有找到页面实例。`)
-          // }
+          if (!pageElement) {
+            throw new Error(`没有找到页面实例。`)
+          }
 
           safeExecute($taroPath, ON_LOAD, this.$taroParams)
           loadResolver()
-          cb && cb()
-          // pageElement.ctx = this
-          // pageElement.performUpdate(true, cb)
+          cb && cb(pageElement)
+          pageElement.ctx = this
         })
       }
 
@@ -142,10 +149,10 @@ export function createPageConfig (component: any, pageName?: string) {
         mount()
       }
     },
-    onUnLoad () {
+    [ONUNLOAD] () {
       const $taroPath = this.$taroPath
       // 销毁当前页面的上下文信息
-      // window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
+      window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
 
       // 触发onUnload生命周期
       safeExecute($taroPath, ON_UNLOAD)
@@ -163,22 +170,31 @@ export function createPageConfig (component: any, pageName?: string) {
         }
       })
     },
-    onShow (options = {}) {
+    [ONREADY] () {
+      hasLoaded.then(() => {
+        // 触发生命周期
+        safeExecute(this.$taroPath, ON_READY)
+        // 通过事件触发子组件的生命周期
+        requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady.called = true
+      })
+    },
+    [ONSHOW] (options = {}) {
       hasLoaded.then(() => {
         // 设置 Current 的 page 和 router
         Current.page = this as any
         setCurrentRouter(this)
         // 恢复上下文信息
-        // window.trigger(CONTEXT_ACTIONS.RECOVER, this.$taroPath)
+        window.trigger(CONTEXT_ACTIONS.RECOVER, this.$taroPath)
         // 触发生命周期
         safeExecute(this.$taroPath, ON_SHOW, options)
-        // TODO 通过事件触发子组件的生命周期
-        // raf(() => eventCenter.trigger(getOnShowEventKey(id)))
+        // 通过事件触发子组件的生命周期
+        requestAnimationFrame(() => eventCenter.trigger(getOnShowEventKey(id)))
       })
     },
-    onHide () {
+    [ONHIDE] () {
       // 缓存当前页面上下文信息
-      // window.trigger(CONTEXT_ACTIONS.RESTORE, this.$taroPath)
+      window.trigger(CONTEXT_ACTIONS.RESTORE, this.$taroPath)
 
       // 设置 Current 的 page 和 router
       if (Current.page === this) {
@@ -188,9 +204,46 @@ export function createPageConfig (component: any, pageName?: string) {
       // 触发生命周期
       safeExecute(this.$taroPath, ON_HIDE)
       // TODO 通过事件触发子组件的生命周期
-      // eventCenter.trigger(getOnHideEventKey(id))
-    }
+      eventCenter.trigger(getOnHideEventKey(id))
+    },
   }
 
+  LIFECYCLES.forEach((lifecycle) => {
+    let isDefer = false
+    lifecycle = lifecycle.replace(/^defer:/, () => {
+      isDefer = true
+      return ''
+    })
+    page[lifecycle] = function () {
+      const exec = () => safeExecute(this.$taroPath, lifecycle, ...arguments)
+      if (isDefer) {
+        hasLoaded.then(exec)
+      } else {
+        return exec()
+      }
+    }
+  })
+
+  // onShareAppMessage 和 onShareTimeline 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
+  SIDE_EFFECT_LIFECYCLES.forEach(lifecycle => {
+    if (component[lifecycle] ||
+      component.prototype?.[lifecycle] ||
+      component[lifecycle.replace(/^on/, 'enable')] ||
+      pageConfig?.[lifecycle.replace(/^on/, 'enable')]
+    ) {
+      page[lifecycle] = function (...args) {
+        const target = args[0]?.target as any
+        if (target?.id) {
+          const id = target.id
+          const element = env.document.getElementById(id)
+          if (element) {
+            target.dataset = element.dataset
+          }
+        }
+        return safeExecute(this.$taroPath, lifecycle, ...args)
+      }
+    }
+  })
+
   return page
 }

package/dist/runtime-framework/solid/reconciler/props.ts

@@ -1,31 +1,35 @@
 import { convertNumber2PX, FormElement } from '@tarojs/runtime'
-import { capitalize, internalComponents, isFunction, isNumber, isObject, isString, toCamelCase } from '@tarojs/shared'
+import { capitalize, internalComponents, isFunction, isNumber, isObject, isString, PLATFORM_TYPE, toCamelCase } from '@tarojs/shared'
 
 import type { Style, TaroElement } from '@tarojs/runtime'
 
 export type Props = Record<string, unknown>
 
+const IS_NON_DIMENSIONAL = /max|aspect|acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i
+
 function isEventName (s: string) {
   return s[0] === 'o' && s[1] === 'n'
 }
 
-const IS_NON_DIMENSIONAL = /max|aspect|acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i
+function isEqual (obj1, obj2) {
+  return JSON.stringify(obj1) === JSON.stringify(obj2)
+}
 
 export function updateProps (dom: TaroElement, oldProps: Props, newProps: Props) {
   const updatePayload = getUpdatePayload(dom, oldProps, newProps)
-  if (updatePayload){
+  if (updatePayload) {
     updatePropsByPayload(dom, oldProps, updatePayload)
   }
 }
 
-export function updatePropsByPayload (dom: TaroElement, oldProps: Props, updatePayload: any[]){
-  for (let i = 0; i < updatePayload.length; i += 2){ // key, value 成对出现
-    const key = updatePayload[i]; const newProp = updatePayload[i+1]; const oldProp = oldProps[key]
+export function updatePropsByPayload (dom: TaroElement, oldProps: Props, updatePayload: any[]) {
+  for (let i = 0; i < updatePayload.length; i += 2) { // key, value 成对出现
+    const key = updatePayload[i]; const newProp = updatePayload[i + 1]; const oldProp = oldProps[key]
     setProperty(dom, key, newProp, oldProp)
   }
 }
 
-export function getUpdatePayload (dom: TaroElement, oldProps: Props, newProps: Props){
+export function getUpdatePayload (dom: TaroElement, oldProps: Props, newProps: Props) {
   let i: string
   let updatePayload: any[] | null = null
 
@@ -59,36 +63,40 @@ function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: un
 
   const compName = capitalize(toCamelCase(dom.tagName.toLowerCase()))
 
-  if (eventName === 'click' && compName in internalComponents) {
+  if (eventName === 'click' && process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY && compName in internalComponents) {
     eventName = 'tap'
   }
 
   if (isFunction(value)) {
-    const isHarmony = process.env.TARO_PLATFORM === 'harmony'
     if (oldValue) {
-      dom.removeEventListener(eventName, oldValue as any, !isHarmony ? false : undefined)
-      dom.addEventListener(eventName, value, !isHarmony ? { isCapture, sideEffect: false } : undefined)
+      dom.removeEventListener(eventName, oldValue as any, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? false : undefined)
+      dom.addEventListener(eventName, value, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? { isCapture, sideEffect: false } : undefined)
     } else {
-      dom.addEventListener(eventName, value, !isHarmony ? isCapture : undefined)
+      dom.addEventListener(eventName, value, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? isCapture : undefined)
     }
   } else {
     dom.removeEventListener(eventName, oldValue as any)
   }
 }
 
-function setStyle (style: Style, key: string, value: string | number) {
-  if (key[0] === '-') {
-    style.setProperty(key, value.toString())
+function setStyle (style: Style, key: string, value: unknown) {
+  if (key[0] === '-' && process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY) {
     // css variables need not further judgment
+    style.setProperty(key, (value as string).toString())
     return
   }
 
-  style[key] =
-    isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
-      ? convertNumber2PX(value)
-      : value == null
-        ? ''
-        : value
+  if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && key.startsWith('_')) {
+    // harmony样式已处理
+    style[key] = value == null ? '' : value
+  } else {
+    style[key] =
+      isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
+        ? convertNumber2PX(value)
+        : value == null
+          ? ''
+          : value
+  }
 }
 
 type StyleValue = Record<string, string | number>
@@ -99,13 +107,9 @@ interface DangerouslySetInnerHTML {
 export function setProperty (dom: TaroElement, name: string, value: unknown, oldValue?: unknown) {
   name = name === 'className' ? 'class' : name
 
-  if (
-    name === 'key' ||
-    name === 'children' ||
-    name === 'ref'
-  ) {
-    // skip
-  } else if (name === 'style') {
+  if (['key', 'children', 'ref'].includes(name)) return
+
+  if (name === 'style') {
     const style = dom.style
     if (isString(value)) {
       style.cssText = value
@@ -118,6 +122,7 @@ export function setProperty (dom: TaroElement, name: string, value: unknown, old
       if (isObject<StyleValue>(oldValue)) {
         for (const i in oldValue) {
           if (!(value && i in (value as StyleValue))) {
+            // harmony设置style，路径设置路径如下：dom.style => cssStyleDeclaration.setProperty => convertWebStyle2HmStyle => dom._st.hmStyle
             setStyle(style, i, '')
           }
         }
@@ -125,12 +130,40 @@ export function setProperty (dom: TaroElement, name: string, value: unknown, old
 
       if (isObject<StyleValue>(value)) {
         for (const i in value) {
-          if (!oldValue || value[i] !== (oldValue as StyleValue)[i]) {
+          if (!oldValue || !isEqual(value[i], (oldValue as StyleValue)[i])) {
             setStyle(style, i, value[i])
           }
         }
       }
     }
+  } else if (name === '__hmStyle') {
+    // 鸿蒙样式特殊处理
+    // @ts-ignore
+    const style = dom._st.hmStyle // __hmStyle是已经被处理过的鸿蒙样式，可以直接塞进hmStyle对象内
+    if (isObject<StyleValue>(oldValue)) {
+      for (const i in oldValue) {
+        if (!(value && i in (value as StyleValue))) {
+          // 鸿蒙伪类特殊处理
+          if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && (i === '::after' || i === '::before')) {
+            setPseudo(dom, i, null)
+          } else {
+            style[i] = ''
+          }
+        }
+      }
+    }
+    if (isObject<StyleValue>(value)) {
+      for (const i in value) {
+        if (!oldValue || !isEqual(value[i], (oldValue as StyleValue)[i])) {
+          // 鸿蒙伪类特殊处理
+          if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && (i === '::after' || i === '::before')) {
+            setPseudo(dom, i, value[i] as unknown as StyleValue)
+          } else {
+            style[i] = value[i]
+          }
+        }
+      }
+    }
   } else if (isEventName(name)) {
     setEvent(dom, name, value, oldValue)
   } else if (name === 'dangerouslySetInnerHTML') {
@@ -149,3 +182,14 @@ export function setProperty (dom: TaroElement, name: string, value: unknown, old
     }
   }
 }
+
+// 设置鸿蒙伪类属性(特殊设置)
+function setPseudo(dom: TaroElement, name: '::after' | '::before', value: StyleValue | null) {
+  if (name === '::after') {
+    // @ts-ignore
+    dom.set_pseudo_after(value)
+  } else if (name === '::before') {
+    // @ts-ignore
+    dom.set_pseudo_before(value)
+  }
+}

package/dist/runtime-framework/solid/reconciler/render.ts

@@ -1,5 +1,7 @@
-import TaroText from '@tarojs/components/text'
+// @ts-ignore
+import { TaroText } from '@tarojs/components'
 import { document } from '@tarojs/runtime'
+import { isFunction, isString } from '@tarojs/shared'
 import { createRenderer } from 'solid-js/universal'
 
 import { h } from './h'
@@ -46,11 +48,10 @@ const renderer = createRenderer<TaroNode>({
 export const render = renderer.render
 export const effect = renderer.effect
 export const memo = renderer.memo
-export const createComponent = (type, props) => {
-  if (typeof type === 'string') {
-    return h(type, props)
-  }
-  return renderer.createComponent(type, props)
+export const createComponent = (type, props?) => {
+  if (isString(type)) return h(type, props)
+  if (isFunction(type)) return renderer.createComponent(type, props)
+  return renderer.createComponent(Fragment, props)
 }
 export const createElement = renderer.createElement
 export const createTextNode = renderer.createTextNode
@@ -59,3 +60,12 @@ export const insert = renderer.insert
 export const spread = renderer.spread
 export const setProp = renderer.setProp
 export const mergeProps = renderer.mergeProps
+
+function Fragment(props) {
+  return props.children
+}
+function jsx(type, props) {
+  return createComponent(type, props)
+}
+
+export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs }

package/dist/runtime-framework/solid/reconciler/use.ts

@@ -5,4 +5,3 @@ export function use(fn, ele, accessor) {
     fn(ele, accessor)
   })
 }
-

package/dist/runtime-framework/solid/utils/index.ts

@@ -9,9 +9,9 @@ export function capitalize (s: string) {
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
 
-export const incrementId = () => {
-  let n = 0
-  return () => (n++).toString()
+export const incrementId = (init = 0) => {
+  let n = init
+  return () => n++
 }
 
 export const EMPTY_OBJ: any = {}
@@ -45,5 +45,3 @@ export function setRouterParams(options) {
     ...options,
   }
 }
-
-