Enhance StreamingMarkdownElement to consume initial child content on connection and update version to 0.1.5. Add new demo content in index.html for improved user experience.

Author: Tim Willebrands

docs/index.html

@@ -25,6 +25,35 @@ <h1>Streaming Markdown Demo</h1>
       <button id="reset">Reset</button>
     </div>
     <streaming-md id="md"></streaming-md>
+    <streaming-md>
+   *[DIAL-UP MODEM SOUNDS INTENSIFY]*
+
+
+# \U0001f389 PROOMPTING: The Future Is Now, Thanks To Science!
+
+**SOI SOI SOI SOI SOI SOI SOI**
+
+Greetings, fellow carbon-based life forms! Microsoft Sam here, and boy oh boy, do I have something SPECTACULAR to show you today! Remember when I used to read your emails back in Windows XP? Well, those days are OVER because now I'm here to tell you about PROOMPTING - the most REVOLUTIONARY chat application since... well... since ME!
+
+## What The Heck Is This Thing?
+
+Picture this: It's 2001. You've got your Windows XP machine humming along, Limewire is downloading your "totally legal" MP3s, and your 56k modem is screaming into the void. But WAIT! What if I told you that you could chat with an ARTIFICIAL INTELLIGENCE right from your desktop? That's right, folks - we've taken the best parts of Windows XP and SUPERCHARGED them with \u2728AI\u2728!
+
+```
+\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
+\u2502 \U0001f5a5\ufe0f AUTHENTIC XP DESKTOP EXPERIENCE  \u2502
+\u2502 \U0001f916 REAL AI THAT SOMEWHAT WORKS      \u2502
+\u2502 \U0001f4ac CHAT ROOMS (LIKE MSN BUT BETTER) \u2502
+\u2502 \u26a1 FASTER THAN DIALUP (THANKFULLY)  \u2502
+\u2502 \U0001f504 REAL-TIME MESSAGE STREAMING      \u2502
+\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
+\\\`
+
+Link (wow): [Windows XP](https://www.microsoft.com/en-us/windowsxp/)
+
+
+*[WINDOWS XP SHUTDOWN SOUND]*
+    </streaming-md>
   </main>
 
   <script type="module">

index.ts

@@ -35,6 +35,8 @@ class StreamingMarkdownElement extends HTMLElement {
     this.parser = smd.parser(smd.default_renderer(this.container));
     // Capture text nodes appended by htmx SSE/WebSocket handlers
     this.observer.observe(this, { childList: true });
+    // Consume any initial child content present at connect time
+    this.consumeInitialChildren();
   }
 
   disconnectedCallback(): void {
@@ -79,6 +81,21 @@ class StreamingMarkdownElement extends HTMLElement {
     }
   };
 
+  private consumeInitialChildren(): void {
+    const snapshot = Array.from(this.childNodes);
+    for (const node of snapshot) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = (node as Text).data;
+        if (text) this.appendChunk(text);
+        node.parentNode?.removeChild(node);
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const text = (node as Element).textContent || "";
+        if (text) this.appendChunk(text);
+        node.parentNode?.removeChild(node);
+      }
+    }
+  }
+
   private autoScrollIfNearBottom(): void {
     // Only scroll if the user is near the bottom to avoid disrupting reading
     const host = this;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "streaming-markdown-component",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "description": "<streaming-md> custom element that streams markdown using streaming-markdown",
   "keywords": ["markdown", "streaming", "web-components", "custom-element", "htmx", "sse", "websocket"],
   "license": "MIT",