mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-06 11:25:52 +00:00
c7c8a605c2
- Remove old custom ANSI renderer (src/client/renderer.ts) - Rename XTermRenderer to Renderer and move to renderer.ts - Update renderer-entry.ts to export single Renderer class - Rename and update all test files: - test-xterm-renderer.html → test-renderer.html - simple-xterm-test.html → simple-test.html - debug-xterm.html → debug-renderer.html - Remove obsolete custom renderer tests - Update tests/index.html with new test descriptions - All tests now use single XTerm.js-based Renderer 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
214 lines
No EOL
7.4 KiB
HTML
214 lines
No EOL
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple XTerm Renderer Test</title>
|
|
|
|
<!-- XTerm.js CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" />
|
|
|
|
<style>
|
|
body {
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
margin: 20px;
|
|
}
|
|
|
|
.terminal {
|
|
border: 2px solid #333;
|
|
border-radius: 8px;
|
|
background: #000;
|
|
height: 400px;
|
|
width: 800px;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.controls {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
button {
|
|
background: #333;
|
|
color: #fff;
|
|
border: 1px solid #555;
|
|
padding: 8px 16px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button:hover {
|
|
background: #444;
|
|
}
|
|
|
|
.comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.comparison .terminal {
|
|
width: 100%;
|
|
}
|
|
|
|
h2 {
|
|
color: #4CAF50;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Simple XTerm Renderer Test</h1>
|
|
|
|
<div class="controls">
|
|
<button onclick="testBasic()">Test Basic Colors</button>
|
|
<button onclick="testAdvanced()">Test Advanced Features</button>
|
|
<button onclick="testScrollback()">Test Scrollback</button>
|
|
<button onclick="testPerformance()">Test Performance</button>
|
|
<button onclick="clearTerminals()">Clear All</button>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div>
|
|
<h2>Custom Renderer</h2>
|
|
<div class="terminal" id="custom-terminal"></div>
|
|
</div>
|
|
<div>
|
|
<h2>XTerm.js Renderer</h2>
|
|
<div class="terminal" id="xterm-terminal"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="debug" style="margin-top: 20px; background: #333; padding: 10px; border-radius: 4px;">
|
|
<h3>Performance Comparison:</h3>
|
|
<pre id="debugText">Run performance test to see timing comparison</pre>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { Renderer } from '../bundle/renderer.js';
|
|
|
|
const terminal1 = new Renderer(document.getElementById('custom-terminal'), 80, 20);
|
|
const terminal2 = new Renderer(document.getElementById('xterm-terminal'), 80, 20);
|
|
|
|
function runOnBoth(callback) {
|
|
callback(terminal1, 'Terminal 1');
|
|
callback(terminal2, 'Terminal 2');
|
|
}
|
|
|
|
window.testBasic = function() {
|
|
console.log('Testing basic colors...');
|
|
|
|
runOnBoth((terminal, name) => {
|
|
terminal.clear();
|
|
|
|
const tests = [
|
|
`${name} Renderer Test\n`,
|
|
'\x1b[31mRed Text\x1b[0m\n',
|
|
'\x1b[32mGreen Text\x1b[0m\n',
|
|
'\x1b[1;33mBold Yellow\x1b[0m\n',
|
|
'\x1b[4;34mUnderline Blue\x1b[0m\n',
|
|
'\x1b[1;31m[001]\x1b[0m Test line 1\n',
|
|
'\x1b[1;32m[002]\x1b[0m Test line 2\n'
|
|
];
|
|
|
|
tests.forEach(test => terminal.processOutput(test));
|
|
});
|
|
};
|
|
|
|
window.testAdvanced = function() {
|
|
console.log('Testing advanced features...');
|
|
|
|
runOnBoth((terminal, name) => {
|
|
terminal.clear();
|
|
|
|
const tests = [
|
|
`${name} Advanced Features\n`,
|
|
'\x1b[38;2;255;100;50mRGB Orange\x1b[0m\n',
|
|
'\x1b[38;2;100;255;100mRGB Lime\x1b[0m\n',
|
|
'\x1b[38;5;196m256-color Red\x1b[0m\n',
|
|
'\x1b[38;5;46m256-color Green\x1b[0m\n',
|
|
'\x1b[1;3;4mBold Italic Underline\x1b[0m\n',
|
|
'\x1b[7mInverse Video\x1b[0m\n',
|
|
'\x1b[9mStrikethrough\x1b[0m\n',
|
|
'Unicode: 🚀 ✨ 🎉 ♦ ♠ ♥ ♣\n',
|
|
'Box: ┌─┬─┐ │ │ │ ├─┼─┤\n'
|
|
];
|
|
|
|
tests.forEach(test => terminal.processOutput(test));
|
|
});
|
|
};
|
|
|
|
window.testScrollback = function() {
|
|
console.log('Testing scrollback...');
|
|
|
|
runOnBoth((terminal, name) => {
|
|
terminal.clear();
|
|
|
|
for (let i = 1; i <= 30; i++) {
|
|
const color = 31 + (i % 6);
|
|
const line = `\x1b[1;${color}m[${i.toString().padStart(3, '0')}]\x1b[0m ${name} Line ${i}\n`;
|
|
terminal.processOutput(line);
|
|
}
|
|
});
|
|
};
|
|
|
|
window.testPerformance = function() {
|
|
console.log('Testing performance...');
|
|
|
|
const results = {};
|
|
|
|
// Test terminal 1
|
|
const terminal1Start = performance.now();
|
|
terminal1.clear();
|
|
for (let i = 1; i <= 1000; i++) {
|
|
const color = 31 + (i % 6);
|
|
const line = `\x1b[1;${color}m[${i.toString().padStart(4, '0')}]\x1b[0m Performance test line ${i} with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m\n`;
|
|
terminal1.processOutput(line);
|
|
}
|
|
const terminal1End = performance.now();
|
|
results.terminal1 = terminal1End - terminal1Start;
|
|
|
|
// Test terminal 2
|
|
const terminal2Start = performance.now();
|
|
terminal2.clear();
|
|
for (let i = 1; i <= 1000; i++) {
|
|
const color = 31 + (i % 6);
|
|
const line = `\x1b[1;${color}m[${i.toString().padStart(4, '0')}]\x1b[0m Performance test line ${i} with \x1b[4munderline\x1b[0m and \x1b[1mbold\x1b[0m\n`;
|
|
terminal2.processOutput(line);
|
|
}
|
|
const terminal2End = performance.now();
|
|
results.terminal2 = terminal2End - terminal2Start;
|
|
|
|
// Display results
|
|
const debugEl = document.getElementById('debugText');
|
|
const comparison = {
|
|
'Terminal 1': `${results.terminal1.toFixed(2)}ms`,
|
|
'Terminal 2': `${results.terminal2.toFixed(2)}ms`,
|
|
'Performance Ratio': `${(results.terminal1 / results.terminal2).toFixed(2)}x`,
|
|
'Winner': results.terminal2 < results.terminal1 ? 'Terminal 2' : 'Terminal 1',
|
|
'Lines Processed': '1000 lines each',
|
|
'Test Date': new Date().toLocaleString()
|
|
};
|
|
|
|
debugEl.textContent = JSON.stringify(comparison, null, 2);
|
|
};
|
|
|
|
window.clearTerminals = function() {
|
|
terminal1.clear();
|
|
terminal2.clear();
|
|
|
|
const debugEl = document.getElementById('debugText');
|
|
debugEl.textContent = 'Terminals cleared. Run tests to see comparison.';
|
|
};
|
|
|
|
// Initial test
|
|
setTimeout(() => {
|
|
console.log('Running initial comparison...');
|
|
testBasic();
|
|
}, 100);
|
|
</script>
|
|
</body>
|
|
</html> |