@tarojs/plugin-platform-harmony-cpp 4.1.0 → 4.1.1-alpha.0

package/dist/runtime/framework/app.ts

@@ -0,0 +1,248 @@
+import { Current, document, eventCenter } from '@tarojs/runtime'
+import { EMPTY_OBJ } from '@tarojs/shared'
+
+import { setReconciler } from './connect'
+import { injectPageInstance } from './page'
+import { incrementId, isClassComponent } from './utils'
+
+import type { AppInstance } from '@tarojs/runtime'
+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(1)
+
+export function connectReactPage (
+  R: typeof React,
+  id: string,
+  getCtx: () => any
+) {
+  const ctx = getCtx?.()
+
+  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, {
+            ...Object.assign({}, ctx?.props, this.props),
+            ...refs
+          }))
+
+        return h(
+          'taro-page',
+          { 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 = config?.appId || 'app'
+
+    if (ReactMeta.Container === EMPTY_OBJ) {
+      const Container = document.getElementById(appId)!
+
+      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, 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)
+      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, getCtx: () => any, cb: () => void) {
+      if (appWrapper) {
+        appWrapper.mount(component, id, getCtx, cb)
+      } else {
+        appWrapperPromise.then(appWrapper => appWrapper.mount(component, id, getCtx, 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(Current?.app || this, key, {
+                configurable: true,
+                enumerable: true,
+                get () {
+                  return globalData[key]
+                },
+                set (value) {
+                  globalData[key] = value
+                }
+              })
+            })
+            Object.defineProperties(Current?.app || 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?.()
+      })
+    }
+  } as unknown as AppInstance
+
+  if (Current.app) {
+    Current.app = Object.assign(app, Current.app)
+  } else {
+    Current.app = app
+  }
+
+  return app
+}

package/dist/runtime/framework/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/constant.ts

@@ -0,0 +1,3 @@
+export { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW } from '@tarojs/runtime'
+
+export const ON_UNLOAD = 'onUnload'

package/dist/runtime/framework/hooks.ts

@@ -0,0 +1,99 @@
+import { Current, HOOKS_APP_ID } from '@tarojs/runtime'
+import { isArray, isFunction } from '@tarojs/shared'
+
+import { ReactMeta } from './app'
+import { getPageInstance, injectPageInstance } from './page'
+
+import type {
+  AppInstance,
+  Instance,
+  PageLifeCycle,
+  PageProps,
+  TFunc
+} from '@tarojs/runtime'
+
+const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
+  return (fn: TFunc) => {
+    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/index.ts

@@ -0,0 +1,15 @@
+import { hooks } from '@tarojs/shared'
+
+import * as taroHooks from './hooks'
+
+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 './native-page'
+export * from './page'