@tarojs/react 3.7.0-alpha.2 → 3.7.0-alpha.20

package/dist/react.esm.js

@@ -1,12 +1,289 @@
 import { isString, isObject, isFunction, capitalize, toCamelCase, internalComponents, isNumber, noop, isUndefined, isBoolean, ensure } from '@tarojs/shared';
-import { FormElement, document } from '@tarojs/runtime';
+import { FormElement, document, hooks } from '@tarojs/runtime';
 import Reconciler from 'react-reconciler';
-import { DefaultEventPriority } from 'react-reconciler/constants';
+import { DefaultEventPriority as DefaultEventPriority$1 } from 'react-reconciler/constants';
+
+const supportedInputTypes = {
+    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;
+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);
+const internalPropsKey = '__reactProps$' + randomKey;
+const internalInstanceKey = '__reactFiber$' + randomKey;
+const internalContainerInstanceKey = '__reactContainer$' + randomKey;
+// const internalEventHandlersKey = '__reactEvents$' + randomKey
+// const internalEventHandlerListenersKey = '__reactListeners$' + randomKey
+// const internalEventHandlesSetKey = '__reactHandles$' + randomKey
+
+const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
+const HostComponent = 5;
+const HostText = 6;
+const SuspenseComponent = 13;
+
+/**
+ * 给 TaroElement 绑定 react fiber、react props 等属性
+ * 提供 fiber -> element、element -> fiber、element -> props 的方法
+*/
+function precacheFiberNode(hostInst, node) {
+    node[internalInstanceKey] = hostInst;
+}
+function markContainerAsRoot(hostRoot, node) {
+    node[internalContainerInstanceKey] = hostRoot;
+}
+/**
+ * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
+ * instance, or null if the node was not rendered by this React.
+ */
+function getInstanceFromNode(node) {
+    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.
+ */
+function getNodeFromInstance(inst) {
+    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;
+    }
+}
+function getFiberCurrentPropsFromNode(node) {
+    return node[internalPropsKey] || null;
+}
+function updateFiberProps(node, props) {
+    node[internalPropsKey] = props;
+}
+
+// 从 props 中，更新 input 组件的 value 值
+function updateInputWrapper(element, oldValue, 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);
+    }
+}
+function getToStringValue(value) {
+    const isEmptyType = typeof value === 'function' || typeof value === 'symbol';
+    return isEmptyType ? '' : value;
+}
+function toString(value) {
+    return '' + value;
+}
+function updateWrapper(element, oldValue, props) {
+    const node = element;
+    const value = getToStringValue(props.value);
+    const type = props.type;
+    setNodeValue(node, oldValue, value, type);
+}
+// oldValue 为 event.detail.value，value 为 fiber.props.value
+// 如果 oldValue 和 value 不相等，代表受控组件需要更新
+// 更新的原则为，fiber.props.value 永远为用户所需要的值，因此 node.value = toString(value)
+function setNodeValue(node, oldValue, 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
+function isTextInputElement(elem) {
+    const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+    if (nodeName === 'input') {
+        const type = elem.type;
+        return !type || !!supportedInputTypes[type];
+    }
+    if (nodeName === 'textarea') {
+        return true;
+    }
+    return false;
+}
+const ReactDOMTextareaRestoreControlledState = updateWrapper;
+const ReactDOMInputRestoreControlledState = updateInputWrapper;
+
+function isCheckable(elem) {
+    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) {
+    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;
+}
+function track(node) {
+    if (getTracker(node)) {
+        return;
+    }
+    node._valueTracker = trackValueOnNode(node);
+}
+function updateValueIfChanged(node, nextValue) {
+    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;
+}
 
 function isEventName(s) {
     return s[0] === 'o' && s[1] === 'n';
 }
-const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+const IS_NON_DIMENSIONAL = /aspect|acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
 function updateProps(dom, oldProps, newProps) {
     const updatePayload = getUpdatePayload(dom, oldProps, newProps);
     if (updatePayload) {
@@ -151,14 +428,20 @@ const hostConfig = {
         return null;
     },
     resetAfterCommit: noop,
-    createInstance(type) {
-        return document.createElement(type);
+    createInstance(type, props, _rootContainerInstance, _hostContext, internalInstanceHandle) {
+        const element = document.createElement(type);
+        precacheFiberNode(internalInstanceHandle, element);
+        updateFiberProps(element, props);
+        return element;
     },
     appendInitialChild(parent, child) {
         parent.appendChild(child);
     },
-    finalizeInitialChildren(dom, _, props) {
+    finalizeInitialChildren(dom, type, props) {
         updateProps(dom, {}, props); // 提前执行更新属性操作，Taro 在 Page 初始化后会立即从 dom 读取必要信息
+        if (type === 'input' || type === 'textarea') {
+            track(dom);
+        }
         return false;
     },
     prepareUpdate(instance, _, oldProps, newProps) {
@@ -167,8 +450,10 @@ const hostConfig = {
     shouldSetTextContent() {
         return false;
     },
-    createTextInstance(text) {
-        return document.createTextNode(text);
+    createTextInstance(text, _rootContainerInstance, _hostContext, internalInstanceHandle) {
+        const textNode = document.createTextNode(text);
+        precacheFiberNode(internalInstanceHandle, textNode);
+        return textNode;
     },
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
@@ -185,7 +470,7 @@ const hostConfig = {
     prepareScopeUpdate: noop,
     getInstanceFromScope: () => null,
     getCurrentEventPriority() {
-        return DefaultEventPriority;
+        return DefaultEventPriority$1;
     },
     detachDeletedInstance: noop,
     // -------------------
@@ -216,8 +501,9 @@ const hostConfig = {
         textInst.nodeValue = newText;
     },
     commitMount: noop,
-    commitUpdate(dom, updatePayload, _, oldProps) {
+    commitUpdate(dom, updatePayload, _, oldProps, newProps) {
         updatePropsByPayload(dom, oldProps, updatePayload);
+        updateFiberProps(dom, newProps);
     },
     insertBefore(parent, child, refChild) {
         parent.insertBefore(child, refChild);
@@ -253,14 +539,14 @@ const hostConfig = {
         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',
+        rendererPackageName: 'taro-react'
     });
     if (!foundDevTools) {
         // eslint-disable-next-line no-console
@@ -270,6 +556,79 @@ if (process.env.NODE_ENV !== 'production') {
     }
 }
 
+let restoreQueue = null;
+// 对比 TaroElement tracker 下的 value 和事件下的 value，判断 element 的值是否存在更改
+function getTargetInstForInputOrChangeEvent(e, node) {
+    var _a, _b;
+    const targetInst = getInstanceFromNode(node);
+    const domEventName = e.type;
+    if (!targetInst || !isTextInputElement(node))
+        return;
+    if (domEventName === 'input' || domEventName === 'change') {
+        const nextValue = toString((_b = (_a = e.mpEvent) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.value);
+        return getInstIfValueChanged(targetInst, nextValue);
+    }
+}
+function getInstIfValueChanged(targetInst, nextValue) {
+    const targetNode = getNodeFromInstance(targetInst);
+    if (!targetNode)
+        return false;
+    if (updateValueIfChanged(targetNode, nextValue)) {
+        return targetInst;
+    }
+}
+// 把 target 塞入更新队列中
+function enqueueStateRestore(target) {
+    if (restoreQueue) {
+        restoreQueue.push(target);
+    }
+    else {
+        restoreQueue = [target];
+    }
+}
+// 判断是否需要恢复 target（input、textarea） 的状态
+function needsStateRestore() {
+    return restoreQueue !== null;
+}
+function finishEventHandler() {
+    const controlledComponentsHavePendingUpdates = needsStateRestore();
+    if (controlledComponentsHavePendingUpdates) {
+        TaroReconciler.flushSync();
+        restoreStateIfNeeded();
+    }
+}
+// 遍历 restoreQueue、restoreTarget，恢复其状态
+function restoreStateIfNeeded() {
+    if (!restoreQueue) {
+        return;
+    }
+    const queuedTargets = restoreQueue;
+    restoreQueue = null;
+    for (let i = 0; i < queuedTargets.length; i++) {
+        restoreStateOfTarget(queuedTargets[i]);
+    }
+}
+function restoreImpl(domElement, tag, oldValue, props) {
+    switch (tag) {
+        case 'input':
+            ReactDOMInputRestoreControlledState(domElement, oldValue, props);
+            break;
+        case 'textarea':
+            ReactDOMTextareaRestoreControlledState(domElement, oldValue, props);
+            break;
+    }
+}
+function restoreStateOfTarget(item) {
+    const internalInstance = getInstanceFromNode(item.target);
+    if (!internalInstance)
+        return;
+    const { stateNode, type } = internalInstance;
+    if (stateNode) {
+        const props = getFiberCurrentPropsFromNode(stateNode);
+        restoreImpl(stateNode, type, item.value, props);
+    }
+}
+
 const ContainerMap = new WeakMap();
 class Root {
     constructor(renderer, domContainer, options) {
@@ -332,6 +691,7 @@ function render(element, domContainer, cb) {
     return root.render(element, cb);
 }
 function createRoot(domContainer, options = {}) {
+    var _a;
     const oldRoot = ContainerMap.get(domContainer);
     if (oldRoot != null) {
         return oldRoot;
@@ -339,10 +699,43 @@ function createRoot(domContainer, options = {}) {
     // options should be an object
     const root = new Root(TaroReconciler, domContainer, options);
     ContainerMap.set(domContainer, root);
+    markContainerAsRoot((_a = root === null || root === void 0 ? void 0 : root.internalRoot) === null || _a === void 0 ? void 0 : _a.current, domContainer);
+    hooks.tap('dispatchTaroEvent', (e, node) => {
+        const eventPriority = getEventPriority(e.type);
+        TaroReconciler.runWithPriority(eventPriority, () => {
+            node.dispatchEvent(e);
+        });
+    });
+    // 对比 event.detail.value 和 node.tracker.value，判断 value 值是否有变动，存在变动则塞入队列中
+    hooks.tap('modifyTaroEvent', (e, node) => {
+        var _a, _b;
+        const inst = getTargetInstForInputOrChangeEvent(e, node);
+        if (!inst)
+            return;
+        // 这里塞入的是 event.detail.value，也就是事件的值，在受控组件中，你可以理解为需要被变更的值
+        // 后续会在 finishEventHandler 中，使用最新的 fiber.props.value 来与其比较
+        // 如果不一致，则表示需要更新，会执行 node.value = fiber.props.value 的更新操作
+        const nextValue = (_b = (_a = e.mpEvent) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.value;
+        enqueueStateRestore({ target: node, value: nextValue });
+    });
     return root;
 }
 
-const unstable_batchedUpdates = TaroReconciler.batchedUpdates;
+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) {
     ensure(dom && [1, 8, 9, 11].includes(dom.nodeType), 'unmountComponentAtNode(...): Target container is not a DOM element.');
     const root = ContainerMap.get(dom);