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

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

@@ -1,39 +1,39 @@
 import { Current, document, requestAnimationFrame, TaroElement, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
-import { CONTEXT_ACTIONS, env, eventCenter, Func } from '@tarojs/runtime/dist/runtime.esm' // 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 {
-  addLeadingSlash,
   getOnHideEventKey,
   getOnReadyEventKey,
-  getOnShowEventKey, 
+  getOnShowEventKey,
   getPath,
   injectPageInstance,
   removePageInstance,
-  safeExecute
+  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()
+const getNativeCompId = incrementId(1)
 let h: typeof React.createElement
 let ReactDOM
 let nativeComponentApp: AppInstance
 interface InitNativeComponentEntryParams {
   R: typeof React
   ReactDOM: typeof ReactDOM
-  cb?: Func
+  cb?: TFunc
   // 是否使用默认的 DOM 入口 - app；默认为true，false的时候，会创建一个新的dom并且把它挂载在 app 下面
   isDefaultEntryDom?: boolean
+  isUseReact18?: boolean
 }
 
 function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
-  const { R, ReactDOM, cb, isDefaultEntryDom = true } = params
+  const { R, ReactDOM, cb, isDefaultEntryDom = true, isUseReact18 = false } = params
   interface IEntryState {
     components: {
       compId: string
@@ -53,47 +53,64 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
 
     componentDidMount () {
       this.ctx.component = this
-      const rootElement = this.root.current!
-      rootElement.ctx = this.ctx
-      // TODO: performUpdate
-      // rootElement.performUpdate(true)
+      if (this.root.current) {
+        this.root.current = this.ctx
+      }
+    }
+
+    // React 16 uncaught error 会导致整个应用 crash，
+    // 目前把错误缩小到页面
+    componentDidCatch (error, info: React.ErrorInfo) {
+      console.warn(`Taro Error Page 报错信息：${error}`)
+      console.error(`Taro Error Page 报错堆栈：${info.componentStack}`)
     }
 
     render () {
-      return (
-        h(
-          'view',
-          {
-            ref: this.root,
-            id: this.props.compId
-          },
-          this.props.renderComponent(this.ctx)
-        )
+      return h(
+        'taro-page',
+        {
+          ref: this.root,
+          id: this.props.compId,
+        },
+        this.props.renderComponent(this.ctx)
       )
     }
   }
 
   class Entry extends R.Component<Record<any, any>, IEntryState> {
     state: IEntryState = {
-      components: []
+      components: [],
     }
 
     componentDidMount () {
       if (isDefaultEntryDom) {
-        Current.app = this
+        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
-      }
+      const refs = isReactComponent
+        ? { ref: inject }
+        : {
+          forwardedRef: inject,
+          reactReduxForwardedRef: inject,
+        }
       if (reactMeta.PageContext === EMPTY_OBJ) {
         reactMeta.PageContext = R.createContext('')
       }
@@ -107,42 +124,71 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
             return h(
               reactMeta.PageContext.Provider,
               { value: compId },
-              h(
-                Component,
-                {
-                  // TODO: 传递 Props
-                  ...(ctx.data ||= {}).props,
-                  ...refs,
-                  $scope: ctx
-                }
-              )
+              h(Component, {
+                // TODO: 传递 Props
+                ...(ctx.props || {}),
+                ...refs,
+                $scope: ctx,
+              })
             )
-          }
+          },
+        }),
+      }
+
+      if (isUseReact18) {
+        ReactDOM.flushSync(() => {
+          this.setState(
+            {
+              components: [...this.state.components, item],
+            },
+            () => cb && cb()
+          )
         })
+      } else {
+        this.setState(
+          {
+            components: [...this.state.components, item],
+          },
+          () => cb && cb()
+        )
       }
-      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 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()
-      })
+
+
+      if (isUseReact18) {
+        ReactDOM.flushSync(() => {
+          this.setState(
+            {
+              components: next,
+            },
+            () => {
+              removePageInstance(compId)
+              cb && cb()
+            }
+          )
+        })
+      } else {
+        this.setState(
+          {
+            components: next,
+          },
+          () => {
+            removePageInstance(compId)
+            cb && cb()
+          }
+        )
+      }
     }
 
     render () {
       const components = this.state.components
 
-      return (
-        components.map(({ element }) => element)
-      )
+      return components.map(({ element }) => element)
     }
   }
 
@@ -153,30 +199,49 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
     // create
     const nativeApp = document.createElement('nativeComponent')
     // insert
-    app.appendChild(nativeApp)
+    app?.appendChild(nativeApp)
     app = nativeApp
   }
-  // eslint-disable-next-line react/no-deprecated
-  ReactDOM.render(
-    h(Entry, {}),
-    app
-  )
+
+  if (isUseReact18) {
+    const root = ReactDOM.createRoot(app)
+
+    ReactDOM.flushSync(() => {
+      root.render?.(h(Entry))
+    })
+  } else {
+    // eslint-disable-next-line react/no-deprecated
+    ReactDOM.render(h(Entry, {}), app)
+  }
+}
+
+
+const pages = new Map<string, any>()
+export function setPageById (inst: any, id: string) {
+  pages.set(id, inst)
 }
 
-export function createNativePageConfig (Component, pageName: string, react: typeof React, reactDOM: typeof ReactDOM, pageConfig) {
+export function getPageById (id: string): any {
+  return pages.get(id)
+}
+
+export function removePageById (id: string) {
+  pages.delete(id)
+}
+
+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
+  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
@@ -191,7 +256,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
       $taroPath: page.$taroPath,
       onReady: getOnReadyEventKey(id),
       onShow: getOnShowEventKey(id),
-      onHide: getOnHideEventKey(id)
+      onHide: getOnHideEventKey(id),
     }
     if (!isUndefined(page.exitState)) {
       Current.router.exitState = page.exitState
@@ -200,13 +265,17 @@ export function createNativePageConfig (Component, pageName: string, react: type
 
   const pageObj: Record<string, any> = {
     options: pageConfig,
-    [ONLOAD] (options: Readonly<Record<string, unknown>> = {}, cb?: Func) {
-      hasLoaded = new Promise(resolve => { loadResolver = resolve })
+    [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)
+      const $taroPath = (this.$taroPath = getPath(id, uniqueOptions))
+
+      setPageById(this, $taroPath)
 
       // this.$taroParams 作为暴露给开发者的页面参数对象，可以被随意修改
       if (this.$taroParams == null) {
@@ -219,7 +288,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
       const mountCallback = () => {
         pageElement = document.getElementById($taroPath)
 
-        ensure(pageElement !== null, '没有找到页面实例。')
+        ensure(pageElement !== null, `Taro Error Page: ${$taroPath}, 该页面执行时出现了报错，导致没有找到页面实例。`)
 
         safeExecute($taroPath, ONLOAD, this.$taroParams)
         loadResolver()
@@ -232,9 +301,10 @@ export function createNativePageConfig (Component, pageName: string, react: type
           initNativeComponentEntry({
             R: react,
             ReactDOM,
+            isUseReact18: pageConfig?.isUseReact18,
             cb: () => {
               Current.app!.mount!(Component, $taroPath, () => this, mountCallback)
-            }
+            },
           })
         } else {
           Current.app!.mount!(Component, $taroPath, () => this, mountCallback)
@@ -253,7 +323,11 @@ export function createNativePageConfig (Component, pageName: string, react: type
       window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
       // 触发onUnload生命周期
       safeExecute($taroPath, ONUNLOAD)
-      resetCurrent()
+
+
+      removePageById($taroPath)
+
+      resetCurrent.call(this)
       unmounting = true
       Current.app!.unmount!($taroPath, () => {
         unmounting = false
@@ -263,7 +337,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
           pageElement = null
         }
         if (prepareMountList.length) {
-          prepareMountList.forEach(fn => fn())
+          prepareMountList.forEach((fn) => fn())
           prepareMountList = []
         }
       })
@@ -274,6 +348,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
         safeExecute(this.$taroPath, ON_READY)
         // 通过事件触发子组件的生命周期
         requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady = {}
         this.onReady.called = true
       })
     },
@@ -306,12 +381,13 @@ export function createNativePageConfig (Component, pageName: string, react: type
   }
 
   function resetCurrent () {
-    // 小程序插件页面卸载之后返回到宿主页面时，需重置Current页面和路由。否则引发插件组件二次加载异常 fix:#11991
-    Current.page = null
-    Current.router = null
+    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)
@@ -319,11 +395,8 @@ export function createNativePageConfig (Component, pageName: string, react: type
   })
 
   // onShareAppMessage 和 onShareTimeline 一样，会影响小程序右上方按钮的选项，因此不能默认注册。
-  SIDE_EFFECT_LIFECYCLES.forEach(lifecycle => {
-    if (Component[lifecycle] ||
-      Component.prototype?.[lifecycle] ||
-      Component[lifecycle.replace(/^on/, 'enable')]
-    ) {
+  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) {
@@ -342,3 +415,67 @@ export function createNativePageConfig (Component, pageName: string, react: type
 
   return pageObj
 }
+
+export function createNativeComponentConfig (
+  Component,
+  react: typeof React,
+  reactdom,
+  componentConfig
+) {
+  reactMeta.R = react
+  h = react.createElement
+  ReactDOM = reactdom
+  setReconciler(ReactDOM)
+  const { isNewBlended, isUseReact18 } = 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,
+          isUseReact18,
+          cb: mountComponent,
+        })
+      } else {
+        mountComponent()
+      }
+    },
+
+    onUnload () {
+      const app = isNewBlended ? nativeComponentApp : Current.app
+      app!.unmount!(this.compId)
+    },
+  }
+
+  return componentObj
+}

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

@@ -1,5 +1,5 @@
 import { Current, document, requestAnimationFrame, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
-import { CONTEXT_ACTIONS, env, eventCenter } from '@tarojs/runtime/dist/runtime.esm' // 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 './constant'
@@ -8,7 +8,7 @@ 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)
@@ -23,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)
 
@@ -136,7 +129,8 @@ export function createPageConfig (component: any, pageName?: string, pageConfig?
       window.trigger(CONTEXT_ACTIONS.INIT, $taroPath)
 
       const mount = () => {
-        Current.app!.mount!(component, $taroPath, () => {
+        // @ts-ignore
+        Current.app!.mount!(component, $taroPath, null, () => {
           pageElement = document.getElementById($taroPath)
 
           if (!pageElement) {
@@ -183,6 +177,8 @@ export function createPageConfig (component: any, pageName?: string, pageConfig?
         safeExecute(this.$taroPath, ON_READY)
         // 通过事件触发子组件的生命周期
         requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady = {}
+        this.onReady.called = true
       })
     },
     [ONSHOW] (options = {}) {

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

@@ -7,9 +7,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 function ensureIsArray<T> (item: T | T[]): T[] {