simple-rsx 0.1.6

A simple JSX-like syntax implementation for Rust
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

  <img src="./icon.svg" width="128" height="128" alt="Simple RSX Logo">

# simple RSX </>

A lightweight and intuitive JSX-like syntax implementation for Rust, enabling HTML-like templating with the full power of Rust's type system.

[![Crates.io](https://img.shields.io/crates/v/simple-rsx.svg)](https://crates.io/crates/simple-rsx)
[![Documentation](https://docs.rs/simple-rsx/badge.svg)](https://docs.rs/simple-rsx)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Coverage Status](https://coveralls.io/repos/github/elcharitas/simple-rsx/badge.svg?branch=main)](https://coveralls.io/github/elcharitas/simple-rsx?branch=main)

## Features

- [x] JSX-like syntax support in Rust
- [x] Self-closing tags (`<div />`)
- [x] Element attributes
- [x] Nested elements
- [x] String literals as children
- [x] Fragment support (`<></>`)
- [x] Basic error handling and validation
- [x] Tag matching validation
- [x] Procedural macro implementation
- [x] Basic HTML element rendering
- [x] Expression support in braces (`{expr}`)
- [x] attribute value concatenation and interpolation
- [x] Conditional attributes
- [x] Conditional rendering
- [x] Looping
- [x] List rendering
- [x] Custom components
- [x] Props validation
- [ ] State management
- [ ] Lifecycle hooks
- [ ] Event handling
- [x] Server-side rendering

## Installation

Add this to your `Cargo.toml`:

```toml
[dependencies]
simple-rsx = "0.1"
```

## Why Simple RSX?

I started this project while attempting to transit my [portfolio](https://elcharitas.wtf) from Next.js to Rust. I tried using dioxus, yew, and hypertext, but I found them to be too complex and verbose for my needs. I wanted a simple and intuitive way to write HTML-like templates in Rust, while still leveraging the full power of Rust's type system.

Simple RSX aims to provide a straightforward and intuitive way to write HTML-like templates in Rust, while still leveraging the full power of Rust's type system. By using Rust's syntax and features, Simple RSX enables you to write expressive and type-safe code while still maintaining the simplicity and readability of HTML.

## Usage

```rust
use simple_rsx::*;

// Self-closing tag with attributes
let element = rsx!(<div class="container" id="app" />);

// Nested elements with text content
let nested = rsx!(
    <div class="container" id="app">
        <p>Hello, world!</p>
    </div>
);

// element with attributes and children
let element_with_children = rsx!(
    <div class="container" id="app">
        <p>Hello, world!</p>
        <p>Another paragraph.</p>
    </div>
);

// Fragment syntax
let fragment = rsx!(
    <>
        <h1>Title</h1>
        <p>Content</p>
    </>
);

// Expression support
let count = 42;
let expression = rsx!(<p>Count: {count}</p>);

// Conditional rendering
let show = true;
let conditional = rsx!(
    <div>
        {if show {
            rsx!(<p>This is shown.</p>)
        } else {
            rsx!(<p>This is hidden.</p>)
        }}
    </div>
);

// List rendering
let items = vec!["Item 1", "Item 2", "Item 3"];
let list = rsx!(
    <ul>
        {items.iter().map(|item| rsx!(<li>{item}</li>))}
    </ul>
);

// Server-side rendering
let nodes = rsx!(
    <html>
        <head>
            <title>My Page</title>
        </head>
        <body>
            <h1>Welcome to my page!</h1>
        </body>
    </html>
);
let html = nodes.to_string();
```

## Project Structure

- `simple-rsx`: Main library crate
- `simple-rsx-macros`: Procedural macros implementation

## Development Status

This project is currently in active development. While basic JSX syntax is supported, many advanced features are still in progress. Contributions are welcome!

## Alternatives

- [Yew](https://crates.io/crates/yew)
- [Hypertext](https://crates.io/crates/hypertext)

## License

MIT License