@jsenv/terminal-recorder 1.0.0

package/src/svg/parse_ansi.js

@@ -0,0 +1,375 @@
+// inspired by https://github.com/F1LT3R/parse-ansi/blob/master/index.js
+
+import ansiRegex from "ansi-regex";
+import stripAnsi from "strip-ansi";
+
+export const parseAnsi = (ansi) => {
+  ansi = ansi.replace(/\r\n/g, "\n"); // normalize windows line endings
+
+  const plainText = stripAnsi(ansi);
+  const lines = plainText.split("\n");
+  const rows = lines.length;
+  let columns = 0;
+  lines.forEach((line) => {
+    const len = line.length;
+    if (len > columns) {
+      columns = len;
+    }
+  });
+
+  const result = {
+    raw: ansi,
+    plainText,
+    rows,
+    columns,
+    chunks: [],
+  };
+
+  let words;
+  const delimiters = [];
+  {
+    const matches = ansi.match(ansiRegex()) || [];
+    for (const match of matches) {
+      if (!delimiters.includes(match)) {
+        delimiters.push(match);
+      }
+    }
+    delimiters.push("\n");
+
+    const splitString = (str, delimiter) => {
+      const result = [];
+      let index = 0;
+      const parts = str.split(delimiter);
+      for (const part of parts) {
+        result.push(part);
+        if (index < parts.length - 1) {
+          result.push(delimiter);
+        }
+        index++;
+      }
+      return result;
+    };
+    const splitArray = (array, delimiter) => {
+      let result = [];
+      for (const part of array) {
+        let subRes = splitString(part, delimiter);
+        subRes = subRes.filter((str) => {
+          return Boolean(str);
+        });
+        result = result.concat(subRes);
+      }
+      return result;
+    };
+    const superSplit = (splittable, delimiters) => {
+      if (delimiters.length === 0) {
+        return splittable;
+      }
+      if (typeof splittable === "string") {
+        const delimiter = delimiters[delimiters.length - 1];
+        const split = splitString(splittable, delimiter);
+        return superSplit(split, delimiters.slice(0, -1));
+      }
+      if (Array.isArray(splittable)) {
+        const delimiter = delimiters[delimiters.length - 1];
+        const split = splitArray(splittable, delimiter);
+        return superSplit(split, delimiters.slice(0, -1));
+      }
+      return false;
+    };
+    words = superSplit(ansi, delimiters);
+  }
+
+  const styleStack = {
+    foregroundColor: [],
+    backgroundColor: [],
+    boldDim: [],
+  };
+  const getForegroundColor = () => {
+    if (styleStack.foregroundColor.length > 0) {
+      return styleStack.foregroundColor[styleStack.foregroundColor.length - 1];
+    }
+    return false;
+  };
+  const getBackgroundColor = () => {
+    if (styleStack.backgroundColor.length > 0) {
+      return styleStack.backgroundColor[styleStack.backgroundColor.length - 1];
+    }
+    return false;
+  };
+  const getDim = () => {
+    return styleStack.boldDim.includes("dim");
+  };
+  const getBold = () => {
+    return styleStack.boldDim.includes("bold");
+  };
+  const styleState = {
+    italic: false,
+    underline: false,
+    inverse: false,
+    hidden: false,
+    strikethrough: false,
+  };
+  const decoratorEffects = {
+    foregroundColorOpen: (color) => styleStack.foregroundColor.push(color),
+    foregroundColorClose: () => styleStack.foregroundColor.pop(),
+    backgroundColorOpen: (color) => styleStack.backgroundColor.push(color),
+    backgroundColorClose: () => styleStack.backgroundColor.pop(),
+    boldOpen: () => styleStack.boldDim.push("bold"),
+    dimOpen: () => styleStack.boldDim.push("dim"),
+    boldDimClose: () => styleStack.boldDim.pop(),
+    italicOpen: () => {
+      styleState.italic = true;
+    },
+    italicClose: () => {
+      styleState.italic = false;
+    },
+    underlineOpen: () => {
+      styleState.underline = true;
+    },
+    underlineClose: () => {
+      styleState.underline = false;
+    },
+    inverseOpen: () => {
+      styleState.inverse = true;
+    },
+    inverseClose: () => {
+      styleState.inverse = false;
+    },
+    strikethroughOpen: () => {
+      styleState.strikethrough = true;
+    },
+    strikethroughClose: () => {
+      styleState.strikethrough = false;
+    },
+    reset: () => {
+      styleState.strikethrough = false;
+      styleState.inverse = false;
+      styleState.italic = false;
+      styleStack.boldDim = [];
+      styleStack.backgroundColor = [];
+      styleStack.foregroundColor = [];
+    },
+  };
+
+  let x = 0;
+  let y = 0;
+  let nAnsi = 0;
+  let nPlain = 0;
+
+  const bundle = (type, value) => {
+    const chunk = {
+      type,
+      value,
+      position: {
+        x,
+        y,
+        n: nPlain,
+        raw: nAnsi,
+      },
+    };
+
+    if (type === "text" || type === "ansi") {
+      const style = {};
+
+      const foregroundColor = getForegroundColor();
+      const backgroundColor = getBackgroundColor();
+      const dim = getDim();
+      const bold = getBold();
+
+      if (foregroundColor) {
+        style.foregroundColor = foregroundColor;
+      }
+
+      if (backgroundColor) {
+        style.backgroundColor = backgroundColor;
+      }
+
+      if (dim) {
+        style.dim = dim;
+      }
+
+      if (bold) {
+        style.bold = bold;
+      }
+
+      if (styleState.italic) {
+        style.italic = true;
+      }
+
+      if (styleState.underline) {
+        style.underline = true;
+      }
+
+      if (styleState.inverse) {
+        style.inverse = true;
+      }
+
+      if (styleState.strikethrough) {
+        style.strikethrough = true;
+      }
+
+      chunk.style = style;
+    }
+
+    return chunk;
+  };
+
+  for (const word of words) {
+    // Newline character
+    if (word === "\n") {
+      const chunk = bundle("newline", "\n");
+      result.chunks.push(chunk);
+
+      x = 0;
+      y += 1;
+      nAnsi += 1;
+      nPlain += 1;
+      continue;
+    }
+    // Text characters
+    if (delimiters.includes(word) === false) {
+      const chunk = bundle("text", word);
+      result.chunks.push(chunk);
+
+      x += word.length;
+      nAnsi += word.length;
+      nPlain += word.length;
+      continue;
+    }
+    // ANSI Escape characters
+    const ansiTag = ansiTags[word];
+    const decorator = decorators[ansiTag];
+    if (decorator) {
+      const decoratorEffect = decoratorEffects[decorator];
+      if (decoratorEffect) {
+        decoratorEffect(ansiTag);
+      }
+    }
+    const chunk = bundle("ansi", {
+      tag: ansiTag,
+      ansi: word,
+      decorator,
+    });
+    result.chunks.push(chunk);
+
+    nAnsi += word.length;
+  }
+
+  return result;
+};
+
+const ansiTags = {
+  "\u001B[30m": "black",
+  "\u001B[31m": "red",
+  "\u001B[32m": "green",
+  "\u001B[33m": "yellow",
+  "\u001B[34m": "blue",
+  "\u001B[35m": "magenta",
+  "\u001B[36m": "cyan",
+  "\u001B[37m": "white",
+
+  "\u001B[90m": "gray",
+  "\u001B[91m": "redBright",
+  "\u001B[92m": "greenBright",
+  "\u001B[93m": "yellowBright",
+  "\u001B[94m": "blueBright",
+  "\u001B[95m": "magentaBright",
+  "\u001B[96m": "cyanBright",
+  "\u001B[97m": "whiteBright",
+
+  "\u001B[39m": "foregroundColorClose",
+
+  "\u001B[40m": "bgBlack",
+  "\u001B[41m": "bgRed",
+  "\u001B[42m": "bgGreen",
+  "\u001B[43m": "bgYellow",
+  "\u001B[44m": "bgBlue",
+  "\u001B[45m": "bgMagenta",
+  "\u001B[46m": "bgCyan",
+  "\u001B[47m": "bgWhite",
+
+  "\u001B[100m": "bgGray",
+  "\u001B[101m": "bgRedBright",
+  "\u001B[102m": "bgGreenBright",
+  "\u001B[103m": "bgYellowBright",
+  "\u001B[104m": "bgBlueBright",
+  "\u001B[105m": "bgMagentaBright",
+  "\u001B[106m": "bgCyanBright",
+  "\u001B[107m": "bgWhiteBright",
+
+  "\u001B[49m": "backgroundColorClose",
+
+  "\u001B[1m": "boldOpen",
+  "\u001B[2m": "dimOpen",
+  "\u001B[3m": "italicOpen",
+  "\u001B[4m": "underlineOpen",
+  "\u001B[7m": "inverseOpen",
+  "\u001B[8m": "hiddenOpen",
+  "\u001B[9m": "strikethroughOpen",
+
+  "\u001B[22m": "boldDimClose",
+  "\u001B[23m": "italicClose",
+  "\u001B[24m": "underlineClose",
+  "\u001B[27m": "inverseClose",
+  "\u001B[28m": "hiddenClose",
+  "\u001B[29m": "strikethroughClose",
+
+  "\u001B[0m": "reset",
+};
+const decorators = {
+  black: "foregroundColorOpen",
+  red: "foregroundColorOpen",
+  green: "foregroundColorOpen",
+  yellow: "foregroundColorOpen",
+  blue: "foregroundColorOpen",
+  magenta: "foregroundColorOpen",
+  cyan: "foregroundColorOpen",
+  white: "foregroundColorOpen",
+
+  gray: "foregroundColorOpen",
+  redBright: "foregroundColorOpen",
+  greenBright: "foregroundColorOpen",
+  yellowBright: "foregroundColorOpen",
+  blueBright: "foregroundColorOpen",
+  magentaBright: "foregroundColorOpen",
+  cyanBright: "foregroundColorOpen",
+  whiteBright: "foregroundColorOpen",
+
+  bgBlack: "backgroundColorOpen",
+  bgRed: "backgroundColorOpen",
+  bgGreen: "backgroundColorOpen",
+  bgYellow: "backgroundColorOpen",
+  bgBlue: "backgroundColorOpen",
+  bgMagenta: "backgroundColorOpen",
+  bgCyan: "backgroundColorOpen",
+  bgWhite: "backgroundColorOpen",
+
+  bgGray: "backgroundColorOpen",
+  bgRedBright: "backgroundColorOpen",
+  bgGreenBright: "backgroundColorOpen",
+  bgYellowBright: "backgroundColorOpen",
+  bgBlueBright: "backgroundColorOpen",
+  bgMagentaBright: "backgroundColorOpen",
+  bgCyanBright: "backgroundColorOpen",
+  bgWhiteBright: "backgroundColorOpen",
+
+  foregroundColorClose: "foregroundColorClose",
+  backgroundColorClose: "backgroundColorClose",
+
+  boldOpen: "boldOpen",
+  dimOpen: "dimOpen",
+  italicOpen: "italicOpen",
+  underlineOpen: "underlineOpen",
+  inverseOpen: "inverseOpen",
+  hiddenOpen: "hiddenOpen",
+  strikethroughOpen: "strikethroughOpen",
+
+  boldDimClose: "boldDimClose",
+  italicClose: "italicClose",
+  underlineClose: "underlineClose",
+  inverseClose: "inverseClose",
+  hiddenClose: "hiddenClose",
+  strikethroughClose: "strikethroughClose",
+
+  reset: "reset",
+};

package/src/svg/render_terminal_html.js

@@ -0,0 +1,5 @@
+export const renderTerminalHtml = () => {
+  // TODO
+  // would look like svg with small differences
+  // in the rendering technics
+};

package/src/svg/render_terminal_svg.js

@@ -0,0 +1,300 @@
+import prettier from "prettier";
+import { parseAnsi } from "./parse_ansi.js";
+import { createSvgRootNode } from "./xml_generator.js";
+
+const colorsDefault = {
+  black: "#000000",
+  red: "#B22222",
+  green: "#32CD32",
+  yellow: "#DAA520",
+  blue: "#4169E1",
+  magenta: "#9932CC",
+  cyan: "#008B8B",
+  white: "#D3D3D3",
+  gray: "#A9A9A9",
+  redBright: "#FF4500",
+  greenBright: "#ADFF2F",
+  yellowBright: "#FFFF00",
+  blueBright: "#87CEEB",
+  magentaBright: "#FF00FF",
+  cyanBright: "#00FFFF",
+  whiteBright: "#FFFFFF",
+  bgBlack: "#000000",
+  bgRed: "#B22222",
+  bgGreen: "#32CD32",
+  bgYellow: "#DAA520",
+  bgBlue: "#4169E1",
+  bgMagenta: "#9932CC",
+  bgCyan: "#008B8B",
+  bgWhite: "#D3D3D3",
+  bgGray: "#A9A9A9",
+  bgRedBright: "#FF0000",
+  bgGreenBright: "#ADFF2F",
+  bgYellowBright: "#FFFF00",
+  bgBlueBright: "#87CEEB",
+  bgMagentaBright: "#FF00FF",
+  bgCyanBright: "#00FFFF",
+  bgWhiteBright: "#FFFFFF",
+};
+
+export const renderTerminalSvg = async (
+  ansi,
+  {
+    title = "ansi to terminal",
+    // Font: (use monospace fonts for best results)
+    fontFamily = "SauceCodePro Nerd Font, Source Code Pro, Courier",
+    fontFace,
+    // Pixel Values:
+    fontSize = 14,
+    lineHeight = 18,
+    paddingTop = 0,
+    paddingLeft = 10,
+    paddingBottom = 0,
+    paddingRight = 10,
+
+    backgroundColor = "#282c34",
+    foregroundColor = "#abb2bf",
+    colors = colorsDefault,
+
+    // by default: fixed width of 640 + fluid height
+    width = 640,
+    height,
+    maxWidth,
+    maxHeight,
+  } = {},
+) => {
+  const { rows, columns, chunks } = parseAnsi(ansi);
+  const font = {
+    size: fontSize,
+    width: 8.4013671875,
+    height: 14,
+    face: fontFace,
+    family: fontFamily,
+    lineHeight,
+    emHeightAscent: 10.5546875,
+    emHeightDescent: 3.4453125,
+  };
+
+  const headerHeight = 40;
+  const textWidth = columns * font.width;
+  const textHeight = rows * (font.lineHeight + 1) + font.emHeightDescent;
+  const bodyContentWidth = paddingLeft + textWidth + paddingRight;
+  const bodyContentHeight = paddingTop + textHeight + paddingBottom;
+  const contentWidth = bodyContentWidth;
+  const contentHeight = headerHeight + bodyContentHeight;
+
+  let computedWidth;
+  if (typeof width === "number") {
+    computedWidth = width;
+  } else {
+    computedWidth = contentWidth;
+  }
+  if (typeof maxWidth === "number" && computedWidth > maxWidth) {
+    computedWidth = maxWidth;
+  }
+  let computedHeight;
+  if (typeof height === "number") {
+    computedHeight = height;
+  } else {
+    computedHeight = contentHeight;
+  }
+  if (typeof maxHeight === "number" && computedHeight > maxHeight) {
+    computedHeight = maxHeight;
+  }
+
+  const svg = createSvgRootNode({
+    "xmlns": "http://www.w3.org/2000/svg",
+    "font-family": font.family,
+    "font-size": font.size,
+    "width": computedWidth,
+    "height": computedHeight,
+    backgroundColor,
+  });
+
+  background: {
+    const backgroundGroup = svg.createNode("g", {
+      id: "background",
+    });
+    const backgroundRect = svg.createNode("rect", {
+      "x": 1,
+      "y": 1,
+      "width": computedWidth - 2,
+      "height": computedHeight - 2,
+      "fill": backgroundColor,
+      "stroke": "rgba(255,255,255,0.35)",
+      "stroke-width": 1,
+      "rx": 8,
+    });
+    backgroundGroup.appendChild(backgroundRect);
+    svg.appendChild(backgroundGroup);
+  }
+
+  header: {
+    const headerGroup = svg.createNode("g", {
+      id: "header",
+    });
+    const iconsGroup = svg.createNode("g", {
+      transform: `translate(20,${headerHeight / 2})`,
+    });
+    const circleA = svg.createNode("circle", {
+      cx: 0,
+      cy: 0,
+      r: 6,
+      fill: "#ff5f57",
+    });
+    iconsGroup.appendChild(circleA);
+    const circleB = svg.createNode("circle", {
+      cx: 20,
+      cy: 0,
+      r: 6,
+      fill: "#febc2e",
+    });
+    iconsGroup.appendChild(circleB);
+    const circleC = svg.createNode("circle", {
+      cx: 40,
+      cy: 0,
+      r: 6,
+      fill: "#28c840",
+    });
+    iconsGroup.appendChild(circleC);
+    headerGroup.appendChild(iconsGroup);
+
+    const text = svg.createNode("text", {
+      "fill": "#abb2bf",
+      "text-anchor": "middle",
+      "x": computedWidth / 2,
+      "y": headerHeight / 2,
+    });
+    text.setContent(title);
+    headerGroup.appendChild(text);
+    svg.appendChild(headerGroup);
+  }
+
+  body: {
+    const bodyComputedHeight = computedHeight - headerHeight + paddingBottom;
+    const foreignObject = svg.createNode("foreignObject", {
+      id: "body",
+      y: headerHeight,
+      width: "100%",
+      height: bodyComputedHeight,
+      // we can't really know in advance the size of the scrollbar
+      // so putting overflow: "auto"
+      // is not that great as it would create a scrollbar
+      // in both axes when a single one is required
+      overflow: "hidden",
+    });
+
+    svg.appendChild(foreignObject);
+    const bodySvg = svg.createNode("svg", {
+      "width": bodyContentWidth,
+      "height": bodyContentHeight,
+      "font-family": "monospace",
+      "font-variant-east-asian": "full-width",
+      "fill": foregroundColor,
+    });
+    foreignObject.appendChild(bodySvg);
+
+    const offsetLeft = paddingLeft;
+    const offsetTop = paddingTop + font.lineHeight - font.emHeightDescent;
+    const textContainer = svg.createNode("g", {
+      // transform: `translate(${paddingLeft}, ${offsetTop})`,
+    });
+    bodySvg.appendChild(textContainer);
+
+    for (const chunk of chunks) {
+      const { type, value, style } = chunk;
+      if (type !== "text") {
+        continue;
+      }
+
+      const { position } = chunk;
+      const x =
+        offsetLeft + adjustXforWhitespace(value, position.x) * font.width;
+      const y = offsetTop + position.y + font.lineHeight * position.y;
+      const w = font.width * value.length;
+      const attrs = {};
+      if (style.bold) {
+        attrs["font-weight"] = "bold";
+      }
+      if (style.italic) {
+        attrs["font-style"] = "italic";
+      }
+
+      let opacity = 1;
+      if (style.dim) {
+        opacity = 0.5;
+      }
+      if (style.backgroundColor) {
+        const backgroundColor = colors[style.backgroundColor];
+        const rect = svg.createNode("rect", {
+          x,
+          y: y - font.lineHeight + font.emHeightDescent,
+          width: w,
+          height: font.lineHeight + 1,
+          fill: backgroundColor,
+          ...(opacity ? { opacity } : {}),
+        });
+        textContainer.appendChild(rect);
+      }
+
+      let textForegroundColor;
+      if (style.foregroundColor) {
+        textForegroundColor = colors[style.foregroundColor];
+        attrs["fill"] = textForegroundColor;
+      }
+
+      // Underline & Strikethrough:
+      // Some SVG implmentations do not support underline and
+      // strikethrough for <text> elements (see Sketch 49.2)
+      if (style.underline) {
+        const yOffset = font.height * 0.14;
+        const ys = y - -yOffset;
+        const xw = x + w;
+        const path = svg.createNode("path", {
+          d: `M${x},${ys} L${xw},${ys} Z`,
+          stroke: textForegroundColor || foregroundColor,
+        });
+        textContainer.appendChild(path);
+      }
+      if (style.strikethrough) {
+        const yOffset = font.height * 0.3;
+        const ys = y - yOffset;
+        const xw = x + w;
+        const path = svg.createNode("path", {
+          d: `M${x},${ys} L${xw},${ys} Z`,
+          stroke: textForegroundColor || foregroundColor,
+        });
+        textContainer.appendChild(path);
+      }
+
+      // Do not output elements containing whitespace with no style
+      if (
+        value.replace(/ /g, "").length === 0 &&
+        Object.keys(attrs).length === 0
+      ) {
+        continue;
+      }
+
+      const text = svg.createNode("text", {
+        x,
+        y,
+        ...attrs,
+      });
+      text.setContent(value);
+      textContainer.appendChild(text);
+    }
+  }
+
+  const svgString = svg.renderAsString();
+  const formatted = await prettier.format(svgString, {
+    parser: "html",
+  });
+  return formatted;
+};
+
+// Some SVG Implementations drop whitespaces
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xml:space
+const adjustXforWhitespace = (text, x) => {
+  const leadingSpace = text.match(/^\s*/g);
+  return x + leadingSpace[0].length;
+};