Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a7b19900da | |||
| 34227e5c4b | |||
| 7e8352ed2a |
101
index.html
101
index.html
@@ -1,11 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Console Styling Playground</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module">
|
||||
import {formatDate} from './dist/index.mjs';
|
||||
<h1>Open Chrome DevTools Console to see magic! (Ctrl+Shift+J or Cmd+Option+J)</h1>
|
||||
|
||||
const dt = new Date('2021-03-03T09:00:00Z');
|
||||
const result = formatDate('Do MMMM dddd', dt, 0);
|
||||
console.log(result);
|
||||
<script>
|
||||
// Console Styling Playground
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ztimson/utils",
|
||||
"version": "0.27.5",
|
||||
"version": "0.27.8",
|
||||
"description": "Utility library",
|
||||
"author": "Zak Timson",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -42,6 +42,8 @@ export const CliBackground = {
|
||||
GREY: "\x1b[100m",
|
||||
}
|
||||
|
||||
export type LogLevels = 'debug' | 'log' | 'info' | 'warn' | 'error';
|
||||
|
||||
export enum LOG_LEVEL {
|
||||
ERROR = 0,
|
||||
WARN = 1,
|
||||
|
||||
29
src/misc.ts
29
src/misc.ts
@@ -1,3 +1,4 @@
|
||||
import {LogLevels} from './logger.ts';
|
||||
import {PathEvent} from './path-events.ts';
|
||||
import {md5} from './string';
|
||||
|
||||
@@ -14,6 +15,34 @@ export function compareVersions(target: string, vs: string): -1 | 0 | 1 {
|
||||
(tMajor < vMajor || tMinor < vMinor || tPatch < vPatch) ? -1 : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a console object to intercept logs with optional passthrough
|
||||
* @param {null | {debug: Function, log: Function, info: Function, warn: Function, error: Function}} out Passthrough logs, null to silence
|
||||
* @param {{[K in LogLevels]?: LogLevels | "none"}} map Map log levels: {log: 'debug', warn: 'error'} = Suppress debug logs, elevate warnings
|
||||
* @returns {{debug: Function, log: Function, info: Function, warn: Function, error: Function, stderr: string[], stdout: string[]}}
|
||||
*/
|
||||
export function consoleInterceptor(
|
||||
out: null | {debug: Function, log: Function, info: Function, warn: Function, error: Function} = console,
|
||||
map?: {[K in LogLevels]?: LogLevels | 'none'}
|
||||
): {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 logs: any = {debug: [], log: [], info: [], warn: [], error: [], stderr: [], stdout: [],}
|
||||
const cWrapper = (type: 'debug' | 'log' | 'info' | 'warn' | 'error') => ((...args: any[]) => {
|
||||
if(out) out[type](...args);
|
||||
logs[type].push(...args);
|
||||
if(type == 'error') logs.stderr.push(...args);
|
||||
else logs.stdout.push(...args);
|
||||
});
|
||||
return {
|
||||
debug: map?.debug != 'none' ? cWrapper(map?.debug || 'debug') : () => {},
|
||||
log: map?.log != 'none' ? cWrapper(map?.log || 'log') : () => {},
|
||||
info: map?.info != 'none' ? cWrapper(map?.info || 'info') : () => {},
|
||||
warn: map?.warn != 'none' ? cWrapper(map?.warn || 'warn') : () => {},
|
||||
error: map?.error != 'none' ? cWrapper(map?.error || 'error') : () => {},
|
||||
output: logs
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Escape any regex special characters to avoid misinterpretation during search
|
||||
* @param {string} value String which should be escaped
|
||||
|
||||
@@ -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
|
||||
*
|
||||
|
||||
44
src/time.ts
44
src/time.ts
@@ -34,6 +34,50 @@ export function dayOfYear(date: Date): number {
|
||||
/**
|
||||
* Format date
|
||||
*
|
||||
* Year:
|
||||
* - YYYY = 2025 (4-digit year)
|
||||
* - YY = 25 (2-digit year)
|
||||
*
|
||||
* Month:
|
||||
* - MMMM = January (full month name)
|
||||
* - MMM = Jan (abbreviated month name)
|
||||
* - MM = 01 (zero-padded month number)
|
||||
* - M = 1 (month number)
|
||||
*
|
||||
* Day:
|
||||
* - DDD = 123 (day of year)
|
||||
* - DD = 01 (zero-padded day)
|
||||
* - Do = 1st (day with ordinal suffix)
|
||||
* - D = 1 (day number)
|
||||
* - dddd = Monday (full day name)
|
||||
* - ddd = Mon (abbreviated day name)
|
||||
*
|
||||
* Hour:
|
||||
* - HH = 13 (24-hour format, zero-padded)
|
||||
* - H = 13 (24-hour format)
|
||||
* - hh = 01 (12-hour format, zero-padded)
|
||||
* - h = 1 (12-hour format)
|
||||
*
|
||||
* Minute:
|
||||
* - mm = 05 (zero-padded minutes)
|
||||
* - m = 5 (minutes)
|
||||
*
|
||||
* Second:
|
||||
* - ss = 09 (zero-padded seconds)
|
||||
* - s = 9 (seconds)
|
||||
*
|
||||
* Millisecond:
|
||||
* - SSS = 123 (3-digit milliseconds)
|
||||
*
|
||||
* AM/PM:
|
||||
* - A = AM/PM (uppercase)
|
||||
* - a = am/pm (lowercase)
|
||||
*
|
||||
* Timezone:
|
||||
* - ZZ = +0500 (timezone offset without colon)
|
||||
* - Z = +05:00 (timezone offset with colon)
|
||||
* - z = EST (timezone abbreviation)
|
||||
*
|
||||
* @param {string} format How date string will be formatted, default: `YYYY-MM-DD H:mm A`
|
||||
* @param {Date | number | string} date Date or timestamp, defaults to now
|
||||
* @param tz Set timezone offset
|
||||
|
||||
Reference in New Issue
Block a user