@eggjs/development 5.0.2-beta.1 → 5.0.2-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { isTimingFile } from "../../utils.js";
|
|
2
|
+
import { LOADER_TRACE_TEMPLATE } from "./loader_trace_template.js";
|
|
2
3
|
import fs from "node:fs/promises";
|
|
3
4
|
import path from "node:path";
|
|
4
5
|
import { readJSON } from "utility";
|
|
@@ -7,12 +8,13 @@ import { readJSON } from "utility";
|
|
|
7
8
|
function createEggLoaderTraceMiddleware(_options, app) {
|
|
8
9
|
return async (ctx, next) => {
|
|
9
10
|
if (ctx.path !== "/__loader_trace__") return await next();
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
const data = await loadTimingData(app);
|
|
13
|
-
ctx.body = template.replace("{{placeholder}}", JSON.stringify(data));
|
|
11
|
+
const serializedData = serializeLoaderTraceData(await loadTimingData(app));
|
|
12
|
+
ctx.body = LOADER_TRACE_TEMPLATE.replace("{{placeholder}}", () => serializedData);
|
|
14
13
|
};
|
|
15
14
|
}
|
|
15
|
+
function serializeLoaderTraceData(data) {
|
|
16
|
+
return JSON.stringify(data).replace(/</g, "\\u003C").replace(/>/g, "\\u003E").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
|
|
17
|
+
}
|
|
16
18
|
async function loadTimingData(app) {
|
|
17
19
|
const rundir = app.config.rundir;
|
|
18
20
|
const files = await fs.readdir(rundir);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
//#region src/app/middleware/loader_trace_template.d.ts
|
|
2
|
+
/** Loader trace visualization template inlined for static bundlers. */
|
|
3
|
+
declare const LOADER_TRACE_TEMPLATE = "<!doctype html>\n<html lang=\"en\">\n <head>\n <title></title>\n </head>\n <body>\n <div id=\"mountNode\"></div>\n <script src=\"https://gw.alipayobjects.com/os/antv/assets/g2/3.0.9/g2.min.js\"><\/script>\n <script>\n const data = {{placeholder}};\n\n const chart = new G2.Chart({\n container: 'mountNode', // 指定图表容器 ID\n height: data.length * 22, // 指定图表高度\n forceFit: true,\n padding: 'auto',\n });\n\n // Step 2: 载入数据源\n chart.source(data, {\n range: {\n type: 'time',\n mask: 'HH:mm:ss',\n nice: true,\n },\n });\n chart\n .coord()\n .transpose()\n .scale(1, -1);\n\n chart.legend({ position: 'top' });\n\n chart.tooltip({\n showTitle: false,\n itemTpl: '<li>{duration}ms: {name} </li>'\n });\n\n chart\n .interval()\n .position('title*range')\n .color('type')\n .tooltip('name*duration', (name, duration) => ({ name, duration }))\n .size(5);\n\n chart.render();\n <\/script>\n </body>\n</html>\n";
|
|
4
|
+
//#endregion
|
|
5
|
+
export { LOADER_TRACE_TEMPLATE };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
//#region src/app/middleware/loader_trace_template.ts
|
|
2
|
+
/** Loader trace visualization template inlined for static bundlers. */
|
|
3
|
+
const LOADER_TRACE_TEMPLATE = `<!doctype html>
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<title></title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="mountNode"></div>
|
|
10
|
+
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.9/g2.min.js"><\/script>
|
|
11
|
+
<script>
|
|
12
|
+
const data = {{placeholder}};
|
|
13
|
+
|
|
14
|
+
const chart = new G2.Chart({
|
|
15
|
+
container: 'mountNode', // 指定图表容器 ID
|
|
16
|
+
height: data.length * 22, // 指定图表高度
|
|
17
|
+
forceFit: true,
|
|
18
|
+
padding: 'auto',
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// Step 2: 载入数据源
|
|
22
|
+
chart.source(data, {
|
|
23
|
+
range: {
|
|
24
|
+
type: 'time',
|
|
25
|
+
mask: 'HH:mm:ss',
|
|
26
|
+
nice: true,
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
chart
|
|
30
|
+
.coord()
|
|
31
|
+
.transpose()
|
|
32
|
+
.scale(1, -1);
|
|
33
|
+
|
|
34
|
+
chart.legend({ position: 'top' });
|
|
35
|
+
|
|
36
|
+
chart.tooltip({
|
|
37
|
+
showTitle: false,
|
|
38
|
+
itemTpl: '<li>{duration}ms: {name} </li>'
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
chart
|
|
42
|
+
.interval()
|
|
43
|
+
.position('title*range')
|
|
44
|
+
.color('type')
|
|
45
|
+
.tooltip('name*duration', (name, duration) => ({ name, duration }))
|
|
46
|
+
.size(5);
|
|
47
|
+
|
|
48
|
+
chart.render();
|
|
49
|
+
<\/script>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
52
|
+
`;
|
|
53
|
+
|
|
54
|
+
//#endregion
|
|
55
|
+
export { LOADER_TRACE_TEMPLATE };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eggjs/development",
|
|
3
|
-
"version": "5.0.2-beta.
|
|
3
|
+
"version": "5.0.2-beta.10",
|
|
4
4
|
"description": "development tool for egg",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"egg",
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"./agent": "./dist/agent.js",
|
|
30
30
|
"./app": "./dist/app.js",
|
|
31
31
|
"./app/middleware/egg_loader_trace": "./dist/app/middleware/egg_loader_trace.js",
|
|
32
|
+
"./app/middleware/loader_trace_template": "./dist/app/middleware/loader_trace_template.js",
|
|
32
33
|
"./config/config.default": "./dist/config/config.default.js",
|
|
33
34
|
"./types": "./dist/types.js",
|
|
34
35
|
"./utils": "./dist/utils.js",
|
|
@@ -44,12 +45,12 @@
|
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"typescript": "^5.9.3",
|
|
47
|
-
"@eggjs/mock": "7.0.2-beta.
|
|
48
|
-
"@eggjs/supertest": "9.0.2-beta.
|
|
49
|
-
"egg": "4.1.2-beta.
|
|
48
|
+
"@eggjs/mock": "7.0.2-beta.10",
|
|
49
|
+
"@eggjs/supertest": "9.0.2-beta.10",
|
|
50
|
+
"egg": "4.1.2-beta.10"
|
|
50
51
|
},
|
|
51
52
|
"peerDependencies": {
|
|
52
|
-
"egg": "4.1.2-beta.
|
|
53
|
+
"egg": "4.1.2-beta.10"
|
|
53
54
|
},
|
|
54
55
|
"engines": {
|
|
55
56
|
"node": ">=22.18.0"
|