Skip to content

kaehehehe/visual-console

Repository files navigation

@kaehehehe/visual-console 🐰✨

Styled console logs made simple - a cute visual wrapper for your console logging with fun themes and custom styles! 🎉

Features 🌈

  • Pretty themed logs: info, success, warn, error
  • Easy custom styles for your logs
  • Simple API for quick & delightful debugging

Installation 🚀

npm install @kaehehehe/visual-console
# or
yarn add @kaehehehe/visual-console
# or
pnpm add @kaehehehe/visual-console

Usage 🎨

import vc from "@kaehehehe/visual-console"

// Logs with theme
vc.log("✅ Success log!", { theme: "success" });
vc.info("💡 Info log!", { theme: "info" });
vc.warn("⚠️ Warning log!", { theme: "warn" });
vc.error("🚨 Error log!", { theme: "error" });

스크린샷 2025-05-29 11 29 03

// Custom colorful log 💜
vc.log("Custom styled log 💖", {
  style: {
    color: "#FF00FF",
    background: "#FFF0FF",
    padding: "5px 10px",
    borderRadius: "5px",
  },
});

스크린샷 2025-05-29 11 45 11

API Summary 📚

Method What it does Params
log Basic log (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })
info Info level log (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })
warn Warning level log (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })
error Error level log (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })
assert Conditional assert log (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })
group Start a group in console (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })
groupCollapsed Start a collapsed group (text: string, options?: { theme?: LogLevel, style?: ConsoleStyle })

Important Notice for Production Builds ⚠️

  • This library uses process.env.NODE_ENV to detect the environment and disable console logs in production.
  • Make sure your build tool (e.g., Vite, Webpack, etc.) properly sets process.env.NODE_ENV to "production" when creating production bundles.
  • If NODE_ENV is not set correctly, console logs may still appear in your production code.
  • Most modern bundlers automatically handle this, but double-check your build configuration to ensure dead code elimination works as expected.
  • For best results, run your production build command with environment variables properly configured, for example:
NODE_ENV=production vite build

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published