@tarojs/react 4.0.0-beta.12 → 4.0.0-beta.121

package/LICENSE

@@ -154,15 +154,8 @@ See `/LICENSE` for details of the license.
 
 ==================
 
-MIT (stencil-vue2-output-target):
-The following files embed [stencil-vue2-output-target](https://github.com/diondree/stencil-vue2-output-target) MIT:
-`/packages/taro-components-library-vue2/src/vue-component-lib/utils.ts`
-See `/LICENSE` for details of the license.
-
-==================
-
 MIT (weui):
-The following files embed [stencil-vue2-output-target](https://github.com/Tencent/weui) MIT:
+The following files embed [weui](https://github.com/Tencent/weui) MIT:
 `/packages/taro-components/src/components/*.scss`
 See `/LICENSE.txt` for details of the license.
 
@@ -172,3 +165,10 @@ Apache-2.0 (intersection-observer):
 The following files embed [intersection-observer](https://github.com/GoogleChromeLabs/intersection-observer) Apache-2.0:
 `/packages/taro-api/src/polyfill/intersection-observer.ts`
 See `/LICENSE.txt` for details of the license.
+
+==================
+
+MIT (babel-plugin-jsx-dom-expressions):
+The following files embed [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions) MIT:
+`/packages/babel-plugin-transform-solid-jsx/src/*`
+See `/LICENSE` for details of the license.

package/dist/componentTree.d.ts

@@ -0,0 +1,19 @@
+import type { TaroElement, TaroText } from '@tarojs/runtime';
+import type { Fiber } from 'react-reconciler';
+import type { Props } from './props';
+export declare function precacheFiberNode(hostInst: Fiber, node: TaroElement | TaroText): void;
+export declare function markContainerAsRoot(hostRoot: Fiber, node: TaroElement | TaroText): void;
+export declare function unmarkContainerAsRoot(node: TaroElement | TaroText): void;
+export declare function isContainerMarkedAsRoot(node: TaroElement | TaroText): boolean;
+/**
+ * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
+ * instance, or null if the node was not rendered by this React.
+ */
+export declare function getInstanceFromNode(node: TaroElement | TaroText): Fiber | null;
+/**
+ * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding
+ * DOM node.
+ */
+export declare function getNodeFromInstance(inst: Fiber): any;
+export declare function getFiberCurrentPropsFromNode(node: TaroElement | TaroText): Props;
+export declare function updateFiberProps(node: TaroElement | TaroText, props: Props): void;

package/dist/constant.d.ts

@@ -0,0 +1,7 @@
+export declare const supportedInputTypes: {
+    [key: string]: boolean;
+};
+export declare function getEventPriority(domEventName: any): 1 | 4 | 16;
+export declare const internalPropsKey: string;
+export declare const internalInstanceKey: string;
+export declare const internalContainerInstanceKey: string;

package/dist/domInput.d.ts

@@ -0,0 +1,12 @@
+import { Props } from './props';
+import type { FormElement, TaroElement } from '@tarojs/runtime';
+import type { RestoreType } from './event';
+declare function updateInputWrapper(element: TaroElement, oldValue: RestoreType, props: Props): void;
+export declare function getToStringValue(value: any): any;
+export declare function toString(value: any): string;
+export declare function updateWrapper(element: TaroElement, oldValue: RestoreType, props: Props): void;
+export declare function setNodeValue(node: FormElement, oldValue: RestoreType, value: any, type?: string): void;
+export declare function isTextInputElement(elem: TaroElement): boolean;
+export declare const ReactDOMTextareaRestoreControlledState: typeof updateWrapper;
+export declare const ReactDOMInputRestoreControlledState: typeof updateInputWrapper;
+export {};

package/dist/event.d.ts

@@ -0,0 +1,13 @@
+import type { TaroElement, TaroEvent } from '@tarojs/runtime';
+import type { Fiber } from 'react-reconciler';
+export type RestoreType = string | number | boolean | any[];
+interface RestoreItem {
+    target: TaroElement;
+    value: RestoreType;
+}
+export declare function getTargetInstForInputOrChangeEvent(e: TaroEvent, node: TaroElement): false | Fiber | undefined;
+export declare function enqueueStateRestore(target: RestoreItem): void;
+export declare function needsStateRestore(): boolean;
+export declare function finishEventHandler(): void;
+export declare function restoreStateIfNeeded(): void;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import { internalInstanceKey } from './constant';
+import { createRoot, render } from './render';
+import type { TaroElement } from '@tarojs/runtime';
+import type { ReactNode } from 'react';
+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>> | Iterable<ReactNode> | null;
+declare function createPortal(children: ReactNode, containerInfo: TaroElement, key?: string): {
+    $$typeof: number | symbol;
+    key: string | null;
+    children: ReactNode;
+    containerInfo: TaroElement;
+    implementation: null;
+};
+declare const flushSync: {
+    (): void;
+    <R>(fn: () => R): R;
+};
+export { createPortal, createRoot, findDOMNode, flushSync, internalInstanceKey, render, unmountComponentAtNode, unstable_batchedUpdates, };
+declare const _default: {
+    render: typeof render;
+    flushSync: {
+        (): void;
+        <R>(fn: () => R): R;
+    };
+    createRoot: typeof createRoot;
+    unstable_batchedUpdates: (fn: any, a: any) => any;
+    unmountComponentAtNode: typeof unmountComponentAtNode;
+    findDOMNode: typeof findDOMNode;
+    createPortal: typeof createPortal;
+    internalInstanceKey: string;
+};
+export default _default;

package/dist/inputValueTracking.d.ts

@@ -0,0 +1,3 @@
+export declare function track(node: any): void;
+export declare function updateValueIfChanged(node: any, nextValue: string): boolean;
+export declare function stopTracking(node: any): void;

package/dist/props.d.ts

@@ -0,0 +1,5 @@
+import type { TaroElement } from '@tarojs/runtime';
+export type Props = Record<string, unknown>;
+export declare function updateProps(dom: TaroElement, oldProps: Props, newProps: Props): void;
+export declare function updatePropsByPayload(dom: TaroElement, oldProps: Props, updatePayload: any[]): void;
+export declare function getUpdatePayload(dom: TaroElement, oldProps: Props, newProps: Props): any[] | null;

package/dist/react.esm.js

@@ -1,4 +1,4 @@
-import { isString, isObject, isFunction, capitalize, toCamelCase, internalComponents, isNumber, noop, isUndefined, isBoolean, hooks, ensure } from '@tarojs/shared';
+import { PLATFORM_TYPE, isObject, isString, isFunction, capitalize, toCamelCase, internalComponents, isNumber, noop, isUndefined, isBoolean, hooks, ensure } from '@tarojs/shared';
 import { FormElement, convertNumber2PX, document } from '@tarojs/runtime';
 import Reconciler from 'react-reconciler';
 import { DefaultEventPriority as DefaultEventPriority$1 } from 'react-reconciler/constants';
@@ -177,10 +177,10 @@ function updateWrapper(element, oldValue, props) {
 function setNodeValue(node, oldValue, value, type = 'string') {
     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);
             }
         }
@@ -284,13 +284,35 @@ function updateValueIfChanged(node, nextValue) {
     return false;
 }
 
-const isHarmony = process.env.TARO_PLATFORM === 'harmony';
 const IS_NON_DIMENSIONAL = /max|aspect|acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
 function isEventName(s) {
     return s[0] === 'o' && s[1] === 'n';
 }
 function isEqual(obj1, obj2) {
-    return JSON.stringify(obj1) === JSON.stringify(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;
 }
 function updateProps(dom, oldProps, newProps) {
     const updatePayload = getUpdatePayload(dom, oldProps, newProps);
@@ -299,11 +321,36 @@ function updateProps(dom, oldProps, newProps) {
     }
 }
 function updatePropsByPayload(dom, oldProps, updatePayload) {
-    for (let i = 0; i < updatePayload.length; i += 2) { // key, value 成对出现
+    const handlers = [];
+    let fixedHandler = null;
+    for (let i = 0; i < updatePayload.length; i += 2) {
+        // key, value 成对出现
         const key = updatePayload[i];
         const newProp = updatePayload[i + 1];
         const oldProp = oldProps[key];
-        setProperty(dom, key, newProp, oldProp);
+        if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY) {
+            if (key === '__fixed') {
+                // hack: __fixed最先识别
+                fixedHandler = () => setProperty(dom, key, newProp, oldProp);
+                continue;
+            }
+            // 鸿蒙样式前置插入，防止覆盖style
+            if (key === '__hmStyle') {
+                handlers.splice(0, 0, () => setHarmonyStyle(dom, newProp, oldProp));
+            }
+            else {
+                handlers.push(() => setProperty(dom, key, newProp, oldProp));
+            }
+        }
+        else {
+            setProperty(dom, key, newProp, oldProp);
+        }
+    }
+    if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY) {
+        fixedHandler && fixedHandler();
+        for (let i = 0; i < handlers.length; i++) {
+            handlers[i]();
+        }
     }
 }
 function getUpdatePayload(dom, oldProps, newProps) {
@@ -317,6 +364,9 @@ function getUpdatePayload(dom, oldProps, newProps) {
     const isFormElement = dom instanceof FormElement;
     for (i in newProps) {
         if (oldProps[i] !== newProps[i] || (isFormElement && 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]);
         }
     }
@@ -334,16 +384,16 @@ function setEvent(dom, name, value, oldValue) {
         eventName = eventName.slice(0, -7);
     }
     const compName = capitalize(toCamelCase(dom.tagName.toLowerCase()));
-    if (eventName === 'click' && !isHarmony && compName in internalComponents) {
+    if (eventName === 'click' && process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY && compName in internalComponents) {
         eventName = 'tap';
     }
     if (isFunction(value)) {
         if (oldValue) {
-            dom.removeEventListener(eventName, oldValue, !isHarmony ? false : undefined);
-            dom.addEventListener(eventName, value, !isHarmony ? { isCapture, sideEffect: false } : undefined);
+            dom.removeEventListener(eventName, oldValue, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? false : undefined);
+            dom.addEventListener(eventName, value, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? { isCapture, sideEffect: false } : undefined);
         }
         else {
-            dom.addEventListener(eventName, value, !isHarmony ? isCapture : undefined);
+            dom.addEventListener(eventName, value, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? isCapture : undefined);
         }
     }
     else {
@@ -351,29 +401,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] === '-' && process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY) {
         // css variables need not further judgment
+        style.setProperty(key, value.toString());
         return;
     }
-    if (isHarmony && key.startsWith('_')) {
-        // harmony样式已处理
-        style[key] = value == null ? '' : value;
+    style[key] =
+        isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
+            ? (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY ? value + 'px' : convertNumber2PX(value))
+            : value === null
+                ? ''
+                : value;
+}
+// 鸿蒙样式特殊处理，需要在插入顺序中前置插入，防止覆盖了style
+function setHarmonyStyle(dom, value, oldValue) {
+    // @ts-ignore
+    const style = dom._st.hmStyle; // __hmStyle是已经被处理过的鸿蒙样式，可以直接塞进hmStyle对象内
+    if (isObject(oldValue)) {
+        for (const i in oldValue) {
+            if (!(value && i in value)) {
+                // 鸿蒙伪类特殊处理
+                if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY) {
+                    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] =
-            isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
-                ? convertNumber2PX(value)
-                : value == null
-                    ? ''
-                    : value;
+    if (isObject(value)) {
+        for (const i in value) {
+            if (!oldValue || !isEqual(value[i], oldValue[i])) {
+                // 鸿蒙伪类特殊处理
+                if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY) {
+                    if (i === '::after' || i === '::before') {
+                        setPseudo(dom, i, value[i]);
+                    }
+                    else if (['::first-child', '::last-child', '::empty'].includes(i) || i.startsWith('::nth-child')) {
+                        // @ts-ignore
+                        dom.set_pseudo_class(i, value[i]);
+                    }
+                    else {
+                        if (i === 'position') {
+                            if (value[i] === 'fixed' || (value[i] !== 'fixed' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue[i]))) {
+                                // @ts-ignore
+                                dom.setLayer(value[i] === 'fixed' ? 1 : 0);
+                            }
+                        }
+                        else if (i === 'animationName') {
+                            // @ts-ignore
+                            dom.setAnimation(true);
+                        }
+                        style[i] = value[i];
+                    }
+                }
+                else {
+                    style[i] = value[i];
+                }
+            }
+        }
     }
+    dom.setAttribute('__hmStyle', value);
 }
 function setProperty(dom, name, value, oldValue) {
     var _a, _b;
@@ -382,6 +488,9 @@ function setProperty(dom, name, value, oldValue) {
         name === 'children' ||
         name === 'ref') ;
     else if (name === 'style') {
+        if (/harmony.*cpp/.test(process.env.TARO_ENV || '')) {
+            return dom.setAttribute('_style4cpp', value);
+        }
         const style = dom.style;
         if (isString(value)) {
             style.cssText = value;
@@ -394,6 +503,11 @@ function setProperty(dom, name, value, oldValue) {
             if (isObject(oldValue)) {
                 for (const i in oldValue) {
                     if (!(value && i in value)) {
+                        // Harmony特殊处理
+                        if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && i === 'position' && oldValue[i] === 'fixed') {
+                            // @ts-ignore
+                            dom.setLayer(0);
+                        }
                         setStyle(style, i, '');
                     }
                 }
@@ -401,6 +515,13 @@ function setProperty(dom, name, value, oldValue) {
             if (isObject(value)) {
                 for (const i in value) {
                     if (!oldValue || !isEqual(value[i], oldValue[i])) {
+                        // Harmony特殊处理
+                        if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && i === 'position') {
+                            if (value[i] === 'fixed' || (value[i] !== 'fixed' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue[i]))) {
+                                // @ts-ignore
+                                dom.setLayer(value[i] === 'fixed' ? 1 : 0);
+                            }
+                        }
                         setStyle(style, i, value[i]);
                     }
                 }
@@ -428,6 +549,17 @@ function setProperty(dom, name, value, oldValue) {
         }
     }
 }
+// 设置鸿蒙伪类属性(特殊设置)
+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 */
 const hostConfig = {
@@ -505,8 +637,7 @@ const hostConfig = {
     //      Microtasks
     //     (optional)
     // -------------------
-    // 鸿蒙平台不支持微任务
-    supportsMicrotasks: process.env.TARO_PLATFORM !== 'harmony',
+    supportsMicrotasks: true,
     scheduleMicrotask: isUndefined(Promise)
         ? setTimeout
         : (callback) => Promise.resolve(null)
@@ -531,6 +662,11 @@ const hostConfig = {
     },
     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);
     },
@@ -800,14 +936,17 @@ function createPortal(children, containerInfo, key) {
         implementation: null
     };
 }
+const flushSync = TaroReconciler.flushSync;
 var index = {
     render,
+    flushSync,
     createRoot,
     unstable_batchedUpdates,
     unmountComponentAtNode,
     findDOMNode,
-    createPortal
+    createPortal,
+    internalInstanceKey
 };
 
-export { createPortal, createRoot, index as default, findDOMNode, render, unmountComponentAtNode, unstable_batchedUpdates };
+export { createPortal, createRoot, index as default, findDOMNode, flushSync, internalInstanceKey, render, unmountComponentAtNode, unstable_batchedUpdates };
 //# sourceMappingURL=react.esm.js.map