Terminal container

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "program": "${workspaceFolder}/terminal.js",
+      "console": "integratedTerminal"
+    }
+  ]
+}

containers/index.js

@@ -0,0 +1,11 @@
+const defaultContainer = ({
+	foregroundColor, content, width, height, backgroundColor, attributes
+}) => {
+	const attrs = Object.keys(attributes).reduce((acc, key) => {
+		const val = attributes[key]
+		return `${acc} ${key}="${val}"`
+	}, '')
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, ${width}, ${height}"${attrs}><g fill="${foregroundColor}"><rect x="0" y="0" width="${width}" height="${height}" fill="${backgroundColor}"/>${content}</g></svg>`
+}
+
+module.exports = defaultContainer

index.js

@@ -1,5 +1,6 @@
 const ansiTo = require('ansi-to')
 const he = require('he')
+const defaultContainer = require('./containers')
 
 // Round: Make number values smaller in output
 // Eg: 14.23734 becomes 14.24
@@ -45,37 +46,27 @@ const decorators = {
 		return `<path d="${d}" stroke="${color}"/>`
 	},
 
-	container: ({foregroundColor, content, width, height, font}) => {
-		const attrs = []
-		if (font) {
-			attrs.push(`font-family="${font.family}"`)
-			attrs.push(`font-size="${font.size}"`)
-		}
-		const attrStr = attrs.join(' ')
-
-		let space = ''
-		if (attrStr) {
-			space = ' '
-		}
-
+	container: ({
+		backgroundColor, attributes,
+		foregroundColor, content, width, height, container = defaultContainer,
+		containerOptions = {}
+	}) => {
 		height = round(height)
 		width = round(width)
 
-		const containerTemplate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, ${width}, ${height}"${space}${attrStr}><g fill="${foregroundColor}">${content}</g></svg>`
+		const containerTemplate = container({
+			foregroundColor, content, width, height, backgroundColor, attributes,
+			...containerOptions
+		})
 		return containerTemplate
 	}
 }
 
 // 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(/(^ )/g)
-
-	if (leadingSpace && leadingSpace.length > 0) {
-		return x + leadingSpace.length
-	}
-
-	return x
+	const leadingSpace = text.match(/^\s*/g)
+	return x + leadingSpace[0].length
 }
 
 const handler = (ansi, opts) => {
@@ -104,14 +95,6 @@ const handler = (ansi, opts) => {
 	const offsetTop = opts.paddingTop + font.lineHeight - font.emHeightDescent
 	const offsetLeft = opts.paddingLeft
 
-	content += decorators.rect({
-		x: 0,
-		y: 0,
-		width,
-		height,
-		color: opts.colors.backgroundColor
-	})
-
 	ansi.chunks.forEach(chunk => {
 		const {
 			type,
@@ -205,14 +188,26 @@ const handler = (ansi, opts) => {
 		})
 	})
 
+	let attributes = {}
+	if (font) {
+		attributes = {
+			'font-family': font.family,
+			'font-size': font.size
+		}
+	}
+
 	const baseStyles = {
+		container: opts.container,
+		containerOptions: opts.containerOptions,
 		foregroundColor: baseForegroundColor,
 		backgroundColor: opts.colors.backgroundColor,
 		content,
+		attributes,
 		width,
 		height,
 		font
 	}
+
 	return decorators.container(baseStyles)
 }
 

package.json

@@ -22,6 +22,7 @@
 		"index.js"
 	],
 	"dependencies": {
+		"@svag/window": "^1.0.0",
 		"ansi-to": "^1.3.0",
 		"he": "^1.1.1"
 	},

terminal.js

@@ -0,0 +1,31 @@
+const fs = require('fs')
+const chalk = require('chalk')
+const container = require('@svag/window')
+const ansiToSVG = require('.')
+
+const ansiText = chalk`{green 👋 Hello}, {blueBright World} 🌏{redBright !}\n` +
+	chalk.bgRed('👋') +
+	chalk.bgYellow('🦄') +
+	chalk.bgGreen('🐘') + ' ' +
+	chalk.strikethrough.italic('13') +
+	chalk.bold('3') + chalk.underline('7') + ' ' +
+	chalk.bgCyan('🍄') +
+	chalk.bgBlue('🎃') +
+	chalk.bgMagenta('🐦')
+
+/** @type {import('@svag/window').WindowOptions} */
+const containerOptions = {
+	title: '⚡️Terminal',
+	noStretch: true,
+	minWidth: 250,
+	minHeight: 100,
+	minify: false
+	// NoShadow: true
+}
+const result = ansiToSVG(ansiText, {
+	fontFamily: 'Courier',
+	container,
+	containerOptions
+})
+const outputFile = 'examples/terminal.svg'
+fs.writeFileSync(outputFile, result)