@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

package/dist/runtime-ets/utils/info.ts

@@ -1,6 +1,6 @@
 import { isFunction } from '@tarojs/shared'
 
-import type { TaroElement } from '../dom/element'
+import type { TaroElement } from '../dom/element/element'
 
 export const AREA_CHANGE_EVENT_NAME = 'areaChange'
 export const VISIBLE_CHANGE_EVENT_NAME = 'visibleChange'
@@ -20,34 +20,23 @@ export function createEventTapName (eventName: string) {
 export const disconnectEvent = (node: TaroElement, eventName: string) => {
   if (!node) return null
 
-  const id = node._nid
-  const component = node._instance
-
   try {
-    component.nodeInfoMap[id].eventMap[createEventTapName(eventName)] = false
+    node._nodeInfo.eventMap[createEventTapName(eventName)] = false
   } catch (e) {
     console.warn(`disconnectEvent ${eventName} error: `, e)
   }
 }
 
-export function getComponentEventCallback (node: TaroElement, eventName: string, callback?: (data: {component: any, eventResult: any}) => void) {
-  if (!node || !node?._instance) return null
-
-  const id = node._nid
-  const component = node?._instance
+export function getComponentEventCallback (node: TaroElement, eventName: string, callback?: (data: any) => void) {
+  if (!node) return null
 
-  if (component?.nodeInfoMap?.[id]?.eventMap?.[createEventTapName(eventName)]) {
+  if (node._nodeInfo?.eventMap?.[createEventTapName(eventName)]) {
     return (...eventResult: any[]) => {
-      if (!component?.nodeInfoMap?.[id]?.eventMap?.[createEventTapName(eventName)]) return
-
-      const res = {
-        component,
-        eventResult
-      }
+      if (!node._nodeInfo?.eventMap?.[createEventTapName(eventName)]) return
 
-      callback && callback.call(component, res)
+      callback && callback(eventResult)
 
-      node?.[createEventOnName(eventName)]?.(res)
+      node?.[createEventOnName(eventName)]?.(eventResult)
     }
   }
 
@@ -56,14 +45,11 @@ export function getComponentEventCallback (node: TaroElement, eventName: string,
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 function tapCallbackToNodeAndUpdate (node: TaroElement, eventName: string, callback: Function) {
-  const id = node._nid
-
-  node._instance.nodeInfoMap[id].eventMap[createEventTapName(eventName)] = true
-  node[createEventOnName(eventName)] = ({ eventResult }) => {
+  node._nodeInfo.eventMap[createEventTapName(eventName)] = true
+  node[createEventOnName(eventName)] = (eventResult) => {
     callback && callback(...eventResult)
   }
 
-  // 是半编译模式的节点但没有自主更新权，需要父节点触发更新
   if (!node._isDynamicNode && node._isCompileMode) {
     node.updateComponent()
   }
@@ -71,18 +57,15 @@ function tapCallbackToNodeAndUpdate (node: TaroElement, eventName: string, callb
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export async function setNodeEventCallbackAndTriggerComponentUpdate (node: TaroElement, eventName: string, callback: Function, isAsync = false) {
-  const id = node._nid
-  const instance = node._instance
-
   if (isAsync) {
     // 阻塞函数执行，等待监听节点绑定上的回调函数
-    if (!instance.nodeInfoMap[id].eventMap[createEventTapName(eventName)]) {
+    if (!node._nodeInfo.eventMap[createEventTapName(eventName)]) {
       let onEventPromiseResolve
       const eventPromise = new Promise(resolve => {
         onEventPromiseResolve = resolve
       })
 
-      instance.nodeInfoMap[id].promiseMap[eventName] = eventPromise
+      node._nodeInfo.promiseMap[eventName] = eventPromise
       tapCallbackToNodeAndUpdate(node, eventName, (...eventResult) => {
         callback && callback(...eventResult)
 
@@ -90,39 +73,30 @@ export async function setNodeEventCallbackAndTriggerComponentUpdate (node: TaroE
       })
     }
 
-    await instance.nodeInfoMap[id].promiseMap[eventName]
+    await node._nodeInfo.promiseMap[eventName]
   } else {
     tapCallbackToNodeAndUpdate(node, eventName, callback)
   }
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-export function bindAttributesCallback (node: TaroElement, attributeName: string, callback: Function) {
+export function bindAttributesCallback (node: TaroElement, _: string, callback: Function) {
   if (!node) return
 
-  const id = node._nid
-  const component = node._instance
-
-  component.nodeInfoMap[id].attributeCallback[attributeName] = callback
+  node._nodeInfo = callback
 }
 
 export function triggerAttributesCallback (node, attributeName) {
   if (!node) return
 
-  const id = node._nid
   const value = node._attrs[attributeName]
+  const cb = node._nodeInfo.attributeCallback[attributeName]
 
-  return node.awaitAppear.then(() => {
-    const component = node._instance
-    const cb = component.nodeInfoMap[id].attributeCallback[attributeName]
-    
-    isFunction(cb) && cb(value)
-  })
+  isFunction(cb) && cb(value)
 }
 
-export function initComponentNodeInfo (component: any, node: TaroElement) {
-  component.nodeInfoMap[node._nid] = {}
-  component.nodeInfoMap[node._nid].eventMap = {}
-  component.nodeInfoMap[node._nid].promiseMap = {}
-  component.nodeInfoMap[node._nid].attributeCallback = {}
+export function initComponentNodeInfo (node: TaroElement) {
+  node._nodeInfo.eventMap = {}
+  node._nodeInfo.promiseMap = {}
+  node._nodeInfo.attributeCallback = {}
 }

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

@@ -1,12 +1,11 @@
-// eslint-disable-next-line import/no-duplicates
-import { Current, document } from '@tarojs/runtime'
-// eslint-disable-next-line import/no-duplicates
-import { eventCenter } from '@tarojs/runtime/dist/runtime.esm'
+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 { setReconciler } from './connect'
 import { injectPageInstance } from './page'
 import { EMPTY_OBJ, incrementId, isClassComponent } from './utils'
 
+import type { AppInstance } from '@tarojs/runtime'
 import type React from 'react'
 
 let h: typeof React.createElement
@@ -28,8 +27,11 @@ const pageKeyId = incrementId()
 
 export function connectReactPage (
   R: typeof React,
-  id: string
+  id: string,
+  getCtx: () => any
 ) {
+  const ctx = getCtx?.()
+
   return (Page): React.ComponentClass<any> => {
     // eslint-disable-next-line dot-notation
     const isReactComponent = isClassComponent(R, Page)
@@ -65,11 +67,10 @@ export function connectReactPage (
         const children = this.state.hasError
           ? []
           : h(ReactMeta.PageContext.Provider, { value: id }, h(Page, {
-            ...this.props,
+            ...Object.assign({}, ctx?.props, this.props),
             ...refs
           }))
 
-        // TODO root
         return h(
           'view',
           { id, className: 'taro_page' },
@@ -129,8 +130,8 @@ export function createReactApp (
       appWrapperResolver(this)
     }
 
-    public mount (pageComponent: any, id: string, cb: () => void) {
-      const pageWrapper = connectReactPage(react, id)(pageComponent)
+    public mount (pageComponent: any, id: string, getCtx: () => any, cb: () => void) {
+      const pageWrapper = connectReactPage(react, id, getCtx)(pageComponent)
       const key = id + pageKeyId()
       const page = () => h(pageWrapper, { key, tid: id })
       this.pages.push(page)
@@ -172,14 +173,13 @@ export function createReactApp (
     render (cb: () => void) {
       appWrapper.forceUpdate(cb)
     },
-    mount (component: any, id: string, cb: () => void) {
+    mount (component: any, id: string, getCtx: () => any, cb: () => void) {
       if (appWrapper) {
-        appWrapper.mount(component, id, cb)
+        appWrapper.mount(component, id, getCtx, cb)
       } else {
-        appWrapperPromise.then(appWrapper => appWrapper.mount(component, id, cb))
+        appWrapperPromise.then(appWrapper => appWrapper.mount(component, id, getCtx, cb))
       }
     },
-
     unmount (id: string, cb: () => void) {
       appWrapper?.unmount(id, cb)
     },
@@ -212,7 +212,7 @@ export function createReactApp (
 
           app.onCreate?.()
         }
-        
+
         eventCenter.trigger('__taroRouterLaunch', launchParam)
       })
     },
@@ -236,21 +236,13 @@ export function createReactApp (
         app?.componentDidHide?.()
       })
     }
-  }
+  } as unknown as AppInstance
 
-  // TODO: function componennt hook
-  // function triggerAppHook (lifecycle: string, ...option) {
-  //   const instance = getPageInstance('taro-app')
-  //   if (instance) {
-  //     const app = getAppInstance()
-  //     const func = hooks.call('getLifecycle', instance, lifecycle)
-  //     if (Array.isArray(func)) {
-  //       func.forEach(cb => cb.apply(app, option))
-  //     }
-  //   }
-  // }
-
-  Current.app = app
+  if (Current.app) {
+    Current.app = Object.assign(app, Current.app)
+  } else {
+    Current.app = app
+  }
 
   return app
 }

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

@@ -7,14 +7,14 @@ import { HOOKS_APP_ID } from './utils'
 
 import type {
   AppInstance,
-  Func,
   Instance,
   PageLifeCycle,
-  PageProps
+  PageProps,
+  TFunc
 } from '@tarojs/runtime/dist/runtime.esm'
 
 const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
-  return (fn: Func) => {
+  return (fn: TFunc) => {
     const { R: React, PageContext } = ReactMeta
     const id = React.useContext(PageContext) || HOOKS_APP_ID
     const instRef = React.useRef<Instance<PageProps>>()
@@ -24,7 +24,6 @@ const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
     if (fnRef.current !== fn) fnRef.current = fn
 
     React.useLayoutEffect(() => {
-
       let inst = instRef.current = getPageInstance(id)
       let first = false
       if (!inst) {

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

@@ -2,8 +2,6 @@ import { hooks } from '@tarojs/shared'
 
 import * as taroHooks from './hooks'
 
-// declare const __TARO_FRAMEWORK__: string;
-
 hooks.tap('initNativeApi', function (taro) {
   for (const hook in taroHooks) {
     taro[hook] = taroHooks[hook]
@@ -13,4 +11,5 @@ hooks.tap('initNativeApi', function (taro) {
 export * from './app'
 export * from './connect'
 export * from './hooks'
+export * from './native-page'
 export * from './page'

package/dist/runtime-framework/react/native-page.ts

@@ -0,0 +1,421 @@
+import { Current, document, requestAnimationFrame, TaroElement, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
+import { addLeadingSlash, CONTEXT_ACTIONS, env, eventCenter, TFunc } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+import { ensure, hooks, isUndefined } from '@tarojs/shared'
+
+import { ReactMeta as reactMeta } from './app'
+import { setReconciler } from './connect'
+import { ON_HIDE, ON_READY, ON_SHOW } from './constant'
+import {
+  getOnHideEventKey,
+  getOnReadyEventKey,
+  getOnShowEventKey,
+  getPath,
+  injectPageInstance,
+  removePageInstance,
+  safeExecute,
+} from './page'
+import { EMPTY_OBJ, incrementId, isClassComponent } from './utils'
+
+import type { AppInstance } from '@tarojs/taro'
+import type * as React from 'react'
+
+const getNativeCompId = incrementId()
+let h: typeof React.createElement
+let ReactDOM
+let nativeComponentApp: AppInstance
+interface InitNativeComponentEntryParams {
+  R: typeof React
+  ReactDOM: typeof ReactDOM
+  cb?: TFunc
+  // 是否使用默认的 DOM 入口 - app；默认为true，false的时候，会创建一个新的dom并且把它挂载在 app 下面
+  isDefaultEntryDom?: boolean
+}
+
+function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
+  const { R, ReactDOM, cb, isDefaultEntryDom = true } = params
+  interface IEntryState {
+    components: {
+      compId: string
+      element: React.ReactElement
+    }[]
+  }
+
+  interface IWrapperProps {
+    compId: string
+    getCtx: () => any
+    renderComponent: (ctx: any) => React.ReactElement
+  }
+
+  class NativeComponentWrapper extends R.Component<IWrapperProps, Record<any, any>> {
+    root = R.createRef<TaroElement>()
+    ctx = this.props.getCtx()
+
+    componentDidMount () {
+      this.ctx.component = this
+      if (this.root.current) {
+        this.root.current = this.ctx
+      }
+    }
+
+    // React 16 uncaught error 会导致整个应用 crash，
+    // 目前把错误缩小到页面
+    componentDidCatch (error, info: React.ErrorInfo) {
+      console.warn(error)
+      console.error(info.componentStack)
+    }
+
+    render () {
+      return h(
+        'view',
+        {
+          ref: this.root,
+          id: this.props.compId,
+        },
+        this.props.renderComponent(this.ctx)
+      )
+    }
+  }
+
+  class Entry extends R.Component<Record<any, any>, IEntryState> {
+    state: IEntryState = {
+      components: [],
+    }
+
+    componentDidMount () {
+      if (isDefaultEntryDom) {
+        if (Current.app) {
+          Current.app = Object.assign(this, Current.app)
+        } else {
+          Current.app = this
+        }
+      } else {
+        nativeComponentApp = this
+      }
+      cb && cb()
+    }
+
+    // React 16 uncaught error 会导致整个应用 crash，
+    // 目前把错误缩小到页面
+    componentDidCatch (error, info: React.ErrorInfo) {
+      console.warn(error)
+      console.error(info.componentStack)
+    }
+
+    mount (Component, compId, getCtx, cb?) {
+      const isReactComponent = isClassComponent(R, Component)
+      const inject = (node?: any) => node && injectPageInstance(node, compId)
+      const refs = isReactComponent
+        ? { ref: inject }
+        : {
+          forwardedRef: inject,
+          reactReduxForwardedRef: inject,
+        }
+      if (reactMeta.PageContext === EMPTY_OBJ) {
+        reactMeta.PageContext = R.createContext('')
+      }
+      const item = {
+        compId,
+        element: h(NativeComponentWrapper, {
+          key: compId,
+          compId,
+          getCtx,
+          renderComponent (ctx) {
+            return h(
+              reactMeta.PageContext.Provider,
+              { value: compId },
+              h(Component, {
+                // TODO: 传递 Props
+                ...(ctx.props || {}),
+                ...refs,
+                $scope: ctx,
+              })
+            )
+          },
+        }),
+      }
+      this.setState(
+        {
+          components: [...this.state.components, item],
+        },
+        () => cb && cb()
+      )
+    }
+
+    unmount (compId, cb?) {
+      const components = this.state.components
+      const index = components.findIndex((item) => item.compId === compId)
+      const next = [...components.slice(0, index), ...components.slice(index + 1)]
+      this.setState(
+        {
+          components: next,
+        },
+        () => {
+          removePageInstance(compId)
+          cb && cb()
+        }
+      )
+    }
+
+    render () {
+      const components = this.state.components
+
+      return components.map(({ element }) => element)
+    }
+  }
+
+  setReconciler(ReactDOM)
+
+  let app = document.getElementById('app')
+  if (!isDefaultEntryDom && !nativeComponentApp) {
+    // create
+    const nativeApp = document.createElement('nativeComponent')
+    // insert
+    app?.appendChild(nativeApp)
+    app = nativeApp
+  }
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(h(Entry, {}), app)
+}
+
+export function createNativePageConfig (
+  Component,
+  pageName: string,
+  react: typeof React,
+  reactDOM: typeof ReactDOM,
+  pageConfig
+) {
+  reactMeta.R = react
+  h = react.createElement
+  ReactDOM = reactDOM
+  setReconciler(ReactDOM)
+  const [ONLOAD, ONUNLOAD, ONREADY, ONSHOW, ONHIDE, LIFECYCLES, SIDE_EFFECT_LIFECYCLES] =
+    hooks.call('getMiniLifecycleImpl')!.page
+  let unmounting = false
+  let prepareMountList: (() => void)[] = []
+  let pageElement: TaroElement | null = null
+  let loadResolver: (...args: unknown[]) => void
+  let hasLoaded: Promise<void>
+  const id = pageName ?? `taro_page_${getNativeCompId()}`
+  function setCurrentRouter (page) {
+    const router = page.route || page.__route__ || page.$taroPath
+    Current.router = {
+      params: page.$taroParams!,
+      path: addLeadingSlash(router),
+      $taroPath: page.$taroPath,
+      onReady: getOnReadyEventKey(id),
+      onShow: getOnShowEventKey(id),
+      onHide: getOnHideEventKey(id),
+    }
+    if (!isUndefined(page.exitState)) {
+      Current.router.exitState = page.exitState
+    }
+  }
+
+  const pageObj: Record<string, any> = {
+    options: pageConfig,
+    [ONLOAD] (options: Readonly<Record<string, unknown>> = {}, cb?: TFunc) {
+      hasLoaded = new Promise((resolve) => {
+        loadResolver = resolve
+      })
+      Current.page = this as any
+      this.config = pageConfig || {}
+      // this.$taroPath 是页面唯一标识
+      const uniqueOptions = Object.assign({}, options, { $taroTimestamp: Date.now() })
+      const $taroPath = (this.$taroPath = getPath(id, uniqueOptions))
+
+      // this.$taroParams 作为暴露给开发者的页面参数对象，可以被随意修改
+      if (this.$taroParams == null) {
+        this.$taroParams = uniqueOptions
+      }
+
+      setCurrentRouter(this)
+      window.trigger(CONTEXT_ACTIONS.INIT, $taroPath)
+
+      const mountCallback = () => {
+        pageElement = document.getElementById($taroPath)
+
+        ensure(pageElement !== null, '没有找到页面实例。')
+
+        safeExecute($taroPath, ONLOAD, this.$taroParams)
+        loadResolver()
+        cb && cb(pageElement)
+        pageElement.ctx = this
+      }
+
+      const mount = () => {
+        if (!Current.app) {
+          initNativeComponentEntry({
+            R: react,
+            ReactDOM,
+            cb: () => {
+              Current.app!.mount!(Component, $taroPath, () => this, mountCallback)
+            },
+          })
+        } else {
+          Current.app!.mount!(Component, $taroPath, () => this, mountCallback)
+        }
+      }
+
+      if (unmounting) {
+        prepareMountList.push(mount)
+      } else {
+        mount()
+      }
+    },
+    [ONUNLOAD] () {
+      const $taroPath = this.$taroPath
+      // 销毁当前页面的上下文信息
+      window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
+      // 触发onUnload生命周期
+      safeExecute($taroPath, ONUNLOAD)
+      resetCurrent.call(this)
+      unmounting = true
+      Current.app!.unmount!($taroPath, () => {
+        unmounting = false
+        removePageInstance($taroPath)
+        if (pageElement) {
+          pageElement.ctx = null
+          pageElement = null
+        }
+        if (prepareMountList.length) {
+          prepareMountList.forEach((fn) => fn())
+          prepareMountList = []
+        }
+      })
+    },
+    [ONREADY] () {
+      hasLoaded.then(() => {
+        // 触发生命周期
+        safeExecute(this.$taroPath, ON_READY)
+        // 通过事件触发子组件的生命周期
+        requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady = {}
+        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)
+        // 触发生命周期
+        safeExecute(this.$taroPath, ON_SHOW, options)
+        // 通过事件触发子组件的生命周期
+        requestAnimationFrame(() => eventCenter.trigger(getOnShowEventKey(id)))
+      })
+    },
+    [ONHIDE] () {
+      // 缓存当前页面上下文信息
+      window.trigger(CONTEXT_ACTIONS.RESTORE, this.$taroPath)
+      // 设置 Current 的 page 和 router
+      if (Current.page === this) {
+        Current.page = null
+        Current.router = null
+      }
+      // 触发生命周期
+      safeExecute(this.$taroPath, ON_HIDE)
+      // 通过事件触发子组件的生命周期
+      eventCenter.trigger(getOnHideEventKey(id))
+    },
+  }
+
+  function resetCurrent () {
+    if (Current.page === this) {
+      // 小程序插件页面卸载之后返回到宿主页面时，需重置Current页面和路由。否则引发插件组件二次加载异常 fix:#11991
+      Current.page = null
+      Current.router = null
+    }
+  }
+
+  LIFECYCLES.forEach((lifecycle) => {
+    pageObj[lifecycle] = function () {
+      return safeExecute(this.$taroPath, lifecycle, ...arguments)
+    }
+  })
+
+  // onShareAppMessage 和 onShareTimeline 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
+  SIDE_EFFECT_LIFECYCLES.forEach((lifecycle) => {
+    if (Component[lifecycle] || Component.prototype?.[lifecycle] || Component[lifecycle.replace(/^on/, 'enable')]) {
+      pageObj[lifecycle] = function (...args) {
+        const target = args[0]?.target
+        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)
+      }
+    }
+  })
+
+  hooks.call('modifyPageObject', pageObj)
+
+  return pageObj
+}
+
+export function createNativeComponentConfig (
+  Component,
+  react: typeof React,
+  reactdom,
+  componentConfig
+) {
+  reactMeta.R = react
+  h = react.createElement
+  ReactDOM = reactdom
+  setReconciler(ReactDOM)
+  const { isNewBlended } = componentConfig
+
+  const componentObj: Record<string, any> = {
+    options: componentConfig,
+    onLoad (
+      options: Readonly<Record<string, unknown>> = {}, // eslint-disable-line @typescript-eslint/no-unused-vars
+      cb?: TFunc
+    ) {
+      const app = isNewBlended ? nativeComponentApp : Current.app
+
+      const mountComponent = () => {
+        const app = isNewBlended ? nativeComponentApp : Current.app
+        const compId = (this.compId = getNativeCompId())
+
+        this.config = componentConfig
+        app!.mount!(
+          Component,
+          compId,
+          () => this,
+          () => {
+            const el = document.getElementById(compId)
+
+            if (!el) {
+              throw new Error(`没有找到组件实例。`)
+            } else {
+              el.ctx = this
+              cb && cb(el)
+            }
+          }
+        )
+      }
+
+      if (!app) {
+        initNativeComponentEntry({
+          R: react,
+          ReactDOM,
+          isDefaultEntryDom: !isNewBlended,
+          cb: mountComponent,
+        })
+      } else {
+        mountComponent()
+      }
+    },
+
+    onUnload () {
+      const app = isNewBlended ? nativeComponentApp : Current.app
+      app!.unmount!(this.compId)
+    },
+  }
+
+  return componentObj
+}