Leptos 0.6 to 0.7 migration

Leptos 0.6 to 0.7 Migration

Cargo.toml: remove "leptos_meta/csr", "leptos_router/csr" feature propagations.
Cargo.toml: remove "leptos_meta/hydrate", "leptos_router/hydrate" feature propagations.
leptos::SignalGet: leptos::prelude::Get
leptos::SignalSet: leptos::prelude::Set
leptos::SignalUpdate: leptos::prelude::Update
leptos::SignalUpdate: leptos::prelude::Update
leptos::ServerFnError: leptos::prelude::ServerFnError
leptos::mount_to_body: leptos::mount::mount_to_body
leptos::spawn_local: leptos::task::spawn_local
leptos::create_effect: leptos::prelude::Effect::new
leptos::create_signal: Either leptos::prelude::signal or leptos::prelude::RwSignal::new
leptos::create_resource: leptos::prelude::Resource::new
leptos::create_node_ref: leptos::prelude::NodeRef::new
leptos::use_context: leptos::context::use_context
leptos::provide_context: leptos::context::provide_context
leptos::Callback: leptos::callback::Callback
leptos::Callable: leptos::callback::Callable
leptos::Callable::call: leptos::callback::Callable::run

Traits to enable attributes:

use leptos::prelude::{
    ClassAttribute, ElementChild, GlobalAttributes, GlobalOnAttributes, NodeRef,
    NodeRefAttribute, OnAttribute,
};

Router

before:

<Router fallback=|| view! {} >
    <main>
        <Routes>
            <Route
                path="index"
            />
        </Routes>
    </main>
</Router>

after:

let (is_routing, set_is_routing) = signal(false);

<Router set_is_routing>
    <main>
        <Routes fallback=|| view! {} >
            <div class="routing-progress">
                <RoutingProgress is_routing max_time=Duration::from_millis(250)/>
            </div>
            <Route
                path=leptos_router_macro::path!("")
            />
        </Routes>
    </main>
</Router>

leptos::NodeRef::on_load

before:

use leptos::prelude::OnAttribute;

let text_editor_div_on_load = move |node| { .. };

view! {
    <div
        node_ref=div_ref
        ..
        on:load=text_editor_div_on_load
    ></div>
}

after:

use leptos::prelude::OnAttribute;

let _ = Effect::new(move |_| {
    if let Some(node) = div_ref.get() { .. }
});

view! {
    <div
        node_ref=div_ref
        ..
    ></div>
}

<noscript> does not work on SSR.
TrailingSlash doesn't exist. Not sure if it's needed yet.

For SSR, add a shell function with AutoReload and HydrationScripts:

use leptos::hydration::{AutoReload, HydrationScripts};
use leptos_meta::MetaTags;

pub fn shell(options: LeptosOptions) -> impl IntoView {
    view! {
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <AutoReload options=options.clone() />
                <HydrationScripts options />
                <MetaTags />
            </head>
            <body>
                <App />
            </body>
        </html>
    }
}

There's also something about using HashedStyleSheet. Check the release page.
See #3332 for where to place various method calls.

azriel91/leptos_0_7_migration.md

Leptos 0.6 to 0.7 Migration