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

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

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ensure, isFunction } from '@tarojs/shared'
+
+import { internalInstanceKey } from './constant'
+import { finishEventHandler } from './event'
+import { TaroReconciler } from './reconciler'
+import { ContainerMap, createRoot, render } from './render'
+
+import type { TaroElement } from '@tarojs/runtime'
+import type { ReactNode } from 'react'
+
+let isInsideEventHandler = false
+
+// 重新包裹 batchedUpdates，使其可以在触发事件后执行 finishEventHandler
+const unstable_batchedUpdates = (fn, a) => {
+  if (isInsideEventHandler) {
+    return fn(a)
+  }
+
+  isInsideEventHandler = true
+
+  try {
+    return TaroReconciler.batchedUpdates(fn, a)
+  } finally {
+    isInsideEventHandler = false
+    finishEventHandler()
+  }
+}
+
+function unmountComponentAtNode (dom: TaroElement) {
+  ensure(dom && [1, 8, 9, 11].includes(dom.nodeType), 'unmountComponentAtNode(...): Target container is not a DOM element.')
+
+  const root = ContainerMap.get(dom)
+
+  if (!root) return false
+
+  unstable_batchedUpdates(() => {
+    root.unmount(() => {
+      ContainerMap.delete(dom)
+    })
+  }, null)
+
+  return true
+}
+
+function findDOMNode (comp?: TaroElement | ReactNode) {
+  if (comp == null) {
+    return null
+  }
+
+  const nodeType = (comp as TaroElement).nodeType
+  if (nodeType === 1 || nodeType === 3) {
+    return comp
+  }
+
+  return TaroReconciler.findHostInstance(comp as Record<string, any>)
+}
+
+const portalType = isFunction(Symbol) && Symbol.for
+  ? Symbol.for('react.portal')
+  : 0xeaca
+
+function createPortal (
+  children: ReactNode,
+  containerInfo: TaroElement,
+  key?: string
+) {
+  return {
+    $$typeof: portalType,
+    key: key == null ? null : String(key),
+    children,
+    containerInfo,
+    implementation: null
+  }
+}
+
+const flushSync = TaroReconciler.flushSync
+
+export {
+  createPortal,
+  createRoot,
+  findDOMNode,
+  flushSync,
+  internalInstanceKey,
+  render,
+  unmountComponentAtNode,
+  unstable_batchedUpdates,
+}
+
+export default {
+  render,
+  flushSync,
+  createRoot,
+  unstable_batchedUpdates,
+  unmountComponentAtNode,
+  findDOMNode,
+  createPortal,
+  internalInstanceKey
+}

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

@@ -0,0 +1,106 @@
+import type { FormElement } from '@tarojs/runtime'
+
+function isCheckable (elem: FormElement) {
+  const type = elem.type
+  const nodeName = elem.nodeName
+
+  return (
+    nodeName &&
+    nodeName.toLowerCase() === 'input' &&
+    (type === 'checkbox' || type === 'radio')
+  )
+}
+
+function getTracker (node) {
+  return node._valueTracker
+}
+
+function detachTracker (node) {
+  node._valueTracker = null
+}
+
+// 之所以单独创建一个 tacker，是为了统一监听不同 type 的 input 值
+// 比如 type=checkbox 或者 type=radio，就需要监听 checked，而不是 value
+// 虽然目前还未实现 checkbox 和 radio 的 finishEventHandle，但后续不好说，所以先统一和 react 一样的写法
+// 需要特别注意的是，tracker 初始化时的值为 node 的初始值，但后续会变更为事件的 detail.value 值
+function trackValueOnNode (node: any) {
+  const valueField = isCheckable(node) ? 'checked' : 'value'
+  const descriptor = Object.getOwnPropertyDescriptor(
+    node.constructor.prototype,
+    valueField,
+  )
+
+  let currentValue = '' + node[valueField]
+
+  if (
+    node.hasOwnProperty(valueField) ||
+    typeof descriptor === 'undefined' ||
+    typeof descriptor.get !== 'function' ||
+    typeof descriptor.set !== 'function'
+  ) {
+    return
+  }
+
+  const { get, set } = descriptor
+
+  Object.defineProperty(node, valueField, {
+    configurable: true,
+    enumerable: descriptor.enumerable,
+    get: function () {
+      return get.call(this)
+    },
+    set: function (value) {
+      currentValue = '' + value
+      set.call(this, value)
+    },
+  })
+
+  const tracker = {
+    getValue () {
+      return currentValue
+    },
+    setValue (value) {
+      currentValue = '' + value
+    },
+    stopTracking () {
+      detachTracker(node)
+      delete node[valueField]
+    },
+  }
+  return tracker
+}
+
+export function track (node) {
+  if (getTracker(node)) {
+    return
+  }
+
+  node._valueTracker = trackValueOnNode(node)
+}
+
+export function updateValueIfChanged (node, nextValue: string) {
+  if (!node) {
+    return false
+  }
+
+  const tracker = getTracker(node)
+
+  if (!tracker) {
+    return true
+  }
+
+  const lastValue = tracker.getValue()
+
+  if (nextValue !== lastValue) {
+    tracker.setValue(nextValue)
+    return true
+  }
+  return false
+}
+
+export function stopTracking (node) {
+  const tracker = getTracker(node)
+  if (tracker) {
+    tracker.stopTracking()
+  }
+}

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

@@ -0,0 +1,132 @@
+import { FormElement, TaroNativeModule } from '@tarojs/runtime'
+import { isFunction, isObject } from '@tarojs/shared'
+
+import type { TaroElement } from '@tarojs/runtime'
+
+export type Props = Record<string, unknown>
+
+function isEventName (s: string) {
+  return s[0] === 'o' && s[1] === 'n'
+}
+
+function isEqual (obj1, obj2) {
+  // 首先检查引用是否相同
+  if (obj1 === obj2) {
+    return true
+  }
+
+  // 如果两者中有一个不是对象，或者为 null，直接返回 false
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+    return false
+  }
+
+  // 获取两个对象键的数组
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  // 如果键的数量不相同，对象显然不相等
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // 遍历对象的每个键，比较两个对象同一键的值
+  for (let i = 0; i < keys1.length; i++) {
+    const key = keys1[i]
+    if (obj1[key] !== obj2[key]) {
+      return false
+    }
+  }
+
+  // 如果所有键的值都相等，返回 true
+  return true
+}
+
+export function updateProps (dom: TaroElement, oldProps: Props, newProps: Props) {
+  const updatePayload = getUpdatePayload(dom, oldProps, newProps)
+  if (updatePayload) {
+    updatePropsByPayload(dom, oldProps, updatePayload)
+  }
+}
+
+interface DangerouslySetInnerHTML {
+  __html?: string
+}
+
+export function updatePropsByPayload (dom: TaroElement, oldProps: Props, updatePayload: any[]) {
+  if (!(dom as any).isETS) {
+    return TaroNativeModule.updatePropsByPayload(dom, oldProps, updatePayload)
+  }
+
+  for (let i = 0; i < updatePayload.length; i += 2) {
+    let name = updatePayload[i]
+
+    if (['key', 'children', 'ref'].includes(name)) {
+      // skip
+      return
+    }
+
+    const value = updatePayload[i + 1]
+    const oldValue = oldProps[name]
+
+    name = name === 'className' ? 'class' : name
+    if (isEventName(name)) {
+      setEvent(dom, name, value, oldValue)
+    } else if (name === 'dangerouslySetInnerHTML') {
+      const newHtml = (value as DangerouslySetInnerHTML)?.__html ?? ''
+      const oldHtml = (oldValue as DangerouslySetInnerHTML)?.__html ?? ''
+      if (newHtml || oldHtml) {
+        if (oldHtml !== newHtml) {
+          dom.innerHTML = newHtml
+        }
+      }
+    } else if (!isFunction(value)) {
+      if (value == null) {
+        dom.removeAttribute(name)
+      } else {
+        dom.setAttribute(name, value as string)
+      }
+    }
+  }
+}
+
+export function getUpdatePayload (dom: TaroElement, oldProps: Props, newProps: Props) {
+  let i: string
+  let updatePayload: any[] | null = null
+
+  for (i in oldProps) {
+    if (!(i in newProps)) {
+      updatePayload ||= []
+      updatePayload.push(i, null)
+    }
+  }
+  for (i in newProps) {
+    if (oldProps[i] !== newProps[i] || (dom instanceof FormElement && i === 'value')) {
+      // 如果都是 style，且 style 里面的值相等，则无需记录到 payload 中
+      if (i === 'style' && isObject(oldProps[i]) && isObject(newProps[i]) && isEqual(oldProps[i], newProps[i])) continue
+
+      updatePayload ||= []
+      updatePayload.push(i, newProps[i])
+    }
+  }
+
+  return updatePayload
+}
+
+function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: unknown) {
+  const isCapture = name.endsWith('Capture')
+  let eventName = name.toLowerCase().slice(2)
+  if (isCapture) {
+    eventName = eventName.slice(0, -7)
+  }
+
+  if (isFunction(value)) {
+    if (oldValue) {
+      dom.removeEventListener(eventName, oldValue, false)
+      dom.addEventListener(eventName, value, { isCapture, sideEffect: false })
+    } else {
+      dom.addEventListener(eventName, value, isCapture)
+    }
+  } else {
+    dom.removeEventListener(eventName, oldValue)
+  }
+}

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

@@ -0,0 +1,202 @@
+/* eslint-disable @typescript-eslint/indent */
+import { document, FormElement } from '@tarojs/runtime'
+import { isBoolean, isUndefined, noop } from '@tarojs/shared'
+import Reconciler from 'react-reconciler'
+import { DefaultEventPriority } from 'react-reconciler/constants'
+
+import { detachDeletedInstance, precacheFiberNode, updateFiberProps } from './componentTree'
+import { track } from './inputValueTracking'
+import { getUpdatePayload, Props, updateProps, updatePropsByPayload } from './props'
+
+import type { TaroElement, TaroText } from '@tarojs/runtime'
+import type { Fiber, HostConfig } from 'react-reconciler'
+
+const hostConfig: HostConfig<
+  string, // Type
+  Props, // Props
+  TaroElement, // Container
+  TaroElement, // Instance
+  TaroText, // TextInstance
+  TaroElement, // SuspenseInstance
+  TaroElement, // HydratableInstance
+  TaroElement, // PublicInstance
+  Record<string, any>, // HostContext
+  string[], // UpdatePayload
+  unknown, // ChildSet
+  unknown, // TimeoutHandle
+  unknown // NoTimeout
+> = {
+  // below keys order by {React ReactFiberHostConfig.custom.js}, convenient for comparing each other.
+
+  // -------------------
+  // required by @types/react-reconciler
+  // -------------------
+  getPublicInstance (inst: TaroElement) {
+    return inst
+  },
+  getRootHostContext () {
+    return {}
+  },
+  getChildHostContext (parentHostContext) {
+    return parentHostContext
+  },
+  prepareForCommit (..._: any[]) {
+    return null
+  },
+  resetAfterCommit: noop,
+  createInstance (type, props: Props, _rootContainerInstance: any, _hostContext: any, internalInstanceHandle: Fiber) {
+    const element = document.createElement(type)
+
+    precacheFiberNode(internalInstanceHandle, element)
+    updateFiberProps(element, props)
+
+    return element
+  },
+  appendInitialChild (parent, child) {
+    parent.appendChild(child)
+  },
+  finalizeInitialChildren (dom, type: string, props: any) {
+    let newProps = props
+    if (dom instanceof FormElement) {
+      const [defaultName, defaultKey] = ['switch', 'checkbox', 'radio'].includes(type) ? ['checked', 'defaultChecked'] : ['value', 'defaultValue']
+      if (props.hasOwnProperty(defaultKey)) {
+        newProps = { ...newProps, [defaultName]: props[defaultKey] }
+        delete newProps[defaultKey]
+      }
+    }
+
+    updateProps(dom, {}, newProps) // 提前执行更新属性操作，Taro 在 Page 初始化后会立即从 dom 读取必要信息
+
+    if (type === 'input' || type === 'textarea') {
+      track(dom)
+    }
+
+    return false
+  },
+  prepareUpdate (instance, _, oldProps, newProps) {
+    return getUpdatePayload(instance, oldProps, newProps)
+  },
+  shouldSetTextContent () {
+    return false
+  },
+  createTextInstance (text: string, _rootContainerInstance: any, _hostContext: any, internalInstanceHandle: Fiber) {
+    const textNode = document.createTextNode(text)
+
+    precacheFiberNode(internalInstanceHandle, textNode)
+
+    return textNode
+  },
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  isPrimaryRenderer: true,
+  warnsIfNotActing: true,
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur: noop,
+  afterActiveInstanceBlur: noop,
+  preparePortalMount: noop,
+  prepareScopeUpdate: noop,
+  getInstanceFromScope: () => null,
+  getCurrentEventPriority () {
+    return DefaultEventPriority
+  },
+  detachDeletedInstance,
+
+  // -------------------
+  //      Microtasks
+  //     (optional)
+  // -------------------
+  supportsMicrotasks: true,
+  scheduleMicrotask: isUndefined(Promise)
+    ? setTimeout
+    : (callback) =>
+        Promise.resolve(null)
+          .then(callback)
+          .catch(function (error) {
+            setTimeout(() => {
+              throw error
+            })
+          }),
+
+  // -------------------
+  //      Mutation
+  //     (required if supportsMutation is true)
+  // -------------------
+  appendChild (parent, child) {
+    parent.appendChild(child)
+  },
+  appendChildToContainer (parent, child) {
+    parent.appendChild(child)
+  },
+  commitTextUpdate (textInst, _, newText) {
+    textInst.nodeValue = newText
+  },
+  commitMount: noop,
+  commitUpdate (dom, updatePayload, _, oldProps, newProps) {
+    if (!updatePayload) return
+    // payload 只包含 children 的时候，不应该再继续触发后续的属性比较和更新的逻辑了
+    if (updatePayload.length === 2 && updatePayload.includes('children')) return
+
+    updatePropsByPayload(dom, oldProps, updatePayload)
+    updateFiberProps(dom, newProps)
+  },
+  insertBefore (parent, child, refChild) {
+    parent.insertBefore(child, refChild)
+  },
+  insertInContainerBefore (parent, child, refChild) {
+    parent.insertBefore(child, refChild)
+  },
+  removeChild (parent, child) {
+    parent.removeChild(child)
+  },
+  removeChildFromContainer (parent, child) {
+    parent.removeChild(child)
+  },
+  resetTextContent: noop,
+  hideInstance (instance) {
+    const style = instance.style
+    style.setProperty('display', 'none')
+  },
+  hideTextInstance (textInstance) {
+    textInstance.nodeValue = ''
+  },
+  unhideInstance (instance, props) {
+    const styleProp = props.style as { display?: any }
+    let display = styleProp?.hasOwnProperty('display') ? styleProp.display : null
+    display = display == null || isBoolean(display) || display === '' ? '' : ('' + display).trim()
+    // eslint-disable-next-line dot-notation
+    instance.style['display'] = display
+  },
+  unhideTextInstance (textInstance, text) {
+    textInstance.nodeValue = text
+  },
+  clearContainer (element) {
+    if (element.childNodes.length > 0) {
+      element.textContent = ''
+    }
+  }
+}
+
+const TaroReconciler = Reconciler(hostConfig)
+
+if (process.env.NODE_ENV !== 'production') {
+  const foundDevTools = TaroReconciler.injectIntoDevTools({
+    bundleType: 1,
+    version: '18.0.0',
+    rendererPackageName: 'taro-react'
+  })
+  if (!foundDevTools) {
+    // eslint-disable-next-line no-console
+    console.info(
+      '%cDownload the React DevTools ' +
+        'for a better development experience: ' +
+        'https://reactjs.org/link/react-devtools',
+      'font-weight:bold'
+    )
+  }
+}
+
+export { TaroReconciler }

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

@@ -0,0 +1,139 @@
+import { hooks } from '@tarojs/shared'
+
+import { markContainerAsRoot } from './componentTree'
+import { getEventPriority } from './constant'
+import { enqueueStateRestore, getTargetInstForInputOrChangeEvent, RestoreType } from './event'
+import { TaroReconciler } from './reconciler'
+
+import type { TaroElement, TaroEvent } from '@tarojs/runtime'
+import type { ReactNode } from 'react'
+import type { OpaqueRoot } from 'react-reconciler'
+
+export const ContainerMap: WeakMap<TaroElement, Root> = new WeakMap()
+
+type Renderer = typeof TaroReconciler
+
+type CreateRootOptions = {
+  unstable_strictMode?: boolean
+  unstable_concurrentUpdatesByDefault?: boolean
+  unstable_transitionCallbacks?: any
+  identifierPrefix?: string
+  onRecoverableError?: (error: any) => void
+}
+
+export type Callback = () => void | null | undefined
+
+class Root {
+  private renderer: Renderer
+  public internalRoot: OpaqueRoot
+
+  public constructor (renderer: Renderer, domContainer: TaroElement, options?: CreateRootOptions) {
+    this.renderer = renderer
+    this.initInternalRoot(renderer, domContainer, options)
+  }
+
+  private initInternalRoot (renderer: Renderer, domContainer: TaroElement, options?: CreateRootOptions) {
+    // Since react-reconciler v0.27, createContainer need more parameters
+    // @see:https://github.com/facebook/react/blob/0b974418c9a56f6c560298560265dcf4b65784bc/packages/react-reconciler/src/ReactFiberReconciler.js#L248
+    const containerInfo = domContainer
+    if (options) {
+      const tag = 1 // ConcurrentRoot
+      const concurrentUpdatesByDefaultOverride = false
+      let isStrictMode = false
+      let identifierPrefix = ''
+      let onRecoverableError = (error: any) => console.error(error)
+      let transitionCallbacks = null
+      if (options.unstable_strictMode === true) {
+        isStrictMode = true
+      }
+      if (options.identifierPrefix !== undefined) {
+        identifierPrefix = options.identifierPrefix
+      }
+      if (options.onRecoverableError !== undefined) {
+        onRecoverableError = options.onRecoverableError
+      }
+      if (options.unstable_transitionCallbacks !== undefined) {
+        transitionCallbacks = options.unstable_transitionCallbacks
+      }
+
+      this.internalRoot = renderer.createContainer(
+        containerInfo,
+        tag,
+        null, // hydrationCallbacks
+        isStrictMode,
+        concurrentUpdatesByDefaultOverride,
+        identifierPrefix,
+        onRecoverableError,
+        transitionCallbacks
+      )
+    } else {
+      const tag = 0 // LegacyRoot
+      this.internalRoot = renderer.createContainer(
+        containerInfo,
+        tag,
+        null, // hydrationCallbacks
+        false, // isStrictMode
+        false, // concurrentUpdatesByDefaultOverride,
+        '', // identifierPrefix
+        () => {}, // onRecoverableError, this isn't reachable because onRecoverableError isn't called in the legacy API.
+        null // transitionCallbacks
+      )
+    }
+  }
+
+  public render (children: ReactNode, cb: Callback) {
+    const { renderer, internalRoot } = this
+    renderer.updateContainer(children, internalRoot, null, cb)
+    return renderer.getPublicRootInstance(internalRoot)
+  }
+
+  public unmount (cb: Callback) {
+    this.renderer.updateContainer(null, this.internalRoot, null, cb)
+  }
+}
+
+export function render (element: ReactNode, domContainer: TaroElement, cb: Callback) {
+  const oldRoot = ContainerMap.get(domContainer)
+  if (oldRoot != null) {
+    return oldRoot.render(element, cb)
+  }
+
+  const root = new Root(TaroReconciler, domContainer)
+  ContainerMap.set(domContainer, root)
+  return root.render(element, cb)
+}
+
+export function createRoot (domContainer: TaroElement, options: CreateRootOptions = {}) {
+  const oldRoot = ContainerMap.get(domContainer)
+  if (oldRoot != null) {
+    return oldRoot
+  }
+  // options should be an object
+  const root = new Root(TaroReconciler, domContainer, options)
+  ContainerMap.set(domContainer, root)
+
+  markContainerAsRoot(root?.internalRoot?.current, domContainer)
+
+  hooks.tap('dispatchTaroEvent', (e: TaroEvent, node: TaroElement) => {
+    const eventPriority = getEventPriority(e.type)
+
+    TaroReconciler.runWithPriority(eventPriority, () => {
+      node.dispatchEvent(e)
+    })
+  })
+
+  // 对比 event.detail.value 和 node.tracker.value，判断 value 值是否有变动，存在变动则塞入队列中
+  hooks.tap('modifyTaroEvent', (e: TaroEvent, node: TaroElement) => {
+    const inst = getTargetInstForInputOrChangeEvent(e, node)
+
+    if (!inst) return
+
+    // 这里塞入的是 event.detail.value，也就是事件的值，在受控组件中，你可以理解为需要被变更的值
+    // 后续会在 finishEventHandler 中，使用最新的 fiber.props.value 来与其比较
+    // 如果不一致，则表示需要更新，会执行 node.value = fiber.props.value 的更新操作
+    const nextValue = e.mpEvent?.detail?.value as unknown as RestoreType
+    enqueueStateRestore({ target: node, value: nextValue })
+  })
+
+  return root
+}