Remove reduce in Playground result ANSI

Author: chenglou

src/components/AnsiPre.mjs

@@ -52,20 +52,20 @@ function AnsiPre(Props) {
   var children = Props.children;
   var spans = Belt_Array.mapWithIndex(Ansi.SgrString.fromTokens(Ansi.parse(children)), (function (i, str) {
           var key = String(i);
-          var className = Belt_Array.reduce(str.params, "", (function (acc, p) {
+          var className = str.params.map(function (p) {
                   if (typeof p === "number") {
-                    return acc + " bold";
+                    return "bold";
                   }
                   switch (p.TAG | 0) {
                     case /* Fg */0 :
-                        return acc + (" " + mapColor(/* Fg */0, p._0));
+                        return mapColor(/* Fg */0, p._0);
                     case /* Bg */1 :
-                        return acc + (" " + mapColor(/* Bg */1, p._0));
+                        return mapColor(/* Bg */1, p._0);
                     case /* Unknown */2 :
-                        return acc;
+                        return "";
 
                   }
-                }));
+                }).join(" ");
           return React.createElement("span", {
                       key: key,
                       className: className

src/components/AnsiPre.res

@@ -29,14 +29,14 @@ let mapColor = (~target: colorTarget, c: Color.t): string =>
 let renderSgrString = (~key: string, sgrStr: SgrString.t): React.element => {
   let {SgrString.content: content, params} = sgrStr
 
-  let className = Belt.Array.reduce(params, "", (acc, p) =>
+  let className = params->Js.Array2.map(p =>
     switch p {
-    | Sgr.Bold => acc ++ " bold"
-    | Fg(c) => acc ++ (" " ++ mapColor(~target=Fg, c))
-    | Bg(c) => acc ++ (" " ++ mapColor(~target=Bg, c))
-    | _ => acc
+    | Sgr.Bold => "bold"
+    | Fg(c) => mapColor(~target=Fg, c)
+    | Bg(c) => mapColor(~target=Bg, c)
+    | _ => ""
     }
-  )
+  )->Js.Array2.joinWith(" ")
 
   <span key className> {React.string(content)} </span>
 }