react-vant-nova 1.1.8-test → 1.1.9-test

package/es/toast/method.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { useIsomorphicLayoutEffect } from '../hooks';
 import { extend, isObject } from '../utils';
 import { resolveContainer } from '../utils/dom/getContainer';
@@ -7,10 +7,6 @@ import { lockClick } from './lock-click';
 import BaseToast from './Toast';
 import { render, unmount } from '../utils/dom/render';
 import canUseDom from '../utils/dom/canUseDom';
-import { reactVersion } from '../utils/dom/version';
-console.log('method.tsx loaded');
-console.log('React version:', reactVersion);
-console.log('canUseDom:', canUseDom());
 const defaultOptions = {
   message: '',
   className: '',
@@ -23,9 +19,7 @@ const defaultOptions = {
 const toastArray = [];
 let allowMultiple = false;
 let currentOptions = extend({}, defaultOptions);
-// default options of specific type
 const defaultOptionsMap = new Map();
-// 同步的销毁
 function syncClear() {
   let fn = toastArray.pop();
   while (fn) {
@@ -33,22 +27,27 @@ function syncClear() {
     fn = toastArray.pop();
   }
 }
-// 针对 toast 还没弹出来就立刻销毁的情况，将销毁放到下一个 event loop 中，避免销毁失败。
 function nextTickClear() {
   setTimeout(syncClear);
 }
-// 可返回用于销毁此弹窗的方法
 const ToastObj = p => {
-  console.log('ToastObj called');
-  if (!canUseDom()) {
-    console.log('canUseDom returned false');
-    return null;
-  }
+  if (!canUseDom()) return null;
   const props = parseOptions(p);
-  console.log('props:', props);
+  // 1. 创建一个引用容器，用于在组件渲染后将方法“透传”出来
+  const componentRef = {
+    clear: () => {},
+    config: nextState => {}
+  };
+  // 2. 这里定义的 update 方法改为调用 componentRef 中的方法
+  // 这样即使 React 19 异步渲染导致组件还没挂载，外部拿到 update 后，
+  // 等组件挂载完毕覆盖了 componentRef 的方法，调用就会生效。
   const update = {
-    config: () => {},
-    clear: () => null
+    config: nextState => componentRef.config(nextState),
+    clear: () => {
+      // 如果组件还没挂载就被调用 clear，说明需要立即销毁容器（防御性编程）
+      // 但通常我们会等待组件挂载后的逻辑接管
+      componentRef.clear();
+    }
   };
   let timer = 0;
   const {
@@ -57,46 +56,51 @@ const ToastObj = p => {
   } = props;
   const container = document.createElement('div');
   const bodyContainer = resolveContainer(teleport);
-  console.log('bodyContainer:', bodyContainer);
   bodyContainer.appendChild(container);
-  console.log('container added to bodyContainer');
   const TempToast = () => {
-    console.log('TempToast component rendered');
     const options = Object.assign({
       duration: 2000
     }, props);
-    const [visible, setVisible] = useState(true); // 初始化为true，确保组件渲染时可见
+    // 关键修改 A: 初始设为 false，确保挂载后从 false -> true 触发动画
+    const [visible, setVisible] = useState(false);
     const [state, setState] = useState(Object.assign({}, options));
-    console.log('TempToast useState initialized, visible:', visible);
-    // clearDOM after animation
+    // 关键修改 B: 使用 useEffect 在组件挂载下一帧开启显示
+    useEffect(() => {
+      setVisible(true);
+    }, []);
     const internalOnClosed = useCallback(() => {
-      console.log('internalOnClosed called');
       if (state.forbidClick) {
         lockClick(false);
       }
       setVisible(false);
-      window.setTimeout(() => {
-        const unmountResult = unmount(container);
-        if (unmountResult && container.parentNode) {
-          container.parentNode.removeChild(container);
-        }
-      }, +state.duration || +defaultOptions.duration);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [container]);
-    // close with animation
+      // 等待动画结束时间后卸载 DOM
+      // 注意：这里最好稍微给一点 buffer 时间，或者依赖组件的 onClosed 回调
+      const unmountDelay = +state.duration || +defaultOptions.duration;
+      // 如果 duration 是 0 (一直显示)，我们在 clear 时不需要等待 duration，而是等待动画时间
+      // 这里为了简单，如果 visible 变 false，通常组件会有 exit 动画时长
+      // 这里的逻辑最好依赖 BaseToast 的 onClosed 属性回调，但为了保险起见保留 setTimeout
+      // 修正逻辑：只有当 visible 变为 false 触发动画结束时，BaseToast 才会调用 onClosed
+      // 这里我们手动卸载 Root
+    }, [state.duration, state.forbidClick]);
+    // 真正的物理销毁
+    const handleAfterClose = useCallback(() => {
+      const unmountResult = unmount(container);
+      if (unmountResult && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    }, []);
     const destroy = useCallback(() => {
-      console.log('destroy called');
       setVisible(false);
       if (onClose) onClose();
-    }, []);
-    update.clear = internalOnClosed;
-    update.config = useCallback(nextState => {
-      console.log('update.config called:', nextState);
-      setState(prev => typeof nextState === 'function' ? Object.assign(Object.assign({}, prev), nextState(prev)) : Object.assign(Object.assign({}, prev), nextState));
-    }, [setState]);
+    }, [onClose]);
+    // 将内部方法赋值给外部引用
+    useIsomorphicLayoutEffect(() => {
+      componentRef.clear = internalOnClosed;
+      componentRef.config = nextState => {
+        setState(prev => typeof nextState === 'function' ? Object.assign(Object.assign({}, prev), nextState(prev)) : Object.assign(Object.assign({}, prev), nextState));
+      };
+    }, [internalOnClosed]);
     useIsomorphicLayoutEffect(() => {
-      console.log('useIsomorphicLayoutEffect called');
-      // 移除setVisible(true)，因为初始状态已经是true
       if (!allowMultiple) syncClear();
       toastArray.push(internalOnClosed);
       if (state.duration !== 0 && 'duration' in state) {
@@ -107,26 +111,25 @@ const ToastObj = p => {
           window.clearTimeout(timer);
         }
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (
       // @ts-ignore
       _jsx(BaseToast, Object.assign({}, state, {
         visible: visible,
-        // 移除teleport属性，避免嵌套的createPortal调用
+        // 关键：确保 teleport={null} 或不传，防止 BaseToast 内部再次 Portal 出去
+        // 如果 BaseToast 内部有 Portal 逻辑，设为 null 通常能禁用它
+        teleport: null,
         onClose: destroy,
-        onClosed: internalOnClosed
+        onClosed: handleAfterClose
       }))
     );
   };
-  console.log('Before render(<TempToast />)');
+  // React 19: 这里的 render 是异步的，TempToast 不会立即执行
   // @ts-ignore
   render(_jsx(TempToast, {}), container);
-  console.log('After render(<TempToast />)');
   return update;
 };
 function parseOptions(message) {
-  console.log('parseOptions called:', message);
   if (isObject(message)) {
     return message;
   }
@@ -135,7 +138,6 @@ function parseOptions(message) {
   };
 }
 const createMethod = type => options => {
-  console.log('createMethod called:', type, options);
   return ToastObj(Object.assign(Object.assign(Object.assign(Object.assign({}, currentOptions), defaultOptionsMap.get(type)), parseOptions(options)), {
     type
   }));

package/lib/toast/method.js

@@ -25,12 +25,8 @@ var _lockClick = require("./lock-click");
 var _Toast = _interopRequireDefault(require("./Toast"));
 var _render = require("../utils/dom/render");
 var _canUseDom = _interopRequireDefault(require("../utils/dom/canUseDom"));
-var _version = require("../utils/dom/version");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-console.log('method.tsx loaded');
-console.log('React version:', _version.reactVersion);
-console.log('canUseDom:', (0, _canUseDom.default)());
 const defaultOptions = {
   message: '',
   className: '',
@@ -43,9 +39,7 @@ const defaultOptions = {
 const toastArray = [];
 let allowMultiple = false;
 let currentOptions = (0, _utils.extend)({}, defaultOptions);
-// default options of specific type
 const defaultOptionsMap = new Map();
-// 同步的销毁
 function syncClear() {
   let fn = toastArray.pop();
   while (fn) {
@@ -53,22 +47,27 @@ function syncClear() {
     fn = toastArray.pop();
   }
 }
-// 针对 toast 还没弹出来就立刻销毁的情况，将销毁放到下一个 event loop 中，避免销毁失败。
 function nextTickClear() {
   setTimeout(syncClear);
 }
-// 可返回用于销毁此弹窗的方法
 const ToastObj = p => {
-  console.log('ToastObj called');
-  if (!(0, _canUseDom.default)()) {
-    console.log('canUseDom returned false');
-    return null;
-  }
+  if (!(0, _canUseDom.default)()) return null;
   const props = parseOptions(p);
-  console.log('props:', props);
+  // 1. 创建一个引用容器，用于在组件渲染后将方法“透传”出来
+  const componentRef = {
+    clear: () => {},
+    config: nextState => {}
+  };
+  // 2. 这里定义的 update 方法改为调用 componentRef 中的方法
+  // 这样即使 React 19 异步渲染导致组件还没挂载，外部拿到 update 后，
+  // 等组件挂载完毕覆盖了 componentRef 的方法，调用就会生效。
   const update = {
-    config: () => {},
-    clear: () => null
+    config: nextState => componentRef.config(nextState),
+    clear: () => {
+      // 如果组件还没挂载就被调用 clear，说明需要立即销毁容器（防御性编程）
+      // 但通常我们会等待组件挂载后的逻辑接管
+      componentRef.clear();
+    }
   };
   let timer = 0;
   const {
@@ -77,46 +76,51 @@ const ToastObj = p => {
   } = props;
   const container = document.createElement('div');
   const bodyContainer = (0, _getContainer.resolveContainer)(teleport);
-  console.log('bodyContainer:', bodyContainer);
   bodyContainer.appendChild(container);
-  console.log('container added to bodyContainer');
   const TempToast = () => {
-    console.log('TempToast component rendered');
     const options = Object.assign({
       duration: 2000
     }, props);
-    const [visible, setVisible] = (0, _react().useState)(true); // 初始化为true，确保组件渲染时可见
+    // 关键修改 A: 初始设为 false，确保挂载后从 false -> true 触发动画
+    const [visible, setVisible] = (0, _react().useState)(false);
     const [state, setState] = (0, _react().useState)(Object.assign({}, options));
-    console.log('TempToast useState initialized, visible:', visible);
-    // clearDOM after animation
+    // 关键修改 B: 使用 useEffect 在组件挂载下一帧开启显示
+    (0, _react().useEffect)(() => {
+      setVisible(true);
+    }, []);
     const internalOnClosed = (0, _react().useCallback)(() => {
-      console.log('internalOnClosed called');
       if (state.forbidClick) {
         (0, _lockClick.lockClick)(false);
       }
       setVisible(false);
-      window.setTimeout(() => {
-        const unmountResult = (0, _render.unmount)(container);
-        if (unmountResult && container.parentNode) {
-          container.parentNode.removeChild(container);
-        }
-      }, +state.duration || +defaultOptions.duration);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [container]);
-    // close with animation
+      // 等待动画结束时间后卸载 DOM
+      // 注意：这里最好稍微给一点 buffer 时间，或者依赖组件的 onClosed 回调
+      const unmountDelay = +state.duration || +defaultOptions.duration;
+      // 如果 duration 是 0 (一直显示)，我们在 clear 时不需要等待 duration，而是等待动画时间
+      // 这里为了简单，如果 visible 变 false，通常组件会有 exit 动画时长
+      // 这里的逻辑最好依赖 BaseToast 的 onClosed 属性回调，但为了保险起见保留 setTimeout
+      // 修正逻辑：只有当 visible 变为 false 触发动画结束时，BaseToast 才会调用 onClosed
+      // 这里我们手动卸载 Root
+    }, [state.duration, state.forbidClick]);
+    // 真正的物理销毁
+    const handleAfterClose = (0, _react().useCallback)(() => {
+      const unmountResult = (0, _render.unmount)(container);
+      if (unmountResult && container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    }, []);
     const destroy = (0, _react().useCallback)(() => {
-      console.log('destroy called');
       setVisible(false);
       if (onClose) onClose();
-    }, []);
-    update.clear = internalOnClosed;
-    update.config = (0, _react().useCallback)(nextState => {
-      console.log('update.config called:', nextState);
-      setState(prev => typeof nextState === 'function' ? Object.assign(Object.assign({}, prev), nextState(prev)) : Object.assign(Object.assign({}, prev), nextState));
-    }, [setState]);
+    }, [onClose]);
+    // 将内部方法赋值给外部引用
+    (0, _hooks.useIsomorphicLayoutEffect)(() => {
+      componentRef.clear = internalOnClosed;
+      componentRef.config = nextState => {
+        setState(prev => typeof nextState === 'function' ? Object.assign(Object.assign({}, prev), nextState(prev)) : Object.assign(Object.assign({}, prev), nextState));
+      };
+    }, [internalOnClosed]);
     (0, _hooks.useIsomorphicLayoutEffect)(() => {
-      console.log('useIsomorphicLayoutEffect called');
-      // 移除setVisible(true)，因为初始状态已经是true
       if (!allowMultiple) syncClear();
       toastArray.push(internalOnClosed);
       if (state.duration !== 0 && 'duration' in state) {
@@ -127,26 +131,25 @@ const ToastObj = p => {
           window.clearTimeout(timer);
         }
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (
       // @ts-ignore
       (0, _jsxRuntime().jsx)(_Toast.default, Object.assign({}, state, {
         visible: visible,
-        // 移除teleport属性，避免嵌套的createPortal调用
+        // 关键：确保 teleport={null} 或不传，防止 BaseToast 内部再次 Portal 出去
+        // 如果 BaseToast 内部有 Portal 逻辑，设为 null 通常能禁用它
+        teleport: null,
         onClose: destroy,
-        onClosed: internalOnClosed
+        onClosed: handleAfterClose
       }))
     );
   };
-  console.log('Before render(<TempToast />)');
+  // React 19: 这里的 render 是异步的，TempToast 不会立即执行
   // @ts-ignore
   (0, _render.render)((0, _jsxRuntime().jsx)(TempToast, {}), container);
-  console.log('After render(<TempToast />)');
   return update;
 };
 function parseOptions(message) {
-  console.log('parseOptions called:', message);
   if ((0, _utils.isObject)(message)) {
     return message;
   }
@@ -155,7 +158,6 @@ function parseOptions(message) {
   };
 }
 const createMethod = type => options => {
-  console.log('createMethod called:', type, options);
   return ToastObj(Object.assign(Object.assign(Object.assign(Object.assign({}, currentOptions), defaultOptionsMap.get(type)), parseOptions(options)), {
     type
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-vant-nova",
-  "version": "1.1.8-test",
+  "version": "1.1.9-test",
   "description": "React Mobile UI Components based on Vant UI (兼容 React 19+,新增轻量 Table 组件)",
   "keywords": [
     "ui",