diff --git a/packages/myreact-dom/src/client/renderDispatch/instance.ts b/packages/myreact-dom/src/client/renderDispatch/instance.ts index 8c7bd6fa..ed6563cc 100644 --- a/packages/myreact-dom/src/client/renderDispatch/instance.ts +++ b/packages/myreact-dom/src/client/renderDispatch/instance.ts @@ -171,7 +171,11 @@ if (__DEV__) { const re = get(); - re.then((res) => (parse(res), res)).then((res) => unmountFiber(res.__fiber__)); + re.then((res) => (parse(res), res)).then((res) => { + unmountFiber(res.__fiber__); + res.__container__.isAppMounted = false; + res.__container__.isAppUnmounted = true; + }); return re; }, diff --git a/packages/myreact/src/children/feature.ts b/packages/myreact/src/children/feature.ts index 1cdc53de..f2c172a0 100644 --- a/packages/myreact/src/children/feature.ts +++ b/packages/myreact/src/children/feature.ts @@ -9,17 +9,25 @@ export const map = ( arrayLike: MaybeArrayMyReactElementNode, action: (child: MyReactElementNode, index: number, children: ArrayMyReactElementNode) => MyReactElementNode ) => { + if (arrayLike === null) return arrayLike; + return mapByJudge( arrayLike, (v) => v !== undefined && v !== null, (child, index, children) => { const element = action(child, index, children); - return cloneElement(element, { key: typeof element === "object" ? (typeof element?.key === "string" ? `${element.key}` : `.${index}`) : null }); + if (isValidElement(element)) { + return cloneElement(element, { key: typeof element === "object" ? (typeof element?.key === "string" ? `${element.key}` : `.${index}`) : null }); + } else { + return element; + } } ); }; export const toArray = (arrayLike: MaybeArrayMyReactElementNode) => { + if (arrayLike === null) return []; + return mapByJudge( arrayLike, (v) => v !== undefined && v !== null, @@ -31,6 +39,8 @@ export const forEach = ( arrayLike: MaybeArrayMyReactElementNode, action: (child: MyReactElement, index: number, children: ArrayMyReactElementNode) => MyReactElement ) => { + if (arrayLike === null) return arrayLike; + mapByJudge(arrayLike, (v) => v !== undefined && v !== null, action); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43f31838..f94636e6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -824,8 +824,8 @@ importers: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) react-grid-layout: - specifier: ^1.3.4 - version: 1.3.4(react-dom@18.2.0)(react@18.2.0) + specifier: ^1.4.4 + version: 1.4.4(react-dom@18.2.0)(react@18.2.0) react-helmet-async: specifier: ^1.3.0 version: 1.3.0(react-dom@18.2.0)(react@18.2.0) @@ -942,8 +942,8 @@ importers: specifier: ^18.2.7 version: 18.2.7 '@types/react-grid-layout': - specifier: ^1.3.2 - version: 1.3.2 + specifier: ^1.3.5 + version: 1.3.5 '@types/react-resizable': specifier: ^3.0.4 version: 3.0.4 @@ -7394,8 +7394,8 @@ packages: dependencies: '@types/react': 18.2.21 - /@types/react-grid-layout@1.3.2: - resolution: {integrity: sha512-ZzpBEOC1JTQ7MGe1h1cPKSLP4jSWuxc+yvT4TsAlEW9+EFPzAf8nxQfFd7ea9gL17Em7PbwJZAsiwfQQBUklZQ==} + /@types/react-grid-layout@1.3.5: + resolution: {integrity: sha512-WH/po1gcEcoR6y857yAnPGug+ZhkF4PaTUxgAbwfeSH/QOgVSakKHBXoPGad/sEznmkiaK3pqHk+etdWisoeBQ==} dependencies: '@types/react': 18.2.21 dev: true @@ -10334,6 +10334,10 @@ packages: /fast-diff@1.2.0: resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==} + /fast-equals@4.0.3: + resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==} + dev: false + /fast-folder-size@2.2.0: resolution: {integrity: sha512-7VsTlT/ELl5OQ4fnckM3idvaUkdJxf6VaYn0sC43GWoRmKqvbGfpoyC4BC/imTd9CEZtlfNsEf8/ZqdfoU4Nwg==} hasBin: true @@ -11921,10 +11925,6 @@ packages: /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} - /lodash.isequal@4.5.0: - resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} - dev: false - /lodash.memoize@4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} dev: false @@ -13731,19 +13731,20 @@ packages: use-sidecar: 1.1.2(@types/react@18.2.21)(react@18.2.0) dev: false - /react-grid-layout@1.3.4(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==} + /react-grid-layout@1.4.4(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==} peerDependencies: react: '>= 16.3.0' react-dom: '>= 16.3.0' dependencies: - clsx: 1.2.1 - lodash.isequal: 4.5.0 + clsx: 2.0.0 + fast-equals: 4.0.3 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-draggable: 4.4.5(react-dom@18.2.0)(react@18.2.0) react-resizable: 3.0.5(react-dom@18.2.0)(react@18.2.0) + resize-observer-polyfill: 1.5.1 dev: false /react-helmet-async@1.3.0(react-dom@18.2.0)(react@18.2.0): @@ -14288,6 +14289,10 @@ packages: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} dev: false + /resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} diff --git a/ui/ssr-example/package.json b/ui/ssr-example/package.json index 71962123..095ac1d6 100644 --- a/ui/ssr-example/package.json +++ b/ui/ssr-example/package.json @@ -41,7 +41,7 @@ "pino-pretty": "^10.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-grid-layout": "^1.3.4", + "react-grid-layout": "^1.4.4", "react-helmet-async": "^1.3.0", "react-icons": "^4.10.1", "react-intl": "^6.4.4", @@ -82,7 +82,7 @@ "@types/node": "^20.5.7", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@types/react-grid-layout": "^1.3.2", + "@types/react-grid-layout": "^1.3.5", "@types/react-resizable": "^3.0.4", "@types/webpack-env": "^1.18.1", "cross-env": "^7.0.3", diff --git a/ui/ssr-example/src/server/middleware/renderPage/native/renderPipeStreamSSR.tsx b/ui/ssr-example/src/server/middleware/renderPage/native/renderPipeStreamSSR.tsx index 3673d670..a8c0a1e2 100644 --- a/ui/ssr-example/src/server/middleware/renderPage/native/renderPipeStreamSSR.tsx +++ b/ui/ssr-example/src/server/middleware/renderPage/native/renderPipeStreamSSR.tsx @@ -66,6 +66,7 @@ export const targetRender: SafeAction = async ({ req, res, store, lang, env, ass onShellError(err) { error = true; if (!initial) { + initial = true; if (!env.isSTATIC) { // Something errored before we could complete the shell so we fallback to client render targetCSRRender({ req, res, store, lang, env, assets }); @@ -78,6 +79,7 @@ export const targetRender: SafeAction = async ({ req, res, store, lang, env, ass onError(err) { error = true; if (!initial) { + initial = true; if (!env.isSTATIC) { // not set header, so we can safe to fallback to client render targetCSRRender({ req, res, store, lang, env, assets });