rescript-lang / rescript-lang/rescript
JSX preserve mode generates invalid JSX for external component bindings
Nobody has claimed this yet.
- Dominant language
- OCaml
- Stars
- 7.5k
- Forks
- 485
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 55
Description
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
makefunctions) 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal reproduction, using rescript.json, Preact.res, and Test.res, then run npx rescript build to observe the generated Test.jsx. Trace the compiler's generic JSX preserve handling for external component bindings and add a regression test covering the invalid arrow-function output; done means valid JSX matching the expected SomeLib.Head form.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, ocaml
- Domain
- compilers, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100