Skip to content

Commit 93c20e0

Browse files
committed
Migrate to rescript webapi
1 parent 147a82a commit 93c20e0

19 files changed

+168
-253
lines changed

package-lock.json

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@headlessui/react": "^2.2.4",
2525
"@mdx-js/loader": "^3.1.0",
2626
"@rescript/react": "^0.14.0-rc.1",
27+
"@rescript/webapi": "^0.1.0-experimental-03eae8b",
2728
"codemirror": "^5.54.0",
2829
"docson": "^2.1.0",
2930
"escodegen": "^2.1.0",

rescript.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
"version": 4
66
},
77
"bs-dependencies": [
8-
"@rescript/react"
8+
"@rescript/react",
9+
"@rescript/webapi"
10+
],
11+
"bsc-flags": [
12+
"-open WebAPI.Global"
913
],
1014
"sources": [
1115
{

src/ApiDocs.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ module SidebarTree = {
9595
let version = url->Url.getVersionString
9696

9797
let moduleRoute =
98-
Webapi.URL.make("file://" ++ router.asPath).pathname
98+
WebAPI.URL.make(~url="file://" ++ router.asPath).pathname
9999
->String.replace(`/docs/manual/${version}/api/`, "")
100100
->String.split("/")
101101

src/ConsolePanel.res

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ let make = (~logs, ~appendLog) => {
1717
| _ => ()
1818
}
1919
}
20-
Webapi.Window.addEventListener("message", cb)
21-
Some(() => Webapi.Window.removeEventListener("message", cb))
20+
WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Custom("message"), cb)
21+
Some(() => WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Custom("message"), cb))
2222
}, [appendLog])
2323

2424
<div className="px-2 py-6 relative flex flex-col flex-1 overflow-y-hidden">

src/Playground.res

Lines changed: 68 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1064,7 +1064,7 @@ module ControlPanel = {
10641064

10651065
let onClick = evt => {
10661066
ReactEvent.Mouse.preventDefault(evt)
1067-
let ret = copyToClipboard(Webapi.Window.Location.href)
1067+
let ret = copyToClipboard(window.location.href)
10681068
if ret {
10691069
setState(_ => CopySuccess)
10701070
}
@@ -1129,12 +1129,12 @@ module ControlPanel = {
11291129
}
11301130

11311131
React.useEffect(() => {
1132-
Webapi.Window.addEventListener("keydown", onKeyDown)
1133-
Some(() => Webapi.Window.removeEventListener("keydown", onKeyDown))
1132+
WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Keydown, onKeyDown)
1133+
Some(() => WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Keydown, onKeyDown))
11341134
}, [])
11351135

11361136
let runButtonText = {
1137-
let userAgent = Webapi.Window.Navigator.userAgent
1137+
let userAgent = window.navigator.userAgent
11381138
let run = "Run"
11391139
if userAgent->String.includes("iPhone") || userAgent->String.includes("Android") {
11401140
run
@@ -1496,9 +1496,7 @@ let make = (~versions: array<string>) => {
14961496
None
14971497
}, (compilerState, compilerDispatch))
14981498

1499-
let (layout, setLayout) = React.useState(_ =>
1500-
Webapi.Window.innerWidth < breakingPoint ? Column : Row
1501-
)
1499+
let (layout, setLayout) = React.useState(_ => window.innerWidth < breakingPoint ? Column : Row)
15021500

15031501
let isDragging = React.useRef(false)
15041502

@@ -1510,26 +1508,34 @@ let make = (~versions: array<string>) => {
15101508
let subPanelRef = React.useRef(Nullable.null)
15111509

15121510
let onResize = () => {
1513-
let newLayout = Webapi.Window.innerWidth < breakingPoint ? Column : Row
1511+
let newLayout = window.innerWidth < breakingPoint ? Column : Row
15141512
setLayout(_ => newLayout)
15151513
switch panelRef.current->Nullable.toOption {
15161514
| Some(element) =>
1517-
let offsetTop = Webapi.Element.getBoundingClientRect(element)["top"]
1518-
Webapi.Element.Style.height(element, `calc(100vh - ${offsetTop->Float.toString}px)`)
1515+
let offsetTop = WebAPI.Element.getBoundingClientRect(element).top
1516+
WebAPI.Element.setAttribute(
1517+
element,
1518+
~qualifiedName="style",
1519+
~value=`height: calc(100vh - ${offsetTop->Float.toString}px)`,
1520+
)
15191521
| None => ()
15201522
}
15211523

15221524
switch subPanelRef.current->Nullable.toOption {
15231525
| Some(element) =>
1524-
let offsetTop = Webapi.Element.getBoundingClientRect(element)["top"]
1525-
Webapi.Element.Style.height(element, `calc(100vh - ${offsetTop->Float.toString}px)`)
1526+
let offsetTop = WebAPI.Element.getBoundingClientRect(element).top
1527+
WebAPI.Element.setAttribute(
1528+
element,
1529+
~qualifiedName="style",
1530+
~value=`height: calc(100vh - ${offsetTop->Float.toString}px)`,
1531+
)
15261532
| None => ()
15271533
}
15281534
}
15291535

15301536
React.useEffect(() => {
1531-
Webapi.Window.addEventListener("resize", onResize)
1532-
Some(() => Webapi.Window.removeEventListener("resize", onResize))
1537+
WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Resize, onResize)
1538+
Some(() => WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Resize, onResize))
15331539
}, [])
15341540

15351541
// To force CodeMirror render scrollbar on first render
@@ -1552,30 +1558,50 @@ let make = (~versions: array<string>) => {
15521558
subPanelRef.current->Nullable.toOption,
15531559
) {
15541560
| (Some(panelElement), Some(leftElement), Some(rightElement), Some(subElement)) =>
1555-
let rectPanel = Webapi.Element.getBoundingClientRect(panelElement)
1561+
let rectPanel = WebAPI.Element.getBoundingClientRect(panelElement)
15561562

15571563
// Update OutputPanel height
1558-
let offsetTop = Webapi.Element.getBoundingClientRect(subElement)["top"]
1559-
Webapi.Element.Style.height(subElement, `calc(100vh - ${offsetTop->Float.toString}px)`)
1564+
let offsetTop = WebAPI.Element.getBoundingClientRect(subElement).top
1565+
WebAPI.Element.setAttribute(
1566+
subElement,
1567+
~qualifiedName="style",
1568+
~value=`height: calc(100vh - ${offsetTop->Float.toString}px)`,
1569+
)
15601570

15611571
switch layout {
15621572
| Row =>
1563-
let delta = Int.toFloat(position) -. rectPanel["left"]
1573+
let delta = Int.toFloat(position) -. rectPanel.left
15641574

1565-
let leftWidth = delta /. rectPanel["width"] *. 100.0
1566-
let rightWidth = (rectPanel["width"] -. delta) /. rectPanel["width"] *. 100.0
1575+
let leftWidth = delta /. rectPanel.width *. 100.0
1576+
let rightWidth = (rectPanel.width -. delta) /. rectPanel.width *. 100.0
15671577

1568-
Webapi.Element.Style.width(leftElement, `${leftWidth->Float.toString}%`)
1569-
Webapi.Element.Style.width(rightElement, `${rightWidth->Float.toString}%`)
1578+
WebAPI.Element.setAttribute(
1579+
leftElement,
1580+
~qualifiedName="style",
1581+
~value=`width: ${leftWidth->Float.toString}%`,
1582+
)
1583+
WebAPI.Element.setAttribute(
1584+
rightElement,
1585+
~qualifiedName="style",
1586+
~value=`width: ${rightWidth->Float.toString}%`,
1587+
)
15701588

15711589
| Column =>
1572-
let delta = Int.toFloat(position) -. rectPanel["top"]
1590+
let delta = Int.toFloat(position) -. rectPanel.top
15731591

1574-
let topHeight = delta /. rectPanel["height"] *. 100.
1575-
let bottomHeight = (rectPanel["height"] -. delta) /. rectPanel["height"] *. 100.
1592+
let topHeight = delta /. rectPanel.height *. 100.
1593+
let bottomHeight = (rectPanel.height -. delta) /. rectPanel.height *. 100.
15761594

1577-
Webapi.Element.Style.height(leftElement, `${topHeight->Float.toString}%`)
1578-
Webapi.Element.Style.height(rightElement, `${bottomHeight->Float.toString}%`)
1595+
WebAPI.Element.setAttribute(
1596+
leftElement,
1597+
~qualifiedName="style",
1598+
~value=`height: ${topHeight->Float.toString}%`,
1599+
)
1600+
WebAPI.Element.setAttribute(
1601+
rightElement,
1602+
~qualifiedName="style",
1603+
~value=`height: ${bottomHeight->Float.toString}%`,
1604+
)
15791605
}
15801606
| _ => ()
15811607
}
@@ -1594,15 +1620,15 @@ let make = (~versions: array<string>) => {
15941620
onMove(position)
15951621
}
15961622

1597-
Webapi.Window.addEventListener("mousemove", onMouseMove)
1598-
Webapi.Window.addEventListener("touchmove", onTouchMove)
1599-
Webapi.Window.addEventListener("mouseup", onMouseUp)
1623+
WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Mousemove, onMouseMove)
1624+
WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Touchmove, onTouchMove)
1625+
WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Mouseup, onMouseUp)
16001626

16011627
Some(
16021628
() => {
1603-
Webapi.Window.removeEventListener("mousemove", onMouseMove)
1604-
Webapi.Window.removeEventListener("touchmove", onTouchMove)
1605-
Webapi.Window.removeEventListener("mouseup", onMouseUp)
1629+
WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Mousemove, onMouseMove)
1630+
WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Touchmove, onTouchMove)
1631+
WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Mouseup, onMouseUp)
16061632
},
16071633
)
16081634
}, [layout])
@@ -1765,10 +1791,10 @@ let make = (~versions: array<string>) => {
17651791
/>
17661792
<div
17671793
className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
1768-
ref={ReactDOM.Ref.domRef(panelRef)}>
1794+
ref={ReactDOM.Ref.domRef(panelRef->Obj.magic)}>
17691795
// Left Panel
17701796
<div
1771-
ref={ReactDOM.Ref.domRef(leftPanelRef)}
1797+
ref={ReactDOM.Ref.domRef((Obj.magic(leftPanelRef): React.ref<Nullable.t<Dom.element>>))}
17721798
className={`${layout == Column ? "h-2/4" : "!h-full"} ${layout == Column
17731799
? "w-full"
17741800
: "w-[50%]"}`}>
@@ -1785,10 +1811,10 @@ let make = (~versions: array<string>) => {
17851811
| None => ()
17861812
| Some(timer) => clearTimeout(timer)
17871813
}
1788-
let timer = setTimeout(() => {
1814+
let timer = setTimeout(~handler=() => {
17891815
timeoutCompile.current()
17901816
typingTimer.current = None
1791-
}, 100)
1817+
}, ~timeout=100)
17921818
typingTimer.current = Some(timer)
17931819
}}
17941820
onMarkerFocus={rowCol => setFocusedRowCol(_prev => Some(rowCol))}
@@ -1797,7 +1823,7 @@ let make = (~versions: array<string>) => {
17971823
</div>
17981824
// Separator
17991825
<div
1800-
ref={ReactDOM.Ref.domRef(separatorRef)}
1826+
ref={ReactDOM.Ref.domRef((Obj.magic(separatorRef): React.ref<Nullable.t<Dom.element>>))}
18011827
// TODO: touch-none not applied
18021828
className={`flex items-center justify-center touch-none select-none bg-gray-70 opacity-30 hover:opacity-50 rounded-lg ${layout ==
18031829
Column
@@ -1812,14 +1838,16 @@ let make = (~versions: array<string>) => {
18121838
</div>
18131839
// Right Panel
18141840
<div
1815-
ref={ReactDOM.Ref.domRef(rightPanelRef)}
1841+
ref={ReactDOM.Ref.domRef(rightPanelRef->Obj.magic)}
18161842
className={`${layout == Column ? "h-6/15" : "!h-inherit"} ${layout == Column
18171843
? "w-full"
18181844
: "w-[50%]"}`}>
18191845
<div className={"flex flex-wrap justify-between w-full " ++ (disabled ? "opacity-50" : "")}>
18201846
{React.array(headers)}
18211847
</div>
1822-
<div ref={ReactDOM.Ref.domRef(subPanelRef)} className="overflow-auto">
1848+
<div
1849+
ref={ReactDOM.Ref.domRef((Obj.magic(subPanelRef): React.ref<Nullable.t<Dom.element>>))}
1850+
className="overflow-auto">
18231851
<OutputPanel currentTab compilerDispatch compilerState editorCode />
18241852
</div>
18251853
</div>

src/Try.res

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,8 @@ let default = props => {
3333

3434
let getStaticProps: Next.GetStaticProps.t<props, _> = async _ => {
3535
let versions = {
36-
let response = await Webapi.Fetch.fetch(
37-
"https://cdn.rescript-lang.org/playground-bundles/versions.json",
38-
)
39-
let json = await Webapi.Fetch.Response.json(response)
36+
let response = await fetch("https://cdn.rescript-lang.org/playground-bundles/versions.json")
37+
let json = await WebAPI.Response.json(response)
4038
json
4139
->JSON.Decode.array
4240
->Option.getOrThrow

src/bindings/Jsdom.res

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
type window = {document: Dom.document}
2-
type t = {window: window}
1+
type window = {document: WebAPI.DOMAPI.document}
2+
type t = {window: WebAPI.DOMAPI.window}
33

44
@module("jsdom") @new
55
external make: string => t = "JSDOM"

0 commit comments

Comments
 (0)