more changes

Author: aspeddro

src/Packages.res

@@ -73,7 +73,7 @@ module Resource = {
     })
   }
 
-  let uniqueKeywords: array<string> => array<string> = %raw(`(keywords) => [...new Set(keywords)]`)
+  let uniqueKeywords = arr => arr->Set.fromArray->Set.toArray
 
   let isOfficial = (res: t) => {
     switch res {
@@ -340,24 +340,15 @@ module InfoSidebar = {
 }
 
 type props = {
-  "packages": array<npmPackage>,
-  "urlResources": array<urlResource>,
-  "unmaintained": array<npmPackage>,
+  packages: array<npmPackage>,
+  urlResources: array<urlResource>,
+  unmaintained: array<npmPackage>,
 }
 
 type state =
   | All
   | Filtered(string) // search term
 
-let scrollToTop: unit => unit = %raw(`function() {
-  window.scroll({
-    top: 0,
-    left: 0,
-    behavior: 'smooth'
-  });
-}
-`)
-
 let default = (props: props) => {
   open Markdown
 
@@ -373,9 +364,9 @@ let default = (props: props) => {
   })
 
   let allResources = {
-    let npms = props["packages"]->Array.map(pkg => Resource.Npm(pkg))
-    let urls = props["urlResources"]->Array.map(res => Resource.Url(res))
-    let outdated = props["unmaintained"]->Array.map(pkg => Resource.Outdated(pkg))
+    let npms = props.packages->Array.map(pkg => Resource.Npm(pkg))
+    let urls = props.urlResources->Array.map(res => Resource.Url(res))
+    let outdated = props.unmaintained->Array.map(pkg => Resource.Outdated(pkg))
     Belt.Array.concatMany([npms, urls, outdated])
   }
 
@@ -420,7 +411,7 @@ let default = (props: props) => {
   })
 
   let onKeywordSelect = keyword => {
-    scrollToTop()
+    WebAPI.Window.scrollTo(window, ~options={left: 0.0, top: 0.0, behavior: Smooth})
     setState(_ => {
       Filtered(keyword)
     })
@@ -524,73 +515,107 @@ let default = (props: props) => {
   </>
 }
 
-type npmData = {
-  "objects": array<{
-    "searchScore": float,
-    "score": {
-      "final": float,
-      "detail": {"quality": float, "popularity": float, "maintenance": float},
-    },
-    "package": {
-      "name": string,
-      "keywords": array<string>,
-      "description": option<string>,
-      "version": string,
-      "links": {"npm": string, "repository": option<string>},
-    },
-  }>,
-}
+let parsePkgs = data => {
+  open JSON
+
+  switch data {
+  | Object(dict{"objects": Array(arr)}) =>
+    arr->Array.filterMap(pkg => {
+      switch pkg {
+      | Object(dict{
+          "searchScore": Number(searchScore),
+          "score": Object(dict{"detail": Object(dict{"maintenance": Number(maintenanceScore)})}),
+          "package": Object(
+            dict{
+              "name": String(name),
+              "keywords": Array(keywords),
+              "version": String(version),
+              "links": Object(dict{"npm": String(npmHref)} as links),
+            } as package,
+          ),
+        }) =>
+        let keywords =
+          keywords
+          ->Array.filterMap(k => {
+            switch k {
+            | String(k) => Some(k)
+            | _ => None
+            }
+          })
+          ->Resource.filterKeywords
+          ->Resource.uniqueKeywords
 
-module Response = {
-  type t
-  @send external json: t => promise<npmData> = "json"
-}
+        let repositoryHref = switch links->Dict.get("repository") {
+        | Some(String(v)) => Null.Value(v)
+        | _ => Null
+        }
 
-@val external fetchNpmPackages: string => promise<Response.t> = "fetch"
-
-let parsePkgs = data =>
-  Array.map(data["objects"], item => {
-    let pkg = item["package"]
-    {
-      name: pkg["name"],
-      version: pkg["version"],
-      keywords: Resource.filterKeywords(pkg["keywords"])->Resource.uniqueKeywords,
-      description: Option.getOr(pkg["description"], ""),
-      repositoryHref: Null.fromOption(pkg["links"]["repository"]),
-      npmHref: pkg["links"]["npm"],
-      searchScore: item["searchScore"],
-      maintenanceScore: item["score"]["detail"]["maintenance"],
-    }
-  })
+        let description = switch package {
+        | dict{"description": String(description)} => description
+        | _ => ""
+        }
+
+        Some({
+          name,
+          version,
+          keywords,
+          description,
+          repositoryHref,
+          npmHref,
+          searchScore,
+          maintenanceScore,
+        })
+      | _ => None
+      }
+    })
+  | _ => []
+  }
+}
 
 let getStaticProps: Next.GetStaticProps.t<props, unit> = async _ctx => {
   let baseUrl = "https://registry.npmjs.org/-/v1/search?text=keywords:rescript&size=250&maintenance=1.0&popularity=0.5&quality=0.9"
 
   let (one, two, three) = await Promise.all3((
-    fetchNpmPackages(baseUrl),
-    fetchNpmPackages(baseUrl ++ "&from=250"),
-    fetchNpmPackages(baseUrl ++ "&from=500"),
+    fetch(baseUrl),
+    fetch(baseUrl ++ "&from=250"),
+    fetch(baseUrl ++ "&from=500"),
   ))
 
+  let responseToOption = async response => {
+    try {
+      let json = await response->WebAPI.Response.json
+      Some(json)
+    } catch {
+    | _ =>
+      Console.error2("Failed to parse response", response)
+      None
+    }
+  }
+
   let (data1, data2, data3) = await Promise.all3((
-    one->Response.json,
-    two->Response.json,
-    three->Response.json,
+    one->responseToOption,
+    two->responseToOption,
+    three->responseToOption,
   ))
 
   let unmaintained = []
 
   let pkges =
-    parsePkgs(data1)
-    ->Array.concat(parsePkgs(data2))
-    ->Array.concat(parsePkgs(data3))
+    [data1, data2, data3]
+    ->Array.filterMap(d =>
+      switch d {
+      | Some(d) => Some(parsePkgs(d))
+      | None => None
+      }
+    )
+    ->Array.flat
     ->Array.filter(pkg => {
       if packageAllowList->Array.includes(pkg.name) {
         true
       } else if pkg.name->String.includes("reason") {
         false
       } else if pkg.maintenanceScore < 0.3 {
-        let _ = unmaintained->Array.push(pkg)
+        unmaintained->Array.push(pkg)
         false
       } else {
         true
@@ -606,9 +631,9 @@ let getStaticProps: Next.GetStaticProps.t<props, unit> = async _ctx => {
 
   {
     "props": {
-      "packages": pkges,
-      "unmaintained": unmaintained,
-      "urlResources": urlResources,
+      packages: pkges,
+      unmaintained,
+      urlResources,
     },
   }
 }

src/Packages.resi

@@ -18,9 +18,9 @@ type npmPackage = {
 }
 
 type props = {
-  "packages": array<npmPackage>,
-  "urlResources": array<urlResource>,
-  "unmaintained": array<npmPackage>,
+  packages: array<npmPackage>,
+  urlResources: array<urlResource>,
+  unmaintained: array<npmPackage>,
 }
 
 let default: props => React.element

src/Playground.res

@@ -352,30 +352,20 @@ module ResultPane = {
 }
 
 module WarningFlagsWidget = {
-  @set external _scrollTop: (Dom.element, int) => unit = "scrollTop"
-  @send external focus: Dom.element => unit = "focus"
-
-  @send external blur: Dom.element => unit = "blur"
-
-  @get external scrollHeight: Dom.element => int = "scrollHeight"
-  @get external clientHeight: Dom.element => int = "clientHeight"
-  @get external scrollTop: Dom.element => int = "scrollTop"
-  @get external offsetTop: Dom.element => int = "offsetTop"
-  @get external offsetHeight: Dom.element => int = "offsetHeight"
-
-  @set external setScrollTop: (Dom.element, int) => unit = "scrollTop"
-
   // Inspired by MUI (who got inspired by WAI best practise examples)
   // https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L327
-  let scrollToElement = (~parent: Dom.element, element: Dom.element): unit =>
-    if parent->scrollHeight > parent->clientHeight {
-      let scrollBottom = parent->clientHeight + parent->scrollTop
-      let elementBottom = element->offsetTop + element->offsetHeight
+  let scrollToElement = (
+    ~parent: WebAPI.DOMAPI.htmlElement,
+    element: WebAPI.DOMAPI.htmlElement,
+  ): unit =>
+    if parent.scrollHeight > parent.clientHeight {
+      let scrollBottom = parent.clientHeight + Float.toInt(parent.scrollTop)
+      let elementBottom = element.offsetTop + element.offsetHeight
 
       if elementBottom > scrollBottom {
-        parent->setScrollTop(elementBottom - parent->clientHeight)
-      } else if element->offsetTop - element->offsetHeight < parent->scrollTop {
-        parent->setScrollTop(element->offsetTop - element->offsetHeight)
+        parent.scrollTop = Float.fromInt(elementBottom - parent.clientHeight)
+      } else if element.offsetTop - element.offsetHeight < Float.toInt(parent.scrollTop) {
+        parent.scrollTop = Float.fromInt(element.offsetTop - element.offsetHeight)
       }
     }
 
@@ -525,11 +515,15 @@ module WarningFlagsWidget = {
     let listboxRef = React.useRef(Nullable.null)
 
     // Used for the text input
-    let inputRef = React.useRef(Nullable.null)
+    let inputRef: React.ref<Nullable.t<WebAPI.DOMAPI.htmlInputElement>> = React.useRef(
+      Nullable.null,
+    )
 
-    let focusInput = () => inputRef.current->Nullable.forEach(el => el->focus)
+    let focusInput = () =>
+      inputRef.current->Nullable.forEach(el => WebAPI.HTMLInputElement.focus(el))
 
-    let blurInput = () => inputRef.current->Nullable.forEach(el => el->blur)
+    let blurInput = () =>
+      inputRef.current->Nullable.forEach(el => WebAPI.HTMLInputElement.focus(el))
 
     let chips = Array.mapWithIndex(flags, (token, i) => {
       let {WarningFlagDescription.Parser.flag: flag, enabled} = token
@@ -696,7 +690,8 @@ module WarningFlagsWidget = {
               let parent = listboxRef.current->Nullable.toOption
 
               switch (parent, el) {
-              | (Some(parent), Some(el)) => Some(() => scrollToElement(~parent, el))
+              | (Some(parent), Some(el)) =>
+                Some(() => scrollToElement(~parent, (Obj.magic(el): WebAPI.DOMAPI.htmlElement)))
               | _ => None
               }
             })->Some
@@ -745,7 +740,7 @@ module WarningFlagsWidget = {
     let suggestionBox =
       Option.map(suggestions, elements =>
         <div
-          ref={ReactDOM.Ref.domRef(listboxRef)}
+          ref={ReactDOM.Ref.domRef((Obj.magic(listboxRef): React.ref<Nullable.t<Dom.element>>))}
           className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-gray-100 max-h-[15rem]">
           elements
         </div>
@@ -816,7 +811,7 @@ module WarningFlagsWidget = {
           chips
           <section className="mt-3">
             <input
-              ref={ReactDOM.Ref.domRef(inputRef)}
+              ref={ReactDOM.Ref.domRef((Obj.magic(inputRef): React.ref<Nullable.t<Dom.element>>))}
               className="inline-block p-1 max-w-20 outline-none bg-gray-90 placeholder-gray-20 placeholder-opacity-50"
               placeholder="Flags"
               type_="text"
@@ -1791,7 +1786,7 @@ let make = (~versions: array<string>) => {
     />
     <div
       className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
-      ref={ReactDOM.Ref.domRef(panelRef->Obj.magic)}>
+      ref={ReactDOM.Ref.domRef((Obj.magic(panelRef): React.ref<Nullable.t<Dom.element>>))}>
       // Left Panel
       <div
         ref={ReactDOM.Ref.domRef((Obj.magic(leftPanelRef): React.ref<Nullable.t<Dom.element>>))}
@@ -1838,7 +1833,7 @@ let make = (~versions: array<string>) => {
       </div>
       // Right Panel
       <div
-        ref={ReactDOM.Ref.domRef(rightPanelRef->Obj.magic)}
+        ref={ReactDOM.Ref.domRef((Obj.magic(rightPanelRef): React.ref<Nullable.t<Dom.element>>))}
         className={`${layout == Column ? "h-6/15" : "!h-inherit"} ${layout == Column
             ? "w-full"
             : "w-[50%]"}`}>

src/SyntaxLookup.res

@@ -141,10 +141,7 @@ type state =
   | ShowFiltered(string, array<Item.t>) // (search, filteredItems)
   | ShowDetails(Item.t)
 
-@val @scope("window")
-external scrollTo: (int, int) => unit = "scrollTo"
-
-let scrollToTop = () => scrollTo(0, 0)
+let scrollToTop = () => WebAPI.Window.scrollTo(window, ~options={left: 0.0, top: 0.0})
 
 type props = {mdxSources: array<MdxRemote.output>}
 type params = {slug: string}