Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: replace renderFromRoot config with a special internal flag #12384

Merged
merged 1 commit into from
May 13, 2024
Merged

refactor: replace renderFromRoot config with a special internal flag #12384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/ssr-demo/.umirc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {
scripts: [`https://a.com/b.js`],
ssr: {
builder: 'webpack',
renderFromRoot: false,
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: false,
},
exportStatic: {},
styles: [`body { color: red; }`, `https://a.com/b.css`],
Expand Down
5 changes: 3 additions & 2 deletions packages/preset-umi/src/commands/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,9 @@ umi build --clean
const { vite } = api.args;
const args = await getMarkupArgs({ api });

// renderFromRoot = true, 将 html 中的 title, metas 标签逻辑全部交给 metadataLoader 合并逻辑处理
const markupArgs = api.config.ssr?.renderFromRoot
// __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = true, 将 html 中的 title, metas 标签逻辑全部交给 metadataLoader 合并逻辑处理
const markupArgs = api.config.ssr
?.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
? (omit(args, [
MetadataLoaderOmitKeys.Title,
MetadataLoaderOmitKeys.Meta,
Expand Down
2 changes: 1 addition & 1 deletion packages/preset-umi/src/features/ssr/ssr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default (api: IApi) => {
serverBuildTarget: zod.enum(['express', 'worker']),
platform: zod.string(),
builder: zod.enum(['esbuild', 'webpack']),
renderFromRoot: zod.boolean(),
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: zod.boolean(),
})
.deepPartial();
},
Expand Down
5 changes: 3 additions & 2 deletions packages/preset-umi/src/features/tmpFiles/tmpFiles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,8 @@ if (process.env.NODE_ENV === 'development') {
const umiPluginPath = winPath(join(umiDir, 'client/client/plugin.js'));
const umiServerPath = winPath(require.resolve('@umijs/server/dist/ssr'));

const renderFromRoot = api.config.ssr?.renderFromRoot ?? false;
const __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED =
api.config.ssr?.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ?? false;
const mountElementId = api.config.mountElementId;

const routesWithServerLoader = Object.keys(routes).reduce<
Expand Down Expand Up @@ -537,7 +538,7 @@ if (process.env.NODE_ENV === 'development') {
metas,
scripts: scripts || [],
}),
renderFromRoot,
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
mountElementId,
},
});
Expand Down
2 changes: 1 addition & 1 deletion packages/preset-umi/templates/server.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const createOpts = {
createHistory,
ServerInsertedHTMLContext,
htmlPageOpts: {{{htmlPageOpts}}},
renderFromRoot: {{{renderFromRoot}}},
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {{{__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED}}},
mountElementId: '{{{mountElementId}}}'

};
Expand Down
9 changes: 5 additions & 4 deletions packages/renderer-react/src/browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,9 @@ export type RenderClientOpts = {
*/
rootElement?: HTMLElement;
/**
* ssr 是否从 app root 根节点开始 render
* @doc 默认 false, 从 app root 开始 render，为 true 时从 html 开始
* 内部流程, 渲染特殊 html 节点, 不要使用!!!
*/
renderFromRoot?: boolean;
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: boolean;
Copy link
Contributor

@fz6m fz6m May 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react 19 已经把这个 YOU_WILL_BE_FIRED 改名了，现在叫 _XXX_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE 这种格式，因为这个变量就算命名上有警示，但还是已经被社区到处使用了（特别是某些可视化库），所以逐渐变成了正确的用法，所以事到如今，已经不存在 YOU_WILL_BE_FIRED 了，只是你用了以后就很难升级。

所以不建议再使用 YOU_WILL_BE_FIRED 这种说法了，现在叫 DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE 。

/**
* 当前的路由配置
*/
Expand Down Expand Up @@ -391,7 +390,9 @@ export function renderClient(opts: RenderClientOpts) {
};

ReactDOM.hydrateRoot(
opts.renderFromRoot ? rootElement : document,
opts.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
? rootElement
: document,
<Html {...hydtateHtmloptions}>
<Browser />
</Html>,
Expand Down
58 changes: 40 additions & 18 deletions packages/renderer-react/src/html.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,23 @@ function isUrl(str: string) {
str.startsWith('../')
);
}

const GlobalDataScript = (props: IHtmlProps) => {
const { loaderData, htmlPageOpts, manifest } = props;
return (
<script
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: `window.__UMI_LOADER_DATA__ = ${JSON.stringify(
loaderData || {},
)}; window.__UMI_METADATA_LOADER_DATA__ = ${JSON.stringify(
htmlPageOpts || {},
)}; window.__UMI_BUILD_MANIFEST_DATA__ = ${
JSON.stringify(manifest) || {}
}`,
}}
/>
);
};
function normalizeScripts(script: IScript, extraProps = {}) {
if (typeof script === 'string') {
return isUrl(script)
Expand Down Expand Up @@ -86,17 +102,30 @@ export function Html({
loaderData,
manifest,
htmlPageOpts,
renderFromRoot,
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
mountElementId,
}: React.PropsWithChildren<IHtmlProps>) {
// TODO: 处理 head 标签，比如 favicon.ico 的一致性
// TODO: root 支持配置
if (renderFromRoot) {
if (__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
return (
<>
<HydrateMetadata htmlPageOpts={htmlPageOpts} />
<div id={mountElementId}>{children}</div>
</>
<html>
<head></head>
<body>
<noscript
dangerouslySetInnerHTML={{
__html: `<b>Enable JavaScript to run this app.</b>`,
}}
/>

<div id={mountElementId}>{children}</div>
<GlobalDataScript
manifest={manifest}
loaderData={loaderData}
htmlPageOpts={htmlPageOpts}
/>
</body>
</html>
);
}

Expand Down Expand Up @@ -127,17 +156,10 @@ export function Html({
/>

<div id={mountElementId}>{children}</div>
<script
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: `window.__UMI_LOADER_DATA__ = ${JSON.stringify(
loaderData || {},
)}; window.__UMI_METADATA_LOADER_DATA__ = ${JSON.stringify(
htmlPageOpts || {},
)}; window.__UMI_BUILD_MANIFEST_DATA__ = ${
JSON.stringify(manifest) || {}
}`,
}}
<GlobalDataScript
manifest={manifest}
loaderData={loaderData}
htmlPageOpts={htmlPageOpts}
/>

{htmlPageOpts?.scripts?.map((script: IScript, key: number) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer-react/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export interface ILoaderData {

interface IHtmlHydrateOptions {
htmlPageOpts?: IhtmlPageOpts;
renderFromRoot?: boolean;
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: boolean;
mountElementId?: string;
}

Expand Down
5 changes: 3 additions & 2 deletions packages/server/src/ssr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ interface CreateRequestHandlerOptions extends CreateRequestServerlessOptions {
helmetContext?: any;
ServerInsertedHTMLContext: React.Context<ServerInsertedHTMLHook | null>;
htmlPageOpts: IhtmlPageOpts;
renderFromRoot: boolean;
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: boolean;
mountElementId: string;
}

Expand Down Expand Up @@ -161,7 +161,8 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
manifest,
loaderData,
htmlPageOpts: opts.htmlPageOpts,
renderFromRoot: opts.renderFromRoot,
__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:
opts.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
mountElementId: opts.mountElementId,
};
const element = (await opts.getClientRootComponent(
Expand Down
Loading