Crate reinhardt_pages 

Reinhardt Pages - WASM-based Frontend Framework

A Django-inspired frontend framework for Reinhardt that preserves the benefits of Django templates while leveraging WebAssembly for modern interactivity.

Features

• Fine-grained Reactivity: Leptos/Solid.js-style Signal system with automatic dependency tracking
• Hybrid Rendering: SSR + Client-side Hydration for optimal performance and SEO
• Django-like API: Familiar patterns for Reinhardt developers
• Low-level Only: Built on wasm-bindgen, web-sys, and js-sys (no high-level framework dependencies)
• Security First: Built-in CSRF protection, XSS prevention, and session management

Architecture

This framework consists of several key modules:

• reactive: Fine-grained reactivity system (Signal, Effect, Memo)
• dom: DOM abstraction layer
• builder: HTML element builder API
• component: Component system with IntoPage trait, Head management
• form: Django Form integration
• csrf: CSRF protection
• auth: Authentication integration
• api: API client with Django QuerySet-like interface
• server_fn: Server Functions (RPC)
• ssr: Server-side rendering with Head support
• hydration: Client-side hydration
• router: Client-side routing (reinhardt-urls compatible)
• static_resolver: Static file URL resolution (collectstatic support)

Macros

• page!: JSX-like macro for defining view components
• head!: JSX-like macro for defining HTML head sections

Example

Basic Component

use reinhardt_pages::{Signal, Page, page};

fn counter() -> Page {
    let count = Signal::new(0);

    page!(|| {
        div {
            p { "Count: " }
            button {
                @click: |_| count.update(|n| *n += 1),
                "Increment"
            }
        }
    })()
}

With Head Section

use reinhardt_pages::{head, page, Page, resolve_static};

fn home_page() -> Page {
    let page_head = head!(|| {
        title { "Home - My App" }
        meta { name: "description", content: "Welcome to my app" }
        link { rel: "stylesheet", href: resolve_static("css/main.css") }
    });

    page! {
        #head: page_head,
        || {
            div { class: "container",
                h1 { "Welcome Home" }
            }
        }
    }()
}

WebSocket Integration

The use_websocket hook provides reactive WebSocket connections:

use reinhardt_pages::reactive::hooks::{use_websocket, use_effect, UseWebSocketOptions};
use reinhardt_pages::reactive::hooks::{ConnectionState, WebSocketMessage};

fn chat_component() -> Page {
    // Establish WebSocket connection
    let ws = use_websocket("ws://localhost:8000/ws/chat", UseWebSocketOptions::default());

    // Monitor connection state reactively
    use_effect({
        let ws = ws.clone();
        move || {
            match ws.connection_state().get() {
                ConnectionState::Open => log!("Connected to chat"),
                ConnectionState::Closed => log!("Disconnected from chat"),
                ConnectionState::Error(e) => log!("Connection error: {}", e),
                _ => {}
            }
            None::<fn()>
        }
    });

    // Handle incoming messages
    use_effect({
        let ws = ws.clone();
        move || {
            if let Some(WebSocketMessage::Text(text)) = ws.latest_message().get() {
                log!("Received: {}", text);
            }
            None::<fn()>
        }
    });

    page!(|| {
        div {
            button {
                @click: move |_| {
                    ws.send_text("Hello, server!".to_string()).ok();
                },
                "Send Message"
            }
        }
    })()
}

Note: WebSocket functionality is WASM-only. On the server side (SSR), use_websocket returns a no-op handle with connection state always set to Closed.

Re-exports

pub use api::ApiModel;

pub use api::ApiQuerySet;

pub use api::Filter;

pub use api::FilterOp;

pub use auth::AuthData;

pub use auth::AuthError;

pub use auth::AuthState;

pub use auth::auth_state;

pub use builder::attributes::AriaAttributes;

pub use builder::attributes::BooleanAttributes;

pub use builder::html::a;

pub use builder::html::button;

pub use builder::html::div;

pub use builder::html::form;

pub use builder::html::h1;

pub use builder::html::h2;

pub use builder::html::h3;

pub use builder::html::img;

pub use builder::html::input;

pub use builder::html::li;

pub use builder::html::ol;

pub use builder::html::option;

pub use builder::html::p;

pub use builder::html::select;

pub use builder::html::span;

pub use builder::html::textarea;

pub use builder::html::ul;

pub use callback::Callback;

pub use callback::IntoEventHandler;

pub use callback::event_handler;

pub use callback::into_event_handler;

pub use component::Component;

pub use component::PageExt;

pub use component::Props;

pub use csrf::CsrfManager;

pub use csrf::get_csrf_token;

pub use dom::Document;

pub use dom::Element;

pub use dom::EventHandle;

pub use dom::document;

pub use dom::document;

pub use form::FormBinding;

pub use form::FormComponent;

pub use form_generated::StaticFieldMetadata;

pub use form_generated::StaticFormMetadata;

pub use hydration::HydrationContext;

pub use hydration::HydrationError;

pub use hydration::hydrate;

pub use reactive::Resource;

pub use reactive::ResourceState;

pub use reactive::ActionState;

pub use reactive::Dispatch;

pub use reactive::OptimisticState;

pub use reactive::Ref;

pub use reactive::SetState;

pub use reactive::SharedSetState;

pub use reactive::SharedSignal;

pub use reactive::TransitionState;

pub use reactive::use_action_state;

pub use reactive::use_callback;

pub use reactive::use_context;

pub use reactive::use_debug_value;

pub use reactive::use_deferred_value;

pub use reactive::use_effect;

pub use reactive::use_effect_event;

pub use reactive::use_id;

pub use reactive::use_layout_effect;

pub use reactive::use_memo;

pub use reactive::use_optimistic;

pub use reactive::use_reducer;

pub use reactive::use_ref;

pub use reactive::use_shared_state;

pub use reactive::use_state;

pub use reactive::use_sync_external_store;

pub use reactive::use_transition;

pub use router::Link;

pub use router::PathPattern;

pub use router::Route;

pub use router::Router;

pub use router::RouterOutlet;

pub use server_fn::ServerFn;

pub use server_fn::ServerFnError;

pub use ssr::SsrOptions;

pub use ssr::SsrRenderer;

pub use ssr::SsrState;

pub use static_resolver::init_static_resolver;

pub use static_resolver::is_initialized;

pub use static_resolver::resolve_static;

pub use reinhardt_pages_ast as ast;Deprecated

Modules

api

API Client with Django QuerySet-like Interface

auth

Authentication State Management for Client-side WASM

builder

HTML Builder API

callback

Callback types and event handler conversion traits.

component

Component System for reinhardt-pages

csrf

CSRF Protection for Client-side WASM

dom

DOM Abstraction Layer

form

Form Integration for Reinhardt WASM (Week 5 Day 3-4)

form_generated

Static Metadata Types for form! Macro Generated Code

hydration

Hydration Module for reinhardt-pages

integ

Integration modules for special macros.

logging

Logging abstraction layer for reinhardt-pages

platform

Platform abstraction for WASM and native targets.

prelude

Unified prelude for reinhardt-pages.

reactive

Reactive System

router

Client-Side Router for reinhardt-pages

server_fn

Server Functions (RPC)

spawn

Task spawning utilities for WASM and non-WASM environments.

ssr

Server-Side Rendering (SSR) Infrastructure

static_resolver

Static File URL Resolver

testing

Testing Utilities for Reinhardt Pages

Macros

debug_log

No-op debug_log when conditions are not met

error_log

Logs an error message (requires debug_assertions)

form

Form component macro

head

Head section macro

info_log

Logs an info message (requires debug_assertions)

page

Page component macro

warn_log

Logs a warning message (requires debug_assertions)

Structs

Context

A type-safe context identifier.

ContextGuard

A RAII guard that removes a context value when dropped.

DummyEvent

Dummy event type for non-WASM environments.

Effect

A reactive effect that automatically re-runs when its dependencies change

FieldMetadata

Serializable field metadata for client-side rendering (Week 5 Day 1)

FormMetadata

Serializable form metadata for client-side rendering (Week 5 Day 1)

Head

Represents the complete HTML <head> section.

LinkTag

Represents an HTML <link> tag.

Memo

A memoized reactive computation that caches its result

MetaTag

Represents an HTML <meta> tag.

PageElement

Represents a DOM element in the view tree.

ScriptTag

Represents an HTML <script> tag.

Signal

A reactive signal that holds a value and tracks dependencies

StyleTag

Represents an HTML <style> tag with inline CSS.

Enums

EventType

Common DOM event types

Page

A unified representation of renderable content.

Widget

Field widget type

Traits

IntoPage

Trait for types that can be converted into a Page.

Functions

create_context

Creates a new context.

get_context

Gets the current value from a context.

provide_context

Provides a value for a context.

remove_context

Removes the most recently provided value for a context.