Remove Util.ReactStuff and simplify other Util usages

Author: ryyppy

common/Util.js

@@ -39,22 +39,9 @@ module Debounce = {
     }
   }
 }
-module ReactStuff = {
-  let s = React.string
-  let ate = React.array
 
-  module Unsafe = {
-    external elementAsString: React.element => string = "%identity"
-  }
-  module Style = ReactDOM.Style
-
-  @bs.module("react")
-  external lazy_: (unit => Js.Promise.t<'a>) => 'a = "lazy"
-
-  module Suspense = {
-    @bs.module("react") @react.component
-    external make: (~children: React.element) => React.element = "Suspense"
-  }
+module Unsafe = {
+  external elementAsString: React.element => string = "%identity"
 }
 
 module String = {

common/Util.res

@@ -1,6 +1,5 @@
 // This file was automatically converted to ReScript from 'AnsiPre.re'
 // Check the output and make sure to delete the original file
-open Util.ReactStuff
 open Ansi
 
 type colorTarget =
@@ -39,7 +38,7 @@ let renderSgrString = (~key: string, sgrStr: SgrString.t): React.element => {
     }
   )
 
-  <span key className> {content->s} </span>
+  <span key className> {React.string(content)} </span>
 }
 
 @react.component
@@ -50,5 +49,5 @@ let make = (~className=?, ~children: string) => {
   })
 
   // Note: pre is essential here, otherwise whitespace and newlines are not respected
-  <pre ?className> {spans->ate} </pre>
+  <pre ?className> {React.array(spans)} </pre>
 }

components/AnsiPre.js

@@ -1,5 +1,3 @@
-open Util.ReactStuff
-
 let langShortname = (lang: string) =>
   switch lang {
   | "ocaml" => "ml"
@@ -17,7 +15,7 @@ let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text")
   let label = if showLabel {
     let label = langShortname(lang)
     <div className="flex self-end font-sans mb-4 text-sm font-bold text-night-light px-4">
-      {Js.String2.toUpperCase(label)->s}
+      {Js.String2.toUpperCase(label)->React.string}
     </div>
   } else {
     <div className="mt-4" />
@@ -85,7 +83,7 @@ module Toggle = {
           (" flex-none px-4 inline-block p-2 bg-gray-10 rounded-tl rounded-tr " ++
           activeClass)}
           onClick>
-          {label->s}
+          {React.string(label)}
         </span>
       })
 
@@ -97,8 +95,8 @@ module Toggle = {
       <div className="flex w-full flex-col rounded-none text-night-dark">
         <div
           className="flex w-full overflow-auto scrolling-touch font-sans bg-transparent text-sm text-gray-60-tr">
-          <div className="flex"> {tabElements->ate} </div>
-          <div className="flex-1 border-b border-gray-20"> {j`\\u00A0`->s} </div>
+          <div className="flex"> {React.array(tabElements)} </div>
+          <div className="flex-1 border-b border-gray-20"> {React.string(j`\\u00A0`)} </div>
         </div>
         <div
           className="px-4 text-base pb-4 pt-4 overflow-x-auto bg-snow-light border-snow-dark xs:rounded-b border border-t-0">

components/AnsiPre.res

@@ -1,5 +1,3 @@
-open Util.ReactStuff
-
 module Github = {
   @react.component
   let make = (~className: string) =>
@@ -124,7 +122,7 @@ module Table = {
     <svg className={"stroke-current " ++ className} width="25" height="23">
       <defs>
         <style>
-          {".prefix__a,.prefix__b,.prefix__d{fill:none}.prefix__a,.prefix__b{stroke-width:1.5px}.prefix__c{stroke:none}"->s}
+          {React.string(".prefix__a,.prefix__b,.prefix__d{fill:none}.prefix__a,.prefix__b{stroke-width:1.5px}.prefix__c{stroke:none}")}
         </style>
       </defs>
       <g className="prefix__a">

components/CodeExample.js

@@ -1,5 +1,3 @@
-open Util.ReactStuff
-
 // This component is representing a embedded image, mainly used for markdown content
 
 @react.component
@@ -15,7 +13,7 @@ let default = (~src: string, ~withShadow=false, ~caption: option<string>=?) => {
     </a>
     {switch caption {
     | None => React.null
-    | Some(caption) => <div className="mt-4 text-14 text-night-light md:ml-16"> {caption->s} </div>
+    | Some(caption) => <div className="mt-4 text-14 text-night-light md:ml-16"> {React.string(caption)} </div>
     }}
   </div>
 }