Skip to content
Merged
Changes from all commits
Commits
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 packages/yo/src/plopfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ export default function (
);
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};`;
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

批准此修复,但需验证运行时一致性

此更改将标签名中的点号替换为双破折号,这对于 JSX/TypeScript 类型定义是正确的做法,因为对象属性键中的点号在 TypeScript 接口中会导致语法问题。

但请验证以下关键点:

  1. 运行时一致性:确认实际的自定义元素注册也使用 -- 而非 .。类型定义必须与运行时的实际标签名匹配。
  2. 现有文件迁移:检查是否存在使用旧格式(包含点号)的 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 -50

Now I need to examine the plopfile context more carefully to understand whether this is intentional or a breaking bug:

修复 JSX 类型定义中的关键运行时不匹配问题

该修改存在严重的类型/运行时不一致问题,必须立即修复。

根据代码验证,运行时自定义元素使用点号格式注册(如 illustrations.error-messagev2-adapter.load-brickse2e.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.


/** @type {[RegExp, string][]} */
const replacementPatterns = [
Expand Down
Loading