migrate to islands

Cargo.toml

@@ -12,12 +12,19 @@ console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 futures = "0.3.25"
 cfg-if = "1.0.0"
-leptos = { version = "0.5", features = ["nightly", "experimental-islands"] }
-leptos_axum = { version = "0.5", optional = true, features = [
+leptos = { git = "https://github.com/leptos-rs/leptos", features = [
+	"nightly",
 	"experimental-islands",
 ] }
-leptos_meta = { version = "0.5", features = ["nightly"] }
-leptos_router = { version = "0.5", features = ["nightly"] }
+leptos_axum = { git = "https://github.com/leptos-rs/leptos", optional = true, features = [
+	"experimental-islands",
+] }
+leptos_meta = { git = "https://github.com/leptos-rs/leptos", features = [
+	"nightly",
+] }
+leptos_router = { git = "https://github.com/leptos-rs/leptos", features = [
+	"nightly",
+] }
 log = "0.4.17"
 simple_logger = "4.0.0"
 serde = { version = "1", features = ["derive"] }
@@ -36,7 +43,7 @@ sqlx = { version = "0.6.2", features = [
 ], optional = true }
 thiserror = "1.0.38"
 wasm-bindgen = "0.2.85"
-femark = { version = "0.1.3", optional = true }
+femark = { version = "=0.1.3", optional = true }
 axum-extra = { version = "0.7.4", optional = true, features = ["cookie"] }
 web-sys = { version = "0.3", optional = true, features = [
 	"HtmlDocument",

Dockerfile

@@ -11,7 +11,7 @@ RUN tar -xvf cargo-binstall-x86_64-unknown-linux-musl.tgz
 RUN cp cargo-binstall /usr/local/cargo/bin
 
 # Install cargo-leptos
-RUN cargo binstall cargo-leptos -y
+RUN cargo binstall cargo-leptos@0.1.11 -y
 
 # Add the WASM target
 RUN rustup target add wasm32-unknown-unknown

input.css

@@ -8,6 +8,10 @@ html {
   background-color: #F2F8FA;
 }
 
+leptos-island {
+  display: contents;
+}
+
 /*
 CODE TOKENIZATION STUFF https://crates.io/crates/femark
 

src/app.rs

@@ -18,13 +18,7 @@ pub fn App() -> impl IntoView {
         />
         <Router>
             <Routes>
-                <Route
-                    path=""
-                    view=|| {
-                        view! { <Home/> }
-                    }
-                    ssr=SsrMode::Async
-                />
+                <Route path="" view=Home ssr=SsrMode::Async/>
             </Routes>
         </Router>
         <script defer data-domain="leptos.dev" src="https://plausible.io/js/script.js"></script>

src/components/CodeExample.rs

@@ -49,13 +49,6 @@ pub fn CodeExampleLayout(
     let border_class = if border { "border" } else { "" };
     let code_children_class = "w-full lg:max-w-md max-w-full p-3 md:p-6 bg-[#0b081a] text-[14px] lg:text-[16px]  text-white  overflow-x-scroll";
 
-    let wasm_loaded = create_rw_signal(false);
-    create_effect(move |_| {
-        request_animation_frame(move || {
-            wasm_loaded.set(true);
-        })
-    });
-
     view! {
         <div class=format!(
             "flex flex-col lg:flex-row w-full  max-w-4xl  border-black border-opacity-30 bg-white rounded-md overflow-hidden mx-auto {} {}",
@@ -93,11 +86,6 @@ pub fn CodeExampleLayout(
                         <span class="w-3 h-3 rounded-full bg-light_blue"></span>
                     </div>
                 </div>
-                {move || (!wasm_loaded()).then(|| view! {
-                    <p class="w-full bg-beige text-black p-2 text-center">
-                        "Interactive examples may not function as expected before JS/WASM have loaded."
-                    </p>
-                })}
                 <div class=format!("w-full h-full {}", background)>{children()}</div>
             </div>
         </div>

src/components/ExampleServerFunction.rs

@@ -15,7 +15,6 @@ pub async fn save_favorites(
 pub const EXAMPLE_SERVER_FUNCTION_CODE: &str = r#"```rust
 #[server(SaveFavorites, "/api")]
 pub async fn save_favorites(
-    
     favorite_cookie_type: String,
     favorite_color: String,
 ) -> Result<(), ServerFnError> {
@@ -60,17 +59,17 @@ pub fn FavoritesForm() -> impl IntoView {
             </label>
             <input type="submit"/>
         </ActionForm>
-        <Show when=favorites.pending() fallback=|_| ()>
+        <Show when=favorites.pending()>
             <div>"Loading..."</div>
         </Show>
-        <Show when=move || value.with(Option::is_some) fallback=|_| ()>
+        <Show when=move || value.with(Option::is_some)>
             <div>{value}</div>
         </Show>
     }
 }
 ```"#;
 
-#[component]
+#[island]
 pub fn ExampleServerFunction() -> impl IntoView {
     let favorites = create_server_action::<SaveFavorites>();
     let value = favorites.value();