feat: add logger middleware (#2)

* chore: change license to MIT

* feat: add yab-fetch-logger

* chore: update root readme of packages

README.md

@@ -78,6 +78,7 @@ This repository is a monorepo that we manage using Lerna. That means that we act
 | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
 | [`yab-fetch`](/packages/yab-fetch)                                   | [![npm](https://img.shields.io/npm/v/yab-fetch.svg?style=flat-square)](https://www.npmjs.com/package/yab-fetch) | The fetch library.                                       |
 | [`yab-fetch-cache`](/packages/yab-fetch-cache) | [![npm](https://img.shields.io/npm/v/yab-fetch-cache.svg?style=flat-square)](https://www.npmjs.com/package/yab-fetch-cache) | A yab middleware, focus on cache response using IndexDB. |
+| [`yab-fetch-logger`](/packages/yab-fetch-logger) | [![npm](https://img.shields.io/npm/v/yab-fetch-logger.svg?style=flat-square)](https://www.npmjs.com/package/yab-fetch-logger) | A yab middleware, logger request/response of fetch action |
 
 ## Changelog
 

packages/yab-fetch-cache/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1-alpha.1",
   "description": "",
   "homepage": "https://github.com/mjolnirjs/yab/tree/master/packages/yab-fetch-cache#readme",
-  "license": "ISC",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mjolnirjs/yab.git"

packages/yab-fetch-logger/.editorconfig

@@ -0,0 +1,6 @@
+[*]
+
+indent_style = space
+indent_size = 2
+charset = utf-8
+insert_final_newline = true

packages/yab-fetch-logger/.eslintignore

@@ -0,0 +1,2 @@
+dist
+config

packages/yab-fetch-logger/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  extends: [
+    'airbnb-base',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:prettier/recommended',
+    'prettier/@typescript-eslint'
+  ],
+  rules: {
+    'import/prefer-default-export': 'off',
+    'no-underscore-dangle': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/interface-name-prefix': 'off'
+  }
+};

packages/yab-fetch-logger/.gitignore

@@ -0,0 +1,94 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+
+# custom
+build
+dist
+lib

packages/yab-fetch-logger/.prettierignore

@@ -0,0 +1,5 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json

packages/yab-fetch-logger/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 80,
+  singleQuote: true,
+  arrowParens: 'always'
+};

packages/yab-fetch-logger/README.md

@@ -0,0 +1,26 @@
+# yab-fetch-logger
+
+## Install
+
+`npm i yab-fetch-logger`
+
+## Useage
+> **must be the last middleware in chain.**
+
+
+```ts
+import { createFetch } from 'yab-fetch';
+import { createLogger } from 'yab-fetch-logger';
+
+const logger = createLogger({
+  // options
+});
+
+const request = createFetch({
+  middleware: [logger],
+});
+```
+
+## Example
+
+![example](assets/log-example.png)

packages/yab-fetch-logger/config/utils.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+// 拼接目录路径
+function resolve(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+module.exports = {
+  resolve
+};

packages/yab-fetch-logger/config/webpack.config.base.js

@@ -0,0 +1,36 @@
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const { resolve } = require('./utils');
+const projectName = 'yab-fetch-logger';
+
+module.exports = {
+  entry: {
+    [`${projectName}.min`]: [resolve('src')] // same as resolve('src/index.js');
+  },
+  output: {
+    filename: '[name].js',
+    path: resolve('dist'),
+    library: projectName,
+    libraryTarget: 'umd'
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json']
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(ts|tsx)?$/,
+        exclude: /node_modules/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.(ts|tsx)?$/,
+        exclude: /node_modules/,
+        use: [{ loader: 'ts-loader', options: { transpileOnly: true } }]
+      }
+    ]
+  },
+  plugins: [new CaseSensitivePathsPlugin(), new ForkTsCheckerWebpackPlugin()]
+};

packages/yab-fetch-logger/config/webpack.config.dev.js

@@ -0,0 +1,50 @@
+const merge = require('webpack-merge');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
+
+const baseConfig = require('./webpack.config.base');
+
+const developmentConfig = merge(baseConfig, {
+  mode: 'development',
+  devServer: {
+    // Enable history API fallback so HTML5 History API based
+    // routing works. Good for complex setups.
+    historyApiFallback: true,
+
+    // Display only errors to reduce the amount of output.
+    stats: 'errors-only',
+
+    // Parse host and port from env to allow customization.
+    //
+    // If you use Docker, Vagrant or Cloud9, set
+    // host: options.host || '0.0.0.0';
+    //
+    // 0.0.0.0 is available to all network devices
+    // unlike default `localhost`.
+    port: 8080, // Defaults to 8080
+    // overlay: true is equivalent
+    overlay: {
+      errors: true,
+      warnings: false
+    },
+    disableHostCheck: true,
+    // 配合 FriendlyErrorsWebpackPlugin, 只展示 Friendly 处理后的
+    quiet: true
+
+    // publicPath 设置的话， 是使得 bundle 的文件，在此路径下访问
+    // publicPath: '/assets/',
+    // proxy: {
+    //   '/api': {
+    //     target: 'http://localhost:8080',
+    //     pathRewrite: { '^/api': '' }
+    //   }
+    // }
+  },
+  devtool: 'cheap-module-eval-source-map',
+  plugins: [
+    new FriendlyErrorsWebpackPlugin(),
+    new ForkTsCheckerNotifierWebpackPlugin({ excludeWarnings: true })
+  ]
+});
+
+module.exports = developmentConfig;

packages/yab-fetch-logger/config/webpack.config.dist.js

@@ -0,0 +1,21 @@
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const baseConfig = require('./webpack.config.base');
+
+const productionConfig = merge(baseConfig, {
+  mode: 'production',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
+      }
+    })
+  ],
+  optimization: {
+    minimizer: [new TerserPlugin()]
+  }
+});
+
+module.exports = productionConfig;

packages/yab-fetch-logger/example/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Log Middleware</title>
+  </head>
+  <body>
+    <script src="../../yab-fetch//dist/yab-fetch.min.js"></script>
+    <script src="../dist/yab-fetch-logger.min.js"></script>
+  </body>
+</html>

packages/yab-fetch-logger/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'ts-jest'
+};

packages/yab-fetch-logger/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "yab-fetch-logger",
+  "version": "0.0.1-alpha.1",
+  "description": "",
+  "homepage": "https://github.com/mjolnirjs/yab/tree/master/packages/yab-fetch-logger#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mjolnirjs/yab.git"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && npm run build:es && npm run build:lib && npm run build:dist",
+    "build:es": "tsc -p ./tsconfig.es.json",
+    "build:lib": "tsc -p ./tsconfig.lib.json",
+    "build:dist": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.dist.js",
+    "lint": "eslint src --ext ts"
+  },
+  "main": "./dist/lib/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/types/index.d.ts",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
+    "cache-loader": "^3.0.1",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-prettier": "^3.1.0",
+    "fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
+    "fork-ts-checker-webpack-plugin": "^1.3.4",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "jest": "^24.8.0",
+    "prettier": "^1.17.1",
+    "rimraf": "^2.6.3",
+    "terser-webpack-plugin": "^1.3.0",
+    "ts-jest": "^24.0.2",
+    "ts-loader": "^6.0.3",
+    "typescript": "^3.5.2",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-merge": "^4.2.1",
+    "whatwg-fetch": "^3.0.0",
+    "yab-fetch": "^0.0.1-alpha.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://github.com/mjolnirjs/yab/issues"
+  }
+}