@tarojs/react 4.0.1 → 4.0.3-alpha.0

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

@@ -1,30 +1,10 @@
-import { TaroElement, TaroText } from '@tarojs/runtime';
-import { ReactNode } from 'react';
-import Reconciler from "react-reconciler";
-import { OpaqueRoot } from "react-reconciler";
-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;
+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>> | import("react").ReactFragment | null;
+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;
@@ -32,12 +12,22 @@ declare function createPortal(children: ReactNode, containerInfo: TaroElement, k
     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 as default, createPortal, createRoot, findDOMNode, render, unmountComponentAtNode, unstable_batchedUpdates };
+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,5 +1,5 @@
-import { isString, isObject, isFunction, capitalize, toCamelCase, internalComponents, isNumber, noop, isUndefined, isBoolean, ensure } from '@tarojs/shared';
-import { FormElement, document, hooks } from '@tarojs/runtime';
+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);
             }
         }
@@ -280,10 +284,37 @@ 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';
 }
-const IS_NON_DIMENSIONAL = /aspect|acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+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;
+}
 function updateProps(dom, oldProps, newProps) {
     const updatePayload = getUpdatePayload(dom, oldProps, newProps);
     if (updatePayload) {
@@ -291,11 +322,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 (isHarmony) {
+            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 (isHarmony) {
+        fixedHandler && fixedHandler();
+        for (let i = 0; i < handlers.length; i++) {
+            handlers[i]();
+        }
     }
 }
 function getUpdatePayload(dom, oldProps, newProps) {
@@ -309,6 +365,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]);
         }
     }
@@ -326,16 +385,16 @@ function setEvent(dom, name, value, oldValue) {
         eventName = eventName.slice(0, -7);
     }
     const compName = capitalize(toCamelCase(dom.tagName.toLowerCase()));
-    if (eventName === 'click' && compName in internalComponents) {
+    if (eventName === 'click' && !isHarmony && compName in internalComponents) {
         eventName = 'tap';
     }
     if (isFunction(value)) {
         if (oldValue) {
-            dom.removeEventListener(eventName, oldValue, false);
-            dom.addEventListener(eventName, value, { isCapture, sideEffect: false });
+            dom.removeEventListener(eventName, oldValue, !isHarmony ? false : undefined);
+            dom.addEventListener(eventName, value, !isHarmony ? { isCapture, sideEffect: false } : undefined);
         }
         else {
-            dom.addEventListener(eventName, value, isCapture);
+            dom.addEventListener(eventName, value, !isHarmony ? isCapture : undefined);
         }
     }
     else {
@@ -343,18 +402,86 @@ function setEvent(dom, name, value, oldValue) {
     }
 }
 function setStyle(style, key, value) {
-    if (key[0] === '-') {
-        style.setProperty(key, value.toString());
+    if (key[0] === '-' && !isHarmony) {
         // css variables need not further judgment
+        style.setProperty(key, value.toString());
         return;
     }
     style[key] =
         isNumber(value) && IS_NON_DIMENSIONAL.test(key) === false
-            ? value + 'px'
-            : value == null
+            ? (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] = '';
+                }
+            }
+        }
+    }
+    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;
     name = name === 'className' ? 'class' : name;
@@ -374,13 +501,25 @@ function setProperty(dom, name, value, oldValue) {
             if (isObject(oldValue)) {
                 for (const i in oldValue) {
                     if (!(value && i in value)) {
+                        // Harmony特殊处理
+                        if (isHarmony && i === 'position' && oldValue[i] === 'fixed') {
+                            // @ts-ignore
+                            dom.setLayer(0);
+                        }
                         setStyle(style, i, '');
                     }
                 }
             }
             if (isObject(value)) {
                 for (const i in value) {
-                    if (!oldValue || value[i] !== oldValue[i]) {
+                    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]);
                     }
                 }
@@ -408,6 +547,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 = {
@@ -510,6 +660,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);
     },
@@ -729,6 +884,7 @@ function createRoot(domContainer, options = {}) {
     return root;
 }
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 let isInsideEventHandler = false;
 // 重新包裹 batchedUpdates，使其可以在触发事件后执行 finishEventHandler
 const unstable_batchedUpdates = (fn, a) => {
@@ -778,14 +934,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