@midwayjs/code-dye 1.0.0

package/README.md

@@ -0,0 +1,45 @@
+## Code-Dye 代码染色组件
+
+适用于 `@midwayjs/faas` 、`@midwayjs/web` 、`@midwayjs/koa` 和 `@midwayjs/express` 多种框架的代码染色组件，清晰的展示调用链路耗时与各个方法的出入参，帮你更快地定位代码问题。
+![](https://gw.alicdn.com/imgextra/i1/O1CN017Zd6y628M2PvqJO7I_!!6000000007917-2-tps-2392-844.png)
+### Usage
+
+1. 安装依赖
+```shell
+tnpm i @midwayjs/code-dye --save
+```
+2. 在 configuration 中引入组件,
+```ts
+import * as codeDye from '@midwayjs/code-dye';
+@Configuration({
+  imports: [
+    // ...other components
+    codeDye
+  ],
+})
+export class AutoConfiguration {}
+```
+
+3. 请求你的接口，添加配置的 header 或 query 进入染色链路
+
+例如，配置为：
+```ts
+// src/config/config.default.ts
+export const codeDye = {
+  matchQueryKey: 'codeDyeABC',
+}
+```
+然后请求你的接口，例如：http://127.0.0.1:7001/test?codeDyeABC=html
+
+### 配置
+```ts
+export const codeDye = {
+  // 是否启用
+  enable: boolean;
+  // 匹配到对应的 header key时，进行代码染色，值可以为 html、json、log
+  matchHeaderKey: string;
+  // 匹配到对应的 query key时，进行代码染色
+  // 例如 http://127.0.0.1:7001/test?codeDye=html
+  matchQueryKey: string;
+}
+```

package/dist/codeDye.d.ts

@@ -0,0 +1,2 @@
+export declare const codeDye: (variable: any, paths: any) => any;
+//# sourceMappingURL=codeDye.d.ts.map

package/dist/codeDye.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeDye = void 0;
+const reqInfo_1 = require("./reqInfo");
+const copyObject = (obj, paths) => {
+    const properties = Object.getOwnPropertyNames(obj);
+    properties.forEach(property => {
+        if (property === 'constructor') {
+            return;
+        }
+        const propertyInfo = Object.getOwnPropertyDescriptor(obj, property);
+        if (!propertyInfo.configurable) {
+            // skip un configurable
+            return;
+        }
+        let isCanDefine = false;
+        if (propertyInfo.get) {
+            propertyInfo.get = (0, exports.codeDye)(propertyInfo.get, paths.concat('[prototype get] ' + property));
+            isCanDefine = true;
+        }
+        if (propertyInfo.set) {
+            propertyInfo.set = (0, exports.codeDye)(propertyInfo.set, paths.concat('[prototype set] ' + property));
+            isCanDefine = true;
+        }
+        if (propertyInfo.value) {
+            propertyInfo.value = (0, exports.codeDye)(propertyInfo.value, paths);
+            isCanDefine = true;
+        }
+        if (isCanDefine) {
+            Object.defineProperty(obj, property, propertyInfo);
+        }
+    });
+};
+const codeDyeAFuncWrapper = function (func, paths) {
+    return async function (...args) {
+        const info = (0, reqInfo_1.getAsyncInfo)();
+        const newInfo = {
+            codeDyeParent: info.codeDyeParent,
+        };
+        newInfo.call = [];
+        const id = (0, reqInfo_1.genId)();
+        newInfo.id = id;
+        newInfo.paths = paths;
+        newInfo.start = {
+            time: Date.now(),
+            args: args,
+        };
+        if (info.codeDyeParent && info.codeDyeParent.call) {
+            info.codeDyeParent.call.push(newInfo);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const _this = this;
+        const res = await (0, reqInfo_1.asyncRunWrapper)(info.codeDyeConfig, newInfo, async () => {
+            return func.call(_this, ...args);
+        });
+        newInfo.end = {
+            time: Date.now(),
+            result: res,
+        };
+        return res;
+    };
+};
+const codeDyeFuncWrapper = function (func, paths) {
+    return function (...args) {
+        const info = (0, reqInfo_1.getAsyncInfo)();
+        const newInfo = {
+            codeDyeParent: info.codeDyeParent,
+        };
+        newInfo.call = [];
+        const id = (0, reqInfo_1.genId)();
+        newInfo.id = id;
+        newInfo.paths = paths;
+        newInfo.start = {
+            time: Date.now(),
+            args: args,
+        };
+        if (info.codeDyeParent && info.codeDyeParent.call) {
+            info.codeDyeParent.call.push(newInfo);
+        }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const _this = this;
+        const res = (0, reqInfo_1.asyncRunWrapper)(info.codeDyeConfig, newInfo, () => {
+            return func.call(_this, ...args);
+        });
+        newInfo.end = {
+            time: Date.now(),
+            result: res,
+        };
+        return res;
+    };
+};
+const codeDye = (variable, paths) => {
+    if (!paths) {
+        paths = [];
+    }
+    if (paths[0] === __filename) {
+        return variable;
+    }
+    const type = {}.toString.call(variable).slice(8, -1).toLowerCase();
+    switch (type) {
+        case 'object':
+            copyObject(variable, paths);
+            return variable;
+        case 'array':
+            return variable.map((variable, index) => {
+                return (0, exports.codeDye)(variable, paths.concat('[index]' + index));
+            });
+        case 'function':
+            if (variable.toString().startsWith('class ')) {
+                // class
+                copyObject(variable.prototype, paths.concat(`[class] ${variable.name}`));
+                return variable;
+            }
+            return codeDyeFuncWrapper(variable, paths.concat('[func] ' + variable.name));
+        case 'asyncfunction':
+            return codeDyeAFuncWrapper(variable, paths.concat('[async func] ' + variable.name));
+    }
+    return variable;
+};
+exports.codeDye = codeDye;
+//# sourceMappingURL=codeDye.js.map

package/dist/config/config.default.d.ts

@@ -0,0 +1,3 @@
+import { CodeDyeOptions } from '../interface';
+export declare const codeDye: Partial<CodeDyeOptions>;
+//# sourceMappingURL=config.default.d.ts.map

package/dist/config/config.default.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeDye = void 0;
+exports.codeDye = {
+    enable: true,
+    matchHeaderKey: 'codeDye',
+    matchQueryKey: 'codeDye',
+};
+//# sourceMappingURL=config.default.js.map

package/dist/configuration.d.ts

@@ -0,0 +1,7 @@
+import { MidwayApplicationManager } from '@midwayjs/core';
+export declare class CodeDyeConfiguration {
+    applicationManager: MidwayApplicationManager;
+    codeDye: any;
+    onReady(container: any): Promise<void>;
+}
+//# sourceMappingURL=configuration.d.ts.map

package/dist/configuration.js

@@ -0,0 +1,57 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeDyeConfiguration = void 0;
+const decorator_1 = require("@midwayjs/decorator");
+const DefaultConfig = require("./config/config.default");
+const core_1 = require("@midwayjs/core");
+const middleware_1 = require("./middleware");
+const codeDye_1 = require("./codeDye");
+let CodeDyeConfiguration = class CodeDyeConfiguration {
+    async onReady(container) {
+        if (!this.codeDye.enable) {
+            return;
+        }
+        this.applicationManager
+            .getApplications(['koa', 'faas', 'express', 'egg'])
+            .forEach(app => {
+            app.getMiddleware().insertFirst(middleware_1.CodeDyeMW);
+        });
+        // 将ioc内的代码进行包裹
+        for (const [key, value] of container.registry) {
+            if (!(value === null || value === void 0 ? void 0 : value.path) || !value.srcPath) {
+                continue;
+            }
+            value.path = (0, codeDye_1.codeDye)(value.path, [value.srcPath || key]);
+            container.registry[key] = value;
+        }
+    }
+};
+__decorate([
+    (0, decorator_1.Inject)(),
+    __metadata("design:type", core_1.MidwayApplicationManager)
+], CodeDyeConfiguration.prototype, "applicationManager", void 0);
+__decorate([
+    (0, decorator_1.Config)(),
+    __metadata("design:type", Object)
+], CodeDyeConfiguration.prototype, "codeDye", void 0);
+CodeDyeConfiguration = __decorate([
+    (0, decorator_1.Configuration)({
+        namespace: 'code-dye',
+        importConfigs: [
+            {
+                default: DefaultConfig,
+            },
+        ],
+    })
+], CodeDyeConfiguration);
+exports.CodeDyeConfiguration = CodeDyeConfiguration;
+//# sourceMappingURL=configuration.js.map

package/dist/html.d.ts

@@ -0,0 +1,3 @@
+export declare const foreach: (info: any, start: any, pi: any, level: any) => string;
+export declare const toHTML: (info: any) => string;
+//# sourceMappingURL=html.d.ts.map

package/dist/html.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toHTML = exports.foreach = void 0;
+const foreach = (info, start, pi, level) => {
+    const timeUse = info.end.time - info.start.time;
+    const timeDiff = info.start.time - start;
+    const paths = info.paths.filter(path => {
+        return !path.startsWith('/');
+    });
+    return `
+    <div class="item">
+      <div class="info" style="padding-left: ${(level - 1) * 24}px">
+        <div class="infoText">${paths.join(' / ')}</div>
+        <div class="moreInfo">
+          <div class="infoBtn">入参<div class="infoCard"><pre>${JSON.stringify(info.start.args, null, 2)}</pre></div></div>
+          <div class="infoBtn">返回值<div class="infoCard"><pre>${JSON.stringify(info.end.result, null, 2)}</pre></div></div>
+        </div>
+      </div>
+      <div class="timeContainer">
+        <div class="time" style="width:${timeUse / pi}px;left: ${timeDiff / pi}px"><div class="timeValue">${timeUse} ms</div></div>
+      </div>
+      
+    </div>
+    <div class="child">
+      <div class="childLine" style="left: ${(level - 1) * 24 + 12}px"></div>
+      ${info.call
+        .map(info => {
+        return (0, exports.foreach)(info, start, pi, level + 1);
+    })
+        .join('')}
+      </div>
+  `;
+};
+exports.foreach = foreach;
+const toHTML = info => {
+    const timeDiff = info.end.time - info.start.time;
+    let pi = timeDiff / 600;
+    if (pi < 1) {
+        pi = 1;
+    }
+    return `
+  <title>Midway CodeDye</title>
+  <meta charset="utf-8" />
+  <style>
+  .item {
+    display: flex;
+    flex-wrap: nowrap;
+    height: 24px;
+  }
+  .info {
+    position: relative;
+    width: 360px;
+    box-sizing: border-box;
+    border-right: 1px solid #eee;
+    height: 24px;
+    padding: 0 12px;
+    padding-right: 60px;
+  }
+  .infoText {
+    height: 24px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 24px;
+    white-space: nowrap;
+  }
+  .moreInfo {
+    position: absolute;
+    right: 6px;
+    top: 0;
+    display: flex;
+  }
+  .timeContainer {
+    position: relative;
+    margin-left: 12px;
+    height: 24px;
+  }
+  .time {
+    position: absolute;
+    height: 16px;
+    min-width: 12px;
+    background-color: #66c;
+    border-radius: 3px;
+  }
+  
+  .timeValue {
+    position: absolute;
+    line-height: 16px;
+    top: 0;
+    right: 0;
+    transform: translate(110%, 0);
+    white-space: nowrap;
+  }
+  .infoBtn {
+    position: relative;
+    cursor: pointer;
+    margin-left: 6px;
+    border-radius: 3px;
+    background: #eee;
+    padding: 2px;
+    line-height: 14px;
+    font-size: 12px;
+  }
+  .infoBtn:hover .infoCard {
+    display: block;
+  }
+  .infoCard {
+    display: none;
+    position: absolute;
+    background: #eee;
+    z-index: 3;
+    padding: 12px;
+  }
+  .child {
+    position: relative;
+  }
+  .childLine {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 2px;
+    border-radius: 3px;
+    background: #ccc;
+  }
+  </style>
+  <h1>Midway CodeDye</h1><hr />
+  <div>调用链路总耗时 ${timeDiff}ms<div>
+  <div>调用结果:<br /><pre>${JSON.stringify(info.end.result, null, 2)}</pre></div>
+  <hr />
+  <div style="padding: 12px;">
+  ${(0, exports.foreach)(info, info.start.time, pi, 1)}</div>
+  <hr /><a href="https://www.midwayjs.org/">Powered by Midway.js</a>
+  `;
+};
+exports.toHTML = toHTML;
+//# sourceMappingURL=html.js.map

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { CodeDyeConfiguration as Configuration } from './configuration';
+export * from './middleware';
+export * from './interface';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Configuration = void 0;
+var configuration_1 = require("./configuration");
+Object.defineProperty(exports, "Configuration", { enumerable: true, get: function () { return configuration_1.CodeDyeConfiguration; } });
+__exportStar(require("./middleware"), exports);
+__exportStar(require("./interface"), exports);
+//# sourceMappingURL=index.js.map

package/dist/interface.d.ts

@@ -0,0 +1,6 @@
+export interface CodeDyeOptions {
+    enable: boolean;
+    matchHeaderKey: string;
+    matchQueryKey: string;
+}
+//# sourceMappingURL=interface.d.ts.map

package/dist/interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=interface.js.map

package/dist/middleware.d.ts

@@ -0,0 +1,8 @@
+import { CodeDyeOptions } from './interface';
+export declare class CodeDyeMW {
+    codeDye: CodeDyeOptions;
+    resolve(app: any): (req: any, res: any, next: any) => Promise<any>;
+    check(request: any): any;
+    compatibleMiddleware(request: any, response: any, next: any): Promise<any>;
+}
+//# sourceMappingURL=middleware.d.ts.map

package/dist/middleware.js

@@ -0,0 +1,82 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeDyeMW = void 0;
+const decorator_1 = require("@midwayjs/decorator");
+const html_1 = require("./html");
+const reqInfo_1 = require("./reqInfo");
+let CodeDyeMW = class CodeDyeMW {
+    resolve(app) {
+        if (app.getFrameworkType() === decorator_1.MidwayFrameworkType.WEB_EXPRESS) {
+            return async (req, res, next) => {
+                return this.compatibleMiddleware(req, res, next);
+            };
+        }
+        else {
+            return async (ctx, next) => {
+                return this.compatibleMiddleware(ctx.request, ctx, next);
+            };
+        }
+    }
+    check(request) {
+        let outputType;
+        if (this.codeDye.matchQueryKey &&
+            request.query[this.codeDye.matchQueryKey]) {
+            outputType = request.query[this.codeDye.matchQueryKey];
+        }
+        else if (this.codeDye.matchHeaderKey &&
+            request.headers[this.codeDye.matchHeaderKey]) {
+            outputType = request.headers[this.codeDye.matchQueryKey];
+        }
+        if (!outputType) {
+            return false;
+        }
+        return outputType;
+    }
+    async compatibleMiddleware(request, response, next) {
+        const reqInfo = {
+            call: [],
+        };
+        const outputType = this.check(request);
+        if (!outputType) {
+            return next();
+        }
+        return (0, reqInfo_1.asyncRunWrapper)(this.codeDye, reqInfo, async () => {
+            const res = await next();
+            const reqInfoJSON = JSON.stringify(reqInfo, (key, value) => {
+                if (key === 'codeDyeConfig' || key === 'codeDyeParent') {
+                    return;
+                }
+                return value;
+            }, 0);
+            if (outputType === 'log') {
+                console.log(reqInfoJSON);
+            }
+            else if (outputType === 'html') {
+                response.set('Content-Type', 'text/html');
+                return (0, html_1.toHTML)(reqInfo.call[0]);
+            }
+            else if (outputType === 'json') {
+                return reqInfoJSON;
+            }
+            return res;
+        });
+    }
+};
+__decorate([
+    (0, decorator_1.Config)('codeDye'),
+    __metadata("design:type", Object)
+], CodeDyeMW.prototype, "codeDye", void 0);
+CodeDyeMW = __decorate([
+    (0, decorator_1.Middleware)()
+], CodeDyeMW);
+exports.CodeDyeMW = CodeDyeMW;
+//# sourceMappingURL=middleware.js.map

package/dist/reqInfo.d.ts

@@ -0,0 +1,5 @@
+export declare const genId: () => string;
+export declare const getAsyncLocalStoreage: () => any;
+export declare const getAsyncInfo: () => any;
+export declare const asyncRunWrapper: (codeDyeConfig: any, parentInfo: any, fun: any) => any;
+//# sourceMappingURL=reqInfo.d.ts.map

package/dist/reqInfo.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asyncRunWrapper = exports.getAsyncInfo = exports.getAsyncLocalStoreage = exports.genId = void 0;
+let asyncStorage;
+const asyncNotSupport = 'un';
+let index = 0;
+const genId = () => {
+    index++;
+    if (index > 100000000) {
+        index = 0;
+    }
+    return `${Date.now()}:${index}:${Math.ceil(Math.random() * 10000)}`;
+};
+exports.genId = genId;
+const getAsyncLocalStoreage = () => {
+    if (asyncStorage) {
+        return asyncStorage;
+    }
+    try {
+        const ALSClass = require('async_hooks').AsyncLocalStorage;
+        asyncStorage = new ALSClass();
+    }
+    catch (e) {
+        asyncStorage = asyncNotSupport;
+    }
+    return asyncStorage;
+};
+exports.getAsyncLocalStoreage = getAsyncLocalStoreage;
+const getAsyncInfo = () => {
+    const asyncStorage = (0, exports.getAsyncLocalStoreage)();
+    if (asyncStorage === asyncNotSupport) {
+        return {};
+    }
+    const info = asyncStorage.getStore();
+    return info || {};
+};
+exports.getAsyncInfo = getAsyncInfo;
+const asyncRunWrapper = (codeDyeConfig, parentInfo, fun) => {
+    const asyncStorage = (0, exports.getAsyncLocalStoreage)();
+    if (asyncStorage === asyncNotSupport) {
+        return fun();
+    }
+    return asyncStorage.run({
+        codeDyeConfig,
+        codeDyeParent: parentInfo,
+    }, () => {
+        return fun();
+    });
+};
+exports.asyncRunWrapper = asyncRunWrapper;
+//# sourceMappingURL=reqInfo.js.map

package/index.d.ts

@@ -0,0 +1,9 @@
+import { CORSOptions, JSONPOptions } from './dist/index';
+export * from './dist/index';
+
+declare module '@midwayjs/core/dist/interface' {
+  interface MidwayConfig {
+    cors?: Partial<CORSOptions>;
+    jsonp?: Partial<JSONPOptions>;
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@midwayjs/code-dye",
+  "version": "1.0.0",
+  "description": "Midway Code Dye Component",
+  "main": "dist/index.js",
+  "typings": "index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "node --require=ts-node/register ../../node_modules/.bin/jest --runInBand",
+    "cov": "node --require=ts-node/register ../../node_modules/.bin/jest --runInBand --coverage --forceExit",
+    "ci": "npm run test"
+  },
+  "keywords": [],
+  "author": "",
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "index.d.ts"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "license": "MIT",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@midwayjs/core": "^3.4.0-beta.2",
+    "@midwayjs/decorator": "^3.4.0-beta.2",
+    "@midwayjs/express": "^3.4.0-beta.2",
+    "@midwayjs/faas": "^3.4.0-beta.2",
+    "@midwayjs/koa": "^3.4.0-beta.2",
+    "@midwayjs/mock": "^3.4.0-beta.2",
+    "@midwayjs/serverless-app": "^3.4.0-beta.2",
+    "@midwayjs/web": "^3.4.0-beta.2"
+  }
+}