Releases: monzeromer-lab/WebFluent
Releases · monzeromer-lab/WebFluent
v0.3.0-alpha
What's New
PDF Generation
A complete PDF output backend, built from scratch with zero external dependencies — raw PDF 1.7 object/stream generation.
- Direct PDF compilation —
.wffiles compile to PDF with"output_type": "pdf"in config. No headless browser, no wkhtmltopdf — pure Rust PDF writer. - Page size & margins — A4, A3, A5, Letter, Legal. Configurable margins in points.
- Base14 fonts — Helvetica, Helvetica-Bold, Times-Roman, Times-Bold, Courier, Courier-Bold with proper AFM character width tables for accurate text layout.
- Word wrapping — All text elements wrap correctly within available width. Long single words are truncated with ellipsis.
- Table layout — Dynamic row heights based on wrapped cell content. Cell text wraps within columns. Mid-table page breaks.
- Auto page breaks — Content automatically flows to new pages. Code blocks split across pages when needed.
- Header & Footer — Repeats on every page. Supports
Row(justify: between)for left/right layout. - Page numbering —
{page}and{pages}variables in header/footer text:Text("Page {page} of {pages}"). - PDF components —
Document,Section,Paragraph,Header,Footer,PageBreakfor document-specific structure. - Full component support — Text, Heading, Table, List, Code (block/inline), Blockquote, Card, Badge, Alert, Progress, Divider, Image (placeholder), Spacer.
- Rounded shapes — Badges render as pills, progress bars as capsules, cards with rounded borders — all via cubic Bézier curves.
- Color system — Modifier colors (primary, success, danger, warning, info) work consistently across all components.
- PDF validation — Compile-time rejection of interactive elements (Button, Input, Modal, Router, etc.) with clear error messages.
- PDF init template —
wf init myreport -t pdfscaffolds a report project with tables, lists, headers, and footers.
Template Engine (Server-Side Rendering)
Use WebFluent as a template engine from Rust and Node.js to render .wf templates with JSON data.
- CLI rendering —
wf render template.wf --data data.json --format html|fragment|pdffor command-line usage. Reads stdin if no--dataflag. - Rust API —
Template::from_file("invoice.wf")?.render_html(&json)/.render_pdf(&json). Theme and token overrides via builder pattern. - Node.js API —
Template.fromFile('invoice.wf').renderHtml(data)with NAPI bindings. Works in Express, Next.js, or any Node.js app. - Data context — Top-level JSON keys become template variables. Supports
forloops over arrays,if/elseconditionals, nested property access (customer.name), and string interpolation. - HTML fragment mode — Render without
<html>wrapper for embedding in existing pages. - Theme support —
.with_theme("dark").with_tokens(&[("color-primary", "#8B5CF6")])per render.
Packaging & Distribution
- Debian package —
just debbuilds a.debwith proper/usr/bin/wfinstallation, man page, and metadata. - Windows cross-compilation —
just build-windowsproduceswf.exeviax86_64-pc-windows-gnu. - Justfile — All build, test, package, and release tasks in one file:
just release,just deb,just build-windows,just site,just clean.
CLI Improvements
wf render— New subcommand for template rendering to HTML/PDF.- PDF template —
wf init <name> -t pdfcreates a PDF report project. - Build output — Shows actual PDF page count, file size, and accessibility warnings.
Documentation Site
- 13 pages — Added PDF and Template Engine documentation pages.
- Template Engine page — CLI usage, Rust API, Node.js API, Express.js example, supported/unsupported features grid, use cases.
- PDF page — Document structure, page setup, components, header/footer, and code examples.
- Agent role file —
AGENTS.mdprovides a complete language reference for AI agents to build WebFluent projects.
Bug Fixes
Listcomponent in PDF — FixedTokenType::TypeListdisplaying as"TypeList"instead of"List", causing list rendering to silently fall through.- Divider placement — Fixed line drawing at text baselines. Now draws at the vertical midpoint of a 20pt gap.
- Footer overflow — Footer content no longer clips below the page. Positioned with sufficient space for multi-element footers (Divider + Row).
- Blockquote bar alignment — Bar is now drawn AFTER text rendering using exact measured positions, not predicted height.
- Card z-order — Removed background fill that was drawn after content (covering text). Cards now use stroke-only borders.
- Table text overflow — Cells now word-wrap and truncate. Row heights are dynamic based on content.
- Code block page splitting — Large code blocks split across pages instead of overflowing.
- Empty page suppression — Pages with no visible content are not emitted.
- Header positioning — Moved from cramped margin area to 30pt from page top.
v2.0-alpha
What's New
Language & Compiler
- Signal-based reactivity — Fine-grained DOM updates via
statedeclarations. Only affected nodes update, no virtual DOM. - Interpolated reactive strings —
"{counter}"in UI elements automatically subscribes to signal changes. - Conditional rendering —
if/elseblocks with proper DOM node cleanup and lifecycle management. - Component props — Components receive props as plain parameters, correctly distinguished from reactive state.
- Animation modifiers — 12 built-in animations (
fadeIn,slideUp,scaleIn, etc.) usable as element modifiers. Enter/exit animations on conditionals withanimate(enterAnim, exitAnim). - Two-way data binding —
bind:attribute onInput,Switch, and other form elements. - String escape handling — Proper escaping of braces, quotes, and special characters in code blocks and string literals.
Built-in Components
50+ components with default styling, all customizable via design tokens:
- Layout:
Container,Row,Stack,Grid,Spacer,Divider - Typography:
Heading,Text,Code - Navigation:
Navbar,Link,Tabs - Data Entry:
Input,Switch,Select,Checkbox - Feedback:
Alert,Badge,Tag,Progress,Modal,Toast - Surfaces:
Card(withCard.Header,Card.Body,Card.Footer),Table - Actions:
Button(with variants:primary,danger,success,large,small,outlined)
Internationalization (i18n)
- JSON translation files — Define translations per locale in
src/translations/. t()function — Reactive translation lookup:Text(t("hero.title")).setLocale()runtime — Switch language at runtime; allt()calls update reactively.- Automatic RTL —
<html dir="rtl">is set automatically when switching to RTL locales like Arabic. - Baked into output — All translations are embedded in the compiled JS. No network requests needed.
Static Site Generation (SSG)
- Pre-rendered HTML — Pages are rendered to static HTML at build time for instant content visibility.
- Hydration — JavaScript loads and adds interactivity without re-rendering the page.
- Configurable base path —
"base_path": "/WebFluent"in config for subdirectory deployments (e.g., GitHub Pages). - Per-page directories — Each route gets its own
index.html(e.g.,/components/index.html) for clean URLs. - 404 page — Custom 404 page built with WebFluent, with fallback
404.htmlat root for GitHub Pages. .nojekyllsupport — Automatically generated for GitHub Pages compatibility.
Accessibility Linting
- 12 compile-time checks — Warnings for missing
alttext, missing form labels, empty headings, missinglangattribute, and more. - Non-blocking — Warnings are displayed during build but never prevent compilation.
- Covers WCAG basics — Image alt text, form labels, heading hierarchy, link text, table headers, color contrast hints.
Design System
- 4 built-in themes —
default,dark,minimal,vibrant. Set with one config line. - Design tokens — Customize
color-primary,color-secondary,font-family, spacing, border-radius, and more viawebfluent.app.json. - Component styles — Every built-in component ships with a polished default design that respects the active theme.
CLI (wf)
- Renamed from
webfluenttowffor brevity. wf init— Scaffold a new project with template selection (spaorstatic). Both templates demonstrate the full language capabilities.wf build— Compile.wfsource files to HTML, CSS, and JS. Supports--minifyand SSG.wf dev— Local development server with live reload.- Project config —
webfluent.app.jsonfor theme, build options, meta tags, i18n settings, and base path.
Documentation Site
- Built with WebFluent itself — The docs site at monzeromer-lab.github.io/WebFluent is a WebFluent SSG project.
- 10 documentation pages — Home, Getting Started, Guide, Components, Styling, Animation, i18n, SSG, Accessibility, CLI.
- Interactive demos — Live reactive counter, two-way binding, conditional rendering, and component showcase on the home page.
- Bilingual — Full English and Arabic translations with runtime locale switching.
- Pre-rendered — All pages are statically generated for instant loading.
1.0 Alpha
0.1 Delete deno.exe