@shirtiny/logger

Simple console log with css, write in typescript.

Usage no npm install needed!

<script type="module">
  import shirtinyLogger from 'https://cdn.skypack.dev/@shirtiny/logger';
</script>

README

logger

npm NPM npm

NPM

Introduction

simple console log with css, write in typescript.

preview

Installation

use npm

npm i @shirtiny/logger

use yarn

yarn add @shirtiny/logger

Usage

import logger, { LEVELS } from "@shirtiny/logger";
import { name, version } from "../package.json";

logger.version(name, version, { level: LEVELS.version });

logger.log(
  "log",
  { level: LEVELS.log },
  ", logger default options: ",
  logger.getLoggerOption(),
);

logger.debug("debug message", { level: LEVELS.debug });
logger.http("req and rep", { level: LEVELS.http });
logger.api("api message", { level: LEVELS.api });
logger.service("service data", { level: LEVELS.service });
logger.interval("interval task", { level: LEVELS.interval });
logger.key("ENTER", { level: LEVELS.key });
logger.warn("warnning message", { level: LEVELS.warn });
logger.error(new Error("error message"), { level: LEVELS.error });

// disable log
logger.setEnable(false);
// change log level
logger.setLevel(39);

Options

import { theme, ShLogger } from "@shirtiny/logger";

const logger = new ShLogger({
  // enable logger, default true
  enable: true,
  // logger level , default 39
  level: 3,
  // log shape style , default slider theme
  shape: theme.shapes.slider,
  // your log implement, default window.console.log
  log: (...data) => console.log(...data),
});

// logger levels
enum LEVELS {
  log = 0,
  version = 0,
  error = 1,
  warn = 2,
  key = 3,
  interval = 3,
  service = 4,
  api = 5,
  http = 6,
  debug = 7,
}

Custom

tips: It is recommended to install the vscode-styled-components for vscode.

  • extends ShLogger for custom
import { ShLogger } from "@shirtiny/logger";

class CustomerLogger extends ShLogger {
  custom = (message: string, ...data: any[]) => {
    this.formatShapeLog(
      {
        level: 4, // the level of this log method
        title: " CUSTOM :",
        color: "#3f6600",
      },
      message,
      data,
    );
  };
}

const customLogger = new CustomerLogger();

customLogger.custom("custom message", { data: "any data" });
  • full custom (if don't need ShLogger's method)
import { Logger, css } from "@shirtiny/logger";

class FullCustomerLogger extends Logger {
  custom = (message: string, ...data: any[]) => {
    const level = 4;
    this.formatLog(
      level,
      " Custom ",
      message,
      css`
        color: #fff;
        padding: 2px;
        background-color: #3f6600;
        border-radius: 3px;
        margin-right: 8px;
      `,
      css`
        color: #3f6600;
        font-size: 15px;
        font-family: "Trebuchet MS";
      `,
      ...data,
    );
  };
}

const customerLogger = new FullCustomerLogger();

customerLogger.custom("my custom log");

Versions

  • 1.2.4 JavaScript
  • ^2.1.7 TypeScript