penframe
Version:
A lightweight DSL-based wireframe and UI structure visualization tool.
48 lines (42 loc) • 1.67 kB
HTML
<html>
<head>
<title>PenFrame Browser Test</title>
</head>
<body>
<h1>PenFrame Browser Test</h1>
<div id="output"></div>
<script src="../dist/penframe.min.js"></script>
<script>
// Test if PenFrame is loaded
if (typeof PenFrame !== 'undefined') {
console.log('✅ PenFrame loaded successfully');
// Test parsing
const dslCode = '@headline "Test" { level: 1 }\n@button "Click" { color: "#007bff" }';
try {
// Test parse function
const ast = PenFrame.parse(dslCode);
console.log('✅ Parse function working', ast);
// Test SVG generation
const svg = PenFrame.penframeToSvg(dslCode);
console.log('✅ SVG generation working');
// Display result
document.getElementById('output').innerHTML = `
<h2>✅ All tests passed!</h2>
<h3>Generated SVG:</h3>
${svg}
`;
} catch (error) {
console.error('❌ Test failed:', error);
document.getElementById('output').innerHTML = `
<h2>❌ Test failed</h2>
<p>Error: ${error.message}</p>
`;
}
} else {
console.error('❌ PenFrame not loaded');
document.getElementById('output').innerHTML = '<h2>❌ PenFrame not loaded</h2>';
}
</script>
</body>
</html>