sixgram.js

A parsing library inspired by Perl 6 Grammars.

Break your data into a syntax tree:

import { Parser } from 'Parser';
import { IGNORE, INSERT, ENTER, LEAVE, HOME } from 'Actions';

const tokens = {
	reset:         /\u001b\[(0)m/
	, esc:         /\u001b\[(\d+);?(\d+)?;?([\d;]*)./
	, characters:  /[^\u001b]+/
};

const modes  = {
	normal:{
		reset: [IGNORE, ENTER, LEAVE]
		, esc: [IGNORE, ENTER, LEAVE]
		, characters: [INSERT]
	},
}

export const AnsiParser = new Parser(tokens, modes);

Render it:

import { Transformer } from 'Transformer';

import { pallete } from 'pallete';
import { Colors255 } from 'Colors255';

const oneByte = {};

for(const c in Colors255)
{
	const color = Colors255[c];

	oneByte[ color.colorId ] = color.rgb;
}
const style = {};

export const AnsiRenderer = new Transformer({
	normal:   (chunk, parent) => {

		if(typeof chunk === 'string')
		{
			let styleString = '';
			
			for(const [key, val] of Object.entries(style))
			{
				styleString += `${key}: ${val}; `;
			}
			
			return `<span class = "ansi" style = "${styleString}">${chunk}</span>`;
		}

		if(typeof chunk === 'object')
		{
			if(chunk.type === 'esc' || chunk.type === 'reset')
			{

				for(const g in chunk.groups)
				{
					const group = Number(chunk.groups[g]);

					switch(group)
					{
						case 0:
							for(const key in style)
							{
								delete style[key];
								// style[key] = 'initial'

								// if(key === 'color')
								// {
								// 	style[key] = 'var(--fgColor)'
								// }

								// if(key === 'background-color')
								// {
								// 	style[key] = 'var(--bgColor)'
								// }
							}
							break;

						case 1:
							style['filter'] = 'brightness(1.5) contrast(0.5)';
							style['opacity'] = 1;
							break;

						case 2:
							style['filter'] = 'brightness(0.5) contrast(1.5)';
							style['opacity'] = 0.75;
							break;

						case 3:
							style['font-style'] = 'italic';
							break;

						case 4:
							style['text-decoration'] = 'underline';
							break;

						case 5:
							style['animation'] = 'var(--ansiBlink)';
							break;

						case 7:
							style['filter'] = 'invert(1) contrast(1.5)';
							break;

						case 8:
							style['opacity'] = 0.1;
							break;

						case 9:
							style['text-decoration'] = 'line-through';
							break;

						case 10:
							style['font-family'] = 'var(--base-font))';
							break;

						case 11:
						case 12:
						case 13:
						case 14:
						case 15:
						case 16:
						case 17:
						case 18:
						case 19:
							style['font-family'] = `var(--alt-font-no-${group})`;
							break;

						case 20:
							style['font-family'] = 'var(--alt-font-fraktur)';
							break;

						case 21:
							style['font-weight'] = 'initial';
							break;

						case 22:
							style['font-weight'] = 'initial';
							break;

						case 23:
							style['font-style'] = 'fractur';
							break;

						case 24:
							style['text-decoration'] = 'none';
							break;

						case 25:
							style['animation'] = 'none';
							break;

						case 27:
							style['filter'] = 'initial';
							break;

						case 28:
							style['opacity'] = 'initial';
							break;

						case 29:
							style['text-decoration'] = 'initial';
							break;

						case 30:
							style['color'] = pallete.black;
							break;

						case 31:
							style['color'] = pallete.red;
							break;

						case 32:
							style['color'] = pallete.green;
							break;

						case 33:
							style['color'] = pallete.yellow;
							break;

						case 34:
							style['color'] = pallete.blue;
							break;

						case 35:
							style['color'] = pallete.magenta;
							break;

						case 36:
							style['color'] = pallete.cyan;
							break;

						case 37:
							style['color'] = pallete.white;
							break;

						case 38:

							if(chunk.groups[2] == 2)
							{
								const [r,g,b] = chunk.groups[g+1].split(';');

								style['color'] = `rgb(${r},${g},${b})`;
							}

							if(chunk.groups[2] == 5)
							{
								const {r,g,b} = oneByte[ Number(chunk.groups[g+1]) ];

								style['color'] = `rgb(${r},${g},${b})`;
							}

							break;

						case 39:
							style['color'] = 'var(--fgColor)';
							break;

						case 40:
							style['background-color'] = pallete.black;
							break;

						case 41:
							style['background-color'] = pallete.red;
							break;

						case 42:
							style['background-color'] = pallete.green;
							break;

						case 43:
							style['background-color'] = pallete.yellow;
							break;

						case 44:
							style['background-color'] = pallete.blue;
							break;

						case 45:
							style['background-color'] = pallete.magenta;
							break;

						case 46:
							style['background-color'] = pallete.cyan;
							break;

						case 47:
							style['background-color'] = pallete.white;
							break;

						case 48:

							if(chunk.groups[1] == 2)
							{
								const [r,g,b] = chunk.groups[2].split(';');

								style['background-color'] = `rgb(${r},${g},${b})`;
							}

							if(chunk.groups[1] == 5)
							{
								const {r,g,b} = oneByte[ Number(chunk.groups[2]) ];

								style['background-color'] = `rgb(${r},${g},${b})`;
							}

							break;

						case 49:
							style['background-color'] = 'var(--bgColor)';
							break;

						case 51:
							style['border'] = '1px solid currentColor';
							break;

						case 52:
							style['border'] = '1px solid currentColor';
							style['border-radius'] = '1em';
							break;

						case 53:
							style['border-top'] = '1px solid currentColor';
							break;

						case 54:
							style['border'] = 'initial';
							break;

						case 55:
							style['border'] = 'initial';
							break;
					}
				}
			}

			return false;
		}
	}
});