feat: 支持3.x的htmlSuffix、dynamicRoot配置 #12400

flgame · 2024-05-16T12:15:22Z

添加htmlSuffix配置，支持生成xxx.html静态文件及路由
添加dynamicRoot配置，支持任意目录部署

Summary by CodeRabbit

新功能
- 添加了静态文件导出功能，包括HTML后缀、动态根目录和哈希选项。
- 新增了React组件HomePage和Page1，提供基本的主页和页面布局。
- 引入了新的CSS和LESS样式文件，分别定义了.bar和.foo等样式。
改进
- 更新了静态文件导出的逻辑，改进了publicPath和资源路径的处理。
- 增强了客户端渲染选项的配置，包括hydrate逻辑。
- 修改了路由配置以支持HTML后缀。

vercel · 2024-05-16T12:15:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
umi	⬜️ Ignored (Inspect)	Visit Preview		May 29, 2024 9:10am

coderabbitai · 2024-05-16T12:15:32Z

Warning

Rate Limit Exceeded

@flgame has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 46 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between d444bd9 and 8d2905b.

Walkthrough

此次更改主要集中在 exportStatic.ts 文件中，增加和修改了多个函数和配置，以支持静态文件导出功能。此外，还在 examples/export-static 目录下添加了新的示例项目文件，包括配置文件、样式文件和 React 组件。

Changes

文件路径	更改摘要
`packages/preset-umi/src/features/exportStatic/exportStatic.ts`	增加了 `isHtmlRoute(route: IRoute)` 和 `getHtmlPath(path: string, htmlSuffix: boolean)` 函数。修改了 `getExportHtmlData(routes: Record<string, IRoute>)` 函数以接受额外参数 `htmlSuffix: boolean`。添加了 `htmlSuffix` 和 `dynamicRoot` 的 schema 属性。更新了与 `publicPath` 处理和资源路径相关的逻辑。
`examples/export-static/.umirc.ts`	添加了用于导出静态文件的配置设置，包含 HTML 后缀、动态根目录和哈希选项。
`examples/export-static/package.json`	定义了 `@example/export-static` 的 `package.json` 文件，包含构建、开发、设置和启动项目的脚本，并指定了 Umi 作为依赖项。
`examples/export-static/src/pages/bar.css`	添加了一个名为 `.bar` 的 CSS 样式定义，背景为绿色。
`examples/export-static/src/pages/foo.less`	添加了 `.foo`、`.foo2` 和 `.foo3` 的样式规则，定义了各自的 CSS 属性。
`examples/export-static/src/pages/index.tsx`	定义了一个 React 功能组件 `HomePage`，渲染一个基本的主页布局，并使用了 `foo.less` 和 `bar.css` 中的样式。
`examples/export-static/src/pages/page1/index.tsx`	导出了一个名为 `Page1` 的 React 功能组件，渲染一个包含 "Page 1" 文本的 `<h1>` 元素。

Poem

代码变更如春风，

静态导出更从容。

新增函数添助力，

配置灵活无穷尽。

示例项目展新颜，

代码世界更美满。

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 82910f9 and 610c5e0.

Files selected for processing (1)

packages/preset-umi/src/features/exportStatic/exportStatic.ts (10 hunks)

Files not reviewed due to errors (1)

packages/preset-umi/src/features/exportStatic/exportStatic.ts (no review received)

packages/preset-umi/src/features/exportStatic/exportStatic.ts

Co-authored-by: Sakina <59400654+fz6m@users.noreply.github.com>

coderabbitai

Actionable comments posted: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 610c5e0 and 7b6bb8f.

Files selected for processing (1)

packages/preset-umi/src/features/exportStatic/exportStatic.ts (10 hunks)

Files skipped from review as they are similar to previous changes (1)

packages/preset-umi/src/features/exportStatic/exportStatic.ts

coderabbitai

Actionable comments posted: 0

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 7b6bb8f and 9d6ce47.

Files selected for processing (1)

packages/preset-umi/src/features/exportStatic/exportStatic.ts (9 hunks)

Files skipped from review as they are similar to previous changes (1)

packages/preset-umi/src/features/exportStatic/exportStatic.ts

flgame · 2024-05-23T09:38:51Z

@fz6m 已解答并修改

fz6m · 2024-05-26T19:14:14Z

默认值要提取出来，因为出现了两处也是出现了，以后再有不同的人维护只会被搞的默认值到处乱飞。
去除 zod 中的 default(false) ，这个地方因为无效，会误导后面维护的人和看代码的人。
这段逻辑分两次 push 吧，在两个 script 里，产物 html 要美丽，不用追求几个字节的压缩，在现代网络的速度面前可读性更重要：
```
  markupArgs.headScripts.unshift(
    `window.routerBase = ${routerBaseStr};if(null == window.publicPath) window.publicPath = ${publicPathStr}`,
  );
```

这段代码需要修改，这不是 java ：

-  if(null == window.publicPath)
+  if(!window.publicPath)

避免 if 后只有一行逻辑可以省略书写区块 {}，只有一行逻辑的话，作用域分不清，这样很难维护，有人不小心加一行就容易出错，改为 if () { ... } 。
当开启 dynamicRoot 时，不开启 runtimePublicPath ，会报错提示 publicPath 是 relative 的，报错消息不明确，需要改善，正确引导和说明。
这段逻辑，应该是有问题的：
```
routerBaseStr = `location.pathname.split('/').slice(0, -${Math.max(
  route.path.split('/').length - 1,
  1,
)}).concat('').join('/')`;
```
假如访问的是 location.pathname 为 /a/b/c ，然后当前路由配为 /c/ ，得到的结果是 /a/ 。

如果这个逻辑很复杂，就不要一行写完，做一个函数去一点点细致的处理，在函数里先清理字符串，再一点点判断出来结果。
api.modifyRoutes 这段逻辑我试了下，并不能达到访问 /a 和 /a.html 一样能访问到路由内容的预期。
使用约定式路由时，开启 dynamicRoot 和 htmlSuffix ，构建后，index.html 里有两段一模一样的 routerBase 逻辑，被重复添加了，可使用 examples/ssr-webpack 尝试。
为确保功能正常，需添加一个 example 到 examples/ 下面，另外需要自测通过以下八种情况：

① 约定式路由，不开启 dynamicRoot 、不开启 htmlSuffix 。
② 约定式路由，开启 dynamicRoot 、不开启 htmlSuffix 。
③ 约定式路由，不开启 dynamicRoot 、开启 htmlSuffix 。
④ 约定式路由，开启 dynamicRoot 、开启 htmlSuffix 。
⑤ 配置式路由，不开启 dynamicRoot 、不开启 htmlSuffix 。
⑥ 配置式路由，开启 dynamicRoot 、不开启 htmlSuffix 。
⑦ 配置式路由，不开启 dynamicRoot 、开启 htmlSuffix 。
⑧ 配置式路由，开启 dynamicRoot 、开启 htmlSuffix 。

其中配置式路由需要自测过带嵌套路由、路径尾部为 / 的路由，路径为空 '' 的路由配置这些情况。

这些 case 不需要逐一放到 example 里，但都需要自测过。

flgame · 2024-05-29T08:41:18Z

@fz6m
1、2、3、4、5、6已修改
7. 是一个错误的用例，pathname后面部分必须和路由匹配，否则在非dynamicRoot场景的生产环境也是无法正常展示的。逻辑部分已优化
8. 新增examples/export-static项目正常访问
对应whistle配置为：

export-static.local/x/y/page1 file:///home/u1/projects/umi/examples/export-static/dist/page1.html resCors://enable
export-static.local/x/y file:///home/u1/projects/umi/examples/export-static/dist resCors://enable

export-static.local/page1 file:///home/u1/projects/umi/examples/export-static/dist/page1.html resCors://enable
export-static.local file:///home/u1/projects/umi/examples/export-static/dist resCors://enable

examples/export-static、examples/ssr-webpack 均未发现重复
已添加 examples/export-static

coderabbitai

Actionable comments posted: 1

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 9d6ce47 and d444bd9.

Files selected for processing (7)

examples/export-static/.umirc.ts (1 hunks)
examples/export-static/package.json (1 hunks)
examples/export-static/src/pages/bar.css (1 hunks)
examples/export-static/src/pages/foo.less (1 hunks)
examples/export-static/src/pages/index.tsx (1 hunks)
examples/export-static/src/pages/page1/index.tsx (1 hunks)
packages/preset-umi/src/features/exportStatic/exportStatic.ts (9 hunks)

Files skipped from review due to trivial changes (5)

examples/export-static/.umirc.ts
examples/export-static/package.json
examples/export-static/src/pages/bar.css
examples/export-static/src/pages/foo.less
examples/export-static/src/pages/page1/index.tsx

Additional comments not posted (6)

examples/export-static/src/pages/index.tsx (1)

23-25: 正确处理了带 .html 后缀和不带后缀的路由，符合PR目标。

packages/preset-umi/src/features/exportStatic/exportStatic.ts (5)

22-40: 此函数用于判断是否应将路由视为HTML路由，逻辑清晰且正确处理了特殊字符和路由类型。

41-48: 此函数正确处理了HTML后缀和特殊路径（如根路径和404路径）。逻辑简洁有效。

52-62: 此函数从路由生成HTML数据，正确使用了 isHtmlRoute 和 getHtmlPath 函数，并特别处理了404路由。

152-153: 配置模式中正确添加了 htmlSuffix 和 dynamicRoot。使用Zod进行验证是一个稳健的选择。

334-349: 路由修改逻辑根据HTML后缀设置复制并修改路由。使用 getHtmlPath 函数调整路由路径，实现与PR目标一致。

examples/export-static/src/pages/index.tsx

flgame · 2024-05-29T11:56:37Z

对于dynamicRoot:true, htmlSuffix: false的场景有点问题，由于/page1 和 /page1/index.html 得到的相对路径不一样，但是又是同一个文件，对于headScripts等脚本路径是编译时确定的，没办法对前面两个路由同时生效。有个解决方案是，将默认的/page1路由修改为/page1/，保证得到的相对路径一致

flgame added 2 commits May 15, 2024 19:27

feat: 支持3.x的htmlSuffix、dynamicRoot配置

2cbc2d7

feat: 支持3.x的htmlSuffix、dynamicRoot配置

610c5e0

coderabbitai bot reviewed May 16, 2024

View reviewed changes

fz6m reviewed May 18, 2024

View reviewed changes

Update packages/preset-umi/src/features/exportStatic/exportStatic.ts

7b6bb8f

Co-authored-by: Sakina <59400654+fz6m@users.noreply.github.com>

coderabbitai bot reviewed May 20, 2024

View reviewed changes

fix: 1. 修改相对路径 2. 兼容现有publicPath配置

9d6ce47

coderabbitai bot reviewed May 20, 2024

View reviewed changes

flgame added 3 commits May 29, 2024 15:37

fix: 代码格式及规范优化

1608aad

feat: 添加htmlSuffix、dynamicRoot的测试demo

0756fe1

fix: runtimePublicPath判断提前，逻辑拆分

d444bd9

coderabbitai bot reviewed May 29, 2024

View reviewed changes

examples/export-static/src/pages/index.tsx Show resolved Hide resolved

feat: examples/export-static补充二级路由示例

8d2905b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 支持3.x的htmlSuffix、dynamicRoot配置 #12400

feat: 支持3.x的htmlSuffix、dynamicRoot配置 #12400

flgame commented May 16, 2024 •

edited by coderabbitai bot

vercel bot commented May 16, 2024 •

edited

coderabbitai bot commented May 16, 2024 •

edited

Rate Limit Exceeded

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

flgame commented May 23, 2024

fz6m commented May 26, 2024

flgame commented May 29, 2024

coderabbitai bot left a comment

flgame commented May 29, 2024

feat: 支持3.x的htmlSuffix、dynamicRoot配置 #12400

Are you sure you want to change the base?

feat: 支持3.x的htmlSuffix、dynamicRoot配置 #12400

Conversation

flgame commented May 16, 2024 • edited by coderabbitai bot

Summary by CodeRabbit

vercel bot commented May 16, 2024 • edited

coderabbitai bot commented May 16, 2024 • edited

Rate Limit Exceeded

Walkthrough

Changes

Poem

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

flgame commented May 23, 2024

fz6m commented May 26, 2024

flgame commented May 29, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

flgame commented May 29, 2024

flgame commented May 16, 2024 •

edited by coderabbitai bot

vercel bot commented May 16, 2024 •

edited

coderabbitai bot commented May 16, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)