ton-assembly
Version:
TON assembler and disassembler
3 lines • 16.5 kB
TypeScript
export declare const MAIN_TEMPLATE = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Code Coverage Report</title>\n <style>\n :root {\n --covered-bg: #ddffdd;\n --uncovered-bg: #fffcdd;\n --covered-dark: #6bcc6b;\n --uncovered-dark: #ffcc00;\n --gas-color: #e60f0f;\n --hits-color: #0078d7;\n --line-color: #888;\n --line-bg: #f8f8f8;\n --line-border: #ddd;\n }\n\n body {\n font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n margin: 0;\n padding: 0;\n line-height: 1.5;\n }\n\n .summary {\n padding: 20px;\n border-bottom: 1px solid #eee;\n background-color: #fff;\n margin-bottom: 20px;\n }\n\n .summary h1 {\n margin-top: 0;\n margin-bottom: 20px;\n }\n\n .stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .stat-item {\n padding: 15px;\n background-color: #f9f9f9;\n border-radius: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n\n .stat-label {\n font-weight: bold;\n display: block;\n margin-bottom: 5px;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: 600;\n }\n\n .progress-bar {\n height: 8px;\n background-color: #eee;\n border-radius: 4px;\n overflow: hidden;\n margin-top: 10px;\n }\n\n .progress {\n height: 100%;\n background-color: var(--covered-dark);\n }\n\n .instructions-section {\n background-color: #f9f9f9;\n border-radius: 5px;\n padding: 15px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n\n .instructions-section h2 {\n margin-top: 0;\n margin-bottom: 0;\n font-size: 1.2rem;\n display: inline-block;\n }\n\n .toggle-icon {\n font-size: 0.8rem;\n vertical-align: middle;\n transition: transform 0.3s ease;\n }\n\n details[open] .toggle-icon {\n transform: rotate(180deg);\n }\n\n summary {\n cursor: pointer;\n user-select: none;\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n .instructions-content {\n margin-top: 15px;\n overflow-x: auto;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n thead th {\n text-align: left;\n padding: 8px;\n background-color: #f0f0f0;\n }\n\n tbody td {\n padding: 8px;\n border-top: 1px solid #eee;\n }\n\n .sortable {\n cursor: pointer;\n position: relative;\n padding-right: 20px;\n }\n\n .sort-icon {\n font-size: 0.8rem;\n margin-left: 5px;\n color: #aaa;\n }\n\n th.sort-asc .sort-icon::after {\n content: \"\u2191\";\n color: #333;\n }\n\n th.sort-desc .sort-icon::after {\n content: \"\u2193\";\n color: #333;\n }\n\n .percent-container {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .percent-bar {\n height: 8px;\n background-color: #eee;\n border-radius: 4px;\n overflow: hidden;\n }\n\n .percent-fill {\n height: 100%;\n background-color: var(--covered-dark);\n }\n\n code {\n font-family: monospace;\n font-size: 0.9rem;\n background-color: rgba(0, 0, 0, 0.05);\n padding: 2px 6px;\n border-radius: 3px;\n }\n\n .code-container {\n margin: 20px;\n border: 1px solid var(--line-border);\n border-radius: 5px;\n overflow: hidden;\n }\n\n .line {\n display: flex;\n align-items: stretch;\n padding: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n position: relative;\n }\n\n .line-number {\n width: 3rem;\n min-width: 3rem;\n text-align: right;\n color: var(--line-color);\n user-select: none;\n border-right: 1px solid var(--line-border);\n background-color: var(--line-bg);\n padding: 2px 10px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n font-family: monospace;\n font-size: 0.9rem;\n position: sticky;\n left: 0;\n z-index: 1;\n }\n\n .line pre {\n margin: 0;\n font-size: 0.9rem;\n padding: 2px 10px;\n flex-grow: 1;\n overflow-x: auto;\n }\n\n .line .gas {\n font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n text-align: right;\n color: var(--gas-color);\n width: 60px;\n min-width: 60px;\n padding: 0 5px;\n font-size: 0.85rem;\n background-color: rgba(0, 0, 0, 0.03);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n .line .hits {\n font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;\n text-align: center;\n color: var(--hits-color);\n width: 40px;\n min-width: 40px;\n font-size: 0.85rem;\n background-color: rgba(0, 0, 0, 0.03);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .Covered {\n background-color: var(--covered-bg);\n position: relative;\n overflow: hidden;\n }\n\n .Covered > pre::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--gas-percent, 0%);\n background-color: rgba(107, 204, 107, 0.4);\n z-index: 0;\n transition: width 0.3s ease;\n border-right: 1px dashed rgba(107, 204, 107, 0.8);\n }\n\n .Covered:hover::after {\n content: attr(data-gas-percent);\n position: absolute;\n right: 5px;\n top: 2px;\n font-size: 0.75rem;\n color: #555;\n background-color: rgba(255, 255, 255, 0.8);\n padding: 0 5px;\n border-radius: 2px;\n z-index: 2;\n }\n\n .line-number,\n .gas,\n .hits,\n .line pre {\n position: relative;\n z-index: 1;\n }\n\n .Uncovered {\n background-color: var(--uncovered-bg);\n }\n\n .Skipped {\n }\n\n a {\n color: #0078d7;\n text-decoration: none;\n }\n\n a:hover {\n text-decoration: underline;\n }\n\n .options {\n margin: 10px 20px;\n padding: 5px 0;\n border-bottom: 1px solid #eee;\n }\n\n .option-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n margin-right: 20px;\n }\n\n .option-checkbox {\n margin-right: 5px;\n }\n\n .option-text {\n font-size: 0.9rem;\n color: #666;\n }\n\n /* Total gas styles */\n .gas-sum {\n display: none;\n }\n\n .gas-detailed {\n display: inline-block;\n }\n\n .show-total-gas .gas-sum {\n display: inline-block;\n }\n\n .show-total-gas .gas-detailed {\n display: none;\n }\n </style>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const table = document.getElementById(\"instructionsTable\")\n const headers = table.querySelectorAll(\"th.sortable\")\n\n headers.forEach(header => {\n header.addEventListener(\"click\", function () {\n const column = this.dataset.column\n const isAsc = this.classList.contains(\"sort-asc\")\n\n // Remove sort classes from all headers\n headers.forEach(h => {\n h.classList.remove(\"sort-asc\", \"sort-desc\")\n })\n\n // Set sort class for clicked header\n this.classList.add(isAsc ? \"sort-desc\" : \"sort-asc\")\n\n // Get rows and sort\n const tbody = table.querySelector(\"tbody\")\n const rows = Array.from(tbody.querySelectorAll(\"tr\"))\n\n const sortedRows = rows.sort((a, b) => {\n const aValue = a.querySelector(\n `td[data-value]:nth-child(${getColumnIndex(column)})`,\n ).dataset.value\n const bValue = b.querySelector(\n `td[data-value]:nth-child(${getColumnIndex(column)})`,\n ).dataset.value\n\n // Check if values are numeric\n const aNum = !isNaN(aValue)\n const bNum = !isNaN(bValue)\n\n let comparison\n if (aNum && bNum) {\n comparison = parseFloat(aValue) - parseFloat(bValue)\n } else {\n comparison = aValue.localeCompare(bValue)\n }\n\n return isAsc ? comparison : -comparison\n })\n\n // Clear and append sorted rows\n while (tbody.firstChild) {\n tbody.removeChild(tbody.firstChild)\n }\n\n sortedRows.forEach(row => {\n tbody.appendChild(row)\n })\n })\n })\n\n function getColumnIndex(column) {\n const columns = {\n name: 1,\n gas: 2,\n hits: 3,\n avgGas: 4,\n percent: 5,\n }\n return columns[column]\n }\n\n document.getElementById(\"showTotalGas\").addEventListener(\"change\", function () {\n const codeContainer = document.querySelector(\".code-container\")\n if (this.checked) {\n codeContainer.classList.add(\"show-total-gas\")\n } else {\n codeContainer.classList.remove(\"show-total-gas\")\n }\n })\n\n const progressBar = document.getElementById(\"coverage-progress\")\n const coveragePercentage = document\n .querySelector(\".stat-value\")\n .innerText.replace(\"%\", \"\")\n if (progressBar && coveragePercentage) {\n progressBar.style.width = `${coveragePercentage}%`\n }\n })\n </script>\n </head>\n <body>\n {{SUMMARY_CONTENT}}\n\n <div class=\"options\">\n <label class=\"option-label\">\n <input type=\"checkbox\" id=\"showTotalGas\" class=\"option-checkbox\" />\n <span class=\"option-text\">Show total gas per line</span>\n </label>\n </div>\n\n <div class=\"code-container\">{{CODE_CONTENT}}</div>\n </body>\n</html>\n";
export declare const SUMMARY_TEMPLATE = "<div class=\"summary\">\n <h1>Coverage Report</h1>\n <div class=\"stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Coverage:</span>\n <span class=\"stat-value\">{{coverage_percentage}}%</span>\n <div class=\"progress-bar\">\n <div class=\"progress\" id=\"coverage-progress\"></div>\n </div>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Lines:</span>\n <span class=\"stat-value\">{{covered_lines}}/{{total_lines}}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Total Gas Used:</span>\n <span class=\"stat-value\">{{total_gas}}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Instructions Executed:</span>\n <span class=\"stat-value\">{{total_hits}}</span>\n </div>\n </div>\n <div class=\"instructions-section\">\n <details>\n <summary>\n <h2>Instruction Statistics <span class=\"toggle-icon\">\u25BC</span></h2>\n </summary>\n <div class=\"instructions-content\">\n <table id=\"instructionsTable\">\n <thead>\n <tr>\n <th class=\"sortable\" data-column=\"name\">\n Instruction <span class=\"sort-icon\">\u2195</span>\n </th>\n <th class=\"sortable\" data-column=\"gas\">\n Total Gas <span class=\"sort-icon\">\u2195</span>\n </th>\n <th class=\"sortable\" data-column=\"hits\">\n Hits <span class=\"sort-icon\">\u2195</span>\n </th>\n <th class=\"sortable\" data-column=\"avgGas\">\n Avg Gas <span class=\"sort-icon\">\u2195</span>\n </th>\n <th class=\"sortable\" data-column=\"percent\">\n % of Total Gas <span class=\"sort-icon\">\u2195</span>\n </th>\n </tr>\n </thead>\n <tbody>\n {{instruction_rows}}\n </tbody>\n </table>\n </div>\n </details>\n </div>\n</div>";
//# sourceMappingURL=templates.d.ts.map