<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apex Formatter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 200px;
font-family: monospace;
font-size: 14px;
margin-bottom: 10px;
}
pre {
background-color: #f4f4f4;
padding: 10px;
white-space: pre-wrap;
word-wrap: break-word;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Salesforce Apex Formatter</h1>
<div id="status">WASM Status: Loading...</div>
<h3>Source Code:</h3>
<textarea id="source-code" placeholder="Enter your Apex source code here..."></textarea>
<button id="format-button">Format Code</button>
<h3>Formatted Code:</h3>
<pre id="formatted-code"></pre>
<script type="module">
async function initWasm() {
try {
const wasm = await import('./pkg/afmt.js');
await wasm.default();
document.getElementById('status').textContent = 'WASM Status: Loaded Successfully!';
document.getElementById('format-button').addEventListener('click', () => {
const source = document.getElementById('source-code').value;
try {
const formatted = wasm.greet(source);
document.getElementById('formatted-code').textContent = formatted;
} catch (e) {
document.getElementById('formatted-code').textContent = `Error: ${e}`;
console.error('Formatting failed:', e);
}
});
console.log('WASM module loaded and ready.');
} catch (error) {
document.getElementById('status').textContent = 'WASM Status: Failed to Load';
console.error('Failed to load WASM module:', error);
}
}
initWasm();
</script>
</body>
</html>