diff --git a/CHANGES.md b/CHANGES.md
index f7ca55aac..ef9bf8f2c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -4,6 +4,8 @@
[#782](https://github.com/reasonml/reason-react/pull/782))
* Fix `React.useCallback*` for callbacks with multiple arguments (@anmonteiro
in [#786](https://github.com/reasonml/reason-react/pull/786))
+* Wrap the `React` library, exposing just a single top-level module
+ (@anmonteiro in [#783](https://github.com/reasonml/reason-react/pull/783))
# 0.12.0
diff --git a/ppx/reason_react_ppx.ml b/ppx/reason_react_ppx.ml
index cdeee1bdd..754285d4b 100644
--- a/ppx/reason_react_ppx.ml
+++ b/ppx/reason_react_ppx.ml
@@ -68,13 +68,13 @@ module Binding = struct
let createElement ~loc ~attrs element children =
Builder.pexp_apply ~loc ~attrs
(Builder.pexp_ident ~loc
- { loc; txt = Ldot (Lident "ReactDOM", "createElement") })
+ { loc; txt = Ldot (Ldot (Lident "React", "DOM"), "createElement") })
[ (nolabel, element); (nolabel, children) ]
let domProps ~applyLoc ~loc props =
Builder.pexp_apply ~loc:applyLoc
(Builder.pexp_ident ~loc:applyLoc ~attrs:merlinHideAttrs
- { loc; txt = Ldot (Lident "ReactDOM", "domProps") })
+ { loc; txt = Ldot (Ldot (Lident "React", "DOM"), "domProps") })
props
end
end
@@ -435,46 +435,46 @@ let jsxExprAndChildren ~ident ~loc ~ctxt mapper ~keyProps children =
in
match (childrenExpr, keyProps) with
| Some (Exact children), (label, key) :: _ ->
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxKeyed") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
Some (label, key),
Some children )
| Some (Exact children), [] ->
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsx") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") },
None,
Some children )
| ( Some (ListLiteral ({ pexp_desc = Pexp_array list } as children)),
(label, key) :: _ )
when list = [] ->
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxKeyed") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
Some (label, key),
Some (Binding.React.array ~loc children) )
| Some (ListLiteral { pexp_desc = Pexp_array list }), [] when list = [] ->
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsx") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") },
None,
children )
| Some (ListLiteral children), (label, key) :: _ ->
(* this is a hack to support react components that introspect into their
children *)
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxsKeyed") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxsKeyed") },
Some (label, key),
Some (Binding.React.array ~loc children) )
| Some (ListLiteral children), [] ->
(* this is a hack to support react components that introspect into their
children *)
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxs") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxs") },
None,
Some (Binding.React.array ~loc children) )
| None, (label, key) :: _ ->
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsxKeyed") },
+ ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
Some (label, key),
None )
| None, [] ->
- ( Builder.pexp_ident ~loc { loc; txt = Ldot (Lident ident, "jsx") },
- None,
- None )
+ (Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsx") }, None, None)
+
+let reactJsxExprAndChildren = jsxExprAndChildren ~ident:(Lident "React")
-let reactJsxExprAndChildren = jsxExprAndChildren ~ident:"React"
-let reactDomJsxExprAndChildren = jsxExprAndChildren ~ident:"ReactDOM"
+let reactDomJsxExprAndChildren =
+ jsxExprAndChildren ~ident:(Ldot (Lident "React", "DOM"))
(* Builds an AST node for the entire `external` definition of props *)
let makeExternalDecl fnName loc namedArgListWithKeyAndRef namedTypeList =
diff --git a/ppx/test/component.t/run.t b/ppx/test/component.t/run.t
index 0e5b91102..e804ca86b 100644
--- a/ppx/test/component.t/run.t
+++ b/ppx/test/component.t/run.t
@@ -8,8 +8,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
[@@mel.obj ]
let make =
((fun ~lola ->
- ReactDOM.jsx "div"
- (((ReactDOM.domProps)[@merlin.hide ])
+ React.DOM.jsx "div"
+ (((React.DOM.domProps)[@merlin.hide ])
~children:(React.string lola) ()))
[@warning "-16"])
let make =
@@ -27,9 +27,9 @@ We need to output ML syntax here, otherwise refmt could not parse it.
""[@@mel.obj ]
let make =
((fun ?(name= "") ->
- ReactDOM.createElement React.jsxFragment
- [|(ReactDOM.jsx "div"
- (((ReactDOM.domProps)[@merlin.hide ])
+ React.DOM.createElement React.jsxFragment
+ [|(React.DOM.jsx "div"
+ (((React.DOM.domProps)[@merlin.hide ])
~children:(React.string ("First " ^ name)) ()));(
React.jsx Hello.make
(Hello.makeProps ~children:(React.string ("2nd " ^ name))
@@ -51,8 +51,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
let make =
((fun ~children ->
((fun ~buttonRef ->
- ReactDOM.jsx "button"
- (((ReactDOM.domProps)[@merlin.hide ]) ~children
+ React.DOM.jsx "button"
+ (((React.DOM.domProps)[@merlin.hide ]) ~children
~ref:buttonRef ~className:"FancyButton" ()))
[@warning "-16"]))
[@warning "-16"])
@@ -76,8 +76,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
((fun ~name ->
((fun ?isDisabled ->
let onClick event = Js.log event in
- ReactDOM.jsx "button"
- (((ReactDOM.domProps)[@merlin.hide ]) ~name ~onClick
+ React.DOM.jsx "button"
+ (((React.DOM.domProps)[@merlin.hide ]) ~name ~onClick
~disabled:isDisabled ()))
[@warning "-16"]))
[@warning "-16"])
@@ -94,8 +94,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
""[@@mel.obj ]
let make =
((fun ?(name= "joe") ->
- ReactDOM.jsx "div"
- (((ReactDOM.domProps)[@merlin.hide ])
+ React.DOM.jsx "div"
+ (((React.DOM.domProps)[@merlin.hide ])
~children:((Printf.sprintf "`name` is %s" name) |>
React.string) ()))
[@warning "-16"])
@@ -117,37 +117,37 @@ We need to output ML syntax here, otherwise refmt could not parse it.
let make =
((fun ~children ->
((fun ~moreProps ->
- ReactDOM.jsxs "html"
- (((ReactDOM.domProps)[@merlin.hide ])
+ React.DOM.jsxs "html"
+ (((React.DOM.domProps)[@merlin.hide ])
~children:(React.array
- [|(ReactDOM.jsx "head"
- (((ReactDOM.domProps)[@merlin.hide ])
- ~children:(ReactDOM.jsx "title"
- (((ReactDOM.domProps)
+ [|(React.DOM.jsx "head"
+ (((React.DOM.domProps)[@merlin.hide ])
+ ~children:(React.DOM.jsx "title"
+ (((React.DOM.domProps)
[@merlin.hide ])
~children:(React.string
("SSR React "
^
moreProps))
- ())) ()));(ReactDOM.jsxs
+ ())) ()));(React.DOM.jsxs
"body"
- (((ReactDOM.domProps)
+ (((React.DOM.domProps)
[@merlin.hide
])
~children:(
React.array
[|(
- ReactDOM.jsx
+ React.DOM.jsx
"div"
- (((ReactDOM.domProps)
+ (((React.DOM.domProps)
[@merlin.hide
])
~children
~id:"root"
()));(
- ReactDOM.jsx
+ React.DOM.jsx
"script"
- (((ReactDOM.domProps)
+ (((React.DOM.domProps)
[@merlin.hide
])
~src:"/static/client.js"
@@ -170,8 +170,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
]
let make =
((fun ~children ->
- ReactDOM.jsx "div"
- (((ReactDOM.domProps)[@merlin.hide ]) ~children
+ React.DOM.jsx "div"
+ (((React.DOM.domProps)[@merlin.hide ]) ~children
~ariaHidden:"true" ()))
[@warning "-16"])
let make =
diff --git a/ppx/test/fragment.t/run.t b/ppx/test/fragment.t/run.t
index 421251412..b9bb83952 100644
--- a/ppx/test/fragment.t/run.t
+++ b/ppx/test/fragment.t/run.t
@@ -1,20 +1,20 @@
$ ../ppx.sh --output re input.re
let fragment = foo =>
- [@bla] ReactDOM.createElement(React.jsxFragment, [|foo|]);
+ [@bla] React.DOM.createElement(React.jsxFragment, [|foo|]);
let poly_children_fragment = (foo, bar) =>
- ReactDOM.createElement(React.jsxFragment, [|foo, bar|]);
+ React.DOM.createElement(React.jsxFragment, [|foo, bar|]);
let nested_fragment = (foo, bar, baz) =>
- ReactDOM.createElement(
+ React.DOM.createElement(
React.jsxFragment,
- [|foo, ReactDOM.createElement(React.jsxFragment, [|bar, baz|])|],
+ [|foo, React.DOM.createElement(React.jsxFragment, [|bar, baz|])|],
);
let nested_fragment_with_lower = foo =>
- ReactDOM.createElement(
+ React.DOM.createElement(
React.jsxFragment,
[|
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(~children=foo, ()),
+ ([@merlin.hide] React.DOM.domProps)(~children=foo, ()),
),
|],
);
diff --git a/ppx/test/functor.t/run.t b/ppx/test/functor.t/run.t
index 8fc49a45c..22d0df019 100644
--- a/ppx/test/functor.t/run.t
+++ b/ppx/test/functor.t/run.t
@@ -12,7 +12,7 @@ We need to output ML syntax here, otherwise refmt could not parse it.
((fun ~a ->
((fun ~b ->
print_endline "This function should be named `Test$Func`" M.x;
- ReactDOM.jsx "div" (((ReactDOM.domProps)[@merlin.hide ]) ()))
+ React.DOM.jsx "div" (((React.DOM.domProps)[@merlin.hide ]) ()))
[@warning "-16"]))
[@warning "-16"])
let make =
diff --git a/ppx/test/issue-429.t/run.t b/ppx/test/issue-429.t/run.t
index fce07f2cb..13e055b62 100644
--- a/ppx/test/issue-429.t/run.t
+++ b/ppx/test/issue-429.t/run.t
@@ -355,7 +355,7 @@ First child `button`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -422,7 +422,7 @@ First child `onClick` prop
"line": 30,
"col": 75
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -482,7 +482,7 @@ First child `onClick` prop
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -549,7 +549,7 @@ First child `onClick` callback argument (event)
"line": 30,
"col": 46
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -561,7 +561,7 @@ First child `onClick` callback argument (event)
"line": 30,
"col": 46
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -573,7 +573,7 @@ First child `onClick` callback argument (event)
"line": 30,
"col": 75
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -633,7 +633,7 @@ First child `onClick` callback argument (event)
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -724,7 +724,7 @@ First child `onClick` prop `dispatch`
"line": 30,
"col": 46
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -736,7 +736,7 @@ First child `onClick` prop `dispatch`
"line": 30,
"col": 46
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -748,7 +748,7 @@ First child `onClick` prop `dispatch`
"line": 30,
"col": 75
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -808,7 +808,7 @@ First child `onClick` prop `dispatch`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -911,7 +911,7 @@ First child `onClick` prop `Click`
"line": 30,
"col": 46
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -923,7 +923,7 @@ First child `onClick` prop `Click`
"line": 30,
"col": 46
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -935,7 +935,7 @@ First child `onClick` prop `Click`
"line": 30,
"col": 75
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -995,7 +995,7 @@ First child `onClick` prop `Click`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1098,7 +1098,7 @@ First child `string`
"line": 30,
"col": 75
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1158,7 +1158,7 @@ First child `string`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1261,7 +1261,7 @@ First child `message`
"line": 30,
"col": 75
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1321,7 +1321,7 @@ First child `message`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1460,7 +1460,7 @@ Third child `state`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1599,7 +1599,7 @@ Third child `show` in `state.show`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1738,7 +1738,7 @@ Third child `string`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1877,7 +1877,7 @@ Third child `greeting`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -2004,7 +2004,7 @@ Third child `null`
"line": 35,
"col": 9
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
diff --git a/ppx/test/location.t/run.t b/ppx/test/location.t/run.t
index fcbebc3a2..1e39768ba 100644
--- a/ppx/test/location.t/run.t
+++ b/ppx/test/location.t/run.t
@@ -682,7 +682,7 @@
(Pexp_apply
((pexp_desc
(Pexp_ident
- ((txt (Ldot (Lident ReactDOM) jsx))
+ ((txt (Ldot (Ldot (Lident React) DOM) jsx))
(loc
((loc_start
((pos_fname output.ml) (pos_lnum 1) (pos_bol 0)
@@ -726,7 +726,7 @@
(Pexp_apply
((pexp_desc
(Pexp_ident
- ((txt (Ldot (Lident ReactDOM) domProps))
+ ((txt (Ldot (Ldot (Lident React) DOM) domProps))
(loc
((loc_start
((pos_fname output.ml) (pos_lnum 1) (pos_bol 0)
@@ -1669,7 +1669,7 @@
(Pexp_apply
((pexp_desc
(Pexp_ident
- ((txt (Ldot (Lident ReactDOM) jsx))
+ ((txt (Ldot (Ldot (Lident React) DOM) jsx))
(loc
((loc_start
((pos_fname output.ml) (pos_lnum 5) (pos_bol 256)
@@ -1713,7 +1713,7 @@
(Pexp_apply
((pexp_desc
(Pexp_ident
- ((txt (Ldot (Lident ReactDOM) domProps))
+ ((txt (Ldot (Ldot (Lident React) DOM) domProps))
(loc
((loc_start
((pos_fname output.ml) (pos_lnum 5)
diff --git a/ppx/test/lower.t/run.t b/ppx/test/lower.t/run.t
index 0898fb7b4..6c0708b7d 100644
--- a/ppx/test/lower.t/run.t
+++ b/ppx/test/lower.t/run.t
@@ -1,29 +1,32 @@
$ ../ppx.sh --output re input.re
- let lower = ReactDOM.jsx("div", ([@merlin.hide] ReactDOM.domProps)());
+ let lower = React.DOM.jsx("div", ([@merlin.hide] React.DOM.domProps)());
let lower_empty_attr =
- ReactDOM.jsx("div", ([@merlin.hide] ReactDOM.domProps)(~className="", ()));
+ React.DOM.jsx(
+ "div",
+ ([@merlin.hide] React.DOM.domProps)(~className="", ()),
+ );
let lower_inline_styles =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~style=ReactDOM.Style.make(~backgroundColor="gainsboro", ()),
(),
),
);
let lower_inner_html =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~dangerouslySetInnerHTML={"__html": text},
(),
),
);
let lower_opt_attr =
- ReactDOM.jsx("div", ([@merlin.hide] ReactDOM.domProps)(~tabIndex?, ()));
+ React.DOM.jsx("div", ([@merlin.hide] React.DOM.domProps)(~tabIndex?, ()));
let lowerWithChildAndProps = foo =>
- ReactDOM.jsx(
+ React.DOM.jsx(
"a",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=foo,
~tabIndex=1,
~href="https://example.com",
@@ -31,79 +34,79 @@
),
);
let lower_child_static =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
- ~children=ReactDOM.jsx("span", ([@merlin.hide] ReactDOM.domProps)()),
+ ([@merlin.hide] React.DOM.domProps)(
+ ~children=React.DOM.jsx("span", ([@merlin.hide] React.DOM.domProps)()),
(),
),
);
let lower_child_ident =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(~children=lolaspa, ()),
+ ([@merlin.hide] React.DOM.domProps)(~children=lolaspa, ()),
);
let lower_child_single =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
- ~children=ReactDOM.jsx("div", ([@merlin.hide] ReactDOM.domProps)()),
+ ([@merlin.hide] React.DOM.domProps)(
+ ~children=React.DOM.jsx("div", ([@merlin.hide] React.DOM.domProps)()),
(),
),
);
let lower_children_multiple = (foo, bar) =>
- ReactDOM.jsxs(
+ React.DOM.jsxs(
"lower",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=React.array([|foo, bar|]),
(),
),
);
let lower_child_with_upper_as_children =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=React.jsx(App.make, App.makeProps()),
(),
),
);
let lower_children_nested =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
- ReactDOM.jsxs(
+ React.DOM.jsxs(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
React.array([|
- ReactDOM.jsx(
+ React.DOM.jsx(
"h2",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children="jsoo-react" |> s,
~className="title",
(),
),
),
- ReactDOM.jsx(
+ React.DOM.jsx(
"nav",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
- ReactDOM.jsx(
+ React.DOM.jsx(
"ul",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
examples
|> List.map(e =>
let Key = e.path;
- ReactDOM.jsxKeyed(
+ React.DOM.jsxKeyed(
~key=Key,
"li",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
- ReactDOM.jsx(
+ React.DOM.jsx(
"a",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=e.title |> s,
~href=e.path,
~onClick=
@@ -139,9 +142,9 @@
),
);
let lower_ref_with_children =
- ReactDOM.jsx(
+ React.DOM.jsx(
"button",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children,
~ref,
~className="FancyButton",
@@ -149,35 +152,35 @@
),
);
let lower_with_many_props =
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
- ReactDOM.jsxs(
+ React.DOM.jsxs(
"picture",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=
React.array([|
- ReactDOM.jsx(
+ React.DOM.jsx(
"img",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~src="picture/img.png",
~alt="test picture/img.png",
~id="idimg",
(),
),
),
- ReactDOM.jsx(
+ React.DOM.jsx(
"source",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~type_="image/webp",
~src="picture/img1.webp",
(),
),
),
- ReactDOM.jsx(
+ React.DOM.jsx(
"source",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~type_="image/jpeg",
~src="picture/img2.jpg",
(),
@@ -193,7 +196,7 @@
),
);
let some_random_html_element =
- ReactDOM.jsx(
+ React.DOM.jsx(
"text",
- ([@merlin.hide] ReactDOM.domProps)(~dx="1 2", ~dy="3 4", ()),
+ ([@merlin.hide] React.DOM.domProps)(~dx="1 2", ~dy="3 4", ()),
);
diff --git a/ppx/test/simple.t/run.t b/ppx/test/simple.t/run.t
index 6e084b6f0..ffb8eacda 100644
--- a/ppx/test/simple.t/run.t
+++ b/ppx/test/simple.t/run.t
@@ -147,7 +147,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -262,7 +262,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -274,7 +274,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -286,7 +286,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -425,7 +425,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -437,7 +437,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -449,7 +449,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -600,7 +600,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -612,7 +612,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -624,7 +624,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -787,7 +787,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "ReactEvent.Mouse.t => unit",
+ "type": "React.Event.Mouse.t => unit",
"tail": "no"
},
{
@@ -799,7 +799,7 @@ Let's test hovering over parts of the component
"line": 6,
"col": 55
},
- "type": "option(ReactEvent.Mouse.t => unit)",
+ "type": "option(React.Event.Mouse.t => unit)",
"tail": "no"
},
{
@@ -811,7 +811,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -962,7 +962,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1113,7 +1113,7 @@ Let's test hovering over parts of the component
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
@@ -1240,7 +1240,7 @@ Closing ``
"line": 8,
"col": 14
},
- "type": "ReactDOM.domProps",
+ "type": "React.DOM.domProps",
"tail": "no"
},
{
diff --git a/ppx/test/upper.t/run.t b/ppx/test/upper.t/run.t
index a5ed6a84c..d2bd3c9bc 100644
--- a/ppx/test/upper.t/run.t
+++ b/ppx/test/upper.t/run.t
@@ -13,9 +13,9 @@
Page.make,
Page.makeProps(
~children=
- ReactDOM.jsx(
+ React.DOM.jsx(
"h1",
- ([@merlin.hide] ReactDOM.domProps)(
+ ([@merlin.hide] React.DOM.domProps)(
~children=React.string("Yep"),
(),
),
@@ -35,9 +35,9 @@
MyComponent.make,
MyComponent.makeProps(
~children=
- ReactDOM.jsx(
+ React.DOM.jsx(
"div",
- ([@merlin.hide] ReactDOM.domProps)(~children="hello", ()),
+ ([@merlin.hide] React.DOM.domProps)(~children="hello", ()),
),
~booleanAttribute=true,
~stringAttribute="string",
@@ -51,7 +51,7 @@
React.jsx(
FancyButton.make,
FancyButton.makeProps(
- ~children=ReactDOM.jsx("div", ([@merlin.hide] ReactDOM.domProps)()),
+ ~children=React.DOM.jsx("div", ([@merlin.hide] React.DOM.domProps)()),
~ref=buttonRef,
(),
),
diff --git a/src/React.re b/src/React.re
index 790775162..da24bc1e8 100644
--- a/src/React.re
+++ b/src/React.re
@@ -1,4 +1,8 @@
-type element;
+module DOM = DOM;
+module ErrorBoundary = ErrorBoundary;
+module Event = Event;
+module Router = Router;
+type element = Types.element;
external null: element = "null";
@@ -8,7 +12,7 @@ external string: string => element = "%identity";
external array: array(element) => element = "%identity";
-type componentLike('props, 'return) = 'props => 'return;
+type componentLike('props, 'return) = Types.componentLike('props, 'return);
type component('props) = componentLike('props, element);
@@ -46,7 +50,7 @@ external jsxsKeyed:
[@mel.module "react/jsx-runtime"] external jsxFragment: 'element = "Fragment";
-type ref('value) = {mutable current: 'value};
+type ref('value) = Types.ref('value) = {mutable current: 'value};
module Ref = {
[@deprecated "Please use the type React.ref instead"]
@@ -83,28 +87,7 @@ module Children = {
external toArray: element => array(element) = "toArray";
};
-module Context = {
- type t('props);
-
- [@mel.obj]
- external makeProps:
- (~value: 'props, ~children: element, unit) =>
- {
- .
- "value": 'props,
- "children": element,
- };
-
- [@mel.get]
- external provider:
- t('props) =>
- component({
- .
- "value": 'props,
- "children": element,
- }) =
- "Provider";
-};
+module Context = Context;
[@mel.module "react"]
external createContext: 'a => Context.t('a) = "createContext";
@@ -187,300 +170,8 @@ module SuspenseList = {
}) =
"SuspenseList";
};
-/* HOOKS */
-
-/*
- * Yeah, we know this api isn't great. tl;dr: useReducer instead.
- * It's because useState can take functions or non-function values and treats
- * them differently. Lazy initializer + callback which returns state is the
- * only way to safely have any type of state and be able to update it correctly.
- */
-[@mel.module "react"]
-external useState:
- ([@mel.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
- "useState";
-
-[@mel.module "react"]
-external useReducer:
- ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
- ('state, 'action => unit) =
- "useReducer";
-[@mel.module "react"]
-external useReducerWithMapState:
- (
- [@mel.uncurry] (('state, 'action) => 'state),
- 'initialState,
- [@mel.uncurry] ('initialState => 'state)
- ) =>
- ('state, 'action => unit) =
- "useReducer";
-
-[@mel.module "react"]
-external useEffect: ([@mel.uncurry] (unit => option(unit => unit))) => unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect0:
- (
- [@mel.uncurry] (unit => option(unit => unit)),
- [@mel.as {json|[]|json}] _
- ) =>
- unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect1:
- ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect2:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect3:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect4:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect5:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
- unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect6:
- (
- [@mel.uncurry] (unit => option(unit => unit)),
- ('a, 'b, 'c, 'd, 'e, 'f)
- ) =>
- unit =
- "useEffect";
-[@mel.module "react"]
-external useEffect7:
- (
- [@mel.uncurry] (unit => option(unit => unit)),
- ('a, 'b, 'c, 'd, 'e, 'f, 'g)
- ) =>
- unit =
- "useEffect";
-
-[@mel.module "react"]
-external useLayoutEffect:
- ([@mel.uncurry] (unit => option(unit => unit))) => unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect0:
- (
- [@mel.uncurry] (unit => option(unit => unit)),
- [@mel.as {json|[]|json}] _
- ) =>
- unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect1:
- ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect2:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect3:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect4:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect5:
- ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
- unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect6:
- (
- [@mel.uncurry] (unit => option(unit => unit)),
- ('a, 'b, 'c, 'd, 'e, 'f)
- ) =>
- unit =
- "useLayoutEffect";
-[@mel.module "react"]
-external useLayoutEffect7:
- (
- [@mel.uncurry] (unit => option(unit => unit)),
- ('a, 'b, 'c, 'd, 'e, 'f, 'g)
- ) =>
- unit =
- "useLayoutEffect";
-
-[@mel.module "react"]
-external useMemo: ([@mel.uncurry] (unit => 'any)) => 'any = "useMemo";
-[@mel.module "react"]
-external useMemo0:
- ([@mel.uncurry] (unit => 'any), [@mel.as {json|[]|json}] _) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo1: ([@mel.uncurry] (unit => 'any), array('a)) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo2: ([@mel.uncurry] (unit => 'any), ('a, 'b)) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo3: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c)) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo4: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd)) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo5:
- ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo6:
- ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any =
- "useMemo";
-[@mel.module "react"]
-external useMemo7:
- ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any =
- "useMemo";
-
-[@mel.module "react"] external useCallback: 'fn => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback0: ('fn, [@mel.as {json|[]|json}] _) => 'fn =
- "useCallback";
-[@mel.module "react"]
-external useCallback1: ('fn, array('a)) => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback2: ('fn, ('a, 'b)) => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback3: ('fn, ('a, 'b, 'c)) => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback4: ('fn, ('a, 'b, 'c, 'd)) => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback5: ('fn, ('a, 'b, 'c, 'd, 'e)) => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback6: ('fn, ('a, 'b, 'c, 'd, 'e, 'f)) => 'fn = "useCallback";
-[@mel.module "react"]
-external useCallback7: ('fn, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'fn =
- "useCallback";
-
-[@mel.module "react"]
-external useContext: Context.t('any) => 'any = "useContext";
-
-[@mel.module "react"] external useRef: 'value => ref('value) = "useRef";
-
-[@mel.module "react"]
-external useImperativeHandle0:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- [@mel.as {json|[]|json}] _
- ) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle1:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- array('a)
- ) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle2:
- (Js.Nullable.t(ref('value)), [@mel.uncurry] (unit => 'value), ('a, 'b)) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle3:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- ('a, 'b, 'c)
- ) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle4:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- ('a, 'b, 'c, 'd)
- ) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle5:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- ('a, 'b, 'c, 'd, 'e)
- ) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle6:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- ('a, 'b, 'c, 'd, 'e, 'f)
- ) =>
- unit =
- "useImperativeHandle";
-
-[@mel.module "react"]
-external useImperativeHandle7:
- (
- Js.Nullable.t(ref('value)),
- [@mel.uncurry] (unit => 'value),
- ('a, 'b, 'c, 'd, 'e, 'f, 'g)
- ) =>
- unit =
- "useImperativeHandle";
-
-module Uncurried = {
- [@mel.module "react"]
- external useState:
- ([@mel.uncurry] (unit => 'state)) =>
- ('state, (. ('state => 'state)) => unit) =
- "useState";
-
- [@mel.module "react"]
- external useReducer:
- ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
- ('state, (. 'action) => unit) =
- "useReducer";
-
- [@mel.module "react"]
- external useReducerWithMapState:
- (
- [@mel.uncurry] (('state, 'action) => 'state),
- 'initialState,
- [@mel.uncurry] ('initialState => 'state)
- ) =>
- ('state, (. 'action) => unit) =
- "useReducer";
-};
-
-/* This is used as return values */
-type callback('input, 'output) = 'input => 'output;
-
-type transitionConfig = {timeoutMs: int};
-
-[@mel.module "react"]
-external useTransition:
- (~config: transitionConfig=?, unit) =>
- (callback(callback(unit, unit), unit), bool) =
- "useTransition";
+include Hooks;
[@mel.set]
external setDisplayName: (component('props), string) => unit = "displayName";
diff --git a/src/React.rei b/src/React.rei
new file mode 100644
index 000000000..b92b26ea8
--- /dev/null
+++ b/src/React.rei
@@ -0,0 +1,2677 @@
+type element;
+type componentLike('props, 'return) = 'props => 'return;
+type component('props) = componentLike('props, element);
+
+external null: element = "null";
+
+external float: float => element = "%identity";
+external int: int => element = "%identity";
+external string: string => element = "%identity";
+
+external array: array(element) => element = "%identity";
+
+/* this function exists to prepare for making `component` abstract */
+external component: componentLike('props, element) => component('props) =
+ "%identity";
+
+[@mel.module "react"]
+external createElement: (component('props), 'props) => element =
+ "createElement";
+
+[@mel.module "react"]
+external cloneElement: (element, 'props) => element = "cloneElement";
+
+[@mel.splice] [@mel.module "react"]
+external createElementVariadic:
+ (component('props), 'props, array(element)) => element =
+ "createElement";
+
+[@mel.module "react/jsx-runtime"]
+external jsxKeyed:
+ (component('props), 'props, ~key: string=?, unit) => element =
+ "jsx";
+
+[@mel.module "react/jsx-runtime"]
+external jsx: (component('props), 'props) => element = "jsx";
+
+[@mel.module "react/jsx-runtime"]
+external jsxs: (component('props), 'props) => element = "jsxs";
+
+[@mel.module "react/jsx-runtime"]
+external jsxsKeyed:
+ (component('props), 'props, ~key: string=?, unit) => element =
+ "jsxs";
+
+[@mel.module "react/jsx-runtime"] external jsxFragment: 'element = "Fragment";
+
+type ref('value) = {mutable current: 'value};
+
+module Ref: {
+ [@deprecated "Please use the type React.ref instead"]
+ type t('value) = ref('value);
+
+ [@deprecated "Please directly read from ref.current instead"] [@mel.get]
+ external current: ref('value) => 'value = "current";
+
+ [@deprecated "Please directly assign to ref.current instead"] [@mel.set]
+ external setCurrent: (ref('value), 'value) => unit = "current";
+};
+
+[@mel.module "react"]
+external createRef: unit => ref(Js.nullable('a)) = "createRef";
+
+module Children: {
+ [@mel.module "react"] [@mel.scope "Children"]
+ external map: (element, element => element) => element = "map";
+ [@mel.module "react"] [@mel.scope "Children"]
+ external mapWithIndex:
+ (element, [@mel.uncurry] ((element, int) => element)) => element =
+ "map";
+ [@mel.module "react"] [@mel.scope "Children"]
+ external forEach: (element, element => unit) => unit = "forEach";
+ [@mel.module "react"] [@mel.scope "Children"]
+ external forEachWithIndex:
+ (element, [@mel.uncurry] ((element, int) => unit)) => unit =
+ "forEach";
+ [@mel.module "react"] [@mel.scope "Children"]
+ external count: element => int = "count";
+ [@mel.module "react"] [@mel.scope "Children"]
+ external only: element => element = "only";
+ [@mel.module "react"] [@mel.scope "Children"]
+ external toArray: element => array(element) = "toArray";
+};
+
+module Context: {
+ type t('props);
+
+ [@mel.obj]
+ external makeProps:
+ (~value: 'props, ~children: element, unit) =>
+ {
+ .
+ "value": 'props,
+ "children": element,
+ };
+
+ [@mel.get]
+ external provider:
+ t('props) =>
+ component({
+ .
+ "value": 'props,
+ "children": element,
+ }) =
+ "Provider";
+};
+
+[@mel.module "react"]
+external createContext: 'a => Context.t('a) = "createContext";
+
+[@mel.module "react"]
+external forwardRef:
+ ([@mel.uncurry] (('props, Js.Nullable.t(ref('a))) => element)) =>
+ component('props) =
+ "forwardRef";
+
+[@mel.module "react"]
+external memo: component('props) => component('props) = "memo";
+
+[@mel.module "react"]
+external memoCustomCompareProps:
+ (component('props), [@mel.uncurry] (('props, 'props) => bool)) =>
+ component('props) =
+ "memo";
+
+module Fragment: {
+ [@mel.obj]
+ external makeProps: (~children: element, unit) => {. "children": element};
+
+ [@mel.module "react"]
+ external make: component({. "children": element}) = "Fragment";
+};
+
+module StrictMode: {
+ [@mel.obj]
+ external makeProps: (~children: element, unit) => {. "children": element};
+ [@mel.module "react"]
+ external make: component({. "children": element}) = "StrictMode";
+};
+
+module Suspense: {
+ [@mel.obj]
+ external makeProps:
+ (~children: element=?, ~fallback: element=?, unit) =>
+ {
+ .
+ "children": option(element),
+ "fallback": option(element),
+ };
+ [@mel.module "react"]
+ external make:
+ component({
+ .
+ "children": option(element),
+ "fallback": option(element),
+ }) =
+ "Suspense";
+};
+
+/* Experimental React.SuspenseList */
+module SuspenseList: {
+ type revealOrder;
+ type tail;
+ [@mel.obj]
+ external makeProps:
+ (
+ ~children: element=?,
+ ~revealOrder: [ | `forwards | `backwards | `together]=?,
+ ~tail: [ | `collapsed | `hidden]=?,
+ unit
+ ) =>
+ {
+ .
+ "children": option(element),
+ "revealOrder": option(revealOrder),
+ "tail": option(tail),
+ };
+
+ [@mel.module "react"]
+ external make:
+ component({
+ .
+ "children": option(element),
+ "revealOrder": option(revealOrder),
+ "tail": option(tail),
+ }) =
+ "SuspenseList";
+};
+/* HOOKS */
+
+/*
+ * Yeah, we know this api isn't great. tl;dr: useReducer instead.
+ * It's because useState can take functions or non-function values and treats
+ * them differently. Lazy initializer + callback which returns state is the
+ * only way to safely have any type of state and be able to update it correctly.
+ */
+[@mel.module "react"]
+external useState:
+ ([@mel.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
+ "useState";
+
+[@mel.module "react"]
+external useReducer:
+ ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
+ ('state, 'action => unit) =
+ "useReducer";
+
+[@mel.module "react"]
+external useReducerWithMapState:
+ (
+ [@mel.uncurry] (('state, 'action) => 'state),
+ 'initialState,
+ [@mel.uncurry] ('initialState => 'state)
+ ) =>
+ ('state, 'action => unit) =
+ "useReducer";
+
+[@mel.module "react"]
+external useEffect: ([@mel.uncurry] (unit => option(unit => unit))) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect0:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ [@mel.as {json|[]|json}] _
+ ) =>
+ unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect1:
+ ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect2:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect3:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect4:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect5:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
+ unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect6:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f)
+ ) =>
+ unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect7:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f, 'g)
+ ) =>
+ unit =
+ "useEffect";
+
+[@mel.module "react"]
+external useLayoutEffect:
+ ([@mel.uncurry] (unit => option(unit => unit))) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect0:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ [@mel.as {json|[]|json}] _
+ ) =>
+ unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect1:
+ ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect2:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect3:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect4:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect5:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
+ unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect6:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f)
+ ) =>
+ unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect7:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f, 'g)
+ ) =>
+ unit =
+ "useLayoutEffect";
+
+[@mel.module "react"]
+external useMemo: ([@mel.uncurry] (unit => 'any)) => 'any = "useMemo";
+[@mel.module "react"]
+external useMemo0:
+ ([@mel.uncurry] (unit => 'any), [@mel.as {json|[]|json}] _) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo1: ([@mel.uncurry] (unit => 'any), array('a)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo2: ([@mel.uncurry] (unit => 'any), ('a, 'b)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo3: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo4: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo5:
+ ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo6:
+ ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo7:
+ ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any =
+ "useMemo";
+
+/* This is used as return values */
+type callback('input, 'output) = 'input => 'output;
+
+[@mel.module "react"] external useCallback: 'fn => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback0: ('fn, [@mel.as {json|[]|json}] _) => 'fn =
+ "useCallback";
+[@mel.module "react"]
+external useCallback1: ('fn, array('a)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback2: ('fn, ('a, 'b)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback3: ('fn, ('a, 'b, 'c)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback4: ('fn, ('a, 'b, 'c, 'd)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback5: ('fn, ('a, 'b, 'c, 'd, 'e)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback6: ('fn, ('a, 'b, 'c, 'd, 'e, 'f)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback7: ('fn, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'fn =
+ "useCallback";
+
+[@mel.module "react"]
+external useContext: Context.t('any) => 'any = "useContext";
+
+[@mel.module "react"] external useRef: 'value => ref('value) = "useRef";
+
+[@mel.module "react"]
+external useImperativeHandle0:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ [@mel.as {json|[]|json}] _
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle1:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ array('a)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle2:
+ (Js.Nullable.t(ref('value)), [@mel.uncurry] (unit => 'value), ('a, 'b)) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle3:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle4:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle5:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd, 'e)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle6:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd, 'e, 'f)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle7:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd, 'e, 'f, 'g)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+module Uncurried: {
+ [@mel.module "react"]
+ external useState:
+ ([@mel.uncurry] (unit => 'state)) =>
+ ('state, (. ('state => 'state)) => unit) =
+ "useState";
+
+ [@mel.module "react"]
+ external useReducer:
+ ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
+ ('state, (. 'action) => unit) =
+ "useReducer";
+
+ [@mel.module "react"]
+ external useReducerWithMapState:
+ (
+ [@mel.uncurry] (('state, 'action) => 'state),
+ 'initialState,
+ [@mel.uncurry] ('initialState => 'state)
+ ) =>
+ ('state, (. 'action) => unit) =
+ "useReducer";
+
+ type callback('input, 'output) = (. 'input) => 'output;
+
+ [@mel.module "react"]
+ external useCallback:
+ ([@mel.uncurry] ('input => 'output)) => callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback0:
+ ([@mel.uncurry] ('input => 'output), [@mel.as {json|[]|json}] _) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback1:
+ ([@mel.uncurry] ('input => 'output), array('a)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback2:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback3:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback4:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback5:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback6:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback7:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) =>
+ callback('input, 'output) =
+ "useCallback";
+};
+
+type transitionConfig = {timeoutMs: int};
+
+[@mel.module "react"]
+external useTransition:
+ (~config: transitionConfig=?, unit) =>
+ (callback(callback(unit, unit), unit), bool) =
+ "useTransition";
+
+[@mel.set]
+external setDisplayName: (component('props), string) => unit = "displayName";
+
+[@mel.get] [@mel.return nullable]
+external displayName: component('props) => option(string) = "displayName";
+
+module Event: {
+ /* This is the whole synthetic event system of ReactJS/ReasonReact. The first module `Synthetic` represents
+ the generic synthetic event. The rest are the specific ones.
+
+ In each module, the type `t` commonly means "the type of that module" (OCaml convention). In our case, e.g.
+ `ReactEvent.Mouse.t` represents a ReactJS synthetic mouse event. You'd use it to type your props:
+
+ ```
+ type props = {
+ onClick: ReactEvent.Mouse.t => unit
+ };
+ ```
+
+ All the methods and properties of a type of event are in the module, as seen below.
+
+ Each module also has a `tag` type. You can ignore it; they're only needed by their `t` type. This way, we
+ get to allow a base `Synthetic` event module with generic methods. So e.g. even a mouse event (`Mouse.t`)
+ get to be passed to a generic handler:
+
+ ```
+ let handleClick = ({state, props}, event) => {
+ ReactEvent.Mouse.preventDefault(event);
+ ...
+ };
+ let handleSubmit = ({state, props}, event) => {
+ /* this handler can be triggered by either a Keyboard or a Mouse event; conveniently use the generic
+ preventDefault */
+ ReactEvent.Synthetic.preventDefault(event);
+ ...
+ };
+
+ let render = (_) => ;
+ ```
+
+ How to translate idioms from ReactJS:
+
+ 1. myMouseEvent.preventDefault() -> ReactEvent.Mouse.preventDefault(myMouseEvent)
+ 2. myKeyboardEvent.which -> ReactEvent.Keyboard.which(myKeyboardEvent)
+ */
+ type synthetic('a);
+
+ module Synthetic: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: synthetic('a) => bool = "bubbles";
+ [@mel.get] external cancelable: synthetic('a) => bool = "cancelable";
+ [@mel.get]
+ external currentTarget: synthetic('a) => Js.t({..}) = "currentTarget";
+ [@mel.get]
+ external defaultPrevented: synthetic('a) => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: synthetic('a) => int = "eventPhase";
+ [@mel.get] external isTrusted: synthetic('a) => bool = "isTrusted";
+ [@mel.get]
+ external nativeEvent: synthetic('a) => Js.t({..}) = "nativeEvent";
+ [@mel.send]
+ external preventDefault: synthetic('a) => unit = "preventDefault";
+ [@mel.send]
+ external isDefaultPrevented: synthetic('a) => bool = "isDefaultPrevented";
+ [@mel.send]
+ external stopPropagation: synthetic('a) => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: synthetic('a) => bool =
+ "isPropagationStopped";
+ [@mel.get] external target: synthetic('a) => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: synthetic('a) => float = "timeStamp";
+ [@mel.get] external type_: synthetic('a) => string = "type";
+ [@mel.send] external persist: synthetic('a) => unit = "persist";
+ };
+
+ /* Cast any event type to the general synthetic type. This is safe, since synthetic is more general */
+ external toSyntheticEvent: synthetic('a) => Synthetic.t = "%identity";
+
+ module Clipboard: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external clipboardData: t => Js.t({..}) = "clipboardData"; /* Should return Dom.dataTransfer */
+ };
+
+ module Composition: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external data: t => string = "data";
+ };
+
+ module Drag: {
+ type tag;
+ type t = synthetic(tag);
+
+ // SyntheticEvent
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+
+ // MouseEvent
+ [@mel.get] external altKey: t => bool = "altKey";
+ [@mel.get] external button: t => int = "button";
+ [@mel.get] external buttons: t => int = "buttons";
+ [@mel.get] external clientX: t => int = "clientX";
+ [@mel.get] external clientY: t => int = "clientY";
+ [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+ [@mel.send]
+ external getModifierState: (t, string) => bool = "getModifierState";
+ [@mel.get] external metaKey: t => bool = "metaKey";
+ [@mel.get] external movementX: t => int = "movementX";
+ [@mel.get] external movementY: t => int = "movementY";
+ [@mel.get] external pageX: t => int = "pageX";
+ [@mel.get] external pageY: t => int = "pageY";
+ [@mel.get] [@mel.return nullable]
+ external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
+ [@mel.get] external screenX: t => int = "screenX";
+ [@mel.get] external screenY: t => int = "screenY";
+ [@mel.get] external shiftKey: t => bool = "shiftKey";
+
+ [@mel.get] external dataTransfer: t => Js.t({..}) = "dataTransfer"; /* Should return Dom.dataTransfer */
+ };
+
+ module Keyboard: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external altKey: t => bool = "altKey";
+ [@mel.get] external charCode: t => int = "charCode";
+ [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+ [@mel.send]
+ external getModifierState: (t, string) => bool = "getModifierState";
+ [@mel.get] external key: t => string = "key";
+ [@mel.get] external keyCode: t => int = "keyCode";
+ [@mel.get] external locale: t => string = "locale";
+ [@mel.get] external location: t => int = "location";
+ [@mel.get] external metaKey: t => bool = "metaKey";
+ [@mel.get] external repeat: t => bool = "repeat";
+ [@mel.get] external shiftKey: t => bool = "shiftKey";
+ [@mel.get] external which: t => int = "which";
+ };
+
+ module Focus: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] [@mel.return nullable]
+ external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
+ };
+
+ module Form: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ };
+
+ module Mouse: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external altKey: t => bool = "altKey";
+ [@mel.get] external button: t => int = "button";
+ [@mel.get] external buttons: t => int = "buttons";
+ [@mel.get] external clientX: t => int = "clientX";
+ [@mel.get] external clientY: t => int = "clientY";
+ [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+ [@mel.send]
+ external getModifierState: (t, string) => bool = "getModifierState";
+ [@mel.get] external metaKey: t => bool = "metaKey";
+ [@mel.get] external movementX: t => int = "movementX";
+ [@mel.get] external movementY: t => int = "movementY";
+ [@mel.get] external pageX: t => int = "pageX";
+ [@mel.get] external pageY: t => int = "pageY";
+ [@mel.get] [@mel.return nullable]
+ external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
+ [@mel.get] external screenX: t => int = "screenX";
+ [@mel.get] external screenY: t => int = "screenY";
+ [@mel.get] external shiftKey: t => bool = "shiftKey";
+ };
+
+ module Pointer: {
+ type tag;
+ type t = synthetic(tag);
+
+ // Event
+ [@mel.get] external type_: t => string = "type";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation"; // aka cancelBubble
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+
+ // SyntheticEvent
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.send] external persist: t => unit = "persist";
+
+ // UIEvent
+ [@mel.get] external detail: t => int = "detail";
+ [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
+
+ // MouseEvent
+ [@mel.get] external screenX: t => int = "screenX";
+ [@mel.get] external screenY: t => int = "screenY";
+ [@mel.get] external clientX: t => int = "clientX";
+ [@mel.get] external clientY: t => int = "clientY";
+ [@mel.get] external pageX: t => int = "pageX";
+ [@mel.get] external pageY: t => int = "pageY";
+ [@mel.get] external movementX: t => int = "movementX";
+ [@mel.get] external movementY: t => int = "movementY";
+
+ [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+ [@mel.get] external shiftKey: t => bool = "shiftKey";
+ [@mel.get] external altKey: t => bool = "altKey";
+ [@mel.get] external metaKey: t => bool = "metaKey";
+ [@mel.send]
+ external getModifierState: (t, string) => bool = "getModifierState";
+
+ [@mel.get] external button: t => int = "button";
+ [@mel.get] external buttons: t => int = "buttons";
+
+ [@mel.get] [@mel.return nullable]
+ external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
+
+ // PointerEvent
+ [@mel.get] external pointerId: t => Dom.eventPointerId = "pointerId";
+ [@mel.get] external width: t => float = "width";
+ [@mel.get] external height: t => float = "height";
+ [@mel.get] external pressure: t => float = "pressure";
+ [@mel.get] external tangentialPressure: t => float = "tangentialPressure";
+ [@mel.get] external tiltX: t => int = "tiltX";
+ [@mel.get] external tiltY: t => int = "tiltY";
+ [@mel.get] external twist: t => int = "twist";
+ [@mel.get] external pointerType: t => string = "pointerType";
+ [@mel.get] external isPrimary: t => bool = "isPrimary";
+ };
+
+ module Selection: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ };
+
+ module Touch: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external altKey: t => bool = "altKey";
+ [@mel.get] external changedTouches: t => Js.t({..}) = "changedTouches"; /* Should return Dom.touchList */
+ [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+ [@mel.send]
+ external getModifierState: (t, string) => bool = "getModifierState";
+ [@mel.get] external metaKey: t => bool = "metaKey";
+ [@mel.get] external shiftKey: t => bool = "shiftKey";
+ [@mel.get] external targetTouches: t => Js.t({..}) = "targetTouches"; /* Should return Dom.touchList */
+ [@mel.get] external touches: t => Js.t({..}) = "touches"; /* Should return Dom.touchList */
+ };
+
+ module UI: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external detail: t => int = "detail";
+ [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
+ };
+
+ module Wheel: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external deltaMode: t => int = "deltaMode";
+ [@mel.get] external deltaX: t => float = "deltaX";
+ [@mel.get] external deltaY: t => float = "deltaY";
+ [@mel.get] external deltaZ: t => float = "deltaZ";
+ };
+
+ module Media: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ };
+
+ module Image: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ };
+
+ module Animation: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external animationName: t => string = "animationName";
+ [@mel.get] external pseudoElement: t => string = "pseudoElement";
+ [@mel.get] external elapsedTime: t => float = "elapsedTime";
+ };
+
+ module Transition: {
+ type tag;
+ type t = synthetic(tag);
+ [@mel.get] external bubbles: t => bool = "bubbles";
+ [@mel.get] external cancelable: t => bool = "cancelable";
+ [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+ [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+ [@mel.get] external eventPhase: t => int = "eventPhase";
+ [@mel.get] external isTrusted: t => bool = "isTrusted";
+ [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+ [@mel.send] external preventDefault: t => unit = "preventDefault";
+ [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+ [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+ [@mel.send]
+ external isPropagationStopped: t => bool = "isPropagationStopped";
+ [@mel.get] external target: t => Js.t({..}) = "target";
+ [@mel.get] external timeStamp: t => float = "timeStamp";
+ [@mel.get] external type_: t => string = "type";
+ [@mel.send] external persist: t => unit = "persist";
+ [@mel.get] external propertyName: t => string = "propertyName";
+ [@mel.get] external pseudoElement: t => string = "pseudoElement";
+ [@mel.get] external elapsedTime: t => float = "elapsedTime";
+ };
+};
+
+module DOM: {
+ module Style: {
+ type t;
+
+ [@mel.obj]
+ external make:
+ (
+ ~azimuth: string=?,
+ ~background: string=?,
+ ~backgroundAttachment: string=?,
+ ~backgroundColor: string=?,
+ ~backgroundImage: string=?,
+ ~backgroundPosition: string=?,
+ ~backgroundRepeat: string=?,
+ ~border: string=?,
+ ~borderCollapse: string=?,
+ ~borderColor: string=?,
+ ~borderSpacing: string=?,
+ ~borderStyle: string=?,
+ ~borderTop: string=?,
+ ~borderRight: string=?,
+ ~borderBottom: string=?,
+ ~borderLeft: string=?,
+ ~borderTopColor: string=?,
+ ~borderRightColor: string=?,
+ ~borderBottomColor: string=?,
+ ~borderLeftColor: string=?,
+ ~borderTopStyle: string=?,
+ ~borderRightStyle: string=?,
+ ~borderBottomStyle: string=?,
+ ~borderLeftStyle: string=?,
+ ~borderTopWidth: string=?,
+ ~borderRightWidth: string=?,
+ ~borderBottomWidth: string=?,
+ ~borderLeftWidth: string=?,
+ ~borderWidth: string=?,
+ ~bottom: string=?,
+ ~captionSide: string=?,
+ ~clear: string=?,
+ ~clip: string=?,
+ ~color: string=?,
+ ~content: string=?,
+ ~counterIncrement: string=?,
+ ~counterReset: string=?,
+ ~cue: string=?,
+ ~cueAfter: string=?,
+ ~cueBefore: string=?,
+ ~cursor: string=?,
+ ~direction: string=?,
+ ~display: string=?,
+ ~elevation: string=?,
+ ~emptyCells: string=?,
+ ~float: string=?,
+ ~font: string=?,
+ ~fontFamily: string=?,
+ ~fontSize: string=?,
+ ~fontSizeAdjust: string=?,
+ ~fontStretch: string=?,
+ ~fontStyle: string=?,
+ ~fontVariant: string=?,
+ ~fontWeight: string=?,
+ ~height: string=?,
+ ~left: string=?,
+ ~letterSpacing: string=?,
+ ~lineHeight: string=?,
+ ~listStyle: string=?,
+ ~listStyleImage: string=?,
+ ~listStylePosition: string=?,
+ ~listStyleType: string=?,
+ ~margin: string=?,
+ ~marginTop: string=?,
+ ~marginRight: string=?,
+ ~marginBottom: string=?,
+ ~marginLeft: string=?,
+ ~markerOffset: string=?,
+ ~marks: string=?,
+ ~maxHeight: string=?,
+ ~maxWidth: string=?,
+ ~minHeight: string=?,
+ ~minWidth: string=?,
+ ~orphans: string=?,
+ ~outline: string=?,
+ ~outlineColor: string=?,
+ ~outlineStyle: string=?,
+ ~outlineWidth: string=?,
+ ~overflow: string=?,
+ ~overflowX: string=?,
+ ~overflowY: string=?,
+ ~padding: string=?,
+ ~paddingTop: string=?,
+ ~paddingRight: string=?,
+ ~paddingBottom: string=?,
+ ~paddingLeft: string=?,
+ ~page: string=?,
+ ~pageBreakAfter: string=?,
+ ~pageBreakBefore: string=?,
+ ~pageBreakInside: string=?,
+ ~pause: string=?,
+ ~pauseAfter: string=?,
+ ~pauseBefore: string=?,
+ ~pitch: string=?,
+ ~pitchRange: string=?,
+ ~playDuring: string=?,
+ ~position: string=?,
+ ~quotes: string=?,
+ ~richness: string=?,
+ ~right: string=?,
+ ~size: string=?,
+ ~speak: string=?,
+ ~speakHeader: string=?,
+ ~speakNumeral: string=?,
+ ~speakPunctuation: string=?,
+ ~speechRate: string=?,
+ ~stress: string=?,
+ ~tableLayout: string=?,
+ ~textAlign: string=?,
+ ~textDecoration: string=?,
+ ~textIndent: string=?,
+ ~textShadow: string=?,
+ ~textTransform: string=?,
+ ~top: string=?,
+ ~unicodeBidi: string=?,
+ ~verticalAlign: string=?,
+ ~visibility: string=?,
+ ~voiceFamily: string=?,
+ ~volume: string=?,
+ ~whiteSpace: string=?,
+ ~widows: string=?,
+ ~width: string=?,
+ ~wordSpacing: string=?,
+ ~zIndex: string=?,
+ /* Below properties based on https://www.w3.org/Style/CSS/all-properties */
+ /* Color Level 3 - REC */
+ ~opacity: string=?,
+ /* Backgrounds and Borders Level 3 - CR */
+ /* backgroundRepeat - already defined by CSS2Properties */
+ /* backgroundAttachment - already defined by CSS2Properties */
+ ~backgroundOrigin: string=?,
+ ~backgroundSize: string=?,
+ ~backgroundClip: string=?,
+ ~borderRadius: string=?,
+ ~borderTopLeftRadius: string=?,
+ ~borderTopRightRadius: string=?,
+ ~borderBottomLeftRadius: string=?,
+ ~borderBottomRightRadius: string=?,
+ ~borderImage: string=?,
+ ~borderImageSource: string=?,
+ ~borderImageSlice: string=?,
+ ~borderImageWidth: string=?,
+ ~borderImageOutset: string=?,
+ ~borderImageRepeat: string=?,
+ ~boxShadow: string=?,
+ /* Multi-column Layout - CR */
+ ~columns: string=?,
+ ~columnCount: string=?,
+ ~columnFill: string=?,
+ ~columnGap: string=?,
+ ~columnRule: string=?,
+ ~columnRuleColor: string=?,
+ ~columnRuleStyle: string=?,
+ ~columnRuleWidth: string=?,
+ ~columnSpan: string=?,
+ ~columnWidth: string=?,
+ ~breakAfter: string=?,
+ ~breakBefore: string=?,
+ ~breakInside: string=?,
+ /* Speech - CR */
+ ~rest: string=?,
+ ~restAfter: string=?,
+ ~restBefore: string=?,
+ ~speakAs: string=?,
+ ~voiceBalance: string=?,
+ ~voiceDuration: string=?,
+ ~voicePitch: string=?,
+ ~voiceRange: string=?,
+ ~voiceRate: string=?,
+ ~voiceStress: string=?,
+ ~voiceVolume: string=?,
+ /* Image Values and Replaced Content Level 3 - CR */
+ ~objectFit: string=?,
+ ~objectPosition: string=?,
+ ~imageResolution: string=?,
+ ~imageOrientation: string=?,
+ /* Flexible Box Layout - CR */
+ ~alignContent: string=?,
+ ~alignItems: string=?,
+ ~alignSelf: string=?,
+ ~flex: string=?,
+ ~flexBasis: string=?,
+ ~flexDirection: string=?,
+ ~flexFlow: string=?,
+ ~flexGrow: string=?,
+ ~flexShrink: string=?,
+ ~flexWrap: string=?,
+ ~justifyContent: string=?,
+ ~order: string=?,
+ /* Text Decoration Level 3 - CR */
+ /* textDecoration - already defined by CSS2Properties */
+ ~textDecorationColor: string=?,
+ ~textDecorationLine: string=?,
+ ~textDecorationSkip: string=?,
+ ~textDecorationStyle: string=?,
+ ~textEmphasis: string=?,
+ ~textEmphasisColor: string=?,
+ ~textEmphasisPosition: string=?,
+ ~textEmphasisStyle: string=?,
+ /* textShadow - already defined by CSS2Properties */
+ ~textUnderlinePosition: string=?,
+ /* Fonts Level 3 - CR */
+ ~fontFeatureSettings: string=?,
+ ~fontKerning: string=?,
+ ~fontLanguageOverride: string=?,
+ /* fontSizeAdjust - already defined by CSS2Properties */
+ /* fontStretch - already defined by CSS2Properties */
+ ~fontSynthesis: string=?,
+ ~forntVariantAlternates: string=?,
+ ~fontVariantCaps: string=?,
+ ~fontVariantEastAsian: string=?,
+ ~fontVariantLigatures: string=?,
+ ~fontVariantNumeric: string=?,
+ ~fontVariantPosition: string=?,
+ /* Cascading and Inheritance Level 3 - CR */
+ ~all: string=?,
+ /* Writing Modes Level 3 - CR */
+ ~glyphOrientationVertical: string=?,
+ ~textCombineUpright: string=?,
+ ~textOrientation: string=?,
+ ~writingMode: string=?,
+ /* Shapes Level 1 - CR */
+ ~shapeImageThreshold: string=?,
+ ~shapeMargin: string=?,
+ ~shapeOutside: string=?,
+ /* Masking Level 1 - CR */
+ ~clipPath: string=?,
+ ~clipRule: string=?,
+ ~mask: string=?,
+ ~maskBorder: string=?,
+ ~maskBorderMode: string=?,
+ ~maskBorderOutset: string=?,
+ ~maskBorderRepeat: string=?,
+ ~maskBorderSlice: string=?,
+ ~maskBorderSource: string=?,
+ ~maskBorderWidth: string=?,
+ ~maskClip: string=?,
+ ~maskComposite: string=?,
+ ~maskImage: string=?,
+ ~maskMode: string=?,
+ ~maskOrigin: string=?,
+ ~maskPosition: string=?,
+ ~maskRepeat: string=?,
+ ~maskSize: string=?,
+ ~maskType: string=?,
+ /* Compositing and Blending Level 1 - CR */
+ ~backgroundBlendMode: string=?,
+ ~isolation: string=?,
+ ~mixBlendMode: string=?,
+ /* Fragmentation Level 3 - CR */
+ ~boxDecorationBreak: string=?,
+ /* breakAfter - already defined by Multi-column Layout */
+ /* breakBefore - already defined by Multi-column Layout */
+ /* breakInside - already defined by Multi-column Layout */
+ /* Basic User Interface Level 3 - CR */
+ ~boxSizing: string=?,
+ ~caretColor: string=?,
+ ~navDown: string=?,
+ ~navLeft: string=?,
+ ~navRight: string=?,
+ ~navUp: string=?,
+ ~outlineOffset: string=?,
+ ~resize: string=?,
+ ~textOverflow: string=?,
+ /* Grid Layout Level 1 - CR */
+ ~grid: string=?,
+ ~gridArea: string=?,
+ ~gridAutoColumns: string=?,
+ ~gridAutoFlow: string=?,
+ ~gridAutoRows: string=?,
+ ~gridColumn: string=?,
+ ~gridColumnEnd: string=?,
+ ~gridColumnGap: string=?,
+ ~gridColumnStart: string=?,
+ ~gridGap: string=?,
+ ~gridRow: string=?,
+ ~gridRowEnd: string=?,
+ ~gridRowGap: string=?,
+ ~gridRowStart: string=?,
+ ~gridTemplate: string=?,
+ ~gridTemplateAreas: string=?,
+ ~gridTemplateColumns: string=?,
+ ~gridTemplateRows: string=?,
+ /* Will Change Level 1 - CR */
+ ~willChange: string=?,
+ /* Text Level 3 - LC */
+ ~hangingPunctuation: string=?,
+ ~hyphens: string=?,
+ /* letterSpacing - already defined by CSS2Properties */
+ ~lineBreak: string=?,
+ ~overflowWrap: string=?,
+ ~tabSize: string=?,
+ /* textAlign - already defined by CSS2Properties */
+ ~textAlignLast: string=?,
+ ~textJustify: string=?,
+ ~wordBreak: string=?,
+ ~wordWrap: string=?,
+ /* Animations - WD */
+ ~animation: string=?,
+ ~animationDelay: string=?,
+ ~animationDirection: string=?,
+ ~animationDuration: string=?,
+ ~animationFillMode: string=?,
+ ~animationIterationCount: string=?,
+ ~animationName: string=?,
+ ~animationPlayState: string=?,
+ ~animationTimingFunction: string=?,
+ /* Transitions - WD */
+ ~transition: string=?,
+ ~transitionDelay: string=?,
+ ~transitionDuration: string=?,
+ ~transitionProperty: string=?,
+ ~transitionTimingFunction: string=?,
+ /* Transforms Level 1 - WD */
+ ~backfaceVisibility: string=?,
+ ~perspective: string=?,
+ ~perspectiveOrigin: string=?,
+ ~transform: string=?,
+ ~transformOrigin: string=?,
+ ~transformStyle: string=?,
+ /* Box Alignment Level 3 - WD */
+ /* alignContent - already defined by Flexible Box Layout */
+ /* alignItems - already defined by Flexible Box Layout */
+ ~justifyItems: string=?,
+ ~justifySelf: string=?,
+ ~placeContent: string=?,
+ ~placeItems: string=?,
+ ~placeSelf: string=?,
+ /* Basic User Interface Level 4 - FPWD */
+ ~appearance: string=?,
+ ~caret: string=?,
+ ~caretAnimation: string=?,
+ ~caretShape: string=?,
+ ~userSelect: string=?,
+ /* Overflow Level 3 - WD */
+ ~maxLines: string=?,
+ /* Basix Box Model - WD */
+ ~marqueeDirection: string=?,
+ ~marqueeLoop: string=?,
+ ~marqueeSpeed: string=?,
+ ~marqueeStyle: string=?,
+ ~overflowStyle: string=?,
+ ~rotation: string=?,
+ ~rotationPoint: string=?,
+ /* SVG 1.1 - REC */
+ ~alignmentBaseline: string=?,
+ ~baselineShift: string=?,
+ ~clip: string=?,
+ ~clipPath: string=?,
+ ~clipRule: string=?,
+ ~colorInterpolation: string=?,
+ ~colorInterpolationFilters: string=?,
+ ~colorProfile: string=?,
+ ~colorRendering: string=?,
+ ~cursor: string=?,
+ ~dominantBaseline: string=?,
+ ~fill: string=?,
+ ~fillOpacity: string=?,
+ ~fillRule: string=?,
+ ~filter: string=?,
+ ~floodColor: string=?,
+ ~floodOpacity: string=?,
+ ~glyphOrientationHorizontal: string=?,
+ ~glyphOrientationVertical: string=?,
+ ~imageRendering: string=?,
+ ~kerning: string=?,
+ ~lightingColor: string=?,
+ ~markerEnd: string=?,
+ ~markerMid: string=?,
+ ~markerStart: string=?,
+ ~pointerEvents: string=?,
+ ~shapeRendering: string=?,
+ ~stopColor: string=?,
+ ~stopOpacity: string=?,
+ ~stroke: string=?,
+ ~strokeDasharray: string=?,
+ ~strokeDashoffset: string=?,
+ ~strokeLinecap: string=?,
+ ~strokeLinejoin: string=?,
+ ~strokeMiterlimit: string=?,
+ ~strokeOpacity: string=?,
+ ~strokeWidth: string=?,
+ ~textAnchor: string=?,
+ ~textRendering: string=?,
+ /* Ruby Layout Level 1 - WD */
+ ~rubyAlign: string=?,
+ ~rubyMerge: string=?,
+ ~rubyPosition: string=?,
+ /* Lists and Counters Level 3 - WD */
+ /* listStyle - already defined by CSS2Properties */
+ /* listStyleImage - already defined by CSS2Properties */
+ /* listStylePosition - already defined by CSS2Properties */
+ /* listStyleType - already defined by CSS2Properties */
+ /* counterIncrement - already defined by CSS2Properties */
+ /* counterReset - already defined by CSS2Properties */
+ /* Not added yet
+ * -------------
+ * Generated Content for Paged Media - WD
+ * Generated Content Level 3 - WD
+ * Line Grid Level 1 - WD
+ * Regions - WD
+ * Inline Layout Level 3 - WD
+ * Round Display Level 1 - WD
+ * Image Values and Replaced Content Level 4 - WD
+ * Positioned Layout Level 3 - WD
+ * Filter Effects Level 1 - -WD
+ * Exclusions Level 1 - WD
+ * Text Level 4 - FPWD
+ * SVG Markers - FPWD
+ * Motion Path Level 1 - FPWD
+ * Color Level 4 - FPWD
+ * SVG Strokes - FPWD
+ * Table Level 3 - FPWD
+ */
+ unit
+ ) =>
+ t;
+
+ /* CSS2Properties: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties */
+ external combine: ([@mel.as {json|{}|json}] _, t, t) => t =
+ "Object.assign";
+
+ external _dictToStyle: Js.Dict.t(string) => t = "%identity";
+
+ let unsafeAddProp: (t, string, string) => t;
+
+ external unsafeAddStyle: ([@mel.as {json|{}|json}] _, t, Js.t({..})) => t =
+ "Object.assign";
+ };
+
+ module Server: {
+ [@mel.module "react-dom/server"]
+ external renderToString: element => string = "renderToString";
+
+ [@mel.module "react-dom/server"]
+ external renderToStaticMarkup: element => string = "renderToStaticMarkup";
+ };
+
+ [@mel.return nullable]
+ external querySelector: string => option(Dom.element) =
+ "document.querySelector";
+
+ [@mel.module "react-dom"]
+ external render: (element, Dom.element) => unit = "render";
+
+ module Experimental: {
+ type root;
+
+ [@mel.module "react-dom"]
+ external createRoot: Dom.element => root = "createRoot";
+
+ [@mel.module "react-dom"]
+ external createBlockingRoot: Dom.element => root = "createBlockingRoot";
+
+ [@mel.send] external render: (root, element) => unit = "render";
+ };
+
+ [@mel.module "react-dom"]
+ external hydrate: (element, Dom.element) => unit = "hydrate";
+
+ [@mel.module "react-dom"]
+ external createPortal: (element, Dom.element) => element = "createPortal";
+
+ [@mel.module "react-dom"]
+ external unmountComponentAtNode: Dom.element => unit =
+ "unmountComponentAtNode";
+
+ external domElementToObj: Dom.element => Js.t({..}) = "%identity";
+
+ type style = Style.t;
+
+ type domRef;
+
+ module Ref: {
+ type t = domRef;
+ type currentDomRef = ref(Js.nullable(Dom.element));
+ type callbackDomRef = Js.nullable(Dom.element) => unit;
+
+ external domRef: currentDomRef => domRef = "%identity";
+ external callbackDomRef: callbackDomRef => domRef = "%identity";
+ };
+
+ /* This list isn't exhaustive. We'll add more as we go. */
+ /*
+ * Watch out! There are two props types and the only difference is the type of ref.
+ * Please keep in sync.
+ */
+ [@deriving abstract]
+ type domProps = {
+ [@mel.optional]
+ key: option(string),
+ [@mel.optional]
+ ref: option(domRef),
+ [@mel.optional]
+ children: option(element),
+ /* accessibility */
+ /* https://www.w3.org/TR/wai-aria-1.1/ */
+ [@mel.optional] [@mel.as "aria-activedescendant"]
+ ariaActivedescendant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendat */
+ [@mel.optional] [@mel.as "aria-atomic"]
+ ariaAtomic: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic */
+ [@mel.optional] [@mel.as "aria-autocomplete"]
+ ariaAutocomplete: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete */
+ [@mel.optional] [@mel.as "aria-busy"]
+ ariaBusy: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy */
+ [@mel.optional] [@mel.as "aria-checked"]
+ ariaChecked: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked */
+ [@mel.optional] [@mel.as "aria-colcount"]
+ ariaColcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount */
+ [@mel.optional] [@mel.as "aria-colindex"]
+ ariaColindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex */
+ [@mel.optional] [@mel.as "aria-colspan"]
+ ariaColspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan */
+ [@mel.optional] [@mel.as "aria-controls"]
+ ariaControls: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls */
+ [@mel.optional] [@mel.as "aria-current"]
+ ariaCurrent: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current */
+ [@mel.optional] [@mel.as "aria-describedby"]
+ ariaDescribedby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby */
+ [@mel.optional] [@mel.as "aria-details"]
+ ariaDetails: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details */
+ [@mel.optional] [@mel.as "aria-disabled"]
+ ariaDisabled: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled */
+ [@mel.optional] [@mel.as "aria-errormessage"]
+ ariaErrormessage: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage */
+ [@mel.optional] [@mel.as "aria-expanded"]
+ ariaExpanded: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded */
+ [@mel.optional] [@mel.as "aria-flowto"]
+ ariaFlowto: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto */
+ [@mel.optional] [@mel.as "aria-grabbed"] /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
+ ariaGrabbed: option(bool),
+ [@mel.optional] [@mel.as "aria-haspopup"]
+ ariaHaspopup: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup */
+ [@mel.optional] [@mel.as "aria-hidden"]
+ ariaHidden: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden */
+ [@mel.optional] [@mel.as "aria-invalid"]
+ ariaInvalid: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid */
+ [@mel.optional] [@mel.as "aria-keyshortcuts"]
+ ariaKeyshortcuts: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts */
+ [@mel.optional] [@mel.as "aria-label"]
+ ariaLabel: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
+ [@mel.optional] [@mel.as "aria-labelledby"]
+ ariaLabelledby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby */
+ [@mel.optional] [@mel.as "aria-level"]
+ ariaLevel: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level */
+ [@mel.optional] [@mel.as "aria-live"]
+ ariaLive: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live */
+ [@mel.optional] [@mel.as "aria-modal"]
+ ariaModal: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal */
+ [@mel.optional] [@mel.as "aria-multiline"]
+ ariaMultiline: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline */
+ [@mel.optional] [@mel.as "aria-multiselectable"]
+ ariaMultiselectable: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable */
+ [@mel.optional] [@mel.as "aria-orientation"]
+ ariaOrientation: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation */
+ [@mel.optional] [@mel.as "aria-owns"]
+ ariaOwns: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns */
+ [@mel.optional] [@mel.as "aria-placeholder"]
+ ariaPlaceholder: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder */
+ [@mel.optional] [@mel.as "aria-posinset"]
+ ariaPosinset: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset */
+ [@mel.optional] [@mel.as "aria-pressed"]
+ ariaPressed: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed */
+ [@mel.optional] [@mel.as "aria-readonly"]
+ ariaReadonly: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly */
+ [@mel.optional] [@mel.as "aria-relevant"]
+ ariaRelevant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
+ [@mel.optional] [@mel.as "aria-required"]
+ ariaRequired: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required */
+ [@mel.optional] [@mel.as "aria-roledescription"]
+ ariaRoledescription: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription */
+ [@mel.optional] [@mel.as "aria-rowcount"]
+ ariaRowcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount */
+ [@mel.optional] [@mel.as "aria-rowindex"]
+ ariaRowindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex */
+ [@mel.optional] [@mel.as "aria-rowindextext"]
+ ariaRowindextext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext */
+ [@mel.optional] [@mel.as "aria-rowspan"]
+ ariaRowspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan */
+ [@mel.optional] [@mel.as "aria-selected"]
+ ariaSelected: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected */
+ [@mel.optional] [@mel.as "aria-setsize"]
+ ariaSetsize: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize */
+ [@mel.optional] [@mel.as "aria-sort"]
+ ariaSort: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort */
+ [@mel.optional] [@mel.as "aria-valuemax"]
+ ariaValuemax: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax */
+ [@mel.optional] [@mel.as "aria-valuemin"]
+ ariaValuemin: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin */
+ [@mel.optional] [@mel.as "aria-valuenow"]
+ ariaValuenow: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow */
+ [@mel.optional] [@mel.as "aria-valuetext"]
+ ariaValuetext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext */
+ /* react textarea/input */
+ [@mel.optional]
+ defaultChecked: option(bool),
+ [@mel.optional]
+ defaultValue: option(string),
+ /* global html attributes */
+ [@mel.optional]
+ accessKey: option(string),
+ [@mel.optional]
+ className: option(string), /* substitute for "class" */
+ [@mel.optional]
+ contentEditable: option(bool),
+ [@mel.optional]
+ contextMenu: option(string),
+ [@mel.optional]
+ dir: option(string), /* "ltr", "rtl" or "auto" */
+ [@mel.optional]
+ draggable: option(bool),
+ [@mel.optional]
+ hidden: option(bool),
+ [@mel.optional]
+ id: option(string),
+ [@mel.optional]
+ lang: option(string),
+ [@mel.optional]
+ role: option(string), /* ARIA role */
+ [@mel.optional]
+ style: option(style),
+ [@mel.optional]
+ spellCheck: option(bool),
+ [@mel.optional]
+ tabIndex: option(int),
+ [@mel.optional]
+ title: option(string),
+ /* html5 microdata */
+ [@mel.optional]
+ itemID: option(string),
+ [@mel.optional]
+ itemProp: option(string),
+ [@mel.optional]
+ itemRef: option(string),
+ [@mel.optional]
+ itemScope: option(bool),
+ [@mel.optional]
+ itemType: option(string), /* uri */
+ /* tag-specific html attributes */
+ [@mel.optional] [@mel.as "as"]
+ as_: option(string),
+ [@mel.optional]
+ accept: option(string),
+ [@mel.optional]
+ acceptCharset: option(string),
+ [@mel.optional]
+ action: option(string), /* uri */
+ [@mel.optional]
+ allowFullScreen: option(bool),
+ [@mel.optional]
+ alt: option(string),
+ [@mel.optional]
+ async: option(bool),
+ [@mel.optional]
+ autoComplete: option(string), /* has a fixed, but large-ish, set of possible values */
+ [@mel.optional]
+ autoCapitalize: option(string), /* Mobile Safari specific */
+ [@mel.optional]
+ autoFocus: option(bool),
+ [@mel.optional]
+ autoPlay: option(bool),
+ [@mel.optional]
+ challenge: option(string),
+ [@mel.optional]
+ charSet: option(string),
+ [@mel.optional]
+ checked: option(bool),
+ [@mel.optional]
+ cite: option(string), /* uri */
+ [@mel.optional]
+ crossOrigin: option(string), /* anonymous, use-credentials */
+ [@mel.optional]
+ cols: option(int),
+ [@mel.optional]
+ colSpan: option(int),
+ [@mel.optional]
+ content: option(string),
+ [@mel.optional]
+ controls: option(bool),
+ [@mel.optional]
+ coords: option(string), /* set of values specifying the coordinates of a region */
+ [@mel.optional]
+ data: option(string), /* uri */
+ [@mel.optional]
+ dateTime: option(string), /* "valid date string with optional time" */
+ [@mel.optional]
+ default: option(bool),
+ [@mel.optional]
+ defer: option(bool),
+ [@mel.optional]
+ disabled: option(bool),
+ [@mel.optional]
+ download: option(string), /* should really be either a boolean, signifying presence, or a string */
+ [@mel.optional]
+ encType: option(string), /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */
+ [@mel.optional]
+ form: option(string),
+ [@mel.optional]
+ formAction: option(string), /* uri */
+ [@mel.optional]
+ formTarget: option(string), /* "_blank", "_self", etc. */
+ [@mel.optional]
+ formMethod: option(string), /* "post", "get", "put" */
+ [@mel.optional]
+ headers: option(string),
+ [@mel.optional]
+ height: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
+ [@mel.optional]
+ high: option(int),
+ [@mel.optional]
+ href: option(string), /* uri */
+ [@mel.optional]
+ hrefLang: option(string),
+ [@mel.optional]
+ htmlFor: option(string), /* substitute for "for" */
+ [@mel.optional]
+ httpEquiv: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ icon: option(string), /* uri? */
+ [@mel.optional]
+ inputMode: option(string), /* "verbatim", "latin", "numeric", etc. */
+ [@mel.optional]
+ integrity: option(string),
+ [@mel.optional]
+ keyType: option(string),
+ [@mel.optional]
+ kind: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ label: option(string),
+ [@mel.optional]
+ list: option(string),
+ [@mel.optional]
+ loop: option(bool),
+ [@mel.optional]
+ low: option(int),
+ [@mel.optional]
+ manifest: option(string), /* uri */
+ [@mel.optional]
+ max: option(string), /* should be int or Js.Date.t */
+ [@mel.optional]
+ maxLength: option(int),
+ [@mel.optional]
+ media: option(string), /* a valid media query */
+ [@mel.optional]
+ mediaGroup: option(string),
+ [@mel.optional]
+ method: option(string), /* "post" or "get" */
+ [@mel.optional]
+ min: option(string),
+ [@mel.optional]
+ minLength: option(int),
+ [@mel.optional]
+ multiple: option(bool),
+ [@mel.optional]
+ muted: option(bool),
+ [@mel.optional]
+ name: option(string),
+ [@mel.optional]
+ nonce: option(string),
+ [@mel.optional]
+ noValidate: option(bool),
+ [@mel.optional] [@mel.as "open"]
+ open_: option(bool), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ optimum: option(int),
+ [@mel.optional]
+ pattern: option(string), /* valid Js RegExp */
+ [@mel.optional]
+ placeholder: option(string),
+ [@mel.optional]
+ playsInline: option(bool),
+ [@mel.optional]
+ poster: option(string), /* uri */
+ [@mel.optional]
+ preload: option(string), /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */
+ [@mel.optional]
+ radioGroup: option(string),
+ [@mel.optional]
+ readOnly: option(bool),
+ [@mel.optional]
+ rel: option(string), /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */
+ [@mel.optional]
+ required: option(bool),
+ [@mel.optional]
+ reversed: option(bool),
+ [@mel.optional]
+ rows: option(int),
+ [@mel.optional]
+ rowSpan: option(int),
+ [@mel.optional]
+ sandbox: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ scope: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ scoped: option(bool),
+ [@mel.optional]
+ scrolling: option(string), /* html4 only, "auto", "yes" or "no" */
+ /* seamless - supported by React, but removed from the html5 spec */
+ [@mel.optional]
+ selected: option(bool),
+ [@mel.optional]
+ shape: option(string),
+ [@mel.optional]
+ size: option(int),
+ [@mel.optional]
+ sizes: option(string),
+ [@mel.optional]
+ span: option(int),
+ [@mel.optional]
+ src: option(string), /* uri */
+ [@mel.optional]
+ srcDoc: option(string),
+ [@mel.optional]
+ srcLang: option(string),
+ [@mel.optional]
+ srcSet: option(string),
+ [@mel.optional]
+ start: option(int),
+ [@mel.optional]
+ step: option(float),
+ [@mel.optional]
+ summary: option(string), /* deprecated */
+ [@mel.optional]
+ target: option(string),
+ [@mel.optional] [@mel.as "type"]
+ type_: option(string), /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ useMap: option(string),
+ [@mel.optional]
+ value: option(string),
+ [@mel.optional]
+ width: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
+ [@mel.optional]
+ wrap: option(string), /* "hard" or "soft" */
+ /* Clipboard events */
+ [@mel.optional]
+ onCopy: option(Event.Clipboard.t => unit),
+ [@mel.optional]
+ onCut: option(Event.Clipboard.t => unit),
+ [@mel.optional]
+ onPaste: option(Event.Clipboard.t => unit),
+ /* Composition events */
+ [@mel.optional]
+ onCompositionEnd: option(Event.Composition.t => unit),
+ [@mel.optional]
+ onCompositionStart: option(Event.Composition.t => unit),
+ [@mel.optional]
+ onCompositionUpdate: option(Event.Composition.t => unit),
+ /* Keyboard events */
+ [@mel.optional]
+ onKeyDown: option(Event.Keyboard.t => unit),
+ [@mel.optional]
+ onKeyPress: option(Event.Keyboard.t => unit),
+ [@mel.optional]
+ onKeyUp: option(Event.Keyboard.t => unit),
+ /* Focus events */
+ [@mel.optional]
+ onFocus: option(Event.Focus.t => unit),
+ [@mel.optional]
+ onBlur: option(Event.Focus.t => unit),
+ /* Form events */
+ [@mel.optional]
+ onChange: option(Event.Form.t => unit),
+ [@mel.optional]
+ onInput: option(Event.Form.t => unit),
+ [@mel.optional]
+ onSubmit: option(Event.Form.t => unit),
+ [@mel.optional]
+ onInvalid: option(Event.Form.t => unit),
+ /* Mouse events */
+ [@mel.optional]
+ onClick: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onContextMenu: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onDoubleClick: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onDrag: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragEnd: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragEnter: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragExit: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragLeave: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragOver: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragStart: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDrop: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onMouseDown: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseEnter: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseLeave: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseMove: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseOut: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseOver: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseUp: option(Event.Mouse.t => unit),
+ /* Selection events */
+ [@mel.optional]
+ onSelect: option(Event.Selection.t => unit),
+ /* Touch events */
+ [@mel.optional]
+ onTouchCancel: option(Event.Touch.t => unit),
+ [@mel.optional]
+ onTouchEnd: option(Event.Touch.t => unit),
+ [@mel.optional]
+ onTouchMove: option(Event.Touch.t => unit),
+ [@mel.optional]
+ onTouchStart: option(Event.Touch.t => unit),
+ // Pointer events
+ [@mel.optional]
+ onPointerOver: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerEnter: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerDown: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerMove: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerUp: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerCancel: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerOut: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerLeave: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onGotPointerCapture: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onLostPointerCapture: option(Event.Pointer.t => unit),
+ /* UI events */
+ [@mel.optional]
+ onScroll: option(Event.UI.t => unit),
+ /* Wheel events */
+ [@mel.optional]
+ onWheel: option(Event.Wheel.t => unit),
+ /* Media events */
+ [@mel.optional]
+ onAbort: option(Event.Media.t => unit),
+ [@mel.optional]
+ onCanPlay: option(Event.Media.t => unit),
+ [@mel.optional]
+ onCanPlayThrough: option(Event.Media.t => unit),
+ [@mel.optional]
+ onDurationChange: option(Event.Media.t => unit),
+ [@mel.optional]
+ onEmptied: option(Event.Media.t => unit),
+ [@mel.optional]
+ onEncrypetd: option(Event.Media.t => unit),
+ [@mel.optional]
+ onEnded: option(Event.Media.t => unit),
+ [@mel.optional]
+ onError: option(Event.Media.t => unit),
+ [@mel.optional]
+ onLoadedData: option(Event.Media.t => unit),
+ [@mel.optional]
+ onLoadedMetadata: option(Event.Media.t => unit),
+ [@mel.optional]
+ onLoadStart: option(Event.Media.t => unit),
+ [@mel.optional]
+ onPause: option(Event.Media.t => unit),
+ [@mel.optional]
+ onPlay: option(Event.Media.t => unit),
+ [@mel.optional]
+ onPlaying: option(Event.Media.t => unit),
+ [@mel.optional]
+ onProgress: option(Event.Media.t => unit),
+ [@mel.optional]
+ onRateChange: option(Event.Media.t => unit),
+ [@mel.optional]
+ onSeeked: option(Event.Media.t => unit),
+ [@mel.optional]
+ onSeeking: option(Event.Media.t => unit),
+ [@mel.optional]
+ onStalled: option(Event.Media.t => unit),
+ [@mel.optional]
+ onSuspend: option(Event.Media.t => unit),
+ [@mel.optional]
+ onTimeUpdate: option(Event.Media.t => unit),
+ [@mel.optional]
+ onVolumeChange: option(Event.Media.t => unit),
+ [@mel.optional]
+ onWaiting: option(Event.Media.t => unit),
+ /* Image events */
+ [@mel.optional]onLoad: option(Event.Image.t => unit) /* duplicate */, /*~onError: Event.Image.t => unit=?,*/
+ /* Animation events */
+ [@mel.optional]
+ onAnimationStart: option(Event.Animation.t => unit),
+ [@mel.optional]
+ onAnimationEnd: option(Event.Animation.t => unit),
+ [@mel.optional]
+ onAnimationIteration: option(Event.Animation.t => unit),
+ /* Transition events */
+ [@mel.optional]
+ onTransitionEnd: option(Event.Transition.t => unit),
+ /* svg */
+ [@mel.optional]
+ accentHeight: option(string),
+ [@mel.optional]
+ accumulate: option(string),
+ [@mel.optional]
+ additive: option(string),
+ [@mel.optional]
+ alignmentBaseline: option(string),
+ [@mel.optional]
+ allowReorder: option(string),
+ [@mel.optional]
+ alphabetic: option(string),
+ [@mel.optional]
+ amplitude: option(string),
+ [@mel.optional]
+ arabicForm: option(string),
+ [@mel.optional]
+ ascent: option(string),
+ [@mel.optional]
+ attributeName: option(string),
+ [@mel.optional]
+ attributeType: option(string),
+ [@mel.optional]
+ autoReverse: option(string),
+ [@mel.optional]
+ azimuth: option(string),
+ [@mel.optional]
+ baseFrequency: option(string),
+ [@mel.optional]
+ baseProfile: option(string),
+ [@mel.optional]
+ baselineShift: option(string),
+ [@mel.optional]
+ bbox: option(string),
+ [@mel.optional] [@mel.as "begin"]
+ begin_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ bias: option(string),
+ [@mel.optional]
+ by: option(string),
+ [@mel.optional]
+ calcMode: option(string),
+ [@mel.optional]
+ capHeight: option(string),
+ [@mel.optional]
+ clip: option(string),
+ [@mel.optional]
+ clipPath: option(string),
+ [@mel.optional]
+ clipPathUnits: option(string),
+ [@mel.optional]
+ clipRule: option(string),
+ [@mel.optional]
+ colorInterpolation: option(string),
+ [@mel.optional]
+ colorInterpolationFilters: option(string),
+ [@mel.optional]
+ colorProfile: option(string),
+ [@mel.optional]
+ colorRendering: option(string),
+ [@mel.optional]
+ contentScriptType: option(string),
+ [@mel.optional]
+ contentStyleType: option(string),
+ [@mel.optional]
+ cursor: option(string),
+ [@mel.optional]
+ cx: option(string),
+ [@mel.optional]
+ cy: option(string),
+ [@mel.optional]
+ d: option(string),
+ [@mel.optional]
+ decelerate: option(string),
+ [@mel.optional]
+ descent: option(string),
+ [@mel.optional]
+ diffuseConstant: option(string),
+ [@mel.optional]
+ direction: option(string),
+ [@mel.optional]
+ display: option(string),
+ [@mel.optional]
+ divisor: option(string),
+ [@mel.optional]
+ dominantBaseline: option(string),
+ [@mel.optional]
+ dur: option(string),
+ [@mel.optional]
+ dx: option(string),
+ [@mel.optional]
+ dy: option(string),
+ [@mel.optional]
+ edgeMode: option(string),
+ [@mel.optional]
+ elevation: option(string),
+ [@mel.optional]
+ enableBackground: option(string),
+ [@mel.optional] [@mel.as "end"]
+ end_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ exponent: option(string),
+ [@mel.optional]
+ externalResourcesRequired: option(string),
+ [@mel.optional]
+ fill: option(string),
+ [@mel.optional]
+ fillOpacity: option(string),
+ [@mel.optional]
+ fillRule: option(string),
+ [@mel.optional]
+ filter: option(string),
+ [@mel.optional]
+ filterRes: option(string),
+ [@mel.optional]
+ filterUnits: option(string),
+ [@mel.optional]
+ floodColor: option(string),
+ [@mel.optional]
+ floodOpacity: option(string),
+ [@mel.optional]
+ focusable: option(string),
+ [@mel.optional]
+ fontFamily: option(string),
+ [@mel.optional]
+ fontSize: option(string),
+ [@mel.optional]
+ fontSizeAdjust: option(string),
+ [@mel.optional]
+ fontStretch: option(string),
+ [@mel.optional]
+ fontStyle: option(string),
+ [@mel.optional]
+ fontVariant: option(string),
+ [@mel.optional]
+ fontWeight: option(string),
+ [@mel.optional]
+ fomat: option(string),
+ [@mel.optional]
+ from: option(string),
+ [@mel.optional]
+ fx: option(string),
+ [@mel.optional]
+ fy: option(string),
+ [@mel.optional]
+ g1: option(string),
+ [@mel.optional]
+ g2: option(string),
+ [@mel.optional]
+ glyphName: option(string),
+ [@mel.optional]
+ glyphOrientationHorizontal: option(string),
+ [@mel.optional]
+ glyphOrientationVertical: option(string),
+ [@mel.optional]
+ glyphRef: option(string),
+ [@mel.optional]
+ gradientTransform: option(string),
+ [@mel.optional]
+ gradientUnits: option(string),
+ [@mel.optional]
+ hanging: option(string),
+ [@mel.optional]
+ horizAdvX: option(string),
+ [@mel.optional]
+ horizOriginX: option(string),
+ [@mel.optional]
+ ideographic: option(string),
+ [@mel.optional]
+ imageRendering: option(string),
+ [@mel.optional] [@mel.as "in"]
+ in_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ in2: option(string),
+ [@mel.optional]
+ intercept: option(string),
+ [@mel.optional]
+ k: option(string),
+ [@mel.optional]
+ k1: option(string),
+ [@mel.optional]
+ k2: option(string),
+ [@mel.optional]
+ k3: option(string),
+ [@mel.optional]
+ k4: option(string),
+ [@mel.optional]
+ kernelMatrix: option(string),
+ [@mel.optional]
+ kernelUnitLength: option(string),
+ [@mel.optional]
+ kerning: option(string),
+ [@mel.optional]
+ keyPoints: option(string),
+ [@mel.optional]
+ keySplines: option(string),
+ [@mel.optional]
+ keyTimes: option(string),
+ [@mel.optional]
+ lengthAdjust: option(string),
+ [@mel.optional]
+ letterSpacing: option(string),
+ [@mel.optional]
+ lightingColor: option(string),
+ [@mel.optional]
+ limitingConeAngle: option(string),
+ [@mel.optional]
+ local: option(string),
+ [@mel.optional]
+ markerEnd: option(string),
+ [@mel.optional]
+ markerHeight: option(string),
+ [@mel.optional]
+ markerMid: option(string),
+ [@mel.optional]
+ markerStart: option(string),
+ [@mel.optional]
+ markerUnits: option(string),
+ [@mel.optional]
+ markerWidth: option(string),
+ [@mel.optional]
+ mask: option(string),
+ [@mel.optional]
+ maskContentUnits: option(string),
+ [@mel.optional]
+ maskUnits: option(string),
+ [@mel.optional]
+ mathematical: option(string),
+ [@mel.optional]
+ mode: option(string),
+ [@mel.optional]
+ numOctaves: option(string),
+ [@mel.optional]
+ offset: option(string),
+ [@mel.optional]
+ opacity: option(string),
+ [@mel.optional]
+ operator: option(string),
+ [@mel.optional]
+ order: option(string),
+ [@mel.optional]
+ orient: option(string),
+ [@mel.optional]
+ orientation: option(string),
+ [@mel.optional]
+ origin: option(string),
+ [@mel.optional]
+ overflow: option(string),
+ [@mel.optional]
+ overflowX: option(string),
+ [@mel.optional]
+ overflowY: option(string),
+ [@mel.optional]
+ overlinePosition: option(string),
+ [@mel.optional]
+ overlineThickness: option(string),
+ [@mel.optional]
+ paintOrder: option(string),
+ [@mel.optional]
+ panose1: option(string),
+ [@mel.optional]
+ pathLength: option(string),
+ [@mel.optional]
+ patternContentUnits: option(string),
+ [@mel.optional]
+ patternTransform: option(string),
+ [@mel.optional]
+ patternUnits: option(string),
+ [@mel.optional]
+ pointerEvents: option(string),
+ [@mel.optional]
+ points: option(string),
+ [@mel.optional]
+ pointsAtX: option(string),
+ [@mel.optional]
+ pointsAtY: option(string),
+ [@mel.optional]
+ pointsAtZ: option(string),
+ [@mel.optional]
+ preserveAlpha: option(string),
+ [@mel.optional]
+ preserveAspectRatio: option(string),
+ [@mel.optional]
+ primitiveUnits: option(string),
+ [@mel.optional]
+ r: option(string),
+ [@mel.optional]
+ radius: option(string),
+ [@mel.optional]
+ refX: option(string),
+ [@mel.optional]
+ refY: option(string),
+ [@mel.optional]
+ renderingIntent: option(string),
+ [@mel.optional]
+ repeatCount: option(string),
+ [@mel.optional]
+ repeatDur: option(string),
+ [@mel.optional]
+ requiredExtensions: option(string),
+ [@mel.optional]
+ requiredFeatures: option(string),
+ [@mel.optional]
+ restart: option(string),
+ [@mel.optional]
+ result: option(string),
+ [@mel.optional]
+ rotate: option(string),
+ [@mel.optional]
+ rx: option(string),
+ [@mel.optional]
+ ry: option(string),
+ [@mel.optional]
+ scale: option(string),
+ [@mel.optional]
+ seed: option(string),
+ [@mel.optional]
+ shapeRendering: option(string),
+ [@mel.optional]
+ slope: option(string),
+ [@mel.optional]
+ spacing: option(string),
+ [@mel.optional]
+ specularConstant: option(string),
+ [@mel.optional]
+ specularExponent: option(string),
+ [@mel.optional]
+ speed: option(string),
+ [@mel.optional]
+ spreadMethod: option(string),
+ [@mel.optional]
+ startOffset: option(string),
+ [@mel.optional]
+ stdDeviation: option(string),
+ [@mel.optional]
+ stemh: option(string),
+ [@mel.optional]
+ stemv: option(string),
+ [@mel.optional]
+ stitchTiles: option(string),
+ [@mel.optional]
+ stopColor: option(string),
+ [@mel.optional]
+ stopOpacity: option(string),
+ [@mel.optional]
+ strikethroughPosition: option(string),
+ [@mel.optional]
+ strikethroughThickness: option(string),
+ [@mel.optional]
+ string: option(string),
+ [@mel.optional]
+ stroke: option(string),
+ [@mel.optional]
+ strokeDasharray: option(string),
+ [@mel.optional]
+ strokeDashoffset: option(string),
+ [@mel.optional]
+ strokeLinecap: option(string),
+ [@mel.optional]
+ strokeLinejoin: option(string),
+ [@mel.optional]
+ strokeMiterlimit: option(string),
+ [@mel.optional]
+ strokeOpacity: option(string),
+ [@mel.optional]
+ strokeWidth: option(string),
+ [@mel.optional]
+ surfaceScale: option(string),
+ [@mel.optional]
+ systemLanguage: option(string),
+ [@mel.optional]
+ tableValues: option(string),
+ [@mel.optional]
+ targetX: option(string),
+ [@mel.optional]
+ targetY: option(string),
+ [@mel.optional]
+ textAnchor: option(string),
+ [@mel.optional]
+ textDecoration: option(string),
+ [@mel.optional]
+ textLength: option(string),
+ [@mel.optional]
+ textRendering: option(string),
+ [@mel.optional] [@mel.as "to"]
+ to_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ transform: option(string),
+ [@mel.optional]
+ u1: option(string),
+ [@mel.optional]
+ u2: option(string),
+ [@mel.optional]
+ underlinePosition: option(string),
+ [@mel.optional]
+ underlineThickness: option(string),
+ [@mel.optional]
+ unicode: option(string),
+ [@mel.optional]
+ unicodeBidi: option(string),
+ [@mel.optional]
+ unicodeRange: option(string),
+ [@mel.optional]
+ unitsPerEm: option(string),
+ [@mel.optional]
+ vAlphabetic: option(string),
+ [@mel.optional]
+ vHanging: option(string),
+ [@mel.optional]
+ vIdeographic: option(string),
+ [@mel.optional]
+ vMathematical: option(string),
+ [@mel.optional]
+ values: option(string),
+ [@mel.optional]
+ vectorEffect: option(string),
+ [@mel.optional]
+ version: option(string),
+ [@mel.optional]
+ vertAdvX: option(string),
+ [@mel.optional]
+ vertAdvY: option(string),
+ [@mel.optional]
+ vertOriginX: option(string),
+ [@mel.optional]
+ vertOriginY: option(string),
+ [@mel.optional]
+ viewBox: option(string),
+ [@mel.optional]
+ viewTarget: option(string),
+ [@mel.optional]
+ visibility: option(string),
+ /*width::string? =>*/
+ [@mel.optional]
+ widths: option(string),
+ [@mel.optional]
+ wordSpacing: option(string),
+ [@mel.optional]
+ writingMode: option(string),
+ [@mel.optional]
+ x: option(string),
+ [@mel.optional]
+ x1: option(string),
+ [@mel.optional]
+ x2: option(string),
+ [@mel.optional]
+ xChannelSelector: option(string),
+ [@mel.optional]
+ xHeight: option(string),
+ [@mel.optional]
+ xlinkActuate: option(string),
+ [@mel.optional]
+ xlinkArcrole: option(string),
+ [@mel.optional]
+ xlinkHref: option(string),
+ [@mel.optional]
+ xlinkRole: option(string),
+ [@mel.optional]
+ xlinkShow: option(string),
+ [@mel.optional]
+ xlinkTitle: option(string),
+ [@mel.optional]
+ xlinkType: option(string),
+ [@mel.optional]
+ xmlns: option(string),
+ [@mel.optional]
+ xmlnsXlink: option(string),
+ [@mel.optional]
+ xmlBase: option(string),
+ [@mel.optional]
+ xmlLang: option(string),
+ [@mel.optional]
+ xmlSpace: option(string),
+ [@mel.optional]
+ y: option(string),
+ [@mel.optional]
+ y1: option(string),
+ [@mel.optional]
+ y2: option(string),
+ [@mel.optional]
+ yChannelSelector: option(string),
+ [@mel.optional]
+ z: option(string),
+ [@mel.optional]
+ zoomAndPan: option(string),
+ /* RDFa */
+ [@mel.optional]
+ about: option(string),
+ [@mel.optional]
+ datatype: option(string),
+ [@mel.optional]
+ inlist: option(string),
+ [@mel.optional]
+ prefix: option(string),
+ [@mel.optional]
+ property: option(string),
+ [@mel.optional]
+ resource: option(string),
+ [@mel.optional]
+ typeof: option(string),
+ [@mel.optional]
+ vocab: option(string),
+ /* react-specific */
+ [@mel.optional]
+ dangerouslySetInnerHTML: option({. "__html": string}),
+ [@mel.optional]
+ suppressContentEditableWarning: option(bool),
+ [@mel.optional]
+ suppressHydrationWarning: option(bool),
+ };
+
+ // As we've removed `ReactDOMRe.createElement`, this enables patterns like
+ // React.createElement(ReactDOM.stringToComponent(multiline ? "textarea" : "input"), ...)
+ external stringToComponent: string => component(domProps) = "%identity";
+
+ [@mel.variadic] [@mel.module "react"]
+ external createElement:
+ (string, ~props: domProps=?, array(element)) => element =
+ "createElement";
+
+ [@mel.variadic] [@mel.module "react"]
+ external createDOMElementVariadic:
+ (string, ~props: domProps=?, array(element)) => element =
+ "createElement";
+
+ [@mel.module "react/jsx-runtime"]
+ external jsxKeyed: (string, domProps, ~key: string=?, unit) => element =
+ "jsx";
+
+ [@mel.module "react/jsx-runtime"]
+ external jsx: (string, domProps) => element = "jsx";
+
+ [@mel.module "react/jsx-runtime"]
+ external jsxs: (string, domProps) => element = "jsxs";
+
+ [@mel.module "react/jsx-runtime"]
+ external jsxsKeyed: (string, domProps, ~key: string=?, unit) => element =
+ "jsxs";
+};
+
+module ErrorBoundary: {
+ /**
+ * Important note on this module:
+ * As soon as React provides a mechanism for error-catching using functional component,
+ * this is likely to be deprecated and/or move to user space.
+ */
+ type info = {componentStack: string};
+
+ type params('error) = {
+ error: 'error,
+ info,
+ };
+
+ module React := Types;
+
+ [@react.component]
+ let make:
+ (~children: element, ~fallback: params('error) => element) => element;
+};
+
+module Router: {
+ /** update the url with the string path. Example: `push("/book/1")`, `push("/books#title")` */
+ let push: string => unit;
+ /** update the url with the string path. modifies the current history entry instead of creating a new one. Example: `replace("/book/1")`, `replace("/books#title")` */
+ let replace: string => unit;
+ type watcherID;
+ type url = {
+ /* path takes window.location.path, like "/book/title/edit" and turns it into `["book", "title", "edit"]` */
+ path: list(string),
+ /* the url's hash, if any. The # symbol is stripped out for you */
+ hash: string,
+ /* the url's query params, if any. The ? symbol is stripped out for you */
+ search: string,
+ };
+ /** start watching for URL changes. Returns a subscription token. Upon url change, calls the callback and passes it the url record */
+ let watchUrl: (url => unit) => watcherID;
+ /** stop watching for URL changes */
+ let unwatchUrl: watcherID => unit;
+ /** this is marked as "dangerous" because you technically shouldn't be accessing the URL outside of watchUrl's callback;
+ you'd read a potentially stale url, instead of the fresh one inside watchUrl.
+
+ But this helper is sometimes needed, if you'd like to initialize a page whose display/state depends on the URL,
+ instead of reading from it in watchUrl's callback, which you'd probably have put inside didMount (aka too late,
+ the page's already rendered).
+
+ So, the correct (and idiomatic) usage of this helper is to only use it in a component that's also subscribed to
+ watchUrl. Please see https://github.com/reasonml-community/reason-react-example/blob/master/src/todomvc/TodoItem.re
+ for an example.
+ */
+ let dangerouslyGetInitialUrl: (~serverUrlString: string=?, unit) => url;
+ /** hook for watching url changes.
+ * serverUrl is used for ssr. it allows you to specify the url without relying on browser apis existing/working as expected
+ */
+ let useUrl: (~serverUrl: url=?, unit) => url;
+};
diff --git a/src/ReactDOM.re b/src/ReactDOM.re
deleted file mode 100644
index 8d7794e08..000000000
--- a/src/ReactDOM.re
+++ /dev/null
@@ -1,1120 +0,0 @@
-/* First time reading an OCaml/Reason/BuckleScript file? */
-/* `external` is the foreign function call in OCaml. */
-/* here we're saying `I guarantee that on the JS side, we have a `render` function in the module "react-dom"
- that takes in a reactElement, a dom element, and returns unit (nothing) */
-/* It's like `let`, except you're pointing the implementation to the JS side. The compiler will inline these
- calls and add the appropriate `require("react-dom")` in the file calling this `render` */
-
-// Helper so that ReactDOM itself doesn't bring any runtime
-[@mel.return nullable]
-external querySelector: string => option(Dom.element) =
- "document.querySelector";
-
-[@mel.module "react-dom"]
-external render: (React.element, Dom.element) => unit = "render";
-
-module Experimental = {
- type root;
-
- [@mel.module "react-dom"]
- external createRoot: Dom.element => root = "createRoot";
-
- [@mel.module "react-dom"]
- external createBlockingRoot: Dom.element => root = "createBlockingRoot";
-
- [@mel.send] external render: (root, React.element) => unit = "render";
-};
-
-[@mel.module "react-dom"]
-external hydrate: (React.element, Dom.element) => unit = "hydrate";
-
-[@mel.module "react-dom"]
-external createPortal: (React.element, Dom.element) => React.element =
- "createPortal";
-
-[@mel.module "react-dom"]
-external unmountComponentAtNode: Dom.element => unit =
- "unmountComponentAtNode";
-
-external domElementToObj: Dom.element => Js.t({..}) = "%identity";
-
-type style = ReactDOMStyle.t;
-
-type domRef;
-
-module Ref = {
- type t = domRef;
- type currentDomRef = React.ref(Js.nullable(Dom.element));
- type callbackDomRef = Js.nullable(Dom.element) => unit;
-
- external domRef: currentDomRef => domRef = "%identity";
- external callbackDomRef: callbackDomRef => domRef = "%identity";
-};
-
-module Props = {
- /* This list isn't exhaustive. We'll add more as we go. */
- /*
- * Watch out! There are two props types and the only difference is the type of ref.
- * Please keep in sync.
- */
- [@deriving abstract]
- type domProps = {
- [@mel.optional]
- key: option(string),
- [@mel.optional]
- ref: option(domRef),
- [@mel.optional]
- children: option(React.element),
- /* accessibility */
- /* https://www.w3.org/TR/wai-aria-1.1/ */
- [@mel.optional] [@mel.as "aria-activedescendant"]
- ariaActivedescendant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendat */
- [@mel.optional] [@mel.as "aria-atomic"]
- ariaAtomic: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic */
- [@mel.optional] [@mel.as "aria-autocomplete"]
- ariaAutocomplete: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete */
- [@mel.optional] [@mel.as "aria-busy"]
- ariaBusy: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy */
- [@mel.optional] [@mel.as "aria-checked"]
- ariaChecked: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked */
- [@mel.optional] [@mel.as "aria-colcount"]
- ariaColcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount */
- [@mel.optional] [@mel.as "aria-colindex"]
- ariaColindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex */
- [@mel.optional] [@mel.as "aria-colspan"]
- ariaColspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan */
- [@mel.optional] [@mel.as "aria-controls"]
- ariaControls: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls */
- [@mel.optional] [@mel.as "aria-current"]
- ariaCurrent: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current */
- [@mel.optional] [@mel.as "aria-describedby"]
- ariaDescribedby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby */
- [@mel.optional] [@mel.as "aria-details"]
- ariaDetails: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details */
- [@mel.optional] [@mel.as "aria-disabled"]
- ariaDisabled: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled */
- [@mel.optional] [@mel.as "aria-errormessage"]
- ariaErrormessage: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage */
- [@mel.optional] [@mel.as "aria-expanded"]
- ariaExpanded: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded */
- [@mel.optional] [@mel.as "aria-flowto"]
- ariaFlowto: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto */
- [@mel.optional] [@mel.as "aria-grabbed"] /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
- ariaGrabbed: option(bool),
- [@mel.optional] [@mel.as "aria-haspopup"]
- ariaHaspopup: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup */
- [@mel.optional] [@mel.as "aria-hidden"]
- ariaHidden: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden */
- [@mel.optional] [@mel.as "aria-invalid"]
- ariaInvalid: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid */
- [@mel.optional] [@mel.as "aria-keyshortcuts"]
- ariaKeyshortcuts: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts */
- [@mel.optional] [@mel.as "aria-label"]
- ariaLabel: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
- [@mel.optional] [@mel.as "aria-labelledby"]
- ariaLabelledby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby */
- [@mel.optional] [@mel.as "aria-level"]
- ariaLevel: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level */
- [@mel.optional] [@mel.as "aria-live"]
- ariaLive: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live */
- [@mel.optional] [@mel.as "aria-modal"]
- ariaModal: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal */
- [@mel.optional] [@mel.as "aria-multiline"]
- ariaMultiline: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline */
- [@mel.optional] [@mel.as "aria-multiselectable"]
- ariaMultiselectable: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable */
- [@mel.optional] [@mel.as "aria-orientation"]
- ariaOrientation: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation */
- [@mel.optional] [@mel.as "aria-owns"]
- ariaOwns: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns */
- [@mel.optional] [@mel.as "aria-placeholder"]
- ariaPlaceholder: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder */
- [@mel.optional] [@mel.as "aria-posinset"]
- ariaPosinset: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset */
- [@mel.optional] [@mel.as "aria-pressed"]
- ariaPressed: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed */
- [@mel.optional] [@mel.as "aria-readonly"]
- ariaReadonly: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly */
- [@mel.optional] [@mel.as "aria-relevant"]
- ariaRelevant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
- [@mel.optional] [@mel.as "aria-required"]
- ariaRequired: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required */
- [@mel.optional] [@mel.as "aria-roledescription"]
- ariaRoledescription: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription */
- [@mel.optional] [@mel.as "aria-rowcount"]
- ariaRowcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount */
- [@mel.optional] [@mel.as "aria-rowindex"]
- ariaRowindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex */
- [@mel.optional] [@mel.as "aria-rowindextext"]
- ariaRowindextext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext */
- [@mel.optional] [@mel.as "aria-rowspan"]
- ariaRowspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan */
- [@mel.optional] [@mel.as "aria-selected"]
- ariaSelected: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected */
- [@mel.optional] [@mel.as "aria-setsize"]
- ariaSetsize: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize */
- [@mel.optional] [@mel.as "aria-sort"]
- ariaSort: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort */
- [@mel.optional] [@mel.as "aria-valuemax"]
- ariaValuemax: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax */
- [@mel.optional] [@mel.as "aria-valuemin"]
- ariaValuemin: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin */
- [@mel.optional] [@mel.as "aria-valuenow"]
- ariaValuenow: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow */
- [@mel.optional] [@mel.as "aria-valuetext"]
- ariaValuetext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext */
- /* react textarea/input */
- [@mel.optional]
- defaultChecked: option(bool),
- [@mel.optional]
- defaultValue: option(string),
- /* global html attributes */
- [@mel.optional]
- accessKey: option(string),
- [@mel.optional]
- className: option(string), /* substitute for "class" */
- [@mel.optional]
- contentEditable: option(bool),
- [@mel.optional]
- contextMenu: option(string),
- [@mel.optional]
- dir: option(string), /* "ltr", "rtl" or "auto" */
- [@mel.optional]
- draggable: option(bool),
- [@mel.optional]
- hidden: option(bool),
- [@mel.optional]
- id: option(string),
- [@mel.optional]
- lang: option(string),
- [@mel.optional]
- role: option(string), /* ARIA role */
- [@mel.optional]
- style: option(style),
- [@mel.optional]
- spellCheck: option(bool),
- [@mel.optional]
- tabIndex: option(int),
- [@mel.optional]
- title: option(string),
- /* html5 microdata */
- [@mel.optional]
- itemID: option(string),
- [@mel.optional]
- itemProp: option(string),
- [@mel.optional]
- itemRef: option(string),
- [@mel.optional]
- itemScope: option(bool),
- [@mel.optional]
- itemType: option(string), /* uri */
- /* tag-specific html attributes */
- [@mel.optional] [@mel.as "as"]
- as_: option(string),
- [@mel.optional]
- accept: option(string),
- [@mel.optional]
- acceptCharset: option(string),
- [@mel.optional]
- action: option(string), /* uri */
- [@mel.optional]
- allowFullScreen: option(bool),
- [@mel.optional]
- alt: option(string),
- [@mel.optional]
- async: option(bool),
- [@mel.optional]
- autoComplete: option(string), /* has a fixed, but large-ish, set of possible values */
- [@mel.optional]
- autoCapitalize: option(string), /* Mobile Safari specific */
- [@mel.optional]
- autoFocus: option(bool),
- [@mel.optional]
- autoPlay: option(bool),
- [@mel.optional]
- challenge: option(string),
- [@mel.optional]
- charSet: option(string),
- [@mel.optional]
- checked: option(bool),
- [@mel.optional]
- cite: option(string), /* uri */
- [@mel.optional]
- crossOrigin: option(string), /* anonymous, use-credentials */
- [@mel.optional]
- cols: option(int),
- [@mel.optional]
- colSpan: option(int),
- [@mel.optional]
- content: option(string),
- [@mel.optional]
- controls: option(bool),
- [@mel.optional]
- coords: option(string), /* set of values specifying the coordinates of a region */
- [@mel.optional]
- data: option(string), /* uri */
- [@mel.optional]
- dateTime: option(string), /* "valid date string with optional time" */
- [@mel.optional]
- default: option(bool),
- [@mel.optional]
- defer: option(bool),
- [@mel.optional]
- disabled: option(bool),
- [@mel.optional]
- download: option(string), /* should really be either a boolean, signifying presence, or a string */
- [@mel.optional]
- encType: option(string), /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */
- [@mel.optional]
- form: option(string),
- [@mel.optional]
- formAction: option(string), /* uri */
- [@mel.optional]
- formTarget: option(string), /* "_blank", "_self", etc. */
- [@mel.optional]
- formMethod: option(string), /* "post", "get", "put" */
- [@mel.optional]
- headers: option(string),
- [@mel.optional]
- height: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
- [@mel.optional]
- high: option(int),
- [@mel.optional]
- href: option(string), /* uri */
- [@mel.optional]
- hrefLang: option(string),
- [@mel.optional]
- htmlFor: option(string), /* substitute for "for" */
- [@mel.optional]
- httpEquiv: option(string), /* has a fixed set of possible values */
- [@mel.optional]
- icon: option(string), /* uri? */
- [@mel.optional]
- inputMode: option(string), /* "verbatim", "latin", "numeric", etc. */
- [@mel.optional]
- integrity: option(string),
- [@mel.optional]
- keyType: option(string),
- [@mel.optional]
- kind: option(string), /* has a fixed set of possible values */
- [@mel.optional]
- label: option(string),
- [@mel.optional]
- list: option(string),
- [@mel.optional]
- loop: option(bool),
- [@mel.optional]
- low: option(int),
- [@mel.optional]
- manifest: option(string), /* uri */
- [@mel.optional]
- max: option(string), /* should be int or Js.Date.t */
- [@mel.optional]
- maxLength: option(int),
- [@mel.optional]
- media: option(string), /* a valid media query */
- [@mel.optional]
- mediaGroup: option(string),
- [@mel.optional]
- method: option(string), /* "post" or "get" */
- [@mel.optional]
- min: option(string),
- [@mel.optional]
- minLength: option(int),
- [@mel.optional]
- multiple: option(bool),
- [@mel.optional]
- muted: option(bool),
- [@mel.optional]
- name: option(string),
- [@mel.optional]
- nonce: option(string),
- [@mel.optional]
- noValidate: option(bool),
- [@mel.optional] [@mel.as "open"]
- open_: option(bool), /* use this one. Previous one is deprecated */
- [@mel.optional]
- optimum: option(int),
- [@mel.optional]
- pattern: option(string), /* valid Js RegExp */
- [@mel.optional]
- placeholder: option(string),
- [@mel.optional]
- playsInline: option(bool),
- [@mel.optional]
- poster: option(string), /* uri */
- [@mel.optional]
- preload: option(string), /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */
- [@mel.optional]
- radioGroup: option(string),
- [@mel.optional]
- readOnly: option(bool),
- [@mel.optional]
- rel: option(string), /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */
- [@mel.optional]
- required: option(bool),
- [@mel.optional]
- reversed: option(bool),
- [@mel.optional]
- rows: option(int),
- [@mel.optional]
- rowSpan: option(int),
- [@mel.optional]
- sandbox: option(string), /* has a fixed set of possible values */
- [@mel.optional]
- scope: option(string), /* has a fixed set of possible values */
- [@mel.optional]
- scoped: option(bool),
- [@mel.optional]
- scrolling: option(string), /* html4 only, "auto", "yes" or "no" */
- /* seamless - supported by React, but removed from the html5 spec */
- [@mel.optional]
- selected: option(bool),
- [@mel.optional]
- shape: option(string),
- [@mel.optional]
- size: option(int),
- [@mel.optional]
- sizes: option(string),
- [@mel.optional]
- span: option(int),
- [@mel.optional]
- src: option(string), /* uri */
- [@mel.optional]
- srcDoc: option(string),
- [@mel.optional]
- srcLang: option(string),
- [@mel.optional]
- srcSet: option(string),
- [@mel.optional]
- start: option(int),
- [@mel.optional]
- step: option(float),
- [@mel.optional]
- summary: option(string), /* deprecated */
- [@mel.optional]
- target: option(string),
- [@mel.optional] [@mel.as "type"]
- type_: option(string), /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */
- [@mel.optional]
- useMap: option(string),
- [@mel.optional]
- value: option(string),
- [@mel.optional]
- width: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
- [@mel.optional]
- wrap: option(string), /* "hard" or "soft" */
- /* Clipboard events */
- [@mel.optional]
- onCopy: option(ReactEvent.Clipboard.t => unit),
- [@mel.optional]
- onCut: option(ReactEvent.Clipboard.t => unit),
- [@mel.optional]
- onPaste: option(ReactEvent.Clipboard.t => unit),
- /* Composition events */
- [@mel.optional]
- onCompositionEnd: option(ReactEvent.Composition.t => unit),
- [@mel.optional]
- onCompositionStart: option(ReactEvent.Composition.t => unit),
- [@mel.optional]
- onCompositionUpdate: option(ReactEvent.Composition.t => unit),
- /* Keyboard events */
- [@mel.optional]
- onKeyDown: option(ReactEvent.Keyboard.t => unit),
- [@mel.optional]
- onKeyPress: option(ReactEvent.Keyboard.t => unit),
- [@mel.optional]
- onKeyUp: option(ReactEvent.Keyboard.t => unit),
- /* Focus events */
- [@mel.optional]
- onFocus: option(ReactEvent.Focus.t => unit),
- [@mel.optional]
- onBlur: option(ReactEvent.Focus.t => unit),
- /* Form events */
- [@mel.optional]
- onChange: option(ReactEvent.Form.t => unit),
- [@mel.optional]
- onInput: option(ReactEvent.Form.t => unit),
- [@mel.optional]
- onSubmit: option(ReactEvent.Form.t => unit),
- [@mel.optional]
- onInvalid: option(ReactEvent.Form.t => unit),
- /* Mouse events */
- [@mel.optional]
- onClick: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onContextMenu: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onDoubleClick: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onDrag: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDragEnd: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDragEnter: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDragExit: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDragLeave: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDragOver: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDragStart: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onDrop: option(ReactEvent.Drag.t => unit),
- [@mel.optional]
- onMouseDown: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onMouseEnter: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onMouseLeave: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onMouseMove: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onMouseOut: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onMouseOver: option(ReactEvent.Mouse.t => unit),
- [@mel.optional]
- onMouseUp: option(ReactEvent.Mouse.t => unit),
- /* Selection events */
- [@mel.optional]
- onSelect: option(ReactEvent.Selection.t => unit),
- /* Touch events */
- [@mel.optional]
- onTouchCancel: option(ReactEvent.Touch.t => unit),
- [@mel.optional]
- onTouchEnd: option(ReactEvent.Touch.t => unit),
- [@mel.optional]
- onTouchMove: option(ReactEvent.Touch.t => unit),
- [@mel.optional]
- onTouchStart: option(ReactEvent.Touch.t => unit),
- // Pointer events
- [@mel.optional]
- onPointerOver: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerEnter: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerDown: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerMove: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerUp: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerCancel: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerOut: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onPointerLeave: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onGotPointerCapture: option(ReactEvent.Pointer.t => unit),
- [@mel.optional]
- onLostPointerCapture: option(ReactEvent.Pointer.t => unit),
- /* UI events */
- [@mel.optional]
- onScroll: option(ReactEvent.UI.t => unit),
- /* Wheel events */
- [@mel.optional]
- onWheel: option(ReactEvent.Wheel.t => unit),
- /* Media events */
- [@mel.optional]
- onAbort: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onCanPlay: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onCanPlayThrough: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onDurationChange: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onEmptied: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onEncrypetd: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onEnded: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onError: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onLoadedData: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onLoadedMetadata: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onLoadStart: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onPause: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onPlay: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onPlaying: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onProgress: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onRateChange: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onSeeked: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onSeeking: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onStalled: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onSuspend: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onTimeUpdate: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onVolumeChange: option(ReactEvent.Media.t => unit),
- [@mel.optional]
- onWaiting: option(ReactEvent.Media.t => unit),
- /* Image events */
- [@mel.optional]onLoad: option(ReactEvent.Image.t => unit) /* duplicate */, /*~onError: ReactEvent.Image.t => unit=?,*/
- /* Animation events */
- [@mel.optional]
- onAnimationStart: option(ReactEvent.Animation.t => unit),
- [@mel.optional]
- onAnimationEnd: option(ReactEvent.Animation.t => unit),
- [@mel.optional]
- onAnimationIteration: option(ReactEvent.Animation.t => unit),
- /* Transition events */
- [@mel.optional]
- onTransitionEnd: option(ReactEvent.Transition.t => unit),
- /* svg */
- [@mel.optional]
- accentHeight: option(string),
- [@mel.optional]
- accumulate: option(string),
- [@mel.optional]
- additive: option(string),
- [@mel.optional]
- alignmentBaseline: option(string),
- [@mel.optional]
- allowReorder: option(string),
- [@mel.optional]
- alphabetic: option(string),
- [@mel.optional]
- amplitude: option(string),
- [@mel.optional]
- arabicForm: option(string),
- [@mel.optional]
- ascent: option(string),
- [@mel.optional]
- attributeName: option(string),
- [@mel.optional]
- attributeType: option(string),
- [@mel.optional]
- autoReverse: option(string),
- [@mel.optional]
- azimuth: option(string),
- [@mel.optional]
- baseFrequency: option(string),
- [@mel.optional]
- baseProfile: option(string),
- [@mel.optional]
- baselineShift: option(string),
- [@mel.optional]
- bbox: option(string),
- [@mel.optional] [@mel.as "begin"]
- begin_: option(string), /* use this one. Previous one is deprecated */
- [@mel.optional]
- bias: option(string),
- [@mel.optional]
- by: option(string),
- [@mel.optional]
- calcMode: option(string),
- [@mel.optional]
- capHeight: option(string),
- [@mel.optional]
- clip: option(string),
- [@mel.optional]
- clipPath: option(string),
- [@mel.optional]
- clipPathUnits: option(string),
- [@mel.optional]
- clipRule: option(string),
- [@mel.optional]
- colorInterpolation: option(string),
- [@mel.optional]
- colorInterpolationFilters: option(string),
- [@mel.optional]
- colorProfile: option(string),
- [@mel.optional]
- colorRendering: option(string),
- [@mel.optional]
- contentScriptType: option(string),
- [@mel.optional]
- contentStyleType: option(string),
- [@mel.optional]
- cursor: option(string),
- [@mel.optional]
- cx: option(string),
- [@mel.optional]
- cy: option(string),
- [@mel.optional]
- d: option(string),
- [@mel.optional]
- decelerate: option(string),
- [@mel.optional]
- descent: option(string),
- [@mel.optional]
- diffuseConstant: option(string),
- [@mel.optional]
- direction: option(string),
- [@mel.optional]
- display: option(string),
- [@mel.optional]
- divisor: option(string),
- [@mel.optional]
- dominantBaseline: option(string),
- [@mel.optional]
- dur: option(string),
- [@mel.optional]
- dx: option(string),
- [@mel.optional]
- dy: option(string),
- [@mel.optional]
- edgeMode: option(string),
- [@mel.optional]
- elevation: option(string),
- [@mel.optional]
- enableBackground: option(string),
- [@mel.optional] [@mel.as "end"]
- end_: option(string), /* use this one. Previous one is deprecated */
- [@mel.optional]
- exponent: option(string),
- [@mel.optional]
- externalResourcesRequired: option(string),
- [@mel.optional]
- fill: option(string),
- [@mel.optional]
- fillOpacity: option(string),
- [@mel.optional]
- fillRule: option(string),
- [@mel.optional]
- filter: option(string),
- [@mel.optional]
- filterRes: option(string),
- [@mel.optional]
- filterUnits: option(string),
- [@mel.optional]
- floodColor: option(string),
- [@mel.optional]
- floodOpacity: option(string),
- [@mel.optional]
- focusable: option(string),
- [@mel.optional]
- fontFamily: option(string),
- [@mel.optional]
- fontSize: option(string),
- [@mel.optional]
- fontSizeAdjust: option(string),
- [@mel.optional]
- fontStretch: option(string),
- [@mel.optional]
- fontStyle: option(string),
- [@mel.optional]
- fontVariant: option(string),
- [@mel.optional]
- fontWeight: option(string),
- [@mel.optional]
- fomat: option(string),
- [@mel.optional]
- from: option(string),
- [@mel.optional]
- fx: option(string),
- [@mel.optional]
- fy: option(string),
- [@mel.optional]
- g1: option(string),
- [@mel.optional]
- g2: option(string),
- [@mel.optional]
- glyphName: option(string),
- [@mel.optional]
- glyphOrientationHorizontal: option(string),
- [@mel.optional]
- glyphOrientationVertical: option(string),
- [@mel.optional]
- glyphRef: option(string),
- [@mel.optional]
- gradientTransform: option(string),
- [@mel.optional]
- gradientUnits: option(string),
- [@mel.optional]
- hanging: option(string),
- [@mel.optional]
- horizAdvX: option(string),
- [@mel.optional]
- horizOriginX: option(string),
- [@mel.optional]
- ideographic: option(string),
- [@mel.optional]
- imageRendering: option(string),
- [@mel.optional] [@mel.as "in"]
- in_: option(string), /* use this one. Previous one is deprecated */
- [@mel.optional]
- in2: option(string),
- [@mel.optional]
- intercept: option(string),
- [@mel.optional]
- k: option(string),
- [@mel.optional]
- k1: option(string),
- [@mel.optional]
- k2: option(string),
- [@mel.optional]
- k3: option(string),
- [@mel.optional]
- k4: option(string),
- [@mel.optional]
- kernelMatrix: option(string),
- [@mel.optional]
- kernelUnitLength: option(string),
- [@mel.optional]
- kerning: option(string),
- [@mel.optional]
- keyPoints: option(string),
- [@mel.optional]
- keySplines: option(string),
- [@mel.optional]
- keyTimes: option(string),
- [@mel.optional]
- lengthAdjust: option(string),
- [@mel.optional]
- letterSpacing: option(string),
- [@mel.optional]
- lightingColor: option(string),
- [@mel.optional]
- limitingConeAngle: option(string),
- [@mel.optional]
- local: option(string),
- [@mel.optional]
- markerEnd: option(string),
- [@mel.optional]
- markerHeight: option(string),
- [@mel.optional]
- markerMid: option(string),
- [@mel.optional]
- markerStart: option(string),
- [@mel.optional]
- markerUnits: option(string),
- [@mel.optional]
- markerWidth: option(string),
- [@mel.optional]
- mask: option(string),
- [@mel.optional]
- maskContentUnits: option(string),
- [@mel.optional]
- maskUnits: option(string),
- [@mel.optional]
- mathematical: option(string),
- [@mel.optional]
- mode: option(string),
- [@mel.optional]
- numOctaves: option(string),
- [@mel.optional]
- offset: option(string),
- [@mel.optional]
- opacity: option(string),
- [@mel.optional]
- operator: option(string),
- [@mel.optional]
- order: option(string),
- [@mel.optional]
- orient: option(string),
- [@mel.optional]
- orientation: option(string),
- [@mel.optional]
- origin: option(string),
- [@mel.optional]
- overflow: option(string),
- [@mel.optional]
- overflowX: option(string),
- [@mel.optional]
- overflowY: option(string),
- [@mel.optional]
- overlinePosition: option(string),
- [@mel.optional]
- overlineThickness: option(string),
- [@mel.optional]
- paintOrder: option(string),
- [@mel.optional]
- panose1: option(string),
- [@mel.optional]
- pathLength: option(string),
- [@mel.optional]
- patternContentUnits: option(string),
- [@mel.optional]
- patternTransform: option(string),
- [@mel.optional]
- patternUnits: option(string),
- [@mel.optional]
- pointerEvents: option(string),
- [@mel.optional]
- points: option(string),
- [@mel.optional]
- pointsAtX: option(string),
- [@mel.optional]
- pointsAtY: option(string),
- [@mel.optional]
- pointsAtZ: option(string),
- [@mel.optional]
- preserveAlpha: option(string),
- [@mel.optional]
- preserveAspectRatio: option(string),
- [@mel.optional]
- primitiveUnits: option(string),
- [@mel.optional]
- r: option(string),
- [@mel.optional]
- radius: option(string),
- [@mel.optional]
- refX: option(string),
- [@mel.optional]
- refY: option(string),
- [@mel.optional]
- renderingIntent: option(string),
- [@mel.optional]
- repeatCount: option(string),
- [@mel.optional]
- repeatDur: option(string),
- [@mel.optional]
- requiredExtensions: option(string),
- [@mel.optional]
- requiredFeatures: option(string),
- [@mel.optional]
- restart: option(string),
- [@mel.optional]
- result: option(string),
- [@mel.optional]
- rotate: option(string),
- [@mel.optional]
- rx: option(string),
- [@mel.optional]
- ry: option(string),
- [@mel.optional]
- scale: option(string),
- [@mel.optional]
- seed: option(string),
- [@mel.optional]
- shapeRendering: option(string),
- [@mel.optional]
- slope: option(string),
- [@mel.optional]
- spacing: option(string),
- [@mel.optional]
- specularConstant: option(string),
- [@mel.optional]
- specularExponent: option(string),
- [@mel.optional]
- speed: option(string),
- [@mel.optional]
- spreadMethod: option(string),
- [@mel.optional]
- startOffset: option(string),
- [@mel.optional]
- stdDeviation: option(string),
- [@mel.optional]
- stemh: option(string),
- [@mel.optional]
- stemv: option(string),
- [@mel.optional]
- stitchTiles: option(string),
- [@mel.optional]
- stopColor: option(string),
- [@mel.optional]
- stopOpacity: option(string),
- [@mel.optional]
- strikethroughPosition: option(string),
- [@mel.optional]
- strikethroughThickness: option(string),
- [@mel.optional]
- string: option(string),
- [@mel.optional]
- stroke: option(string),
- [@mel.optional]
- strokeDasharray: option(string),
- [@mel.optional]
- strokeDashoffset: option(string),
- [@mel.optional]
- strokeLinecap: option(string),
- [@mel.optional]
- strokeLinejoin: option(string),
- [@mel.optional]
- strokeMiterlimit: option(string),
- [@mel.optional]
- strokeOpacity: option(string),
- [@mel.optional]
- strokeWidth: option(string),
- [@mel.optional]
- surfaceScale: option(string),
- [@mel.optional]
- systemLanguage: option(string),
- [@mel.optional]
- tableValues: option(string),
- [@mel.optional]
- targetX: option(string),
- [@mel.optional]
- targetY: option(string),
- [@mel.optional]
- textAnchor: option(string),
- [@mel.optional]
- textDecoration: option(string),
- [@mel.optional]
- textLength: option(string),
- [@mel.optional]
- textRendering: option(string),
- [@mel.optional] [@mel.as "to"]
- to_: option(string), /* use this one. Previous one is deprecated */
- [@mel.optional]
- transform: option(string),
- [@mel.optional]
- u1: option(string),
- [@mel.optional]
- u2: option(string),
- [@mel.optional]
- underlinePosition: option(string),
- [@mel.optional]
- underlineThickness: option(string),
- [@mel.optional]
- unicode: option(string),
- [@mel.optional]
- unicodeBidi: option(string),
- [@mel.optional]
- unicodeRange: option(string),
- [@mel.optional]
- unitsPerEm: option(string),
- [@mel.optional]
- vAlphabetic: option(string),
- [@mel.optional]
- vHanging: option(string),
- [@mel.optional]
- vIdeographic: option(string),
- [@mel.optional]
- vMathematical: option(string),
- [@mel.optional]
- values: option(string),
- [@mel.optional]
- vectorEffect: option(string),
- [@mel.optional]
- version: option(string),
- [@mel.optional]
- vertAdvX: option(string),
- [@mel.optional]
- vertAdvY: option(string),
- [@mel.optional]
- vertOriginX: option(string),
- [@mel.optional]
- vertOriginY: option(string),
- [@mel.optional]
- viewBox: option(string),
- [@mel.optional]
- viewTarget: option(string),
- [@mel.optional]
- visibility: option(string),
- /*width::string? =>*/
- [@mel.optional]
- widths: option(string),
- [@mel.optional]
- wordSpacing: option(string),
- [@mel.optional]
- writingMode: option(string),
- [@mel.optional]
- x: option(string),
- [@mel.optional]
- x1: option(string),
- [@mel.optional]
- x2: option(string),
- [@mel.optional]
- xChannelSelector: option(string),
- [@mel.optional]
- xHeight: option(string),
- [@mel.optional]
- xlinkActuate: option(string),
- [@mel.optional]
- xlinkArcrole: option(string),
- [@mel.optional]
- xlinkHref: option(string),
- [@mel.optional]
- xlinkRole: option(string),
- [@mel.optional]
- xlinkShow: option(string),
- [@mel.optional]
- xlinkTitle: option(string),
- [@mel.optional]
- xlinkType: option(string),
- [@mel.optional]
- xmlns: option(string),
- [@mel.optional]
- xmlnsXlink: option(string),
- [@mel.optional]
- xmlBase: option(string),
- [@mel.optional]
- xmlLang: option(string),
- [@mel.optional]
- xmlSpace: option(string),
- [@mel.optional]
- y: option(string),
- [@mel.optional]
- y1: option(string),
- [@mel.optional]
- y2: option(string),
- [@mel.optional]
- yChannelSelector: option(string),
- [@mel.optional]
- z: option(string),
- [@mel.optional]
- zoomAndPan: option(string),
- /* RDFa */
- [@mel.optional]
- about: option(string),
- [@mel.optional]
- datatype: option(string),
- [@mel.optional]
- inlist: option(string),
- [@mel.optional]
- prefix: option(string),
- [@mel.optional]
- property: option(string),
- [@mel.optional]
- resource: option(string),
- [@mel.optional]
- typeof: option(string),
- [@mel.optional]
- vocab: option(string),
- /* react-specific */
- [@mel.optional]
- dangerouslySetInnerHTML: option({. "__html": string}),
- [@mel.optional]
- suppressContentEditableWarning: option(bool),
- [@mel.optional]
- suppressHydrationWarning: option(bool),
- };
-};
-
-include Props;
-
-// As we've removed `ReactDOMRe.createElement`, this enables patterns like
-// React.createElement(ReactDOM.stringToComponent(multiline ? "textarea" : "input"), ...)
-external stringToComponent: string => React.component(domProps) = "%identity";
-
-module Style = ReactDOMStyle;
-
-[@mel.variadic] [@mel.module "react"]
-external createElement:
- (string, ~props: domProps=?, array(React.element)) => React.element =
- "createElement";
-
-[@mel.variadic] [@mel.module "react"]
-external createDOMElementVariadic:
- (string, ~props: domProps=?, array(React.element)) => React.element =
- "createElement";
-
-[@mel.module "react/jsx-runtime"]
-external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.element =
- "jsx";
-
-[@mel.module "react/jsx-runtime"]
-external jsx: (string, domProps) => React.element = "jsx";
-
-[@mel.module "react/jsx-runtime"]
-external jsxs: (string, domProps) => React.element = "jsxs";
-
-[@mel.module "react/jsx-runtime"]
-external jsxsKeyed: (string, domProps, ~key: string=?, unit) => React.element =
- "jsxs";
diff --git a/src/ReactDOMServer.re b/src/ReactDOMServer.re
deleted file mode 100644
index 95a1cd02d..000000000
--- a/src/ReactDOMServer.re
+++ /dev/null
@@ -1,6 +0,0 @@
-[@mel.module "react-dom/server"]
-external renderToString: React.element => string = "renderToString";
-
-[@mel.module "react-dom/server"]
-external renderToStaticMarkup: React.element => string =
- "renderToStaticMarkup";
diff --git a/src/ReactEvent.rei b/src/ReactEvent.rei
deleted file mode 100644
index b93afec44..000000000
--- a/src/ReactEvent.rei
+++ /dev/null
@@ -1,532 +0,0 @@
-/* This is the whole synthetic event system of ReactJS/ReasonReact. The first module `Synthetic` represents
- the generic synthetic event. The rest are the specific ones.
-
- In each module, the type `t` commonly means "the type of that module" (OCaml convention). In our case, e.g.
- `ReactEvent.Mouse.t` represents a ReactJS synthetic mouse event. You'd use it to type your props:
-
- ```
- type props = {
- onClick: ReactEvent.Mouse.t => unit
- };
- ```
-
- All the methods and properties of a type of event are in the module, as seen below.
-
- Each module also has a `tag` type. You can ignore it; they're only needed by their `t` type. This way, we
- get to allow a base `Synthetic` event module with generic methods. So e.g. even a mouse event (`Mouse.t`)
- get to be passed to a generic handler:
-
- ```
- let handleClick = ({state, props}, event) => {
- ReactEvent.Mouse.preventDefault(event);
- ...
- };
- let handleSubmit = ({state, props}, event) => {
- /* this handler can be triggered by either a Keyboard or a Mouse event; conveniently use the generic
- preventDefault */
- ReactEvent.Synthetic.preventDefault(event);
- ...
- };
-
- let render = (_) => ;
- ```
-
- How to translate idioms from ReactJS:
-
- 1. myMouseEvent.preventDefault() -> ReactEvent.Mouse.preventDefault(myMouseEvent)
- 2. myKeyboardEvent.which -> ReactEvent.Keyboard.which(myKeyboardEvent)
- */
-type synthetic('a);
-
-module Synthetic: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: synthetic('a) => bool = "bubbles";
- [@mel.get] external cancelable: synthetic('a) => bool = "cancelable";
- [@mel.get]
- external currentTarget: synthetic('a) => Js.t({..}) = "currentTarget";
- [@mel.get]
- external defaultPrevented: synthetic('a) => bool = "defaultPrevented";
- [@mel.get] external eventPhase: synthetic('a) => int = "eventPhase";
- [@mel.get] external isTrusted: synthetic('a) => bool = "isTrusted";
- [@mel.get]
- external nativeEvent: synthetic('a) => Js.t({..}) = "nativeEvent";
- [@mel.send]
- external preventDefault: synthetic('a) => unit = "preventDefault";
- [@mel.send]
- external isDefaultPrevented: synthetic('a) => bool = "isDefaultPrevented";
- [@mel.send]
- external stopPropagation: synthetic('a) => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: synthetic('a) => bool =
- "isPropagationStopped";
- [@mel.get] external target: synthetic('a) => Js.t({..}) = "target";
- [@mel.get] external timeStamp: synthetic('a) => float = "timeStamp";
- [@mel.get] external type_: synthetic('a) => string = "type";
- [@mel.send] external persist: synthetic('a) => unit = "persist";
-};
-
-/* Cast any event type to the general synthetic type. This is safe, since synthetic is more general */
-external toSyntheticEvent: synthetic('a) => Synthetic.t = "%identity";
-
-module Clipboard: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external clipboardData: t => Js.t({..}) = "clipboardData"; /* Should return Dom.dataTransfer */
-};
-
-module Composition: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external data: t => string = "data";
-};
-
-module Drag: {
- type tag;
- type t = synthetic(tag);
-
- // SyntheticEvent
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
-
- // MouseEvent
- [@mel.get] external altKey: t => bool = "altKey";
- [@mel.get] external button: t => int = "button";
- [@mel.get] external buttons: t => int = "buttons";
- [@mel.get] external clientX: t => int = "clientX";
- [@mel.get] external clientY: t => int = "clientY";
- [@mel.get] external ctrlKey: t => bool = "ctrlKey";
- [@mel.send]
- external getModifierState: (t, string) => bool = "getModifierState";
- [@mel.get] external metaKey: t => bool = "metaKey";
- [@mel.get] external movementX: t => int = "movementX";
- [@mel.get] external movementY: t => int = "movementY";
- [@mel.get] external pageX: t => int = "pageX";
- [@mel.get] external pageY: t => int = "pageY";
- [@mel.get] [@mel.return nullable]
- external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
- [@mel.get] external screenX: t => int = "screenX";
- [@mel.get] external screenY: t => int = "screenY";
- [@mel.get] external shiftKey: t => bool = "shiftKey";
-
- [@mel.get] external dataTransfer: t => Js.t({..}) = "dataTransfer"; /* Should return Dom.dataTransfer */
-};
-
-module Keyboard: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external altKey: t => bool = "altKey";
- [@mel.get] external charCode: t => int = "charCode";
- [@mel.get] external ctrlKey: t => bool = "ctrlKey";
- [@mel.send]
- external getModifierState: (t, string) => bool = "getModifierState";
- [@mel.get] external key: t => string = "key";
- [@mel.get] external keyCode: t => int = "keyCode";
- [@mel.get] external locale: t => string = "locale";
- [@mel.get] external location: t => int = "location";
- [@mel.get] external metaKey: t => bool = "metaKey";
- [@mel.get] external repeat: t => bool = "repeat";
- [@mel.get] external shiftKey: t => bool = "shiftKey";
- [@mel.get] external which: t => int = "which";
-};
-
-module Focus: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] [@mel.return nullable]
- external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
-};
-
-module Form: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
-};
-
-module Mouse: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external altKey: t => bool = "altKey";
- [@mel.get] external button: t => int = "button";
- [@mel.get] external buttons: t => int = "buttons";
- [@mel.get] external clientX: t => int = "clientX";
- [@mel.get] external clientY: t => int = "clientY";
- [@mel.get] external ctrlKey: t => bool = "ctrlKey";
- [@mel.send]
- external getModifierState: (t, string) => bool = "getModifierState";
- [@mel.get] external metaKey: t => bool = "metaKey";
- [@mel.get] external movementX: t => int = "movementX";
- [@mel.get] external movementY: t => int = "movementY";
- [@mel.get] external pageX: t => int = "pageX";
- [@mel.get] external pageY: t => int = "pageY";
- [@mel.get] [@mel.return nullable]
- external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
- [@mel.get] external screenX: t => int = "screenX";
- [@mel.get] external screenY: t => int = "screenY";
- [@mel.get] external shiftKey: t => bool = "shiftKey";
-};
-
-module Pointer: {
- type tag;
- type t = synthetic(tag);
-
- // Event
- [@mel.get] external type_: t => string = "type";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-
- [@mel.get] external eventPhase: t => int = "eventPhase";
-
- [@mel.send] external stopPropagation: t => unit = "stopPropagation"; // aka cancelBubble
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
-
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external timeStamp: t => float = "timeStamp";
-
- // SyntheticEvent
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.send] external persist: t => unit = "persist";
-
- // UIEvent
- [@mel.get] external detail: t => int = "detail";
- [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
-
- // MouseEvent
- [@mel.get] external screenX: t => int = "screenX";
- [@mel.get] external screenY: t => int = "screenY";
- [@mel.get] external clientX: t => int = "clientX";
- [@mel.get] external clientY: t => int = "clientY";
- [@mel.get] external pageX: t => int = "pageX";
- [@mel.get] external pageY: t => int = "pageY";
- [@mel.get] external movementX: t => int = "movementX";
- [@mel.get] external movementY: t => int = "movementY";
-
- [@mel.get] external ctrlKey: t => bool = "ctrlKey";
- [@mel.get] external shiftKey: t => bool = "shiftKey";
- [@mel.get] external altKey: t => bool = "altKey";
- [@mel.get] external metaKey: t => bool = "metaKey";
- [@mel.send]
- external getModifierState: (t, string) => bool = "getModifierState";
-
- [@mel.get] external button: t => int = "button";
- [@mel.get] external buttons: t => int = "buttons";
-
- [@mel.get] [@mel.return nullable]
- external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
-
- // PointerEvent
- [@mel.get] external pointerId: t => Dom.eventPointerId = "pointerId";
- [@mel.get] external width: t => float = "width";
- [@mel.get] external height: t => float = "height";
- [@mel.get] external pressure: t => float = "pressure";
- [@mel.get] external tangentialPressure: t => float = "tangentialPressure";
- [@mel.get] external tiltX: t => int = "tiltX";
- [@mel.get] external tiltY: t => int = "tiltY";
- [@mel.get] external twist: t => int = "twist";
- [@mel.get] external pointerType: t => string = "pointerType";
- [@mel.get] external isPrimary: t => bool = "isPrimary";
-};
-
-module Selection: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
-};
-
-module Touch: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external altKey: t => bool = "altKey";
- [@mel.get] external changedTouches: t => Js.t({..}) = "changedTouches"; /* Should return Dom.touchList */
- [@mel.get] external ctrlKey: t => bool = "ctrlKey";
- [@mel.send]
- external getModifierState: (t, string) => bool = "getModifierState";
- [@mel.get] external metaKey: t => bool = "metaKey";
- [@mel.get] external shiftKey: t => bool = "shiftKey";
- [@mel.get] external targetTouches: t => Js.t({..}) = "targetTouches"; /* Should return Dom.touchList */
- [@mel.get] external touches: t => Js.t({..}) = "touches"; /* Should return Dom.touchList */
-};
-
-module UI: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external detail: t => int = "detail";
- [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
-};
-
-module Wheel: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external deltaMode: t => int = "deltaMode";
- [@mel.get] external deltaX: t => float = "deltaX";
- [@mel.get] external deltaY: t => float = "deltaY";
- [@mel.get] external deltaZ: t => float = "deltaZ";
-};
-
-module Media: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
-};
-
-module Image: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
-};
-
-module Animation: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external animationName: t => string = "animationName";
- [@mel.get] external pseudoElement: t => string = "pseudoElement";
- [@mel.get] external elapsedTime: t => float = "elapsedTime";
-};
-
-module Transition: {
- type tag;
- type t = synthetic(tag);
- [@mel.get] external bubbles: t => bool = "bubbles";
- [@mel.get] external cancelable: t => bool = "cancelable";
- [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
- [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
- [@mel.get] external eventPhase: t => int = "eventPhase";
- [@mel.get] external isTrusted: t => bool = "isTrusted";
- [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
- [@mel.send] external preventDefault: t => unit = "preventDefault";
- [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
- [@mel.send] external stopPropagation: t => unit = "stopPropagation";
- [@mel.send]
- external isPropagationStopped: t => bool = "isPropagationStopped";
- [@mel.get] external target: t => Js.t({..}) = "target";
- [@mel.get] external timeStamp: t => float = "timeStamp";
- [@mel.get] external type_: t => string = "type";
- [@mel.send] external persist: t => unit = "persist";
- [@mel.get] external propertyName: t => string = "propertyName";
- [@mel.get] external pseudoElement: t => string = "pseudoElement";
- [@mel.get] external elapsedTime: t => float = "elapsedTime";
-};
diff --git a/src/ReactTestUtils.rei b/src/ReactTestUtils.rei
deleted file mode 100644
index 22bdbb627..000000000
--- a/src/ReactTestUtils.rei
+++ /dev/null
@@ -1,60 +0,0 @@
-let act: (unit => unit) => unit;
-
-let actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit);
-
-[@mel.module "react-dom/test-utils"]
-external isElement: 'element => bool = "isElement";
-
-[@mel.module "react-dom/test-utils"]
-external isElementOfType: ('element, React.component('props)) => bool =
- "isElementOfType";
-
-[@mel.module "react-dom/test-utils"]
-external isDOMComponent: 'element => bool = "isDOMComponent";
-
-[@mel.module "react-dom/test-utils"]
-external isCompositeComponent: 'element => bool = "isCompositeComponent";
-
-[@mel.module "react-dom/test-utils"]
-external isCompositeComponentWithType:
- ('element, React.component('props)) => bool =
- "isCompositeComponentWithType";
-
-module Simulate: {
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external click: Dom.element => unit = "click";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external clickWithEvent: (Dom.element, 'event) => unit = "click";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external change: Dom.element => unit = "change";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external blur: Dom.element => unit = "blur";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external changeWithEvent: (Dom.element, 'event) => unit = "change";
- let changeWithValue: (Dom.element, string) => unit;
- let changeWithChecked: (Dom.element, bool) => unit;
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external canPlay: Dom.element => unit = "canPlay";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external timeUpdate: Dom.element => unit = "timeUpdate";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external ended: Dom.element => unit = "ended";
- [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
- external focus: Dom.element => unit = "focus";
-};
-
-module DOM: {
- [@mel.return nullable] [@mel.get]
- external value: Dom.element => option(string) = "value";
-
- let findBySelector: (Dom.element, string) => option(Dom.element);
- let findByAllSelector: (Dom.element, string) => array(Dom.element);
- let findBySelectorAndTextContent:
- (Dom.element, string, string) => option(Dom.element);
- let findBySelectorAndPartialTextContent:
- (Dom.element, string, string) => option(Dom.element);
-};
-
-let prepareContainer: (ref(option(Dom.element)), unit) => unit;
-let cleanupContainer: (ref(option(Dom.element)), unit) => unit;
-let getContainer: ref(option(Dom.element)) => Dom.element;
diff --git a/src/ReasonReactErrorBoundary.rei b/src/ReasonReactErrorBoundary.rei
deleted file mode 100644
index 5833ebccb..000000000
--- a/src/ReasonReactErrorBoundary.rei
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Important note on this module:
- * As soon as React provides a mechanism for error-catching using functional component,
- * this is likely to be deprecated and/or move to user space.
- */
-type info = {componentStack: string};
-
-type params('error) = {
- error: 'error,
- info,
-};
-
-[@react.component]
-let make:
- (~children: React.element, ~fallback: params('error) => React.element) =>
- React.element;
diff --git a/src/ReasonReactRouter.rei b/src/ReasonReactRouter.rei
deleted file mode 100644
index b17485e93..000000000
--- a/src/ReasonReactRouter.rei
+++ /dev/null
@@ -1,33 +0,0 @@
-/** update the url with the string path. Example: `push("/book/1")`, `push("/books#title")` */
-let push: string => unit;
-/** update the url with the string path. modifies the current history entry instead of creating a new one. Example: `replace("/book/1")`, `replace("/books#title")` */
-let replace: string => unit;
-type watcherID;
-type url = {
- /* path takes window.location.path, like "/book/title/edit" and turns it into `["book", "title", "edit"]` */
- path: list(string),
- /* the url's hash, if any. The # symbol is stripped out for you */
- hash: string,
- /* the url's query params, if any. The ? symbol is stripped out for you */
- search: string,
-};
-/** start watching for URL changes. Returns a subscription token. Upon url change, calls the callback and passes it the url record */
-let watchUrl: (url => unit) => watcherID;
-/** stop watching for URL changes */
-let unwatchUrl: watcherID => unit;
-/** this is marked as "dangerous" because you technically shouldn't be accessing the URL outside of watchUrl's callback;
- you'd read a potentially stale url, instead of the fresh one inside watchUrl.
-
- But this helper is sometimes needed, if you'd like to initialize a page whose display/state depends on the URL,
- instead of reading from it in watchUrl's callback, which you'd probably have put inside didMount (aka too late,
- the page's already rendered).
-
- So, the correct (and idiomatic) usage of this helper is to only use it in a component that's also subscribed to
- watchUrl. Please see https://github.com/reasonml-community/reason-react-example/blob/master/src/todomvc/TodoItem.re
- for an example.
- */
-let dangerouslyGetInitialUrl: (~serverUrlString: string=?, unit) => url;
-/** hook for watching url changes.
- * serverUrl is used for ssr. it allows you to specify the url without relying on browser apis existing/working as expected
- */
-let useUrl: (~serverUrl: url=?, unit) => url;
diff --git a/src/context.re b/src/context.re
new file mode 100644
index 000000000..ea0bc06b4
--- /dev/null
+++ b/src/context.re
@@ -0,0 +1,20 @@
+type t('props);
+
+[@mel.obj]
+external makeProps:
+ (~value: 'props, ~children: Types.element, unit) =>
+ {
+ .
+ "value": 'props,
+ "children": Types.element,
+ };
+
+[@mel.get]
+external provider:
+ t('props) =>
+ Types.component({
+ .
+ "value": 'props,
+ "children": Types.element,
+ }) =
+ "Provider";
diff --git a/src/dOM.re b/src/dOM.re
new file mode 100644
index 000000000..5f1e9351f
--- /dev/null
+++ b/src/dOM.re
@@ -0,0 +1,1117 @@
+/* First time reading an OCaml/Reason/BuckleScript file? */
+/* `external` is the foreign function call in OCaml. */
+/* here we're saying `I guarantee that on the JS side, we have a `render` function in the module "react-dom"
+ that takes in a reactElement, a dom element, and returns unit (nothing) */
+/* It's like `let`, except you're pointing the implementation to the JS side. The compiler will inline these
+ calls and add the appropriate `require("react-dom")` in the file calling this `render` */
+
+// Helper so that ReactDOM itself doesn't bring any runtime
+[@mel.return nullable]
+external querySelector: string => option(Dom.element) =
+ "document.querySelector";
+
+[@mel.module "react-dom"]
+external render: (Types.element, Dom.element) => unit = "render";
+
+module Experimental = {
+ type root;
+
+ [@mel.module "react-dom"]
+ external createRoot: Dom.element => root = "createRoot";
+
+ [@mel.module "react-dom"]
+ external createBlockingRoot: Dom.element => root = "createBlockingRoot";
+
+ [@mel.send] external render: (root, Types.element) => unit = "render";
+};
+
+[@mel.module "react-dom"]
+external hydrate: (Types.element, Dom.element) => unit = "hydrate";
+
+[@mel.module "react-dom"]
+external createPortal: (Types.element, Dom.element) => Types.element =
+ "createPortal";
+
+[@mel.module "react-dom"]
+external unmountComponentAtNode: Dom.element => unit =
+ "unmountComponentAtNode";
+
+external domElementToObj: Dom.element => Js.t({..}) = "%identity";
+
+type style = DOMStyle.t;
+
+type domRef;
+
+module Ref = {
+ type t = domRef;
+ type currentDomRef = Types.ref(Js.nullable(Dom.element));
+ type callbackDomRef = Js.nullable(Dom.element) => unit;
+
+ external domRef: currentDomRef => domRef = "%identity";
+ external callbackDomRef: callbackDomRef => domRef = "%identity";
+};
+
+/* This list isn't exhaustive. We'll add more as we go. */
+/*
+ * Watch out! There are two props types and the only difference is the type of ref.
+ * Please keep in sync.
+ */
+[@deriving abstract]
+type domProps = {
+ [@mel.optional]
+ key: option(string),
+ [@mel.optional]
+ ref: option(domRef),
+ [@mel.optional]
+ children: option(Types.element),
+ /* accessibility */
+ /* https://www.w3.org/TR/wai-aria-1.1/ */
+ [@mel.optional] [@mel.as "aria-activedescendant"]
+ ariaActivedescendant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendat */
+ [@mel.optional] [@mel.as "aria-atomic"]
+ ariaAtomic: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic */
+ [@mel.optional] [@mel.as "aria-autocomplete"]
+ ariaAutocomplete: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete */
+ [@mel.optional] [@mel.as "aria-busy"]
+ ariaBusy: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy */
+ [@mel.optional] [@mel.as "aria-checked"]
+ ariaChecked: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked */
+ [@mel.optional] [@mel.as "aria-colcount"]
+ ariaColcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount */
+ [@mel.optional] [@mel.as "aria-colindex"]
+ ariaColindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex */
+ [@mel.optional] [@mel.as "aria-colspan"]
+ ariaColspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan */
+ [@mel.optional] [@mel.as "aria-controls"]
+ ariaControls: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls */
+ [@mel.optional] [@mel.as "aria-current"]
+ ariaCurrent: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current */
+ [@mel.optional] [@mel.as "aria-describedby"]
+ ariaDescribedby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby */
+ [@mel.optional] [@mel.as "aria-details"]
+ ariaDetails: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details */
+ [@mel.optional] [@mel.as "aria-disabled"]
+ ariaDisabled: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled */
+ [@mel.optional] [@mel.as "aria-errormessage"]
+ ariaErrormessage: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage */
+ [@mel.optional] [@mel.as "aria-expanded"]
+ ariaExpanded: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded */
+ [@mel.optional] [@mel.as "aria-flowto"]
+ ariaFlowto: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto */
+ [@mel.optional] [@mel.as "aria-grabbed"] /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
+ ariaGrabbed: option(bool),
+ [@mel.optional] [@mel.as "aria-haspopup"]
+ ariaHaspopup: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup */
+ [@mel.optional] [@mel.as "aria-hidden"]
+ ariaHidden: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden */
+ [@mel.optional] [@mel.as "aria-invalid"]
+ ariaInvalid: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid */
+ [@mel.optional] [@mel.as "aria-keyshortcuts"]
+ ariaKeyshortcuts: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts */
+ [@mel.optional] [@mel.as "aria-label"]
+ ariaLabel: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
+ [@mel.optional] [@mel.as "aria-labelledby"]
+ ariaLabelledby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby */
+ [@mel.optional] [@mel.as "aria-level"]
+ ariaLevel: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level */
+ [@mel.optional] [@mel.as "aria-live"]
+ ariaLive: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live */
+ [@mel.optional] [@mel.as "aria-modal"]
+ ariaModal: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal */
+ [@mel.optional] [@mel.as "aria-multiline"]
+ ariaMultiline: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline */
+ [@mel.optional] [@mel.as "aria-multiselectable"]
+ ariaMultiselectable: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable */
+ [@mel.optional] [@mel.as "aria-orientation"]
+ ariaOrientation: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation */
+ [@mel.optional] [@mel.as "aria-owns"]
+ ariaOwns: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns */
+ [@mel.optional] [@mel.as "aria-placeholder"]
+ ariaPlaceholder: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder */
+ [@mel.optional] [@mel.as "aria-posinset"]
+ ariaPosinset: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset */
+ [@mel.optional] [@mel.as "aria-pressed"]
+ ariaPressed: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed */
+ [@mel.optional] [@mel.as "aria-readonly"]
+ ariaReadonly: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly */
+ [@mel.optional] [@mel.as "aria-relevant"]
+ ariaRelevant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
+ [@mel.optional] [@mel.as "aria-required"]
+ ariaRequired: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required */
+ [@mel.optional] [@mel.as "aria-roledescription"]
+ ariaRoledescription: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription */
+ [@mel.optional] [@mel.as "aria-rowcount"]
+ ariaRowcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount */
+ [@mel.optional] [@mel.as "aria-rowindex"]
+ ariaRowindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex */
+ [@mel.optional] [@mel.as "aria-rowindextext"]
+ ariaRowindextext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext */
+ [@mel.optional] [@mel.as "aria-rowspan"]
+ ariaRowspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan */
+ [@mel.optional] [@mel.as "aria-selected"]
+ ariaSelected: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected */
+ [@mel.optional] [@mel.as "aria-setsize"]
+ ariaSetsize: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize */
+ [@mel.optional] [@mel.as "aria-sort"]
+ ariaSort: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort */
+ [@mel.optional] [@mel.as "aria-valuemax"]
+ ariaValuemax: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax */
+ [@mel.optional] [@mel.as "aria-valuemin"]
+ ariaValuemin: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin */
+ [@mel.optional] [@mel.as "aria-valuenow"]
+ ariaValuenow: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow */
+ [@mel.optional] [@mel.as "aria-valuetext"]
+ ariaValuetext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext */
+ /* react textarea/input */
+ [@mel.optional]
+ defaultChecked: option(bool),
+ [@mel.optional]
+ defaultValue: option(string),
+ /* global html attributes */
+ [@mel.optional]
+ accessKey: option(string),
+ [@mel.optional]
+ className: option(string), /* substitute for "class" */
+ [@mel.optional]
+ contentEditable: option(bool),
+ [@mel.optional]
+ contextMenu: option(string),
+ [@mel.optional]
+ dir: option(string), /* "ltr", "rtl" or "auto" */
+ [@mel.optional]
+ draggable: option(bool),
+ [@mel.optional]
+ hidden: option(bool),
+ [@mel.optional]
+ id: option(string),
+ [@mel.optional]
+ lang: option(string),
+ [@mel.optional]
+ role: option(string), /* ARIA role */
+ [@mel.optional]
+ style: option(style),
+ [@mel.optional]
+ spellCheck: option(bool),
+ [@mel.optional]
+ tabIndex: option(int),
+ [@mel.optional]
+ title: option(string),
+ /* html5 microdata */
+ [@mel.optional]
+ itemID: option(string),
+ [@mel.optional]
+ itemProp: option(string),
+ [@mel.optional]
+ itemRef: option(string),
+ [@mel.optional]
+ itemScope: option(bool),
+ [@mel.optional]
+ itemType: option(string), /* uri */
+ /* tag-specific html attributes */
+ [@mel.optional] [@mel.as "as"]
+ as_: option(string),
+ [@mel.optional]
+ accept: option(string),
+ [@mel.optional]
+ acceptCharset: option(string),
+ [@mel.optional]
+ action: option(string), /* uri */
+ [@mel.optional]
+ allowFullScreen: option(bool),
+ [@mel.optional]
+ alt: option(string),
+ [@mel.optional]
+ async: option(bool),
+ [@mel.optional]
+ autoComplete: option(string), /* has a fixed, but large-ish, set of possible values */
+ [@mel.optional]
+ autoCapitalize: option(string), /* Mobile Safari specific */
+ [@mel.optional]
+ autoFocus: option(bool),
+ [@mel.optional]
+ autoPlay: option(bool),
+ [@mel.optional]
+ challenge: option(string),
+ [@mel.optional]
+ charSet: option(string),
+ [@mel.optional]
+ checked: option(bool),
+ [@mel.optional]
+ cite: option(string), /* uri */
+ [@mel.optional]
+ crossOrigin: option(string), /* anonymous, use-credentials */
+ [@mel.optional]
+ cols: option(int),
+ [@mel.optional]
+ colSpan: option(int),
+ [@mel.optional]
+ content: option(string),
+ [@mel.optional]
+ controls: option(bool),
+ [@mel.optional]
+ coords: option(string), /* set of values specifying the coordinates of a region */
+ [@mel.optional]
+ data: option(string), /* uri */
+ [@mel.optional]
+ dateTime: option(string), /* "valid date string with optional time" */
+ [@mel.optional]
+ default: option(bool),
+ [@mel.optional]
+ defer: option(bool),
+ [@mel.optional]
+ disabled: option(bool),
+ [@mel.optional]
+ download: option(string), /* should really be either a boolean, signifying presence, or a string */
+ [@mel.optional]
+ encType: option(string), /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */
+ [@mel.optional]
+ form: option(string),
+ [@mel.optional]
+ formAction: option(string), /* uri */
+ [@mel.optional]
+ formTarget: option(string), /* "_blank", "_self", etc. */
+ [@mel.optional]
+ formMethod: option(string), /* "post", "get", "put" */
+ [@mel.optional]
+ headers: option(string),
+ [@mel.optional]
+ height: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
+ [@mel.optional]
+ high: option(int),
+ [@mel.optional]
+ href: option(string), /* uri */
+ [@mel.optional]
+ hrefLang: option(string),
+ [@mel.optional]
+ htmlFor: option(string), /* substitute for "for" */
+ [@mel.optional]
+ httpEquiv: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ icon: option(string), /* uri? */
+ [@mel.optional]
+ inputMode: option(string), /* "verbatim", "latin", "numeric", etc. */
+ [@mel.optional]
+ integrity: option(string),
+ [@mel.optional]
+ keyType: option(string),
+ [@mel.optional]
+ kind: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ label: option(string),
+ [@mel.optional]
+ list: option(string),
+ [@mel.optional]
+ loop: option(bool),
+ [@mel.optional]
+ low: option(int),
+ [@mel.optional]
+ manifest: option(string), /* uri */
+ [@mel.optional]
+ max: option(string), /* should be int or Js.Date.t */
+ [@mel.optional]
+ maxLength: option(int),
+ [@mel.optional]
+ media: option(string), /* a valid media query */
+ [@mel.optional]
+ mediaGroup: option(string),
+ [@mel.optional]
+ method: option(string), /* "post" or "get" */
+ [@mel.optional]
+ min: option(string),
+ [@mel.optional]
+ minLength: option(int),
+ [@mel.optional]
+ multiple: option(bool),
+ [@mel.optional]
+ muted: option(bool),
+ [@mel.optional]
+ name: option(string),
+ [@mel.optional]
+ nonce: option(string),
+ [@mel.optional]
+ noValidate: option(bool),
+ [@mel.optional] [@mel.as "open"]
+ open_: option(bool), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ optimum: option(int),
+ [@mel.optional]
+ pattern: option(string), /* valid Js RegExp */
+ [@mel.optional]
+ placeholder: option(string),
+ [@mel.optional]
+ playsInline: option(bool),
+ [@mel.optional]
+ poster: option(string), /* uri */
+ [@mel.optional]
+ preload: option(string), /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */
+ [@mel.optional]
+ radioGroup: option(string),
+ [@mel.optional]
+ readOnly: option(bool),
+ [@mel.optional]
+ rel: option(string), /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */
+ [@mel.optional]
+ required: option(bool),
+ [@mel.optional]
+ reversed: option(bool),
+ [@mel.optional]
+ rows: option(int),
+ [@mel.optional]
+ rowSpan: option(int),
+ [@mel.optional]
+ sandbox: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ scope: option(string), /* has a fixed set of possible values */
+ [@mel.optional]
+ scoped: option(bool),
+ [@mel.optional]
+ scrolling: option(string), /* html4 only, "auto", "yes" or "no" */
+ /* seamless - supported by React, but removed from the html5 spec */
+ [@mel.optional]
+ selected: option(bool),
+ [@mel.optional]
+ shape: option(string),
+ [@mel.optional]
+ size: option(int),
+ [@mel.optional]
+ sizes: option(string),
+ [@mel.optional]
+ span: option(int),
+ [@mel.optional]
+ src: option(string), /* uri */
+ [@mel.optional]
+ srcDoc: option(string),
+ [@mel.optional]
+ srcLang: option(string),
+ [@mel.optional]
+ srcSet: option(string),
+ [@mel.optional]
+ start: option(int),
+ [@mel.optional]
+ step: option(float),
+ [@mel.optional]
+ summary: option(string), /* deprecated */
+ [@mel.optional]
+ target: option(string),
+ [@mel.optional] [@mel.as "type"]
+ type_: option(string), /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ useMap: option(string),
+ [@mel.optional]
+ value: option(string),
+ [@mel.optional]
+ width: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
+ [@mel.optional]
+ wrap: option(string), /* "hard" or "soft" */
+ /* Clipboard events */
+ [@mel.optional]
+ onCopy: option(Event.Clipboard.t => unit),
+ [@mel.optional]
+ onCut: option(Event.Clipboard.t => unit),
+ [@mel.optional]
+ onPaste: option(Event.Clipboard.t => unit),
+ /* Composition events */
+ [@mel.optional]
+ onCompositionEnd: option(Event.Composition.t => unit),
+ [@mel.optional]
+ onCompositionStart: option(Event.Composition.t => unit),
+ [@mel.optional]
+ onCompositionUpdate: option(Event.Composition.t => unit),
+ /* Keyboard events */
+ [@mel.optional]
+ onKeyDown: option(Event.Keyboard.t => unit),
+ [@mel.optional]
+ onKeyPress: option(Event.Keyboard.t => unit),
+ [@mel.optional]
+ onKeyUp: option(Event.Keyboard.t => unit),
+ /* Focus events */
+ [@mel.optional]
+ onFocus: option(Event.Focus.t => unit),
+ [@mel.optional]
+ onBlur: option(Event.Focus.t => unit),
+ /* Form events */
+ [@mel.optional]
+ onChange: option(Event.Form.t => unit),
+ [@mel.optional]
+ onInput: option(Event.Form.t => unit),
+ [@mel.optional]
+ onSubmit: option(Event.Form.t => unit),
+ [@mel.optional]
+ onInvalid: option(Event.Form.t => unit),
+ /* Mouse events */
+ [@mel.optional]
+ onClick: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onContextMenu: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onDoubleClick: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onDrag: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragEnd: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragEnter: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragExit: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragLeave: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragOver: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDragStart: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onDrop: option(Event.Drag.t => unit),
+ [@mel.optional]
+ onMouseDown: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseEnter: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseLeave: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseMove: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseOut: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseOver: option(Event.Mouse.t => unit),
+ [@mel.optional]
+ onMouseUp: option(Event.Mouse.t => unit),
+ /* Selection events */
+ [@mel.optional]
+ onSelect: option(Event.Selection.t => unit),
+ /* Touch events */
+ [@mel.optional]
+ onTouchCancel: option(Event.Touch.t => unit),
+ [@mel.optional]
+ onTouchEnd: option(Event.Touch.t => unit),
+ [@mel.optional]
+ onTouchMove: option(Event.Touch.t => unit),
+ [@mel.optional]
+ onTouchStart: option(Event.Touch.t => unit),
+ // Pointer events
+ [@mel.optional]
+ onPointerOver: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerEnter: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerDown: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerMove: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerUp: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerCancel: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerOut: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onPointerLeave: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onGotPointerCapture: option(Event.Pointer.t => unit),
+ [@mel.optional]
+ onLostPointerCapture: option(Event.Pointer.t => unit),
+ /* UI events */
+ [@mel.optional]
+ onScroll: option(Event.UI.t => unit),
+ /* Wheel events */
+ [@mel.optional]
+ onWheel: option(Event.Wheel.t => unit),
+ /* Media events */
+ [@mel.optional]
+ onAbort: option(Event.Media.t => unit),
+ [@mel.optional]
+ onCanPlay: option(Event.Media.t => unit),
+ [@mel.optional]
+ onCanPlayThrough: option(Event.Media.t => unit),
+ [@mel.optional]
+ onDurationChange: option(Event.Media.t => unit),
+ [@mel.optional]
+ onEmptied: option(Event.Media.t => unit),
+ [@mel.optional]
+ onEncrypetd: option(Event.Media.t => unit),
+ [@mel.optional]
+ onEnded: option(Event.Media.t => unit),
+ [@mel.optional]
+ onError: option(Event.Media.t => unit),
+ [@mel.optional]
+ onLoadedData: option(Event.Media.t => unit),
+ [@mel.optional]
+ onLoadedMetadata: option(Event.Media.t => unit),
+ [@mel.optional]
+ onLoadStart: option(Event.Media.t => unit),
+ [@mel.optional]
+ onPause: option(Event.Media.t => unit),
+ [@mel.optional]
+ onPlay: option(Event.Media.t => unit),
+ [@mel.optional]
+ onPlaying: option(Event.Media.t => unit),
+ [@mel.optional]
+ onProgress: option(Event.Media.t => unit),
+ [@mel.optional]
+ onRateChange: option(Event.Media.t => unit),
+ [@mel.optional]
+ onSeeked: option(Event.Media.t => unit),
+ [@mel.optional]
+ onSeeking: option(Event.Media.t => unit),
+ [@mel.optional]
+ onStalled: option(Event.Media.t => unit),
+ [@mel.optional]
+ onSuspend: option(Event.Media.t => unit),
+ [@mel.optional]
+ onTimeUpdate: option(Event.Media.t => unit),
+ [@mel.optional]
+ onVolumeChange: option(Event.Media.t => unit),
+ [@mel.optional]
+ onWaiting: option(Event.Media.t => unit),
+ /* Image events */
+ [@mel.optional]onLoad: option(Event.Image.t => unit) /* duplicate */, /*~onError: Event.Image.t => unit=?,*/
+ /* Animation events */
+ [@mel.optional]
+ onAnimationStart: option(Event.Animation.t => unit),
+ [@mel.optional]
+ onAnimationEnd: option(Event.Animation.t => unit),
+ [@mel.optional]
+ onAnimationIteration: option(Event.Animation.t => unit),
+ /* Transition events */
+ [@mel.optional]
+ onTransitionEnd: option(Event.Transition.t => unit),
+ /* svg */
+ [@mel.optional]
+ accentHeight: option(string),
+ [@mel.optional]
+ accumulate: option(string),
+ [@mel.optional]
+ additive: option(string),
+ [@mel.optional]
+ alignmentBaseline: option(string),
+ [@mel.optional]
+ allowReorder: option(string),
+ [@mel.optional]
+ alphabetic: option(string),
+ [@mel.optional]
+ amplitude: option(string),
+ [@mel.optional]
+ arabicForm: option(string),
+ [@mel.optional]
+ ascent: option(string),
+ [@mel.optional]
+ attributeName: option(string),
+ [@mel.optional]
+ attributeType: option(string),
+ [@mel.optional]
+ autoReverse: option(string),
+ [@mel.optional]
+ azimuth: option(string),
+ [@mel.optional]
+ baseFrequency: option(string),
+ [@mel.optional]
+ baseProfile: option(string),
+ [@mel.optional]
+ baselineShift: option(string),
+ [@mel.optional]
+ bbox: option(string),
+ [@mel.optional] [@mel.as "begin"]
+ begin_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ bias: option(string),
+ [@mel.optional]
+ by: option(string),
+ [@mel.optional]
+ calcMode: option(string),
+ [@mel.optional]
+ capHeight: option(string),
+ [@mel.optional]
+ clip: option(string),
+ [@mel.optional]
+ clipPath: option(string),
+ [@mel.optional]
+ clipPathUnits: option(string),
+ [@mel.optional]
+ clipRule: option(string),
+ [@mel.optional]
+ colorInterpolation: option(string),
+ [@mel.optional]
+ colorInterpolationFilters: option(string),
+ [@mel.optional]
+ colorProfile: option(string),
+ [@mel.optional]
+ colorRendering: option(string),
+ [@mel.optional]
+ contentScriptType: option(string),
+ [@mel.optional]
+ contentStyleType: option(string),
+ [@mel.optional]
+ cursor: option(string),
+ [@mel.optional]
+ cx: option(string),
+ [@mel.optional]
+ cy: option(string),
+ [@mel.optional]
+ d: option(string),
+ [@mel.optional]
+ decelerate: option(string),
+ [@mel.optional]
+ descent: option(string),
+ [@mel.optional]
+ diffuseConstant: option(string),
+ [@mel.optional]
+ direction: option(string),
+ [@mel.optional]
+ display: option(string),
+ [@mel.optional]
+ divisor: option(string),
+ [@mel.optional]
+ dominantBaseline: option(string),
+ [@mel.optional]
+ dur: option(string),
+ [@mel.optional]
+ dx: option(string),
+ [@mel.optional]
+ dy: option(string),
+ [@mel.optional]
+ edgeMode: option(string),
+ [@mel.optional]
+ elevation: option(string),
+ [@mel.optional]
+ enableBackground: option(string),
+ [@mel.optional] [@mel.as "end"]
+ end_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ exponent: option(string),
+ [@mel.optional]
+ externalResourcesRequired: option(string),
+ [@mel.optional]
+ fill: option(string),
+ [@mel.optional]
+ fillOpacity: option(string),
+ [@mel.optional]
+ fillRule: option(string),
+ [@mel.optional]
+ filter: option(string),
+ [@mel.optional]
+ filterRes: option(string),
+ [@mel.optional]
+ filterUnits: option(string),
+ [@mel.optional]
+ floodColor: option(string),
+ [@mel.optional]
+ floodOpacity: option(string),
+ [@mel.optional]
+ focusable: option(string),
+ [@mel.optional]
+ fontFamily: option(string),
+ [@mel.optional]
+ fontSize: option(string),
+ [@mel.optional]
+ fontSizeAdjust: option(string),
+ [@mel.optional]
+ fontStretch: option(string),
+ [@mel.optional]
+ fontStyle: option(string),
+ [@mel.optional]
+ fontVariant: option(string),
+ [@mel.optional]
+ fontWeight: option(string),
+ [@mel.optional]
+ fomat: option(string),
+ [@mel.optional]
+ from: option(string),
+ [@mel.optional]
+ fx: option(string),
+ [@mel.optional]
+ fy: option(string),
+ [@mel.optional]
+ g1: option(string),
+ [@mel.optional]
+ g2: option(string),
+ [@mel.optional]
+ glyphName: option(string),
+ [@mel.optional]
+ glyphOrientationHorizontal: option(string),
+ [@mel.optional]
+ glyphOrientationVertical: option(string),
+ [@mel.optional]
+ glyphRef: option(string),
+ [@mel.optional]
+ gradientTransform: option(string),
+ [@mel.optional]
+ gradientUnits: option(string),
+ [@mel.optional]
+ hanging: option(string),
+ [@mel.optional]
+ horizAdvX: option(string),
+ [@mel.optional]
+ horizOriginX: option(string),
+ [@mel.optional]
+ ideographic: option(string),
+ [@mel.optional]
+ imageRendering: option(string),
+ [@mel.optional] [@mel.as "in"]
+ in_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ in2: option(string),
+ [@mel.optional]
+ intercept: option(string),
+ [@mel.optional]
+ k: option(string),
+ [@mel.optional]
+ k1: option(string),
+ [@mel.optional]
+ k2: option(string),
+ [@mel.optional]
+ k3: option(string),
+ [@mel.optional]
+ k4: option(string),
+ [@mel.optional]
+ kernelMatrix: option(string),
+ [@mel.optional]
+ kernelUnitLength: option(string),
+ [@mel.optional]
+ kerning: option(string),
+ [@mel.optional]
+ keyPoints: option(string),
+ [@mel.optional]
+ keySplines: option(string),
+ [@mel.optional]
+ keyTimes: option(string),
+ [@mel.optional]
+ lengthAdjust: option(string),
+ [@mel.optional]
+ letterSpacing: option(string),
+ [@mel.optional]
+ lightingColor: option(string),
+ [@mel.optional]
+ limitingConeAngle: option(string),
+ [@mel.optional]
+ local: option(string),
+ [@mel.optional]
+ markerEnd: option(string),
+ [@mel.optional]
+ markerHeight: option(string),
+ [@mel.optional]
+ markerMid: option(string),
+ [@mel.optional]
+ markerStart: option(string),
+ [@mel.optional]
+ markerUnits: option(string),
+ [@mel.optional]
+ markerWidth: option(string),
+ [@mel.optional]
+ mask: option(string),
+ [@mel.optional]
+ maskContentUnits: option(string),
+ [@mel.optional]
+ maskUnits: option(string),
+ [@mel.optional]
+ mathematical: option(string),
+ [@mel.optional]
+ mode: option(string),
+ [@mel.optional]
+ numOctaves: option(string),
+ [@mel.optional]
+ offset: option(string),
+ [@mel.optional]
+ opacity: option(string),
+ [@mel.optional]
+ operator: option(string),
+ [@mel.optional]
+ order: option(string),
+ [@mel.optional]
+ orient: option(string),
+ [@mel.optional]
+ orientation: option(string),
+ [@mel.optional]
+ origin: option(string),
+ [@mel.optional]
+ overflow: option(string),
+ [@mel.optional]
+ overflowX: option(string),
+ [@mel.optional]
+ overflowY: option(string),
+ [@mel.optional]
+ overlinePosition: option(string),
+ [@mel.optional]
+ overlineThickness: option(string),
+ [@mel.optional]
+ paintOrder: option(string),
+ [@mel.optional]
+ panose1: option(string),
+ [@mel.optional]
+ pathLength: option(string),
+ [@mel.optional]
+ patternContentUnits: option(string),
+ [@mel.optional]
+ patternTransform: option(string),
+ [@mel.optional]
+ patternUnits: option(string),
+ [@mel.optional]
+ pointerEvents: option(string),
+ [@mel.optional]
+ points: option(string),
+ [@mel.optional]
+ pointsAtX: option(string),
+ [@mel.optional]
+ pointsAtY: option(string),
+ [@mel.optional]
+ pointsAtZ: option(string),
+ [@mel.optional]
+ preserveAlpha: option(string),
+ [@mel.optional]
+ preserveAspectRatio: option(string),
+ [@mel.optional]
+ primitiveUnits: option(string),
+ [@mel.optional]
+ r: option(string),
+ [@mel.optional]
+ radius: option(string),
+ [@mel.optional]
+ refX: option(string),
+ [@mel.optional]
+ refY: option(string),
+ [@mel.optional]
+ renderingIntent: option(string),
+ [@mel.optional]
+ repeatCount: option(string),
+ [@mel.optional]
+ repeatDur: option(string),
+ [@mel.optional]
+ requiredExtensions: option(string),
+ [@mel.optional]
+ requiredFeatures: option(string),
+ [@mel.optional]
+ restart: option(string),
+ [@mel.optional]
+ result: option(string),
+ [@mel.optional]
+ rotate: option(string),
+ [@mel.optional]
+ rx: option(string),
+ [@mel.optional]
+ ry: option(string),
+ [@mel.optional]
+ scale: option(string),
+ [@mel.optional]
+ seed: option(string),
+ [@mel.optional]
+ shapeRendering: option(string),
+ [@mel.optional]
+ slope: option(string),
+ [@mel.optional]
+ spacing: option(string),
+ [@mel.optional]
+ specularConstant: option(string),
+ [@mel.optional]
+ specularExponent: option(string),
+ [@mel.optional]
+ speed: option(string),
+ [@mel.optional]
+ spreadMethod: option(string),
+ [@mel.optional]
+ startOffset: option(string),
+ [@mel.optional]
+ stdDeviation: option(string),
+ [@mel.optional]
+ stemh: option(string),
+ [@mel.optional]
+ stemv: option(string),
+ [@mel.optional]
+ stitchTiles: option(string),
+ [@mel.optional]
+ stopColor: option(string),
+ [@mel.optional]
+ stopOpacity: option(string),
+ [@mel.optional]
+ strikethroughPosition: option(string),
+ [@mel.optional]
+ strikethroughThickness: option(string),
+ [@mel.optional]
+ string: option(string),
+ [@mel.optional]
+ stroke: option(string),
+ [@mel.optional]
+ strokeDasharray: option(string),
+ [@mel.optional]
+ strokeDashoffset: option(string),
+ [@mel.optional]
+ strokeLinecap: option(string),
+ [@mel.optional]
+ strokeLinejoin: option(string),
+ [@mel.optional]
+ strokeMiterlimit: option(string),
+ [@mel.optional]
+ strokeOpacity: option(string),
+ [@mel.optional]
+ strokeWidth: option(string),
+ [@mel.optional]
+ surfaceScale: option(string),
+ [@mel.optional]
+ systemLanguage: option(string),
+ [@mel.optional]
+ tableValues: option(string),
+ [@mel.optional]
+ targetX: option(string),
+ [@mel.optional]
+ targetY: option(string),
+ [@mel.optional]
+ textAnchor: option(string),
+ [@mel.optional]
+ textDecoration: option(string),
+ [@mel.optional]
+ textLength: option(string),
+ [@mel.optional]
+ textRendering: option(string),
+ [@mel.optional] [@mel.as "to"]
+ to_: option(string), /* use this one. Previous one is deprecated */
+ [@mel.optional]
+ transform: option(string),
+ [@mel.optional]
+ u1: option(string),
+ [@mel.optional]
+ u2: option(string),
+ [@mel.optional]
+ underlinePosition: option(string),
+ [@mel.optional]
+ underlineThickness: option(string),
+ [@mel.optional]
+ unicode: option(string),
+ [@mel.optional]
+ unicodeBidi: option(string),
+ [@mel.optional]
+ unicodeRange: option(string),
+ [@mel.optional]
+ unitsPerEm: option(string),
+ [@mel.optional]
+ vAlphabetic: option(string),
+ [@mel.optional]
+ vHanging: option(string),
+ [@mel.optional]
+ vIdeographic: option(string),
+ [@mel.optional]
+ vMathematical: option(string),
+ [@mel.optional]
+ values: option(string),
+ [@mel.optional]
+ vectorEffect: option(string),
+ [@mel.optional]
+ version: option(string),
+ [@mel.optional]
+ vertAdvX: option(string),
+ [@mel.optional]
+ vertAdvY: option(string),
+ [@mel.optional]
+ vertOriginX: option(string),
+ [@mel.optional]
+ vertOriginY: option(string),
+ [@mel.optional]
+ viewBox: option(string),
+ [@mel.optional]
+ viewTarget: option(string),
+ [@mel.optional]
+ visibility: option(string),
+ /*width::string? =>*/
+ [@mel.optional]
+ widths: option(string),
+ [@mel.optional]
+ wordSpacing: option(string),
+ [@mel.optional]
+ writingMode: option(string),
+ [@mel.optional]
+ x: option(string),
+ [@mel.optional]
+ x1: option(string),
+ [@mel.optional]
+ x2: option(string),
+ [@mel.optional]
+ xChannelSelector: option(string),
+ [@mel.optional]
+ xHeight: option(string),
+ [@mel.optional]
+ xlinkActuate: option(string),
+ [@mel.optional]
+ xlinkArcrole: option(string),
+ [@mel.optional]
+ xlinkHref: option(string),
+ [@mel.optional]
+ xlinkRole: option(string),
+ [@mel.optional]
+ xlinkShow: option(string),
+ [@mel.optional]
+ xlinkTitle: option(string),
+ [@mel.optional]
+ xlinkType: option(string),
+ [@mel.optional]
+ xmlns: option(string),
+ [@mel.optional]
+ xmlnsXlink: option(string),
+ [@mel.optional]
+ xmlBase: option(string),
+ [@mel.optional]
+ xmlLang: option(string),
+ [@mel.optional]
+ xmlSpace: option(string),
+ [@mel.optional]
+ y: option(string),
+ [@mel.optional]
+ y1: option(string),
+ [@mel.optional]
+ y2: option(string),
+ [@mel.optional]
+ yChannelSelector: option(string),
+ [@mel.optional]
+ z: option(string),
+ [@mel.optional]
+ zoomAndPan: option(string),
+ /* RDFa */
+ [@mel.optional]
+ about: option(string),
+ [@mel.optional]
+ datatype: option(string),
+ [@mel.optional]
+ inlist: option(string),
+ [@mel.optional]
+ prefix: option(string),
+ [@mel.optional]
+ property: option(string),
+ [@mel.optional]
+ resource: option(string),
+ [@mel.optional]
+ typeof: option(string),
+ [@mel.optional]
+ vocab: option(string),
+ /* react-specific */
+ [@mel.optional]
+ dangerouslySetInnerHTML: option({. "__html": string}),
+ [@mel.optional]
+ suppressContentEditableWarning: option(bool),
+ [@mel.optional]
+ suppressHydrationWarning: option(bool),
+};
+
+// As we've removed `ReactDOMRe.createElement`, this enables patterns like
+// Types.createElement(ReactDOM.stringToComponent(multiline ? "textarea" : "input"), ...)
+external stringToComponent: string => Types.component(domProps) = "%identity";
+
+module Style = DOMStyle;
+module Server = DOMServer;
+
+[@mel.variadic] [@mel.module "react"]
+external createElement:
+ (string, ~props: domProps=?, array(Types.element)) => Types.element =
+ "createElement";
+
+[@mel.variadic] [@mel.module "react"]
+external createDOMElementVariadic:
+ (string, ~props: domProps=?, array(Types.element)) => Types.element =
+ "createElement";
+
+[@mel.module "react/jsx-runtime"]
+external jsxKeyed: (string, domProps, ~key: string=?, unit) => Types.element =
+ "jsx";
+
+[@mel.module "react/jsx-runtime"]
+external jsx: (string, domProps) => Types.element = "jsx";
+
+[@mel.module "react/jsx-runtime"]
+external jsxs: (string, domProps) => Types.element = "jsxs";
+
+[@mel.module "react/jsx-runtime"]
+external jsxsKeyed: (string, domProps, ~key: string=?, unit) => Types.element =
+ "jsxs";
diff --git a/src/dOMServer.re b/src/dOMServer.re
new file mode 100644
index 000000000..f836a8567
--- /dev/null
+++ b/src/dOMServer.re
@@ -0,0 +1,6 @@
+[@mel.module "react-dom/server"]
+external renderToString: Types.element => string = "renderToString";
+
+[@mel.module "react-dom/server"]
+external renderToStaticMarkup: Types.element => string =
+ "renderToStaticMarkup";
diff --git a/src/ReactDOMStyle.re b/src/dOMStyle.re
similarity index 100%
rename from src/ReactDOMStyle.re
rename to src/dOMStyle.re
diff --git a/src/dune b/src/dune
index 04695586f..168895eb3 100644
--- a/src/dune
+++ b/src/dune
@@ -1,8 +1,7 @@
(library
- (name reason_react)
+ (name react)
(public_name reason-react)
(preprocess
(pps melange.ppx reason-react-ppx))
- (wrapped false)
(libraries melange.dom)
(modes melange))
diff --git a/src/ReasonReactErrorBoundary.re b/src/errorBoundary.re
similarity index 97%
rename from src/ReasonReactErrorBoundary.re
rename to src/errorBoundary.re
index a5ec746a2..fab2aa056 100644
--- a/src/ReasonReactErrorBoundary.re
+++ b/src/errorBoundary.re
@@ -33,6 +33,8 @@ type params('error) = {
|}
];
+module React = Types;
+
[@react.component]
external make:
(~children: React.element, ~fallback: params('error) => React.element) =>
diff --git a/src/ReactEvent.re b/src/event.re
similarity index 100%
rename from src/ReactEvent.re
rename to src/event.re
diff --git a/src/hooks.re b/src/hooks.re
new file mode 100644
index 000000000..886dfb1cf
--- /dev/null
+++ b/src/hooks.re
@@ -0,0 +1,344 @@
+/* HOOKS */
+
+/*
+ * Yeah, we know this api isn't great. tl;dr: useReducer instead.
+ * It's because useState can take functions or non-function values and treats
+ * them differently. Lazy initializer + callback which returns state is the
+ * only way to safely have any type of state and be able to update it correctly.
+ */
+
+open Types;
+
+[@mel.module "react"]
+external useState:
+ ([@mel.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
+ "useState";
+
+[@mel.module "react"]
+external useReducer:
+ ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
+ ('state, 'action => unit) =
+ "useReducer";
+
+[@mel.module "react"]
+external useReducerWithMapState:
+ (
+ [@mel.uncurry] (('state, 'action) => 'state),
+ 'initialState,
+ [@mel.uncurry] ('initialState => 'state)
+ ) =>
+ ('state, 'action => unit) =
+ "useReducer";
+
+[@mel.module "react"]
+external useEffect: ([@mel.uncurry] (unit => option(unit => unit))) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect0:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ [@mel.as {json|[]|json}] _
+ ) =>
+ unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect1:
+ ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect2:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect3:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect4:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect5:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
+ unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect6:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f)
+ ) =>
+ unit =
+ "useEffect";
+[@mel.module "react"]
+external useEffect7:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f, 'g)
+ ) =>
+ unit =
+ "useEffect";
+
+[@mel.module "react"]
+external useLayoutEffect:
+ ([@mel.uncurry] (unit => option(unit => unit))) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect0:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ [@mel.as {json|[]|json}] _
+ ) =>
+ unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect1:
+ ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect2:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect3:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect4:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect5:
+ ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
+ unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect6:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f)
+ ) =>
+ unit =
+ "useLayoutEffect";
+[@mel.module "react"]
+external useLayoutEffect7:
+ (
+ [@mel.uncurry] (unit => option(unit => unit)),
+ ('a, 'b, 'c, 'd, 'e, 'f, 'g)
+ ) =>
+ unit =
+ "useLayoutEffect";
+
+[@mel.module "react"]
+external useMemo: ([@mel.uncurry] (unit => 'any)) => 'any = "useMemo";
+[@mel.module "react"]
+external useMemo0:
+ ([@mel.uncurry] (unit => 'any), [@mel.as {json|[]|json}] _) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo1: ([@mel.uncurry] (unit => 'any), array('a)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo2: ([@mel.uncurry] (unit => 'any), ('a, 'b)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo3: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo4: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo5:
+ ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo6:
+ ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any =
+ "useMemo";
+[@mel.module "react"]
+external useMemo7:
+ ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any =
+ "useMemo";
+
+/* This is used as return values */
+
+[@mel.module "react"] external useCallback: 'fn => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback0: ('fn, [@mel.as {json|[]|json}] _) => 'fn =
+ "useCallback";
+[@mel.module "react"]
+external useCallback1: ('fn, array('a)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback2: ('fn, ('a, 'b)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback3: ('fn, ('a, 'b, 'c)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback4: ('fn, ('a, 'b, 'c, 'd)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback5: ('fn, ('a, 'b, 'c, 'd, 'e)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback6: ('fn, ('a, 'b, 'c, 'd, 'e, 'f)) => 'fn = "useCallback";
+[@mel.module "react"]
+external useCallback7: ('fn, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'fn =
+ "useCallback";
+
+[@mel.module "react"]
+external useContext: Context.t('any) => 'any = "useContext";
+
+[@mel.module "react"] external useRef: 'value => ref('value) = "useRef";
+
+[@mel.module "react"]
+external useImperativeHandle0:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ [@mel.as {json|[]|json}] _
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle1:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ array('a)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle2:
+ (Js.Nullable.t(ref('value)), [@mel.uncurry] (unit => 'value), ('a, 'b)) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle3:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle4:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle5:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd, 'e)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle6:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd, 'e, 'f)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+[@mel.module "react"]
+external useImperativeHandle7:
+ (
+ Js.Nullable.t(ref('value)),
+ [@mel.uncurry] (unit => 'value),
+ ('a, 'b, 'c, 'd, 'e, 'f, 'g)
+ ) =>
+ unit =
+ "useImperativeHandle";
+
+module Uncurried = {
+ [@mel.module "react"]
+ external useState:
+ ([@mel.uncurry] (unit => 'state)) =>
+ ('state, (. ('state => 'state)) => unit) =
+ "useState";
+
+ [@mel.module "react"]
+ external useReducer:
+ ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
+ ('state, (. 'action) => unit) =
+ "useReducer";
+
+ [@mel.module "react"]
+ external useReducerWithMapState:
+ (
+ [@mel.uncurry] (('state, 'action) => 'state),
+ 'initialState,
+ [@mel.uncurry] ('initialState => 'state)
+ ) =>
+ ('state, (. 'action) => unit) =
+ "useReducer";
+
+ type callback('input, 'output) = (. 'input) => 'output;
+
+ [@mel.module "react"]
+ external useCallback:
+ ([@mel.uncurry] ('input => 'output)) => callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback0:
+ ([@mel.uncurry] ('input => 'output), [@mel.as {json|[]|json}] _) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback1:
+ ([@mel.uncurry] ('input => 'output), array('a)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback2:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback3:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback4:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback5:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback6:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f)) =>
+ callback('input, 'output) =
+ "useCallback";
+ [@mel.module "react"]
+ external useCallback7:
+ ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) =>
+ callback('input, 'output) =
+ "useCallback";
+};
+
+type callback('input, 'output) = 'input => 'output;
+type transitionConfig = {timeoutMs: int};
+
+[@mel.module "react"]
+external useTransition:
+ (~config: transitionConfig=?, unit) =>
+ (callback(callback(unit, unit), unit), bool) =
+ "useTransition";
diff --git a/src/ReasonReactRouter.re b/src/router.re
similarity index 99%
rename from src/ReasonReactRouter.re
rename to src/router.re
index 91fc98510..f176a91c9 100644
--- a/src/ReasonReactRouter.re
+++ b/src/router.re
@@ -187,16 +187,17 @@ let unwatchUrl = watcherID =>
| Some(window: Dom.window) =>
removeEventListener(window, "popstate", watcherID)
};
+
let useUrl = (~serverUrl=?, ()) => {
let (url, setUrl) =
- React.useState(() =>
+ Hooks.useState(() =>
switch (serverUrl) {
| Some(url) => url
| None => dangerouslyGetInitialUrl()
}
);
- React.useEffect0(() => {
+ Hooks.useEffect0(() => {
let watcherId = watchUrl(url => setUrl(_ => url));
/**
diff --git a/src/test-utils/dune b/src/test-utils/dune
new file mode 100644
index 000000000..6330e0068
--- /dev/null
+++ b/src/test-utils/dune
@@ -0,0 +1,7 @@
+(library
+ (name reactTest)
+ (public_name reason-react.test)
+ (preprocess
+ (pps melange.ppx reason-react-ppx))
+ (libraries reason-react)
+ (modes melange))
diff --git a/src/test-utils/reactTest.re b/src/test-utils/reactTest.re
new file mode 100644
index 000000000..9a3115508
--- /dev/null
+++ b/src/test-utils/reactTest.re
@@ -0,0 +1,2 @@
+module Renderer = TestRenderer;
+module Utils = TestUtils;
diff --git a/src/test-utils/reactTest.rei b/src/test-utils/reactTest.rei
new file mode 100644
index 000000000..2f3148126
--- /dev/null
+++ b/src/test-utils/reactTest.rei
@@ -0,0 +1,88 @@
+module Renderer: {
+ type t;
+
+ [@mel.module "react-test-renderer"]
+ external create: React.element => t = "create";
+
+ [@mel.send] external toJSON: t => Js.Json.t = "toJSON";
+
+ module Shallow: {
+ type t;
+
+ [@mel.module "react-test-renderer/shallow"]
+ external createRenderer: unit => t = "createRenderer";
+
+ [@mel.send]
+ external render: (t, React.element) => option(React.element) = "render";
+
+ [@mel.send]
+ external getRenderOutput: t => option(React.element) = "getRenderOutput";
+
+ [@mel.send] external unmount: t => unit = "unmount";
+
+ let renderWithRenderer: React.element => option(React.element);
+ };
+};
+
+module Utils: {
+ let act: (unit => unit) => unit;
+
+ let actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit);
+
+ [@mel.module "react-dom/test-utils"]
+ external isElement: 'element => bool = "isElement";
+
+ [@mel.module "react-dom/test-utils"]
+ external isElementOfType: ('element, React.component('props)) => bool =
+ "isElementOfType";
+
+ [@mel.module "react-dom/test-utils"]
+ external isDOMComponent: 'element => bool = "isDOMComponent";
+
+ [@mel.module "react-dom/test-utils"]
+ external isCompositeComponent: 'element => bool = "isCompositeComponent";
+
+ [@mel.module "react-dom/test-utils"]
+ external isCompositeComponentWithType:
+ ('element, React.component('props)) => bool =
+ "isCompositeComponentWithType";
+
+ module Simulate: {
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external click: Dom.element => unit = "click";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external clickWithEvent: (Dom.element, 'event) => unit = "click";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external change: Dom.element => unit = "change";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external blur: Dom.element => unit = "blur";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external changeWithEvent: (Dom.element, 'event) => unit = "change";
+ let changeWithValue: (Dom.element, string) => unit;
+ let changeWithChecked: (Dom.element, bool) => unit;
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external canPlay: Dom.element => unit = "canPlay";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external timeUpdate: Dom.element => unit = "timeUpdate";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external ended: Dom.element => unit = "ended";
+ [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
+ external focus: Dom.element => unit = "focus";
+ };
+
+ module DOM: {
+ [@mel.return nullable] [@mel.get]
+ external value: Dom.element => option(string) = "value";
+
+ let findBySelector: (Dom.element, string) => option(Dom.element);
+ let findByAllSelector: (Dom.element, string) => array(Dom.element);
+ let findBySelectorAndTextContent:
+ (Dom.element, string, string) => option(Dom.element);
+ let findBySelectorAndPartialTextContent:
+ (Dom.element, string, string) => option(Dom.element);
+ };
+
+ let prepareContainer: (Stdlib.ref(option(Dom.element)), unit) => unit;
+ let cleanupContainer: (Stdlib.ref(option(Dom.element)), unit) => unit;
+ let getContainer: Stdlib.ref(option(Dom.element)) => Dom.element;
+};
diff --git a/src/ReactTestRenderer.re b/src/test-utils/testRenderer.re
similarity index 100%
rename from src/ReactTestRenderer.re
rename to src/test-utils/testRenderer.re
diff --git a/src/ReactTestUtils.re b/src/test-utils/testUtils.re
similarity index 100%
rename from src/ReactTestUtils.re
rename to src/test-utils/testUtils.re
diff --git a/src/types.re b/src/types.re
new file mode 100644
index 000000000..d48431acb
--- /dev/null
+++ b/src/types.re
@@ -0,0 +1,6 @@
+type element;
+type ref('value) = {mutable current: 'value};
+
+type componentLike('props, 'return) = 'props => 'return;
+
+type component('props) = componentLike('props, element);
diff --git a/test/ReactRouter__test.re b/test/ReactRouter__test.re
index ed0900d1d..060377218 100644
--- a/test/ReactRouter__test.re
+++ b/test/ReactRouter__test.re
@@ -1,6 +1,6 @@
open Jest;
open Jest.Expect;
-open ReasonReactRouter;
+open React.Router;
describe("it allows to create url from string", () => {
test("it supports basic paths", () => {
diff --git a/test/ReactTestRenderer__test.re b/test/ReactTestRenderer__test.re
index 5e218c39c..6b542e968 100644
--- a/test/ReactTestRenderer__test.re
+++ b/test/ReactTestRenderer__test.re
@@ -1,6 +1,6 @@
open Jest;
-external toObject: ReactTestRenderer.t => Js.t({.}) = "%identity";
+external toObject: ReactTest.Renderer.t => Js.t({.}) = "%identity";
module Tester = {
[@react.component]
@@ -11,7 +11,7 @@ describe("reactTestRenderer", () => {
open Expect;
test("create returns ReactTestInstance", () => {
- let component = ReactTestRenderer.create();
+ let component = ReactTest.Renderer.create();
let keys = Js.Obj.keys(component);
expect(keys)
@@ -30,8 +30,8 @@ describe("reactTestRenderer", () => {
});
test("toJSON returns test rendered JSON", () => {
- let component = ReactTestRenderer.create();
- let json = ReactTestRenderer.toJSON(component);
+ let component = ReactTest.Renderer.create();
+ let json = ReactTest.Renderer.toJSON(component);
let expected =
Js.Json.parseExn(
{|
@@ -52,7 +52,7 @@ describe("reactShallowRenderer", () => {
open Expect;
test("createRenderer", () => {
- let renderer = ReactTestRenderer.Shallow.createRenderer();
+ let renderer = ReactTest.Renderer.Shallow.createRenderer();
let isDefined =
renderer
|> Js.Undefined.return
@@ -62,47 +62,44 @@ describe("reactShallowRenderer", () => {
});
test("render accepts renderer", () => {
- let renderer = ReactTestRenderer.Shallow.createRenderer();
- let render = ReactTestRenderer.Shallow.render(renderer);
+ let renderer = ReactTest.Renderer.Shallow.createRenderer();
+ let render = ReactTest.Renderer.Shallow.render(renderer);
expect(Js.typeof(render))->toEqual("function");
});
test("render will render a component", () => {
- let renderer = ReactTestRenderer.Shallow.createRenderer();
+ let renderer = ReactTest.Renderer.Shallow.createRenderer();
let component =
- ReactTestRenderer.Shallow.render(renderer, )
- ->Option.get;
+ ReactTest.Renderer.Shallow.render(renderer, )->Option.get;
expect(component == element)->toBe(true);
});
test("renderWithRenderer will render a component", () => {
let component =
- ReactTestRenderer.Shallow.renderWithRenderer()
- ->Option.get;
+ ReactTest.Renderer.Shallow.renderWithRenderer()->Option.get;
expect(component == element)->toBe(true);
});
test("getRenderOutput returns element", () => {
- let renderer = ReactTestRenderer.Shallow.createRenderer();
+ let renderer = ReactTest.Renderer.Shallow.createRenderer();
- ReactTestRenderer.Shallow.render(renderer, ) |> ignore;
+ ReactTest.Renderer.Shallow.render(renderer, ) |> ignore;
let component =
- ReactTestRenderer.Shallow.getRenderOutput(renderer)
- ->Option.get;
+ ReactTest.Renderer.Shallow.getRenderOutput(renderer)->Option.get;
expect(component == element)->toBe(true);
});
test("unmount removes the node", () => {
- let renderer = ReactTestRenderer.Shallow.createRenderer();
+ let renderer = ReactTest.Renderer.Shallow.createRenderer();
- ReactTestRenderer.Shallow.render(renderer, ) |> ignore;
- ReactTestRenderer.Shallow.unmount(renderer);
+ ReactTest.Renderer.Shallow.render(renderer, ) |> ignore;
+ ReactTest.Renderer.Shallow.unmount(renderer);
let component =
- ReactTestRenderer.Shallow.getRenderOutput(renderer)
+ ReactTest.Renderer.Shallow.getRenderOutput(renderer)
->Option.get
->Js.Null.return;
diff --git a/test/React__test.re b/test/React__test.re
index 563048f41..26553eebb 100644
--- a/test/React__test.re
+++ b/test/React__test.re
@@ -1,6 +1,6 @@
open Jest;
open Jest.Expect;
-open ReactTestUtils;
+open ReactTest.Utils;
open Belt;
module DummyStatefulComponent = {
@@ -165,7 +165,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render( "Hello world!"->React.string
, container)
+ React.DOM.render( "Hello world!"->React.string
, container)
});
expect(
@@ -179,7 +179,7 @@ describe("React", () => {
test("can render null elements", () => {
let container = getContainer(container);
- act(() => {ReactDOM.render( React.null
, container)});
+ act(() => {React.DOM.render( React.null
, container)});
expect(
container
@@ -193,7 +193,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render( "Hello"->React.string
, container)
+ React.DOM.render( "Hello"->React.string
, container)
});
expect(
@@ -207,7 +207,7 @@ describe("React", () => {
test("can render int elements", () => {
let container = getContainer(container);
- act(() => {ReactDOM.render( 12345->React.int
, container)});
+ act(() => {React.DOM.render( 12345->React.int
, container)});
expect(
container
@@ -220,7 +220,9 @@ describe("React", () => {
test("can render float elements", () => {
let container = getContainer(container);
- act(() => {ReactDOM.render( 12.345->React.float
, container)});
+ act(() => {
+ React.DOM.render( 12.345->React.float
, container)
+ });
expect(
container
@@ -236,7 +238,7 @@ describe("React", () => {
[|1, 2, 3|]
->Array.map(item => { item->React.int
});
- act(() => {ReactDOM.render( array->React.array
, container)});
+ act(() => {React.DOM.render( array->React.array
, container)});
expect(
container
@@ -264,7 +266,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render(
+ React.DOM.render(
React.cloneElement(
"Hello"->React.string
,
{"data-name": "World"},
@@ -287,7 +289,9 @@ describe("React", () => {
test("can render react components", () => {
let container = getContainer(container);
- act(() => {ReactDOM.render(, container)});
+ act(() => {
+ React.DOM.render(, container)
+ });
expect(
container
@@ -323,7 +327,7 @@ describe("React", () => {
test("can render react components with reducers", () => {
let container = getContainer(container);
- act(() => {ReactDOM.render(, container)});
+ act(() => {React.DOM.render(, container)});
expect(
container
@@ -391,7 +395,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render(, container)
+ React.DOM.render(, container)
});
expect(
@@ -461,19 +465,19 @@ describe("React", () => {
let callback = Mock.fn();
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
container,
)
});
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
container,
)
});
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
container,
)
@@ -487,19 +491,19 @@ describe("React", () => {
let callback = Mock.fn();
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
container,
)
});
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
container,
)
});
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
container,
)
@@ -523,7 +527,7 @@ describe("React", () => {
};
act(() => {
- ReactDOM.render(, container)
+ React.DOM.render(, container)
});
expect(myRef.contents->Option.map(item => item.current))
@@ -534,7 +538,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render(
+ React.DOM.render(
1->React.int
2->React.int
@@ -570,7 +574,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render(
+ React.DOM.render(
,
@@ -591,10 +595,10 @@ describe("React", () => {
let value = ref("");
act(() => {
- ReactDOM.render(
+ React.DOM.render(
{value := event->ReactEvent.Form.target##value}}
+ onChange={event => {value := event->React.Event.Form.target##value}}
/>,
container,
)
@@ -613,7 +617,7 @@ describe("React", () => {
let title = Some("foo");
act(() => {
- ReactDOM.render(
+ React.DOM.render(
"Child"->React.string
,
@@ -645,7 +649,7 @@ describe("React", () => {
;
act(() => {
- ReactDOM.render(
+ React.DOM.render(
render({name: "Joe", imageUrl: "https://foo.png"}),
container,
)
@@ -657,7 +661,7 @@ describe("React", () => {
let container = getContainer(container);
act(() => {
- ReactDOM.render(
+ React.DOM.render(
{
expect(
diff --git a/test/dune b/test/dune
index 60b26f091..ef72d1773 100644
--- a/test/dune
+++ b/test/dune
@@ -3,6 +3,6 @@
(target test)
(module_systems
(commonjs bs.js))
- (libraries reason-react jest)
+ (libraries reason-react reason-react.test jest)
(preprocess
(pps melange.ppx reason-react-ppx)))