Skip to content

Commit 9ab321c

Browse files
justinkamesjustinkames
authored
Merge pull request justinkames#17 from justinkames/vuejs-logger-typescript
migrated vuejs-logger code to typescript.
2 parents ea991ff + 9086c04 commit 9ab321c

19 files changed

+488
-456
lines changed

Diff for: ‎.npmignore

-3
This file was deleted.

Diff for: ‎.travis.yml

+1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
directories:
66
- "node_modules"
77
install:
8+
- npm install -g typescript
89
- npm install
910
- npm run upload-coverage

Diff for: ‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2017 Justin Kames
3+
Copyright (c) 2018 Justin Kames
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

Diff for: ‎README.md

+49-24
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
- [Introduction](#introduction)
1515
- [Install](#install)
1616
- [Usage](#usage)
17+
- [Properties](#properties)
18+
- [Code example](#code-example)
19+
- [Production tips](#production-tips)
1720
- [Maintainers](#maintainers)
1821
- [Contribute](#contribute)
1922
- [License](#license)
@@ -24,26 +27,21 @@
2427

2528
## Introduction
2629

27-
vuejs-logger is a logging library that enables logging for Vue applications. It restricts log messages that are higher than the specified log level. Features include :
30+
vuejs-logger is a tool that enables configurable logging for Vue applications. Features include :
2831

32+
- Output restriction based on selected loglevel.
33+
- Automatically JSON.stringify() the (reactive) properties passed to the logger.
34+
- Configurable options to customize output for a log messages.
2935
- Colored console messages for $log.warning, $log.error and $log.fatal.
30-
- Possibility to automatically JSON.stringify() the (reactive) properties passed to the logger.
31-
- Possibility to display the log level in the console.
3236

3337
```js
3438
logLevels : ['debug', 'info', 'warn', 'error', 'fatal']
3539
```
3640

37-
Option to disable the logger (for using it on PRODUCTION)
38-
39-
```js
40-
isEnabled : false
41-
```
42-
4341

4442
## Install
4543

46-
This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed!
44+
This project uses [node](http://nodejs.org) and [npm](https://npmjs.com).
4745

4846
https://www.npmjs.com/package/vuejs-logger
4947

@@ -55,27 +53,35 @@ $ npm install vuejs-logger --save-exact
5553

5654
Below you can find an example of how to use vuejs-logger :
5755

58-
```js
59-
import VueLogger from 'vuejs-logger'
56+
#### Properties
6057

58+
| Name | Required | Type | Default | Description |
59+
| --- | --- | --- | --- | --- |
60+
| isEnabled | false | Boolean | true | Enables the vuejs-logger plugin, useful toggle for production/development. |
61+
| logLevel | false | String | 'debug' | Choose between ['debug', 'info', 'warn', 'error', 'fatal']. Read [production tips](#production-tips). |
62+
| stringifyArguments | false | Boolean | false | If true, all input will go through JSON.stringify(). Useful when printing reactive properties.|
63+
| showLogLevel | false | Boolean | false | If true, the loglevel will be shown. |
64+
| showMethodName | false | Boolean | false | If true, the method name of the parent function will be shown in the console. |
65+
| separator | false | String | ' l ' | The seperator between parts of the output ( see [screenshot](#screenshot). |
66+
| showConsoleColors | false | Boolean | false | If true, enables console.warn, console.fatal, console.error for corresponding loglevels. |
67+
68+
#### Code example
69+
70+
```js
71+
import VueLogger from 'vuejs-logger';
72+
const isProduction = process.env.NODE_ENV === 'production';
73+
6174
const options = {
62-
// optional : defaults to true if not specified
6375
isEnabled: true,
64-
// required ['debug', 'info', 'warn', 'error', 'fatal']
65-
logLevel : 'debug',
66-
// optional : defaults to false if not specified
76+
logLevel : isProduction ? 'error' : 'debug',
6777
stringifyArguments : false,
68-
// optional : defaults to false if not specified
6978
showLogLevel : false,
70-
// optional : defaults to false if not specified
7179
showMethodName : false,
72-
// optional : defaults to '|' if not specified
7380
separator: '|',
74-
// optional : defaults to false if not specified
7581
showConsoleColors: false
76-
}
82+
};
7783

78-
Vue.use(VueLogger, options)
84+
Vue.use(VueLogger, options);
7985
```
8086

8187
```js
@@ -94,16 +100,35 @@ new Vue({
94100
this.$log.fatal('test')
95101
externalFunction()
96102
}
97-
})
103+
});
98104

99105
function externalFunction() {
100106
// log from external function
101-
Vue.$log.debug('log from function outside component.')
107+
Vue.$log.debug('log from function outside component.');
102108
}
103109
```
104110

111+
112+
#### Screenshot
113+
105114
![screen shot 2017-10-17 at 10 54 05](https://user-images.githubusercontent.com/3469323/31655570-910fcbbe-b329-11e7-9738-bece4be4d1a8.png)
106115

116+
## Production tips
117+
The plugin can be disabled for production or a lower logLevel can be set to minimize output (as shown in [usage](#usage) ). If the logLevel is set to 'fatal' the plugin will
118+
ignore all calls with less important loglevels in the code.
119+
120+
```js
121+
function foo() {
122+
// these statements will print nothing if the logLevel is set to 'fatal'. But they will compile just fine.
123+
this.$log.debug('test', 'bar')
124+
this.$log.info('test')
125+
this.$log.warn('test')
126+
this.$log.error('test', 'foo')
127+
// this statement will print if the logLevel is set to 'fatal'
128+
this.$log.fatal('test', 'bar', 123)
129+
}
130+
```
131+
107132
## Maintainers
108133

109134
[@justinkames](https://github.com/justinkames).

Diff for: ‎jest.config.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?|ts?)$",
3+
transform: {
4+
"^.+\\.tsx?$": "ts-jest"
5+
},
6+
moduleFileExtensions: [
7+
"ts",
8+
"tsx",
9+
"js",
10+
"jsx"
11+
],
12+
testURL: "http://localhost/",
13+
collectCoverage: true,
14+
collectCoverageFrom: [
15+
"src/**/*.{ts,tsx,js,jsx}"
16+
]
17+
}

Diff for: ‎package.json

+15-32
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,23 @@
11
{
22
"name": "vuejs-logger",
33
"author": "Justin Kames",
4-
"version": "1.4.0",
5-
"description": "Vuejs-logger, provides customizable logging functionality for Vue.js.",
6-
"main": "dist/index.js",
7-
"repository": {
8-
"type": "git",
9-
"url": "https://github.com/justinkames/vuejs-logger.git"
10-
},
4+
"description": "vuejs-logger, provides customizable logging functionality for Vue.js.",
5+
"version": "1.5.0",
6+
"main": "index.js",
117
"scripts": {
12-
"test": "istanbul cover _mocha -- --compilers js:babel-core/register -R spec --debug",
13-
"upload-coverage": "codecov -t $CODECOV_TOKEN",
14-
"build-transpile-uglify": "node_modules/babel-cli/bin/babel.js src --out-dir dist && node_modules/uglify-js/bin/uglifyjs dist/logger.js -c -m -o dist/logger.js",
15-
"build-transpile": "node_modules/babel-cli/bin/babel.js src --out-dir dist && node_modules/uglify-js/bin/uglifyjs dist/logger.js -c -m -o dist/logger.js",
16-
"prepublish": "npm test && npm run build-transpile-uglify"
17-
},
18-
"license": "MIT",
19-
"babel": {
20-
"presets": [
21-
"es2015"
22-
],
23-
"plugins": [
24-
"transform-object-assign"
25-
]
8+
"build": "tsc",
9+
"tsc": "tsc --watch",
10+
"test": "tsc && jest",
11+
"upload-coverage": "codecov -t $CODECOV_TOKEN"
2612
},
2713
"devDependencies": {
28-
"babel-cli": "6.24.1",
29-
"babel-core": "6.25.0",
30-
"babel-loader": "7.1.1",
31-
"babel-plugin-transform-object-assign": "6.22.0",
32-
"babel-preset-es2015": "6.24.1",
33-
"chai": "4.1.0",
34-
"codecov": "2.2.0",
35-
"istanbul": "1.1.0-alpha.1",
36-
"mocha": "3.4.2",
37-
"uglify": "0.1.5",
38-
"vue": "2.5.13"
14+
"@types/jest": "23.3.1",
15+
"@types/node": "10.5.3",
16+
"jest": "23.4.1",
17+
"ts-jest": "23.0.1",
18+
"typescript": "2.9.2",
19+
"chai": "4.1.2",
20+
"vue": "2.5.16",
21+
"es6-object-assign": "1.1.0"
3922
}
4023
}

Diff for: ‎src/index.js

-4
This file was deleted.

Diff for: ‎src/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import ObjectAssign from "es6-object-assign";
2+
ObjectAssign.polyfill();
3+
import VueLogger from "./vue-logger/vue-logger";
4+
export default VueLogger;

Diff for: ‎src/logger.js

-101
This file was deleted.

Diff for: ‎src/vue-logger/enum/log-levels.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export enum LogLevels {
2+
DEBUG = "debug",
3+
INFO = "info",
4+
WARN = "warn",
5+
ERROR = "error",
6+
FATAL = "fatal",
7+
}

Diff for: ‎src/vue-logger/interfaces/logger-options.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {LogLevels} from "../enum/log-levels";
2+
3+
export interface ILoggerOptions {
4+
isEnabled: boolean;
5+
logLevel: LogLevels;
6+
separator: string;
7+
showConsoleColors: boolean;
8+
showLogLevel: boolean;
9+
showMethodName: boolean;
10+
stringifyArguments: boolean;
11+
}

Diff for: ‎src/vue-logger/interfaces/logger.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {ILoggerOptions} from "./logger-options";
2+
3+
export interface ILogger {
4+
install(Vue: any, options: ILoggerOptions);
5+
6+
isValidOptions(options: ILoggerOptions, logLevels: string[]): boolean;
7+
}

0 commit comments

Comments
 (0)