Skip to content

Commit 61fc97f

Browse files
davesnxdavesnx
authored
Lowercase components have ?key:string (#323)
1 parent 31634d1 commit 61fc97f

File tree

15 files changed

+84
-141
lines changed

15 files changed

+84
-141
lines changed

‎packages/react/src/React.ml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,7 @@ let clone_attributes attributes new_attributes =
453453
|> List.map (fun (_, attrs) -> attrs)
454454
|> List.flatten |> List.rev |> List.sort compare_attribute
455455

456-
let create_element_with_key ?(key = None) tag attributes children =
456+
let create_element_with_key ?key tag attributes children =
457457
match Html.is_self_closing_tag tag with
458458
| true when List.length children > 0 ->
459459
raise (Invalid_children (Printf.sprintf {|"%s" is a self-closing tag and must not have "children".\n|} tag))
@@ -464,7 +464,7 @@ let create_element_with_key ?(key = None) tag attributes children =
464464
| true -> Lower_case_element { key; tag; attributes; children = [] }
465465
| false -> Lower_case_element { key; tag; attributes; children }
466466

467-
let createElement = create_element_with_key ~key:None
467+
let createElement = create_element_with_key ?key:None
468468
let createElementWithKey = create_element_with_key
469469

470470
(* `cloneElement` overrides childrens and props on lower case components, It raises Invalid_argument for the rest.

‎packages/react/src/React.mli‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,7 +594,7 @@ module Fragment : sig
594594
end
595595

596596
val createElement : string -> JSX.prop list -> element list -> element
597-
val createElementWithKey : ?key:string option -> string -> JSX.prop list -> element list -> element
597+
val createElementWithKey : ?key:string -> string -> JSX.prop list -> element list -> element
598598
val fragment : element -> element
599599
val cloneElement : element -> JSX.prop list -> element
600600
val string : string -> element

‎packages/reactDom/test/test_RSC_model.ml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -667,7 +667,7 @@ let client_with_server_children () =
667667

668668
let key_renders_outside_of_props () =
669669
let app =
670-
React.createElementWithKey ~key:(Some "important key") "section"
670+
React.createElementWithKey ~key:"important key" "section"
671671
[ React.JSX.String ("className", "className", "sidebar-header") ]
672672
[ React.createElement "strong" [] [ React.string "React Notes" ] ]
673673
in

‎packages/server-reason-react-ppx/cram/client-component-on-the-server.t/run.t‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -130,24 +130,13 @@
130130
React.Upper_case_component(
131131
Stdlib.__FUNCTION__,
132132
() =>
133-
React.createElementWithKey(
134-
~key=None,
133+
React.createElement(
135134
"section",
136135
[],
137136
[
138-
React.createElementWithKey(
139-
~key=None,
140-
"h1",
141-
[],
142-
[React.string(lola.name)],
143-
),
144-
React.createElementWithKey(
145-
~key=None,
146-
"p",
147-
[],
148-
[React.int(initial)],
149-
),
150-
React.createElementWithKey(~key=None, "div", [], [children]),
137+
React.createElement("h1", [], [React.string(lola.name)]),
138+
React.createElement("p", [], [React.int(initial)]),
139+
React.createElement("div", [], [children]),
151140
switch (maybe_children) {
152141
| Some(children) => children
153142
| None => React.null

‎packages/server-reason-react-ppx/cram/component-definition-at-toplevel.t/run.t‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,7 @@
6262
]),
6363
);
6464
65-
React.createElementWithKey(
66-
~key=None,
65+
React.createElement(
6766
"div",
6867
Stdlib.List.filter_map(
6968
Stdlib.Fun.id,

‎packages/server-reason-react-ppx/cram/component-definition.t/run.t‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
55
let make ?key:(_ : string option) ~lola () =
66
React.Upper_case_component
77
( Stdlib.__FUNCTION__,
8-
fun () ->
9-
React.createElementWithKey ~key:None "div" [] [ React.string lola ] )
8+
fun () -> React.createElement "div" [] [ React.string lola ] )
109
end
1110

1211
let react_component_with_props =
@@ -17,7 +16,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
1716
React.Upper_case_component
1817
( Stdlib.__FUNCTION__,
1918
fun () ->
20-
React.createElementWithKey ~key:None "button"
19+
React.createElement "button"
2120
(Stdlib.List.filter_map Stdlib.Fun.id
2221
[
2322
Some (React.JSX.Ref (buttonRef : React.domRef));
@@ -34,7 +33,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
3433
( Stdlib.__FUNCTION__,
3534
fun () ->
3635
let onClick event = Js.log event in
37-
React.createElementWithKey ~key:None "button"
36+
React.createElement "button"
3837
(Stdlib.List.filter_map Stdlib.Fun.id
3938
[
4039
Some (React.JSX.String ("name", "name", (name : string)));
@@ -54,7 +53,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
5453
React.Upper_case_component
5554
( Stdlib.__FUNCTION__,
5655
fun () ->
57-
React.createElementWithKey ~key:None "div" []
56+
React.createElement "div" []
5857
[ Printf.sprintf "`name` is %s" name |> React.string ] )
5958
end
6059

@@ -66,22 +65,22 @@ We need to output ML syntax here, otherwise refmt could not parse it.
6665
React.Upper_case_component
6766
( Stdlib.__FUNCTION__,
6867
fun () ->
69-
React.createElementWithKey ~key:None "html" []
68+
React.createElement "html" []
7069
[
71-
React.createElementWithKey ~key:None "head" []
70+
React.createElement "head" []
7271
[
73-
React.createElementWithKey ~key:None "title" []
72+
React.createElement "title" []
7473
[ React.string ("SSR React " ^ moreProps) ];
7574
];
76-
React.createElementWithKey ~key:None "body" []
75+
React.createElement "body" []
7776
[
78-
React.createElementWithKey ~key:None "div"
77+
React.createElement "div"
7978
(Stdlib.List.filter_map Stdlib.Fun.id
8079
[
8180
Some (React.JSX.String ("id", "id", ("root" : string)));
8281
])
8382
[ children ];
84-
React.createElementWithKey ~key:None "script"
83+
React.createElement "script"
8584
(Stdlib.List.filter_map Stdlib.Fun.id
8685
[
8786
Some
@@ -98,7 +97,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
9897
React.Upper_case_component
9998
( Stdlib.__FUNCTION__,
10099
fun () ->
101-
React.createElementWithKey ~key:None "div"
100+
React.createElement "div"
102101
(Stdlib.List.filter_map Stdlib.Fun.id
103102
[
104103
Some
@@ -115,7 +114,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
115114
React.Upper_case_component
116115
( Stdlib.__FUNCTION__,
117116
fun () ->
118-
React.createElementWithKey ~key:None "form"
117+
React.createElement "form"
119118
(Stdlib.List.filter_map Stdlib.Fun.id
120119
[
121120
Some (React.JSX.String ("method", "method", ("GET" : string)));
@@ -128,7 +127,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
128127
React.Upper_case_component
129128
( Stdlib.__FUNCTION__,
130129
fun () ->
131-
React.createElementWithKey ~key:None "form"
130+
React.createElement "form"
132131
(Stdlib.List.filter_map Stdlib.Fun.id
133132
[
134133
(match
@@ -151,7 +150,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
151150
React.Upper_case_component
152151
( Stdlib.__FUNCTION__,
153152
fun () ->
154-
React.createElementWithKey ~key:None "form"
153+
React.createElement "form"
155154
(Stdlib.List.filter_map Stdlib.Fun.id
156155
[
157156
(match
@@ -178,7 +177,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
178177
React.Upper_case_component
179178
( Stdlib.__FUNCTION__,
180179
fun () ->
181-
React.createElementWithKey ~key:None "form"
180+
React.createElement "form"
182181
(Stdlib.List.filter_map Stdlib.Fun.id
183182
[
184183
(match
@@ -201,7 +200,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
201200
React.Upper_case_component
202201
( Stdlib.__FUNCTION__,
203202
fun () ->
204-
React.createElementWithKey ~key:None "button"
203+
React.createElement "button"
205204
(Stdlib.List.filter_map Stdlib.Fun.id
206205
[
207206
(match
@@ -228,7 +227,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
228227
React.Upper_case_component
229228
( Stdlib.__FUNCTION__,
230229
fun () ->
231-
React.createElementWithKey ~key:None "button"
230+
React.createElement "button"
232231
(Stdlib.List.filter_map Stdlib.Fun.id
233232
[
234233
(match
@@ -254,15 +253,14 @@ We need to output ML syntax here, otherwise refmt could not parse it.
254253
[ children ] )
255254
end
256255

257-
let a =
258-
Uppercase.make ~children:(React.createElementWithKey ~key:None "div" [] []) ()
256+
let a = Uppercase.make ~children:(React.createElement "div" [] []) ()
259257

260258
module Async_component = struct
261259
let make ?key:(_ : string option) ~children () =
262260
React.Async_component
263261
( Stdlib.__FUNCTION__,
264262
fun () ->
265-
React.createElementWithKey ~key:None "div"
263+
React.createElement "div"
266264
(Stdlib.List.filter_map Stdlib.Fun.id
267265
[
268266
Some
@@ -272,10 +270,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
272270
[ children ] )
273271
end
274272

275-
let a =
276-
Async_component.make
277-
~children:(React.createElementWithKey ~key:None "div" [] [])
278-
()
273+
let a = Async_component.make ~children:(React.createElement "div" [] []) ()
279274

280275
module Sequence = struct
281276
let make ?key:(_ : string option) ~lola () =
@@ -286,8 +281,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
286281
React.useEffect (fun () ->
287282
setState lola;
288283
None);
289-
React.createElementWithKey ~key:None "div" [] [ React.string state ]
290-
)
284+
React.createElement "div" [] [ React.string state ] )
291285
end
292286

293287
module Use_context = struct
@@ -296,6 +290,5 @@ We need to output ML syntax here, otherwise refmt could not parse it.
296290
( Stdlib.__FUNCTION__,
297291
fun () ->
298292
let captured = React.useContext Context.value in
299-
React.createElementWithKey ~key:None "div" []
300-
[ React.string captured ] )
293+
React.createElement "div" [] [ React.string captured ] )
301294
end

‎packages/server-reason-react-ppx/cram/component-defintion-signatures.t/run.t‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
$ ../ppx.sh --output ml input.re
22
module Greeting : sig
3-
val make : ?key:string option -> ?mockup:string -> unit -> React.element
3+
val make : ?key:string -> ?mockup:string -> unit -> React.element
44
end = struct
55
let make ?key:(_ : string option) ?(mockup : string option) () =
66
React.Upper_case_component
77
( Stdlib.__FUNCTION__,
8-
fun () ->
9-
React.createElementWithKey ~key:None "button" []
10-
[ React.string "Hello!" ] )
8+
fun () -> React.createElement "button" [] [ React.string "Hello!" ] )
119
end
1210

1311
module MyPropIsOptionOptionBoolLetWithValSig : sig
14-
val make : ?key:string option -> ?myProp:bool option -> unit -> React.element
12+
val make : ?key:string -> ?myProp:bool option -> unit -> React.element
1513
end = struct
1614
let make ?key:(_ : string option) ?(myProp : bool option option) () =
1715
React.Upper_case_component (Stdlib.__FUNCTION__, fun () -> React.null)

‎packages/server-reason-react-ppx/cram/ensure-attributes-are-present.t/run.t‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
let make ?key:(_ : string option) () =
33
React.Upper_case_component
44
( Stdlib.__FUNCTION__,
5-
fun () ->
6-
React.createElementWithKey ~key:None "div" [] [ React.string "lol" ] )
5+
fun () -> React.createElement "div" [] [ React.string "lol" ] )
76
[@@platform js]

‎packages/server-reason-react-ppx/cram/functor.t/run.t‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ We need to output ML syntax here, otherwise refmt could not parse it.
1313
( Stdlib.__FUNCTION__,
1414
fun () ->
1515
print_endline "This function should be named `Test$Func`" M.x;
16-
React.createElementWithKey ~key:None "div" [] [] )
16+
React.createElement "div" [] [] )
1717
end

‎packages/server-reason-react-ppx/cram/jsx-fragment.t/run.t‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@
77
React.list([foo, React.fragment(React.list([bar, baz]))]),
88
);
99
let nested_fragment_with_lower = foo =>
10-
React.fragment(
11-
React.list([React.createElementWithKey(~key=None, "div", [], [foo])]),
12-
);
10+
React.fragment(React.list([React.createElement("div", [], [foo])]));
1311
module Fragment = {
1412
let make = (~key as _: option(string)=?, ~name="", ()) =>
1513
[@implicit_arity]
@@ -18,8 +16,7 @@
1816
() =>
1917
React.fragment(
2018
React.list([
21-
React.createElementWithKey(
22-
~key=None,
19+
React.createElement(
2320
"div",
2421
[],
2522
[React.string("First " ++ name)],

0 commit comments

Comments
 (0)