@tarojs/plugin-platform-harmony-ets 4.0.0-canary.8 → 4.0.0

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

@@ -1,17 +1,16 @@
-import { Current, document } from '@tarojs/runtime'
-import { hooks, isWebPlatform } from '@tarojs/shared'
+import { createComponent, h, render } from '@tarojs/plugin-framework-solid/dist/reconciler'
+import { Current, document } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
+import { eventCenter } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+import { hooks } from '@tarojs/shared'
 import { batch, createContext, createRoot, createSignal, For } from 'solid-js'
 
 import { setReconciler } from './connect'
 import { getPageInstance, injectPageInstance } from './page'
-import { createComponent, h, render } from './reconciler'
 import { EMPTY_OBJ, HOOKS_APP_ID, setDefaultDescriptor, setRouterParams } from './utils'
 
 import type { AppInstance, Instance, PageLifeCycle, PageProps, ReactAppInstance } from '@tarojs/runtime'
 import type { AppConfig } from '@tarojs/taro'
-import type { Component } from './connect'
-
-const isWeb = isWebPlatform()
+import type { SolidComponent } from './connect'
 
 export const ReactMeta = {
   R: EMPTY_OBJ,
@@ -19,7 +18,7 @@ export const ReactMeta = {
   PageContext: EMPTY_OBJ
 }
 
-export function createSolidApp(App: Component, config: AppConfig) {
+export function createSolidApp(App: SolidComponent, config: AppConfig) {
   setReconciler()
 
   if (ReactMeta.PageContext === EMPTY_OBJ) {
@@ -32,13 +31,10 @@ export function createSolidApp(App: Component, config: AppConfig) {
   }
 
   function renderReactRoot() {
-    let appId = 'app'
-    if (isWeb) {
-      appId = config?.appId || appId
-    }
+    const appId = config?.appId || 'app'
 
     if (ReactMeta.Container === EMPTY_OBJ) {
-      const Container = document.createElement('view')
+      const Container = document.getElementById(appId)
 
       Container.id = appId
       ReactMeta.Container = Container
@@ -48,17 +44,18 @@ export function createSolidApp(App: Component, config: AppConfig) {
     render(AppWrapper, root)
   }
   const [pages, setPages] = createSignal<any[]>([])
+  const [elements, setElements] = createSignal<any[]>([])
 
   function AppWrapper () {
     appRef = {} as unknown as ReactAppInstance
     return createComponent(App, {
-      children: createComponent(For as unknown as Component, {
+      children: createComponent(For as unknown as SolidComponent, {
         get each() {
           return pages()
         },
         children: ({ id, component }) => {
           const children = () =>
-            createComponent(ReactMeta.PageContext.Provider as unknown as Component, {
+            createComponent(ReactMeta.PageContext.Provider as unknown as SolidComponent, {
               value: id,
               children: () => {
                 injectPageInstance(
@@ -71,38 +68,33 @@ export function createSolidApp(App: Component, config: AppConfig) {
               },
             })
 
-          if (isWeb) {
-            return h('div', { id, className: 'taro_page' }, children)
-          } else {
-            return h('root', { id }, children)
-          }
+          return h(
+            'taro-page',
+            { id, className: 'taro_page' },
+            children
+          )
         },
       }),
     })
   }
 
-  if (!isWeb) {
-    renderReactRoot()
-  }
-
-  const [ONLAUNCH, ONSHOW, ONHIDE] = hooks.call('getMiniLifecycleImpl')!.app
+  renderReactRoot()
 
-  const appObj: AppInstance = Object.create(
+  const app: AppInstance = Object.create(
     {
-      mount(component: Component, id: string, cb: () => void) {
+      mount(component: SolidComponent, id: string, cb: () => void) {
         setPages((old) => [
           ...old,
           { id, component },
         ])
         batch(cb)
       },
-
       unmount(id: string, cb: () => void) {
-        setPages(
-          pages().filter((item) => {
-            return item.id !== id
-          })
-        )
+        const idx = elements().findIndex((item) => item.id === id)
+        setElements((old) => {
+          old.splice(idx, 1)
+          return old
+        })
         batch(cb)
       },
     },
@@ -112,15 +104,10 @@ export function createSolidApp(App: Component, config: AppConfig) {
         value: config,
       }),
 
-      [ONLAUNCH]: setDefaultDescriptor({
+      onLaunch: setDefaultDescriptor({
         value(options) {
           setRouterParams(options)
 
-          if (isWeb) {
-            // 由于 H5 路由初始化的时候会清除 app 下的 dom 元素，所以需要在路由初始化后执行 render
-            renderReactRoot()
-          }
-
           const onLaunch = () => {
             const app = getAppInstance()
 
@@ -151,28 +138,25 @@ export function createSolidApp(App: Component, config: AppConfig) {
 
           onLaunch()
           triggerAppHook('onLaunch', options)
+          eventCenter.trigger('__taroRouterLaunch', options)
         },
       }),
-
-      [ONSHOW]: setDefaultDescriptor({
+      onShow: setDefaultDescriptor({
         value(options) {
           setRouterParams(options)
           triggerAppHook('onShow', options)
         },
       }),
-
-      [ONHIDE]: setDefaultDescriptor({
+      onHide: setDefaultDescriptor({
         value() {
           triggerAppHook('onHide')
         },
       }),
-
       onError: setDefaultDescriptor({
         value(error: string) {
           triggerAppHook('onError', error)
         },
       }),
-
       onPageNotFound: setDefaultDescriptor({
         value(res: unknown) {
           triggerAppHook('onPageNotFound', res)
@@ -195,6 +179,6 @@ export function createSolidApp(App: Component, config: AppConfig) {
     }
   }
 
-  Current.app = appObj
-  return appObj
+  Current.app = app
+  return app
 }

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,
-  Func,
-  PageLifeCycle
-} from '@tarojs/runtime'
+import { Current } from '@tarojs/runtime'
 import { isArray, isFunction } from '@tarojs/shared'
 import {
   createMemo,
@@ -15,8 +10,14 @@ import { ReactMeta } from './app'
 import { getPageInstance, injectPageInstance } from './page'
 import { HOOKS_APP_ID } from './utils'
 
+import type {
+  AppInstance,
+  PageLifeCycle,
+  TFunc
+} from '@tarojs/runtime/dist/runtime.esm'
+
 const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
-  return (fn: Func) => {
+  return (fn: TFunc) => {
     const id = ReactMeta.PageContext || HOOKS_APP_ID
 
     createRenderEffect(() => {
@@ -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,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()
+const pageId = incrementId(1)
 
 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)
+  }
+}