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.

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

feat: 支持htmlSuffix、dynamicRoot #12496

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

flgame
Copy link

@flgame flgame commented Jun 26, 2024

公司好几个项目升级umi4.x需要用到,希望能支持 #12301

  1. htmlSuffix: 会生成 xxx.html静态文件及路由,非xxx/index.html
  2. dynamicRoot: 可不用做任何修改部署在任意目录下

有一点需要说明的是
dynamicRoot 为新增配置,原publicPath: './'相对路径的方式也是有问题的,使用当前规则没问题。
对于dynamicRoot:true, htmlSuffix: false的场景,由于/page1 和 /page1/index.html 得到的相对路径不一样,但是又是同一个文件,对于headScripts等脚本路径是编译时确定的,没办法对前面两个路由同时生效。

  • { dynamicRoot:true, htmlSuffix: true }使用 /page1、/page1.html 访问

  • { dynamicRoot:true, htmlSuffix: false }使用 /page1/、/page1/index.html 访问

已添加examples/export-static项目,且测试以下场景都正常:
① 约定式路由,不开启 dynamicRoot 、不开启 htmlSuffix 。
② 约定式路由,开启 dynamicRoot 、不开启 htmlSuffix 。
③ 约定式路由,不开启 dynamicRoot 、开启 htmlSuffix 。
④ 约定式路由,开启 dynamicRoot 、开启 htmlSuffix 。
⑤ 配置式路由,不开启 dynamicRoot 、不开启 htmlSuffix 。
⑥ 配置式路由,开启 dynamicRoot 、不开启 htmlSuffix 。
⑦ 配置式路由,不开启 dynamicRoot 、开启 htmlSuffix 。
⑧ 配置式路由,开启 dynamicRoot 、开启 htmlSuffix 。

使用Whistle测试,对应htmlSuffix: true配置:

^export-static.local/x/y/page1$ file:///home/user1/projects/umi/examples/export-static/dist/page1.html resCors://enable
^export-static.local/x/y/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1.html resCors://enable
export-static.local/x/y file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

^export-static.local/page1$ file:///home/user1/projects/umi/examples/export-static/dist/page1.html resCors://enable
^export-static.local/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1.html resCors://enable
export-static.local file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

htmlSuffix: false配置:

^export-static.local/x/y/page1/$ file:///home/user1/projects/umi/examples/export-static/dist/page1/index.html resCors://enable
^export-static.local/x/y/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1/index.html resCors://enable
export-static.local/x/y file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

^export-static.local/page1/$ file:///home/user1/projects/umi/examples/export-static/dist/page1/index.html resCors://enable
^export-static.local/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1/index.html resCors://enable
export-static.local file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

之前的PR已关闭,感谢 @fz6m 的修改意见,详见:#12400

Summary by CodeRabbit

  • 新功能

    • 添加了导出静态文件的配置,支持 HTML 后缀、动态根路径和哈希处理。
    • 新增了 404 页面和其他示例页面,包括主页、Page 1、Page 1-1。
  • 样式

    • 增加了 .bar 类的绿色背景样式。
    • 添加了 .foo.foo2.foo3 类的颜色、字体大小和字体粗细样式。
  • 文档

    • 更新了 package.json 文件,增加了构建、开发、设置和启动项目的脚本配置。

htmlSuffix 会生成 xxx.html,非xxx/index.html
dynamicRoot可不用做任何修改部署在任意目录下
Copy link

vercel bot commented Jun 26, 2024

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

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
umi ⬜️ Ignored (Inspect) Visit Preview Jul 12, 2024 1:49am

Copy link

coderabbitai bot commented Jun 26, 2024

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

此次变更引入了针对静态文件导出的配置,包括HTML后缀、动态根路径和散列处理的设置。新增和修改的文件涵盖了页面组件、样式文件及核心控制逻辑,优化了静态导出功能的处理流程。

Changes

文件路径 变更摘要
examples/export-static/.umirc.ts 新增导出静态文件的配置,包含HTML后缀、动态根路径及散列的设定。
examples/export-static/package.json 新增了项目构建、开发、初始化和启动的脚本配置,及Umi相关依赖。
examples/export-static/src/pages/404.tsx
examples/export-static/src/pages/page1/index.tsx
examples/export-static/src/pages/page1/page1_1/index.tsx
添加了新的React功能组件用于显示页面内容,例如404页面和其他具体页面。
examples/export-static/src/pages/bar.css
examples/export-static/src/pages/foo.less
新增CSS和Less样式文件,定义了页面元素的样式规则。
examples/export-static/src/pages/index.tsx 增加了主页的React功能组件,使用Helmet进行文档头管理,并包含多个设置了CSS模块的链接。
packages/preset-umi/src/features/exportStatic/exportStatic.ts 进行了核心逻辑和控制流程的修改,引入了多个函数例如isHtmlRoutegetHtmlPath,并增加了对公共路径和资源的处理。

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.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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 743ec08 and b04143c.

Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
Files selected for processing (9)
  • examples/export-static/.umirc.ts (1 hunks)
  • examples/export-static/package.json (1 hunks)
  • examples/export-static/src/pages/404.tsx (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)
  • examples/export-static/src/pages/page1/page1_1/index.tsx (1 hunks)
  • packages/preset-umi/src/features/exportStatic/exportStatic.ts (8 hunks)
Files skipped from review due to trivial changes (7)
  • examples/export-static/.umirc.ts
  • examples/export-static/package.json
  • examples/export-static/src/pages/404.tsx
  • examples/export-static/src/pages/bar.css
  • examples/export-static/src/pages/foo.less
  • examples/export-static/src/pages/page1/index.tsx
  • examples/export-static/src/pages/page1/page1_1/index.tsx
Additional context used
Biome
packages/preset-umi/src/features/exportStatic/exportStatic.ts

[error] 92-92: The regular expression includes this negated empty character class. (lint/correctness/noEmptyCharacterClassInRegex)

Negated empty character classes match anything.
If you want to match against [, escape it [.
Otherwise, remove the character class or fill it.


[error] 92-92: The regular expression includes this negated empty character class. (lint/correctness/noEmptyCharacterClassInRegex)

Negated empty character classes match anything.
If you want to match against [, escape it [.
Otherwise, remove the character class or fill it.


[error] 94-94: The regular expression includes this negated empty character class. (lint/correctness/noEmptyCharacterClassInRegex)

Negated empty character classes match anything.
If you want to match against [, escape it [.
Otherwise, remove the character class or fill it.


[error] 355-355: Can't assign key because it's a constant (lint/correctness/noConstAssign)

This is where the variable is defined as constant

Unsafe fix: Replace const with let if you assign it to a new value.

Additional comments not posted (2)
examples/export-static/src/pages/index.tsx (1)

9-34: 代码审查:确保链接的正确性

这个 HomePage 组件中包含了多个链接,指向不同的页面。由于引入了 htmlSuffix 功能,需要确保这些链接在启用 htmlSuffix 时仍然有效。建议添加单元测试来验证这些链接在不同配置下的行为。

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

Line range hint 171-362: 验证动态根路径和 HTML 后缀的处理

modifyExportHTMLFiles 函数中,处理了动态根路径和 HTML 后缀的逻辑。需要验证这些逻辑是否正确处理了所有边界情况,特别是在复杂的路由配置中。

Verification successful

验证动态根路径和 HTML 后缀的处理

代码逻辑正确处理了动态根路径和 HTML 后缀,包括路径调整和必要的断言,确保在复杂路由配置中也能正常工作。

  • 处理相对路径 publicPathdynamicRoot 的逻辑
  • 确保在需要时启用 runtimePublicPath
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# 检查动态根路径和 HTML 后缀的处理是否正确
rg --type ts "dynamicRoot" packages/preset-umi/src/features/exportStatic/exportStatic.ts

Length of output: 424



Script:

#!/bin/bash
# Extract the relevant code blocks around each occurrence of `dynamicRoot` for detailed review

# Extract 10 lines before and after the first occurrence
rg --type ts -A 10 -B 10 "dynamicRoot: zod.boolean()" packages/preset-umi/src/features/exportStatic/exportStatic.ts

# Extract 10 lines before and after the second occurrence
rg --type ts -A 10 -B 10 "exportStatic: { htmlSuffix, dynamicRoot }" packages/preset-umi/src/features/exportStatic/exportStatic.ts

# Extract 10 lines before and after the third occurrence
rg --type ts -A 10 -B 10 "publicPath.startsWith('.') || dynamicRoot" packages/preset-umi/src/features/exportStatic/exportStatic.ts

# Extract 10 lines before and after the fourth occurrence
rg --type ts -A 10 -B 10 "'`runtimePublicPath` should be enable when `publicPath` is relative or `exportStatic.dynamicRoot` is true!'" packages/preset-umi/src/features/exportStatic/exportStatic.ts

Length of output: 12138

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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 b04143c and 80945b5.

Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
Files selected for processing (1)
  • packages/preset-umi/src/features/exportStatic/exportStatic.ts (7 hunks)
Additional context used
Biome
packages/preset-umi/src/features/exportStatic/exportStatic.ts

[error] 328-328: Can't assign key because it's a constant

This is where the variable is defined as constant

Unsafe fix: Replace const with let if you assign it to a new value.

(lint/correctness/noConstAssign)

Additional comments not posted (3)
packages/preset-umi/src/features/exportStatic/exportStatic.ts (3)

41-47: 代码逻辑清晰,路径处理正确。


Line range hint 52-73: 对于静态文件路径的处理符合新功能的要求。


136-137: 新配置项添加正确,符合功能需求。

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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 80945b5 and 00f9074.

Files selected for processing (1)
  • packages/preset-umi/src/features/exportStatic/exportStatic.ts (7 hunks)
Files skipped from review as they are similar to previous changes (1)
  • packages/preset-umi/src/features/exportStatic/exportStatic.ts

@zhoukang0807
Copy link

这个feat啥时候才能合并呢

@lcynnn435
Copy link

急需这个功能.非常好用

@303182519
Copy link

这个feat啥时候才能合并呢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants