iamnewton · July 28, 2023 09:38
diff --git a/better-console.js b/better-console.js
 // I provide a logging API that has some special sauce for formatting.
 const echo = (function() {
 	let queue = [];
 	var ECHO_TOKEN = {};
 	const RESET_INPUT = "%c ";
 	var RESET_CSS = "";

 	// Attach formatting utility method.
 	function alertFormatting (value) {
 		queue.push({
 			value: value,
 			css: "display: inline-block ; background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
 		});

 		return (ECHO_TOKEN);
 	}

 	// Attach formatting utility method.
 	function warningFormatting (value) {
 		queue.push({
 			value: value,
 			css: "display: inline-block ; background-color: gold ; color: black ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
 		});

 		return(ECHO_TOKEN);
 	}

 	// I provide an echo-based proxy to the given Console Function. This uses an
 	// internal queue to aggregate values before calling the given Console
 	// Function with the desired formatting.
 	function using( consoleFunction ) {
 		function consoleFunctionProxy() {
 			// As we loop over the arguments, we're going to aggregate a set of
 			// inputs and modifiers. The Inputs will ultimately be collapsed down
 			// into a single string that acts as the first console.log parameter
 			// while the modifiers are then SPREAD into console.log as 2...N.
 			// --
 			// NOTE: After each input/modifier pair, I'm adding a RESET pairing.
 			// This implicitly resets the CSS after every formatted pairing.
 			var inputs = [];
 			var modifiers = [];

 			for ( var i = 0 ; i < arguments.length ; i++ ) {
 				// When the formatting utility methods are called, they return
 				// a special token. This indicates that we should pull the
 				// corresponding value out of the QUEUE instead of trying to
 				// output the given argument directly.
 				if ( arguments[ i ] === ECHO_TOKEN ) {
 					var item = queue.shift();

 					inputs.push( ( "%c" + item.value ), RESET_INPUT );
 					modifiers.push( item.css, RESET_CSS );

 					// For every other argument type, output the value directly.
 				} 

 				else {

 					var arg = arguments[ i ];

 					if ((typeof( arg ) === "object" ) || ( typeof( arg ) === "function")) {
 						inputs.push( "%o", RESET_INPUT );
 						modifiers.push( arg, RESET_CSS );
 					} 

 					else {
 						inputs.push( ( "%c" + arg ), RESET_INPUT );
 						modifiers.push( RESET_CSS, RESET_CSS );
 					}
 				}
 			}

 			consoleFunction( inputs.join( "" ), ...modifiers );

 			// Once we output the aggregated value, reset the queue. This should have
 			// already been emptied by the .shift() calls; but the explicit reset
 			// here acts as both a marker of intention as well as a fail-safe.
 			queue = [];
 		}

 		return( consoleFunctionProxy );
 	}

 	return({
 		// Console(ish) functions.
 		log: using( console.log ),
 		warn: using( console.warn ),
 		error: using( console.error ),
 		trace: using( console.trace ),
 		group: using( console.group ),
 		groupEnd: using( console.groupEnd ),

 		// Formatting functions.
 		asAlert: alertFormatting,
 		asWarning: warningFormatting
 	});

 })();
diff --git a/demo.html b/demo.html
 <!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<title>Styling console.log() Output Formatting With CSS</title>
 	</head>
 	<body>
 		<h1>Styling console.log() Output Formatting With CSS</h1>
 		<script src="https://gist.githubusercontent.com/iamnewton/6716eed1938b098b8c154289e147ea32/raw/90534f94a390f2a7dda60183f475a9d697e841cc/better-console.js"></script>
 		<script>
 			// Let's try mixing a bunch of values together.
 			echo.log(
 				echo.asAlert("This is great!"),
 				"Right!",
 				{ "i am": "an object" },
 				null,
 				[ "an array" ],
 				function amAFunction() {},
 				echo.asWarning( "I mean, right?!?!?!" )
 			);

 			echo.log();

 			// Let's try a more sensible example.
 			echo.group( echo.asWarning( "Arnold Schwarzenegger Movies" ) );
 			echo.log( "The Running Man" );
 			echo.log( "Terminator 2", echo.asAlert( "Amazing!" ), echo.asWarning( "TOP 100" ) );
 			echo.log( "Predator" );
 			echo.log( "Twins", echo.asWarning( "TOP 50" ) );
 			echo.groupEnd();
 			echo.log();
 			echo.log( echo.asAlert( "Winner Winner" ), "Chicken dinner!" );
 		</script>
 	</body>
 </html>
	// I provide a logging API that has some special sauce for formatting.
	const echo = (function() {
	let queue = [];
	var ECHO_TOKEN = {};
	const RESET_INPUT = "%c ";
	var RESET_CSS = "";

	// Attach formatting utility method.
	function alertFormatting (value) {
	queue.push({
	value: value,
	css: "display: inline-block ; background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
	});

	return (ECHO_TOKEN);
	}

	// Attach formatting utility method.
	function warningFormatting (value) {
	queue.push({
	value: value,
	css: "display: inline-block ; background-color: gold ; color: black ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
	});

	return(ECHO_TOKEN);
	}

	// I provide an echo-based proxy to the given Console Function. This uses an
	// internal queue to aggregate values before calling the given Console
	// Function with the desired formatting.
	function using( consoleFunction ) {
	function consoleFunctionProxy() {
	// As we loop over the arguments, we're going to aggregate a set of
	// inputs and modifiers. The Inputs will ultimately be collapsed down
	// into a single string that acts as the first console.log parameter
	// while the modifiers are then SPREAD into console.log as 2...N.
	// --
	// NOTE: After each input/modifier pair, I'm adding a RESET pairing.
	// This implicitly resets the CSS after every formatted pairing.
	var inputs = [];
	var modifiers = [];

	for ( var i = 0 ; i < arguments.length ; i++ ) {
	// When the formatting utility methods are called, they return
	// a special token. This indicates that we should pull the
	// corresponding value out of the QUEUE instead of trying to
	// output the given argument directly.
	if ( arguments[ i ] === ECHO_TOKEN ) {
	var item = queue.shift();

	inputs.push( ( "%c" + item.value ), RESET_INPUT );
	modifiers.push( item.css, RESET_CSS );

	// For every other argument type, output the value directly.
	}

	else {

	var arg = arguments[ i ];

	if ((typeof( arg ) === "object" ) \|\| ( typeof( arg ) === "function")) {
	inputs.push( "%o", RESET_INPUT );
	modifiers.push( arg, RESET_CSS );
	}

	else {
	inputs.push( ( "%c" + arg ), RESET_INPUT );
	modifiers.push( RESET_CSS, RESET_CSS );
	}
	}
	}

	consoleFunction( inputs.join( "" ), ...modifiers );

	// Once we output the aggregated value, reset the queue. This should have
	// already been emptied by the .shift() calls; but the explicit reset
	// here acts as both a marker of intention as well as a fail-safe.
	queue = [];
	}

	return( consoleFunctionProxy );
	}

	return({
	// Console(ish) functions.
	log: using( console.log ),
	warn: using( console.warn ),
	error: using( console.error ),
	trace: using( console.trace ),
	group: using( console.group ),
	groupEnd: using( console.groupEnd ),

	// Formatting functions.
	asAlert: alertFormatting,
	asWarning: warningFormatting
	});

	})();
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Styling console.log() Output Formatting With CSS</title>
	</head>
	<body>
	<h1>Styling console.log() Output Formatting With CSS</h1>
	<script src="https://gist.githubusercontent.com/iamnewton/6716eed1938b098b8c154289e147ea32/raw/90534f94a390f2a7dda60183f475a9d697e841cc/better-console.js"></script>
	<script>
	// Let's try mixing a bunch of values together.
	echo.log(
	echo.asAlert("This is great!"),
	"Right!",
	{ "i am": "an object" },
	null,
	[ "an array" ],
	function amAFunction() {},
	echo.asWarning( "I mean, right?!?!?!" )
	);

	echo.log();

	// Let's try a more sensible example.
	echo.group( echo.asWarning( "Arnold Schwarzenegger Movies" ) );
	echo.log( "The Running Man" );
	echo.log( "Terminator 2", echo.asAlert( "Amazing!" ), echo.asWarning( "TOP 100" ) );
	echo.log( "Predator" );
	echo.log( "Twins", echo.asWarning( "TOP 50" ) );
	echo.groupEnd();
	echo.log();
	echo.log( echo.asAlert( "Winner Winner" ), "Chicken dinner!" );
	</script>
	</body>
	</html>