fix(): replace . with -- for tag names in jsx.d.ts #4818
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Walkthrough包 Changes
Estimated code review effort🎯 1 (简单) | ⏱️ ~5 分钟
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
next-core
|
||||||||||||||||||||||||||||
| Project |
next-core
|
| Branch Review |
steve/v3-fix-jsx
|
| Run status |
|
| Run duration | 00m 26s |
| Commit |
|
| Committer | Shenwei Wang |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
17
|
| View all changes introduced in this branch ↗︎ | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to data retention organization setting
📒 Files selected for processing (1)
packages/yo/src/plopfile.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build (20.x)
- GitHub Check: Analyze (javascript-typescript)
| const propName = `${className}Props`; | ||
| const importStatement = `import type { ${className}, ${propName} } from "./${answers.brickName}";`; | ||
| const definitionProp = ` "${tagName}": DetailedHTMLProps<HTMLAttributes<${className}>, ${className}> & ${propName};`; | ||
| const definitionProp = ` "${tagName.replaceAll(".", "--")}": DetailedHTMLProps<HTMLAttributes<${className}>, ${className}> & ${propName};`; |
There was a problem hiding this comment.
🧩 Analysis chain
批准此修复，但需验证运行时一致性
此更改将标签名中的点号替换为双破折号，这对于 JSX/TypeScript 类型定义是正确的做法，因为对象属性键中的点号在 TypeScript 接口中会导致语法问题。
但请验证以下关键点：
- 运行时一致性：确认实际的自定义元素注册也使用
--而非.。类型定义必须与运行时的实际标签名匹配。 - 现有文件迁移：检查是否存在使用旧格式（包含点号）的 jsx.d.ts 文件，以及是否需要迁移计划。
请运行以下脚本验证：
🏁 Script executed:
#!/bin/bash
# 描述：验证 jsx.d.ts 文件中是否存在使用点号格式的旧标签定义
# 搜索 jsx.d.ts 文件中可能包含点号的标签定义
echo "=== 检查现有 jsx.d.ts 文件中的标签定义格式 ==="
fd -e ts -g "jsx.d.ts" --exec rg -n -C2 '"\w+\.\w+":\s*DetailedHTMLProps'
echo ""
echo "=== 搜索自定义元素注册代码以验证实际标签名格式 ==="
# 查找 customElements.define 调用以验证运行时使用的标签名格式
rg -n -C3 'customElements\.define\(' --type=ts --type=js -g '!node_modules'
echo ""
echo "=== 检查是否有使用点号格式标签的 JSX/TSX 代码 ==="
# 搜索可能使用点号格式的 JSX 标签
rg -n '<\w+\.\w+' --type=tsx --type=jsx -g '!node_modules' || echo "未找到使用点号格式的 JSX 标签"Length of output: 20679
Need to examine the plopfile context more carefully:
#!/bin/bash
# Extract context around line 345 in plopfile.js to understand the full logic
head -360 packages/yo/src/plopfile.js | tail -50Now I need to examine the plopfile context more carefully to understand whether this is intentional or a breaking bug:
修复 JSX 类型定义中的关键运行时不匹配问题
该修改存在严重的类型/运行时不一致问题，必须立即修复。
根据代码验证，运行时自定义元素使用点号格式注册（如 illustrations.error-message、v2-adapter.load-bricks、e2e.return-by-timeout），但此修改将生成的 jsx.d.ts 类型定义中的点号转换为双破折号。JSX.IntrinsicElements 中的元素名称属性键必须与实际 JSX 使用的标签名称相匹配，这意味着：
- 生成的类型：
"illustrations--error-message": DetailedHTMLProps... - 运行时标签名：
customElements.define("illustrations.error-message", ...) - JSX 使用：
<illustrations.error-message />无法匹配到类型定义 → TypeScript 类型检查失败
必需操作：
移除 replaceAll(".", "--") 逻辑，保持标签名原样。或确认这仅适用于特定的砖块，而非所有包含点号的标签。
🤖 Prompt for AI Agents
packages/yo/src/plopfile.js around line 345: the current generation replaces
dots in custom element names with double-hyphens (`replaceAll(".", "--")`),
causing a mismatch between runtime-registered tag names (e.g.
"illustrations.error-message") and the keys emitted into JSX.IntrinsicElements,
which breaks TypeScript JSX type resolution; fix by removing the replaceAll call
and emit the tagName verbatim as the JSX.IntrinsicElements key so it exactly
matches the runtime customElements.define name (or, if there is a documented
exception, constrain the replacement only to those specific cases and add a
comment), then run the type checks/tests to verify JSX usage like
<illustrations.error-message /> resolves correctly.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
依赖检查
组件之间的依赖声明，是微服务组件架构下的重要信息，请确保其正确性。
请勾选以下两组选项其中之一：
或者：
提交信息检查
Git 提交信息将决定包的版本发布及自动生成的 CHANGELOG，请检查工作内容与提交信息是否相符，并在以下每组选项中都依次确认。
破坏性变更：
feat作为提交类型。BREAKING CHANGE: 你的变更说明。新特性：
feat作为提交类型。问题修复：
fix作为提交类型。杂项工作：
即所有对下游使用者无任何影响、且没有必要显示在 CHANGELOG 中的改动，例如修改注释、测试用例、开发文档等：
chore,docs,test等作为提交类型。Summary by CodeRabbit
发布说明