ansi-to-react - npm Package Compare versions

Comparing version 4.0.4 to 5.0.0

__tests__/index.spec.ts

@@ -30,3 +30,3 @@ import { shallow } from "enzyme";
     const el = shallow(
-      React.createElement(Ansi, { className: "my-class" }, `hello world`)
+      React.createElement(Ansi, { className: "my-class" }, "hello world")
     );
@@ -107,2 +107,64 @@ expect(el).not.toBeNull();
   });
-});
+
+  describe("useClasses options", () => {
+    test("can add the font color class", () => {
+      const el = shallow(
+        React.createElement(
+          Ansi,
+          { useClasses: true },
+          `hello ${GREEN_FG}world`
+        )
+      );
+      expect(el).not.toBeNull();
+      expect(el.text()).toBe("hello world");
+      expect(el.html()).toBe(
+        "<code><span>hello </span><span class=\"ansi-green\">world</span></code>"
+      );
+    });
+
+    test("can add the background color class", () => {
+      const el = shallow(
+        React.createElement(
+          Ansi,
+          { useClasses: true },
+          `hello ${YELLOW_BG}world`
+        )
+      );
+      expect(el).not.toBeNull();
+      expect(el.text()).toBe("hello world");
+      expect(el.html()).toBe(
+        "<code><span>hello </span><span class=\"ansi-yellow\">world</span></code>"
+      );
+    });
+
+    test("can add font and background color classes", () => {
+      const el = shallow(
+        React.createElement(
+          Ansi,
+          { useClasses: true },
+          `hello ${GREEN_FG}${YELLOW_BG}world`
+        )
+      );
+      expect(el).not.toBeNull();
+      expect(el.text()).toBe("hello world");
+      expect(el.html()).toBe(
+        "<code><span>hello </span><span class=\"ansi-yellow ansi-green\">world</span></code>"
+      );
+    });
+
+    test("can use useClasses with linkify", () => {
+      const el = shallow(
+        React.createElement(
+          Ansi,
+          { linkify: true, useClasses: true },
+          `${GREEN_FG}this is a link: https://nteract.io/`
+        )
+      );
+      expect(el).not.toBeNull();
+      expect(el.text()).toBe("this is a link: https://nteract.io/");
+      expect(el.html()).toBe(
+        "<code><span class=\"ansi-green\">this is a link: <a href=\"https://nteract.io/\" target=\"_blank\">https://nteract.io/</a></span></code>"
+      );
+    });
+  });
+});

lib/index.d.ts

 import * as React from "react";
 declare interface Props {
     children: string;
+    linkify: boolean;
     className?: string;
-    linkify: boolean;
+    useClasses?: boolean;
 }
@@ -7,0 +8,0 @@ export default function Ansi(props: Props): React.DetailedReactHTMLElement<{

lib/index.js

@@ -10,5 +10,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
 const anser_1 = require("anser");
 const escape_carriage_1 = require("escape-carriage");
+const React = __importStar(require("react"));
 const LINK_REGEX = /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
@@ -22,15 +22,39 @@ /**
  */
-function ansiToJSON(input) {
+function ansiToJSON(input, use_classes = false) {
     input = escape_carriage_1.escapeCarriageReturn(input);
     return anser_1.ansiToJson(input, {
         json: true,
-        remove_empty: true
+        remove_empty: true,
+        use_classes
     });
 }
 /**
- * Converts an Anser bundle into a React Node.
- * @param linkify whether links should be converting into clickable anchor tags.
- * @param bundle Anser output.
+ * Create a class string.
+ * @name createClass
+ * @function
+ * @param {AnserJsonEntry}.
+ * @return {String} class name(s)
  */
-function convertBundleIntoReact(linkify, bundle, key) {
+function createClass(bundle) {
+    let classNames = "";
+    if (!bundle.bg && !bundle.fg) {
+        return null;
+    }
+    if (bundle.bg) {
+        classNames += bundle.bg + " ";
+    }
+    if (bundle.fg) {
+        classNames += bundle.fg + " ";
+    }
+    classNames = classNames.substring(0, classNames.length - 1);
+    return classNames;
+}
+/**
+ * Create the style attribute.
+ * @name createStyle
+ * @function
+ * @param {AnserJsonEntry}.
+ * @return {Object} returns the style object
+ */
+function createStyle(bundle) {
     const style = {};
@@ -43,4 +67,15 @@ if (bundle.bg) {
     }
+    return style;
+}
+/**
+ * Converts an Anser bundle into a React Node.
+ * @param linkify whether links should be converting into clickable anchor tags.
+ * @param useClasses should render the span with a class instead of style.
+ * @param bundle Anser output.
+ */
+function convertBundleIntoReact(linkify, useClasses, bundle, key) {
+    const style = useClasses ? null : createStyle(bundle);
+    const className = useClasses ? createClass(bundle) : null;
     if (!linkify) {
-        return React.createElement("span", { style, key }, bundle.content);
+        return React.createElement("span", { style, key, className }, bundle.content);
     }
@@ -64,7 +99,8 @@ const words = bundle.content.split(" ").reduce((words, word, index) => {
     }, []);
-    return React.createElement("span", { style, key }, words);
+    return React.createElement("span", { style, key, className }, words);
 }
 function Ansi(props) {
-    return React.createElement("code", { className: props.className }, ansiToJSON(props.children).map(convertBundleIntoReact.bind(null, props.linkify)));
+    const { className, useClasses, children, linkify } = props;
+    return React.createElement("code", { className }, ansiToJSON(children, !!useClasses).map(convertBundleIntoReact.bind(null, linkify, !!useClasses)));
 }
 exports.default = Ansi;

package.json

 {
   "name": "ansi-to-react",
-  "version": "4.0.4",
+  "version": "5.0.0",
   "description": "ANSI to React Elements",
@@ -26,3 +26,4 @@ "main": "lib/index.js",
     "react-dom": "^16.3.2"
-  }
+  },
+  "gitHead": "8125bd8f3d7db2ca479d1b078379b5061625cd8f"
 }

README.md

@@ -1,2 +0,2 @@
-# @nteract/ansi-to-react
+# ansi-to-react
 
@@ -8,23 +8,55 @@ This package convert ANSI escape codes to formatted text output for React.
 ```
-$ yarn add @nteract/ansi-to-react
+$ yarn add ansi-to-react
 ```
 
 ```
-$ npm install --save @nteract/ansi-to-react
+$ npm install --save ansi-to-react
 ```
 
 ## Usage
-
+### Basic
 The example below shows how we can use this package to render a string with ANSI escape codes.
 
 ```javascript
-import Ansi from "@nteract/ansi-to-react";
+import Ansi from "ansi-to-react";
 
 export function () => {
   return <Ansi>
-    {'\u001b[34mnode_modules\u001b[m\u001b[m'}
+    {'\u001b[34mhello world'}
   </Ansi>;
 };
 ```
+Will render
+```javascript
+<code>
+    <span style="color:rgb(0, 0, 187)">hello world</span>
+</code>
+```
 
+### Classes
+Style with classes instead of `style` attribute.
+```javascript
+<Ansi useClasses>
+    {'\u001b[34mhello world'}
+</Ansi>;
+```
+Will render
+```javascript
+<code>
+    <span class="ansi-blue">hello world</span>
+</code>
+```
+
+#### Class Names
+|Font color| Background Color
+|---|---|
+|ansi-black|ansi-bright-black
+|ansi-red|ansi-bright-red
+ansi-green|ansi-bright-green
+ansi-yellow|ansi-bright-yellow
+ansi-blue|ansi-bright-blue
+ansi-magenta|ansi-bright-magenta
+ansi-cyan|ansi-bright-cyan
+ansi-white|ansi-bright-white
+
 ## Documentation
@@ -31,0 +63,0 @@

src/index.ts

@@ -14,7 +14,8 @@ import { AnserJsonEntry, ansiToJson } from "anser";
  */
-function ansiToJSON(input: string) {
+function ansiToJSON(input: string, use_classes = false) {
   input = escapeCarriageReturn(input);
   return ansiToJson(input, {
     json: true,
-    remove_empty: true
+    remove_empty: true,
+    use_classes
   });
@@ -24,21 +25,66 @@ }
 /**
+ * Create a class string.
+ * @name createClass
+ * @function
+ * @param {AnserJsonEntry}.
+ * @return {String} class name(s)
+ */
+function createClass(bundle: AnserJsonEntry) {
+  let classNames: string = "";
+
+  if (!bundle.bg && !bundle.fg) {
+    return null;
+  }
+  if (bundle.bg) {
+    classNames += bundle.bg + " ";
+  }
+  if (bundle.fg) {
+    classNames += bundle.fg + " ";
+  }
+
+  classNames = classNames.substring(0, classNames.length - 1);
+  return classNames;
+}
+
+/**
+ * Create the style attribute.
+ * @name createStyle
+ * @function
+ * @param {AnserJsonEntry}.
+ * @return {Object} returns the style object
+ */
+function createStyle(bundle: AnserJsonEntry) {
+  const style: { backgroundColor?: string; color?: string } = {};
+  if (bundle.bg) {
+    style.backgroundColor = `rgb(${bundle.bg})`;
+  }
+  if (bundle.fg) {
+    style.color = `rgb(${bundle.fg})`;
+  }
+
+  return style;
+}
+
+/**
  * Converts an Anser bundle into a React Node.
  * @param linkify whether links should be converting into clickable anchor tags.
+ * @param useClasses should render the span with a class instead of style.
  * @param bundle Anser output.
  */
+
 function convertBundleIntoReact(
   linkify: boolean,
+  useClasses: boolean,
   bundle: AnserJsonEntry,
   key: number
 ) {
-  const style: { backgroundColor?: string; color?: string } = {};
-  if (bundle.bg) {
-    style.backgroundColor = `rgb(${bundle.bg})`;
-  }
-  if (bundle.fg) {
-    style.color = `rgb(${bundle.fg})`;
-  }
+  const style = useClasses ? null : createStyle(bundle);
+  const className = useClasses ? createClass(bundle) : null;
 
   if (!linkify) {
-    return React.createElement("span", { style, key }, bundle.content);
+    return React.createElement(
+      "span",
+      { style, key, className },
+      bundle.content
+    );
   }
@@ -74,3 +120,3 @@
   );
-  return React.createElement("span", { style, key }, words);
+  return React.createElement("span", { style, key, className }, words);
 }
@@ -80,14 +126,16 @@
   children: string;
+  linkify: boolean;
   className?: string;
-  linkify: boolean;
+  useClasses?: boolean;
 }
 
 export default function Ansi(props: Props) {
+  const { className, useClasses, children, linkify } = props;
   return React.createElement(
     "code",
-    { className: props.className },
-    ansiToJSON(props.children).map(
-      convertBundleIntoReact.bind(null, props.linkify)
+    { className },
+    ansiToJSON(children, !!useClasses).map(
+      convertBundleIntoReact.bind(null, linkify, !!useClasses)
     )
   );
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15439

increased by59.81%

Lines of code

395

increased by51.92%

Number of lines in readme file

72

increased by80%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes