@tarojs/react 4.0.0-beta.9 → 4.0.0-beta.91

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import Reconciler from "react-reconciler";
+import { OpaqueRoot } from "react-reconciler";
+import { TaroElement, TaroText } from "@tarojs/runtime";
+import { ReactNode } from "react";
+declare const internalInstanceKey: string;
+declare const TaroReconciler: Reconciler.Reconciler<TaroElement, TaroElement, TaroText, TaroElement, TaroElement>;
+type Renderer = typeof TaroReconciler;
+type CreateRootOptions = {
+    unstable_strictMode?: boolean;
+    unstable_concurrentUpdatesByDefault?: boolean;
+    unstable_transitionCallbacks?: any;
+    identifierPrefix?: string;
+    onRecoverableError?: (error: any) => void;
+};
+type Callback = () => void | null | undefined;
+declare class Root {
+    private renderer;
+    internalRoot: OpaqueRoot;
+    constructor(renderer: Renderer, domContainer: TaroElement, options?: CreateRootOptions);
+    private initInternalRoot;
+    render(children: ReactNode, cb: Callback): TaroElement | import("react").Component<any, any, any> | null;
+    unmount(cb: Callback): void;
+}
+declare function render(element: ReactNode, domContainer: TaroElement, cb: Callback): TaroElement | import("react").Component<any, any, any> | null;
+declare function createRoot(domContainer: TaroElement, options?: CreateRootOptions): Root;
+declare const unstable_batchedUpdates: (fn: any, a: any) => any;
+declare function unmountComponentAtNode(dom: TaroElement): boolean;
+declare function findDOMNode(comp?: TaroElement | ReactNode): string | number | boolean | TaroElement | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | null;
+declare function createPortal(children: ReactNode, containerInfo: TaroElement, key?: string): {
+    $$typeof: number | symbol;
+    key: string | null;
+    children: ReactNode;
+    containerInfo: TaroElement;
+    implementation: null;
+};
+declare const _default: {
+    render: typeof render;
+    createRoot: typeof createRoot;
+    unstable_batchedUpdates: (fn: any, a: any) => any;
+    unmountComponentAtNode: typeof unmountComponentAtNode;
+    findDOMNode: typeof findDOMNode;
+    createPortal: typeof createPortal;
+    internalInstanceKey: string;
+};
+export { _default as default, createPortal, createRoot, findDOMNode, internalInstanceKey, render, unmountComponentAtNode, unstable_batchedUpdates };

package/dist/index.js

@@ -142,6 +142,10 @@ function getFiberCurrentPropsFromNode(node) {
 }
 function updateFiberProps(node, props) {
     node[internalPropsKey] = props;
+    if (process.env.TARO_PLATFORM === 'harmony') {
+        // @ts-ignore
+        node.updateTextNode();
+    }
 }
 
 // 从 props 中，更新 input 组件的 value 值
@@ -183,10 +187,10 @@ function setNodeValue(node, oldValue, value, type) {
 
     if (value != null) {
         if (type === 'number') {
-            if ((value === 0 && node.value === '') ||
+            if ((value === 0 && node.value === '')
                 // We explicitly want to coerce to number here if possible.
                 // eslint-disable-next-line
-                oldValue != value) {
+                || oldValue != value) {
                 node.value = toString(value);
             }
         }
@@ -297,17 +301,30 @@ function isEventName(s) {
     return s[0] === 'o' && s[1] === 'n';
 }
 function isEqual(obj1, obj2) {
-    return JSON.stringify(obj1) === JSON.stringify(obj2);
-}
-function updateDOMInstance(dom, name) {
-    if (!isHarmony)
-        { return; }
-    var isFormElement = dom instanceof runtime.FormElement;
-    var isNotNeedUpdateDOM = isFormElement && name && !['value', 'name', 'checked'].includes(name);
-    if (isNotNeedUpdateDOM)
-        { return; }
-    // @ts-ignore
-    dom.updateComponent && dom.updateComponent();
+    // 首先检查引用是否相同
+    if (obj1 === obj2) {
+        return true;
+    }
+    // 如果两者中有一个不是对象，或者为 null，直接返回 false
+    if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+        return false;
+    }
+    // 获取两个对象键的数组
+    var keys1 = Object.keys(obj1);
+    var keys2 = Object.keys(obj2);
+    // 如果键的数量不相同，对象显然不相等
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    // 遍历对象的每个键，比较两个对象同一键的值
+    for (var i = 0; i < keys1.length; i++) {
+        var key = keys1[i];
+        if (obj1[key] !== obj2[key]) {
+            return false;
+        }
+    }
+    // 如果所有键的值都相等，返回 true
+    return true;
 }
 function updateProps(dom, oldProps, newProps) {
     var updatePayload = getUpdatePayload(dom, oldProps, newProps);
@@ -316,11 +333,31 @@ function updateProps(dom, oldProps, newProps) {
     }
 }
 function updatePropsByPayload(dom, oldProps, updatePayload) {
-    for (var i = 0; i < updatePayload.length; i += 2) { // key, value 成对出现
+    var handlers = [];
+    var loop = function ( i ) {
+        // key, value 成对出现
         var key = updatePayload[i];
         var newProp = updatePayload[i + 1];
         var oldProp = oldProps[key];
-        setProperty(dom, key, newProp, oldProp);
+        if (isHarmony) {
+            // 鸿蒙样式前置插入，防止覆盖style
+            if (key === '__hmStyle') {
+                handlers.splice(0, 0, function () { return setHarmonyStyle(dom, newProp, oldProp); });
+            }
+            else {
+                handlers.push(function () { return setProperty(dom, key, newProp, oldProp); });
+            }
+        }
+        else {
+            setProperty(dom, key, newProp, oldProp);
+        }
+    };
+
+    for (var i = 0; i < updatePayload.length; i += 2) loop( i );
+    if (isHarmony) {
+        for (var i$1 = 0; i$1 < handlers.length; i$1++) {
+            handlers[i$1]();
+        }
     }
 }
 function getUpdatePayload(dom, oldProps, newProps) {
@@ -334,6 +371,9 @@ function getUpdatePayload(dom, oldProps, newProps) {
     var isFormElement = dom instanceof runtime.FormElement;
     for (i in newProps) {
         if (oldProps[i] !== newProps[i] || (isFormElement && i === 'value')) {
+            // 如果都是 style，且 style 里面的值相等，则无需记录到 payload 中
+            if (i === 'style' && shared.isObject(oldProps[i]) && shared.isObject(newProps[i]) && isEqual(oldProps[i], newProps[i]))
+                { continue; }
             (updatePayload = updatePayload || []).push(i, newProps[i]);
         }
     }
@@ -368,29 +408,85 @@ function setEvent(dom, name, value, oldValue) {
     }
 }
 function setStyle(style, key, value) {
-    if (key[0] === '-') {
-        // 适配鸿蒙
-        if (isHarmony) {
-            style.setProperty(key, value);
-        }
-        else {
-            style.setProperty(key, value.toString());
-        }
+    if (key[0] === '-' && !isHarmony) {
         // css variables need not further judgment
+        style.setProperty(key, value.toString());
         return;
     }
-    if (isHarmony && key.startsWith('_')) {
-        // harmony样式已处理
-        style[key] = value == null ? '' : value;
+    style[key] =
+        shared.isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
+            ? (isHarmony ? value + 'px' : runtime.convertNumber2PX(value))
+            : value === null
+                ? ''
+                : value;
+}
+// 鸿蒙样式特殊处理，需要在插入顺序中前置插入，防止覆盖了style
+function setHarmonyStyle(dom, value, oldValue) {
+    // @ts-ignore
+    var style = dom._st.hmStyle; // __hmStyle是已经被处理过的鸿蒙样式，可以直接塞进hmStyle对象内
+    if (shared.isObject(oldValue)) {
+        for (var i in oldValue) {
+            if (!(value && i in value)) {
+                // 鸿蒙伪类特殊处理
+                if (isHarmony) {
+                    if (i === '::after' || i === '::before') {
+                        setPseudo(dom, i, null);
+                    }
+                    else if (['::first-child', '::last-child', '::empty'].includes(i) || ("" + i).indexOf('::nth-child') === 0) {
+                        // @ts-ignore
+                        dom.set_pseudo_class(i, null);
+                    }
+                    else {
+                        if (i === 'position' && oldValue[i] === 'fixed') {
+                            // @ts-ignore
+                            dom.setLayer(0);
+                        }
+                        else if (i === 'animationName') {
+                            // @ts-ignore
+                            dom.setAnimation(false);
+                        }
+                        style[i] = '';
+                    }
+                }
+                else {
+                    style[i] = '';
+                }
+            }
+        }
     }
-    else {
-        style[key] =
-            shared.isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
-                ? runtime.convertNumber2PX(value)
-                : value == null
-                    ? ''
-                    : value;
+    if (shared.isObject(value)) {
+        for (var i$1 in value) {
+            if (!oldValue || !isEqual(value[i$1], oldValue[i$1])) {
+                // 鸿蒙伪类特殊处理
+                if (isHarmony) {
+                    if (i$1 === '::after' || i$1 === '::before') {
+                        setPseudo(dom, i$1, value[i$1]);
+                    }
+                    else if (['::first-child', '::last-child', '::empty'].includes(i$1) || i$1.startsWith('::nth-child')) {
+                        // @ts-ignore
+                        dom.set_pseudo_class(i$1, value[i$1]);
+                    }
+                    else {
+                        if (i$1 === 'position') {
+                            if (value[i$1] === 'fixed' || (value[i$1] !== 'fixed' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue[i$1]))) {
+                                // @ts-ignore
+                                dom.setLayer(value[i$1] === 'fixed' ? 1 : 0);
+                            }
+                        }
+                        else if (i$1 === 'animationName') {
+                            // @ts-ignore
+                            dom.setAnimation(true);
+                        }
+                        style[i$1] = value[i$1];
+                    }
+                }
+                else {
+                    style[i$1] = value[i$1];
+                }
+            }
+        }
     }
+    dom.setAttribute('__hmStyle', value);
 }
 function setProperty(dom, name, value, oldValue) {
     var _a, _b;
@@ -408,25 +504,29 @@ function setProperty(dom, name, value, oldValue) {
                 style.cssText = '';
                 oldValue = null;
             }
-            var needUpdateAfterMoved = false;
             if (shared.isObject(oldValue)) {
                 for (var i in oldValue) {
                     if (!(value && i in value)) {
-                        setStyle(style, i, '');
-                        if (shared.isObject(value) && !value[i]) {
-                            needUpdateAfterMoved = true;
+                        // Harmony特殊处理
+                        if (isHarmony && i === 'position' && oldValue[i] === 'fixed') {
+                            // @ts-ignore
+                            dom.setLayer(0);
                         }
+                        setStyle(style, i, '');
                     }
                 }
-                if (needUpdateAfterMoved) {
-                    updateDOMInstance(dom);
-                }
             }
             if (shared.isObject(value)) {
                 for (var i$1 in value) {
                     if (!oldValue || !isEqual(value[i$1], oldValue[i$1])) {
+                        // Harmony特殊处理
+                        if (isHarmony && i$1 === 'position') {
+                            if (value[i$1] === 'fixed' || (value[i$1] !== 'fixed' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue[i$1]))) {
+                                // @ts-ignore
+                                dom.setLayer(value[i$1] === 'fixed' ? 1 : 0);
+                            }
+                        }
                         setStyle(style, i$1, value[i$1]);
-                        updateDOMInstance(dom);
                     }
                 }
             }
@@ -447,14 +547,23 @@ function setProperty(dom, name, value, oldValue) {
     else if (!shared.isFunction(value)) {
         if (value == null) {
             dom.removeAttribute(name);
-            updateDOMInstance(dom, name);
         }
         else {
             dom.setAttribute(name, value);
-            updateDOMInstance(dom, name);
         }
     }
 }
+// 设置鸿蒙伪类属性(特殊设置)
+function setPseudo(dom, name, value) {
+    if (name === '::after') {
+        // @ts-ignore
+        dom.set_pseudo_after(value);
+    }
+    else if (name === '::before') {
+        // @ts-ignore
+        dom.set_pseudo_before(value);
+    }
+}
 
 /* eslint-disable @typescript-eslint/indent */
 var hostConfig = {
@@ -537,8 +646,7 @@ var hostConfig = {
     //      Microtasks
     //     (optional)
     // -------------------
-    // 鸿蒙平台不支持微任务
-    supportsMicrotasks: process.env.TARO_PLATFORM !== 'harmony',
+    supportsMicrotasks: true,
     scheduleMicrotask: shared.isUndefined(Promise)
         ? setTimeout
         : function (callback) { return Promise.resolve(null)
@@ -563,6 +671,11 @@ var hostConfig = {
     },
     commitMount: shared.noop,
     commitUpdate: function 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);
     },
@@ -841,13 +954,15 @@ var index = {
     unstable_batchedUpdates: unstable_batchedUpdates,
     unmountComponentAtNode: unmountComponentAtNode,
     findDOMNode: findDOMNode,
-    createPortal: createPortal
+    createPortal: createPortal,
+    internalInstanceKey: internalInstanceKey
 };
 
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports["default"] = index;
 exports.findDOMNode = findDOMNode;
+exports.internalInstanceKey = internalInstanceKey;
 exports.render = render;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.unstable_batchedUpdates = unstable_batchedUpdates;