From bff5173010606f028b1106f3b72d37b038af5812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BF=A1=E9=91=AB-King?= Date: Wed, 27 Jan 2021 10:00:08 +0800 Subject: [PATCH] fix(ssr): html with single quote parse error (#6066) * fix: ssr html single quote * chore: test * chore: babel parser * chore: test case * chore: test * chore: test * chore: test case * chore: types * chore: test case * chore: test * chore: test * chore: import * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test case * chore: test case * chore: test * chore: test * chore: test * chore: test * chore: test case * chore: test * chore: test --- jest.config.js | 2 +- packages/preset-built-in/package.json | 2 +- .../fixtures/ssr-dynamicImport/pages/Bar.tsx | 2 +- packages/preset-built-in/src/index.test.ts | 5 +-- .../src/plugins/features/ssr/ssr.ts | 3 +- .../templates/renderServer/renderServer.tsx | 2 +- .../plugins/features/ssr/templates/server.tpl | 2 - .../src/renderClient/renderClient.test.tsx | 4 +- .../src/renderClient/renderClient.test.tsx | 4 +- .../src/renderRoutes/renderRoutes.test.tsx | 39 ++----------------- yarn.lock | 8 ++-- 11 files changed, 20 insertions(+), 53 deletions(-) diff --git a/jest.config.js b/jest.config.js index 8f3f4b9b7b11..cb40b493e8db 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,7 @@ module.exports = { // disable css files mock for bundler-webpack's css import tests moduleNameMapper: {}, - transformIgnorePatterns: ['/node_modules/'], + transformIgnorePatterns: ['/node_modules/(?!.*@babel)[^/]+?/'], collectCoverageFrom(memo) { return memo.concat([ // benchmarks diff --git a/packages/preset-built-in/package.json b/packages/preset-built-in/package.json index 0b9a61ded599..ef36320dfc76 100644 --- a/packages/preset-built-in/package.json +++ b/packages/preset-built-in/package.json @@ -29,7 +29,7 @@ "@types/merge-stream": "1.1.2", "@types/multer": "1.4.3", "@types/react-router-config": "5.0.1", - "@types/serialize-javascript": "4.0.0", + "@types/serialize-javascript": "5.0.0", "@umijs/babel-preset-umi": "3.3.7", "@umijs/bundler-webpack": "3.3.7", "@umijs/renderer-mpa": "3.3.7", diff --git a/packages/preset-built-in/src/fixtures/ssr-dynamicImport/pages/Bar.tsx b/packages/preset-built-in/src/fixtures/ssr-dynamicImport/pages/Bar.tsx index 9a88e410955b..41bd3fd93ee3 100644 --- a/packages/preset-built-in/src/fixtures/ssr-dynamicImport/pages/Bar.tsx +++ b/packages/preset-built-in/src/fixtures/ssr-dynamicImport/pages/Bar.tsx @@ -7,7 +7,7 @@ const Bar = props => { ); }; -Bar.getInitialProps = async () => { +Bar.getInitialProps = () => { return { title: 'Bar', }; diff --git a/packages/preset-built-in/src/index.test.ts b/packages/preset-built-in/src/index.test.ts index 48702c7eaa0f..46adf1067f64 100644 --- a/packages/preset-built-in/src/index.test.ts +++ b/packages/preset-built-in/src/index.test.ts @@ -15,9 +15,7 @@ beforeEach(() => { } }); -afterEach(() => { - cleanup(); -}); +afterEach(cleanup); test('api.writeTmpFile error in register stage', async () => { const cwd = join(fixtures, 'api-writeTmpFile'); @@ -394,6 +392,7 @@ xtest('ssr dynamicImport', async () => { 'p__Bar.css': '/p__Bar.chunk.css', }; + // without webpack, so export default const render = require(tmpServerFile).default; // render / const homeResult = await render({ diff --git a/packages/preset-built-in/src/plugins/features/ssr/ssr.ts b/packages/preset-built-in/src/plugins/features/ssr/ssr.ts index 907bb7698a7e..8427631c13f4 100644 --- a/packages/preset-built-in/src/plugins/features/ssr/ssr.ts +++ b/packages/preset-built-in/src/plugins/features/ssr/ssr.ts @@ -1,6 +1,7 @@ import * as fs from 'fs'; import assert from 'assert'; import * as path from 'path'; +import serialize from 'serialize-javascript'; import { performance } from 'perf_hooks'; import { Route } from '@umijs/core'; import { IApi, BundlerConfigType } from '@umijs/types'; @@ -157,7 +158,7 @@ export default (api: IApi) => { ManifestFileName: api.config.manifest ? api.config.manifest.fileName || 'asset-manifest.json' : '', - DEFAULT_HTML_PLACEHOLDER: JSON.stringify(defaultHTML), + DEFAULT_HTML_PLACEHOLDER: serialize(defaultHTML), }), }); diff --git a/packages/preset-built-in/src/plugins/features/ssr/templates/renderServer/renderServer.tsx b/packages/preset-built-in/src/plugins/features/ssr/templates/renderServer/renderServer.tsx index 4df65cb6d9df..f8a59d4500c2 100644 --- a/packages/preset-built-in/src/plugins/features/ssr/templates/renderServer/renderServer.tsx +++ b/packages/preset-built-in/src/plugins/features/ssr/templates/renderServer/renderServer.tsx @@ -65,7 +65,7 @@ export const loadPageGetInitialProps = async ({ ctx, // preload for dynamicImport if (Component?.preload) { const preloadComponent = await Component.preload(); - Component = preloadComponent.default || preloadComponent; + Component = preloadComponent?.default || preloadComponent; } if (Component && (Component as any)?.getInitialProps) { diff --git a/packages/preset-built-in/src/plugins/features/ssr/templates/server.tpl b/packages/preset-built-in/src/plugins/features/ssr/templates/server.tpl index 466106cc25bb..4f4d31184a25 100644 --- a/packages/preset-built-in/src/plugins/features/ssr/templates/server.tpl +++ b/packages/preset-built-in/src/plugins/features/ssr/templates/server.tpl @@ -50,7 +50,6 @@ const render: IServerRender = async (params) => { const history = createMemoryHistory({ initialEntries: [format(location)], }); - /** * beforeRenderServer hook, for polyfill global.* */ @@ -104,7 +103,6 @@ const render: IServerRender = async (params) => { manifest = requireFunc(`./{{{ ManifestFileName }}}`); } catch (_) {} } - // renderServer get rootContainer const { pageHTML, pageInitialProps, routesMatched } = await renderServer(opts); rootContainer = pageHTML; diff --git a/packages/renderer-mpa/src/renderClient/renderClient.test.tsx b/packages/renderer-mpa/src/renderClient/renderClient.test.tsx index 1cb9f1096480..a1e12254ef16 100644 --- a/packages/renderer-mpa/src/renderClient/renderClient.test.tsx +++ b/packages/renderer-mpa/src/renderClient/renderClient.test.tsx @@ -11,11 +11,11 @@ beforeEach(() => { document.body.appendChild(container); }); -afterEach(() => { +afterEach(async () => { document.body.removeChild(container); // @ts-ignore container = null; - cleanup(); + await cleanup(); }); test('normal', () => { diff --git a/packages/renderer-react/src/renderClient/renderClient.test.tsx b/packages/renderer-react/src/renderClient/renderClient.test.tsx index c578cb8e393c..18eedb885e54 100644 --- a/packages/renderer-react/src/renderClient/renderClient.test.tsx +++ b/packages/renderer-react/src/renderClient/renderClient.test.tsx @@ -13,12 +13,12 @@ beforeEach(() => { window.g_initialProps = null; }); -afterEach(() => { +afterEach(async () => { document.body.removeChild(container); container = null; delete window.g_useSSR; delete window.g_initialProps; - cleanup(); + await cleanup(); }); test('normal', async () => { diff --git a/packages/renderer-react/src/renderRoutes/renderRoutes.test.tsx b/packages/renderer-react/src/renderRoutes/renderRoutes.test.tsx index ca3e1e7a826d..39fb0b29438c 100644 --- a/packages/renderer-react/src/renderRoutes/renderRoutes.test.tsx +++ b/packages/renderer-react/src/renderRoutes/renderRoutes.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MemoryRouter, Plugin, Link } from '@umijs/runtime'; -import { getByText, render, screen, waitFor } from '@testing-library/react'; +import { getByText, render, screen, waitFor, cleanup } from '@testing-library/react'; import renderRoutes from './renderRoutes'; import { IRoute } from '..'; @@ -206,9 +206,10 @@ beforeEach(() => { renderCount = 0; }); -afterEach(() => { +afterEach(async () => { delete window.g_useSSR; delete window.g_initialProps; + await cleanup(); }); test('/layout', async () => { @@ -290,38 +291,6 @@ test('/pass-props', async () => { expect((await screen.findByTestId('test')).innerHTML).toEqual('bar'); }); -test('/get-initial-props', async () => { - const newRoutes = renderRoutes(routerConfig); - const { container } = render( - - {newRoutes} - , - ); - await waitFor(() => getByText(container, 'bar')); - expect((await screen.findByTestId('test')).innerHTML).toEqual('bar'); -}); - -test('/get-initial-props-without-unmount', async () => { - const newRoutes = renderRoutes(routerConfig); - const { container } = render( - - {newRoutes} - , - ); - await waitFor(() => getByText(container, 'bar')); - expect((await screen.findByTestId('test2')).innerHTML).toEqual('bar'); - expect(mountCount).toEqual(0); - // hash change - getByText(container, 'link-bar').click(); - expect(mountCount).toEqual(0); - - // change route - getByText(container, 'change-route').click(); - expect(mountCount).toEqual(1); - await waitFor(() => getByText(container, 'bar')); - expect((await screen.findByTestId('test')).innerHTML).toEqual('bar'); -}); - test('/get-initial-props-with-mount', async () => { const newRoutes = renderRoutes(routerConfig); @@ -355,7 +324,7 @@ test('/get-initial-props-embed', async () => { ); }); -test('/wrappers', async () => { +test('/wrappers', () => { const { container } = render( {routes}, ); diff --git a/yarn.lock b/yarn.lock index e6036cc75cc5..f5d2c4789328 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3279,10 +3279,10 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb" integrity sha512-+nVsLKlcUCeMzD2ufHEYuJ9a2ovstb6Dp52A5VsoKxDXgvE051XgHI/33I1EymwkRGQkwnA0LkhnUzituGs4EQ== -"@types/serialize-javascript@4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@types/serialize-javascript/-/serialize-javascript-4.0.0.tgz#ab9c47edf71f6a4590221118d1dffc37b50d71a2" - integrity sha512-y9UO8ozDGF30EVRizmsXuCdZzAxHmYpEEiL+/SQjX+7bnxslkvZQU8rLydixJv7yVae6bWyrNDFHsh6fYHkFMA== +"@types/serialize-javascript@5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@types/serialize-javascript/-/serialize-javascript-5.0.0.tgz#127638567bd9f11251ad0ca2d9d9ea9ce5ca4b93" + integrity sha512-2+ai0/OTduvDzJHRAcqDwgNwshL1TN+iAfjzJJogXPSSjTBuqPl7MI0xGqCcPx+PDFbvmziiK1H6bjDb4DcoSA== "@types/serve-static@*": version "1.13.8"