stonexer · leohxj · Jul 25, 2019 · Jul 26, 2019 · Jul 26, 2019 · Jul 26, 2019
diff --git a/packages/yab-fetch-middleware-log/.eslintignore b/packages/yab-fetch-middleware-log/.eslintignore
@@ -0,0 +1,2 @@
+dist
+config
diff --git a/packages/yab-fetch-middleware-log/.eslintrc.js b/packages/yab-fetch-middleware-log/.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',
+  },
+};
diff --git a/packages/yab-fetch-middleware-log/.gitignore b/packages/yab-fetch-middleware-log/.gitignore
@@ -0,0 +1,7 @@
+*.log
+.DS_Store
+node_modules
+.rts2_cache_cjs
+.rts2_cache_esm
+.rts2_cache_umd
+dist
diff --git a/packages/yab-fetch-middleware-log/README.md b/packages/yab-fetch-middleware-log/README.md
@@ -0,0 +1,24 @@
+# yab-fetch-middleware-log
+
+## Install
+
+`npm i yab-fetch-middleware`
+
+## Useage
+
+```ts
+import { createFetch } from 'yab-fetch';
+import { createLogger } from 'yab-fetch-middleware-logger';
+
+const logger = createLogger({
+  // options
+});
+
+const request = createFetch({
+  middleware: [logger],
+});
+```
+
+## Example
+
+![example](assets/log-example.png)
diff --git a/packages/yab-fetch-middleware-log/assets/log-example.png b/packages/yab-fetch-middleware-log/assets/log-example.png
diff --git a/packages/yab-fetch-middleware-log/example/index.html b/packages/yab-fetch-middleware-log/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-middleware-log.umd.production.min.js"></script>
+  </body>
+</html>
diff --git a/packages/yab-fetch-middleware-log/package.json b/packages/yab-fetch-middleware-log/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "yab-fetch-middleware-log",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "module": "dist/yab-fetch-middleware-log.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build --format umd, cjs, esm",
+    "lint": "eslint --ext .ts src/"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.15",
+    "@typescript-eslint/eslint-plugin": "^1.12.0",
+    "@typescript-eslint/parser": "^1.12.0",
+    "eslint": "5.3.0",
+    "eslint-config-airbnb-base": "13.2.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-loader": "^2.2.1",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.2",
+    "husky": "^3.0.1",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.1",
+    "tsdx": "^0.7.2",
+    "tslib": "^1.10.0",
+    "typescript": "^3.5.3",
+    "yab-fetch": "^0.0.0"
+  }
+}
diff --git a/packages/yab-fetch-middleware-log/src/index.ts b/packages/yab-fetch-middleware-log/src/index.ts
@@ -0,0 +1,41 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { IYabFetchContext, YabFetchMiddleware } from 'yab-fetch';
+import { Options, Logger } from './type';
+import { logBeforeFetch, logAfterFetch, logError } from './logHelper';
+
+export const createLogger = (options?: Options): YabFetchMiddleware => {
+  const { collapsed = true } = options || {};
+
+  const { log, error, groupCollapsed, group, groupEnd } = console;
+
+  const logger: Logger = {
+    log,
+    group: collapsed ? groupCollapsed : group,
+    groupEnd,
+    error,
+  };
+
+  return async (ctx: IYabFetchContext, next: () => Promise<unknown>) => {
+    const {
+      yabRequestInit: { url, method },
+    } = ctx;
+
+    logger.group(
+      `📖 yab: %c${method} %c${url} %c@ ${new Date()}`,
+      'color: #6f42c1;font-size: 14px;',
+      'color: #005cc5;font-size: 14px;',
+      'color: #666'
+    );
+
+    logBeforeFetch(logger, ctx);
+
+    try {
+      await next();
+      logAfterFetch(logger, ctx);
+    } catch (e) {
+      logError(logger, e);
+    } finally {
+      logger.groupEnd();
+    }
+  };
+};
diff --git a/packages/yab-fetch-middleware-log/src/logHelper.ts b/packages/yab-fetch-middleware-log/src/logHelper.ts
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { IYabFetchContext } from 'yab-fetch';
+import { Logger } from './type';
+
+export const logBeforeFetch = (logger: Logger, ctx: IYabFetchContext): void => {
+  const {
+    yabRequestInit,
+    yabRequestInit: { url, method, data },
+  } = ctx;
+  logger.group('%cbefore fetch', 'color: #33b9f9');
+  logger.log('yabRequestInit:', yabRequestInit);
+  logger.log('url:', url);
+  logger.log('method:', method);
+  if (method === 'post') logger.log('data:', data);
+  logger.groupEnd();
+};
+
+export const logAfterFetch = (logger: Logger, ctx: IYabFetchContext): void => {
+  const { response } = ctx;
+  logger.group('%cafter fetch', 'color:#61bb64');
+  logger.log('response:', response);
+  logger.log('ctx:', ctx);
+  logger.groupEnd();
+};
+
+export const logError = (logger: Logger, err: Error) => {
+  logger.error(`Something wrong with fetch: ${err}`);
+};
diff --git a/packages/yab-fetch-middleware-log/src/type.ts b/packages/yab-fetch-middleware-log/src/type.ts
@@ -0,0 +1,10 @@
+export interface Options {
+  collapsed: boolean;
+}
+
+export interface Logger {
+  log(message?: any, ...optionalParams: any[]): void;
+  group(...label: any[]): void;
+  groupEnd(...label: any[]): void;
+  error(message?: any, ...optionalParams: any[]): void;
+}
diff --git a/packages/yab-fetch-middleware-log/tsconfig.json b/packages/yab-fetch-middleware-log/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}