<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>CEL-Tester</title> <style> @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); * { box-sizing: border-box; } html, body { height: 100vh; width: 100vw; margin: 0; padding: 0; font-family: 'Open Sans'; } h1, .about { text-align: center; margin: 0; } main { width: 80%; height: 80%; margin: 1em auto; padding: 2em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 0.5fr 1.5fr 0.5fr 0.5fr; gap: 0px 10px; grid-template-areas: "headers expression ." "body expression ." "header header ." "result result ."; } #headers {grid-area: headers;} #body {grid-area: body;} #expressionLabel {grid-area: expression;} #resultHeader {grid-area: header;} #result {grid-area: result;} label { display: flex; flex-direction: column; text-align: center; font-size: 1.5em; } textarea { display: block; width: 100%; height: 100%; font-size: initial; resize: none; } #resultHeader { font-size: 1.8em; margin: 0; align-self: end; text-align: center; } #result { margin: 1em 0; padding: 1em; border: 2px solid grey; } </style> </head> <body> </body> <script src="wasm_exec.js"></script> <h1>CEL-Tester</h1> <p class="about">Based on <a href="https://github.com/tektoncd/triggers/tree/main/cmd/cel-eval">cel-eval</a> from Tekton Triggers</p> <main> <label id="headers"> Header Data <textarea id="headerData"> POST /foo HTTP/1.1 Content-Type: application/json X-Header: tacocat</textarea> </label> <label id="body"> Body Data <textarea id="bodyData">{"test": {"nested": "value"}}</textarea> </label> <label id="expressionLabel"> Expression <textarea id="expression">body.test.nested == "value"</textarea> </label> <h2 id="resultHeader">Result</h2> <p id="result"></p> </main> <script> async function runWasm() { const go = new Go(); const result = await WebAssembly.instantiateStreaming(fetch("lib.wasm"), go.importObject); go.run(result.instance); testExpression(); } runWasm(); function testExpression() { let header = document.getElementById('headerData').value.trim(); let body = document.getElementById('bodyData').value.trim(); let request = header + "\nContent-Length: " + body.length + "\n\n" + body let result = window.cel(request, document.getElementById('expression').value) document.getElementById('result').innerText = result; } document.getElementById('headerData').addEventListener('keyup', testExpression); document.getElementById('bodyData').addEventListener('keyup', testExpression); document.getElementById('expression').addEventListener('keyup', testExpression); </script> </html>