build: upgrade leptos from v4 to v5

Author: Phosphorus-M

Cargo.toml

@@ -4,9 +4,9 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-leptos = { version = "0.4.8", features = ["csr", "nightly"] }
-leptos_meta = { version = "0.4.8", features = ["csr", "nightly"] }
-leptos_router = { version = "0.4.8", features = ["csr", "nightly"] }
+leptos = { version = "0.5.0-beta", features = ["csr", "nightly"] }
+leptos_meta = { version = "0.5.0-beta", features = ["csr", "nightly"] }
+leptos_router = { version = "0.5.0-beta", features = ["csr", "nightly"] }
 log = "0.4"
 gloo-net = { version = "0.2", features = ["http"] }
 

src/app.rs

@@ -5,16 +5,15 @@ use leptos_router::*;
 use crate::pages::index::Index;
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
-    provide_meta_context(cx);
+pub fn App() -> impl IntoView {
+    provide_meta_context();
 
     view! {
-        cx,
         <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
         <Link rel="shortcut icon" type_="image/ico" href="/LogoSegunMichael.ico"/>
         <Router>
             <Routes>
-                <Route path="" view=  move |cx| view! { cx, <Index /> }/>
+                <Route path="" view=|| view! { <Index /> }/>
             </Routes>
         </Router>
     }

src/components/button_link.rs

@@ -3,7 +3,6 @@ use leptos::*;
 
 #[component]
 pub fn ButtonLink(
-    cx: Scope,
     href: String,
     #[prop(default = "primary".to_string())] color: String,
     #[prop(default = "normal".to_string())] size: String,
@@ -20,13 +19,13 @@ pub fn ButtonLink(
     let current_color = colors.get(&color).unwrap().to_string();
     let current_size = sizes.get(&size).unwrap().to_string();
 
-    view! { cx,
+    view! {
         <a
             href=href.to_string()
             target="_blank"
             class=format!("tracking-widest font-work-sans border border-black flex items-center px-4 drop-shadow-[4px_4px_0_rgba(0,0,0)] hover:drop-shadow-[0_0_0_rgba(0,0,0)] transition w-fit gap-x-4 {} {}", current_color, current_size)
         >
-            {children(cx)}
+            {children()}
         </a>
     }
 }

src/components/header.rs

@@ -3,8 +3,8 @@ use leptos::*;
 use crate::components::button_link::ButtonLink;
 
 #[component]
-pub fn Header(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn Header() -> impl IntoView {
+    view! {
         <header class="border-b border-b-black/20">
             <div class="container mx-auto px-4 flex items-center justify-between">
                 <div class="flex items-center gap-x-4">

src/components/hero.rs

@@ -3,8 +3,8 @@ use leptos::*;
 use crate::components::header::Header;
 
 #[component]
-pub fn Hero(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn Hero() -> impl IntoView {
+    view! {
         <section class="w-full flex flex-col">
             <Header />
             <div class="flex items-center justify-center py-32">

src/components/icons/discord_icon.rs

@@ -2,12 +2,10 @@ use leptos::*;
 
 #[component]
 pub fn DiscordIcon(
-    cx: Scope,
     #[prop(default = 40)] size: u32,
     #[prop(default = "fill-black".to_string())] class: String,
 ) -> impl IntoView {
     view!{
-        cx,
         <svg
             width=size
             height=size

src/components/icons/github_icon.rs

@@ -2,12 +2,10 @@ use leptos::*;
 
 #[component]
 pub fn GithubIcon (
-    cx: Scope,
     #[prop(default = 40)] size: u32,
     #[prop(default = "fill-black".to_string())] class: String,
 ) -> impl IntoView {
     view! {
-        cx,
         <svg
             width=size
             height=size

src/components/icons/telegram_icon.rs

@@ -2,12 +2,10 @@ use leptos::*;
 
 #[component]
 pub fn TelegramIcon(
-    cx: Scope,
     #[prop(default = 40)] size: u32,
     #[prop(default = "fill-black".to_string())] class: String,
 ) -> impl IntoView {
     view! {
-        cx,
         <svg
             width=size
             height=size

src/components/other_communities.rs

@@ -4,8 +4,8 @@ use crate::components::icons::discord_icon::DiscordIcon;
 use crate::components::icons::telegram_icon::TelegramIcon;
 
 #[component]
-pub fn OtherCommunities(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn OtherCommunities() -> impl IntoView {
+    view! { 
         <section class="bg-orange-100 py-20">
             <div class="container mx-auto px-4">
                 <div class="w-full grid grid-cols-4 gap-x-8">

src/components/our_communities.rs

@@ -6,9 +6,8 @@ use crate::components::icons::telegram_icon::TelegramIcon;
 use crate::components::button_link::ButtonLink;
 
 #[component]
-pub fn OurCommunities(cx: Scope) -> impl IntoView {
+pub fn OurCommunities() -> impl IntoView {
     view! {
-        cx,
         <section class="bg-orange-300/30">
             <div class="container mx-auto px-4">
                 <div class="flex flex-col items-center py-20 gap-y-6">

src/main.rs

@@ -11,7 +11,7 @@ pub fn main() {
 
     log!("csr mode - mounting to body");
 
-    mount_to_body(|cx| {
-        view! { cx, <App /> }
+    mount_to_body(|| {
+        view! { <App /> }
     });
 }

src/pages/index.rs

@@ -5,10 +5,8 @@ use crate::components::our_communities::OurCommunities;
 use crate::components::other_communities::OtherCommunities;
 
 #[component]
-pub fn Index(
-    cx: Scope
-) -> impl IntoView {
-    view!{ cx,
+pub fn Index() -> impl IntoView {
+    view!{ 
         <div>
             <Hero />
             <main>