WIP upgrade to leptos-0.7

Cargo.toml

@@ -1,13 +1,10 @@
 [workspace]
-members = [ 
-    "devtools",
-    "query",
-]
+members = ["devtools", "query"]
 resolver = "2"
 exclude = ["example"]
 
 [workspace.dependencies]
-leptos = "0.6"
+leptos = { version = "0.7.0" }
 cfg-if = "1"
 js-sys = { version = "0.3" }
 gloo-timers = { version = "0.3", features = ["futures"] }
@@ -16,3 +13,4 @@ slotmap = "1"
 futures-channel = "0.3"
 futures = "0.3"
 web-sys = "0.3"
+serde = "1.0"

README.md

@@ -54,6 +54,7 @@ The table below shows the compatible versions of `leptos_query` for each `leptos
 
 | `leptos` version | `leptos_query` version |
 |------------------|------------------------|
+| 0.7.*            | 0.6.*                  |
 | 0.6.*            | 0.5.* or 0.4.*         |
 | 0.5.*            | 0.3.*                  |
 
@@ -89,7 +90,7 @@ In the root of your App, provide a query client with [provide_query_client] or [
 
 ```rust
 use leptos_query::*;
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -103,7 +104,7 @@ pub fn App() -> impl IntoView {
 Then make a query function with [`create_query`][crate::create_query::create_query()]
 
 ```rust
-use leptos::*;
+use leptos::prelude::*;
 use leptos_query::*;
 
 
@@ -135,7 +136,7 @@ async fn get_track(id: TrackId) -> TrackData {
 Now you can use the query in any component in your app.
 
 ```rust
-use leptos::*;
+use leptos::prelude::*;
 use leptos_query::*;
 
 #[component]
@@ -202,7 +203,7 @@ Devtools will by default only show in development mode. It will not be shown, or
 
 use leptos_query_devtools::LeptosQueryDevtools;
 use leptos_query::*;
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 fn App() -> impl IntoView {

devtools/Cargo.toml

@@ -10,9 +10,9 @@ readme = "README.md"
 repository = "https://github.com/nicoburniske/leptos_query/"
 
 [dependencies]
-cfg-if = { workspace = true } 
+cfg-if = { workspace = true }
 leptos = { workspace = true }
-leptos_query = { version = "0.5", path = "../query" }
+leptos_query = { version = "0.6", path = "../query" }
 js-sys = { workspace = true, optional = true }
 web-sys = { workspace = true, features = ["DomRect"], optional = true }
 wasm-bindgen = { version = "0.2", optional = true }
@@ -22,4 +22,4 @@ csr = ["web-sys", "wasm-bindgen", "js-sys"]
 force = []
 
 # [package.metadata.docs.rs]
-# all-features = true
+# all-features = true

devtools/README.md

@@ -53,7 +53,7 @@ Then in your app, render the devtools component. Make sure you also provide the
 
 use leptos_query_devtools::LeptosQueryDevtools;
 use leptos_query::provide_query_client;
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 fn App() -> impl IntoView {

devtools/src/component/button.rs

@@ -1,57 +1,52 @@
 use super::*;
-use leptos::*;
+use leptos::prelude::*;
+use leptos::either::EitherOf5;
 
 #[component]
 pub fn Button(
     children: ChildrenFn,
     color: ColorOption,
-    #[prop(attrs)] attributes: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     match color {
-        ColorOption::Blue => view! {
+        ColorOption::Blue => EitherOf5::A(view! {
             <button
                 type="button"
                 class="lq-text-white lq-bg-blue-700 lq-hover:bg-blue-800 lq-focus:outline-none lq-focus:ring-4 lq-focus:ring-blue-300 lq-font-medium lq-rounded-full lq-text-xs lq-px-2 lq-py-1 lq-text-center lq-dark:bg-blue-600 lq-dark:hover:bg-blue-700 lq-dark:focus:ring-blue-800"
-                {..attributes}
             >
-                {children}
+                {children()}
             </button>
-        },
-        ColorOption::Green => view! {
+        }),
+        ColorOption::Green => EitherOf5::B(view! {
             <button
                 type="button"
                 class="lq-text-white lq-bg-green-700 lq-hover:bg-green-800 lq-focus:outline-none lq-focus:ring-4 lq-focus:ring-green-300 lq-font-medium lq-rounded-full lq-text-xs lq-px-2 lq-py-1 lq-text-center lq-dark:bg-green-600 lq-dark:hover:bg-green-700 lq-dark:focus:ring-green-800"
-                {..attributes}
             >
-                {children}
+                {children()}
             </button>
-        },
-        ColorOption::Red => view! {
+        }),
+        ColorOption::Red => EitherOf5::C(view! {
             <button
                 type="button"
                 class="lq-text-white lq-bg-red-700 lq-hover:bg-red-800 lq-focus:outline-none lq-focus:ring-4 lq-focus:ring-red-300 lq-font-medium lq-rounded-full lq-text-xs lq-px-2 lq-py-1 lq-text-center lq-dark:bg-red-600 lq-dark:hover:bg-red-700 lq-dark:focus:ring-red-900"
-                {..attributes}
             >
-                {children}
+                {children()}
             </button>
-        },
-        ColorOption::Yellow => view! {
+        }),
+        ColorOption::Yellow => EitherOf5::D(view! {
             <button
                 type="button"
                 class="lq-text-white lq-bg-yellow-400 lq-hover:bg-yellow-500 lq-focus:outline-none lq-focus:ring-4 lq-focus:ring-yellow-300 lq-font-medium lq-rounded-full lq-text-xs lq-px-2 lq-py-1 lq-text-center lq-dark:focus:ring-yellow-900"
-                {..attributes}
             >
-                {children}
+                {children()}
             </button>
-        },
-        ColorOption::Gray => view! {
+        }),
+        ColorOption::Gray => EitherOf5::E(view! {
             <button
                 type="button"
                 class="lq-text-gray-900 lq-bg-white lq-border lq-border-gray-300 lq-focus:outline-none lq-hover:bg-gray-100 lq-focus:ring-4 lq-focus:ring-gray-200 lq-font-medium lq-rounded-full lq-text-xs lq-px-2 lq-py-1 lq-dark:bg-gray-800 lq-dark:text-white lq-dark:border-gray-600 lq-dark:hover:bg-gray-700 lq-dark:hover:border-gray-600 lq-dark:focus:ring-gray-700"
-                {..attributes}
             >
-                {children}
+                {children()}
             </button>
-        },
+        }),
     }
 }

devtools/src/component/dot_badge.rs

@@ -1,4 +1,5 @@
-use leptos::*;
+use leptos::prelude::*;
+use leptos::either::EitherOf5;
 
 use super::ColorOption;
 
@@ -10,7 +11,7 @@ pub fn DotBadge(
 ) -> impl IntoView {
     match color {
         ColorOption::Blue => {
-            view! {
+            EitherOf5::A(view! {
                 <span class="lq-inline-flex lq-items-center lq-gap-x-1.5 lq-rounded-md lq-bg-blue-100 lq-px-2 lq-py-1 lq-text-xs lq-font-medium lq-text-blue-700">
                     {if dot {
                         Some(
@@ -27,12 +28,12 @@ pub fn DotBadge(
                     } else {
                         None
                     }}
-                    {children}
+                    {children()}
                 </span>
-            }
+            })
         }
         ColorOption::Green => {
-            view! {
+            EitherOf5::B(view! {
                 <span class="lq-inline-flex lq-items-center lq-gap-x-1.5 lq-rounded-md lq-bg-green-100 lq-px-2 lq-py-1 lq-text-xs lq-font-medium lq-text-green-700">
                     {if dot {
                         Some(
@@ -49,12 +50,12 @@ pub fn DotBadge(
                     } else {
                         None
                     }}
-                    {children}
+                    {children()}
                 </span>
-            }
+            })
         }
         ColorOption::Red => {
-            view! {
+            EitherOf5::C(view! {
                 <span class="lq-inline-flex lq-items-center lq-gap-x-1.5 lq-rounded-md lq-bg-red-100 lq-px-2 lq-py-1 lq-text-xs lq-font-medium lq-text-red-700">
                     {if dot {
                         Some(
@@ -71,12 +72,12 @@ pub fn DotBadge(
                     } else {
                         None
                     }}
-                    {children}
+                    {children()}
                 </span>
-            }
+            })
         }
         ColorOption::Gray => {
-            view! {
+            EitherOf5::D(view! {
                 <span class="lq-inline-flex lq-items-center lq-gap-x-1.5 lq-rounded-md lq-bg-gray-100 lq-px-2 lq-py-1 lq-text-xs lq-font-medium lq-text-gray-700">
                     {if dot {
                         Some(
@@ -93,12 +94,12 @@ pub fn DotBadge(
                     } else {
                         None
                     }}
-                    {children}
+                    {children()}
                 </span>
-            }
+            })
         }
         ColorOption::Yellow => {
-            view! {
+            EitherOf5::E(view! {
                 <span class="lq-inline-flex lq-items-center lq-gap-x-1.5 lq-rounded-md lq-bg-yellow-100 lq-px-2 lq-py-1 lq-text-xs lq-font-medium lq-text-yellow-700">
                     {if dot {
                         Some(
@@ -115,9 +116,9 @@ pub fn DotBadge(
                     } else {
                         None
                     }}
-                    {children}
+                    {children()}
                 </span>
-            }
+            })
         }
     }
 }