@tarojs/react 4.0.0-beta.1 → 4.0.0-beta.100

package/LICENSE

@@ -154,7 +154,21 @@ 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`
+MIT (weui):
+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.
+
+==================
+
+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,25 @@
+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;
+};
+export { createPortal, createRoot, findDOMNode, internalInstanceKey, render, unmountComponentAtNode, unstable_batchedUpdates, };
+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 _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 { 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';
@@ -134,6 +134,10 @@ function getFiberCurrentPropsFromNode(node) {
 }
 function updateFiberProps(node, props) {
     node[internalPropsKey] = props;
+    if (process.env.TARO_PLATFORM === 'harmony') {
+        // @ts-ignore
+        node.updateTextNode();
+    }
 }
 
 // 从 props 中，更新 input 组件的 value 值
@@ -173,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);
             }
         }
@@ -286,17 +290,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;
-    const isFormElement = dom instanceof FormElement;
-    const 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;
+    }
+    // 获取两个对象键的数组
+    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);
@@ -305,11 +322,29 @@ function updateProps(dom, oldProps, newProps) {
     }
 }
 function updatePropsByPayload(dom, oldProps, updatePayload) {
-    for (let i = 0; i < updatePayload.length; i += 2) { // key, value 成对出现
+    const handlers = [];
+    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 (isHarmony) {
+            // 鸿蒙样式前置插入，防止覆盖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 (isHarmony) {
+        for (let i = 0; i < handlers.length; i++) {
+            handlers[i]();
+        }
     }
 }
 function getUpdatePayload(dom, oldProps, newProps) {
@@ -323,6 +358,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]);
         }
     }
@@ -357,29 +395,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] =
+        isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
+            ? (isHarmony ? 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 (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] =
-            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 (isHarmony) {
+                    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;
@@ -397,25 +491,29 @@ function setProperty(dom, name, value, oldValue) {
                 style.cssText = '';
                 oldValue = null;
             }
-            let needUpdateAfterMoved = false;
             if (isObject(oldValue)) {
                 for (const i in oldValue) {
                     if (!(value && i in value)) {
-                        setStyle(style, i, '');
-                        if (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 (isObject(value)) {
                 for (const i in value) {
                     if (!oldValue || !isEqual(value[i], oldValue[i])) {
+                        // Harmony特殊处理
+                        if (isHarmony && 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]);
-                        updateDOMInstance(dom);
                     }
                 }
             }
@@ -436,14 +534,23 @@ function setProperty(dom, name, value, oldValue) {
     else if (!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 */
 const hostConfig = {
@@ -474,7 +581,15 @@ const hostConfig = {
         parent.appendChild(child);
     },
     finalizeInitialChildren(dom, type, props) {
-        updateProps(dom, {}, props); // 提前执行更新属性操作，Taro 在 Page 初始化后会立即从 dom 读取必要信息
+        let newProps = props;
+        if (dom instanceof FormElement) {
+            const [defaultName, defaultKey] = ['switch', 'checkbox', 'radio'].includes(type) ? ['checked', 'defaultChecked'] : ['value', 'defaultValue'];
+            if (props.hasOwnProperty(defaultKey)) {
+                newProps = Object.assign(Object.assign({}, newProps), { [defaultName]: props[defaultKey] });
+                delete newProps[defaultKey];
+            }
+        }
+        updateProps(dom, {}, newProps); // 提前执行更新属性操作，Taro 在 Page 初始化后会立即从 dom 读取必要信息
         if (type === 'input' || type === 'textarea') {
             track(dom);
         }
@@ -513,8 +628,7 @@ const hostConfig = {
     //      Microtasks
     //     (optional)
     // -------------------
-    // 鸿蒙平台不支持微任务
-    supportsMicrotasks: process.env.TARO_PLATFORM !== 'harmony',
+    supportsMicrotasks: true,
     scheduleMicrotask: isUndefined(Promise)
         ? setTimeout
         : (callback) => Promise.resolve(null)
@@ -539,6 +653,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);
     },
@@ -814,8 +933,9 @@ var index = {
     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, internalInstanceKey, render, unmountComponentAtNode, unstable_batchedUpdates };
 //# sourceMappingURL=react.esm.js.map