More aggressively update scrollable element. Add test for obtaining streaming result

Author: cpsievert

js/markdown-stream/markdown-stream.ts

@@ -92,24 +92,24 @@ class MarkdownElement extends LightElement {
   protected willUpdate(changedProperties: PropertyValues): void {
     if (changedProperties.has("content")) {
       this.#isContentBeingAdded = true;
-      // A scrollable element might not be available until the content
-      // grows to a certain size. So, keep looking for it until it's found.
-      if (!this.#scrollableElement) this.#updateScrollableElement();
-    }
-    if (changedProperties.has("streaming")) {
-      this.#updateScrollableElement();
     }
+    super.willUpdate(changedProperties);
   }
 
   protected updated(changedProperties: Map<string, unknown>): void {
     if (changedProperties.has("content")) {
+      // Post-process DOM after content has been added
       try {
         this.#highlightAndCodeCopy();
       } catch (error) {
         console.warn("Failed to highlight code:", error);
       }
-
       if (this.streaming) this.#appendStreamingDot();
+
+      // Update scrollable element after content has been added
+      this.#updateScrollableElement();
+
+      // Possibly scroll to bottom after content has been added
       this.#isContentBeingAdded = false;
       this.#maybeScrollToBottom();
     }

shiny/www/py-shiny/markdown-stream/markdown-stream.js

@@ -1,7 +1,8 @@
+import asyncio
 from pathlib import Path
 
 from shiny import reactive
-from shiny.express import ui
+from shiny.express import render, ui
 
 # Read in the py-shiny README.md file
 readme = Path(__file__).parent / "README.md"
@@ -10,11 +11,12 @@
 
 
 stream = ui.MarkdownStream("shiny-readme")
-stream2 = ui.MarkdownStream("shiny-readme-err")
+stream_err = ui.MarkdownStream("shiny-readme-err")
 
 
-def readme_generator():
+async def readme_generator():
     for chunk in readme_chunks:
+        await asyncio.sleep(0.02)
         yield chunk + " "
 
 
@@ -28,7 +30,7 @@ def readme_generator_err():
 @reactive.effect
 async def _():
     await stream.stream(readme_generator())
-    await stream2.stream(readme_generator_err())
+    await stream_err.stream(readme_generator_err())
 
 
 with ui.card(
@@ -41,4 +43,29 @@ async def _():
 
 with ui.card(class_="mt-3"):
     ui.card_header("Shiny README.md with error")
-    stream2.ui()
+    stream_err.ui()
+
+
+basic_stream = ui.MarkdownStream("basic-stream-result")
+basic_stream.ui()
+
+
+def basic_generator():
+    yield "Basic "
+    yield "stream"
+
+
+@reactive.calc
+async def stream_task():
+    return await basic_stream.stream(basic_generator())
+
+
+@reactive.effect
+async def _():
+    await stream_task()
+
+
+@render.text
+async def stream_result():
+    task = await stream_task()
+    return f"Stream result: {task.result()}"

shiny/www/py-shiny/markdown-stream/markdown-stream.js.map

@@ -1,5 +1,6 @@
 from playwright.sync_api import Page, expect
 
+from shiny.playwright import controller
 from shiny.run import ShinyAppProc
 
 
@@ -43,3 +44,6 @@ def test_validate_stream_basic(page: Page, local_app: ShinyAppProc) -> None:
     notification = page.locator(".shiny-notification-error")
     expect(notification).to_be_visible(timeout=30 * 1000)
     expect(notification).to_contain_text("boom!")
+
+    txt_result = controller.OutputText(page, "basic-stream-result")
+    txt_result.expect_value("Stream result: Basic stream")