prevue

Crates.ioprevue
lib.rsprevue
version0.0.5
created_at2025-10-27 16:23:32.862503+00
updated_at2025-12-01 18:11:59.484206+00
descriptionAn HTML templating engine that uses Vue's template syntax.
homepage
repositoryhttps://github.com/morugetsm/prevue
max_upload_size
id1903218
size126,061
(morugetsm)

documentation

README

prevue

CI crates.io

An HTML templating engine that uses Vue's template syntax. Parses HTML, evaluates inline JavaScript expressions, and returns rendered output.

Installation

[dependencies]
prevue = "0.0.5"

API

pub fn render(html: String, data: impl Serialize) -> Result<String, anyhow::Error>

Example

use prevue::render;
use serde_json::json;

let html = r#"
    <div>
        <a :id="id">link</a>
        <p v-if="user.age >= 18">{{ user.name }} is adult</p>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
"#.to_string();

let data = json!({
    "id": "link-id",
    "user": { "name": "James", "age": 28 },
    "list": ["a", "b", "c"],
});

let output = render(html, data).unwrap();
// <html><head></head><body><div>
//         <a id="link-id">link</a>
//         <p>James is adult</p>
//         <ul>
//             <li>a</li>
//             <li>b</li>
//             <li>c</li>
//         </ul>
//     </div>
//     </body></html>

Features

Syntax Status Notes
{{ }} 🟡 Array/Object stringify without spacing (e.g., [1,2,3] not [ 1, 2, 3 ])
<template> ✅
v-bind, :attr 🟡 No class/style object binding
v-if ✅
v-else ✅
v-else-if ✅
v-for ✅
v-text, v-html ❌
v-pre ✅

Important Notes

HTML5 Parsing

This library uses html5ever, which follows HTML5 spec strictly:

  • Attribute names are lowercased (e.g., :MyAttr → :myattr)
  • Dynamic bindings are lowercased: :[dynamicKey] looks up dynamickey variable
  • Outputs complete HTML document with <html>, <head>, <body> tags

JavaScript Evaluation

This library uses a Boa JavaScript engine to evaluate expressions.

  • ⚠️ Security: Never use untrusted templates or data.

  • Evaluation Behavior: Unlike Vue, which restricts each binding to a single expression, prevue currently allows both expressions and statements in all binding contexts (e.g., {{ let x = 1; x + 1 }} → 2). This may change in future versions to match Vue's behavior.

  • Variable Access: Accessing undefined variables will cause the entire expression evaluation to fail, rather than returning undefined. Always ensure that variables exist in the provided data.

  • this Context: While this is accessible in the JavaScript engine context, its behavior may vary due to internal optimizations, and access is restricted in the template engine context. Therefore, using this is not recommended.

License

MIT

Commit count: 0

cargo fmt