@steve02081504/virtual-console 0.1.2 → 0.1.4

package/README.md

@@ -31,6 +31,12 @@ A powerful and flexible virtual console for **Node.js and the Browser** that all
 npm install @steve02081504/virtual-console
 ```
 
+### Browser Import
+
+```javascript
+import { VirtualConsole } from 'https://esm.sh/@steve02081504/virtual-console';
+```
+
 ## Usage
 
 ### 1. Basic Testing (Capture Output)

package/browser.mjs

@@ -1,6 +1,6 @@
 import { FullProxy } from 'full-proxy'
 
-import { argsToHtml } from './util.mjs'
+import { argsToHtml, safeString, circularToString } from './util.mjs'
 
 /**
  * 存储原始的浏览器 console 对象。
@@ -23,14 +23,14 @@ function formatArgs(args) {
 				return JSON.stringify(arg, null, '\t')
 			}
 			catch {
-				return String(arg)
+				return safeString(arg)
 			}
 		}).join(' ')
 
 	let output = ''
 	let argIndex = 1
 	let lastIndex = 0
-	const regex = /%[sdifoOc%]/g
+	const regex = /%[%Ocdfijos]/g
 	let match
 
 	while ((match = regex.exec(format)) !== null) {
@@ -52,7 +52,7 @@ function formatArgs(args) {
 			case '%c':
 				break
 			case '%s':
-				output += String(arg)
+				output += safeString(arg)
 				break
 			case '%d':
 			case '%i':
@@ -63,8 +63,10 @@ function formatArgs(args) {
 				break
 			case '%o':
 			case '%O':
+				return circularToString(arg)
+			case '%j':
 				try { output += JSON.stringify(arg, null, '\t') }
-				catch { output += String(arg) }
+				catch { output += safeString(arg) }
 				break
 		}
 	}
@@ -76,9 +78,9 @@ function formatArgs(args) {
 		if (arg instanceof Error && arg.stack) output += arg.stack
 		else if ((arg === null || arg instanceof Object) && !(arg instanceof Function))
 			try { output += JSON.stringify(arg, null, '\t') }
-			catch { output += String(arg) }
+			catch { output += safeString(arg) }
 
-		else output += String(arg)
+		else output += safeString(arg)
 	}
 
 	return output
@@ -110,7 +112,8 @@ export class VirtualConsole {
 	 * @param {Console} [options.base_console=window.console] - 用于 realConsoleOutput 的底层控制台实例。
 	 */
 	constructor(options = {}) {
-		this.#base_console = options.base_console || originalConsole
+		options = { ...options }
+		this.#base_console = options.base_console || consoleReflect()
 		delete options.base_console
 
 		this.options = {

package/main.mjs

@@ -3,28 +3,28 @@ const module = await import(globalThis.document ? './browser.mjs' : './node.mjs'
 /**
  * @type {AsyncLocalStorage}
  */
-export const consoleAsyncStorage = module.consoleAsyncStorage
+export const { consoleAsyncStorage } = module
 /**
  * @type {typeof VirtualConsole}
  */
-export const VirtualConsole = module.VirtualConsole
+export const { VirtualConsole } = module
 /**
  * @type {VirtualConsole}
  */
-export const defaultConsole = module.defaultConsole
+export const { defaultConsole } = module
 /**
  * @type {object}
  */
-export const globalConsoleAdditionalProperties = module.globalConsoleAdditionalProperties
+export const { globalConsoleAdditionalProperties } = module
 /**
  * @type {function}
  */
-export const setGlobalConsoleReflect = module.setGlobalConsoleReflect
+export const { setGlobalConsoleReflect } = module
 /**
  * @type {function}
  */
-export const getGlobalConsoleReflect = module.getGlobalConsoleReflect
+export const { getGlobalConsoleReflect } = module
 /**
  * @type {VirtualConsole}
  */
-export const console = module.console
+export const { console } = module

package/node.mjs

@@ -13,11 +13,147 @@ import { argsToHtml } from './util.mjs'
  * 全局异步存储，用于管理控制台上下文。
  */
 export const consoleAsyncStorage = new AsyncLocalStorage()
-const cleanupRegistry = new FinalizationRegistry(cleanupToken => {
-	const { stream, listener } = cleanupToken
-	stream.off?.('resize', listener)
+
+/**
+ * WeakMap 用于存储每个流对应的 resize 监听器信息。
+ * @type {WeakMap<Writable, { listener: () => void, virtualStreams: Set<WeakRef<Writable>> }>}
+ */
+const streamResizeListeners = new WeakMap()
+
+/**
+ * FinalizationRegistry 用于清理虚拟流引用。
+ */
+const virtualStreamCleanupRegistry = new FinalizationRegistry(({ stream, virtualStreamRef }) => {
+	const listenerInfo = streamResizeListeners.get(stream)
+	if (!listenerInfo) return
+	listenerInfo.virtualStreams.delete(virtualStreamRef)
+	if (listenerInfo.virtualStreams.size) return
+	stream.off?.('resize', listenerInfo.listener)
+	streamResizeListeners.delete(stream)
 })
 
+/**
+ * 获取或创建一个流对应的监听器信息。
+ * @param {Writable} stream - 目标流。
+ * @returns {{ listener: () => void, virtualStreams: Set<WeakRef<Writable>> }} 监听器信息。
+ */
+function getListenerInfo(stream) {
+	const existing = streamResizeListeners.get(stream)
+	if (existing) return existing
+	const listenerInfo = {
+		/**
+		 * 统一的 resize 监听器，会通知所有使用该流的虚拟流。
+		 * @returns {void}
+		 */
+		listener: () => {
+			for (const ref of listenerInfo.virtualStreams) {
+				const virtualStream = ref.deref()
+				if (virtualStream) try { virtualStream.emit?.('resize') } catch (error) { console.error(error) }
+				else listenerInfo.virtualStreams.delete(ref)
+			}
+			if (listenerInfo.virtualStreams.size) return
+			stream.off?.('resize', listenerInfo.listener)
+			streamResizeListeners.delete(stream)
+		},
+		virtualStreams: new Set()
+	}
+	stream.on?.('resize', listenerInfo.listener)
+
+	streamResizeListeners.set(stream, listenerInfo)
+	return listenerInfo
+}
+
+/**
+ * 虚拟流类，用于创建虚拟控制台流。
+ * @augments {Writable}
+ */
+class VirtualStream extends Writable {
+	/**
+	 * @param {NodeJS.WritableStream} targetStream - 目标流。
+	 * @param {object} context - 虚拟控制台上下文。
+	 * @param {() => void} context.onWrite - 写入时的回调函数，用于重置 loggedFreshLineId。
+	 * @param {object} context.options - 虚拟控制台的配置选项。
+	 * @param {boolean} context.options.recordOutput - 是否记录输出。
+	 * @param {boolean} context.options.realConsoleOutput - 是否输出到真实控制台。
+	 * @param {{ outputs: string }} context.state - 虚拟控制台的状态对象，包含 outputs 属性。
+	 */
+	constructor(targetStream, context) {
+		super({
+			/**
+			 * 写入数据到虚拟流。
+			 * @param {Buffer | string} chunk - 要写入的数据块。
+			 * @param {string} encoding - 编码格式。
+			 * @param {() => void} callback - 写入完成的回调函数。
+			 */
+			write: (chunk, encoding, callback) => {
+				context.onWrite()
+
+				if (context.options.recordOutput)
+					context.state.outputs += chunk.toString()
+				if (context.options.realConsoleOutput)
+					targetStream.write(chunk, encoding, callback)
+				else
+					callback()
+			},
+		})
+
+		this.#targetStream = targetStream
+
+		if (targetStream.isTTY) {
+			const virtualStreamRef = new WeakRef(this)
+			const listenerInfo = getListenerInfo(targetStream)
+			listenerInfo.virtualStreams.add(virtualStreamRef)
+			virtualStreamCleanupRegistry.register(this, {
+				stream: targetStream,
+				virtualStreamRef
+			})
+		}
+	}
+
+	/** @private @type {NodeJS.WritableStream} - 目标流 */
+	#targetStream
+
+	/**
+	 * 判断目标流是否为 TTY
+	 * @returns {boolean} 是否为 TTY
+	 */
+	get isTTY() {
+		return this.#targetStream?.isTTY ?? false
+	}
+
+	/**
+	 * 获取目标流的列数
+	 * @returns {number} 列数
+	 */
+	get columns() {
+		return this.#targetStream.columns
+	}
+
+	/**
+	 * 获取目标流的行数
+	 * @returns {number} 行数
+	 */
+	get rows() {
+		return this.#targetStream.rows
+	}
+
+	/**
+	 * 获取目标流的颜色深度
+	 * @returns {number} 颜色深度
+	 */
+	getColorDepth() {
+		return this.#targetStream.getColorDepth()
+	}
+
+	/**
+	 * 判断目标流是否支持颜色
+	 * @returns {boolean} 是否支持颜色
+	 */
+	hasColors() {
+		return this.#targetStream.hasColors()
+	}
+}
+
 /**
  * 创建一个虚拟控制台，用于捕获输出，同时可以选择性地将输出传递给真实的控制台。
  * @augments {Console}
@@ -72,15 +208,16 @@ export class VirtualConsole extends Console {
 	constructor(options = {}) {
 		super(new Writable({ /** 啥也不干  */ write: () => { } }), new Writable({ /** 啥也不干  */ write: () => { } }))
 
-		this.base_console = options.base_console || consoleReflect()
+		const base_console = options.base_console || consoleReflect()
 		delete options.base_console
 		this.options = {
 			realConsoleOutput: false,
 			recordOutput: true,
-			supportsAnsi: this.#base_console.options?.supportsAnsi || supportsAnsi,
+			supportsAnsi: base_console.options?.supportsAnsi || supportsAnsi,
 			error_handler: null,
 			...options,
 		}
+		this.base_console = base_console
 		this.freshLine = this.freshLine.bind(this)
 		this.clear = this.clear.bind(this)
 		for (const method of ['log', 'info', 'warn', 'debug', 'error']) {
@@ -117,87 +254,20 @@ export class VirtualConsole extends Console {
 	set base_console(value) {
 		this.#base_console = value
 
-		/**
-		 * 创建一个虚拟的控制台流，用于捕获输出。
-		 * @param {NodeJS.WritableStream} targetStream - 目标流。
-		 * @returns {NodeJS.WritableStream} 虚拟流。
-		 */
-		const createVirtualStream = (targetStream) => {
-			const virtualStream = new Writable({
-				/**
-				 * 写入数据到虚拟流。
-				 * @param {Buffer | string} chunk - 要写入的数据块。
-				 * @param {string} encoding - 编码格式。
-				 * @param {() => void} callback - 写入完成的回调函数。
-				 */
-				write: (chunk, encoding, callback) => {
-					this.#loggedFreshLineId = null
-
-					if (this.options.recordOutput)
-						this.outputs += chunk.toString()
-					if (this.options.realConsoleOutput)
-						targetStream.write(chunk, encoding, callback)
-					else
-						callback()
-				},
-			})
-
-			if (targetStream.isTTY) {
-				Object.defineProperties(virtualStream, {
-					isTTY: { value: true, configurable: true, writable: false, enumerable: true },
-					columns: {
-						/**
-						 * 获取目标流的列数
-						 * @returns {number} 列数
-						 */
-						get: () => targetStream.columns, configurable: true, enumerable: true
-					},
-					rows: {
-						/**
-						 * 获取目标流的行数
-						 * @returns {number} 行数
-						 */
-						get: () => targetStream.rows, configurable: true, enumerable: true
-					},
-					getColorDepth: {
-						/**
-						 * 获取目标流的颜色深度
-						 * @returns {number} 颜色深度
-						 */
-						get: () => targetStream.getColorDepth.bind(targetStream), configurable: true, enumerable: true
-					},
-					hasColors: {
-						/**
-						 * 判断目标流是否支持颜色
-						 * @returns {boolean} 是否支持颜色
-						 */
-						get: () => targetStream.hasColors.bind(targetStream), configurable: true, enumerable: true
-					},
-				})
-
-				const virtualStreamRef = new WeakRef(virtualStream)
-
-				/**
-				 * 监听目标流的 resize 事件，并在虚拟流上触发相应的事件。
-				 * @returns {void}
-				 */
-				const resizeListener = () => {
-					virtualStreamRef.deref()?.emit('resize')
-				}
-
-				targetStream.on?.('resize', resizeListener)
-
-				cleanupRegistry.register(this, {
-					stream: targetStream,
-					listener: resizeListener,
-				}, this)
-			}
-
-			return virtualStream
+		const context = {
+			/**
+			 * 写入完成时的回调函数，用于重置 loggedFreshLineId。
+			 * @returns {void}
+			 */
+			onWrite: () => {
+				this.#loggedFreshLineId = null
+			},
+			options: this.options,
+			state: this
 		}
 
-		this._stdout = createVirtualStream(this.#base_console?._stdout || process.stdout)
-		this._stderr = createVirtualStream(this.#base_console?._stderr || process.stderr)
+		this._stdout = new VirtualStream(this.#base_console?._stdout || process.stdout, context)
+		this._stderr = new VirtualStream(this.#base_console?._stderr || process.stderr, context)
 	}
 
 	/**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@steve02081504/virtual-console",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"description": "A virtual console for capturing and manipulating terminal output.",
 	"main": "main.mjs",
 	"type": "module",

package/util.mjs

@@ -2,6 +2,150 @@ import { AnsiUp } from 'ansi_up'
 
 const ansi_up = new AnsiUp()
 
+/**
+ * 转义 HTML 字符
+ * @param {string} str - 要转义的字符串。
+ * @returns {string} 转义后的字符串。
+ */
+function escapeHtml(str) {
+	return str.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+}
+
+/**
+ * 安全地将值转换为字符串，处理无原型对象（如 Object.create(null)）。
+ * @param {any} arg - 要转换的值。
+ * @returns {string} 转换后的字符串。
+ */
+export function safeString(arg) {
+	try {
+		return String(arg)
+	} catch {
+		try {
+			return JSON.stringify(arg)
+		}
+		catch {
+			return Object.prototype.toString.call(arg)
+		}
+	}
+}
+
+/**
+ * 将对象转换为字符串，处理循环引用。
+ * @param {any} target - 要转换的目标对象。
+ * @param {object} [options] - 转换选项。
+ * @returns {string} 转换后的字符串。
+ */
+export function circularToString(target, options = {}) {
+	const { depth = Infinity } = options
+
+	const colors = {
+		reset: '\x1b[0m',
+		green: '\x1b[32m',
+		yellow: '\x1b[33m',
+		cyan: '\x1b[36m',
+		grey: '\x1b[90m',
+		magenta: '\x1b[35m'
+	}
+
+	const circularIds = new Map()
+	const walkStack = new Set()
+	let idCounter = 1
+
+	/**
+	 * 扫描对象以检测循环引用。
+	 * @param {any} value - 要扫描的值。
+	 */
+	function scan(value) {
+		if (typeof value !== 'object' || value === null) return
+
+		if (walkStack.has(value)) {
+			if (!circularIds.has(value)) circularIds.set(value, idCounter++)
+			return
+		}
+
+		walkStack.add(value)
+		const keys = [...Object.keys(value), ...Object.getOwnPropertySymbols(value)]
+		for (const key of keys) scan(value[key])
+		walkStack.delete(value)
+	}
+
+	scan(target)
+	const seen = new Set()
+
+	/**
+	 * 格式化值为字符串。
+	 * @param {any} value - 要格式化的值。
+	 * @param {number} currentDepth - 当前递归深度。
+	 * @returns {string} 格式化后的字符串。
+	 */
+	function format(value, currentDepth) {
+		// 1. 处理原始类型
+		if (typeof value === 'string') return `${colors.green}'${value}'${colors.reset}`
+		if (typeof value === 'number') return `${colors.yellow}${value}${colors.reset}`
+		if (typeof value === 'boolean') return `${colors.yellow}${value}${colors.reset}`
+		if (value === undefined) return `${colors.grey}undefined${colors.reset}`
+		if (value === null) return `${colors.reset}null${colors.reset}`
+		if (typeof value === 'symbol') return `${colors.green}${value.toString()}${colors.reset}`
+		if (typeof value === 'function') return `${colors.cyan}[Function: ${value.name || '(anonymous)'}]${colors.reset}`
+
+		// 2. 处理特殊对象
+		if (value instanceof Date) return `${colors.magenta}${value.toISOString()}${colors.reset}`
+		if (value instanceof RegExp) return `${colors.magenta}${value.toString()}${colors.reset}`
+
+		// 3. 处理循环引用检查
+		const refId = circularIds.get(value)
+		if (seen.has(value) && refId) return `${colors.cyan}[Circular *${refId}]${colors.reset}`
+
+		// 4. 处理深度限制
+		if (currentDepth > depth) return `${colors.cyan}[Object]${colors.reset}`
+
+		// 标记为已处理
+		seen.add(value)
+
+		// 5. 构建对象/数组字符串
+		const isArray = Array.isArray(value)
+		const prefix = refId ? `${colors.cyan}<ref *${refId}>${colors.reset} ` : ''
+		const open = isArray ? '[' : '{'
+		const close = isArray ? ']' : '}'
+
+		const keys = [...Object.keys(value), ...Object.getOwnPropertySymbols(value)]
+
+		if (!keys.length) return `${prefix}${open}${close}`
+
+		const spaces = '\t'.repeat(currentDepth)
+		const nextSpaces = '\t'.repeat(currentDepth + 1)
+
+		const content = keys.map(key => {
+			let keyStr = ''
+			if (!isArray) {
+				keyStr = typeof key === 'symbol' ? `[${key.toString()}]` : key
+				if (!/^[$A-Z_a-z][\w$]*$/.test(keyStr)) keyStr = `'${keyStr.replaceAll('\'', '\\\'').replaceAll('\n', '\\n')}'`
+				keyStr += ': '
+			}
+			const valStr = format(value[key], currentDepth + 1)
+			return `${nextSpaces}${keyStr}${valStr}`
+		}).join(',\n')
+		seen.delete(value)
+		return `${prefix}${open}\n${content}\n${spaces}${close}`
+	}
+
+	return format(target, 0)
+}
+
+/**
+ * 将参数格式化为 HTML 字符串。
+ * @param {any} arg - 参数。
+ * @returns {string} 格式化后的 HTML 字符串。
+ */
+function argToHtml(arg) {
+	if (arg instanceof Error && arg.stack) return ansi_up.ansi_to_html(arg.stack)
+	if ((arg === null || arg instanceof Object) && !(arg instanceof Function))
+		try { return ansi_up.ansi_to_html(JSON.stringify(arg, null, '\t')) }
+		catch { /* fall through */ }
+
+	return ansi_up.ansi_to_html(circularToString(arg))
+}
+
 /**
  * 将 console 参数格式化为 HTML 字符串。
  * @param {any[]} args - console 方法接收的参数数组。
@@ -11,21 +155,13 @@ export function argsToHtml(args) {
 	if (args.length === 0) return ''
 	const format = args[0]
 	if (format?.constructor !== String)
-		return args.map(arg => {
-			if (arg instanceof Error && arg.stack) return ansi_up.ansi_to_html(arg.stack)
-			if ((arg === null || arg instanceof Object) && !(arg instanceof Function))
-				try { return ansi_up.ansi_to_html(JSON.stringify(arg, null, '\t')) }
-				catch { return String(arg) }
-
-			return ansi_up.ansi_to_html(String(arg))
-		}).join(' ')
-
+		return args.map(argToHtml).join(' ')
 
 	let html = ansi_up.ansi_to_html(format)
 	let argIndex = 1
 	let hasStyle = false
 
-	const regex = /%[sdifoOc%]/g
+	const regex = /%[%Ocdfijos]/g
 	html = html.replace(regex, (match) => {
 		if (match === '%%') return '%'
 		if (argIndex >= args.length) return match
@@ -34,20 +170,21 @@ export function argsToHtml(args) {
 		switch (match) {
 			case '%c': {
 				hasStyle = true
-				const style = String(arg).replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
-				return `</span><span style="${style}">`
+				return `</span><span style="${escapeHtml(safeString(arg))}">`
 			}
 			case '%s':
-				return ansi_up.ansi_to_html(String(arg))
+				return ansi_up.ansi_to_html(safeString(arg))
 			case '%d':
 			case '%i':
-				return String(parseInt(arg))
+				return String(parseInt(safeString(arg)))
 			case '%f':
-				return String(parseFloat(arg))
+				return String(parseFloat(safeString(arg)))
 			case '%o':
 			case '%O':
+				return ansi_up.ansi_to_html(circularToString(arg))
+			case '%j':
 				try { return ansi_up.ansi_to_html(JSON.stringify(arg)) }
-				catch { return String(arg) }
+				catch { return ansi_up.ansi_to_html(safeString(arg)) }
 		}
 		return match
 	})
@@ -63,16 +200,7 @@ export function argsToHtml(args) {
 		html = html.replaceAll(key, value)
 	})
 
-	while (argIndex < args.length) {
-		const arg = args[argIndex++]
-		html += ' '
-		if (arg instanceof Error && arg.stack) html += ansi_up.ansi_to_html(arg.stack)
-		else if ((arg === null || arg instanceof Object) && !(arg instanceof Function))
-			try { html += ansi_up.ansi_to_html(JSON.stringify(arg, null, '\t')) }
-			catch { html += String(arg) }
-
-		else html += ansi_up.ansi_to_html(String(arg))
-	}
+	html += ' ' + args.slice(argIndex).map(argToHtml).join(' ')
 
-	return html
+	return html.trim().replaceAll('\n', '<br/>\n')
 }