penframe/examples/api-usage.js

A lightweight DSL-based wireframe and UI structure visualization tool.

const { penframeToSvg, penframeToPng, penframeToPngFile, parse } = require('../index.js');
const fs = require('fs');

// Sample PenFrame DSL
const dslCode = `
@app { width: 800, height: 400, title: "API Usage Example" }
@headline "Welcome to PenFrame" { level: 1, color: "#333" }
@hr
@p "This is generated using the new API!" { align: "center" }
@button "Click Me" { color: "#007bff", textColor: "#ffffff" }
@tabs { items: ["Home", "Features", "Contact"], active: 0 }
@badge "New" { color: "#e74c3c" }
`;

async function demonstrateAPI() {
  console.log('PenFrame API Usage Demo');
  console.log('========================\n');

  // 1. Parse DSL to AST
  console.log('1. Parsing DSL to AST...');
  const ast = parse(dslCode);
  console.log(' AST generated with', ast.length, 'elements\n');

  // 2. Convert to SVG
  console.log('2. Converting to SVG...');
  const svg = penframeToSvg(dslCode);
  fs.writeFileSync('examples/api-output.svg', svg);
  console.log(' SVG saved to examples/api-output.svg\n');

  // 3. Convert to PNG (high quality)
  console.log('3. Converting to PNG...');
  await penframeToPngFile(dslCode, 'examples/api-output.png', {
    width: 800,
    height: 600,
    deviceScaleFactor: 2,
    background: 'white'
  });
  console.log('  PNG saved to examples/api-output.png\n');

  // 4. Convert to PNG buffer (for in-memory usage)
  console.log('4. Converting to PNG buffer...');
  const pngBuffer = await penframeToPng(dslCode, {
    width: 400,
    deviceScaleFactor: 1,
    background: 'transparent'
  });
  console.log('  PNG buffer generated, size:', pngBuffer.length, 'bytes\n');

  console.log(' All API functions working correctly!');
  console.log('\nFor VSCode extension usage:');
  console.log('```javascript');
  console.log("import { penframeToSvg } from 'penframe';");
  console.log('const svg = penframeToSvg(penframeDslCode);');
  console.log('```');
}

// Run the demo
demonstrateAPI().catch(console.error);