Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

JSX preserve mode generates invalid JSX for external component bindings

未关闭
  • 哪里不对？
#8,047 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript, ocaml
领域
compilers, web-dev

调研方向

从链接的最小复现开始，使用 rescript.json、Preact.res 和 Test.res，然后运行 npx rescript build，观察生成的 Test.jsx。追踪编译器针对外部组件绑定的通用 JSX preserve 处理，并添加一个涵盖无效箭头函数输出的回归测试；当生成与预期 SomeLib.Head 形式匹配的有效 JSX 时即完成。

由索引模型根据 Issue 内容生成。

描述

Thank you for filing! Check list:

  • Is it a bug? Usage questions should often be asked in the forum instead.
  • Concise, focused, friendly issue title & description.
  • A minimal, reproducible example.
  • OS and browser versions, if relevant.
  • Is it already fixed in master? Instructions

Summary

When using the generic JSX transform with "preserve": true, external component bindings generate invalid JSX syntax like <prim => Module.Component(prim)> instead of valid JSX.

ReScript Version

12.0.0

Minimal Reproduction

https://github.com/han-tyumi/rescript-jsx-preserve-bug

git clone https://github.com/han-tyumi/rescript-jsx-preserve-bug.git
cd rescript-jsx-preserve-bug
npm install
npx rescript build
cat Test.jsx
Files

rescript.json:

{
  "name": "preserve-bug",
  "sources": ["."],
  "package-specs": {
    "module": "esmodule",
    "in-source": true
  },
  "suffix": ".jsx",
  "jsx": {
    "module": "Preact",
    "preserve": true
  }
}

Preact.res (minimal bindings):

type element
type component<'props> = 'props => element

@module("preact/jsx-runtime")
external jsx: (component<'props>, 'props) => element = "jsx"

@module("preact/jsx-runtime")
external jsxs: (component<'props>, 'props) => element = "jsxs"

type fragmentProps = {children?: element}

@module("preact/jsx-runtime")
external jsxFragment: component<fragmentProps> = "Fragment"

type domProps = {children?: element}

module Elements = {
  external someElement: element => option<element> = "%identity"

  @module("preact/jsx-runtime")
  external jsx: (string, domProps) => element = "jsx"

  @module("preact/jsx-runtime")
  external jsxs: (string, domProps) => element = "jsxs"
}

Test.res:

// Component module pattern with external make
module Head = {
  type props = {children?: Preact.element}
  @module("some-lib")
  external make: props => Preact.element = "Head"
}

// Using the component
let test = <Head> <div /> </Head>

Expected Output

Valid JSX that can be processed by standard JSX transformers:

let test = <SomeLib.Head>
  <div />
</SomeLib.Head>;

Actual Output

Invalid JSX with arrow function syntax:

let test = <prim => SomeLib.Head(prim)>
  {Primitive_option.some(<div />)}
</prim => SomeLib.Head(prim)>;

Notes

  • Lowercase DOM elements work correctly in preserve mode (e.g., <div> stays as <div>)
  • Internal component modules (with ReScript-defined make functions) work correctly (e.g., <MyComponent.make>)
  • External component bindings produce the invalid arrow function syntax shown above

This prevents using preserve mode with frameworks like Preact/Fresh where you need to bind to external components.

主要语言
OCaml
星标
7.5k
派生
485
平均合并
1 天 6 小时
30 天内合并 PR
52

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

rescript-lang/rescript 的其他 Issue

查看 rescript-lang/rescript 的全部 Issue

相似的 Issue

更多 Compilers Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。