├── .babelrc ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── build ├── lib │ └── webpack.lib.js └── webpack.base.js ├── dist ├── consolee.js └── consolee.min.js ├── img ├── error.jpg ├── errorMoz.jpg ├── log.jpg ├── logMoz.jpg ├── success.jpg ├── successMoz.jpg ├── warn.jpg └── warnMoz.jpg ├── index.d.ts ├── index.html ├── index.ts ├── lib └── index.d.ts ├── package.json └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/env", 4 | "@babel/typescript" 5 | ], 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | 72 | # Nuxt generate 73 | nuxt 74 | 75 | # vuepress build output 76 | .vuepress/dist 77 | 78 | # Serverless directories 79 | .serverless 80 | 81 | # IDE / Editor 82 | .idea 83 | .editorconfig 84 | 85 | # Service worker 86 | sw.* 87 | 88 | # Mac OSX 89 | .DS_Store 90 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "Iconsoles" 4 | ] 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Consoleejs 2 | 3 | > Simple library console javascript styling 4 | 5 | ## install 6 | 7 | ``` 8 | npm i consolee 9 | ``` 10 | 11 | ## usage 12 | 13 | ```js 14 | import consolee from 'consolee' 15 | 16 | consolee.log({ 17 | el: document.getElementById('myId'),, // <--- HTMLElement 18 | link: 'https://github.com/lusaxweb/Consolee', // <--- link url more info 19 | text: `• Warn info: El formato de la propiedad color es incorrecto 20 | • Prop: color 21 | • value: Example 22 | • Valores Permitidos: (RGB, HEX, RGB Numbers, Vuesax Colors) 23 | • Example: color="#000" or color="rgb(255,255,255)"`, // <--- text info console 24 | title: 'CONSOLEE' // <--- title console 25 | }) 26 | ``` 27 | 28 | consoleejs 29 | consoleejs 30 | 31 | ```js 32 | import consolee from 'consolee' 33 | 34 | consolee.warn({ 35 | el: document.getElementById('myId'),, // <--- HTMLElement 36 | link: 'https://github.com/lusaxweb/Consolee', // <--- link url more info 37 | text: `• Warn info: El formato de la propiedad color es incorrecto 38 | • Prop: color 39 | • value: Example 40 | • Valores Permitidos: (RGB, HEX, RGB Numbers, Vuesax Colors) 41 | • Example: color="#000" or color="rgb(255,255,255)"`, // <--- text info console 42 | title: 'CONSOLEE' // <--- title console 43 | }) 44 | ``` 45 | 46 | consoleejs 47 | consoleejs 48 | 49 | ```js 50 | import consolee from 'consolee' 51 | 52 | consolee.error({ 53 | el: document.getElementById('myId'),, // <--- HTMLElement 54 | link: 'https://github.com/lusaxweb/Consolee', // <--- link url more info 55 | text: `• Warn info: El formato de la propiedad color es incorrecto 56 | • Prop: color 57 | • value: Example 58 | • Valores Permitidos: (RGB, HEX, RGB Numbers, Vuesax Colors) 59 | • Example: color="#000" or color="rgb(255,255,255)"`, // <--- text info console 60 | title: 'CONSOLEE' // <--- title console 61 | }) 62 | ``` 63 | 64 | consoleejs 65 | consoleejs 66 | 67 | ```js 68 | import consolee from 'consolee' 69 | 70 | consolee.success({ 71 | el: document.getElementById('myId'),, // <--- HTMLElement 72 | link: 'https://github.com/lusaxweb/Consolee', // <--- link url more info 73 | text: `• Warn info: El formato de la propiedad color es incorrecto 74 | • Prop: color 75 | • value: Example 76 | • Valores Permitidos: (RGB, HEX, RGB Numbers, Vuesax Colors) 77 | • Example: color="#000" or color="rgb(255,255,255)"`, // <--- text info console 78 | title: 'CONSOLEE' // <--- title console 79 | }) 80 | ``` 81 | 82 | consoleejs 83 | consoleejs 84 | 85 | ## props 86 | 87 | - **el**: Html element to refer to the error. 88 | - **link**: Url to more information about the error. 89 | - **text**: String with console information. 90 | - **title**: Console title. 91 | - **icon**: change icon or add. 92 | 93 | -------------------------------------------------------------------------------- /build/lib/webpack.lib.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const baseWebpackConfig = require('../webpack.base.js') 3 | const merge = require('webpack-merge') 4 | 5 | module.exports = merge(baseWebpackConfig, { 6 | entry: { 7 | 'consolee': './index.ts', 8 | 'consolee.min': './index.ts', 9 | }, 10 | output: { 11 | filename: '[name].js', 12 | path: path.resolve(process.cwd(), 'dist'), 13 | publicPath: '/dist/', 14 | library: 'consolee', 15 | libraryTarget: 'umd', 16 | libraryExport: 'default', 17 | globalObject: 'typeof self !== \'undefined\' ? self : this' 18 | } 19 | }) -------------------------------------------------------------------------------- /build/webpack.base.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const pkg = require('../package.json') 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 4 | const WebpackBar = require('webpackbar'); 5 | 6 | module.exports = { 7 | mode: 'production', 8 | stats: 'errors-only', 9 | externals: { 10 | vue: { 11 | commonjs: 'vue', 12 | commonjs2: 'vue', 13 | amd: 'vue', 14 | root: 'Vue' 15 | } 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.(ts|js)x?$/, 21 | exclude: /node_modules/, 22 | loader: ['babel-loader', 'ts-loader'] 23 | } 24 | ], 25 | }, 26 | plugins: [ 27 | new WebpackBar(), 28 | new webpack.BannerPlugin({ 29 | banner: `/*! 30 | * Vuesax v${pkg.version} 🖖 (https://lusaxweb.github.io/vuesax/) 31 | * Forged by Luis Daniel Rovira 32 | * Released under the MIT License. 33 | * Donate: https://www.patreon.com/bePatron?c=1567892 34 | * © 2019, Lusaxweb. (https://lusaxweb.net) 35 | */`, 36 | raw: true, 37 | entryOnly: true 38 | }) 39 | ], 40 | resolve: { 41 | extensions: [ '.tsx', '.ts', '.js', '.sass' ], 42 | }, 43 | optimization: { 44 | minimizer: [ 45 | new UglifyJsPlugin({}), 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /dist/consolee.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Vuesax v0.1.11 🖖 (https://lusaxweb.github.io/vuesax/) 3 | * Forged by Luis Daniel Rovira 4 | * Released under the MIT License. 5 | * Donate: https://www.patreon.com/bePatron?c=1567892 6 | * © 2019, Lusaxweb. (https://lusaxweb.net) 7 | */ 8 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.consolee=t():e.consolee=t()}("undefined"!=typeof self?self:this,function(){return(r={},o.m=n=[function(e,t,n){"use strict";function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function o(t){for(var e=1;e 2 | 3 | 4 | 5 | 6 | 7 | Example 8 | 9 | 10 | 13 | 14 | View in Console browser 15 | 16 | 17 | 59 | 60 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | 2 | const getIcon = (props: any) => { 3 | if (props.type === 'warn') { 4 | return props.icon || '😬' 5 | } else if (props.type === 'error') { 6 | return props.icon || '❗️' 7 | } else if (props.type === 'success') { 8 | return props.icon || '✔️' 9 | } else { 10 | return props.icon || '' 11 | } 12 | } 13 | 14 | const getColorHeader = (props: any) => { 15 | if (props.type === 'warn') { 16 | return '#ffba00' 17 | } else if (props.type === 'error') { 18 | return 'rgb(255,71,87)' 19 | } else if (props.type === 'success') { 20 | return 'rgb(70,201,58)' 21 | } else { 22 | return '#fff' 23 | } 24 | } 25 | 26 | const base = (props: any) => { 27 | const header = `%c${getIcon(props)} ${props.title || props.type.toUpperCase() || ''}` 28 | const headerStyle = `color: ${ getColorHeader(props) === '#fff' ? '#5b5777' : '#fff'}; font-weight: bold; font-size: 13px; border-radius: 0px 16px 16px 16px; padding-left: 4px; padding-right: 15px; padding-top: 4px; padding-bottom: 4px; background: ${getColorHeader(props)}; letter-spacing: 1px; margin: auto; text-shadow: 3px 3px 3px rgba(0,0,0,.2); box-shadow: 0px -5px 10px 5px rgba(0,0,0,.1)` 29 | const text = `%c 30 | ------------------------------- 31 | ${props.text} 32 | -------------------------------${ props.el ? '\n' : ''}` 33 | const print = [ 34 | header + text + `${ props.link ? '%c👆 More info:' : ''} ${props.link || ''}\n` + '%c Powered by Consolee\n', 35 | headerStyle, 36 | props.type === 'success' ? `color: ${getColorHeader(props)}` : '', 37 | props.type === 'success' ? `color: ${getColorHeader(props)}` : '', 38 | 'font-size: 9px; opacity: 0.6; padding-top: 10px; text-align: right; width: 100%; display: block; margin-left: auto;', 39 | '\n', 40 | props.el ? props.el : '', 41 | ] 42 | if (props.type === 'warn') { 43 | console.warn(...print) 44 | } else if(props.type === 'error') { 45 | console.error(...print) 46 | } else { 47 | console.log(...print) 48 | } 49 | } 50 | 51 | const warn = (props: any) => { 52 | base({ 53 | type: 'warn', 54 | ...props 55 | }) 56 | } 57 | const log = (props: any) => { 58 | base({ 59 | type: 'log', 60 | ...props 61 | }) 62 | } 63 | const error = (props: any) => { 64 | base({ 65 | type: 'error', 66 | ...props 67 | }) 68 | } 69 | const success = (props: any) => { 70 | base({ 71 | type: 'success', 72 | ...props 73 | }) 74 | } 75 | 76 | // (window as any).consolee = consolee 77 | 78 | export default { 79 | error, 80 | log, 81 | warn, 82 | success 83 | } 84 | -------------------------------------------------------------------------------- /lib/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: { 2 | error: (props: any) => void; 3 | log: (props: any) => void; 4 | warn: (props: any) => void; 5 | success: (props: any) => void; 6 | }; 7 | export default _default; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "consolee", 3 | "version": "0.1.12", 4 | "description": "Simple Javascript Console Style", 5 | "main": "dist/consolee.js", 6 | "homepage": "https://lusaxweb.github.io/vuesax/#/", 7 | "repository": "lusaxweb/Consolee", 8 | "scripts": { 9 | "build": "npx webpack --config build/lib/webpack.lib.js", 10 | "p": "npm version patch && npm publish --access public", 11 | "deploy": "npm run build && npm run p" 12 | }, 13 | "keywords": [ 14 | "console", 15 | "log", 16 | "javascript", 17 | "style", 18 | "consolee", 19 | "library", 20 | "frontend", 21 | "warn", 22 | "error", 23 | "success" 24 | ], 25 | "bugs": { 26 | "url": "https://github.com/lusaxweb/Consolee/issues" 27 | }, 28 | "author": "ldrovira ", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "@babel/core": "^7.6.4", 32 | "@babel/preset-env": "^7.6.3", 33 | "@babel/preset-typescript": "^7.6.0", 34 | "babel-cli": "^6.26.0", 35 | "babel-loader": "^8.0.6", 36 | "ts-loader": "^6.2.0", 37 | "typescript": "^3.6.4", 38 | "uglifyjs-webpack-plugin": "^2.2.0", 39 | "webpack": "^4.41.1", 40 | "webpack-cli": "^3.3.9", 41 | "webpack-merge": "^4.2.2", 42 | "webpackbar": "^4.0.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | "outDir": "lib", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | } 63 | } 64 | --------------------------------------------------------------------------------