@my-react/react-reconciler-compact 0.0.3 → 0.0.5

package/dist/cjs/index.production.js

@@ -281,6 +281,7 @@ function requireIndex_production_1 () {
 				    HOOK_TYPE[HOOK_TYPE["useInsertionEffect"] = 13] = "useInsertionEffect";
 				    HOOK_TYPE[HOOK_TYPE["useImperativeHandle"] = 14] = "useImperativeHandle";
 				    HOOK_TYPE[HOOK_TYPE["useSyncExternalStore"] = 15] = "useSyncExternalStore";
+				    HOOK_TYPE[HOOK_TYPE["useOptimistic"] = 16] = "useOptimistic";
 				})(exports.HOOK_TYPE || (exports.HOOK_TYPE = {}));
 
 				exports.UpdateQueueType = void 0;
@@ -309,6 +310,7 @@ function requireIndex_production_1 () {
 				    STATE_TYPE[STATE_TYPE["__hmr__"] = 256] = "__hmr__";
 				    STATE_TYPE[STATE_TYPE["__retrigger__"] = 512] = "__retrigger__";
 				    STATE_TYPE[STATE_TYPE["__reschedule__"] = 1024] = "__reschedule__";
+				    STATE_TYPE[STATE_TYPE["__recreate__"] = 2048] = "__recreate__";
 				})(exports.STATE_TYPE || (exports.STATE_TYPE = {}));
 
 				exports.PATCH_TYPE = void 0;
@@ -1674,7 +1676,8 @@ function requireIndex_production_1 () {
 		        myreactSharedExports.STATE_TYPE.__triggerConcurrent__ |
 		        myreactSharedExports.STATE_TYPE.__triggerConcurrentForce__ |
 		        myreactSharedExports.STATE_TYPE.__retrigger__ |
-		        myreactSharedExports.STATE_TYPE.__reschedule__)) {
+		        myreactSharedExports.STATE_TYPE.__reschedule__ |
+		        myreactSharedExports.STATE_TYPE.__recreate__)) {
 		        fiber.state = myreactSharedExports.remove(fiber.state, myreactSharedExports.STATE_TYPE.__retrigger__);
 		        currentRunningFiber$2.current = fiber;
 		        {
@@ -1711,7 +1714,8 @@ function requireIndex_production_1 () {
 		        myreactSharedExports.STATE_TYPE.__triggerConcurrent__ |
 		        myreactSharedExports.STATE_TYPE.__triggerConcurrentForce__ |
 		        myreactSharedExports.STATE_TYPE.__retrigger__ |
-		        myreactSharedExports.STATE_TYPE.__reschedule__)) {
+		        myreactSharedExports.STATE_TYPE.__reschedule__ |
+		        myreactSharedExports.STATE_TYPE.__recreate__)) {
 		        fiber.state = myreactSharedExports.remove(fiber.state, myreactSharedExports.STATE_TYPE.__retrigger__);
 		        currentRunningFiber$2.current = fiber;
 		        {
@@ -2064,58 +2068,72 @@ function requireIndex_production_1 () {
 		        }
 		    }
 		    // TODO update flow
-		    // if (enableSuspenseRoot.current) {
-		    //   const suspenseField = getInstanceFieldByInstance(renderDispatch) as SuspenseInstanceField;
-		    //   const list = suspenseField.asyncLoadList.getAll();
-		    //   if (list.length === 0) return;
-		    //   if (renderDispatch.enableAsyncLoad) {
-		    //     defaultDeleteCurrentEffect(renderDispatch, renderDispatch.rootFiber);
-		    //     defaultDeleteChildEffect(renderDispatch, renderDispatch.rootFiber);
-		    //     const allPendingLoadArray = list.filter((item) => {
-		    //       if (isPromise(item)) {
-		    //         return typeof item.status !== "string";
-		    //       } else {
-		    //         return !item._loading && !item._loaded && !item._error;
-		    //       }
-		    //     });
-		    //     if (allPendingLoadArray.length) {
-		    //       Promise.all(
-		    //         allPendingLoadArray.map(async (item) => {
-		    //           if (isPromise(item)) {
-		    //             await renderDispatch.processPromise(item);
-		    //           } else {
-		    //             await renderDispatch.processLazy(item);
-		    //           }
-		    //           item._list?.clear();
-		    //           suspenseField.asyncLoadList.uniDelete(item);
-		    //         })
-		    //       ).then(() => {
-		    //         const aliveNode = defaultResolveAliveSuspenseFiber(node);
-		    //         aliveNode.state = STATE_TYPE.__triggerSyncForce__;
-		    //         const renderScheduler = currentScheduler.current;
-		    //         const updater: SuspenseUpdateQueue = {
-		    //           type: UpdateQueueType.suspense,
-		    //           trigger: aliveNode,
-		    //           isSync: true,
-		    //           isForce: true,
-		    //           payLoad: allPendingLoadArray,
-		    //         };
-		    //         renderScheduler.dispatchState(updater);
-		    //       });
-		    //     }
-		    //     suspenseField.isHidden = true;
-		    //     const root = renderDispatch.rootFiber;
-		    //     root.state = remove(root.state, STATE_TYPE.__stable__);
-		    //     root.state = merge(root.state, STATE_TYPE.__retrigger__);
-		    //     // TODO use hide tree to improve
-		    //     mountLoopAll(renderDispatch, root);
-		    //     suspenseField.isHidden = false;
-		    //   } else {
-		    //     throw new Error(
-		    //       "[@my-react/reconciler] should not process async load list on sync mount without enableAsyncLoad, you may use a wrong renderDispatch instance"
-		    //     );
-		    //   }
-		    // }
+		    if (enableSuspenseRoot$2.current) {
+		        var suspenseField_2 = getInstanceFieldByInstance(renderDispatch);
+		        var list = suspenseField_2.asyncLoadList.getAll();
+		        if (list.length === 0)
+		            return;
+		        if (renderDispatch.enableAsyncLoad) {
+		            // defaultDeleteCurrentEffect(renderDispatch, renderDispatch.rootFiber);
+		            // defaultDeleteChildEffect(renderDispatch, renderDispatch.rootFiber);
+		            var allPendingLoadArray = list.filter(function (item) {
+		                if (myreactSharedExports.isPromise(item)) {
+		                    return typeof item.status !== "string";
+		                }
+		                else {
+		                    return !item._loading && !item._loaded && !item._error;
+		                }
+		            });
+		            if (allPendingLoadArray.length) {
+		                allPendingLoadArray.forEach(function (item) { var _a; return (_a = item._list) === null || _a === void 0 ? void 0 : _a.forEach(function (node) { return defaultDeleteCurrentEffect(renderDispatch, node); }); });
+		                Promise.all(allPendingLoadArray.map(function (item) { return __awaiter(void 0, void 0, void 0, function () {
+		                    var allFiber;
+		                    var _a;
+		                    return __generator(this, function (_b) {
+		                        switch (_b.label) {
+		                            case 0:
+		                                if (!myreactSharedExports.isPromise(item)) return [3 /*break*/, 2];
+		                                return [4 /*yield*/, renderDispatch.processPromise(item)];
+		                            case 1:
+		                                _b.sent();
+		                                return [3 /*break*/, 4];
+		                            case 2: return [4 /*yield*/, renderDispatch.processLazy(item)];
+		                            case 3:
+		                                _b.sent();
+		                                _b.label = 4;
+		                            case 4:
+		                                allFiber = new Set(item._list);
+		                                (_a = item._list) === null || _a === void 0 ? void 0 : _a.clear();
+		                                allFiber.forEach(function (node) {
+		                                    node.state = myreactSharedExports.STATE_TYPE.__recreate__;
+		                                    var renderScheduler = currentScheduler$d.current;
+		                                    var updater = {
+		                                        type: myreactSharedExports.UpdateQueueType.suspense,
+		                                        trigger: node,
+		                                        isSync: true,
+		                                        isForce: true,
+		                                        payLoad: [item],
+		                                    };
+		                                    renderScheduler.dispatchState(updater);
+		                                });
+		                                suspenseField_2.asyncLoadList.uniDelete(item);
+		                                return [2 /*return*/];
+		                        }
+		                    });
+		                }); }));
+		            }
+		            // suspenseField.isHidden = true;
+		            // const root = renderDispatch.rootFiber;
+		            // root.state = remove(root.state, STATE_TYPE.__stable__);
+		            // root.state = merge(root.state, STATE_TYPE.__retrigger__);
+		            // // TODO use hide tree to improve
+		            // mountLoopAll(renderDispatch, root);
+		            // suspenseField.isHidden = false;
+		        }
+		        else {
+		            throw new Error("[@my-react/reconciler] should not process async load list on sync mount without enableAsyncLoad, you may use a wrong renderDispatch instance");
+		        }
+		    }
 		};
 
 		exports.updateTypeEnum = void 0;
@@ -2564,7 +2582,7 @@ function requireIndex_production_1 () {
 		react.__my_react_shared__.enableDebugFiled;
 		var currentScheduler$c = react.__my_react_internal__.currentScheduler;
 		// TODO 整合
-		var processClassComponentUpdateQueue = function (renderDispatch, fiber, enableTaskPriority) {
+		var processClassComponentUpdateQueueLatest = function (renderDispatch, fiber, enableTaskPriority) {
 		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
 		        return;
 		    if (myreactSharedExports.exclude(fiber.type, exports.NODE_TYPE.__class__))
@@ -2690,7 +2708,75 @@ function requireIndex_production_1 () {
 		        }
 		    }
 		};
-		var processFunctionComponentUpdateQueue = function (renderDispatch, fiber, enableTaskPriority) {
+		var processClassComponentUpdateQueueLegacy = function (renderDispatch, fiber) {
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
+		        return;
+		    if (myreactSharedExports.exclude(fiber.type, exports.NODE_TYPE.__class__))
+		        throw new Error("[@my-react/react] current fiber is not a class component, look like a bug for @my-react");
+		    var renderScheduler = currentScheduler$c.current;
+		    var allQueue = fiber.updateQueue;
+		    var node = allQueue === null || allQueue === void 0 ? void 0 : allQueue.head;
+		    var needUpdate = true;
+		    var isSync = false;
+		    var isForce = false;
+		    var isImmediate = false;
+		    var isRetrigger = false;
+		    var callbacks = [];
+		    var typedInstance = fiber.instance;
+		    var baseState = Object.assign({}, fiber.pendingState);
+		    var baseProps = Object.assign({}, typedInstance.props);
+		    var pendingState = Object.assign({}, fiber.pendingState);
+		    if (node) {
+		        var updater = node.value;
+		        if (updater.type === myreactSharedExports.UpdateQueueType.component) {
+		            allQueue.delete(node);
+		            var payLoad_3 = updater.payLoad;
+		            fiber.pendingState = safeCallWithCurrentFiber({
+		                fiber: fiber,
+		                fallback: function safeFallbackForState() {
+		                    return pendingState;
+		                },
+		                action: function safeGetNextState() {
+		                    return Object.assign({}, fiber.pendingState, typeof payLoad_3 === "function" ? payLoad_3(baseState, baseProps) : payLoad_3);
+		                },
+		            });
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		        }
+		        else {
+		            allQueue.delete(node);
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		        }
+		    }
+		    if (allQueue.length) {
+		        renderScheduler.microTask(function prepareUpdateOnFiberTask() {
+		            prepareUpdateOnFiber(renderDispatch, fiber, true);
+		        });
+		    }
+		    var invokeCallbackArray = callbacks.length
+		        ? function invokeCallbackArray() {
+		            return callbacks.forEach(function (cb) { return cb === null || cb === void 0 ? void 0 : cb(); });
+		        }
+		        : void 0;
+		    {
+		        return {
+		            needUpdate: needUpdate,
+		            isSync: isSync,
+		            isForce: isForce,
+		            isImmediate: isImmediate,
+		            isRetrigger: isRetrigger,
+		            callback: invokeCallbackArray,
+		        };
+		    }
+		};
+		var processFunctionComponentUpdateQueueLatest = function (renderDispatch, fiber, enableTaskPriority) {
 		    var _a, _b;
 		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
 		        return;
@@ -2712,7 +2798,7 @@ function requireIndex_production_1 () {
 		            var nextNode = node.next;
 		            if (updater.type === myreactSharedExports.UpdateQueueType.hook && updater.isSync) {
 		                allQueue.delete(node);
-		                var trigger = updater.trigger, payLoad_3 = updater.payLoad, reducer_1 = updater.reducer;
+		                var trigger = updater.trigger, payLoad_4 = updater.payLoad, reducer_1 = updater.reducer;
 		                var typedTrigger_1 = trigger;
 		                var lastResult_1 = typedTrigger_1.result;
 		                if (typedTrigger_1.type === myreactSharedExports.HOOK_TYPE.useSyncExternalStore) {
@@ -2727,10 +2813,10 @@ function requireIndex_production_1 () {
 		                    },
 		                    action: function safeGetNextState() {
 		                        if (reducer_1 && typeof reducer_1 === "function") {
-		                            return reducer_1(lastResult_1, payLoad_3);
+		                            return reducer_1(lastResult_1, payLoad_4);
 		                        }
 		                        else {
-		                            return typedTrigger_1.reducer(lastResult_1, payLoad_3);
+		                            return typedTrigger_1.reducer(lastResult_1, payLoad_4);
 		                        }
 		                    },
 		                });
@@ -2784,7 +2870,7 @@ function requireIndex_production_1 () {
 		            var nextNode = node.next;
 		            if (updater.type === myreactSharedExports.UpdateQueueType.hook) {
 		                allQueue.delete(node);
-		                var trigger = updater.trigger, payLoad_4 = updater.payLoad, reducer_2 = updater.reducer;
+		                var trigger = updater.trigger, payLoad_5 = updater.payLoad, reducer_2 = updater.reducer;
 		                var typedTrigger_2 = trigger;
 		                var lastResult_2 = typedTrigger_2.result;
 		                if (typedTrigger_2.type === myreactSharedExports.HOOK_TYPE.useSyncExternalStore) {
@@ -2799,10 +2885,10 @@ function requireIndex_production_1 () {
 		                    },
 		                    action: function safeGetNextState() {
 		                        if (reducer_2 && typeof reducer_2 === "function") {
-		                            return reducer_2(lastResult_2, payLoad_4);
+		                            return reducer_2(lastResult_2, payLoad_5);
 		                        }
 		                        else {
-		                            return typedTrigger_2.reducer(lastResult_2, payLoad_4);
+		                            return typedTrigger_2.reducer(lastResult_2, payLoad_5);
 		                        }
 		                    },
 		                });
@@ -2846,7 +2932,89 @@ function requireIndex_production_1 () {
 		        }
 		    }
 		};
-		var processNormalComponentUpdate = function (fiber) {
+		var processFunctionComponentUpdateQueueLegacy = function (renderDispatch, fiber) {
+		    var _a;
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
+		        return;
+		    if (myreactSharedExports.exclude(fiber.type, exports.NODE_TYPE.__function__)) {
+		        throw new Error("[@my-react/react] current fiber is not a function component, look like a bug for @my-react");
+		    }
+		    var renderScheduler = currentScheduler$c.current;
+		    var allQueue = fiber.updateQueue;
+		    var node = allQueue === null || allQueue === void 0 ? void 0 : allQueue.head;
+		    var needUpdate = false;
+		    var isSync = false;
+		    var isForce = false;
+		    var isImmediate = false;
+		    var isRetrigger = false;
+		    var callbacks = [];
+		    if (node) {
+		        var updater = node.value;
+		        if (updater.type === myreactSharedExports.UpdateQueueType.hook) {
+		            allQueue.delete(node);
+		            var trigger = updater.trigger, payLoad_6 = updater.payLoad, reducer_3 = updater.reducer;
+		            var typedTrigger_3 = trigger;
+		            var lastResult_3 = typedTrigger_3.result;
+		            if (typedTrigger_3.type === myreactSharedExports.HOOK_TYPE.useSyncExternalStore) {
+		                lastResult_3 = (_a = trigger.value) === null || _a === void 0 ? void 0 : _a.result;
+		            }
+		            var hasError_3 = false;
+		            typedTrigger_3.result = safeCallWithCurrentFiber({
+		                fiber: fiber,
+		                fallback: function safeFallbackForState() {
+		                    hasError_3 = true;
+		                    return lastResult_3;
+		                },
+		                action: function safeGetNextState() {
+		                    if (reducer_3 && typeof reducer_3 === "function") {
+		                        return reducer_3(lastResult_3, payLoad_6);
+		                    }
+		                    else {
+		                        return typedTrigger_3.reducer(lastResult_3, payLoad_6);
+		                    }
+		                },
+		            });
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		            if (!needUpdate && (isForce || hasError_3 || callbacks.length || !Object.is(lastResult_3, typedTrigger_3.result)))
+		                needUpdate = true;
+		        }
+		        else {
+		            allQueue.delete(node);
+		            updater.payLoad;
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		            needUpdate = true;
+		        }
+		    }
+		    if (allQueue.length) {
+		        renderScheduler.microTask(function prepareUpdateOnFiberTask() {
+		            prepareUpdateOnFiber(renderDispatch, fiber, true);
+		        });
+		    }
+		    var invokeCallbackArray = callbacks.length
+		        ? function invokeCallbackArray() {
+		            return callbacks.forEach(function (cb) { return cb === null || cb === void 0 ? void 0 : cb(); });
+		        }
+		        : void 0;
+		    {
+		        return {
+		            needUpdate: needUpdate,
+		            isSync: isSync,
+		            isForce: isForce,
+		            isImmediate: isImmediate,
+		            isRetrigger: isRetrigger,
+		            callback: invokeCallbackArray,
+		        };
+		    }
+		};
+		var processNormalComponentUpdateLatest = function (renderDispatch, fiber) {
 		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
 		        return;
 		    var allQueue = fiber.updateQueue;
@@ -2885,6 +3053,49 @@ function requireIndex_production_1 () {
 		        };
 		    }
 		};
+		var processNormalComponentUpdateLegacy = function (renderDispatch, fiber) {
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
+		        return;
+		    var allQueue = fiber.updateQueue;
+		    var renderScheduler = currentScheduler$c.current;
+		    var node = allQueue === null || allQueue === void 0 ? void 0 : allQueue.head;
+		    var needUpdate = true;
+		    var isSync = false;
+		    var isForce = false;
+		    var isImmediate = false;
+		    var isRetrigger = false;
+		    var callbacks = [];
+		    if (node) {
+		        var updater = node.value;
+		        allQueue.delete(node);
+		        updater.payLoad;
+		        isSync = isSync || updater.isSync;
+		        isForce = isForce || updater.isForce;
+		        isImmediate = isImmediate || updater.isImmediate;
+		        isRetrigger = isRetrigger || updater.isRetrigger;
+		        updater.callback && callbacks.push(updater.callback);
+		    }
+		    if (allQueue.length) {
+		        renderScheduler.microTask(function prepareUpdateOnFiberTask() {
+		            prepareUpdateOnFiber(renderDispatch, fiber, true);
+		        });
+		    }
+		    var invokeCallbackArray = callbacks.length
+		        ? function invokeCallbackArray() {
+		            return callbacks.forEach(function (cb) { return cb === null || cb === void 0 ? void 0 : cb(); });
+		        }
+		        : void 0;
+		    {
+		        return {
+		            needUpdate: needUpdate,
+		            isSync: isSync,
+		            isForce: isForce,
+		            isImmediate: isImmediate,
+		            isRetrigger: isRetrigger,
+		            callback: invokeCallbackArray,
+		        };
+		    }
+		};
 		/**
 		 * @deprecated
 		 */
@@ -2898,7 +3109,7 @@ function requireIndex_production_1 () {
 		 * @deprecated
 		 */
 		var syncFlushComponentQueue = function (renderDispatch, fiber) {
-		    var _a = processClassComponentUpdateQueue(renderDispatch, fiber), needUpdate = _a.needUpdate, callback = _a.callback;
+		    var _a = processClassComponentUpdateQueueLatest(renderDispatch, fiber), needUpdate = _a.needUpdate, callback = _a.callback;
 		    needUpdate && syncFiberStateToComponent(renderDispatch, fiber, callback);
 		    syncComponentStateToFiber(fiber);
 		};
@@ -3355,6 +3566,7 @@ function requireIndex_production_1 () {
 		var defaultReducer = function (state, action) {
 		    return typeof action === "function" ? action(state) : action;
 		};
+		var defaultOptimisticReducer = function (state) { return state; };
 		var createHookNode = function (renderDispatch, _a, fiber) {
 		    var _b;
 		    var type = _a.type, value = _a.value, reducer = _a.reducer, deps = _a.deps;
@@ -3386,7 +3598,7 @@ function requireIndex_production_1 () {
 		        hookNode.result = hookNode.value;
 		    }
 		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useId) {
-		        hookNode.result = "_-".concat(currentHookIndex, "-").concat(renderDispatch.uniqueIdCount++, "-_");
+		        hookNode.result = "\u00AB-".concat(currentHookIndex, "-").concat(renderDispatch.uniqueIdCount++, "-\u00BB");
 		        hookNode.cancel = function () { return renderDispatch.uniqueIdCount--; };
 		    }
 		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useDebugValue) {
@@ -3471,20 +3683,17 @@ function requireIndex_production_1 () {
 		        hookNode.result = new MyReactSignal(hookNode.value.call(null), renderDispatch);
 		    }
 		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useTransition) {
-		        hookNode.result = [
-		            false,
-		            // TODO
-		            function startTransitionByHook(cb) {
+		        hookNode.result = {
+		            value: false,
+		            start: function startTransitionByHook(cb) {
 		                var loadingCallback = function (cb) {
 		                    react.startTransition(function () {
-		                        hookNode.result[0] = true;
-		                        hookNode._update({ isForce: true, isSync: true, callback: cb });
+		                        hookNode._update({ isForce: true, isSync: true, callback: cb, payLoad: function (last) { return ({ value: true, start: last.start }); } });
 		                    });
 		                };
 		                var loadedCallback = function () {
 		                    react.startTransition(function () {
-		                        hookNode.result[0] = false;
-		                        hookNode._update({ isForce: true, isSync: true });
+		                        hookNode._update({ isForce: true, isSync: true, payLoad: function (last) { return ({ value: false, start: last.start }); } });
 		                    });
 		                };
 		                var taskCallback = function () {
@@ -3495,7 +3704,19 @@ function requireIndex_production_1 () {
 		                };
 		                loadingCallback(taskCallback);
 		            },
-		        ];
+		        };
+		    }
+		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useOptimistic) {
+		        hookNode.result = {
+		            value: value.value,
+		            start: function startOptimisticByHook(newValue) {
+		                var mergeFunc = hookNode.value.reducer || defaultOptimisticReducer;
+		                var nextValue = mergeFunc(newValue, hookNode.result.value.value);
+		                var payloadRef = { current: function (last) { return ({ value: nextValue, start: last.start }); } };
+		                hookNode._update({ isForce: true, isSync: true, payLoad: function (last) { return payloadRef.current(last); } });
+		                hookNode.cancel = function () { return payloadRef.current = function (last) { return last; }; };
+		            },
+		        };
 		    }
 		    return hookNode;
 		};
@@ -3562,7 +3783,7 @@ function requireIndex_production_1 () {
 		var enableDebugLog = react.__my_react_shared__.enableDebugLog;
 		var currentHookTreeNode$1 = react.__my_react_internal__.currentHookTreeNode, currentScheduler$7 = react.__my_react_internal__.currentScheduler;
 		var updateHookNode = function (renderDispatch, _a, fiber, isHMR) {
-		    var _b, _c;
+		    var _b, _c, _d;
 		    var type = _a.type, value = _a.value, reducer = _a.reducer, deps = _a.deps;
 		    var renderScheduler = currentScheduler$7.current;
 		    var currentHook = (_b = currentHookTreeNode$1.current) === null || _b === void 0 ? void 0 : _b.value;
@@ -3725,12 +3946,19 @@ function requireIndex_production_1 () {
 		        currentHook.value = value;
 		        if (!Object.is(currentHook.value, currentHook.result)) {
 		            currentHook.cancel = renderScheduler.yieldTask(function triggerHookUpdate() {
-		                currentHook.result = currentHook.value;
-		                currentHook._update({ isForce: true });
+		                currentHook._update({ isForce: true, payLoad: function () { return currentHook.value; } });
 		                currentHook.cancel = null;
 		            });
 		        }
 		    }
+		    if (currentHook.type === myreactSharedExports.HOOK_TYPE.useOptimistic) {
+		        (_d = currentHook.cancel) === null || _d === void 0 ? void 0 : _d.call(currentHook);
+		        currentHook.value = value;
+		        if (!Object.is(currentHook.result.value, value.value)) {
+		            currentHook.result.value = value.value;
+		            // currentHook._update({ isForce: true, payLoad: (last) => ({ value: value.value, start: last.start }) });
+		        }
+		    }
 		    if (currentHook.type === myreactSharedExports.HOOK_TYPE.useDebugValue) {
 		        if (!myreactSharedExports.isArrayEquals(currentHook.value, value)) {
 		            currentHook.value = value;
@@ -3819,13 +4047,15 @@ function requireIndex_production_1 () {
 		    var flag = enableConcurrentMode.current;
 		    var updateState = null;
 		    if (myreactSharedExports.include(fiber.type, exports.NODE_TYPE.__class__)) {
-		        updateState = processClassComponentUpdateQueue(renderDispatch, fiber, flag);
+		        updateState = flag ? processClassComponentUpdateQueueLatest(renderDispatch, fiber, flag) : processClassComponentUpdateQueueLegacy(renderDispatch, fiber);
 		    }
 		    else if (myreactSharedExports.include(fiber.type, exports.NODE_TYPE.__function__)) {
-		        updateState = processFunctionComponentUpdateQueue(renderDispatch, fiber, flag);
+		        updateState = flag
+		            ? processFunctionComponentUpdateQueueLatest(renderDispatch, fiber, flag)
+		            : processFunctionComponentUpdateQueueLegacy(renderDispatch, fiber);
 		    }
 		    else {
-		        updateState = processNormalComponentUpdate(fiber);
+		        updateState = flag ? processNormalComponentUpdateLatest(renderDispatch, fiber) : processNormalComponentUpdateLegacy(renderDispatch, fiber);
 		    }
 		    if (updateState === null || updateState === void 0 ? void 0 : updateState.needUpdate) {
 		        safeCallWithCurrentFiber({
@@ -4216,7 +4446,7 @@ function requireIndex_production_1 () {
 		    return createFiberNode(renderDispatch, { parent: parentFiber }, newChild);
 		};
 		var transformChildrenFiber = function (renderDispatch, parentFiber, children) {
-		    var isUpdate = myreactSharedExports.exclude(parentFiber.state, myreactSharedExports.STATE_TYPE.__create__);
+		    var isUpdate = myreactSharedExports.exclude(parentFiber.state, myreactSharedExports.STATE_TYPE.__create__) && renderDispatch.isAppMounted;
 		    var isHMR = myreactSharedExports.include(parentFiber.state, myreactSharedExports.STATE_TYPE.__hmr__);
 		    var isRetrigger = myreactSharedExports.include(parentFiber.state, myreactSharedExports.STATE_TYPE.__retrigger__);
 		    // is current is retrigger update, skip update children
@@ -4444,7 +4674,7 @@ function requireIndex_production_1 () {
 		        typedElementType._loading = true;
 		        var renderScheduler_1 = currentScheduler$3.current;
 		        renderDispatch.processLazy(typedElementType).then(function () {
-		            fiber.state = myreactSharedExports.STATE_TYPE.__create__;
+		            fiber.state = myreactSharedExports.STATE_TYPE.__recreate__;
 		            typedElementType._list.delete(fiber);
 		            var updater = {
 		                type: myreactSharedExports.UpdateQueueType.lazy,
@@ -5262,67 +5492,12 @@ function requireIndex_production_1 () {
 
 		var currentScheduler$2 = react.__my_react_internal__.currentScheduler;
 		react.__my_react_shared__.enableScopeTreeLog;
-		var defaultDispatchMountLegacy = function (_dispatch, _fiber) {
-		    var mountInsertionEffectList = function (_fiber) {
-		        if (_fiber.child)
-		            mountInsertionEffectList(_fiber.child);
-		        insertionEffect(_dispatch, _fiber);
-		        if (_fiber.sibling)
-		            mountInsertionEffectList(_fiber.sibling);
-		    };
-		    var mountCommit = function (_fiber) {
-		        safeCallWithCurrentFiber({
-		            fiber: _fiber,
-		            action: function safeCallCreateAndUpdate() {
-		                _dispatch.commitCreate(_fiber);
-		                _dispatch.commitUpdate(_fiber);
-		            },
-		        });
-		        if (_fiber.child)
-		            mountCommit(_fiber.child);
-		        safeCallWithCurrentFiber({
-		            fiber: _fiber,
-		            action: function safeCallAppendAndSetRef() {
-		                _dispatch.commitAppend(_fiber);
-		                _dispatch.commitSetRef(_fiber);
-		            },
-		        });
-		        if (_fiber.sibling) {
-		            mountCommit(_fiber.sibling);
-		        }
-		    };
-		    var mountLayoutEffectList = function (_fiber) {
-		        if (_fiber.child)
-		            mountLayoutEffectList(_fiber.child);
-		        layoutEffect(_dispatch, _fiber);
-		        if (_fiber.sibling)
-		            mountLayoutEffectList(_fiber.sibling);
-		    };
-		    var mountEffectList = function (_fiber) {
-		        if (_fiber.child)
-		            mountEffectList(_fiber.child);
-		        effect(_dispatch, _fiber);
-		        if (_fiber.sibling)
-		            mountEffectList(_fiber.sibling);
-		    };
-		    var mountLoop = function (_fiber) {
-		        beforeSyncUpdate();
-		        mountInsertionEffectList(_fiber);
-		        afterSyncUpdate();
-		        mountCommit(_fiber);
-		        beforeSyncUpdate();
-		        mountLayoutEffectList(_fiber);
-		        afterSyncUpdate();
-		        var renderScheduler = currentScheduler$2.current;
-		        renderScheduler.microTask(function invokeEffectList() {
-		            mountEffectList(_fiber);
-		        });
-		    };
-		    mountLoop(_fiber);
-		};
 		var defaultDispatchMountLatest = function (_dispatch, _fiber) {
 		    var _list = generateFiberToMountList(_fiber);
 		    beforeSyncUpdate();
+		    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+		        defaultInvokeUnmountList(_dispatch, _fiber);
+		    });
 		    _list.listToFoot(function invokeInsertionEffectList(_fiber) {
 		        insertionEffect(_dispatch, _fiber);
 		    });
@@ -5516,7 +5691,7 @@ function requireIndex_production_1 () {
 		        promise.status = "pending";
 		        var renderScheduler_1 = currentScheduler.current;
 		        renderDispatch.processPromise(promise).then(function () {
-		            fiber.state = myreactSharedExports.STATE_TYPE.__create__;
+		            fiber.state = myreactSharedExports.STATE_TYPE.__recreate__;
 		            promise._list.delete(fiber);
 		            promise._loading = false;
 		            var updater = {
@@ -5541,7 +5716,7 @@ function requireIndex_production_1 () {
 		        _this.isAppMounted = false;
 		        _this.isAppCrashed = false;
 		        _this.isAppUnmounted = false;
-		        _this.version = "0.3.12";
+		        _this.version = "0.3.14";
 		        _this.mode = "production";
 		        _this.renderMode = "render";
 		        _this.pendingCommitFiberList = null;
@@ -5844,10 +6019,12 @@ function requireIndex_production_1 () {
 		            case myreactSharedExports.HOOK_TYPE.useMemo:
 		            case myreactSharedExports.HOOK_TYPE.useContext:
 		            case myreactSharedExports.HOOK_TYPE.useCallback:
-		            case myreactSharedExports.HOOK_TYPE.useTransition:
 		            case myreactSharedExports.HOOK_TYPE.useDeferredValue:
 		            case myreactSharedExports.HOOK_TYPE.useSyncExternalStore:
 		                return hookNode.result;
+		            case myreactSharedExports.HOOK_TYPE.useOptimistic:
+		            case myreactSharedExports.HOOK_TYPE.useTransition:
+		                return [hookNode.result.value, hookNode.result.start];
 		            case myreactSharedExports.HOOK_TYPE.useSignal:
 		                return [hookNode.result.getValue, hookNode.result.setValue];
 		        }
@@ -5863,7 +6040,7 @@ function requireIndex_production_1 () {
 		    fiber.hookList = fiber.hookList || new myreactSharedExports.ListTree();
 		    var currentHook = null;
 		    // initial
-		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__create__)) {
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__create__ | myreactSharedExports.STATE_TYPE.__recreate__)) {
 		        currentHook = createHookNode(renderDispatch, { type: type, reducer: reducer, value: value, deps: deps }, fiber);
 		        safeCall(function safeCallHookInitialListener() {
 		            var _a, _b;
@@ -5892,12 +6069,10 @@ function requireIndex_production_1 () {
 		    processAsyncLoadListOnSyncMount(renderDispatch);
 		    (function finishMount() {
 		        renderDispatch.reconcileCommit(fiber);
-		        var commitList = renderDispatch.pendingCommitFiberList;
 		        var changedList = renderDispatch.pendingChangedFiberList;
 		        renderDispatch.resetUpdateFlowRuntimeFiber();
 		        renderDispatch.pendingCommitFiberList = null;
 		        renderDispatch.pendingChangedFiberList = null;
-		        (commitList === null || commitList === void 0 ? void 0 : commitList.length) && renderDispatch.reconcileUpdate(commitList);
 		        (changedList === null || changedList === void 0 ? void 0 : changedList.length) &&
 		            safeCallWithCurrentFiber({
 		                fiber: fiber,
@@ -5920,12 +6095,10 @@ function requireIndex_production_1 () {
 		                _a.sent();
 		                (function finishMount() {
 		                    renderDispatch.reconcileCommit(fiber);
-		                    var commitList = renderDispatch.pendingCommitFiberList;
 		                    var changedList = renderDispatch.pendingChangedFiberList;
 		                    renderDispatch.resetUpdateFlowRuntimeFiber();
 		                    renderDispatch.pendingCommitFiberList = null;
 		                    renderDispatch.pendingChangedFiberList = null;
-		                    (commitList === null || commitList === void 0 ? void 0 : commitList.length) && renderDispatch.reconcileUpdate(commitList);
 		                    (changedList === null || changedList === void 0 ? void 0 : changedList.length) &&
 		                        safeCallWithCurrentFiber({
 		                            fiber: fiber,
@@ -5941,7 +6114,7 @@ function requireIndex_production_1 () {
 		    });
 		}); };
 
-		var version = "0.3.12";
+		var version = "0.3.14";
 
 		exports.CustomRenderDispatch = CustomRenderDispatch;
 		exports.MyReactFiberNode = MyReactFiberNode;
@@ -5969,7 +6142,6 @@ function requireIndex_production_1 () {
 		exports.defaultDeleteCurrentEffect = defaultDeleteCurrentEffect;
 		exports.defaultDispatchMount = defaultDispatchMount;
 		exports.defaultDispatchMountLatest = defaultDispatchMountLatest;
-		exports.defaultDispatchMountLegacy = defaultDispatchMountLegacy;
 		exports.defaultDispatchUnmount = defaultDispatchUnmount;
 		exports.defaultDispatchUpdate = defaultDispatchUpdate;
 		exports.defaultGenerateEffectMap = defaultGenerateEffectMap;
@@ -6074,13 +6246,16 @@ function requireIndex_production_1 () {
 		exports.processClassComponentMount = processClassComponentMount;
 		exports.processClassComponentUnmount = processClassComponentUnmount;
 		exports.processClassComponentUpdate = processClassComponentUpdate;
-		exports.processClassComponentUpdateQueue = processClassComponentUpdateQueue;
+		exports.processClassComponentUpdateQueueLatest = processClassComponentUpdateQueueLatest;
+		exports.processClassComponentUpdateQueueLegacy = processClassComponentUpdateQueueLegacy;
 		exports.processConsumer = processConsumer;
 		exports.processFunction = processFunction;
-		exports.processFunctionComponentUpdateQueue = processFunctionComponentUpdateQueue;
+		exports.processFunctionComponentUpdateQueueLatest = processFunctionComponentUpdateQueueLatest;
+		exports.processFunctionComponentUpdateQueueLegacy = processFunctionComponentUpdateQueueLegacy;
 		exports.processHook = processHook;
 		exports.processLazy = processLazy;
-		exports.processNormalComponentUpdate = processNormalComponentUpdate;
+		exports.processNormalComponentUpdateLatest = processNormalComponentUpdateLatest;
+		exports.processNormalComponentUpdateLegacy = processNormalComponentUpdateLegacy;
 		exports.processPromise = processPromise;
 		exports.processProvider = processProvider;
 		exports.processState = processState;
@@ -6332,6 +6507,7 @@ function requireIndex_production () {
 		    HOOK_TYPE[HOOK_TYPE["useInsertionEffect"] = 13] = "useInsertionEffect";
 		    HOOK_TYPE[HOOK_TYPE["useImperativeHandle"] = 14] = "useImperativeHandle";
 		    HOOK_TYPE[HOOK_TYPE["useSyncExternalStore"] = 15] = "useSyncExternalStore";
+		    HOOK_TYPE[HOOK_TYPE["useOptimistic"] = 16] = "useOptimistic";
 		})(exports.HOOK_TYPE || (exports.HOOK_TYPE = {}));
 
 		exports.UpdateQueueType = void 0;
@@ -6360,6 +6536,7 @@ function requireIndex_production () {
 		    STATE_TYPE[STATE_TYPE["__hmr__"] = 256] = "__hmr__";
 		    STATE_TYPE[STATE_TYPE["__retrigger__"] = 512] = "__retrigger__";
 		    STATE_TYPE[STATE_TYPE["__reschedule__"] = 1024] = "__reschedule__";
+		    STATE_TYPE[STATE_TYPE["__recreate__"] = 2048] = "__recreate__";
 		})(exports.STATE_TYPE || (exports.STATE_TYPE = {}));
 
 		exports.PATCH_TYPE = void 0;
@@ -7287,12 +7464,15 @@ var ReconcilerDispatchFiber = function (renderDispatch, fiber) {
     }
 };
 
-var currentScheduler$1 = require$$0.__my_react_internal__.currentScheduler;
+var currentScheduler$2 = require$$0.__my_react_internal__.currentScheduler;
 require$$0.__my_react_shared__.enableScopeTreeLog;
 var ReconcilerDispatchMount = function (_dispatch, _fiber, config) {
     var _list = myreactReconcilerExports.generateFiberToMountList(_fiber);
     var pendingCommitFiberArray = [];
     myreactReconcilerExports.beforeSyncUpdate();
+    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+        myreactReconcilerExports.defaultInvokeUnmountList(_dispatch, _fiber);
+    });
     _list.listToFoot(function invokeInsertionEffectList(_fiber) {
         myreactReconcilerExports.insertionEffect(_dispatch, _fiber);
     });
@@ -7346,7 +7526,7 @@ var ReconcilerDispatchMount = function (_dispatch, _fiber, config) {
         myreactReconcilerExports.layoutEffect(_dispatch, _fiber);
     });
     myreactReconcilerExports.afterSyncUpdate();
-    var renderScheduler = currentScheduler$1.current;
+    var renderScheduler = currentScheduler$2.current;
     renderScheduler.microTask(function invokeEffectListTask() {
         _list.listToFoot(function invokeEffectList(_fiber) {
             myreactReconcilerExports.effect(_dispatch, _fiber);
@@ -7354,6 +7534,106 @@ var ReconcilerDispatchMount = function (_dispatch, _fiber, config) {
     });
 };
 
+var currentScheduler$1 = require$$0.__my_react_internal__.currentScheduler;
+require$$0.__my_react_shared__.enableScopeTreeLog;
+var ReconcilerDispatchUpdate = function (_dispatch, _list, config) {
+    myreactReconcilerExports.beforeSyncUpdate();
+    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.defaultInvokeUnmountList(_dispatch, _fiber);
+        }
+    });
+    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.insertionEffect(_dispatch, _fiber);
+        }
+    });
+    myreactReconcilerExports.afterSyncUpdate();
+    var pendingCreateFiberArray = [];
+    var pendingCommitFiberArray = [];
+    _list.listToFoot(function invokeCreateAndUpdateList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            var beforeHasNode = _fiber.nativeNode;
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallCreateAndUpdate() {
+                    _dispatch.commitCreate(_fiber);
+                    _dispatch.commitUpdate(_fiber);
+                },
+            });
+            var afterHasNode = _fiber.nativeNode;
+            if (!beforeHasNode && afterHasNode) {
+                pendingCreateFiberArray.push(_fiber);
+            }
+        }
+    });
+    _list.listToHead(function invokePositionList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallPosition() {
+                    _dispatch.commitPosition(_fiber);
+                },
+            });
+        }
+    });
+    _list.listToFoot(function invokeAppendList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallAppendList() {
+                    _dispatch.commitAppend(_fiber);
+                },
+            });
+        }
+    });
+    _list.listToFoot(function invokeSetRefList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallSetRefList() {
+                    _dispatch.commitSetRef(_fiber);
+                },
+            });
+        }
+    });
+    pendingCreateFiberArray.forEach(function invokeFinalizeInitialChildren(_fiber) {
+        if (_fiber.nativeNode) {
+            var node = config.getPublicInstance(_fiber.nativeNode);
+            var type = _fiber.elementType;
+            var props = _fiber.pendingProps;
+            var rootContainerInstance = config.getPublicInstance(_dispatch.rootNode);
+            var hostContext = _dispatch.runtimeDom.hostContextMap.get(_fiber.parent || _fiber);
+            if (config.finalizeInitialChildren(node, type, props, rootContainerInstance, hostContext)) {
+                pendingCommitFiberArray.push(_fiber);
+            }
+        }
+    });
+    pendingCommitFiberArray.forEach(function invokeCommitMount(_fiber) {
+        var _a;
+        var node = config.getPublicInstance(_fiber.nativeNode);
+        var type = _fiber.elementType;
+        var props = _fiber.pendingProps;
+        (_a = config.commitMount) === null || _a === void 0 ? void 0 : _a.call(config, node, type, props, _fiber);
+    });
+    myreactReconcilerExports.beforeSyncUpdate();
+    _list.listToFoot(function invokeLayoutEffectList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.layoutEffect(_dispatch, _fiber);
+        }
+    });
+    myreactReconcilerExports.afterSyncUpdate();
+    var renderScheduler = currentScheduler$1.current;
+    // TODO before next update flow, make sure all the effect has done
+    renderScheduler.microTask(function invokeEffectListTask() {
+        _list.listToFoot(function invokeEffectList(_fiber) {
+            if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+                myreactReconcilerExports.effect(_dispatch, _fiber);
+            }
+        });
+    });
+};
+
 require$$0.__my_react_internal__.currentComponentFiber;
 var initialRef = {
     typeForRef: myreactReconcilerExports.NODE_TYPE.__plain__ | myreactReconcilerExports.NODE_TYPE.__class__,
@@ -7424,7 +7704,22 @@ var createDispatch = function (rootNode, rootFiber, rootElement, config) {
         ReconcilerDispatch.prototype.reconcileUpdate = function (_list) {
             var _a, _b;
             (_a = config.prepareForCommit) === null || _a === void 0 ? void 0 : _a.call(config, rootNode);
-            _super.prototype.reconcileUpdate.call(this, _list);
+            var instance = this;
+            myreactReconcilerExports.safeCall(function safeCallBeforeUpdate() {
+                var _a;
+                (_a = instance.beforeUpdate) === null || _a === void 0 ? void 0 : _a.call(instance);
+            });
+            myreactReconcilerExports.safeCall(function safeCallBeforeUpdateListener() {
+                myreactReconcilerExports.listenerMap.get(instance).beforeUpdate.forEach(function (cb) { return cb(); });
+            });
+            ReconcilerDispatchUpdate(this, _list, config);
+            myreactReconcilerExports.safeCall(function safeCallAfterUpdateListener() {
+                myreactReconcilerExports.listenerMap.get(instance).afterUpdate.forEach(function (cb) { return cb(); });
+            });
+            myreactReconcilerExports.safeCall(function safeCallAfterUpdate() {
+                var _a;
+                (_a = instance.afterUpdate) === null || _a === void 0 ? void 0 : _a.call(instance);
+            });
             (_b = config.resetAfterCommit) === null || _b === void 0 ? void 0 : _b.call(config, rootNode);
         };
         ReconcilerDispatch.prototype.patchToFiberInitial = function (_fiber) {
@@ -7515,6 +7810,7 @@ var enableDebugFiled$1 = require$$0.__my_react_shared__.enableDebugFiled, enable
  * @internal
  */
 var prepareScheduler = function () {
+    // enableConcurrentMode.current = false;
     enableDebugFiled$1.current = true;
     enableScopeTreeLog$1.current = true;
     myreactReconcilerExports.enableFiberForLog.current = true;
@@ -7625,7 +7921,7 @@ var Reconciler = function (_config) {
     };
 };
 
-var version = "0.0.3";
+var version = "0.0.5";
 var createReconciler = Reconciler;
 
 exports.createReconciler = createReconciler;