log with style

example_impl.tsx

import { createPrefixGroup, loggingGroupProps, lws, prefixes } from "../../utilities/logging"

interface extendedLoggingGroupProps extends loggingGroupProps {
  pSet: string[]
  pFS: string[]
  pId: string[]
}

const prefix = ["Test File", "#157A6E"] // basis prefix per file
const p = createPrefixGroup(prefix) as extendedLoggingGroupProps // construct variable with all prefix Groups
p.pSet = lws([prefix, ['SETTER', '#119944']]) // add additional prefixGroup
p.pFS = lws([prefix, prefixes.form, prefixes.success])


// for dynamic values declaration needs to happen inside the component
export default function ComponentName() {

  const valueToEval: number | null = 1

  const joinId: string[] = [(valueToEval !== null ? valueToEval.toString() : "999"), "BackGroundColor", "TextColor"]
  p.pId = lws([prefix, joinId])

  console.log(...p.p, "TEST")
  console.log(...p.pA, "TEST")
  console.log(...p.pSet, "TEST")
  console.log(...p.pFS, "TEST")
  console.log(...p.pId, "TEST")

  return (
    <div></div>
  )
}

loggint.ts

export function styleBlock(backgroundColor: string, textColor?: string): string {
  return `display: inline-block ; background-color: ${backgroundColor}; color: ${textColor && textColor !== "" ? textColor : '#fff'} ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;`
}

// test comment
export function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

/**
 * Log with Style -
 * Returns a string and an object with css styling information. Default text color is white.
 * 
 * use like this:
 * 
 * console.log(...lws([["text"]]));
 * 
 * console.log(...lws([["text", "background color", "text color"]]));
 * 
 * console.log(...lws([["text1", "color1"], ["text2", "color2"], ...]), <additional text/vars> );
 * 
 * @param {string[][] }styles A two-dimensional string array containing the names and colors to print into the log.
 * @param {any[]} optStuff an array of optional parameters with type any[].
 * @return {any[]} returns an array of type any
 */
export function lws(styles: string[][], ...optStuff: any[]): any[] {

  let inputStrings: string[] = []
  let cssStrings: string[] = []

  for (let i = 0; i < styles.length; i++) {

    inputStrings.push("%c" + styles[i][0])
    if (i + 1 < styles.length) {
      // console.log("adding trailing %c")
      inputStrings.push("%c ")
    }

    if (styles[i].length === 3) {
      cssStrings.push(styleBlock(styles[i][1], styles[i][2]))
    } else if (styles[i].length === 2) {
      cssStrings.push(styleBlock(styles[i][1]))
    } else if (styles[i].length === 1) {
      cssStrings.push(styleBlock(getRandomColor()))
    }
    cssStrings.push("")
  }

  let returnObject: any
  if (optStuff && optStuff.length > 0) {
    returnObject = [inputStrings.join(""), ...cssStrings, ...optStuff]
  } else {
    returnObject = [inputStrings.join(""), ...cssStrings]
  }

  return returnObject
}

export interface loggingPrefixProps {
  failure: string[];
  empty: string[];
  success: string[];
  useEffect: string[];
  debounce: string[];
  switch: string[];
  eval: string[];
  form: string[];
  apiOrder: string[];
  api: string[];
  checkin: string[];
}

export interface loggingGroupProps {
  p: string[];
  pA: string[];
  pAE: string[];
  pAF: string[];
  pAO: string[];
  pAS: string[];
  pC: string[];
  pD: string[];
  pE: string[];
  pF: string[];
  pForm: string[];
  pS: string[];
  pU: string[];
  pUF: string[];
  pUS: string[];
}

export const prefixes: loggingPrefixProps = {
  failure: ["FAILED", "red"],
  empty: ["EMPTY", "lightblue", "blue"],
  success: ["SUCCESS", "lightgreen", "green"],
  useEffect: ["UseEffect", "purple"],
  debounce: ["Debounce", "brown"],
  switch: ["SWITCH", "#b6ca12", "black"],
  eval: ["Eval", "#4efcb9", "#333"],
  form: ["FORM", "#ff99ff", "#333"],
  apiOrder: ["API ORDER", "darkblue", "yellow"],
  api: ["API", "yellow", "red"],
  checkin: ["CHECK IN", "#333"],
};
export const prefixGroups: loggingGroupProps = {
  p: ["prefix"],
  pA: ["prefix", "api"],
  pAE: ["prefix", "api", "empty"],
  pAF: ["prefix", "api", "failure"],
  pAO: ["prefix", "apiOrder"],
  pAS: ["prefix", "api", "success"],
  pC: ["prefix", "checkin"],
  pD: ["prefix", "debounce"],
  pE: ["prefix", "eval"],
  pF: ["prefix", "failure"],
  pForm: ["prefix", "form"],
  pS: ["prefix", "switch"],
  pU: ["prefix", "useEffect"],
  pUF: ["prefix", "useEffect", "failure"],
  pUS: ["prefix", "useEffect", "success"],
};

export function createPrefixGroup(inputPrefix: string[]) {
  let resultObject = {} as loggingGroupProps;

  for (let gr in prefixGroups) {
    // console.log("[group]:", gr, prefixGroups[gr]);

    const partArray: string[][] = [];
    for (let i = 0; i < prefixGroups[gr].length; i++) {
      const p = prefixGroups[gr][i];

      if (p !== "prefix") {
        // console.log("    [Prefix]:", p, prefixs[p]);
        partArray.push(prefixes[p]);
      } else {
        // console.log("    [Prefix]:", "prefix", inputPrefix);
        partArray.push(inputPrefix);
      }
    }
    // console.log("partArray:", ...partArray);
    const result = lws([...partArray]);
    resultObject[gr] = result;
  }

  // // TESTING
  // for (let el in resultObject) {
  //   console.log(...resultObject[el], "test");
  // }

  return resultObject;
}