@softwarefactory-project/re-ansi 0.5.0 → 0.7.0

package/README.md

@@ -71,8 +71,8 @@ Get started by running:
 ```sh
 git clone https://github.com/softwarefactory-project/re-ansi
 cd re-ansi
-yarn install
-yarn start
+npm install
+npm run test
 ```
 
 Then build and run tests with `yarn test`.
@@ -81,6 +81,14 @@ Make sure to read about [React][reason-react] and [Reason][rescript-lang] too.
 
 ## Changes
 
+### 0.7.0
+
+- Update to rescript version 11.
+
+### 0.6.0
+
+- Fix support for bright colors.
+
 ### 0.5.0
 
 - Add support for `[m` and `[K`.

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@softwarefactory-project/re-ansi",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "ANSI code to HTML",
-  "files": ["README.md", "LICENSE", "bsconfig.json", "src"],
-  "main": "./src/Ansi.bs.js",
+  "files": [
+    "README.md",
+    "LICENSE",
+    "rescript.json",
+    "src"
+  ],
+  "main": "./src/Ansi.res.js",
   "license": "Apache-2.0",
   "homepage": "https://github.com/softwarefactory-project/re-ansi",
   "repository": {
@@ -11,24 +16,19 @@
     "url": "git+https://softwarefactory-project.io/r/software-factory/re-ansi.git"
   },
   "scripts": {
-    "build": "bsb -make-world",
-    "start": "bsb -make-world -w",
-    "test": "npm run build && node tests/Spec.bs.js"
+    "build": "rescript",
+    "clean": "rescript clean",
+    "dev": "rescript -w",
+    "test": "npm run build && node tests/Spec.res.js"
   },
   "keywords": [
-    "ReasonReact",
     "ansi",
-    "reason",
-    "reason-react",
-    "reasonml",
     "rescript",
-    "bucklescript"
+    "react"
   ],
   "dependencies": {
-    "reason-react": "^0.9.1",
-    "bs-platform": "^8.2.0"
-  },
-  "devDependencies": {
-    "react": "^16.14.0"
+    "@rescript/core": "^1.3.0",
+    "@rescript/react": "^0.12.1",
+    "rescript": "^11.1.0"
   }
 }

package/{bsconfig.json → rescript.json}

@@ -1,18 +1,16 @@
 {
   "name": "@softwarefactory-project/re-ansi",
-  "reason": {
-    "react-jsx": 3
+  "jsx": {
+    "version": 4
   },
   "sources": ["src", { "dir": "tests", "type": "dev" }],
-  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
+  "bsc-flags": ["-open RescriptCore"],
   "package-specs": [
     {
       "module": "commonjs",
       "in-source": true
     }
   ],
-  "suffix": ".bs.js",
-  "bs-dependencies": ["reason-react"],
-  "bs-dev-dependencies": [],
-  "refmt": 3
+  "suffix": ".res.js",
+  "bs-dependencies": ["@rescript/react", "@rescript/core"]
 }

package/src/{Ansi.re → Ansi.res}

@@ -15,16 +15,14 @@
 // Ansi renders a log ANSI code to a React component
 
 // Document type
-type document = list(atom)
+type rec document = list<atom>
 and atom =
   | Text(string)
   | Link(string)
   | LineBreak
   | DocStyle(ReactDOM.Style.t, document);
 
-type parser('a) = (int, option('a));
-
-open Belt;
+type parser<'a> = (int, option<'a>);
 
 module AnsiCode = {
   type code =
@@ -35,7 +33,7 @@ module AnsiCode = {
     | Style(ReactDOM.Style.t);
 
   // Convert a 4 bits color code to its css color: https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit
-  let fourBitColors = (code: int): option(string) =>
+  let fourBitColors = (code: int): option<string> =>
     switch (code) {
     | 00 => "black"->Some
     | 01 => "red"->Some
@@ -59,6 +57,21 @@ module AnsiCode = {
       None;
     };
 
+  let threeBitColors = (code: int): option<string> =>
+    switch (code) {
+    | 00 => "grey"->Some
+    | 01 => "red"->Some
+    | 02 => "green"->Some
+    | 03 => "yellow"->Some
+    | 04 => "blue"->Some
+    | 05 => "magenta"->Some
+    | 06 => "cyan"->Some
+    | 07 => "white"->Some
+    | _ =>
+      Js.log2("Unknown color value:", code);
+      None;
+    };
+
   // Css utility
   let combine = (css1, css2) => ReactDOM.Style.combine(css1, css2);
   let addWeight = fontWeight => ReactDOM.Style.make(~fontWeight, ());
@@ -70,11 +83,12 @@ module AnsiCode = {
   module ColorCss = {
     type t =
       | Foreground(int)
+      | BrightForeground(int)
       | Background(int);
-    let getColorStyle = (colorMode: int, colorValue: int): option(t) =>
+    let getColorStyle = (colorMode: int, colorValue: int): option<t> =>
       switch (colorMode) {
-      | 3
-      | 9 => colorValue->Foreground->Some
+      | 3 => colorValue->Foreground->Some
+      | 9 => colorValue->BrightForeground->Some
       | 4
       | 0 => colorValue->Background->Some
       | _ =>
@@ -82,12 +96,16 @@ module AnsiCode = {
         None;
       };
 
-    let getColorStyleCss = (color: t): option(ReactDOM.Style.t) =>
+    let getColorStyleCss = (color: t): option<ReactDOM.Style.t> =>
       switch (color) {
       | Foreground(v) =>
         v
         ->fourBitColors
         ->Option.flatMap(color => ReactDOM.Style.make(~color, ())->Some)
+      | BrightForeground(v) =>
+        v
+        ->threeBitColors
+        ->Option.flatMap(color => ReactDOM.Style.make(~color, ~fontWeight="bold", ())->Some)
       | Background(v) =>
         v
         ->fourBitColors
@@ -96,7 +114,7 @@ module AnsiCode = {
           )
       };
 
-    let get = (colorMode: int, colorValue: int): option(ReactDOM.Style.t) =>
+    let get = (colorMode: int, colorValue: int): option<ReactDOM.Style.t> =>
       colorMode
       ->int_of_cp
       ->getColorStyle(colorValue->int_of_cp)
@@ -109,7 +127,7 @@ module AnsiCode = {
       | Regular
       | FontStyle(ReactDOM.Style.t);
 
-    let getFontStyle = (fontMode: int): option(t) =>
+    let getFontStyle = (fontMode: int): option<t> =>
       switch (fontMode) {
       | 0 => Regular->Some
       | 1 => "bold"->addWeight->FontStyle->Some
@@ -123,61 +141,66 @@ module AnsiCode = {
       | _ => None
       };
 
-    let getFontStyleCss = (font: t): option(ReactDOM.Style.t) =>
+    let getFontStyleCss = (font: t): option<ReactDOM.Style.t> =>
       switch (font) {
       | Regular => None
       | FontStyle(css) => css->Some
       };
 
-    let get = (fontMode: int): option(ReactDOM.Style.t) =>
+    let get = (fontMode: int): option<ReactDOM.Style.t> =>
       fontMode->int_of_cp->getFontStyle->Option.flatMap(getFontStyleCss);
   };
 
   // Link management
   module HttpLink = {
-    let linkRe = [%re "/^(http(s)?:\\/\\/[^\s]+)/"];
+    let linkRe = RegExp.fromString("^(http(s)?:\\/\\/[^\\s]+)");
 
-    let get = (txt: string): parser(code) =>
+    let get = (txt: string): parser<code> =>
       linkRe
-      ->Js.Re.exec_(txt)
-      ->Option.flatMap(res =>
-          (
-            switch (res->Js.Re.captures) {
-            | [|url, _, _|] => url->Js.Nullable.toOption
-            | _ => None
-            }
-          )
+      ->RegExp.exec(txt)
+      ->Option.flatMap(res => res->Array.get(0)
           ->Option.flatMap(url =>
               (url->Js.String.length, url->HRef->Some)->Some
             )
         )
-      ->Option.getWithDefault((1, None));
+      ->Option.getOr((1, None));
   };
 
   // Parse an ANSI code, returning the length of the sequence
-  let parse = (txt: string, pos: int): parser(code) =>
+  let parse = (txt: string, pos: int): parser<code> =>
     switch (Js.String.codePointAt(pos, txt)) {
     | Some(0x68) => HttpLink.get(txt->Js.String.slice(~from=pos, ~to_=512))
     | Some(0x0a) => (1, CarriageReturn->Some)
     | Some(0x0d)
     | Some(0x1b) =>
       // escape sequence begin
-      let rec cps = (idx: int, acc: list(int)): list(int) =>
+      let codePoints = [];
+
+      let rec readCodePoints = (idx: int) =>
         switch (idx > 10, Js.String.codePointAt(pos + idx, txt)) {
-        | (false, Some(109)) => acc
-        | (false, Some(n)) => cps(idx + 1, acc->List.add(n))
-        | _ => acc
+        | (false, Some(109)) => ()
+        | (false, Some(n)) => {
+          codePoints->Array.push(n);
+          readCodePoints(idx + 1)
+        }
+        | _ => ()
         };
+      readCodePoints(1);
+
+      // use get for pattern match value, it's fine to use 'getUnsafe' because we'll get undefined value.
+      let get = (idx) => codePoints->Array.getUnsafe(idx)
 
-      let codePoints = 1->cps([])->List.reverse;
-      let length = codePoints->List.length + 2;
+      // Add 2 to take the 0x1b and 109 into account
+      let length = codePoints->Array.length + 2;
       switch (codePoints) {
       // \n\x0d[1A\x0d[J
-      | [10, 27, 91, 49, 65, 27, 91, 74, ..._] => (9, EraseLine->Some)
+      | _ when
+        get(0) == 10 && get(1) == 27 && get(2) == 91 && get(3) == 49 &&
+        get(4) == 65 && get(5) == 27 && get(6) == 91 && get(7) == 74 => (9, EraseLine->Some)
       // [_K
-      | [91, _, 75, ..._] => (4, EraseLine->Some)
+      | _ when get(0) == 91 && get(2) == 75 => (4, EraseLine->Some)
       // [K
-      | [91, 75, ..._] => (3, EraseLine->Some)
+      | _ when get(0) == 91 && get(1) == 75 => (3, EraseLine->Some)
       // [00m
       | [91, 48, 48]
       // [0m
@@ -196,7 +219,7 @@ module AnsiCode = {
           length,
           ColorCss.get(
             colorMode,
-            colorValue + (xs->List.length == 4 ? 10 : 0),
+            colorValue + (xs->Array.length == 4 ? 10 : 0),
           )
           ->Option.flatMap(colorCss => colorCss->Style->Some),
         )
@@ -226,7 +249,7 @@ module AnsiCode = {
           length,
           ColorCss.get(cm1, cv1)
           ->Option.flatMap(colorCss1 =>
-              ColorCss.get(cm2, cv2 + (xs->List.length == 9 ? 10 : 0))
+              ColorCss.get(cm2, cv2 + (xs->Array.length == 9 ? 10 : 0))
               ->Option.flatMap(colorCss2 => {
                   let css = combine(colorCss1, colorCss2);
                   switch (style->FontCss.get) {
@@ -250,26 +273,26 @@ module Document = {
     txt->Js.String.slice(~from, ~to_)->Text;
 
   // Parse a document
-  let parse = (txt: string, length: int, pos: int): parser(document) => {
+  let parse = (txt: string, length: int, pos: int): parser<document> => {
     let rec go = (pos: int, prev: int) =>
       switch (pos == length, txt->AnsiCode.parse(pos)) {
       // we reached the end of the txt
-      | (true, _) => (pos, [text(txt, prev, pos)]->Some)
+      | (true, _) => (pos, list{text(txt, prev, pos)}->Some)
       // current codepoint is an ANSI code or a HRef
       | (_, (length, Some(code))) =>
         let prevElem = txt->text(prev, pos);
         let pos = pos + length;
         switch (code) {
-        | Clear => (pos, [prevElem]->Some)
+        | Clear => (pos, list{prevElem}->Some)
         | EraseLine => pos->go(pos)
-        | CarriageReturn => (pos, [prevElem, LineBreak]->Some)
-        | HRef(link) => (pos, [prevElem, link->Link]->Some)
+        | CarriageReturn => (pos, list{prevElem, LineBreak}->Some)
+        | HRef(link) => (pos, list{prevElem, link->Link}->Some)
         | Style(style) =>
           // recursively parse the stylized block
           switch (pos->go(pos)) {
           | (pos, Some(styled)) => (
               pos,
-              [prevElem, DocStyle(style, styled)]->Some,
+              list{prevElem, DocStyle(style, styled)}->Some,
             )
           | _ => (pos, None)
           }
@@ -283,7 +306,7 @@ module Document = {
 
 // Convert a string to a document
 let parse = (txt: string): document => {
-  let rec go = (txt: string, acc: list(document)) => {
+  let rec go = (txt: string, acc: list<document>) => {
     let length = txt->Js.String.length;
     switch (txt->Document.parse(length, 0)) {
     | (pos, Some(doc)) when pos == length => acc->List.add(doc)
@@ -292,39 +315,39 @@ let parse = (txt: string): document => {
     | _ => acc
     };
   };
-  txt->go([])->Belt.List.reverse->Belt.List.flatten;
+  txt->go(list{})->Belt.List.reverse->Belt.List.flatten;
 };
 
 // Convert a document to a React.element
 let render = (doc: document): React.element => {
   let rec go =
-          (xs: document, idx: int, acc: list(React.element)): React.element =>
+          (xs: document, idx: int, acc: list<React.element>): React.element =>
     switch (xs) {
-    | [] => acc->List.reverse->List.toArray->ReasonReact.array
-    | [LineBreak, ...xs] =>
+    | list{} => acc->List.reverse->List.toArray->React.array
+    | list{LineBreak, ...xs} =>
       xs->go(idx + 1, acc->List.add(<br key={idx->string_of_int} />))
-    | [Text(txt), ...xs] =>
-      xs->go(idx + 1, acc->List.add(txt->React.string))
-    | [Link(href), ...xs] =>
+    | list{Text(txt), ...xs} =>
+      xs->go(idx + 1, acc->List.add(React.string(txt)))
+    | list{Link(href), ...xs} =>
       xs->go(
         idx + 1,
         acc->List.add(
-          <a key={idx->string_of_int} href> href->React.string </a>,
+          <a key={idx->string_of_int} href> {href->React.string} </a>,
         ),
       )
-    | [DocStyle(style, elems), ...xs] =>
+    | list{DocStyle(style, elems), ...xs} =>
       xs->go(
         idx + 1,
         acc->List.add(
-          <span key={idx->string_of_int} style> {elems->go(0, [])} </span>,
+          <span key={idx->string_of_int} style> {elems->go(0, list{})} </span>,
         ),
       )
     };
-  doc->go(0, []);
+  doc->go(0, list{});
 };
 
 // The react component
-[@react.component]
+@react.component
 let make = (~log: string) => {
   <div> {log->parse->render} </div>;
 };