Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a7b19900da | |||
| 34227e5c4b |
101
index.html
101
index.html
@@ -1,11 +1,102 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Console Styling Playground</title>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module">
|
<h1>Open Chrome DevTools Console to see magic! (Ctrl+Shift+J or Cmd+Option+J)</h1>
|
||||||
import {formatDate} from './dist/index.mjs';
|
|
||||||
|
|
||||||
const dt = new Date('2021-03-03T09:00:00Z');
|
<script>
|
||||||
const result = formatDate('Do MMMM dddd', dt, 0);
|
// Console Styling Playground
|
||||||
console.log(result);
|
class ConsoleStyler {
|
||||||
|
// Basic badge with customizable colors
|
||||||
|
badge(text, bgColor = '#007bff', textColor = 'white') {
|
||||||
|
console.log(
|
||||||
|
`%c ${text} `,
|
||||||
|
`background-color: ${bgColor};
|
||||||
|
color: ${textColor};
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-weight: bold;`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Multi-style log with different sections
|
||||||
|
richLog() {
|
||||||
|
console.log(
|
||||||
|
'%cSystem%c Operation %cDetails',
|
||||||
|
'background-color: #f0f0f0; color: black; padding: 2px 5px; border-radius: 3px;',
|
||||||
|
'color: blue; font-weight: bold;',
|
||||||
|
'color: green;'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grouped logs with nested information
|
||||||
|
groupedLog(title, items) {
|
||||||
|
console.group(title);
|
||||||
|
items.forEach(item => {
|
||||||
|
console.log(item);
|
||||||
|
});
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table view for structured data
|
||||||
|
tableLog(data) {
|
||||||
|
console.table(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Performance tracking
|
||||||
|
timeTrack(label, operation) {
|
||||||
|
console.time(label);
|
||||||
|
operation();
|
||||||
|
console.timeEnd(label);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Demonstration method
|
||||||
|
demo() {
|
||||||
|
// Different styled badges
|
||||||
|
this.badge('NEW', '#28a745'); // Green
|
||||||
|
this.badge('WARNING', '#ffc107', 'black'); // Yellow
|
||||||
|
this.badge('ERROR', '#dc3545'); // Red
|
||||||
|
this.badge('CUSTOM', '#6f42c1'); // Purple
|
||||||
|
|
||||||
|
// Rich multi-style log
|
||||||
|
this.richLog();
|
||||||
|
|
||||||
|
// Grouped logs
|
||||||
|
this.groupedLog('User Details', [
|
||||||
|
{ name: 'John Doe', age: 30, role: 'Admin' },
|
||||||
|
{ name: 'Jane Smith', age: 25, role: 'User' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Table logging
|
||||||
|
this.tableLog([
|
||||||
|
{ name: 'John', age: 30, active: true },
|
||||||
|
{ name: 'Jane', age: 25, active: false }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Performance tracking
|
||||||
|
this.timeTrack('Complex Operation', () => {
|
||||||
|
let sum = 0;
|
||||||
|
for(let i = 0; i < 1000000; i++) {
|
||||||
|
sum += i;
|
||||||
|
}
|
||||||
|
console.log('Sum:', sum);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Advanced: Conditional styling
|
||||||
|
const logLevel = 'warn';
|
||||||
|
console.log(
|
||||||
|
`%c[${logLevel.toUpperCase()}]%c Detailed message`,
|
||||||
|
`color: ${logLevel === 'warn' ? 'orange' : 'red'}; font-weight: bold;`,
|
||||||
|
'color: black;'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instance and run demo
|
||||||
|
const styler = new ConsoleStyler();
|
||||||
|
styler.demo();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@ztimson/utils",
|
"name": "@ztimson/utils",
|
||||||
"version": "0.27.6",
|
"version": "0.27.8",
|
||||||
"description": "Utility library",
|
"description": "Utility library",
|
||||||
"author": "Zak Timson",
|
"author": "Zak Timson",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|||||||
12
src/misc.ts
12
src/misc.ts
@@ -24,12 +24,13 @@ export function compareVersions(target: string, vs: string): -1 | 0 | 1 {
|
|||||||
export function consoleInterceptor(
|
export function consoleInterceptor(
|
||||||
out: null | {debug: Function, log: Function, info: Function, warn: Function, error: Function} = console,
|
out: null | {debug: Function, log: Function, info: Function, warn: Function, error: Function} = console,
|
||||||
map?: {[K in LogLevels]?: LogLevels | 'none'}
|
map?: {[K in LogLevels]?: LogLevels | 'none'}
|
||||||
): {debug: Function, log: Function, info: Function, warn: Function, error: Function, stderr: string[], stdout: string[]} {
|
): {debug: Function, log: Function, info: Function, warn: Function, error: Function, output: {debug: any[], log: any[], info: any[], warn: any[], error: any[], stderr: any[], stdout: any[]}} {
|
||||||
const stderr: any[] = [], stdout: any[] = [];
|
const logs: any = {debug: [], log: [], info: [], warn: [], error: [], stderr: [], stdout: [],}
|
||||||
const cWrapper = (type: 'debug' | 'log' | 'info' | 'warn' | 'error') => ((...args: any[]) => {
|
const cWrapper = (type: 'debug' | 'log' | 'info' | 'warn' | 'error') => ((...args: any[]) => {
|
||||||
if(out) out[type](...args);
|
if(out) out[type](...args);
|
||||||
if(type == 'error') stderr.push(...args);
|
logs[type].push(...args);
|
||||||
else stdout.push(...args);
|
if(type == 'error') logs.stderr.push(...args);
|
||||||
|
else logs.stdout.push(...args);
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
debug: map?.debug != 'none' ? cWrapper(map?.debug || 'debug') : () => {},
|
debug: map?.debug != 'none' ? cWrapper(map?.debug || 'debug') : () => {},
|
||||||
@@ -37,8 +38,7 @@ export function consoleInterceptor(
|
|||||||
info: map?.info != 'none' ? cWrapper(map?.info || 'info') : () => {},
|
info: map?.info != 'none' ? cWrapper(map?.info || 'info') : () => {},
|
||||||
warn: map?.warn != 'none' ? cWrapper(map?.warn || 'warn') : () => {},
|
warn: map?.warn != 'none' ? cWrapper(map?.warn || 'warn') : () => {},
|
||||||
error: map?.error != 'none' ? cWrapper(map?.error || 'error') : () => {},
|
error: map?.error != 'none' ? cWrapper(map?.error || 'error') : () => {},
|
||||||
stderr,
|
output: logs
|
||||||
stdout,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -293,6 +293,17 @@ export function mixin(target: any, constructors: any[]) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Run a map function on each property
|
||||||
|
* @param obj Object that will be iterated
|
||||||
|
* @param {(key: string, value: any) => any} fn Transformer function - receives key & value
|
||||||
|
* @returns {{}}
|
||||||
|
*/
|
||||||
|
export function objectMap<T>(obj: any, fn: (key: string, value: any) => any): T {
|
||||||
|
return <any>Object.entries(obj).map(([key, value]: [string, any]) => [key, fn(key, value)])
|
||||||
|
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Parse JSON but return the original string if it fails
|
* Parse JSON but return the original string if it fails
|
||||||
*
|
*
|
||||||
|
|||||||
Reference in New Issue
Block a user