export async function fetchVal(valId: string) { try { const response = await fetch(`https://api.val.town/v1/vals/${valId}`); if (!response.ok) { console.error(`Error fetching val with ID ${valId}:`, response.statusText); return null; } return await response.json(); } catch (fetchError) { console.error(`Network error fetching val ${valId}:`, fetchError); return null; } } export async function evalCode(code: string) { try { const response = await fetch(`https://api.val.town/v1/eval`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code }) }); if (!response.ok) { const errorText = await response.text(); console.error(`Error evaluating code:`, errorText); return { error: `API Error: ${response.status} ${response.statusText}`, rawResponse: errorText }; } const responseText = await response.text(); let result; try { result = JSON.parse(responseText); } catch (e) { // If parsing as JSON fails, use the response text as is result = responseText; } console.log(`Code evaluation result:`, result); return { result }; } catch (fetchError) { console.error(`Network error evaluating code:`, fetchError); return { error: 'Network error: Unable to evaluate code' }; } } function handleEvalCode(elementId: string) { const element = document.getElementById(`code-${elementId}`); if (element) { const code = element.querySelector('code').textContent || ''; evalCode(code).then(response => { const resultElement = document.getElementById(`preview-${elementId}`); if (resultElement) { if (response.error) { resultElement.innerHTML = `

${response.error}

`; if (response.rawResponse) { resultElement.innerHTML += `

${response.rawResponse}

`; } } else { let displayResult = response.result; if (typeof displayResult === 'object') { displayResult = JSON.stringify(displayResult, null, 2); } resultElement.innerHTML = `

${escapeHtml(displayResult)}

`; Prism.highlightElement(resultElement.querySelector('code')); } } }); } else { console.error('Could not find code element'); } } export async function previewVal(valName: string, resultElementId: string) { try { const resultElement = document.getElementById(resultElementId); if (resultElement) { const valUrl = `https://iamseeley-${valName}.web.val.run`; resultElement.innerHTML = `

Open in new tab

`; } } catch (error) { console.error(`Error previewing val:`, error); const resultElement = document.getElementById(resultElementId); if (resultElement) { resultElement.innerHTML = `

${error.message}

`; } } } function escapeHtml(unsafe: string) { return unsafe .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } export function injectValContent(valId: string, elementId: string) { return fetchVal(valId).then(data => { if (data) { const valElement = document.getElementById(elementId); if (valElement) { const valName = data.name; const valType = data.type; const valLink = `https://www.val.town/v/iamseeley/${valName}`; const buttonClickHandler = valType === 'http' ? `handlePreviewVal('${elementId}', '${valName}')` : `handleEvalCode('${elementId}')`; const buttonHTML = ``; // Determine the language class for Prism const languageClass = valType === 'http' ? 'language-typescript' : 'language-javascript'; valElement.innerHTML = `

${valName}

${valType} ${buttonHTML}

${escapeHtml(data.code)}

${data.readme || ''}

`; // Trigger Prism to highlight the code Prism.highlightElement(valElement.querySelector(`#code-${elementId} code`)); } else { console.error(`Element with ID ${elementId} not found.`); } } }); } export function initializeValComponents() { document.querySelectorAll('[data-val-id]').forEach(element => { const valId = element.getAttribute('data-val-id'); const elementId = element.id; if (valId && elementId) { injectValContent(valId, elementId).then(() => { Prism.highlightAll(); }); } }); } function handlePreviewVal(elementId: string, valName: string) { const previewElementId = `preview-${elementId}`; previewVal(valName, previewElementId).catch(error => { console.error('Error in handlePreviewVal:', error); const resultElement = document.getElementById(previewElementId); if (resultElement) { resultElement.innerHTML = `

Error: ${error.message}

`; } }); } // Ensure the handler functions are accessible globally (window as any).handlePreviewVal = handlePreviewVal; (window as any).handleEvalCode = handleEvalCode;

valPreview