Skip to content

v0.5.2
Compare
Choose a tag to compare
@gbj gbj released this 25 Oct 02:00
· 1589 commits to main since this release
v0.5.2
5f53a14

This has a bunch of bugfixes, small docs improvements, etc. but there are actually a bunch of cool new features, mostly from our growing body of contributors. See the full changelog below, but here are some highlights (apologies if I missed anything big)

Features

extractor() function with better API

The extract API is awkward due to closure. This adds an extractor function which is a little more ergonomic.

#[derive(Deserialize, Serialize, Debug, Clone)]
pub struct Search {
    q: String,
}

// Actix
#[server]
pub async fn query_extract() -> Result<Search, ServerFnError> {
    use actix_web::web::Query;
    use leptos_actix::extractor;

    let Query(query) = extractor().await?;
    Ok(query)
}

// Axum
#[server]
pub async fn data() -> Result<Search, ServerFnError> {
    use axum::extract::Query;
    use leptos_axum::extractor;
    
    let Query(query) = extractor().await?;
    Ok(query)
}

<Portal/>

Adds a portal component that lets you render some view mounted in a location other than where it appears in the view tree.

<Show when=show_overlay fallback=|| ()>
    <div>Show</div>
    <Portal mount=document().get_element_by_id("app").unwrap()>
        <div style="position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;">
            <p>This is in the body element</p>
            <button id="btn-hide" on:click=move |_| set_show_overlay(false)>
                Close Overlay
            </button>
            <button id="btn-toggle" on:click=move |_| set_show_inside_overlay(!show_inside_overlay())>
                Toggle inner
            </button>

            <Show when=show_inside_overlay fallback=|| view! { "Hidden" }>
                Visible
            </Show>
        </div>
    </Portal>
</Show>

Server Function Named Arguments

Now that we've made all server function arguments optional, this adds in the ability to pass in one or more named arguments:

#[server(endpoint = "/path/to/my/endpoint")]
pub async fn my_server_action() -> Result<(), ServerFnError> {
    Ok(())
}

#[server(encoding = "GetJson")]
pub async fn my_server_action() -> Result<(), ServerFnError> {
    Ok(())
}

Directives

Adds support for directive functions, which can be used with use: in the view:

// This doesn't take an attribute value
fn my_directive(el: HtmlElement<AnyElement>) {
    // do sth
}

// This requires an attribute value
fn another_directive(el: HtmlElement<AnyElement>, params: i32) {
    // do sth
}

// ... in the view
view! {
  <div use:my_directive></div>
  <SomeComponent use:another_directive=5 />
}

slice!() macro

Makes it easier to define slices. Expands to the same output as create_slice:

#[derive(Default)]
pub struct State {
    count: i32,
    name: String,
}

let state = create_rw_signal(State::default());

let (count, set_count) = slice!(state.count);

What's Changed

New Contributors

Full Changelog: v0.5.1...v0.5.2

Contributors

obioma, flosse, and 21 other contributors
Assets 2
Loading