@wire-dsl/engine

Pure JavaScript/TypeScript engine for Wire-DSL. Provides the parser, IR generator, layout engine, and SVG renderer for transforming .wire files into interactive wireframes. Browser-safe - no Node.js dependencies.

Installation

npm install @wire-dsl/engine

Quick Start

import { parseWire, generateIR, computeLayout } from '@wire-dsl/engine';

// Parse .wire DSL file
const ast = parseWire(`
  project "MyWireframe" {
    style {
      density: "normal"
      spacing: "md"
      radius: "md"
      stroke: "normal"
      font: "base"
    }
    screen Home {
      layout stack(direction: vertical, gap: md, padding: lg) {
        component Heading text: "Welcome"
        component Button text: "Click me" variant: primary
      }
    }
  }
`);

// Generate Intermediate Representation
const ir = generateIR(ast);

// Compute layout
const layout = computeLayout(ir);

console.log(layout);

Core Modules

Parser

Transforms .wire DSL syntax into an Abstract Syntax Tree (AST) using Chevrotain.

import { parseWire } from '@wire-dsl/engine';
const ast = parseWire(wireCode);

IR (Intermediate Representation)

Converts AST into a structured IR contract that describes components, properties, and relationships.

import { generateIR } from '@wire-dsl/engine';
const ir = generateIR(ast);

Layout Engine

Computes positions and dimensions for all components based on container types and constraints.

import { computeLayout } from '@wire-dsl/engine';
const layout = computeLayout(ir);

Validators

Schema-based validation using Zod to ensure IR correctness.

import { validateIR } from '@wire-dsl/engine';
validateIR(ir); // Throws if invalid

Components

30+ built-in UI components:

Text: Heading, Text, Label

Input: Input, Textarea, Select, Checkbox, Radio, Toggle

Buttons: Button, IconButton

Navigation: Topbar, SidebarMenu, Breadcrumbs, Tabs

Data: Table, List

Media: Image, Icon

Display: Divider, Badge, Link, Alert

Info: StatCard, Code, ChartPlaceholder

Feedback: Modal, Spinner

Features

• 🎯 Type-safe - Full TypeScript support
• ✅ Validated - Zod-based schema validation
• 📐 Layout Engine - Automatic responsive positioning
• 🔧 Extensible - Add custom components
• ⚡ Performance - Optimized parsing and computation
• 📦 ESM + CJS - Works in Node.js and browsers

Documentation

• IR Contract Specification
• Layout Engine Algorithm
• Validation Rules

License

MIT