Skip to content

Releases: monzeromer-lab/WebFluent

v0.3.0-alpha

25 Mar 08:09

Choose a tag to compare

v0.3.0-alpha Pre-release
Pre-release

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.wf files 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 componentsDocument, Section, Paragraph, Header, Footer, PageBreak for 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 templatewf init myreport -t pdf scaffolds 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 renderingwf render template.wf --data data.json --format html|fragment|pdf for command-line usage. Reads stdin if no --data flag.
  • Rust APITemplate::from_file("invoice.wf")?.render_html(&json) / .render_pdf(&json). Theme and token overrides via builder pattern.
  • Node.js APITemplate.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 for loops over arrays, if/else conditionals, 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 packagejust deb builds a .deb with proper /usr/bin/wf installation, man page, and metadata.
  • Windows cross-compilationjust build-windows produces wf.exe via x86_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 templatewf init <name> -t pdf creates 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 fileAGENTS.md provides a complete language reference for AI agents to build WebFluent projects.

Bug Fixes

  • List component in PDF — Fixed TokenType::TypeList displaying 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

24 Mar 20:00

Choose a tag to compare

v2.0-alpha Pre-release
Pre-release

What's New

Language & Compiler

  • Signal-based reactivity — Fine-grained DOM updates via state declarations. Only affected nodes update, no virtual DOM.
  • Interpolated reactive strings"{counter}" in UI elements automatically subscribes to signal changes.
  • Conditional renderingif / else blocks 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 with animate(enterAnim, exitAnim).
  • Two-way data bindingbind: attribute on Input, 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 (with Card.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; all t() 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.html at root for GitHub Pages.
  • .nojekyll support — Automatically generated for GitHub Pages compatibility.

Accessibility Linting

  • 12 compile-time checks — Warnings for missing alt text, missing form labels, empty headings, missing lang attribute, 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 themesdefault, dark, minimal, vibrant. Set with one config line.
  • Design tokens — Customize color-primary, color-secondary, font-family, spacing, border-radius, and more via webfluent.app.json.
  • Component styles — Every built-in component ships with a polished default design that respects the active theme.

CLI (wf)

  • Renamed from webfluent to wf for brevity.
  • wf init — Scaffold a new project with template selection (spa or static). Both templates demonstrate the full language capabilities.
  • wf build — Compile .wf source files to HTML, CSS, and JS. Supports --minify and SSG.
  • wf dev — Local development server with live reload.
  • Project configwebfluent.app.json for 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

24 Apr 07:22
d0bb69b

Choose a tag to compare

1.0 Alpha Pre-release
Pre-release
0.1

Delete deno.exe