Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jukben/stylog

🎨 Stylish way how to format your console.log - for humans
https://github.com/jukben/stylog

Last synced: about 2 months ago
JSON representation

🎨 Stylish way how to format your console.log - for humans

Host: GitHub
URL: https://github.com/jukben/stylog
Owner: jukben
License: mit
Created: 2018-05-31T12:59:55.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2022-12-08T19:13:22.000Z (about 2 years ago)
Last Synced: 2024-10-12T13:26:56.304Z (2 months ago)
Language: JavaScript
Homepage:
Size: 579 KB
Stars: 17
Watchers: 3
Forks: 0
Open Issues: 9
Metadata Files:
- Readme: Readme.md
- License: LICENSE

Awesome Lists containing this project

README

        


 



STYled console.LOG





## Table of Contents

- [Introduction](#introduction)

- [Install](#install)

- [Usage](#usage)

  - [Recipe](#recipe)

  - [Styles Dictionary](#styles-dictionary)

  - [Mapper Dictionary](#mapper-dictionary)

- [Example](#example)

- [Contributing](#contributing)

- [Credits](#credits)

- [License](#license)

## Introduction

[![codecov](https://codecov.io/gh/jukben/stylog/branch/master/graph/badge.svg)](https://codecov.io/gh/jukben/stylog)

Stylog is a stylish way how to easily format [rich console.log messages](https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css).

_It's overengineered on purpose I just wanted to write it in the "old school" way and avoid RegExps. It has been written with a nostalgic memory to the Dragon Book 🐲_

## Install

`yarn add stylog`

_The library is targeted for the last two version of Chrome, it's designed to be used mostly in dev mode within latest dev tools._

## Usage

### API

```js

stylog(

  (recipe: string),

  (stylesDictionary: ?{

    [id: string]: {

      [property: string]: string

    }

  }),

  (mapperDictionary ?{

    [id: string]: (value: string) => string

  })

);

```

If you are fan of FP you can take full advantage of the data-last curried version!✌️

```js

stylog.fp(mapperDictionary)(stylesDictionary)(recipe);

```

### Recipe

- **_text_** is everything outside (non-escaped) "**{**"

- **_styled text_** start with "**{**" followed by **id** (string) and optionally **text** (multiline string) then it should be closed with "**}**"

- each **_styled text_** may have corresponding style in _stylesDictionary_ otherwise it would be rendered as **_text_**

- **_styled text_** can be escaped by \ (in template literal you have to use \\\ ) then it would be considered as **_text_**

```

This is normal text {styled this is styled text}

```

```

This is normal text \{styled this is also normal text}

```

### Styles Dictionary

- is an nullable-object where key should be string matching **id** of **_styled text_** and value is supposed to be object of CSS properties in camelCase notation.

- it could be null

```js

{

  styled: {

    fontSize: "20px"; // or "fontSize: 20" :)

  }

}

```

### Mapper Dictionary

- is an nullable-object where key should be string matching **id** of **_styled text_** and value is supposed to be an function which takes that matched string and returns modified string (optionally could return falsy value which will act as empty string)

```js

{

  // return c👏l👏a👏p👏e👏d string

  clap: s => {

    return [...s]

      .map((a, i) => `${a}${i !== s.length - 1 ? "👏" : ""}`)

      .join("");

  };

}

```

## Example

Check it out the `example/index.html` for interactive playground! 🙌

```js

stylog(

  `{big Hello, everyone! This is nicely styled text!} 

and non-styled text. Lovely, right? {bold *clap* *clap* *clap*} 

{image [GANDALF]} {red Be aware! Wild Gandalf appears!}

.

.

.

\\{gandalf}

.

.

.

not like this

.

.

.

{gandalf}

{clap Awesome}`,

  {

    bold: {

      fontWeight: "bold"

    },

    big: {

      fontSize: "25px",

      border: "1px solid black",

      padding: "10px"

    },

    image: {

      display: "block !important",

      color: "gray",

      fontSize: "10px",

      background: `url("https://vignette.wikia.nocookie.net/casshan/images/d/dc/Warn.png/revision/latest?cb=20120614181856")`,

      backgroundSize: "15px 15px",

      backgroundRepeat: "no-repeat",

      backgroundPosition: "left",

      paddingLeft: "15px"

    },

    red: {

      color: "red",

      textDecoration: "underline"

    },

    gandalf: {

      display: "block !important",

      color: "gray",

      fontSize: "300px",

      lineHeight: "150px",

      display: "block !important",

      background: `url("https://i.giphy.com/media/FyetIxXamPsfC/giphy.webp")`,

      backgroundSize: "200px",

      backgroundRepeat: "no-repeat",

      backgroundPosition: "left"

    },

    clap: {

      background: "black",

      color: "yellow"

    }

  },

  {

    clap: s => {

      return [...s]

        .map((a, i) => `${a}${i !== s.length - 1 ? "👏" : ""}`)

        .join("");

    }

  }

);

```

will produce this:

 

## Contributing

Do you miss something? Open an issue, I'd like to hear more about your use case. You can also fork this repository and run `yarn && yarn dev`, do stuff in the playground (`example/index.html`), then run `yarn test` and finally send a PR! ❤️

## Credits

I got the inspiration for this project from https://github.com/adamschwartz/log, especially from this [issue](https://github.com/adamschwartz/log/issues/43). Thanks @whitefire0 and @adamschwartz.

## License

The MIT License (MIT) 2018 - Jakub Beneš