Skip to content

Commit 561b0f9

Browse files
ryyppyryyppy
committed
Use proper React apis instead of ReasonReact ones
1 parent 3c0845b commit 561b0f9

File tree

10 files changed

+34
-34
lines changed

10 files changed

+34
-34
lines changed

‎common/Mdx.res

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ module MdxChildren: {
9595
}
9696

9797
module Components = {
98-
type props = {"children": ReasonReact.reactElement}
98+
type props = {"children": React.element}
9999

100100
type headerProps = {
101101
"id": string,
@@ -178,7 +178,7 @@ module Components = {
178178
pre: React.component<props>,
179179
@bs.optional
180180
a: React.component<{
181-
"children": ReasonReact.reactElement,
181+
"children": React.element,
182182
"target": option<string>,
183183
"href": string,
184184
}>,
@@ -189,6 +189,6 @@ module Provider = {
189189
@bs.module("@mdx-js/react") @react.component
190190
external make: (
191191
~components: Components.t,
192-
~children: ReasonReact.reactElement=?,
192+
~children: React.element=?,
193193
) => React.element = "MDXProvider"
194194
}

‎common/Util.res

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@ module Debounce = {
4040
}
4141
}
4242
module ReactStuff = {
43-
let s = ReasonReact.string
44-
let ate = ReasonReact.array
43+
let s = React.string
44+
let ate = React.array
4545

4646
module Unsafe = {
4747
external elementAsString: React.element => string = "%identity"
4848
}
49-
module Style = ReactDOMRe.Style
49+
module Style = ReactDOM.Style
5050

5151
@bs.module("react")
5252
external lazy_: (unit => Js.Promise.t<'a>) => 'a = "lazy"

‎components/ApiMarkdown.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ open Markdown
77
module InvisibleAnchor = {
88
@react.component
99
let make = (~id: string) => {
10-
let style = ReactDOMRe.Style.make(~position="absolute", ~top="-1rem", ())
10+
let style = ReactDOM.Style.make(~position="absolute", ~top="-1rem", ())
1111
<span className="relative" ariaHidden=true> <a id style /> </span>
1212
}
1313
}

‎components/CodeMirror.res

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ let make = // props relevant for the react wrapper
349349
~minHeight: option<string>=?,
350350
~maxHeight: option<string>=?,
351351
~className: option<string>=?,
352-
~style: option<ReactDOMRe.Style.t>=?,
352+
~style: option<ReactDOM.Style.t>=?,
353353
~onChange: option<string => unit>=?,
354354
~onMarkerFocus: option<((int, int)) => unit>=?, // (row, column)
355355
~onMarkerFocusLeave: option<((int, int)) => unit>=?, // (row, column)
@@ -479,6 +479,6 @@ let make = // props relevant for the react wrapper
479479
}, (className, windowWidth))
480480

481481
<div ?className ?style>
482-
<textarea className="hidden" ref={ReactDOMRe.Ref.domRef(inputElement)} />
482+
<textarea className="hidden" ref={ReactDOM.Ref.domRef(inputElement)} />
483483
</div>
484484
}

‎components/DocSearch.res

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ let make = () => {
7979
className={activeClass ++ " bg-night hover:text-white hover:cursor-pointer flex justify-center p-2 px-3 rounded"}
8080
onClick>
8181
<input
82-
ref={ReactDOMRe.Ref.domRef(inputRef)}
82+
ref={ReactDOM.Ref.domRef(inputRef)}
8383
type_="text"
8484
id="docsearch"
8585
onBlur
@@ -153,7 +153,7 @@ module Textbox = {
153153
onClick>
154154
<Icon.MagnifierGlass className="w-5 h-5 mr-3" />
155155
<input
156-
ref={ReactDOMRe.Ref.domRef(inputRef)}
156+
ref={ReactDOM.Ref.domRef(inputRef)}
157157
type_="text"
158158
id
159159
onBlur

‎components/Docson.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,5 @@ let make = () => {
4242
}
4343
None
4444
})
45-
<div ref={ReactDOMRe.Ref.domRef(element)} id="docson-root"> </div>
45+
<div ref={ReactDOM.Ref.domRef(element)} id="docson-root"> </div>
4646
}

‎components/Markdown.res

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ module Cite = {
2222
// https://css-tricks.com/quoting-in-html-quotations-citations-and-blockquotes/
2323
<div
2424
className="my-10 border-l-2 border-fire font-normal pl-10 py-1 text-fire"
25-
style={ReactDOMRe.Style.make(~maxWidth="30rem", ())}>
25+
style={ReactDOM.Style.make(~maxWidth="30rem", ())}>
2626
<blockquote className="text-3xl italic mb-2"> children </blockquote>
2727
{Belt.Option.mapWithDefault(author, React.null, author =>
2828
<figcaption className="font-semibold text-sm"> {author->s} </figcaption>
@@ -104,7 +104,7 @@ module Anchor = {
104104
/* Js.String2.(id->toLowerCase->Js.String2.replaceByRe([%re "/\\s/g"], "-")); */
105105
@react.component
106106
let make = (~id: string) => {
107-
let style = ReactDOMRe.Style.make(~position="absolute", ~top="-7rem", ())
107+
let style = ReactDOM.Style.make(~position="absolute", ~top="-7rem", ())
108108
<span className="inline group relative">
109109
<a
110110
className="invisible text-night-light opacity-50 text-inherit hover:opacity-100 hover:text-night-light hover:cursor-pointer group-hover:visible"
@@ -412,7 +412,7 @@ module Ol = {
412412
module Li = {
413413
let typeOf: 'a => string = %raw("thing => { return typeof thing; }")
414414
let isArray: 'a => bool = %raw("thing => { return thing instanceof Array; }")
415-
external asArray: 'a => array<ReasonReact.reactElement> = "%identity"
415+
external asArray: 'a => array<React.element> = "%identity"
416416

417417
@react.component
418418
let make = (~children) => {
@@ -427,9 +427,9 @@ module Li = {
427427
We are iterating on these here with quite some bailout JS
428428
*/
429429

430-
let elements: ReasonReact.reactElement = if isArray(children) {
430+
let elements: React.element = if isArray(children) {
431431
let arr = children->asArray
432-
let last: ReasonReact.reactElement = {
432+
let last: React.element = {
433433
open Belt.Array
434434
arr->getExn(arr->length - 1)
435435
}
@@ -456,7 +456,7 @@ module Li = {
456456
/* Scenario 3 */
457457
}
458458
} else if typeOf(children) === "string" {
459-
<p> {children->Unsafe.elementAsString->ReasonReact.string} </p>
459+
<p> {children->Unsafe.elementAsString->React.string} </p>
460460
} else {
461461
switch {
462462
/* Unknown Scenario */

‎components/Navigation.res

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ module CollapsibleLink = {
116116
}
117117
}
118118

119-
let useOutsideClick: (ReactDOMRe.Ref.t, unit => unit) => unit = %raw(
119+
let useOutsideClick: (ReactDOM.Ref.t, unit => unit) => unit = %raw(
120120
j`(outerRef, trigger) => {
121121
function handleClickOutside(event) {
122122
if (outerRef.current && !outerRef.current.contains(event.target)) {
@@ -371,7 +371,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
371371
setCollapsibles(prev => Belt.Array.map(prev, c => {...c, state: Closed}))
372372

373373
let outerRef = React.useRef(Js.Nullable.null)
374-
useOutsideClick(ReactDOMRe.Ref.domRef(outerRef), resetCollapsibles)
374+
useOutsideClick(ReactDOM.Ref.domRef(outerRef), resetCollapsibles)
375375

376376
let windowWidth = useWindowWidth()
377377

@@ -412,7 +412,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
412412
let fixedNav = fixed ? "fixed z-30 top-0" : ""
413413

414414
<nav
415-
ref={ReactDOMRe.Ref.domRef(outerRef)}
415+
ref={ReactDOM.Ref.domRef(outerRef)}
416416
id="header"
417417
style={Style.make(~minWidth, ())}
418418
className={fixedNav ++ " flex xs:justify-center w-full h-18 bg-gray-95 shadow text-white-80 text-base"}>

‎re_pages/DocsOverview.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module Link = Next.Link
44
module Card = {
55
@react.component
66
let make = (~title: string, ~hrefs: array<(string, string)>) => {
7-
let style = ReactDOMRe.Style.make(~maxWidth="21rem", ())
7+
let style = ReactDOM.Style.make(~maxWidth="21rem", ())
88
<div style className="border border-snow-dark bg-snow-light px-5 py-8 rounded-lg">
99
<h2 className="font-bold text-21 mb-4"> {title->s} </h2>
1010
<ul>

‎re_pages/Playground.res

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -849,7 +849,7 @@ module WarningFlagsWidget = {
849849
let activeClass = selected === i ? "bg-night-light" : ""
850850

851851
let ref = if selected === i {
852-
ReactDOMRe.Ref.callbackDomRef(dom => {
852+
ReactDOM.Ref.callbackDomRef(dom => {
853853
let el = Js.Nullable.toOption(dom)
854854
let parent = listboxRef.current->Js.Nullable.toOption
855855

@@ -902,9 +902,9 @@ module WarningFlagsWidget = {
902902
let suggestionBox =
903903
Belt.Option.map(suggestions, elements =>
904904
<div
905-
ref={ReactDOMRe.Ref.domRef(listboxRef)}
905+
ref={ReactDOM.Ref.domRef(listboxRef)}
906906
className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-gray-100"
907-
style={ReactDOMRe.Style.make(~maxHeight="15rem", ())}>
907+
style={ReactDOM.Style.make(~maxHeight="15rem", ())}>
908908
elements
909909
</div>
910910
)->Belt.Option.getWithDefault(React.null)
@@ -981,7 +981,7 @@ module WarningFlagsWidget = {
981981
<div>
982982
chips
983983
<input
984-
ref={ReactDOMRe.Ref.domRef(inputRef)}
984+
ref={ReactDOM.Ref.domRef(inputRef)}
985985
className="outline-none bg-night-dark placeholder-snow-darker placeholder-opacity-50"
986986
placeholder="Flags"
987987
type_="text"
@@ -1098,7 +1098,7 @@ module Settings = {
10981098
</button>
10991099
</div>
11001100
<div className="flex justify-end" />
1101-
<div style={ReactDOMRe.Style.make(~maxWidth="40rem", ())}>
1101+
<div style={ReactDOM.Style.make(~maxWidth="40rem", ())}>
11021102
<WarningFlagsWidget onUpdate=onWarningFlagsUpdate flags=warnFlagTokens />
11031103
</div>
11041104
</div>
@@ -1338,15 +1338,15 @@ module OutputPanel = {
13381338

13391339
let codeElement =
13401340
<pre
1341-
style={ReactDOMRe.Style.make(~height="calc(100vh - 11.5rem)", ())}
1341+
style={ReactDOM.Style.make(~height="calc(100vh - 11.5rem)", ())}
13421342
className={"whitespace-pre-wrap overflow-y-auto p-4 " ++ (showCm ? "block" : "hidden")}>
13431343
{HighlightJs.renderHLJS(~code, ~darkmode=true, ~lang="js", ())}
13441344
</pre>
13451345

13461346
let output =
13471347
<div
13481348
className="relative w-full bg-night-dark text-snow-darker"
1349-
style={ReactDOMRe.Style.make(~height="calc(100vh - 9rem)", ())}>
1349+
style={ReactDOM.Style.make(~height="calc(100vh - 9rem)", ())}>
13501350
resultPane codeElement
13511351
</div>
13521352

@@ -1394,11 +1394,11 @@ module OutputPanel = {
13941394
{Pane.title: "JavaScript", content: output},
13951395
{
13961396
title: "Problems",
1397-
content: <div style={ReactDOMRe.Style.make(~height="50%", ())}> errorPane </div>,
1397+
content: <div style={ReactDOM.Style.make(~height="50%", ())}> errorPane </div>,
13981398
},
13991399
{
14001400
title: "Settings",
1401-
content: <div style={ReactDOMRe.Style.make(~height="50%", ())}> settingsPane </div>,
1401+
content: <div style={ReactDOM.Style.make(~height="50%", ())}> settingsPane </div>,
14021402
},
14031403
]
14041404

@@ -1567,11 +1567,11 @@ let default = () => {
15671567
<Navigation fixed=false overlayState />
15681568
<main
15691569
className="bg-gray-100 lg:overflow-hidden lg:h-screen"
1570-
style={ReactDOMRe.Style.make(~maxHeight="calc(100vh - 4.5rem)", ())}>
1570+
style={ReactDOM.Style.make(~maxHeight="calc(100vh - 4.5rem)", ())}>
15711571
<div className="w-full h-full flex flex-col lg:flex-row border-t-4 border-night">
15721572
<div
15731573
className="w-full lg:border-r-4 pl-2 border-night"
1574-
style=?{windowWidth > 1024 ? Some(ReactDOMRe.Style.make(~maxWidth="65%", ())) : None}>
1574+
style=?{windowWidth > 1024 ? Some(ReactDOM.Style.make(~maxWidth="65%", ())) : None}>
15751575
<div className="bg-gray-100 text-snow-darker">
15761576
<ControlPanel
15771577
actionIndicatorKey={Belt.Int.toString(actionCount)}
@@ -1606,7 +1606,7 @@ let default = () => {
16061606
</div>
16071607
<div
16081608
className="relative w-full overflow-x-hidden h-screen lg:h-auto lg:w-1/2"
1609-
style={ReactDOMRe.Style.make(~maxWidth=windowWidth > 1024 ? "56rem" : "100%", ())}>
1609+
style={ReactDOM.Style.make(~maxWidth=windowWidth > 1024 ? "56rem" : "100%", ())}>
16101610
<OutputPanel compilerDispatch compilerState editorCode />
16111611
<div className="absolute bottom-0 w-full">
16121612
<Statusbar

0 commit comments

Comments
 (0)