Skip to content

Commit

Permalink
Bold support - now Version 3.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@drudru
drudru committed Apr 5, 2018
1 parent acf2a67 commit 1d20731
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 83 deletions.
7 changes: 4 additions & 3 deletions Readme.md
View file
Expand Up @@ -74,8 +74,9 @@ More examples are in the 'examples' directory in the repo.

## Versions

Version 2.x is the latest stateful, streaming version of the API. It is simpler and more correct.
Version 1.3.0 was the last of the older, deprecated API.
Version 3.0 - now treats ANSI bold sequences as CSS font-weight:bold
Version 2.0 - moved to a stateful, streaming version of the API
Version 1.3 - was the last of the older, deprecated API.

## Quick Start

Expand All @@ -92,7 +93,7 @@ system.

#### ansi_to_html (txt)

This replaces ANSI terminal escape codes with SPAN tags that wrap the content. See the example output above.
This replaces ANSI terminal escape codes/sequences with SPAN tags that wrap the content.

This function only interprets ANSI SGR (Select Graphic Rendition) codes that can be represented in HTML. For example, cursor movement codes are ignored and hidden from output.

Expand Down
29 changes: 14 additions & 15 deletions ansi_up.js
View file
Expand Up @@ -30,7 +30,7 @@ function rgx(tmplObj) {
}
var AnsiUp = (function () {
function AnsiUp() {
this.VERSION = "2.0.3";
this.VERSION = "3.0.0";
this.ansi_colors = [
[
{ rgb: [0, 0, 0], class_name: "ansi-black" },
Expand Down Expand Up @@ -60,14 +60,14 @@ var AnsiUp = (function () {
return txt;
if (instance._escape_for_html)
txt = instance.old_escape_for_html(txt);
if (!fragment.bright && fragment.fg === null && fragment.bg === null)
if (!fragment.bold && fragment.fg === null && fragment.bg === null)
return txt;
var styles = [];
var classes = [];
var fg = fragment.fg;
var bg = fragment.bg;
if (fg === null && fragment.bright)
fg = instance.ansi_colors[1][7];
if (fragment.bold)
styles.push('font-weight:bold');
if (!instance._use_classes) {
if (fg)
styles.push("color:rgb(" + fg.rgb.join(',') + ")");
Expand Down Expand Up @@ -98,7 +98,7 @@ var AnsiUp = (function () {
class_string = " class=\"" + classes.join(' ') + "\"";
if (styles.length)
style_string = " style=\"" + styles.join(';') + "\"";
return "<span" + class_string + style_string + ">" + txt + "</span>";
return "<span" + style_string + class_string + ">" + txt + "</span>";
},
compose: function (segments, instance) {
return segments.join("");
Expand All @@ -115,7 +115,7 @@ var AnsiUp = (function () {
this.setup_256_palette();
this._use_classes = false;
this._escape_for_html = true;
this.bright = false;
this.bold = false;
this.fg = this.bg = null;
this._buffer = '';
}
Expand Down Expand Up @@ -223,7 +223,7 @@ var AnsiUp = (function () {
return this.ansi_to(txt, this.textFormatter);
};
AnsiUp.prototype.with_state = function (text) {
return { bright: this.bright, fg: this.fg, bg: this.bg, text: text };
return { bold: this.bold, fg: this.fg, bg: this.bg, text: text };
};
AnsiUp.prototype.handle_incomplete_sequences = function (chunks) {
var last_chunk = chunks[chunks.length - 1];
Expand Down Expand Up @@ -268,13 +268,13 @@ var AnsiUp = (function () {
var num = parseInt(sgr_cmd_str, 10);
if (isNaN(num) || num === 0) {
this.fg = this.bg = null;
this.bright = false;
this.bold = false;
}
else if (num === 1) {
this.bright = true;
this.bold = true;
}
else if (num === 22) {
this.bright = false;
this.bold = false;
}
else if (num === 39) {
this.fg = null;
Expand All @@ -283,15 +283,14 @@ var AnsiUp = (function () {
this.bg = null;
}
else if ((num >= 30) && (num < 38)) {
var bidx = this.bright ? 1 : 0;
this.fg = this.ansi_colors[bidx][(num - 30)];
}
else if ((num >= 90) && (num < 98)) {
this.fg = this.ansi_colors[1][(num - 90)];
this.fg = this.ansi_colors[0][(num - 30)];
}
else if ((num >= 40) && (num < 48)) {
this.bg = this.ansi_colors[0][(num - 40)];
}
else if ((num >= 90) && (num < 98)) {
this.fg = this.ansi_colors[1][(num - 90)];
}
else if ((num >= 100) && (num < 108)) {
this.bg = this.ansi_colors[1][(num - 100)];
}
Expand Down
51 changes: 25 additions & 26 deletions ansi_up.ts
View file
Expand Up @@ -15,21 +15,21 @@ interface AU_Color
// Represents the output of process_ansi(): a snapshot of the AnsiUp state machine
// at a given point in time, which wraps a fragment of text. This wouuld allow deferred
// processing of text fragments and colors, if ever needed.
interface TextWithData {
interface TextWithAttr {
fg:AU_Color;
bg:AU_Color;
bright:boolean;
bold:boolean;
text:string;
}

// Represents an object that is responsible for generating output from parsed ANSI color
// metadata and text content.
interface Formatter {
// Invoked for each generated TextWithData fragment outputted by process_ansi().
// this function is responsible for generating output for a single TextWithData
// Invoked for each generated TextWithAttr fragment outputted by process_ansi().
// this function is responsible for generating output for a single TextWithAttr
// fragment. The result of transform() will be collected into an array that will
// be provided to compose().
transform(fragment:TextWithData, instance:AnsiUp):any;
transform(fragment:TextWithAttr, instance:AnsiUp):any;

// Invoked on the set of outputs from transform; the return value of this function
// will be the final output of ANSI processing.
Expand All @@ -51,7 +51,7 @@ function rgx(tmplObj, ...subst) {

class AnsiUp
{
VERSION = "2.0.3";
VERSION = "3.0.0";

ansi_colors =
[
Expand Down Expand Up @@ -81,7 +81,7 @@ class AnsiUp
];

htmlFormatter:Formatter = {
transform(fragment:TextWithData, instance:AnsiUp):string {
transform(fragment:TextWithAttr, instance:AnsiUp):string {
let txt = fragment.text;

if (txt.length === 0)
Expand All @@ -91,7 +91,7 @@ class AnsiUp
txt = instance.old_escape_for_html(txt);

// If colors not set, default style is used
if (!fragment.bright && fragment.fg === null && fragment.bg === null)
if (!fragment.bold && fragment.fg === null && fragment.bg === null)
return txt;

let styles:string[] = [];
Expand All @@ -100,9 +100,9 @@ class AnsiUp
let fg = fragment.fg;
let bg = fragment.bg;

// Handle the case where we are told to be bright, but without a color
if (fg === null && fragment.bright)
fg = instance.ansi_colors[1][7];
// Note on bold: https://stackoverflow.com/questions/6737005/what-are-some-advantages-to-using-span-style-font-weightbold-rather-than-b?rq=1
if (fragment.bold)
styles.push('font-weight:bold')

if (!instance._use_classes) {
// USE INLINE STYLES
Expand Down Expand Up @@ -137,7 +137,7 @@ class AnsiUp
if (styles.length)
style_string = ` style="${styles.join(';')}"`;

return `<span${class_string}${style_string}>${txt}</span>`;
return `<span${style_string}${class_string}>${txt}</span>`;
},

compose(segments:string[], instance:AnsiUp):string {
Expand All @@ -146,7 +146,7 @@ class AnsiUp
};

textFormatter:Formatter = {
transform(fragment:TextWithData, instance:AnsiUp):string {
transform(fragment:TextWithAttr, instance:AnsiUp):string {
return fragment.text;
},

Expand All @@ -161,7 +161,7 @@ class AnsiUp

private fg:AU_Color;
private bg:AU_Color;
private bright:boolean;
private bold:boolean;

private _use_classes:boolean;
private _escape_for_html;
Expand All @@ -175,7 +175,7 @@ class AnsiUp
this._use_classes = false;
this._escape_for_html = true;

this.bright = false;
this.bold = false;
this.fg = this.bg = null;

this._buffer = '';
Expand Down Expand Up @@ -323,8 +323,8 @@ class AnsiUp
return this.ansi_to(txt, this.textFormatter);
}

private with_state(text:string):TextWithData {
return { bright: this.bright, fg: this.fg, bg: this.bg, text: text };
private with_state(text:string):TextWithAttr {
return { bold: this.bold, fg: this.fg, bg: this.bg, text: text };
}

private handle_incomplete_sequences(chunks:string[]):void {
Expand Down Expand Up @@ -364,7 +364,7 @@ class AnsiUp
// COMPLEX - END
}

private process_ansi(block:string):TextWithData
private process_ansi(block:string):TextWithAttr
{
// This must only be called with a string that started with a CSI (the string split above)
// The CSI must not be in the string. We consider this string to be a 'block'.
Expand Down Expand Up @@ -424,24 +424,23 @@ class AnsiUp

if (isNaN(num) || num === 0) {
this.fg = this.bg = null;
this.bright = false;
this.bold = false;
} else if (num === 1) {
this.bright = true;
this.bold = true;
} else if (num === 22) {
this.bright = false;
this.bold = false;
} else if (num === 39) {
this.fg = null;
} else if (num === 49) {
this.bg = null;
} else if ((num >= 30) && (num < 38)) {
let bidx = this.bright ? 1 : 0;
this.fg = this.ansi_colors[bidx][(num - 30)];
} else if ((num >= 90) && (num < 98)) {
this.fg = this.ansi_colors[1][(num - 90)];
this.fg = this.ansi_colors[0][(num - 30)];
} else if ((num >= 40) && (num < 48)) {
this.bg = this.ansi_colors[0][(num - 40)];
} else if ((num >= 90) && (num < 98)) {
this.fg = this.ansi_colors[1][(num - 90)];
} else if ((num >= 100) && (num < 108)) {
this.bg = this.ansi_colors[1][(num - 100)];
this.bg = this.ansi_colors[1][(num - 100)];
} else if (num === 38 || num === 48) {

// extended set foreground/background color
Expand Down
8 changes: 4 additions & 4 deletions dist/ansi_up.d.ts
View file
Expand Up @@ -2,14 +2,14 @@ export interface AU_Color {
rgb: number[];
class_name: string;
}
export interface TextWithData {
export interface TextWithAttr {
fg: AU_Color;
bg: AU_Color;
bright: boolean;
bold: boolean;
text: string;
}
export interface Formatter {
transform(fragment: TextWithData, instance: AnsiUp): any;
transform(fragment: TextWithAttr, instance: AnsiUp): any;
compose(segments: any[], instance: AnsiUp): any;
}
declare function rgx(tmplObj: any, ...subst: any[]): RegExp;
Expand All @@ -24,7 +24,7 @@ export default class AnsiUp {
private palette_256;
private fg;
private bg;
private bright;
private bold;
private _use_classes;
private _escape_for_html;
private _sgr_regex;
Expand Down
29 changes: 14 additions & 15 deletions dist/ansi_up.js.include
View file
Expand Up @@ -11,7 +11,7 @@ function rgx(tmplObj) {
}
var AnsiUp = (function () {
function AnsiUp() {
this.VERSION = "2.0.1";
this.VERSION = "3.0.0";
this.ansi_colors = [
[
{ rgb: [0, 0, 0], class_name: "ansi-black" },
Expand Down Expand Up @@ -41,14 +41,14 @@ var AnsiUp = (function () {
return txt;
if (instance._escape_for_html)
txt = instance.old_escape_for_html(txt);
if (!fragment.bright && fragment.fg === null && fragment.bg === null)
if (!fragment.bold && fragment.fg === null && fragment.bg === null)
return txt;
var styles = [];
var classes = [];
var fg = fragment.fg;
var bg = fragment.bg;
if (fg === null && fragment.bright)
fg = instance.ansi_colors[1][7];
if (fragment.bold)
styles.push('font-weight:bold');
if (!instance._use_classes) {
if (fg)
styles.push("color:rgb(" + fg.rgb.join(',') + ")");
Expand Down Expand Up @@ -79,7 +79,7 @@ var AnsiUp = (function () {
class_string = " class=\"" + classes.join(' ') + "\"";
if (styles.length)
style_string = " style=\"" + styles.join(';') + "\"";
return "<span" + class_string + style_string + ">" + txt + "</span>";
return "<span" + style_string + class_string + ">" + txt + "</span>";
},
compose: function (segments, instance) {
return segments.join("");
Expand All @@ -96,7 +96,7 @@ var AnsiUp = (function () {
this.setup_256_palette();
this._use_classes = false;
this._escape_for_html = true;
this.bright = false;
this.bold = false;
this.fg = this.bg = null;
this._buffer = '';
}
Expand Down Expand Up @@ -204,7 +204,7 @@ var AnsiUp = (function () {
return this.ansi_to(txt, this.textFormatter);
};
AnsiUp.prototype.with_state = function (text) {
return { bright: this.bright, fg: this.fg, bg: this.bg, text: text };
return { bold: this.bold, fg: this.fg, bg: this.bg, text: text };
};
AnsiUp.prototype.handle_incomplete_sequences = function (chunks) {
var last_chunk = chunks[chunks.length - 1];
Expand Down Expand Up @@ -249,13 +249,13 @@ var AnsiUp = (function () {
var num = parseInt(sgr_cmd_str, 10);
if (isNaN(num) || num === 0) {
this.fg = this.bg = null;
this.bright = false;
this.bold = false;
}
else if (num === 1) {
this.bright = true;
this.bold = true;
}
else if (num === 22) {
this.bright = false;
this.bold = false;
}
else if (num === 39) {
this.fg = null;
Expand All @@ -264,15 +264,14 @@ var AnsiUp = (function () {
this.bg = null;
}
else if ((num >= 30) && (num < 38)) {
var bidx = this.bright ? 1 : 0;
this.fg = this.ansi_colors[bidx][(num - 30)];
}
else if ((num >= 90) && (num < 98)) {
this.fg = this.ansi_colors[1][(num - 90)];
this.fg = this.ansi_colors[0][(num - 30)];
}
else if ((num >= 40) && (num < 48)) {
this.bg = this.ansi_colors[0][(num - 40)];
}
else if ((num >= 90) && (num < 98)) {
this.fg = this.ansi_colors[1][(num - 90)];
}
else if ((num >= 100) && (num < 108)) {
this.bg = this.ansi_colors[1][(num - 100)];
}
Expand Down

0 comments on commit 1d20731

Please sign in to comment.