@tarojs/plugin-platform-harmony-ets 4.0.0-beta.13 → 4.0.0-beta.131

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

@@ -1,26 +1,24 @@
-import { Current, document, requestAnimationFrame, TaroElement, window } from '@tarojs/runtime' // eslint-disable-line import/no-duplicates
-import { CONTEXT_ACTIONS, env, eventCenter, TFunc } from '@tarojs/runtime/dist/runtime.esm' // eslint-disable-line import/no-duplicates
+import { addLeadingSlash, CONTEXT_ACTIONS, Current, document, env, eventCenter, requestAnimationFrame, TaroElement, TFunc, window } from '@tarojs/runtime'
 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
@@ -30,10 +28,11 @@ interface InitNativeComponentEntryParams {
   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,29 +52,33 @@ 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 () {
@@ -91,13 +94,22 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
       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('')
       }
@@ -111,42 +123,71 @@ function initNativeComponentEntry (params: InitNativeComponentEntryParams) {
             return h(
               reactMeta.PageContext.Provider,
               { value: compId },
-              h(
-                Component,
-                {
-                  // TODO: 传递 Props
-                  ...(ctx.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)
     }
   }
 
@@ -157,30 +198,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)
+  }
 }
 
-export function createNativePageConfig (Component, pageName: string, react: typeof React, reactDOM: typeof ReactDOM, pageConfig) {
+
+const pages = new Map<string, any>()
+export function setPageById (inst: any, id: string) {
+  pages.set(id, inst)
+}
+
+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
@@ -195,7 +255,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
@@ -205,12 +265,16 @@ export function createNativePageConfig (Component, pageName: string, react: type
   const pageObj: Record<string, any> = {
     options: pageConfig,
     [ONLOAD] (options: Readonly<Record<string, unknown>> = {}, cb?: TFunc) {
-      hasLoaded = new Promise(resolve => { loadResolver = resolve })
+      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) {
@@ -223,7 +287,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()
@@ -236,9 +300,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)
@@ -257,7 +322,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
@@ -267,7 +336,7 @@ export function createNativePageConfig (Component, pageName: string, react: type
           pageElement = null
         }
         if (prepareMountList.length) {
-          prepareMountList.forEach(fn => fn())
+          prepareMountList.forEach((fn) => fn())
           prepareMountList = []
         }
       })
@@ -278,6 +347,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
       })
     },
@@ -310,12 +380,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)
@@ -323,11 +394,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) {
@@ -346,3 +414,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,4 @@
-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, 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 './constant'
@@ -8,7 +7,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 +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)
 
@@ -184,6 +176,7 @@ export function createPageConfig (component: any, pageName?: string, pageConfig?
         safeExecute(this.$taroPath, ON_READY)
         // 通过事件触发子组件的生命周期
         requestAnimationFrame(() => eventCenter.trigger(getOnReadyEventKey(id)))
+        this.onReady = {}
         this.onReady.called = true
       })
     },

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[] {

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

@@ -1,17 +1,15 @@
-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, eventCenter } from '@tarojs/runtime'
+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 +17,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 +30,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 +43,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 +67,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 +103,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 +137,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 +178,6 @@ export function createSolidApp(App: Component, config: AppConfig) {
     }
   }
 
-  Current.app = appObj
-  return appObj
+  Current.app = app
+  return app
 }