diff --git a/__tests__/testInput.html b/__tests__/testInput.html index 1ed8d041..5b75f5b9 100644 --- a/__tests__/testInput.html +++ b/__tests__/testInput.html @@ -26,6 +26,7 @@ setStr(e.target.value)} /> + Pick a fruit: diff --git a/__tests__/testUnmount.html b/__tests__/testUnmount.html index d7bd1dac..231966f1 100644 --- a/__tests__/testUnmount.html +++ b/__tests__/testUnmount.html @@ -50,9 +50,18 @@ return A {children} } const B = ({ children }) => { + const ref = useRef(); + useUnmount(() => console.log('b unmount')); - return B {children} + useUnmount(() => { + console.log('dom unmount?', document.body.contains(ref.current)) + setTimeout(() => { + console.log('settimeout dom unmount?', document.body.contains(ref.current)) + }) + }) + + return B {children} } const C = ({ children }) => { useUnmount(() => console.log('c unmount')); diff --git a/packages/myreact-dom/src/client/api/helper/attr/setAttr.ts b/packages/myreact-dom/src/client/api/helper/attr/setAttr.ts index 1ed1eb93..e3ece385 100644 --- a/packages/myreact-dom/src/client/api/helper/attr/setAttr.ts +++ b/packages/myreact-dom/src/client/api/helper/attr/setAttr.ts @@ -78,6 +78,9 @@ export const setAttribute = (fiber: MyReactFiberNode, el: HTMLElement, name: str if (el.nodeName === "INPUT" && attrKey === "autofocus") { requestAnimationFrame(() => el.focus()); } + if (el.nodeName === "TEXTAREA" && attrKey === "autofocus") { + requestAnimationFrame(() => el.focus()); + } } } } catch (e) { diff --git a/packages/myreact-dom/src/client/renderDispatch/instance.ts b/packages/myreact-dom/src/client/renderDispatch/instance.ts index 4da7378d..fd3a1745 100644 --- a/packages/myreact-dom/src/client/renderDispatch/instance.ts +++ b/packages/myreact-dom/src/client/renderDispatch/instance.ts @@ -174,7 +174,7 @@ if (__DEV__) { const re = get(); re.then((res) => (parse(res), res)).then((res) => { - unmountFiber(res.__fiber__); + unmountFiber(res.__container__.rootFiber); res.__container__.isAppMounted = false; res.__container__.isAppUnmounted = true; }); diff --git a/packages/myreact-dom/src/client/renderPlatform/feature.ts b/packages/myreact-dom/src/client/renderPlatform/feature.ts index 7e5664b3..32b8f004 100644 --- a/packages/myreact-dom/src/client/renderPlatform/feature.ts +++ b/packages/myreact-dom/src/client/renderPlatform/feature.ts @@ -54,9 +54,9 @@ export const prepareRenderPlatform = () => { renderPlatform = currentRenderPlatform.current as DomPlatform; - if (__DEV__ && renderPlatform.isServer) { - console.warn(`[@my-react/react-dom] current environment is server, please use 'renderToString' instead of 'render'`); - } + // if (__DEV__ && renderPlatform.isServer) { + // console.warn(`[@my-react/react-dom] current environment is server, please use 'renderToString' instead of 'render'`); + // } renderPlatform.isServer = false; diff --git a/packages/myreact-dom/src/client/tools/unmountComponentAtNode.ts b/packages/myreact-dom/src/client/tools/unmountComponentAtNode.ts index 8d551d71..3b760c75 100644 --- a/packages/myreact-dom/src/client/tools/unmountComponentAtNode.ts +++ b/packages/myreact-dom/src/client/tools/unmountComponentAtNode.ts @@ -10,10 +10,10 @@ import type { RenderContainer } from "@my-react-dom-client/mount"; const { currentRenderPlatform } = __my_react_internal__; export const unmountComponentAtNode = (container: RenderContainer) => { - const fiber = container.__fiber__; - const renderDispatch = container.__container__; + const fiber = renderDispatch.rootFiber; + const renderPlatform = currentRenderPlatform.current as CustomRenderPlatform; if (!fiber || !renderDispatch || !(fiber instanceof MyReactFiberNode) || !(renderDispatch instanceof ClientDomDispatch)) { diff --git a/packages/myreact-dom/src/server/renderPlatform/feature.ts b/packages/myreact-dom/src/server/renderPlatform/feature.ts index fc398fdc..078fe673 100644 --- a/packages/myreact-dom/src/server/renderPlatform/feature.ts +++ b/packages/myreact-dom/src/server/renderPlatform/feature.ts @@ -57,9 +57,9 @@ export const prepareRenderPlatform = () => { renderPlatform = currentRenderPlatform.current as DomPlatform; - if (__DEV__ && !renderPlatform.isServer) { - console.warn(`[@my-react/react-dom] current environment is not server, please use 'render' instead of 'renderToString'`); - } + // if (__DEV__ && !renderPlatform.isServer) { + // console.warn(`[@my-react/react-dom] current environment is not server, please use 'render' instead of 'renderToString'`); + // } renderPlatform.isServer = true; diff --git a/packages/myreact-dom/src/shared/debug.ts b/packages/myreact-dom/src/shared/debug.ts index 00537f60..a612d24c 100644 --- a/packages/myreact-dom/src/shared/debug.ts +++ b/packages/myreact-dom/src/shared/debug.ts @@ -16,16 +16,7 @@ import { HighLight, debounce } from "@my-react-dom-client/tools"; import { latestNoopRender, legacyNoopRender } from "@my-react-dom-noop/mount/render"; import { PlainElement, ContainerElement, CommentStartElement } from "@my-react-dom-server/api"; - -import { - enableControlComponent, - enableDOMField, - enableEventSystem, - enableEventTrack, - enableHighlight, - enableHighlightWarn, - isServer, -} from "./env"; +import { enableControlComponent, enableDOMField, enableEventSystem, enableEventTrack, enableHighlight, enableHighlightWarn, isServer } from "./env"; import { getFiberWithNativeDom } from "./getFiberWithDom"; import type { LikeJSX } from "@my-react/react"; @@ -128,7 +119,11 @@ export const prepareDevContainer = (renderDispatch: ClientDomDispatch) => { if (!isValidElement(element)) return; - const renderDispatch = getCurrentDispatchFromFiber(this) as ClientDomDispatch | ServerDomDispatch | LegacyServerStreamDispatch | LatestServerStreamDispatch; + const renderDispatch = getCurrentDispatchFromFiber(this) as + | ClientDomDispatch + | ServerDomDispatch + | LegacyServerStreamDispatch + | LatestServerStreamDispatch; const get = async () => { if (renderDispatch.enableASyncHydrate) { @@ -157,7 +152,7 @@ export const prepareDevContainer = (renderDispatch: ClientDomDispatch) => { const re = get(); re.then((res) => (parse(res), res)).then((res) => { - unmountFiber(res.__fiber__); + unmountFiber(res.__container__.rootFiber); res.__container__.isAppMounted = false; res.__container__.isAppUnmounted = true; }); @@ -172,11 +167,9 @@ export const prepareDevContainer = (renderDispatch: ClientDomDispatch) => { * @internal */ export const checkRehydrate = (container: Partial) => { - const rootFiber = container.__fiber__; - const rootContainer = container.__container__; - if (rootFiber instanceof MyReactFiberNode || rootContainer instanceof ClientDomDispatch) { + if (rootContainer instanceof ClientDomDispatch) { throw new Error(`[@my-react/react-dom] hydrate error, current container have been hydrated`); } };