@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.2 → 4.0.0-alpha.21

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

@@ -1,13 +1,17 @@
-import { Current } from '@tarojs/runtime'
-import { isArray, isFunction, isUndefined } from '@tarojs/shared'
+import { Current, document, requestAnimationFrame, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
+import { addLeadingSlash, CONTEXT_ACTIONS, env, eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+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()
 
 export function injectPageInstance (inst: any, id: string) {
+  hooks.call('mergePageInstance', instances.get(id), inst)
   instances.set(id, inst)
 }
 
@@ -19,13 +23,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 +30,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 +73,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 +110,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 +126,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 +150,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 +171,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 +205,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

@@ -5,27 +5,32 @@ import type { Style, TaroElement } from '@tarojs/runtime'
 
 export type Props = Record<string, unknown>
 
+const isHarmony = process.env.TARO_PLATFORM === 'harmony'
+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,12 +64,11 @@ 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' && !isHarmony && 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)
@@ -76,19 +80,24 @@ function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: un
   }
 }
 
-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] === '-' && !isHarmony) {
     // 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 (isHarmony && 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 +108,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 +123,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 +131,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 (isHarmony && (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 (isHarmony && (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 +183,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

@@ -45,5 +45,3 @@ export function setRouterParams(options) {
     ...options,
   }
 }
-
-