{
15 | dispatch @@
16 | React.Event.Mouse.(Clicked(event |> clientX, event |> clientY))
17 | }}>
18 | {"Hello" |> React.string}
19 | {"Pos: "
20 | ++ String.concat(
21 | "\n",
22 | state
23 | |> List.map(((x, y)) =>
24 | string_of_int(x) ++ ", " ++ string_of_int(y)
25 | ),
26 | )
27 | |> React.string}
28 |
;
29 | };
30 |
--------------------------------------------------------------------------------
/example/src/Code.re:
--------------------------------------------------------------------------------
1 | open Js_of_ocaml;
2 | open React.Dom.Dsl;
3 | open Html;
4 |
5 | [@react.component]
6 | let make = (~text) => {
7 | let codeRef = React.use_ref(Js.null);
8 | React.use_effect_always(() => {
9 | switch (codeRef |> React.Ref.current |> Js.Opt.to_option) {
10 | | Some(el) => Js.Unsafe.global##.Prism##highlightElement(el)
11 | | None => ()
12 | };
13 | None;
14 | });
15 |
16 |
17 | {text |> React.string}
18 |
19 | ;
20 | };
21 |
--------------------------------------------------------------------------------
/example/src/EffectsAndState.re:
--------------------------------------------------------------------------------
1 | open Bindings;
2 | open React.Dom.Dsl;
3 | open Html;
4 |
5 | type action =
6 | | Increment
7 | | Decrement;
8 |
9 | let reducer = (state, action) =>
10 | switch (action) {
11 | | Increment => state + 1
12 | | Decrement => state - 1
13 | };
14 |
15 | let space = {
16 | " " |> React.string;
17 | };
18 |
19 | [@react.component]
20 | let make = (~name="Billy", ~children=?) => {
21 | let (count, setCount) = React.use_state(() => 0);
22 | let (state, dispatch) = React.use_reducer(~init=() => 0, reducer);
23 |
24 |
25 |
;
52 | };
53 |
--------------------------------------------------------------------------------
/example/src/Events.re:
--------------------------------------------------------------------------------
1 | open Bindings;
2 | open React.Dom.Dsl;
3 | open Html;
4 |
5 | type coords = {
6 | x: int,
7 | y: int,
8 | };
9 |
10 | module Title = {
11 | [@react.component]
12 | let make = (~children) => {
13 | 27 | {"Hello from EffectsAndState component, " ++ name ++ "!" |> React.string} 28 |
29 | 36 | space 37 | 40 | space 41 | {string_of_int(state) |> React.string} 42 | space 43 | 46 | space 47 | {switch (children) { 48 | | Some(c) => c
49 | | None => React.null
50 | }}
51 | children
; 14 | }; 15 | }; 16 | 17 | [@react.component] 18 | let make = () => { 19 | let (coords, setCoords) = React.use_state(() => {x: 0, y: 0}); 20 | let (inputText, setInputText) = React.use_state(() => ""); 21 |
22 |
;
72 | };
73 |
--------------------------------------------------------------------------------
/example/src/HelloWorldOCaml.ml:
--------------------------------------------------------------------------------
1 | open React.Dom.Dsl
2 | open Html
3 |
4 | let%component make () =
5 | fragment
6 | [ a
7 | [| href "https://github.com/jchavarri/jsoo-react-realworld-example-app"
8 | ; target "_blank"
9 | |]
10 | [ i [| className "ion-social-github" |] []; string "Fork on GitHub" ]
11 | ; footer [||]
12 | [ div
13 | [| className "container" |]
14 | [ span
15 | [| className "attribution" |]
16 | [ string "An interactive learning project from "
17 | ; a [| href "https://thinkster.io" |] [ string "Thinkster" ]
18 | ; string ". Code & design licensed under MIT."
19 | ]
20 | ]
21 | ]
22 | ]
23 |
--------------------------------------------------------------------------------
/example/src/HelloWorldReason.re:
--------------------------------------------------------------------------------
1 | open React.Dom.Dsl;
2 | open Html;
3 |
4 | [@react.component]
5 | let make = () => {
6 | {"text input via \"onChange\"" |> React.string}
23 | { 25 | let value = React.Event.Form.target(event) |> Window.value; 26 | setInputText(_ => value); 27 | }} 28 | value=inputText 29 | /> 30 |{"form submission via \"onSubmit\"" |> React.string}
31 | 53 |{"mouse movement via \"onMouseMove\"" |> React.string}
54 |
55 | 
{
58 | let (x, y) =
59 | React.Event.Mouse.(screen_x(event), screen_y(event));
60 | setCoords(_ => {{x, y}});
61 | }}
62 | />
63 |
71 | {
58 | let (x, y) =
59 | React.Event.Mouse.(screen_x(event), screen_y(event));
60 | setCoords(_ => {{x, y}});
61 | }}
62 | />
63 |
64 | {string_of_int(coords.x)
65 | ++ "px / "
66 | ++ string_of_int(coords.y)
67 | ++ "px"
68 | |> React.string}
69 |
70 | {"Hello World from Reason" |> React.string}
;
7 | };
8 |
--------------------------------------------------------------------------------
/example/src/Interface.re:
--------------------------------------------------------------------------------
1 | open React.Dom.Dsl;
2 | open Html;
3 |
4 | let s = React.string;
5 |
6 | [@react.component]
7 | let make = (~title, ~children) => {
8 | ...{[ {title |> s} , ...children]}
;
9 | };
10 |
--------------------------------------------------------------------------------
/example/src/Interface.rei:
--------------------------------------------------------------------------------
1 | let make:
2 | (~title: string, ~children: list(React.element), ~key: string=?, unit) =>
3 | React.element;
4 |
--------------------------------------------------------------------------------
/example/src/Main.re:
--------------------------------------------------------------------------------
1 | open React.Dom.Dsl;
2 | open Html;
3 |
4 | let s = React.string;
5 |
6 | type example = {
7 | path: string,
8 | title: string,
9 | element: React.element,
10 | code: React.element,
11 | showTitle: bool,
12 | };
13 |
14 | let firstExample = {
15 | path: "hello-world-ocaml",
16 | title: "Hello World OCaml",
17 | element: {"EffectsAndState component:" |> s}
44 |{"UseEffect component:" |> s}
46 |
62 |
,
64 | code:
78 | {"Interface" |> s}
79 |
,
83 | showTitle: false,
84 | },
85 | {
86 | path: "bindings",
87 | title: "Bindings to JavaScript code",
88 | element:
89 | 90 | {"Bindings can be written easily by using " |> s} 91 | 92 | {"gen_js_api" |> s} 93 | 94 | {"." |> s} 95 |
, 96 | code:
105 | {"You have seen the embedded code snippets in the examples. The one below is from the Main component of this page."
106 | |> s}
107 | {"Interface.re" |> s}
108 | {"." |> s}
109 |
111 | {"These snippets always stay in sync with the code itself. The strings from the files get captured at compile time via a "
112 | |> s}
113 |
116 | {"ppx" |> s}
117 |
118 | {" (preprocessor extension) that is called " |> s}
119 |
120 | {"ppx_blob" |> s}
121 |
122 | {" by calling " |> s}
123 | {"
124 | {". Then, we just pass that string to a component " |> s}
125 | " |> s} {"Code" |> s}
126 | {"." |> s}
127 |
129 | {"Here is the implementation of" |> s}
130 | {"Code.re" |> s}
131 | {":" |> s}
132 |
144 |
;
191 | };
192 |
--------------------------------------------------------------------------------
/example/src/Refs.re:
--------------------------------------------------------------------------------
1 | open Bindings;
2 | open Js_of_ocaml;
3 | open React.Dom.Dsl;
4 | open Html;
5 |
6 | module FancyLink = {
7 | [@react.component]
8 | let make =
9 | React.Dom.forward_ref((~href, ~repo, ref) =>
10 | {repo |> React.string}
11 | );
12 | };
13 |
14 | [@react.component]
15 | let make = () => {
16 | let (show, setShow) = React.use_state(() => true);
17 | /* You can now get a ref directly to the DOM button: */
18 | let ref =
19 | React.Dom.Ref.callback_dom_ref(ref => {
20 | Console.log(Js.string("Ref is:"));
21 | Console.log(ref);
22 | });
23 | <>
24 |
30 | {show
31 | ?
145 |
166 | {"jsoo-react" |> s}
146 | 165 |
167 |
190 |
168 | {let example =
169 | examples
170 | |> List.find_opt(e => {
171 | e.path
172 | == (
173 | List.length(url.path) > 0
174 | ? List.nth_opt(url.path, List.length(url.path) - 1)
175 | |> Option.value(~default="")
176 | : ""
177 | )
178 | })
179 | |> Option.value(~default=firstExample);
180 |
189 |
181 |
}
188 | {example.title |> s}
182 | {example.showTitle 183 | ?{"Rendered component" |> s}
: React.null} 184 | {example.element} 185 |{"Code" |> s}
186 | {example.code} 187 |39 | {"Open the console to see the value of the ref changing." |> React.string} 40 |
41 | ; 42 | }; 43 | -------------------------------------------------------------------------------- /example/src/UseEffect.re: -------------------------------------------------------------------------------- 1 | open Bindings; 2 | open React.Dom.Dsl; 3 | open Html; 4 | 5 | [@react.component] 6 | let make = (~count) => { 7 | open Js_of_ocaml_lwt; 8 | React.use_effect1( 9 | () => { 10 | open Lwt; 11 | open Lwt_js; 12 | bind( 13 | sleep(1.), 14 | () => { 15 | Console.log( 16 | "count changed 1 sec ago! Value is: " ++ string_of_int(count), 17 | ); 18 | return(); 19 | }, 20 | ) 21 | |> ignore; 22 | Some( 23 | () => 24 | Console.log( 25 | "Unmounting effect for value: " ++ string_of_int(count), 26 | ), 27 | ); 28 | }, 29 | [|count|], 30 | ); 31 | 32 | React.use_effect_always( 33 | ~before_render=true, 34 | () => { 35 | Console.log("use_layout_effect: component updated"); 36 | None; 37 | }, 38 | ); 39 | 40 |
41 | {"UseEffect: printing delayed counts on the console since 2019 :)"
42 | |> React.string}
43 |
;
44 | };
45 |
--------------------------------------------------------------------------------
/example/src/WebComponent.ml:
--------------------------------------------------------------------------------
1 | open React.Dom.Dsl
2 | open Html
3 |
4 | let oslo_polygon =
5 | {|{
6 | "type": "Feature",
7 | "geometry": {
8 | "type": "Polygon",
9 | "coordinates": [
10 | [
11 | [
12 | 10.489165172838884,
13 | 60.017259872374645
14 | ],
15 | [
16 | 10.580764868996987,
17 | 60.0762384207017
18 | ],
19 | [
20 | 10.592122568549627,
21 | 60.09394183519897
22 | ],
23 | [
24 | 10.572782530207661,
25 | 60.11678480264957
26 | ],
27 | [
28 | 10.600720249305056,
29 | 60.13160981872188
30 | ],
31 | [
32 | 10.68031961054535,
33 | 60.13353032001292
34 | ],
35 | [
36 | 10.73711867703991,
37 | 60.125733600579316
38 | ],
39 | [
40 | 10.78802079942288,
41 | 60.06755422118711
42 | ],
43 | [
44 | 10.819765048019693,
45 | 60.064296771632726
46 | ],
47 | [
48 | 10.811720634337512,
49 | 60.02561911878851
50 | ],
51 | [
52 | 10.876109308200913,
53 | 59.98547372050647
54 | ],
55 | [
56 | 10.933734244914053,
57 | 59.97416166211912
58 | ],
59 | [
60 | 10.951389441905969,
61 | 59.94924298867558
62 | ],
63 | [
64 | 10.914816194580183,
65 | 59.91161920924281
66 | ],
67 | [
68 | 10.907158498257449,
69 | 59.869893465966655
70 | ],
71 | [
72 | 10.933102370207493,
73 | 59.83659145034232
74 | ],
75 | [
76 | 10.936527591798225,
77 | 59.831669697457514
78 | ],
79 | [
80 | 10.88029688872709,
81 | 59.81138930328435
82 | ],
83 | [
84 | 10.770788935602035,
85 | 59.82510863617183
86 | ],
87 | [
88 | 10.744019668227386,
89 | 59.83928320264522
90 | ],
91 | [
92 | 10.73100663891497,
93 | 59.877178566827084
94 | ],
95 | [
96 | 10.658082484659966,
97 | 59.884410483442366
98 | ],
99 | [
100 | 10.632783389561938,
101 | 59.915118906971855
102 | ],
103 | [
104 | 10.63388386110467,
105 | 59.95342058502221
106 | ],
107 | [
108 | 10.610456248652959,
109 | 59.97660952873646
110 | ],
111 | [
112 | 10.55585521816055,
113 | 59.99672657430896
114 | ],
115 | [
116 | 10.518070354830757,
117 | 59.999291170702094
118 | ],
119 | [
120 | 10.489165172838884,
121 | 60.017259872374645
122 | ]
123 | ]
124 | ]
125 | },
126 | "properties": {
127 | "kommunenummer": "0301",
128 | "objtype": "Kommune",
129 | "lokalid": "173018",
130 | "oppdateringsdato": null,
131 | "datauttaksdato": "20191220110355",
132 | "versjonid": "4.1",
133 | "opphav": null,
134 | "samiskforvaltningsomrade": false,
135 | "datafangstdato": null,
136 | "navnerom": "http://skjema.geonorge.no/SOSI/produktspesifikasjon/AdmEnheter/4.1",
137 | "navn": [
138 | {
139 | "rekkefolge": "",
140 | "sprak": "nor",
141 | "navn": "Oslo"
142 | }
143 | ]
144 | }
145 | }|}
146 |
147 | let%component make () =
148 | h "leafy-map" [||]
149 | [ h "leafy-feature-group"
150 | Prop.[| bool "zoom-to-fit" true |]
151 | [ h "leafy-geojson"
152 | Prop.
153 | [| string "data" oslo_polygon
154 | ; string "fill" "forestgreen"
155 | ; string "stroke" "#006400"
156 | ; int "stroke-wdith" 1
157 | |]
158 | []
159 | ; h "leafy-marker"
160 | Prop.
161 | [| string "lat" "59.9147857"
162 | ; string "lng" "10.7470423"
163 | ; string "tooltip" "Hello Oslo!"
164 | |]
165 | []
166 | ]
167 | ]
168 |
--------------------------------------------------------------------------------
/example/src/dune:
--------------------------------------------------------------------------------
1 | (executables
2 | (names App)
3 | (modes js)
4 | (libraries gen_js_api lwt js_of_ocaml-lwt react)
5 | (js_of_ocaml
6 | (javascript_files static-requires.js))
7 | (preprocess
8 | (pps gen_js_api.ppx ppx_blob js_of_ocaml-ppx jsoo_react_ppx)))
9 |
10 | (rule
11 | (targets Bindings.ml)
12 | (deps Bindings.rei)
13 | (action
14 | (progn
15 | (with-stdout-to
16 | Bindings.ml.tmp
17 | (run %{bin:refmt} --parse=re -i true --print=ml %{deps}))
18 | (run %{bin:gen_js_api} -o %{targets} Bindings.ml.tmp))))
19 |
20 | (alias
21 | (name default)
22 | (deps App.js static/primitive.css static/prism.css static/prism.js))
23 |
--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {React.string("Hello " ++ name)}
7 | Js_of_ocaml.Js.Opt.to_option}>
54 | {React.string("ForwardRef")}
55 |
56 | );
57 | };
58 |
59 | module Memo = {
60 | [@react.component]
61 | let make =
62 | React.memo((~a) => {
63 | {Printf.sprintf("`a` is %s", a) |> React.string}
64 | });
65 | };
66 |
67 | module MemoCustomCompareProps = {
68 | [@react.component]
69 | let make =
70 | React.memo(
71 | ~compare=(prevPros, nextProps) => false,
72 | (~a) => {
73 | {Printf.sprintf("`a` is %d", a) |> React.string}
74 | },
75 | );
76 | };
77 |
78 | let fragment = foo => [@bla] <> foo ;
79 |
80 | let polyChildrenFragment = (foo, bar) => <> foo bar ;
81 |
82 | let nestedFragment = (foo, bar, baz) => <> foo <> bar baz ;
83 |
84 | let upper =
101 |
;
123 |
124 | let lowerWithChildrenComplex2 =
125 |
102 |
122 | {"jsoo-react" |> s}
103 | 121 |
126 |
;
143 |
144 | let nestedElement =
127 | {let example =
128 | examples
129 | |> List.find_opt(e => {
130 | e.path
131 | == (List.nth_opt(url.path, 0) |> Option.value(~default=""))
132 | })
133 | |> Option.value(~default=firstExample);
134 |
142 |
135 |
}
141 | {example.title |> s}
136 |{"Rendered component" |> s}
137 | {example.element} 138 |{"Code" |> s}
139 | {example.code} 140 |")}
149 | />;
150 | // TODO: fix this test (are these components deprecated??)
151 | // let nestedElementCustomName = ;
159 |
160 | let t = ;
161 |
162 | [@react.component]
163 | let make =
164 | React.Dom.forward_ref((~children, ref) => {
165 |
166 | });
167 |
168 | let testAttributes =
169 |
...{[ {title |> s} , ...children]}
;
156 | };
157 |
158 | let t =
170 |
171 | 
172 |
175 |
;
176 |
177 | let randomElement =
172 | {Printf.sprintf("`name` is %s", name) |> React.string}
;
187 | };
188 |
--------------------------------------------------------------------------------
/ppx/test/main.ml:
--------------------------------------------------------------------------------
1 | open Ppxlib
2 |
3 | (* To run as a standalone binary, run the registered drivers *)
4 | let () = Driver.standalone ()
5 |
--------------------------------------------------------------------------------
/ppx/test/pp_errors_01_external_component_multi_prim.expected:
--------------------------------------------------------------------------------
1 | File "input_errors_01_external_component_multi_prim.ml", line 1, characters 0-79:
2 | 1 | external%component make : name:Js.js_string Js.t -> React.element = "foo" "bar"
3 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | Error: jsoo-react: externals only allow single primitive declarations
5 |
--------------------------------------------------------------------------------
/ppx/test/pp_errors_02_external_component_unlabelled_arg.expected:
--------------------------------------------------------------------------------
1 | File "input_errors_02_external_component_unlabelled_arg.ml", line 1, characters 26-43:
2 | 1 | external%component make : Js.js_string Js.t -> React.element = "foo"
3 | ^^^^^^^^^^^^^^^^^
4 | Error: jsoo-react: externals only allow labelled or optional labelled arguments
5 |
--------------------------------------------------------------------------------
/ppx/test/pp_ocaml.expected:
--------------------------------------------------------------------------------
1 | let rec pp_user = 2
2 | type t = string[@@foo external f : int]
3 | let make =
4 | let make_props
5 | : ?name:'name ->
6 | ?key:string ->
7 | unit ->
8 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
9 | Js_of_ocaml.Js.t
10 | =
11 | fun ?name ->
12 | fun ?key ->
13 | fun () ->
14 | let open Js_of_ocaml.Js.Unsafe in
15 | obj
16 | [|("key",
17 | (inject
18 | (Js_of_ocaml.Js.Optdef.option
19 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
20 | ("name", (inject name))|][@@merlin.hide ] in
21 | let make =
22 | ((fun ?(name= "") ->
23 | (div [||] [React.string ("Hello " ^ name)] : React.element))
24 | [@warning "-16"]) in
25 | ((let make
26 | (Props :
27 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
28 | Js_of_ocaml.Js.t)
29 | =
30 | make
31 | ?name:((fun (type res) ->
32 | fun (type a0) ->
33 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
34 | fun
35 | (_ :
36 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
37 | -> (Js_of_ocaml.Js.Unsafe.get a0 "name" : res))
38 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#name)) in
39 | fun ?name ->
40 | fun ?key ->
41 | fun () -> React.create_element make (make_props ?key ?name ()))
42 | [@merlin.hide ])
43 | let make =
44 | let make_props
45 | : children:'children ->
46 | ?key:string ->
47 | unit ->
48 | < children: 'children Js_of_ocaml.Js.readonly_prop >
49 | Js_of_ocaml.Js.t
50 | =
51 | fun ~children ->
52 | fun ?key ->
53 | fun () ->
54 | let open Js_of_ocaml.Js.Unsafe in
55 | obj
56 | [|("key",
57 | (inject
58 | (Js_of_ocaml.Js.Optdef.option
59 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
60 | ("children", (inject children))|][@@merlin.hide ] in
61 | let make =
62 | ((fun ~children:(first, second) ->
63 | (div [||] [first; second] : React.element))
64 | [@warning "-16"]) in
65 | ((let make
66 | (Props :
67 | < children: 'children Js_of_ocaml.Js.readonly_prop >
68 | Js_of_ocaml.Js.t)
69 | =
70 | make
71 | ~children:((fun (type res) ->
72 | fun (type a0) ->
73 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
74 | fun
75 | (_ :
76 | a0 ->
77 | < get: res ;.. > Js_of_ocaml.Js.gen_prop)
78 | ->
79 | (Js_of_ocaml.Js.Unsafe.get a0 "children" :
80 | res)) (Props : < .. > Js_of_ocaml.Js.t)
81 | (fun x -> x#children)) in
82 | fun ~children ->
83 | fun ?key ->
84 | fun () -> React.create_element make (make_props ?key ~children ()))
85 | [@merlin.hide ])
86 | let make =
87 | let make_props
88 | : children:'children ->
89 | ?key:string ->
90 | unit ->
91 | < children: 'children Js_of_ocaml.Js.readonly_prop >
92 | Js_of_ocaml.Js.t
93 | =
94 | fun ~children ->
95 | fun ?key ->
96 | fun () ->
97 | let open Js_of_ocaml.Js.Unsafe in
98 | obj
99 | [|("key",
100 | (inject
101 | (Js_of_ocaml.Js.Optdef.option
102 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
103 | ("children", (inject children))|][@@merlin.hide ] in
104 | let make = ((fun ~children:kids -> (div [||] kids : React.element))
105 | [@warning "-16"]) in
106 | ((let make
107 | (Props :
108 | < children: 'children Js_of_ocaml.Js.readonly_prop >
109 | Js_of_ocaml.Js.t)
110 | =
111 | make
112 | ~children:((fun (type res) ->
113 | fun (type a0) ->
114 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
115 | fun
116 | (_ :
117 | a0 ->
118 | < get: res ;.. > Js_of_ocaml.Js.gen_prop)
119 | ->
120 | (Js_of_ocaml.Js.Unsafe.get a0 "children" :
121 | res)) (Props : < .. > Js_of_ocaml.Js.t)
122 | (fun x -> x#children)) in
123 | fun ~children ->
124 | fun ?key ->
125 | fun () -> React.create_element make (make_props ?key ~children ()))
126 | [@merlin.hide ])
127 | let make =
128 | let make_props
129 | : children:'children ->
130 | ?key:string ->
131 | unit ->
132 | < children: 'children Js_of_ocaml.Js.readonly_prop >
133 | Js_of_ocaml.Js.t
134 | =
135 | fun ~children ->
136 | fun ?key ->
137 | fun () ->
138 | let open Js_of_ocaml.Js.Unsafe in
139 | obj
140 | [|("key",
141 | (inject
142 | (Js_of_ocaml.Js.Optdef.option
143 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
144 | ("children", (inject children))|][@@merlin.hide ] in
145 | let make =
146 | ((fun ~children:(first, second) ->
147 | fun () -> (div [||] [first; second] : React.element))
148 | [@warning "-16"]) in
149 | ((let make
150 | (Props :
151 | < children: 'children Js_of_ocaml.Js.readonly_prop >
152 | Js_of_ocaml.Js.t)
153 | =
154 | make
155 | ~children:((fun (type res) ->
156 | fun (type a0) ->
157 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
158 | fun
159 | (_ :
160 | a0 ->
161 | < get: res ;.. > Js_of_ocaml.Js.gen_prop)
162 | ->
163 | (Js_of_ocaml.Js.Unsafe.get a0 "children" :
164 | res)) (Props : < .. > Js_of_ocaml.Js.t)
165 | (fun x -> x#children)) () in
166 | fun ~children ->
167 | fun ?key ->
168 | fun () -> React.create_element make (make_props ?key ~children ()))
169 | [@merlin.hide ])
170 | let make =
171 | let make_props
172 | : ?name:'name ->
173 | ?key:string ->
174 | unit ->
175 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
176 | Js_of_ocaml.Js.t
177 | =
178 | fun ?name ->
179 | fun ?key ->
180 | fun () ->
181 | let open Js_of_ocaml.Js.Unsafe in
182 | obj
183 | [|("key",
184 | (inject
185 | (Js_of_ocaml.Js.Optdef.option
186 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
187 | ("name", (inject name))|][@@merlin.hide ] in
188 | let make = ((fun ?(name= "") -> (div [||] [name] : React.element))
189 | [@warning "-16"]) in
190 | ((let make
191 | (Props :
192 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
193 | Js_of_ocaml.Js.t)
194 | =
195 | make
196 | ?name:((fun (type res) ->
197 | fun (type a0) ->
198 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
199 | fun
200 | (_ :
201 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
202 | -> (Js_of_ocaml.Js.Unsafe.get a0 "name" : res))
203 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#name)) in
204 | fun ?name ->
205 | fun ?key ->
206 | fun () -> React.create_element make (make_props ?key ?name ()))
207 | [@merlin.hide ])
208 | let make =
209 | let make_props : ?key:string -> unit -> < > Js_of_ocaml.Js.t =
210 | fun ?key ->
211 | fun () ->
212 | let open Js_of_ocaml.Js.Unsafe in
213 | obj
214 | [|("key",
215 | (inject
216 | (Js_of_ocaml.Js.Optdef.option
217 | (Stdlib.Option.map Js_of_ocaml.Js.string key))))|]
218 | [@@merlin.hide ] in
219 | let make () = (div [||] [] : React.element) in
220 | ((let make (Props : < > Js_of_ocaml.Js.t) = make () in
221 | fun ?key -> fun () -> React.create_element make (make_props ?key ()))
222 | [@merlin.hide ])
223 | let make =
224 | let make_props
225 | : foo:a ->
226 | ?key:string ->
227 | unit -> < foo: a Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t
228 | =
229 | fun ~foo ->
230 | fun ?key ->
231 | fun () ->
232 | let open Js_of_ocaml.Js.Unsafe in
233 | obj
234 | [|("key",
235 | (inject
236 | (Js_of_ocaml.Js.Optdef.option
237 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
238 | ("foo", (inject foo))|][@@merlin.hide ] in
239 | let make (type a) ~foo:(foo : a) = (div [||] [] : _) in
240 | ((let make
241 | (Props : < foo: a Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t) =
242 | make
243 | ~foo:((fun (type res) ->
244 | fun (type a0) ->
245 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
246 | fun
247 | (_ :
248 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
249 | -> (Js_of_ocaml.Js.Unsafe.get a0 "foo" : res))
250 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#foo)) in
251 | fun ~foo ->
252 | fun ?key ->
253 | fun () -> React.create_element make (make_props ?key ~foo ()))
254 | [@merlin.hide ])
255 | let make =
256 | let make_props
257 | : foo:'foo ->
258 | ?key:string ->
259 | unit ->
260 | < foo: 'foo Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t
261 | =
262 | fun ~foo ->
263 | fun ?key ->
264 | fun () ->
265 | let open Js_of_ocaml.Js.Unsafe in
266 | obj
267 | [|("key",
268 | (inject
269 | (Js_of_ocaml.Js.Optdef.option
270 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
271 | ("foo", (inject foo))|][@@merlin.hide ] in
272 | let make (type a) = (fun ~foo:_ -> div [||] [] : foo:a -> _) in
273 | ((let make
274 | (Props :
275 | < foo: 'foo Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t)
276 | =
277 | make
278 | ~foo:((fun (type res) ->
279 | fun (type a0) ->
280 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
281 | fun
282 | (_ :
283 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
284 | -> (Js_of_ocaml.Js.Unsafe.get a0 "foo" : res))
285 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#foo)) in
286 | fun ~foo ->
287 | fun ?key ->
288 | fun () -> React.create_element make (make_props ?key ~foo ()))
289 | [@merlin.hide ])
290 | let make =
291 | let make_props
292 | : bar:int option ->
293 | ?key:string ->
294 | unit ->
295 | < bar: int option Js_of_ocaml.Js.readonly_prop >
296 | Js_of_ocaml.Js.t
297 | =
298 | fun ~bar ->
299 | fun ?key ->
300 | fun () ->
301 | let open Js_of_ocaml.Js.Unsafe in
302 | obj
303 | [|("key",
304 | (inject
305 | (Js_of_ocaml.Js.Optdef.option
306 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
307 | ("bar", (inject bar))|][@@merlin.hide ] in
308 | let make =
309 | ((fun ~bar:(bar : int option) ->
310 | (div [||]
311 | [React.string (string_of_int (Option.value ~default:0 bar))] () :
312 | React.element))
313 | [@warning "-16"]) in
314 | ((let make
315 | (Props :
316 | < bar: int option Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t)
317 | =
318 | make
319 | ~bar:((fun (type res) ->
320 | fun (type a0) ->
321 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
322 | fun
323 | (_ :
324 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
325 | -> (Js_of_ocaml.Js.Unsafe.get a0 "bar" : res))
326 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#bar)) in
327 | fun ~bar ->
328 | fun ?key ->
329 | fun () -> React.create_element make (make_props ?key ~bar ()))
330 | [@merlin.hide ])
331 | let make =
332 | let make_props
333 | : name:Js.js_string Js.t ->
334 | ?key:string ->
335 | unit ->
336 | < name: Js.js_string Js.t Js_of_ocaml.Js.readonly_prop >
337 | Js_of_ocaml.Js.t
338 | =
339 | fun ~name ->
340 | fun ?key ->
341 | fun () ->
342 | let open Js_of_ocaml.Js.Unsafe in
343 | obj
344 | [|("key",
345 | (inject
346 | (Js_of_ocaml.Js.Optdef.option
347 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
348 | ("name", (inject name))|][@@merlin.hide ] in
349 | fun ~name ->
350 | fun ?key ->
351 | fun () ->
352 | React.create_element
353 | (Js_of_ocaml.Js.Unsafe.js_expr
354 | "require(\"my-react-library\").MyReactComponent")
355 | (make_props ?key ~name ())
356 | let make =
357 | let make_props
358 | : ?name:Js.js_string Js.t ->
359 | ?key:string ->
360 | unit ->
361 | < name: Js.js_string Js.t option Js_of_ocaml.Js.readonly_prop
362 | > Js_of_ocaml.Js.t
363 | =
364 | fun ?name ->
365 | fun ?key ->
366 | fun () ->
367 | let open Js_of_ocaml.Js.Unsafe in
368 | obj
369 | [|("key",
370 | (inject
371 | (Js_of_ocaml.Js.Optdef.option
372 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
373 | ("name", (inject (Js_of_ocaml.Js.Optdef.option name)))|]
374 | [@@merlin.hide ] in
375 | fun ?name ->
376 | fun ?key ->
377 | fun () ->
378 | React.create_element
379 | (Js_of_ocaml.Js.Unsafe.js_expr
380 | "require(\"my-react-library\").MyReactComponent")
381 | (make_props ?key ?name ())
382 | let make =
383 | let make_props
384 | : names:string array ->
385 | ?key:string ->
386 | unit ->
387 | < names: string array Js_of_ocaml.Js.readonly_prop >
388 | Js_of_ocaml.Js.t
389 | =
390 | fun ~names ->
391 | fun ?key ->
392 | fun () ->
393 | let open Js_of_ocaml.Js.Unsafe in
394 | obj
395 | [|("key",
396 | (inject
397 | (Js_of_ocaml.Js.Optdef.option
398 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
399 | ("names",
400 | (inject
401 | ((fun v ->
402 | Js_of_ocaml.Js.array
403 | (Stdlib.Array.map Js_of_ocaml.Js.string v)) names)))|]
404 | [@@merlin.hide ] in
405 | fun ~names ->
406 | fun ?key ->
407 | fun () ->
408 | React.create_element
409 | (Js_of_ocaml.Js.Unsafe.js_expr
410 | "require(\"my-react-library\").MyReactComponent")
411 | (make_props ?key ~names ())
412 |
--------------------------------------------------------------------------------
/ppx/test/pp_ocaml_dev.expected:
--------------------------------------------------------------------------------
1 | let rec pp_user = 2
2 | type t = string[@@foo external f : int]
3 | let make =
4 | let make_props
5 | : ?name:'name ->
6 | ?key:string ->
7 | unit ->
8 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
9 | Js_of_ocaml.Js.t
10 | =
11 | fun ?name ->
12 | fun ?key ->
13 | fun () ->
14 | let open Js_of_ocaml.Js.Unsafe in
15 | obj
16 | [|("key",
17 | (inject
18 | (Js_of_ocaml.Js.Optdef.option
19 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
20 | ("name", (inject name))|][@@merlin.hide ] in
21 | let make =
22 | ((fun ?(name= "") ->
23 | (div [||] [React.string ("Hello " ^ name)] : React.element))
24 | [@warning "-16"]) in
25 | ((let make
26 | (Props :
27 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
28 | Js_of_ocaml.Js.t)
29 | =
30 | make
31 | ?name:((fun (type res) ->
32 | fun (type a0) ->
33 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
34 | fun
35 | (_ :
36 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
37 | -> (Js_of_ocaml.Js.Unsafe.get a0 "name" : res))
38 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#name)) in
39 | React.set_display_name make __FUNCTION__;
40 | (fun ?name ->
41 | fun ?key ->
42 | fun () -> React.create_element make (make_props ?key ?name ())))
43 | [@merlin.hide ])
44 | let make =
45 | let make_props
46 | : children:'children ->
47 | ?key:string ->
48 | unit ->
49 | < children: 'children Js_of_ocaml.Js.readonly_prop >
50 | Js_of_ocaml.Js.t
51 | =
52 | fun ~children ->
53 | fun ?key ->
54 | fun () ->
55 | let open Js_of_ocaml.Js.Unsafe in
56 | obj
57 | [|("key",
58 | (inject
59 | (Js_of_ocaml.Js.Optdef.option
60 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
61 | ("children", (inject children))|][@@merlin.hide ] in
62 | let make =
63 | ((fun ~children:(first, second) ->
64 | (div [||] [first; second] : React.element))
65 | [@warning "-16"]) in
66 | ((let make
67 | (Props :
68 | < children: 'children Js_of_ocaml.Js.readonly_prop >
69 | Js_of_ocaml.Js.t)
70 | =
71 | make
72 | ~children:((fun (type res) ->
73 | fun (type a0) ->
74 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
75 | fun
76 | (_ :
77 | a0 ->
78 | < get: res ;.. > Js_of_ocaml.Js.gen_prop)
79 | ->
80 | (Js_of_ocaml.Js.Unsafe.get a0 "children" :
81 | res)) (Props : < .. > Js_of_ocaml.Js.t)
82 | (fun x -> x#children)) in
83 | React.set_display_name make __FUNCTION__;
84 | (fun ~children ->
85 | fun ?key ->
86 | fun () -> React.create_element make (make_props ?key ~children ())))
87 | [@merlin.hide ])
88 | let make =
89 | let make_props
90 | : children:'children ->
91 | ?key:string ->
92 | unit ->
93 | < children: 'children Js_of_ocaml.Js.readonly_prop >
94 | Js_of_ocaml.Js.t
95 | =
96 | fun ~children ->
97 | fun ?key ->
98 | fun () ->
99 | let open Js_of_ocaml.Js.Unsafe in
100 | obj
101 | [|("key",
102 | (inject
103 | (Js_of_ocaml.Js.Optdef.option
104 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
105 | ("children", (inject children))|][@@merlin.hide ] in
106 | let make = ((fun ~children:kids -> (div [||] kids : React.element))
107 | [@warning "-16"]) in
108 | ((let make
109 | (Props :
110 | < children: 'children Js_of_ocaml.Js.readonly_prop >
111 | Js_of_ocaml.Js.t)
112 | =
113 | make
114 | ~children:((fun (type res) ->
115 | fun (type a0) ->
116 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
117 | fun
118 | (_ :
119 | a0 ->
120 | < get: res ;.. > Js_of_ocaml.Js.gen_prop)
121 | ->
122 | (Js_of_ocaml.Js.Unsafe.get a0 "children" :
123 | res)) (Props : < .. > Js_of_ocaml.Js.t)
124 | (fun x -> x#children)) in
125 | React.set_display_name make __FUNCTION__;
126 | (fun ~children ->
127 | fun ?key ->
128 | fun () -> React.create_element make (make_props ?key ~children ())))
129 | [@merlin.hide ])
130 | let make =
131 | let make_props
132 | : children:'children ->
133 | ?key:string ->
134 | unit ->
135 | < children: 'children Js_of_ocaml.Js.readonly_prop >
136 | Js_of_ocaml.Js.t
137 | =
138 | fun ~children ->
139 | fun ?key ->
140 | fun () ->
141 | let open Js_of_ocaml.Js.Unsafe in
142 | obj
143 | [|("key",
144 | (inject
145 | (Js_of_ocaml.Js.Optdef.option
146 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
147 | ("children", (inject children))|][@@merlin.hide ] in
148 | let make =
149 | ((fun ~children:(first, second) ->
150 | fun () -> (div [||] [first; second] : React.element))
151 | [@warning "-16"]) in
152 | ((let make
153 | (Props :
154 | < children: 'children Js_of_ocaml.Js.readonly_prop >
155 | Js_of_ocaml.Js.t)
156 | =
157 | make
158 | ~children:((fun (type res) ->
159 | fun (type a0) ->
160 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
161 | fun
162 | (_ :
163 | a0 ->
164 | < get: res ;.. > Js_of_ocaml.Js.gen_prop)
165 | ->
166 | (Js_of_ocaml.Js.Unsafe.get a0 "children" :
167 | res)) (Props : < .. > Js_of_ocaml.Js.t)
168 | (fun x -> x#children)) () in
169 | React.set_display_name make __FUNCTION__;
170 | (fun ~children ->
171 | fun ?key ->
172 | fun () -> React.create_element make (make_props ?key ~children ())))
173 | [@merlin.hide ])
174 | let make =
175 | let make_props
176 | : ?name:'name ->
177 | ?key:string ->
178 | unit ->
179 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
180 | Js_of_ocaml.Js.t
181 | =
182 | fun ?name ->
183 | fun ?key ->
184 | fun () ->
185 | let open Js_of_ocaml.Js.Unsafe in
186 | obj
187 | [|("key",
188 | (inject
189 | (Js_of_ocaml.Js.Optdef.option
190 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
191 | ("name", (inject name))|][@@merlin.hide ] in
192 | let make = ((fun ?(name= "") -> (div [||] [name] : React.element))
193 | [@warning "-16"]) in
194 | ((let make
195 | (Props :
196 | < name: 'name option Js_of_ocaml.Js.readonly_prop >
197 | Js_of_ocaml.Js.t)
198 | =
199 | make
200 | ?name:((fun (type res) ->
201 | fun (type a0) ->
202 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
203 | fun
204 | (_ :
205 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
206 | -> (Js_of_ocaml.Js.Unsafe.get a0 "name" : res))
207 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#name)) in
208 | React.set_display_name make __FUNCTION__;
209 | (fun ?name ->
210 | fun ?key ->
211 | fun () -> React.create_element make (make_props ?key ?name ())))
212 | [@merlin.hide ])
213 | let make =
214 | let make_props : ?key:string -> unit -> < > Js_of_ocaml.Js.t =
215 | fun ?key ->
216 | fun () ->
217 | let open Js_of_ocaml.Js.Unsafe in
218 | obj
219 | [|("key",
220 | (inject
221 | (Js_of_ocaml.Js.Optdef.option
222 | (Stdlib.Option.map Js_of_ocaml.Js.string key))))|]
223 | [@@merlin.hide ] in
224 | let make () = (div [||] [] : React.element) in
225 | ((let make (Props : < > Js_of_ocaml.Js.t) = make () in
226 | React.set_display_name make __FUNCTION__;
227 | (fun ?key -> fun () -> React.create_element make (make_props ?key ())))
228 | [@merlin.hide ])
229 | let make =
230 | let make_props
231 | : foo:a ->
232 | ?key:string ->
233 | unit -> < foo: a Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t
234 | =
235 | fun ~foo ->
236 | fun ?key ->
237 | fun () ->
238 | let open Js_of_ocaml.Js.Unsafe in
239 | obj
240 | [|("key",
241 | (inject
242 | (Js_of_ocaml.Js.Optdef.option
243 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
244 | ("foo", (inject foo))|][@@merlin.hide ] in
245 | let make (type a) ~foo:(foo : a) = (div [||] [] : _) in
246 | ((let make
247 | (Props : < foo: a Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t) =
248 | make
249 | ~foo:((fun (type res) ->
250 | fun (type a0) ->
251 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
252 | fun
253 | (_ :
254 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
255 | -> (Js_of_ocaml.Js.Unsafe.get a0 "foo" : res))
256 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#foo)) in
257 | React.set_display_name make __FUNCTION__;
258 | (fun ~foo ->
259 | fun ?key ->
260 | fun () -> React.create_element make (make_props ?key ~foo ())))
261 | [@merlin.hide ])
262 | let make =
263 | let make_props
264 | : foo:'foo ->
265 | ?key:string ->
266 | unit ->
267 | < foo: 'foo Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t
268 | =
269 | fun ~foo ->
270 | fun ?key ->
271 | fun () ->
272 | let open Js_of_ocaml.Js.Unsafe in
273 | obj
274 | [|("key",
275 | (inject
276 | (Js_of_ocaml.Js.Optdef.option
277 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
278 | ("foo", (inject foo))|][@@merlin.hide ] in
279 | let make (type a) = (fun ~foo:_ -> div [||] [] : foo:a -> _) in
280 | ((let make
281 | (Props :
282 | < foo: 'foo Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t)
283 | =
284 | make
285 | ~foo:((fun (type res) ->
286 | fun (type a0) ->
287 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
288 | fun
289 | (_ :
290 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
291 | -> (Js_of_ocaml.Js.Unsafe.get a0 "foo" : res))
292 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#foo)) in
293 | React.set_display_name make __FUNCTION__;
294 | (fun ~foo ->
295 | fun ?key ->
296 | fun () -> React.create_element make (make_props ?key ~foo ())))
297 | [@merlin.hide ])
298 | let make =
299 | let make_props
300 | : bar:int option ->
301 | ?key:string ->
302 | unit ->
303 | < bar: int option Js_of_ocaml.Js.readonly_prop >
304 | Js_of_ocaml.Js.t
305 | =
306 | fun ~bar ->
307 | fun ?key ->
308 | fun () ->
309 | let open Js_of_ocaml.Js.Unsafe in
310 | obj
311 | [|("key",
312 | (inject
313 | (Js_of_ocaml.Js.Optdef.option
314 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
315 | ("bar", (inject bar))|][@@merlin.hide ] in
316 | let make =
317 | ((fun ~bar:(bar : int option) ->
318 | (div [||]
319 | [React.string (string_of_int (Option.value ~default:0 bar))] () :
320 | React.element))
321 | [@warning "-16"]) in
322 | ((let make
323 | (Props :
324 | < bar: int option Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t)
325 | =
326 | make
327 | ~bar:((fun (type res) ->
328 | fun (type a0) ->
329 | fun (a0 : a0 Js_of_ocaml.Js.t) ->
330 | fun
331 | (_ :
332 | a0 -> < get: res ;.. > Js_of_ocaml.Js.gen_prop)
333 | -> (Js_of_ocaml.Js.Unsafe.get a0 "bar" : res))
334 | (Props : < .. > Js_of_ocaml.Js.t) (fun x -> x#bar)) in
335 | React.set_display_name make __FUNCTION__;
336 | (fun ~bar ->
337 | fun ?key ->
338 | fun () -> React.create_element make (make_props ?key ~bar ())))
339 | [@merlin.hide ])
340 | let make =
341 | let make_props
342 | : name:Js.js_string Js.t ->
343 | ?key:string ->
344 | unit ->
345 | < name: Js.js_string Js.t Js_of_ocaml.Js.readonly_prop >
346 | Js_of_ocaml.Js.t
347 | =
348 | fun ~name ->
349 | fun ?key ->
350 | fun () ->
351 | let open Js_of_ocaml.Js.Unsafe in
352 | obj
353 | [|("key",
354 | (inject
355 | (Js_of_ocaml.Js.Optdef.option
356 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
357 | ("name", (inject name))|][@@merlin.hide ] in
358 | fun ~name ->
359 | fun ?key ->
360 | fun () ->
361 | React.create_element
362 | (Js_of_ocaml.Js.Unsafe.js_expr
363 | "require(\"my-react-library\").MyReactComponent")
364 | (make_props ?key ~name ())
365 | let make =
366 | let make_props
367 | : ?name:Js.js_string Js.t ->
368 | ?key:string ->
369 | unit ->
370 | < name: Js.js_string Js.t option Js_of_ocaml.Js.readonly_prop
371 | > Js_of_ocaml.Js.t
372 | =
373 | fun ?name ->
374 | fun ?key ->
375 | fun () ->
376 | let open Js_of_ocaml.Js.Unsafe in
377 | obj
378 | [|("key",
379 | (inject
380 | (Js_of_ocaml.Js.Optdef.option
381 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
382 | ("name", (inject (Js_of_ocaml.Js.Optdef.option name)))|]
383 | [@@merlin.hide ] in
384 | fun ?name ->
385 | fun ?key ->
386 | fun () ->
387 | React.create_element
388 | (Js_of_ocaml.Js.Unsafe.js_expr
389 | "require(\"my-react-library\").MyReactComponent")
390 | (make_props ?key ?name ())
391 | let make =
392 | let make_props
393 | : names:string array ->
394 | ?key:string ->
395 | unit ->
396 | < names: string array Js_of_ocaml.Js.readonly_prop >
397 | Js_of_ocaml.Js.t
398 | =
399 | fun ~names ->
400 | fun ?key ->
401 | fun () ->
402 | let open Js_of_ocaml.Js.Unsafe in
403 | obj
404 | [|("key",
405 | (inject
406 | (Js_of_ocaml.Js.Optdef.option
407 | (Stdlib.Option.map Js_of_ocaml.Js.string key))));
408 | ("names",
409 | (inject
410 | ((fun v ->
411 | Js_of_ocaml.Js.array
412 | (Stdlib.Array.map Js_of_ocaml.Js.string v)) names)))|]
413 | [@@merlin.hide ] in
414 | fun ~names ->
415 | fun ?key ->
416 | fun () ->
417 | React.create_element
418 | (Js_of_ocaml.Js.Unsafe.js_expr
419 | "require(\"my-react-library\").MyReactComponent")
420 | (make_props ?key ~names ())
421 |
--------------------------------------------------------------------------------
/rfcs/0000-template.md:
--------------------------------------------------------------------------------
1 | - Start Date: (fill me in with today's date, YYYY-MM-DD)
2 | - RFC PR: (leave this empty)
3 |
4 | # Summary
5 |
6 | Brief explanation of the feature.
7 |
8 | # Basic example
9 |
10 | If the proposal involves a new or changed API, include a basic code example.
11 | Omit this section if it's not applicable.
12 |
13 | # Motivation
14 |
15 | Why are we doing this? What use cases does it support? What is the expected
16 | outcome?
17 |
18 | Please focus on explaining the motivation so that if this RFC is not accepted,
19 | the motivation could be used to develop alternative solutions. In other words,
20 | enumerate the constraints you are trying to solve without coupling them too
21 | closely to the solution you have in mind.
22 |
23 | # Detailed design
24 |
25 | This is the bulk of the RFC. Explain the design in enough detail for somebody
26 | familiar with React to understand, and for somebody familiar with the
27 | implementation to implement. This should get into specifics and corner-cases,
28 | and include examples of how the feature is used. Any new terminology should be
29 | defined here.
30 |
31 | # Drawbacks
32 |
33 | Why should we *not* do this? Please consider:
34 |
35 | - implementation cost, both in term of code size and complexity
36 | - whether the proposed feature can be implemented in user space
37 | - the impact on teaching people jsoo-react
38 | - integration of this feature with other existing and planned features
39 | - cost of migrating existing jsoo-react applications (is it a breaking change?)
40 |
41 | There are tradeoffs to choosing any path. Attempt to identify them here.
42 |
43 | # Unresolved questions
44 |
45 | Optional, but suggested for first drafts. What parts of the design are still
46 | TBD?
--------------------------------------------------------------------------------
/rfcs/0001-ocaml-syntax.md:
--------------------------------------------------------------------------------
1 | - Start Date: 2021-11-20
2 | - RFC PR: https://github.com/reason-in-barcelona/jsoo-react/pull/67
3 |
4 | # Summary
5 |
6 | Right now, writing jsoo-react components and elements using OCaml syntax is pretty cumbersome, e.g.
7 |
8 | https://github.com/reason-in-barcelona/jsoo-react/blob/45d3226c7ccf50c6ad7272c537949cc2c19015af/example/src/HelloWorldOCaml.ml#L1-L3
9 |
10 | ```ocaml
11 | let make () = (div ~children:[React.string "Hello world from OCaml"] () [@JSX])
12 | [@@react.component]
13 | ```
14 |
15 | This RFC tries to go through the different parts that need to be fixed in order to improve this experience.
16 |
17 | # Basic example
18 |
19 | The main idea is to enhance the ergonomics of jsoo-react for OCaml syntax. Here is a short example that shows component implementation and element creation:
20 |
21 | ```ocaml
22 | [@@@react.dom]
23 |
24 | module Greeting = struct
25 | let%component make ~name =
26 | button
27 | ~on_click:(fun _ -> ())
28 | ~children:[React.string ("Hello " ^ name ^ "!")]
29 | ()
30 | end
31 |
32 | let element = Greeting.make ~name:"John" ~children:[] ()
33 | ```
34 |
35 | # Motivation
36 |
37 | Having a better integration with OCaml syntax will reduce the friction to use React.js on OCaml codebases, which could lead to more use cases and projects where jsoo-react would make sense.
38 |
39 | It also will make the library more appealing to those users that can't afford to add a dependency on Reason, or just prefer using OCaml syntax.
40 |
41 | Finally, improving the ergonomics when using OCaml syntax will leverage all the stability, activity and functionality available in the OCaml ecosystem: tooling (ocamlformat, editor integrations), ppx, documentation, etc.
42 |
43 | # Detailed design
44 |
45 | The proposal is split between four different parts:
46 | 1. creation of DOM (lowercase) elements
47 | 2. creation of component (uppercase) elements
48 | 3. implementation of components
49 | 4. expose API in snakecase
50 |
51 | ### Creation of DOM elements
52 |
53 | - **Current input**
54 |
55 | The current way to write elements relies on Reason ppx, which adds `[@JSX]` attributes to the ast. This means when writing elements from OCaml syntax, one has to include this attribute as well, e.g.:
56 |
57 | ```ocaml
58 | (div ~id:"foo" ~children:[] ())[@JSX ]
59 | ```
60 |
61 | - **PPX output**
62 |
63 | The code generated by jsoo-react PPX for the input above is:
64 |
65 | ```ocaml
66 | React.Dom.createDOMElementVariadic "div"
67 | ~props:
68 | ( Js_of_ocaml.Js.Unsafe.obj
69 | [| ( "id"
70 | , Js_of_ocaml.Js.Unsafe.inject
71 | (Js_of_ocaml.Js.string ("foo" : string)) ) |]
72 | : React.Dom.domProps )
73 | []
74 | ```
75 |
76 | - **Goal**
77 |
78 | The goal is to get rid of adding manual attributes to each element, as creating DOM elements is something that happens very often in React apps.
79 |
80 | - **Proposal**
81 |
82 | As we want to get rid of the `JSX` attribute, the proposal for creation of DOM elements is to add a floating attribute at the top of the files to indicate the PPX that we want it to enable the processing of DOM elements creation, e.g.
83 |
84 | ```ocaml
85 | [@@@react.dom]
86 |
87 | let my_element = div ~id:"foo" ~children:[] ()
88 | ```
89 |
90 | After processing the floating attribute, the ppx would check all functions with a name matching any of the known element tags (`"div"`, `"p"`, `"a"`,...) and it would process them automatically to apply the conversion.
91 |
92 | - **New input**
93 |
94 | After this change, writing DOM elements would look like this:
95 |
96 | ```ocaml
97 | div ~id:"foo" ~children:[] ()
98 | ```
99 |
100 | ### Creation of component elements
101 |
102 | - **Current input**
103 |
104 | The current way to write component elements also relies on Reason ppx, which requires `[@JSX]`:
105 |
106 | ```ocaml
107 | Greeting.createElement ~name:"John" ~children:[] () [@JSX]
108 | ```
109 |
110 | - **PPX output**
111 |
112 | ```ocaml
113 | React.createElement Greeting.make (Greeting.makeProps ~name:"John" ())
114 | ```
115 |
116 | - **Goal**
117 |
118 | The goal, like in the previous case, is to avoid the need to add the `[@JSX]` attribute.
119 |
120 | - **Proposal**
121 |
122 | Right now, the calls to `React.createElement` are inlined in the call point, but this is too cumbersome to be written manually.
123 | Instead, we can move these calls to the component implementation.
124 |
125 | So, for the following component implementation:
126 |
127 | ```ocaml
128 | [@react.component]
129 | let make = (~name) =>
130 | ;
131 | ```
132 |
133 | At present, the PPX produces the following output for the code above:
134 |
135 | ```ocaml
136 | let makeProps :
137 | name:'name
138 | -> ?key:string
139 | -> unit
140 | -> < name: 'name Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t =
141 | fun ~name ?key _ ->
142 | let open Js_of_ocaml.Js.Unsafe in
143 | obj
144 | ( [| Option.map (fun raw -> ("key", inject (Js_of_ocaml.Js.string raw))) key
145 | ; Some ("name", inject name) |]
146 | |> Array.to_list
147 | |> List.filter_map (fun x -> x)
148 | |> Array.of_list )
149 |
150 | let make ~name =
151 | React.Dom.createDOMElementVariadic "button"
152 | ~props:(Js_of_ocaml.Js.Unsafe.obj [||])
153 | [ReasonReact.string ("Hello " ^ name ^ "!")]
154 |
155 | let make =
156 | let (Test
157 | (Props : < name: 'name Js_of_ocaml.Js.readonly_prop > Js_of_ocaml.Js.t)
158 | ) =
159 | make
160 | ~name:
161 | (fun (type res a0) (a0 : a0 Js_of_ocaml.Js.t)
162 | (_ : a0 -> < get: res ; .. > Js_of_ocaml.Js.gen_prop) ->
163 | (Js_of_ocaml.Js.Unsafe.get a0 "name" : res)
164 | (Props : < .. > Js_of_ocaml.Js.t)
165 | (fun x -> x#name) )
166 | in
167 | Test
168 | ```
169 |
170 | The PPX would need to add to the output an extra function at the end of the component implementation, that just calls `React.createElement` and pass `make` and `makeProps` defined before:
171 |
172 | ```ocaml
173 | let makeProps ... (* same as before *)
174 |
175 | let make ~name = ... (* same *)
176 |
177 | let make = ... (* same *)
178 |
179 | let make ~name () = React.createElement make (makeProps ~name ())
180 | ```
181 |
182 | - **New input**
183 |
184 | After the change above, we can create component elements with just a function call from OCaml syntax:
185 |
186 | ```ocaml
187 | let my_element = Greeting.make ~name:"John" ()
188 | ```
189 |
190 | ### Implementation of components
191 |
192 | - **Current input**
193 |
194 | Right now, components are defined with an attribute attached to the component value binding, e.g.:
195 |
196 | ```ocaml
197 | module Greeting = struct
198 | let make () = React.string "Hello world from OCaml" [@@react.component]
199 | end
200 | ```
201 |
202 | - **Proposal**
203 |
204 | For OCaml syntax, it would be much friendlier to use infix syntax for component implementation, like it's done in [brisk-reconciler](https://github.com/briskml/brisk-reconciler/).
205 |
206 | The example above would look like:
207 |
208 | ```ocaml
209 | module Greeting = struct
210 | let%component make () = React.string "Hello world from OCaml"
211 | end
212 | ```
213 |
214 | ### Expose API in snake_case
215 |
216 | All APIs should be aliased to make them available in snake case, e.g. functions like `React.use_state`, or props like `on_click`.
217 |
218 | ### Summary
219 |
220 | Here is a component with some jsoo-react functionality to see how all the different parts would look like together:
221 |
222 | ```ocaml
223 | [@@@react.dom]
224 |
225 | open Bindings
226 |
227 | type action = Increment | Decrement
228 |
229 | let reducer state action =
230 | match action with Increment -> state + 1 | Decrement -> state - 1
231 |
232 | let s = React.string
233 |
234 | let space = " " |> s
235 |
236 | let%component make ?(name = "buddy") ?children =
237 | let count, set_count = React.use_state (fun () -> 0) in
238 | let state, dispatch = React.use_reducer reducer 0 in
239 | div
240 | ~id:"counter"
241 | ~children:
242 | [ p ~children:["Hello " ^ name ^ "!" |> s] ()
243 | ; button
244 | ~on_click:(fun _ ->
245 | Console.log "Click!" ;
246 | set_count (fun c -> c + 1) )
247 | ~children:["Count: " ^ string_of_int count |> s]
248 | ()
249 | ; space
250 | ; button
251 | ~on_click:(fun _ -> dispatch @@ Decrement)
252 | ~children:["Dec" |> s] ()
253 | ; space
254 | ; span ~children:[string_of_int state |> s] ()
255 | ; space
256 | ; button
257 | ~on_click:(fun _ -> dispatch @@ Increment)
258 | ~children:["Inc" |> s] ()
259 | ; space
260 | ; ( match children with
261 | | Some c ->
262 | div ~children:[c] ()
263 | | None ->
264 | React.null ) ]
265 | ()
266 | ```
267 |
268 |
269 | # Drawbacks
270 |
271 | - Performance: some of the points above like "1. Creating DOM elements" will involve more work from the PPX, as it has to check every `Pexp_apply` expression and then compare its `Pexp_ident` with all DOM elements `p`, `div`,... tag strings.
272 | - Confusion and bad user experience: the proposal "1. Creating DOM elements" will lead to the PPX processing _every_ function with a name like DOM elements (`p`, `div`). This can lead to opaque compilation errors and confusion if the user redefines any of these functions for different purposes.
273 | - Maintenance burden: the additions proposed will involve more maintenance work, and more use cases to support.
274 | - Backwards compatibility: at some point we might decide to drop support for old ways to implement components using `[@react.component]`. This would mean that it'd not be as straight forward to migrate existing [ReasonReact](https://reasonml.github.io/reason-react) apps to jsoo-react.
275 |
276 | # Unresolved questions
277 |
278 | - Is there a better way to deal with DOM elements than using floating attributes?
--------------------------------------------------------------------------------
/test/dune:
--------------------------------------------------------------------------------
1 | (executable
2 | (name test_jsoo_react)
3 | (libraries webtest webtest-js gen_js_api react jsoo_react_test js_of_ocaml)
4 | (preprocess
5 | (pps jsoo-react.ppx js_of_ocaml-ppx))
6 | (js_of_ocaml
7 | (javascript_files react-requires.js jsdom.js))
8 | (modes js))
9 |
10 | (rule
11 | (targets jsdom.ml)
12 | (deps jsdom.mli)
13 | (action
14 | (run %{bin:gen_js_api} -o %{targets} %{deps})))
15 |
16 | (rule
17 | (alias runtest)
18 | (deps
19 | external.js
20 | test_jsoo_react.bc.js
21 | (source_tree node_modules))
22 | (action
23 | (run node test_jsoo_react.bc.js)))
24 |
25 | (data_only_dirs node_modules)
26 |
--------------------------------------------------------------------------------
/test/external.js:
--------------------------------------------------------------------------------
1 | const React = require("react");
2 |
3 | function Greeting({
4 | name,
5 | strong,
6 | }) {
7 | var name = strong === true
8 | ? React.createElement("strong", null, name)
9 | : name;
10 |
11 | return React.createElement("span", null, "Hey ", name);
12 | }
13 |
14 | exports.Greeting = Greeting;
15 |
16 | function GreetingChildren({
17 | children
18 | }) {
19 | return React.createElement("span", null, "Hey ", children);
20 | }
21 |
22 | exports.GreetingChildren = GreetingChildren;
23 |
24 | function Greetings({
25 | names
26 | }) {
27 | return React.createElement("span", null, "Hey ", names.join(", "));
28 | }
29 |
30 | exports.Greetings = Greetings;
31 |
32 | // React.forwardRef is a non-function wrapper component, at least at time of writing
33 | exports.NonFunctionGreeting = React.forwardRef(function Greeting({
34 | name,
35 | strong,
36 | }, ref) {
37 | var name = strong === true
38 | ? React.createElement("strong", null, name)
39 | : name;
40 |
41 | return React.createElement("span", { ref: ref }, "Hey ", name);
42 | });
43 |
--------------------------------------------------------------------------------
/test/jsdom.js:
--------------------------------------------------------------------------------
1 | joo_global_object.__LIB__jsdom = require('jsdom').JSDOM;
2 |
--------------------------------------------------------------------------------
/test/jsdom.mli:
--------------------------------------------------------------------------------
1 | type t = private Ojs.t
2 |
3 | val t_of_js : Ojs.t -> t
4 | val t_to_js : t -> Ojs.t
5 | val make : html:string -> t [@@js.new "__LIB__jsdom"]
6 |
7 | [@@@js.stop]
8 |
9 | type window = Js_of_ocaml.Dom_html.window Js_of_ocaml.Js.t
10 |
11 | [@@@js.start]
12 |
13 | [@@@js.implem
14 | type window = Js_of_ocaml.Dom_html.window Js_of_ocaml.Js.t
15 |
16 | external window_of_js : t -> window = "%identity"
17 | external window_to_js : window -> t = "%identity"]
18 |
19 | val window : t -> window [@@js.get]
20 |
21 | [@@@js.stop]
22 |
23 | type document = Js_of_ocaml.Dom_html.document Js_of_ocaml.Js.t
24 |
25 | [@@@js.start]
26 |
27 | [@@@js.implem
28 | type document = Js_of_ocaml.Dom_html.document Js_of_ocaml.Js.t
29 |
30 | external document_of_js : t -> document = "%identity"
31 | external document_to_js : document -> t = "%identity"]
32 |
33 | val document : window -> document [@@js.get]
34 |
--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "devDependencies": {
7 | "jsdom": "^16.4.0",
8 | "react": "^18.1.0",
9 | "react-dom": "^18.1.0"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/test/react-requires.js:
--------------------------------------------------------------------------------
1 | joo_global_object.React = require('react');
2 | joo_global_object.ReactDOM = require("react-dom");
3 |
--------------------------------------------------------------------------------
/test/test_jsoo_react.ml:
--------------------------------------------------------------------------------
1 | open Webtest.Suite
2 |
3 | let suite = "baseSuite" >::: [ Test_reason.suite; Test_ml.suite ]
4 | let () = Webtest_js.Runner.run suite
5 |
--------------------------------------------------------------------------------