@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.0 → 4.0.0-alpha.11

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
+}

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'
@@ -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,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/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-react/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,10 +31,7 @@ export function createSolidApp(App: Component, config: AppConfig) {
   }
 
   function renderReactRoot() {
-    let appId = 'app'
-    if (isWeb) {
-      appId = config?.appId || appId
-    }
+    const appId = 'app'
 
     if (ReactMeta.Container === EMPTY_OBJ) {
       const Container = document.createElement('view')
@@ -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,29 @@ 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('root', { id }, 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 +100,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 +134,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 +175,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)
+    })
+  })
 }