Skip to content

Fix jsx completion for abstract Jsx.component #8526

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.

Sign up for GitHub

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

Draft
aspeddro wants to merge 2 commits into
base: master
Choose a base branch
from
+92 −63
Draft

Fix jsx completion for abstract Jsx.component #8526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eaa5407
Fix jsx completion for abstract Jsx.component
aspeddro Aug 3, 2026
0a140c3
format
aspeddro Aug 3, 2026
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@

#### :bug: Bug fix

- Fix JSX prop completions in editor analysis for components backed by abstract `Jsx.component` values. https://github.com/rescript-lang/rescript/pull/8390
- Preserve multibyte characters when wrapping long source lines in compiler code frames. https://github.com/rescript-lang/rescript/pull/8520

#### :memo: Documentation
Expand Down
55 changes: 26 additions & 29 deletions analysis/src/completion_jsx.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,42 +231,39 @@ let get_jsx_labels ~component_path ~find_type_of_value ~package ~state =
(name, t, env))
| _ -> []
in
let is_component_path path =
match Path.last path with
| "component" -> true
| _ -> false
in
let is_component_like_path path =
match Path.last path with
| "componentLike" -> true
| _ -> false
in
let rec get_props_type (t : Types.type_expr) =
match t.desc with
| Tlink t1 | Tsubst t1 | Tpoly (t1, []) -> get_props_type t1
| Tconstr (path, type_args, _) -> Some (path, type_args)
| _ -> None
in
let rec get_labels (t : Types.type_expr) =
match t.desc with
| Tlink t1 | Tsubst t1 | Tpoly (t1, []) -> get_labels t1
| Tconstr (p, [props_type], _) when Path.name p = "React.component" -> (
let rec get_props_type (t : Types.type_expr) =
match t.desc with
| Tlink t1 | Tsubst t1 | Tpoly (t1, []) -> get_props_type t1
| Tconstr (path, type_args, _) when Path.last path = "props" ->
Some (path, type_args)
| _ -> None
in
| Tconstr (p, [props_type], _) when is_component_path p -> (
match props_type |> get_props_type with
| Some (path, type_args) -> get_fields ~path ~type_args
| None -> [])
| Tarrow
({lbl = Nolabel; typ = {desc = Tconstr (path, type_args, _)}}, _, _, _)
when Path.last path = "props" ->
get_fields ~path ~type_args
| Tconstr (cl_path, [{desc = Tconstr (path, type_args, _)}; _], _)
when Path.name cl_path = "React.componentLike"
&& Path.last path = "props" ->
(* JSX V4 external or interface *)
get_fields ~path ~type_args
| Tarrow ({lbl = Nolabel; typ}, _, _, _) -> (
(* Component without the JSX PPX, like a make fn taking a hand-written
type props. *)
let rec dig_to_constr typ =
match typ.Types.desc with
| Tlink t1 | Tsubst t1 | Tpoly (t1, []) -> dig_to_constr t1
| Tconstr (path, type_args, _) when Path.last path = "props" ->
Some (path, type_args)
| _ -> None
in
match dig_to_constr typ with
| None -> []
| Some (path, type_args) -> get_fields ~path ~type_args)
match typ |> get_props_type with
| Some (path, type_args) -> get_fields ~path ~type_args
| None -> [])
| Tconstr (cl_path, [props_type; _], _)
when is_component_like_path cl_path -> (
(* JSX V4 external or interface *)
match props_type |> get_props_type with
| Some (path, type_args) -> get_fields ~path ~type_args
| None -> [])
| _ -> []
in
typ |> get_labels
Expand Down
11 changes: 11 additions & 0 deletions tests/analysis_tests/tests/src/CompletionJsx.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,20 @@ module Info = {
}
}

module DomPropsComponent = {
@react.componentWithProps
let make = (props: JsxDOM.domProps) => {
ignore(props)
React.null
}
}

// <Info _type={#warning} >
// ^com

// <DomPropsComponent onClick=>
// ^com


// let _ = <p>{"".s}</p>
// ^com
88 changes: 54 additions & 34 deletions tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1035,20 +1035,40 @@ Path MultiPropComp.make
}
]

Complete src/CompletionJsx.res 89:26
posCursor:[89:26] posNoWhite:[89:24] Found expr:[89:3->89:27]
JSX <Info:[89:4->89:8] _type[89:9->89:14]=...[89:16->89:24]> _children:None
Complete src/CompletionJsx.res 97:26
posCursor:[97:26] posNoWhite:[97:24] Found expr:[97:3->97:27]
JSX <Info:[97:4->97:8] _type[97:9->97:14]=...[97:16->97:24]> _children:None
Completable: Cjsx([Info], "", [_type])
Package opens Stdlib.place holder Pervasives.JsxModules.place holder
Resolved opens 1 Stdlib
Path Info.make
[ { "detail": "string", "kind": 4, "label": "key", "tags": [] } ]

Complete src/CompletionJsx.res 93:19
posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:11->93:24]
JSX <p:[93:12->93:13] > _children:93:15
posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:15->93:19]
Pexp_field [93:15->93:17] s:[93:18->93:19]
Complete src/CompletionJsx.res 100:30
posCursor:[100:30] posNoWhite:[100:29] Found expr:[100:3->100:31]
JSX <DomPropsComponent:[100:4->100:21] onClick[100:22->100:29]=...[100:22->100:29]> _children:None
Completable: Cexpression CJsxPropValue [DomPropsComponent] onClick
Package opens Stdlib.place holder Pervasives.JsxModules.place holder
Resolved opens 1 Stdlib
ContextPath CJsxPropValue [DomPropsComponent] onClick
Path DomPropsComponent.make
[
{
"detail": "JsxEvent.Mouse.t => unit",
"insertText": "{${1:event} => ${0:event}}",
"insertTextFormat": 2,
"kind": 12,
"label": "event => event",
"sortText": "A",
"tags": []
}
]

Complete src/CompletionJsx.res 104:19
posCursor:[104:19] posNoWhite:[104:18] Found expr:[104:11->104:24]
JSX <p:[104:12->104:13] > _children:104:15
posCursor:[104:19] posNoWhite:[104:18] Found expr:[104:15->104:19]
Pexp_field [104:15->104:17] s:[104:18->104:19]
Completable: Cpath string.s
Package opens Stdlib.place holder Pervasives.JsxModules.place holder
Resolved opens 1 Stdlib
Expand All @@ -1064,8 +1084,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1086,8 +1106,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1107,8 +1127,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1128,8 +1148,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1149,8 +1169,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1171,8 +1191,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1192,8 +1212,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1213,8 +1233,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1235,8 +1255,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1256,8 +1276,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1277,8 +1297,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1298,8 +1318,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand All @@ -1319,8 +1339,8 @@ Path s
{
"newText": "",
"range": {
"end": { "character": 18, "line": 93 },
"start": { "character": 17, "line": 93 }
"end": { "character": 18, "line": 104 },
"start": { "character": 17, "line": 104 }
}
}
],
Expand Down
Loading