lieko-metrics 0.0.2 → 0.0.4

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.
Files changed (2) hide show
  1. package/package.json +6 -5
  2. package/test-page.html +180 -0
package/package.json CHANGED
@@ -1,17 +1,18 @@
1
1
  {
2
2
  "name": "lieko-metrics",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "Super simple performance metrics helper • start/stop markers • nice console logs • avg/min/max stats • human durations (µs/ms/s/m) • zero dependencies",
5
5
  "main": "lieko-metrics.js",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
8
8
  },
9
- "keywords": [],
10
- "author": "",
11
- "license": "ISC",
9
+ "keywords": ["metrics", "performance", "tool", "duration"],
10
+ "author": "EiwSrvt eiwsrvt@gmail.com",
11
+ "license": "MIT",
12
12
  "type": "commonjs",
13
13
  "files": [
14
14
  "lieko-metrics.js",
15
- "README.md"
15
+ "README.md",
16
+ "test-page.html"
16
17
  ]
17
18
  }
package/test-page.html ADDED
@@ -0,0 +1,180 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>LiekoMetrics - CDN Test</title>
8
+ <style>
9
+ body {
10
+ font-family: system-ui, -apple-system, sans-serif;
11
+ max-width: 900px;
12
+ margin: 40px auto;
13
+ padding: 0 20px;
14
+ line-height: 1.6;
15
+ background: #fafafa;
16
+ color: #222;
17
+ }
18
+
19
+ h1 {
20
+ color: #1a73e8;
21
+ }
22
+
23
+ button {
24
+ padding: 12px 24px;
25
+ font-size: 1.1rem;
26
+ margin: 8px 4px;
27
+ cursor: pointer;
28
+ border: none;
29
+ border-radius: 6px;
30
+ background: #1a73e8;
31
+ color: white;
32
+ transition: background 0.2s;
33
+ }
34
+
35
+ button:hover {
36
+ background: #1557b0;
37
+ }
38
+
39
+ button.clear {
40
+ background: #e74c3c;
41
+ }
42
+
43
+ button.clear:hover {
44
+ background: #c0392b;
45
+ }
46
+
47
+ #log {
48
+ background: #1e1e1e;
49
+ color: #e0ffe0;
50
+ font-family: 'Consolas', 'Courier New', monospace;
51
+ padding: 16px;
52
+ border-radius: 8px;
53
+ min-height: 220px;
54
+ margin-top: 20px;
55
+ white-space: pre-wrap;
56
+ overflow-y: auto;
57
+ max-height: 500px;
58
+ font-size: 0.96rem;
59
+ line-height: 1.45;
60
+ }
61
+
62
+ .section {
63
+ margin: 30px 0;
64
+ }
65
+ </style>
66
+ </head>
67
+
68
+ <body>
69
+
70
+ <h1>LiekoMetrics - CDN Test Page</h1>
71
+
72
+ <div class="section">
73
+ <button onclick="testSimple()">Simple test (100k loops)</button>
74
+ <button onclick="testMultiple()">10 consecutive measurements</button>
75
+ <button onclick="showSummary()">Show summary</button>
76
+ <button class="clear" onclick="clearMetrics()">Reset all</button>
77
+ </div>
78
+
79
+ <h3>Live performance logs:</h3>
80
+ <div id="log"></div>
81
+
82
+ <script src="https://cdn.jsdelivr.net/npm/lieko-metrics@latest"></script>
83
+
84
+ <script>
85
+ const perf = liekoPerf;
86
+ const logContainer = document.getElementById('log');
87
+
88
+ let isInSummary = false;
89
+
90
+ function addLogLine(message) {
91
+ const line = document.createElement('div');
92
+ line.style.marginBottom = '4px';
93
+ line.style.paddingLeft = '8px';
94
+ line.style.whiteSpace = 'pre';
95
+
96
+ if (message.includes('perf:')) {
97
+ line.style.color = '#4caf50';
98
+ line.style.fontWeight = '500';
99
+ }
100
+ else if (message.includes('Performance Summary')) {
101
+ line.style.color = '#ffeb3b';
102
+ line.style.fontWeight = 'bold';
103
+ line.style.marginTop = '16px';
104
+ line.style.marginBottom = '8px';
105
+ line.style.borderBottom = '1px solid #444';
106
+ line.style.paddingBottom = '6px';
107
+ isInSummary = true;
108
+ }
109
+ else if (message.includes('='.repeat(50))) {
110
+ line.style.color = '#555';
111
+ line.style.fontSize = '0.9em';
112
+ isInSummary = true;
113
+ }
114
+ else if (isInSummary && message.trim() !== '') {
115
+ line.style.color = '#b0e0ff';
116
+ line.style.fontFamily = 'Consolas, monospace';
117
+ }
118
+ else if (message.includes('cleared')) {
119
+ line.style.color = '#ff9800';
120
+ line.style.fontStyle = 'italic';
121
+ isInSummary = false;
122
+ }
123
+ else {
124
+ line.style.color = '#888';
125
+ }
126
+
127
+ line.textContent = message;
128
+ logContainer.appendChild(line);
129
+ logContainer.scrollTop = logContainer.scrollHeight;
130
+
131
+ if (isInSummary && message.includes('cleared') || message.trim() === '') {
132
+ isInSummary = false;
133
+ }
134
+ }
135
+
136
+ const originalConsoleLog = console.log;
137
+
138
+ console.log = function (...args) {
139
+ const msg = args.join(' ').trim();
140
+
141
+ if (msg.includes('perf:') ||
142
+ msg.includes('Performance Summary') ||
143
+ msg.includes('=') ||
144
+ isInSummary ||
145
+ msg.includes('cleared')) {
146
+ addLogLine(msg);
147
+ }
148
+ originalConsoleLog.apply(console, args);
149
+ };
150
+
151
+ function testSimple() {
152
+ perf.start('simple-loop');
153
+ let sum = 0;
154
+ for (let i = 0; i < 100000; i++) sum += Math.sqrt(i);
155
+ perf.stop('simple-loop');
156
+ }
157
+
158
+ function testMultiple() {
159
+ for (let i = 1; i <= 10; i++) {
160
+ perf.start('multi-run');
161
+ let x = 0;
162
+ for (let j = 0; j < 50000 * i; j++) x += Math.random();
163
+ perf.stop('multi-run');
164
+ }
165
+ }
166
+
167
+ function showSummary() {
168
+ perf.printSummary();
169
+ }
170
+
171
+ function clearMetrics() {
172
+ perf.clear();
173
+ setTimeout(() => {
174
+ logContainer.innerHTML = '';
175
+ }, 1200);
176
+ }
177
+ </script>
178
+ </body>
179
+
180
+ </html>