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

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

@@ -0,0 +1,256 @@
+// 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 { setReconciler } from './connect'
+import { injectPageInstance } from './page'
+import { EMPTY_OBJ, incrementId, isClassComponent } from './utils'
+
+import type React from 'react'
+
+let h: typeof React.createElement
+let ReactDOM
+
+interface IReactMeta {
+  PageContext: React.Context<string>
+  R: typeof React
+  Container: any
+}
+
+export const ReactMeta: IReactMeta = {
+  R: EMPTY_OBJ,
+  Container: EMPTY_OBJ,
+  PageContext: EMPTY_OBJ
+}
+
+const pageKeyId = incrementId()
+
+export function connectReactPage (
+  R: typeof React,
+  id: string
+) {
+  return (Page): React.ComponentClass<any> => {
+    // eslint-disable-next-line dot-notation
+    const isReactComponent = isClassComponent(R, Page)
+    const inject = (node?: any) => node && injectPageInstance(node, id)
+    const refs = isReactComponent ? { ref: inject } : {
+      forwardedRef: inject,
+      // 兼容 react-redux 7.20.1+
+      reactReduxForwardedRef: inject
+    }
+
+    if (ReactMeta.PageContext === EMPTY_OBJ) {
+      ReactMeta.PageContext = R.createContext('')
+    }
+
+    return class PageWrapper extends R.Component<any, { hasError: boolean }> {
+      state = {
+        hasError: false
+      }
+
+      static getDerivedStateFromError (error: Error) {
+        Current.app?.onError?.(error.message + error.stack)
+        return { hasError: true }
+      }
+
+      // React 16 uncaught error 会导致整个应用 crash，
+      // 目前把错误缩小到页面
+      componentDidCatch (error, info: React.ErrorInfo) {
+        console.warn(error)
+        console.error(info.componentStack)
+      }
+
+      render () {
+        const children = this.state.hasError
+          ? []
+          : h(ReactMeta.PageContext.Provider, { value: id }, h(Page, {
+            ...this.props,
+            ...refs
+          }))
+
+        // TODO root
+        return h(
+          'view',
+          { id, className: 'taro_page' },
+          children
+        )
+      }
+    }
+  }
+}
+
+export function createReactApp (
+  App,
+  react,
+  dom,
+  _config?: any
+) {
+  ReactMeta.R = react
+  h = react.createElement
+  ReactDOM = dom
+  const appInstanceRef = react.createRef()
+  const isReactComponent = isClassComponent(react, App)
+  let appWrapper: AppWrapper
+  let appWrapperResolver: (value: AppWrapper) => void
+  const appWrapperPromise = new Promise<AppWrapper>(resolve => (appWrapperResolver = resolve))
+
+  setReconciler(ReactDOM)
+
+  function getAppInstance (): any {
+    return appInstanceRef.current
+  }
+
+  function waitAppWrapper (cb: () => void) {
+    appWrapper ? cb() : appWrapperPromise.then(() => cb())
+  }
+
+  function renderReactRoot () {
+    const appId = 'app'
+
+    if (ReactMeta.Container === EMPTY_OBJ) {
+      const Container = document.createElement('view')
+
+      Container.id = appId
+      ReactMeta.Container = Container
+    }
+
+    const root = ReactDOM.createRoot(ReactMeta.Container)
+    root.render?.(h(AppWrapper as any))
+  }
+
+  class AppWrapper extends react.Component {
+    private pages: Array<any> = []
+    private elements: Array<any> = []
+
+    constructor (props) {
+      super(props)
+      appWrapper = this
+      appWrapperResolver(this)
+    }
+
+    public mount (pageComponent: any, id: string, cb: () => void) {
+      const pageWrapper = connectReactPage(react, id)(pageComponent)
+      const key = id + pageKeyId()
+      const page = () => h(pageWrapper, { key, tid: id })
+      this.pages.push(page)
+      this.forceUpdate(cb)
+    }
+
+    public unmount (id: string, cb: () => void) {
+      const elements = this.elements
+      const idx = elements.findIndex(item => item.props.tid === id)
+      elements.splice(idx, 1)
+      this.forceUpdate(cb)
+    }
+
+    public render () {
+      const { pages, elements } = this
+
+      while (pages.length > 0) {
+        const page = pages.pop()!
+        elements.push(page())
+      }
+
+      let props: React.ComponentProps<any> | null = null
+
+      if (isReactComponent) {
+        props = { ref: appInstanceRef }
+      }
+
+      return h(
+        App,
+        props,
+        elements.slice()
+      )
+    }
+  }
+
+  renderReactRoot()
+
+  const app = {
+    render (cb: () => void) {
+      appWrapper.forceUpdate(cb)
+    },
+    mount (component: any, id: string, cb: () => void) {
+      if (appWrapper) {
+        appWrapper.mount(component, id, cb)
+      } else {
+        appWrapperPromise.then(appWrapper => appWrapper.mount(component, id, cb))
+      }
+    },
+
+    unmount (id: string, cb: () => void) {
+      appWrapper?.unmount(id, cb)
+    },
+    onLaunch (launchParam?: any) {
+      waitAppWrapper(() => {
+        // 用户编写的入口组件实例
+        const app = getAppInstance()
+        this.$app = app
+
+        if (app) {
+          // 把 App Class 上挂载的额外属性同步到全局 app 对象中
+          if (app.taroGlobalData) {
+            const globalData = app.taroGlobalData
+            const keys = Object.keys(globalData)
+            const descriptors = Object.getOwnPropertyDescriptors(globalData)
+            keys.forEach(key => {
+              Object.defineProperty(this, key, {
+                configurable: true,
+                enumerable: true,
+                get () {
+                  return globalData[key]
+                },
+                set (value) {
+                  globalData[key] = value
+                }
+              })
+            })
+            Object.defineProperties(this, descriptors)
+          }
+
+          app.onCreate?.()
+        }
+        
+        eventCenter.trigger('__taroRouterLaunch', launchParam)
+      })
+    },
+    onShow () {
+      waitAppWrapper(() => {
+        /**
+        * trigger lifecycle
+        */
+        const app = getAppInstance()
+        // class component, componentDidShow
+        app?.componentDidShow?.()
+      })
+    },
+    onHide () {
+      waitAppWrapper(() => {
+        /**
+        * trigger lifecycle
+        */
+        const app = getAppInstance()
+        // class component, componentDidShow
+        app?.componentDidHide?.()
+      })
+    }
+  }
+
+  // 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
+
+  return app
+}

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

@@ -0,0 +1,24 @@
+import { hooks } from '@tarojs/shared'
+
+import { ensureIsArray } from './utils'
+
+export function setReconciler (ReactDOM) {
+  hooks.tap('batchedEventUpdates', function (cb) {
+    ReactDOM.unstable_batchedUpdates(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/react/constant.ts

@@ -0,0 +1,5 @@
+export const ON_SHOW = 'onShow'
+export const ON_HIDE = 'onHide'
+export const ON_LOAD = 'onLoad'
+export const ON_UNLOAD = 'onUnload'
+export const ON_READY = 'onReady'

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

@@ -0,0 +1,101 @@
+import { Current } from '@tarojs/runtime'
+import { isArray, isFunction } from '@tarojs/shared'
+
+import { ReactMeta } from './app'
+import { getPageInstance, injectPageInstance } from './page'
+import { HOOKS_APP_ID } from './utils'
+
+import type {
+  AppInstance,
+  Func,
+  Instance,
+  PageLifeCycle,
+  PageProps
+} from '@tarojs/runtime/dist/runtime.esm'
+
+const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
+  return (fn: Func) => {
+    const { R: React, PageContext } = ReactMeta
+    const id = React.useContext(PageContext) || HOOKS_APP_ID
+    const instRef = React.useRef<Instance<PageProps>>()
+
+    // hold fn ref and keep up to date
+    const fnRef = React.useRef(fn)
+    if (fnRef.current !== fn) fnRef.current = fn
+
+    React.useLayoutEffect(() => {
+
+      let inst = instRef.current = getPageInstance(id)
+      let first = false
+      if (!inst) {
+        first = true
+        instRef.current = Object.create(null)
+        inst = instRef.current!
+      }
+
+      // callback is immutable but inner function is up to date
+      const callback = (...args: any) => fnRef.current(...args)
+
+      if (isFunction(inst[lifecycle])) {
+        (inst[lifecycle]) = [inst[lifecycle], callback]
+      } else {
+        (inst[lifecycle]) = [
+          ...((inst[lifecycle]) || []),
+          callback
+        ]
+      }
+
+      if (first) {
+        injectPageInstance(inst!, id)
+      }
+      return () => {
+        const inst = instRef.current
+        if (!inst) return
+        const list = inst![lifecycle]
+        if (list === callback) {
+          (inst[lifecycle]) = undefined
+        } else if (isArray(list)) {
+          (inst[lifecycle]) = list.filter(item => item !== callback)
+        }
+        instRef.current = undefined
+      }
+    }, [])
+  }
+}
+
+/** LifeCycle */
+export const useDidHide = createTaroHook('componentDidHide')
+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')
+
+/** Page */
+export const useLoad = createTaroHook('onLoad')
+export const usePageScroll = createTaroHook('onPageScroll')
+export const usePullDownRefresh = createTaroHook('onPullDownRefresh')
+export const usePullIntercept = createTaroHook('onPullIntercept')
+export const useReachBottom = createTaroHook('onReachBottom')
+export const useResize = createTaroHook('onResize')
+export const useUnload = createTaroHook('onUnload')
+
+/** Mini-Program */
+export const useAddToFavorites = createTaroHook('onAddToFavorites')
+export const useOptionMenuClick = createTaroHook('onOptionMenuClick')
+export const useSaveExitState = createTaroHook('onSaveExitState')
+export const useShareAppMessage = createTaroHook('onShareAppMessage')
+export const useShareTimeline = createTaroHook('onShareTimeline')
+export const useTitleClick = createTaroHook('onTitleClick')
+
+/** Router */
+export const useReady = createTaroHook('onReady')
+export const useRouter = (dynamic = false) => {
+  const React = ReactMeta.R
+  return dynamic ? Current.router : React.useMemo(() => Current.router, [])
+}
+export const useTabItemTap = createTaroHook('onTabItemTap')
+
+export const useScope = () => undefined

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

@@ -0,0 +1,16 @@
+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]
+  }
+})
+
+export * from './app'
+export * from './connect'
+export * from './hooks'
+export * from './page'

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

@@ -0,0 +1,263 @@
+// eslint-disable-next-line import/no-duplicates
+import { Current, document, requestAnimationFrame, window } from '@tarojs/runtime'
+// eslint-disable-next-line import/no-duplicates
+import { CONTEXT_ACTIONS, env, eventCenter } from '@tarojs/runtime/dist/runtime.esm'
+import { hooks, isArray, isFunction, isUndefined } from '@tarojs/shared'
+
+import { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, ON_UNLOAD } from './constant'
+import { incrementId } from './utils'
+
+import type { PageConfig } from '@tarojs/taro'
+
+// TODO TYPE
+const instances = new Map<string, any>()
+const pageId = incrementId()
+
+// TODO TYPE
+export function injectPageInstance (inst: any, id: string) {
+  hooks.call('mergePageInstance', instances.get(id), inst)
+  instances.set(id, inst)
+}
+
+// TODO TYPE
+export function getPageInstance (id: string): any {
+  return instances.get(id)
+}
+
+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)
+
+  if (instance == null) {
+    return
+  }
+
+  lifecycle = lifecycle.replace(/^on(Show|Hide)$/, 'componentDid$1')
+  const func = instance[lifecycle]
+
+  if (isArray(func)) {
+    const res = func.map(fn => fn.apply(instance, args))
+    return res[0]
+  }
+
+  if (!isFunction(func)) {
+    return
+  }
+
+  return func.apply(instance, args)
+}
+
+export function stringify (obj?: Record<string, unknown>) {
+  if (obj == null) {
+    return ''
+  }
+  const path = Object.keys(obj).map((key) => {
+    return key + '=' + obj[key]
+  }).join('&')
+  return path === '' ? path : '?' + path
+}
+
+export function getPath (id: string, options?: Record<string, unknown>): string {
+  const idx = id.indexOf('?')
+
+  return `${idx > -1 ? id.substring(0, idx) : id}${stringify(options)}`
+}
+
+export function getOnReadyEventKey (path: string) {
+  return path + '.' + ON_READY
+}
+
+export function getOnShowEventKey (path: string) {
+  return path + '.' + ON_SHOW
+}
+
+export function getOnHideEventKey (path: string) {
+  return path + '.' + ON_HIDE
+}
+
+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
+
+  // TODO TYPE
+  let pageElement: any = null
+  let unmounting = false
+  let prepareMountList: (() => void)[] = []
+
+  // TODO TYPE
+  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
+    }
+  }
+
+  let loadResolver: (...args: any[]) => void
+  let hasLoaded: Promise<void>
+  const page = {
+    [ONLOAD] (options: Readonly<Record<string, unknown>> = {}, cb?: (...args: any[]) => any) {
+      hasLoaded = new Promise(resolve => { loadResolver = resolve })
+
+      Current.page = this as any
+
+      // 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 mount = () => {
+        Current.app!.mount!(component, $taroPath, () => {
+          pageElement = document.getElementById($taroPath)
+
+          if (!pageElement) {
+            throw new Error(`没有找到页面实例。`)
+          }
+
+          safeExecute($taroPath, ON_LOAD, this.$taroParams)
+          loadResolver()
+          cb && cb(pageElement)
+          pageElement.ctx = this
+        })
+      }
+
+      if (unmounting) {
+        prepareMountList.push(mount)
+      } else {
+        mount()
+      }
+    },
+    [ONUNLOAD] () {
+      const $taroPath = this.$taroPath
+      // 销毁当前页面的上下文信息
+      window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
+
+      // 触发onUnload生命周期
+      safeExecute($taroPath, ON_UNLOAD)
+      unmounting = true
+      Current.app!.unmount!($taroPath, () => {
+        unmounting = false
+        instances.delete($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.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)
+      // TODO 通过事件触发子组件的生命周期
+      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/react/utils/index.ts

@@ -0,0 +1,25 @@
+import { isArray } from './is'
+
+export * from './is'
+export { noop } from '@tarojs/shared'
+
+export function capitalize (s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+export const incrementId = () => {
+  let n = 0
+  return () => (n++).toString()
+}
+
+export function ensureIsArray<T> (item: T | T[]): T[] {
+  if (isArray(item)) {
+    return item
+  } else {
+    return item ? [item] : []
+  }
+}
+
+export const EMPTY_OBJ: any = {}
+
+export const HOOKS_APP_ID = 'taro-app'