Navigation

crates/core/liveview-native-core-jetpack/core/src/test/java/org/phoenixframework/liveview_jetpack/DocumentTest.kt

@@ -11,6 +11,7 @@ import org.phoenixframework.liveviewnative.core.Document
 import org.phoenixframework.liveviewnative.core.DocumentChangeHandler
 import org.phoenixframework.liveviewnative.core.LiveFile
 import org.phoenixframework.liveviewnative.core.LiveSocket
+import org.phoenixframework.liveviewnative.core.NavOptions
 import org.phoenixframework.liveviewnative.core.NodeData
 import org.phoenixframework.liveviewnative.core.NodeRef
 
@@ -245,4 +246,50 @@ class DocumentTest {
 </Column>"""
         assertEquals(expected, rendered)
     }
+
+    @Test
+    fun basic_nav_flow() = runTest {
+        val host = "127.0.0.1:4001"
+        val url = "http://$host/nav/first_page"
+
+        val liveSocket = LiveSocket.connect(url, "jetpack", null)
+        val liveChannel = liveSocket.joinLiveviewChannel(null, null)
+        val doc = liveChannel.document()
+
+        val expectedFirstDoc =
+                """
+               <Box size="fill" background="system-blue">
+                 <Text align="Center">
+                        first_page
+                   <Link destination="/nav/next">
+                        <Text class="bold">Next</Text>
+                   </Link>
+                 </Text>
+               </Box>
+           """.trimIndent()
+
+        val exp = Document.parse(expectedFirstDoc)
+        assertEquals(exp.render(), doc.render())
+
+        val secondUrl = "http://$host/nav/second_page"
+        liveSocket.navigate(secondUrl, NavOptions())
+
+        val secondChannel = liveSocket.joinLiveviewChannel(null, null)
+        val secondDoc = secondChannel.document()
+
+        val expectedSecondDoc =
+                """
+                <Box size="fill" background="system-blue">
+                  <Text align="Center">
+                        second_page
+                    <Link destination="/nav/next">
+                         <Text class="bold">Next</Text>
+                    </Link>
+                  </Text>
+                </Box>
+           """.trimIndent()
+
+        val secondExp = Document.parse(expectedSecondDoc)
+        assertEquals(secondExp.render(), secondDoc.render())
+    }
 }

crates/core/liveview-native-core-swift/Tests/LiveViewNativeCoreTests/LiveViewNativeCoreSocketTests.swift

@@ -57,3 +57,55 @@ final class LiveViewNativeCoreUploadTests: XCTestCase {
         try await live_channel.uploadFile(live_file)
     }
 }
+
+// Test basic navigation flow with LiveSocket
+func testBasicNavFlow() async throws {
+    let url = "http://127.0.0.1:4001/nav/first_page"
+    let secondUrl = "http://127.0.0.1:4001/nav/second_page"
+
+    let liveSocket = try await LiveSocket(url, "swiftui", .none)
+    let liveChannel = try await liveSocket.joinLiveviewChannel(.none, .none)
+
+    let doc = liveChannel.document()
+
+    let expectedFirstDoc = """
+        <Group id="flash-group" />
+        <VStack>
+            <Text>
+                first_page
+            </Text>
+            <NavigationLink id="Next" destination="/nav/next">
+                <Text>
+                    NEXT
+                </Text>
+            </NavigationLink>
+        </VStack>
+        """
+
+    let exp = try Document.parse(expectedFirstDoc)
+
+    XCTAssertEqual(doc.render(), exp.render())
+
+    let _ = try await liveSocket.navigate(secondUrl, NavOptions())
+
+    let secondChannel = try await liveSocket.joinLiveviewChannel(.none, .none)
+    let secondDoc = secondChannel.document()
+
+    let expectedSecondDoc = """
+        <Group id="flash-group" />
+        <VStack>
+            <Text>
+               second_page
+            </Text>
+            <NavigationLink id="Next" destination="/nav/next">
+                <Text>
+                    NEXT
+                </Text>
+            </NavigationLink>
+        </VStack>
+        """
+
+    let secondExp = try Document.parse(expectedSecondDoc)
+
+    XCTAssertEqual(secondDoc.render(), secondExp.render())
+}

crates/core/src/dom/mod.rs

@@ -85,6 +85,7 @@ pub struct Document {
     /// A count of the number of uploads, the server expects each upload to have an ascending unique ID.
     upload_ct: u64,
 }
+
 impl fmt::Debug for Document {
     #[inline]
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
@@ -95,6 +96,7 @@ impl fmt::Debug for Document {
         write!(f, "{:?}", &dot)
     }
 }
+
 impl fmt::Display for Document {
     #[inline]
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
@@ -559,6 +561,54 @@ impl Document {
         editor.finish();
         Ok(results)
     }
+
+    /// Returns the CSRF token if it is present in the page.
+    pub fn get_csrf_token(&self) -> Option<String> {
+        // HTML responses have
+        // <meta name="csrf-token"
+        // content="PBkccxQnXREEHjJhOksCJ1cVESUiRgtBYZxJSKpAEMJ0tfivopcul5Eq">
+        let meta_csrf_token: Option<String> = self
+            .select(Selector::Tag(ElementName {
+                namespace: None,
+                name: "meta".into(),
+            }))
+            .map(|node_ref| self.get(node_ref))
+            // We need the node of the element with a "name" attribute that equals "csrf-token"
+            .filter(|node| {
+                node.attributes()
+                    .iter()
+                    .filter(|attr| {
+                        attr.name.name == *"name" && attr.value == Some("csrf-token".to_string())
+                    })
+                    .last()
+                    .is_some()
+            })
+            // We now need the "content" value
+            .map(|node| {
+                node.attributes()
+                    .iter()
+                    .filter(|attr| attr.name.name == *"content")
+                    .map(|attr| attr.value.clone())
+                    .last()
+                    .flatten()
+            })
+            .last()
+            .flatten();
+
+        log::debug!("META CSRF TOKEN: {meta_csrf_token:#?}");
+
+        // LiveView Native responses have:
+        // <csrf-token value="CgpDGHsSYUUxHxdQDSVVc1dmchgRYhMUXlqANTR3uQBdzHmK5R9mW5wu" />
+        self.select(Selector::Tag(ElementName {
+            namespace: None,
+            name: "csrf-token".into(),
+        }))
+        .last()
+        .map(|node_ref| self.get(node_ref))
+        .and_then(|node| node.attributes().first().map(|attr| attr.value.clone()))
+        .flatten()
+        .or(meta_csrf_token)
+    }
 }
 
 #[repr(C)]

crates/core/src/live_socket/channel.rs

@@ -1,8 +1,5 @@
 use std::{sync::Arc, time::Duration};
 
-use log::{debug, error};
-use phoenix_channels_client::{Channel, Event, Number, Payload, Socket, Topic, JSON};
-
 use super::{LiveSocketError, UploadConfig, UploadError};
 use crate::{
     diff::fragment::{Root, RootDiff},
@@ -12,6 +9,8 @@ use crate::{
     },
     parser::parse,
 };
+use log::{debug, error};
+use phoenix_channels_client::{Channel, Event, Number, Payload, Socket, Topic, JSON};
 
 #[derive(uniffi::Object)]
 pub struct LiveChannel {
@@ -60,6 +59,7 @@ impl LiveFile {
 
 // For non FFI functions
 impl LiveChannel {
+    /// Retrieves the initial document received upon joining the channel.
     pub fn join_document(&self) -> Result<Document, LiveSocketError> {
         let new_root = match self.join_payload {
             Payload::JSONPayload {
@@ -137,8 +137,8 @@ impl LiveChannel {
         Ok(upload_id)
     }
 
-    // Blocks indefinitely, processing changes to the document using the user provided callback
-    // In `set_event_handler`
+    /// Blocks indefinitely, processing changes to the document using the user provided callback
+    /// In `set_event_handler`
     pub async fn merge_diffs(&self) -> Result<(), LiveSocketError> {
         // TODO: This should probably take the event closure to send changes back to swift/kotlin
         let document = self.document.clone();

crates/core/src/live_socket/error.rs

@@ -11,6 +11,10 @@ use crate::{
 
 #[derive(Debug, thiserror::Error, uniffi::Error)]
 pub enum LiveSocketError {
+    #[error("Error disconnecting")]
+    DisconnectionError,
+    #[error("Navigation Impossible")]
+    NavigationImpossible,
     #[error("Expected Json Payload, Was Binary")]
     PayloadNotJson,
     #[error("Could Not Parse Mime - {error}")]
@@ -30,6 +34,7 @@ pub enum LiveSocketError {
     },
     #[error("JSON Deserialization - {error}")]
     JSONDeserialization { error: String },
+
     #[error("CSFR Token Missing from DOM!")]
     CSFRTokenMissing,
 

crates/core/src/live_socket/mod.rs

@@ -1,12 +1,13 @@
 mod channel;
 mod error;
+mod navigation;
 mod socket;
 
 #[cfg(test)]
 mod tests;
 
 pub use channel::LiveChannel;
-use error::{LiveSocketError, UploadError};
+pub use error::{LiveSocketError, UploadError};
 pub use socket::LiveSocket;
 
 pub struct UploadConfig {