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

package/dist/runtime/framework/page.ts

@@ -0,0 +1,256 @@
+import { addLeadingSlash, CONTEXT_ACTIONS, Current, document, env, eventCenter, requestAnimationFrame, window } from '@tarojs/runtime'
+import { hooks } from '@tarojs/shared'
+
+import { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, ON_UNLOAD } from './constant'
+import { incrementId, isArray, isFunction, isUndefined } from './utils'
+
+import type { PageConfig } from '@tarojs/taro'
+
+const instances = new Map<string, any>()
+const pageId = incrementId(1)
+
+export function injectPageInstance (inst: any, id: string) {
+  hooks.call('mergePageInstance', instances.get(id), inst)
+  instances.set(id, inst)
+}
+
+export function getPageInstance (id: string): any {
+  return instances.get(id)
+}
+
+export function removePageInstance (id: string) {
+  instances.delete(id)
+}
+
+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
+
+  let pageElement: any = null
+  let unmounting = false
+  let prepareMountList: (() => void)[] = []
+
+  function setCurrentRouter (page) {
+    const router = page.route || page.__route__ || page.$taroPath
+
+    Current.router = {
+      params: page.$taroParams!,
+      path: addLeadingSlash(router),
+      $taroPath: page.$taroPath,
+      onReady: getOnReadyEventKey(page.$taroPath),
+      onShow: getOnShowEventKey(page.$taroPath),
+      onHide: getOnHideEventKey(page.$taroPath),
+      getEventName (event: string) {
+        return `${page.$taroPath}.${event}`
+      },
+    }
+
+    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, null as any, () => {
+          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(this.$taroPath)))
+        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(this.$taroPath)))
+      })
+    },
+    [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(this.$taroPath))
+    },
+  }
+
+  LIFECYCLES.forEach((lifecycle) => {
+    let isDefer = false
+    lifecycle = lifecycle.replace(/^defer:/, () => {
+      isDefer = true
+      return ''
+    })
+    page[lifecycle] = function () {
+      const exec = () => {
+        eventCenter.trigger(`${this.$taroPath}.${lifecycle}`, ...arguments)
+        return 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 as any).container.getElementById(id)
+          if (element) {
+            target.dataset = element.dataset
+          }
+        }
+        eventCenter.trigger(`${this.$taroPath}.${lifecycle}`, ...arguments)
+        return safeExecute(this.$taroPath, lifecycle, ...args)
+      }
+    }
+  })
+
+  return page
+}

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

@@ -0,0 +1,17 @@
+import { isArray } from './is'
+
+export * from './is'
+export { capitalize, noop } from '@tarojs/shared'
+
+export const incrementId = (init = 0) => {
+  let n = init
+  return () => n++
+}
+
+export function ensureIsArray<T> (item: T | T[]): T[] {
+  if (isArray(item)) {
+    return item
+  } else {
+    return item ? [item] : []
+  }
+}

package/dist/runtime/framework/utils/is.ts

@@ -0,0 +1,26 @@
+import { isFunction } from '@tarojs/shared'
+
+export function isClassComponent (R, component) {
+  const prototype = component.prototype
+
+  // For React Redux
+  if (component.displayName?.includes('Connect')) return false
+
+  return (
+    isFunction(component.render) ||
+    !!prototype?.isReactComponent ||
+    prototype instanceof R.Component // compat for some others react-like library
+  )
+}
+
+export {
+  isArray,
+  isBoolean,
+  isBooleanStringLiteral,
+  isFunction,
+  isNull,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined,
+} from '@tarojs/shared'

package/dist/runtime/framework-reconciler/componentTree.ts

@@ -0,0 +1,81 @@
+/**
+ * 给 TaroElement 绑定 react fiber、react props 等属性
+ * 提供 fiber -> element、element -> fiber、element -> props 的方法
+*/
+import { internalContainerInstanceKey, internalEventHandlerListenersKey, internalEventHandlersKey, internalEventHandlesSetKey, internalInstanceKey, internalPropsKey } from './constant'
+import { HostComponent, HostRoot, HostText, SuspenseComponent } from './workTags'
+
+import type { TaroElement, TaroText } from '@tarojs/runtime'
+import type { Fiber } from 'react-reconciler'
+import type { Props } from './props'
+
+export function precacheFiberNode (hostInst: Fiber, node: TaroElement | TaroText): void {
+  node[internalInstanceKey] = hostInst
+}
+
+export function markContainerAsRoot (hostRoot: Fiber, node: TaroElement | TaroText): void {
+  node[internalContainerInstanceKey] = hostRoot
+}
+
+export function unmarkContainerAsRoot (node: TaroElement | TaroText): void {
+  node[internalContainerInstanceKey] = null
+}
+
+export function isContainerMarkedAsRoot (node: TaroElement | TaroText): boolean {
+  return !!node[internalContainerInstanceKey]
+}
+
+/**
+ * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
+ * instance, or null if the node was not rendered by this React.
+ */
+export function getInstanceFromNode (node: TaroElement | TaroText): Fiber | null {
+  const inst = node[internalInstanceKey] || node[internalContainerInstanceKey]
+
+  if (inst) {
+    if (
+      inst.tag === HostComponent ||
+      inst.tag === HostText ||
+      inst.tag === SuspenseComponent ||
+      inst.tag === HostRoot
+    ) {
+      return inst
+    } else {
+      return null
+    }
+  }
+  return null
+}
+
+/**
+ * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding
+ * DOM node.
+ */
+export function getNodeFromInstance (inst: Fiber) {
+  if (inst.tag === HostComponent || inst.tag === HostText) {
+    // In Fiber this, is just the state node right now. We assume it will be
+    // a host component or host text.
+    return inst.stateNode
+  }
+}
+
+export function getFiberCurrentPropsFromNode (node: TaroElement | TaroText): Props {
+  return node[internalPropsKey] || null
+}
+
+export function updateFiberProps (
+  node: TaroElement | TaroText,
+  props: Props,
+): void {
+  node[internalPropsKey] = props
+}
+
+export function detachDeletedInstance (node: TaroElement | TaroText) {
+  (node as any).dispose?.()
+
+  delete node[internalInstanceKey]
+  delete node[internalPropsKey]
+  delete node[internalEventHandlersKey]
+  delete node[internalEventHandlerListenersKey]
+  delete node[internalEventHandlesSetKey]
+}

package/dist/runtime/framework-reconciler/constant.ts

@@ -0,0 +1,86 @@
+export const supportedInputTypes: { [key: string]: boolean } = {
+  color: true,
+  date: true,
+  datetime: true,
+  'datetime-local': true,
+  email: true,
+  month: true,
+  number: true,
+  password: true,
+  range: true,
+  search: true,
+  tel: true,
+  text: true,
+  time: true,
+  url: true,
+  week: true,
+}
+
+const SyncLane = 1
+const InputContinuousLane = 4
+const DefaultLane = 16
+const DiscreteEventPriority = SyncLane
+const ContinuousEventPriority = InputContinuousLane
+const DefaultEventPriority = DefaultLane
+
+export function getEventPriority (domEventName) {
+  switch (domEventName) {
+    case 'cancel':
+    case 'click':
+    case 'close':
+    case 'contextmenu':
+    case 'copy':
+    case 'cut':
+    case 'dragend':
+    case 'dragstart':
+    case 'drop':
+    case 'input':
+    case 'paste':
+    case 'pause':
+    case 'play':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+    case 'reset':
+    case 'resize':
+    case 'submit':
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'change':
+    case 'blur':
+    case 'focus':
+    case 'select':
+    case 'selectstart':
+      return DiscreteEventPriority
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'scroll':
+    case 'toggle':
+    case 'touchmove':
+    case 'pointerenter':
+    case 'pointerleave':
+      return ContinuousEventPriority
+    default:
+      return DefaultEventPriority
+  }
+}
+
+const randomKey = Math.random()
+  .toString(36)
+  .slice(2)
+
+export const internalPropsKey = '__reactProps$' + randomKey
+export const internalInstanceKey = '__reactFiber$' + randomKey
+export const internalContainerInstanceKey = '__reactContainer$' + randomKey
+export const internalEventHandlersKey = '__reactEvents$' + randomKey
+export const internalEventHandlerListenersKey = '__reactListeners$' + randomKey
+export const internalEventHandlesSetKey = '__reactHandles$' + randomKey
+export const internalRootNodeResourcesKey = '__reactResources$' + randomKey
+export const internalHoistableMarker = '__reactMarker$' + randomKey

package/dist/runtime/framework-reconciler/domInput.ts

@@ -0,0 +1,90 @@
+import { supportedInputTypes } from './constant'
+import { Props } from './props'
+
+import type { FormElement, TaroElement } from '@tarojs/runtime'
+import type { RestoreType } from './event'
+
+// 从 props 中，更新 input 组件的 value 值
+function updateInputWrapper (element: TaroElement, oldValue: RestoreType, props: Props) {
+  const node = element
+  const checked = props.checked
+
+  if (checked != null) {
+    console.warn('updateCheck 未实现', node)
+    return
+  }
+
+  updateWrapper(element, oldValue, props)
+  updateNamedCousins(element, props)
+}
+
+// react 中原本处理 type=radio 的逻辑，这里留个空，暂时不处理
+function updateNamedCousins (rootNode, props) {
+  const name = props.name
+
+  if (props.type === 'radio' && name != null) {
+    console.warn('radio updateNamedCousins 未实现', rootNode, props)
+  }
+}
+
+export function getToStringValue (value: any) {
+  const isEmptyType = typeof value === 'function' || typeof value === 'symbol'
+
+  return isEmptyType ? '' : value
+}
+
+export function toString (value): string {
+  return '' + value
+}
+
+export function updateWrapper (element: TaroElement, oldValue: RestoreType, props: Props) {
+  const node = element as FormElement
+  const value = getToStringValue(props.value)
+  const type = props.type as string
+
+  setNodeValue(node, oldValue, value, type)
+}
+
+// oldValue 为 event.detail.value，value 为 fiber.props.value
+// 如果 oldValue 和 value 不相等，代表受控组件需要更新
+// 更新的原则为，fiber.props.value 永远为用户所需要的值，因此 node.value = toString(value)
+export function setNodeValue (node, oldValue: RestoreType, value, type = 'string') {
+  if (value != null) {
+    if (type === 'number') {
+      if (
+        (value === 0 && node.value === '')
+        // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        || oldValue != value
+      ) {
+        node.value = toString(value)
+      }
+    } else if (oldValue !== toString(value)) {
+      node.value = toString(value)
+    }
+  } else if (type === 'submit' || type === 'reset') {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute('value')
+  }
+}
+
+// 判断当前 TaroElement 是否为 supportedInputTypes input 或 textarea
+export function isTextInputElement (elem: TaroElement): boolean {
+  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase()
+
+  if (nodeName === 'input') {
+    const type = (elem as FormElement).type
+
+    return !type || !!supportedInputTypes[type]
+  }
+
+  if (nodeName === 'textarea') {
+    return true
+  }
+
+  return false
+}
+
+export const ReactDOMTextareaRestoreControlledState = updateWrapper
+export const ReactDOMInputRestoreControlledState = updateInputWrapper

package/dist/runtime/framework-reconciler/event.ts

@@ -0,0 +1,108 @@
+import { getFiberCurrentPropsFromNode, getInstanceFromNode, getNodeFromInstance } from './componentTree'
+import { isTextInputElement, ReactDOMInputRestoreControlledState, ReactDOMTextareaRestoreControlledState, toString } from './domInput'
+import { updateValueIfChanged } from './inputValueTracking'
+import { TaroReconciler } from './reconciler'
+
+import type { TaroElement, TaroEvent } from '@tarojs/runtime'
+import type { Fiber } from 'react-reconciler'
+import type { Props } from './props'
+
+export type RestoreType = string | number | boolean | any[]
+
+interface RestoreItem {
+  target: TaroElement
+  value: RestoreType
+}
+
+let restoreQueue: RestoreItem[] | null = null
+
+// 对比 TaroElement tracker 下的 value 和事件下的 value，判断 element 的值是否存在更改
+export function getTargetInstForInputOrChangeEvent (e: TaroEvent, node: TaroElement) {
+  const targetInst = getInstanceFromNode(node)
+  const domEventName = e.type
+
+  if (!targetInst || !isTextInputElement(node)) return
+
+  if (domEventName === 'input' || domEventName === 'change') {
+    const nextValue = toString(e.mpEvent?.detail?.value)
+
+    return getInstIfValueChanged(targetInst, nextValue)
+  }
+}
+
+function getInstIfValueChanged (targetInst: Fiber, nextValue: string) {
+  const targetNode = getNodeFromInstance(targetInst)
+
+  if (!targetNode) return false
+
+  if (updateValueIfChanged(targetNode, nextValue)) {
+    return targetInst
+  }
+}
+
+// 把 target 塞入更新队列中
+export function enqueueStateRestore (target: RestoreItem): void {
+  if (restoreQueue) {
+    restoreQueue.push(target)
+  } else {
+    restoreQueue = [target]
+  }
+}
+
+// 判断是否需要恢复 target（input、textarea） 的状态
+export function needsStateRestore (): boolean {
+  return restoreQueue !== null
+}
+
+export function finishEventHandler () {
+  const controlledComponentsHavePendingUpdates = needsStateRestore()
+
+  if (controlledComponentsHavePendingUpdates) {
+    TaroReconciler.flushSync()
+    restoreStateIfNeeded()
+  }
+}
+
+// 遍历 restoreQueue、restoreTarget，恢复其状态
+export function restoreStateIfNeeded () {
+  if (!restoreQueue) {
+    return
+  }
+
+  const queuedTargets = restoreQueue
+  restoreQueue = null
+
+  for (let i = 0; i < queuedTargets.length; i++) {
+    restoreStateOfTarget(queuedTargets[i])
+  }
+}
+
+function restoreImpl (
+  domElement: TaroElement,
+  tag: string,
+  oldValue: string | number | boolean | any[],
+  props: Props,
+): void {
+  switch (tag) {
+    case 'input':
+      ReactDOMInputRestoreControlledState(domElement, oldValue, props)
+      break
+    case 'textarea':
+      ReactDOMTextareaRestoreControlledState(domElement, oldValue, props)
+      break
+  }
+}
+
+function restoreStateOfTarget (item: RestoreItem) {
+  const internalInstance = getInstanceFromNode(item.target)
+
+  if (!internalInstance) return
+
+  const { stateNode, type } = internalInstance
+
+  if (stateNode) {
+    const props = getFiberCurrentPropsFromNode(stateNode)
+
+    restoreImpl(stateNode, type, item.value, props)
+  }
+}