{"id":25731849,"url":"https://github.com/pelv/frontlog","last_synced_at":"2025-02-26T03:27:29.171Z","repository":{"id":41320736,"uuid":"377116067","full_name":"Pelv/frontlog","owner":"Pelv","description":"Simple yet complex styled console.log library. Just vanilla JS, no dependencies.","archived":false,"fork":false,"pushed_at":"2022-10-14T15:42:05.000Z","size":497,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T09:44:07.360Z","etag":null,"topics":["console-log","javascript","javascript-library","logging","npm","npm-package","vanilla"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pelv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-15T09:59:51.000Z","updated_at":"2023-03-07T03:05:13.000Z","dependencies_parsed_at":"2022-08-26T08:40:52.406Z","dependency_job_id":null,"html_url":"https://github.com/Pelv/frontlog","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pelv%2Ffrontlog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pelv%2Ffrontlog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pelv%2Ffrontlog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pelv%2Ffrontlog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pelv","download_url":"https://codeload.github.com/Pelv/frontlog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240785619,"owners_count":19857267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["console-log","javascript","javascript-library","logging","npm","npm-package","vanilla"],"created_at":"2025-02-26T03:27:28.479Z","updated_at":"2025-02-26T03:27:29.164Z","avatar_url":"https://github.com/Pelv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **frontlog**\nSimple yet complex styled console.logs library. Just vanilla JS, no dependencies.\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/pelv/frontlog?logo=git\u0026style=for-the-badge)\n![GitHub package.json version](https://img.shields.io/github/package-json/v/pelv/frontlog?logo=npm\u0026style=for-the-badge)\n![GitHub](https://img.shields.io/github/license/pelv/frontlog?logo=github\u0026style=for-the-badge)\n\n\n## v2\n- Optimized npm package and repo\n- Added tagColor on the config\n- General optimizations\n\n## Introduction\nThis library has been created for front-end devs and works smoothly with the inspector.\nThe other libraries i found online have too many features and most of them are made to be used with node.js. Instead, i wanted a library easy-to-use and easy-to-write that helps out front-end team catch only the needed console.log at the right time.\nWhen a lot of people works on an application (i.e. a React App) there can be a lot of console.logs that comes from other components that doesn't help you debug.\n\n\n#### **Features**:\n- Tags for console.log (aka prefix) to easily catch where the log is coming from or to search / filter them;\n- Multiple logs in one call;\n- Easy to write console groups;\n- Console types (ok, error, warn, info);\n- General config, such as: tags filtering (allow only some tags), disable console logs (for production servers), console.group collapse when tot logs has to be sent.\n\n\n## How to use\nThis library works without dependencies and can be used without init or stuff... It just works right out of the box\n\n\n#### **Install**\n```shell\nnpm install @pelv/frontlog\n```\nor add the `index.js` file in your project and import it where you need it\n\n\n#### **Usage**\nFirst, you'll need to import it in your file/components etc:\n```javascript\nimport log from '@pelv/frontlog'\n```\nthen just use `log({...params}, {...overrideConfigOnce})`.\nExamples:\n```javascript\n// just the most basic usage, for fast logs\nlog('just a basic, boring, normal log')\n\n// most common use\nlog({\n  text: 'this is the message',\n  variable: myExampleVar,\n  tag: 'example'\n})\n\n// multiple log for multiple variables? No problem!\nlog({\n  text: 'this is the message, it will be the same for every variable',\n  variables: [myExampleVar1, myExampleVar2],\n  tag: 'example'\n})\n\n// that's where the fun is\nlog([\n  {\n    text: 'first log',\n    variable: myExampleVar1,\n    tag: 'logArray'\n  },\n  {\n    text: 'second log',\n    variable: myExampleVar2,\n    tag: 'logArray'\n  }\n])\n\n// when that's not enough... groups! (with config override)\nlog({\n  groupName: 'Group Example',\n  group: [\n    {\n      text: 'first log of the group',\n      variable: myExampleVar1,\n      tag: 'logArray'\n    },\n    {\n      text: 'second log of the group',\n      variable: myExampleVar2,\n      tag: 'logArray'\n    }\n  ]\n},{\n  collapseGroupLogs: 1\n})\n```\nThose example produce the following output:\n![Examples output!](/images/examples.png)\n\n\n\"Ok now... that looks a bit messy\" :) don't worry, find below a more informations.\n\n\n## Global config and log parameters\nLet's start with the library global config:\n```javascript\n// default config\nconst config = {\n  tagColor: 'default',\n  sendLogs: true,\n  tagsToShow: [],\n  collapseGroupLogs: 2\n}\n```\n- **tagColor**: string variable that specify which color scheme to use for tags, it accepts: 'red', 'yellow', 'blue', 'green'.\n- **sendLogs**: boolean variable that specify if the library should send console.logs or not. Set false for production builds and no console logs will be delivered!\n- **tagsToShow**: array of strings containing the Tags that are allowed to be printed. Leave empty to allow all tags.\n- **collapseGroupLogs**: number that specify after how many logs the group should be collapsed by default\n\nAny of this variable can be globally changed using the `changeLogConfig({...params})` function.\nHere is an example:\n```javascript\n// this example comes from the index.js file of a React App i'm working on\nif (configuration.environment === 'production') {\n  changeLogConfig({\n    sendLogs: false\n  })\n}\n```\nIf you want to change it just for one log you can use ***optional*** parameter `overrideConfigOnce`: it accept the same config variables and can be used to change the global settings just for that log.\nI.E. let's say you want a log that will be always sent even in production, you can write the log as follow:\n```javascript\nlog(\n  {\n    text: 'A truly important log',\n    tag: 'always-visible'\n  },\n  {\n    sendLogs: true\n  }\n)\n```\n\nLet's talk about the basic parameters of the log function. As mentioned in the example, the main parameters of the `log` function can be a String, an Array or an Object.\n\nIf is a string it will just send a normal console.log. If is an array will consider it as multiple log objects; If is an object (default usage) can accept the following property (same if you send an array of objects):\n- **text**: String -\u003e the message of the console.log\n- **type**: String -\u003e it accept `success`, `warn`, `error`, `info` and will add a prefix after the tag with the color of the type; N.B. the library doesn't use console.warn and console.error.\n- **variable**: Any -\u003e the variable you want to attach to the console.log\n- **variables**: Array -\u003e an array of variables you want to log\n- **tag**: String -\u003e identifier of different console.logs; usually used to tag/categorise console.logs\n- **group**: Array of objects -\u003e similar to send an array of logs object but will be displayed in a console.group\n- **groupName**: String -\u003e the message/name used for the group. If no name is specified, the `tag` string will be used as a name (this tag property should be at the same level of group)\n\n\n## Outro\nThat's all folks! :)\nPlease feel free to fork, request improvements, stars or whatever.\n\nIf you have any questions, find me on any social and messaging App (search for Pelv or Pelviero).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpelv%2Ffrontlog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpelv%2Ffrontlog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpelv%2Ffrontlog/lists"}