Fix infinite loop in parser when streaming with unclosed formatting markers (#154)

Author: Copilot

.github/workflows/preview.yml

@@ -0,0 +1,40 @@
+name: Surge PR Preview
+
+on:
+  pull_request:
+    paths:
+      - 'example/**'
+      - 'src/**'
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+      - name: ⤵️ Checkout
+        uses: actions/checkout@v4
+
+      - name: 🎉 Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: 🚧 Install dependencies
+        run: npm install
+
+      - name: 🚀 Build library
+        run: npm run build
+
+      - name: 📦 Build example
+        run: npx vite build -c vite.config.example.mjs
+
+      - name: 🌊 Deploy to Surge
+        uses: afc163/surge-preview@v1
+        with:
+          surge_token: ${{ secrets.SURGE_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          dist: example/dist
+          build: |
+            echo "Already built"

.gitignore

@@ -146,6 +146,11 @@ dist/
 es/
 lib/
 /types/
+example/dist/
 
 # Snapshot
 __tests__/snapshot/**/*-actual.*
+
+# Test files
+test-streaming.html
+test-streaming-node.ts

__tests__/parser/syntax-parser.spec.ts

@@ -382,4 +382,84 @@ Total revenue reached [¥5M](metric_value, origin=5000000) with **strong growth*
     expect(phrase.metadata?.detail).toEqual([1, 2, 3]);
     expect((phrase.metadata as Record<string, unknown>).active).toBe(true);
   });
+
+  it('should handle unclosed bold formatting without infinite loop', () => {
+    const syntax = `Text with **unclosed bold at the end`;
+    const result = parseSyntax(syntax);
+
+    expect(result.sections).toHaveLength(1);
+    const phrases = result.sections![0].paragraphs![0].phrases;
+
+    // Should parse without hanging
+    expect(phrases.length).toBeGreaterThan(0);
+    expect(phrases[0].value).toBe('Text with ');
+    expect(phrases[1].value).toBe('**');
+    expect(phrases[2].value).toBe('unclosed bold at the end');
+  });
+
+  it('should handle unclosed italic formatting without infinite loop', () => {
+    const syntax = `Text with *unclosed italic at the end`;
+    const result = parseSyntax(syntax);
+
+    expect(result.sections).toHaveLength(1);
+    const phrases = result.sections![0].paragraphs![0].phrases;
+
+    // Should parse without hanging
+    expect(phrases.length).toBeGreaterThan(0);
+    expect(phrases[0].value).toBe('Text with ');
+    expect(phrases[1].value).toBe('*');
+    expect(phrases[2].value).toBe('unclosed italic at the end');
+  });
+
+  it('should handle unclosed underline formatting without infinite loop', () => {
+    const syntax = `Text with __unclosed underline at the end`;
+    const result = parseSyntax(syntax);
+
+    expect(result.sections).toHaveLength(1);
+    const phrases = result.sections![0].paragraphs![0].phrases;
+
+    // Should parse without hanging
+    expect(phrases.length).toBeGreaterThan(0);
+    expect(phrases[0].value).toBe('Text with ');
+    expect(phrases[1].value).toBe('__');
+    expect(phrases[2].value).toBe('unclosed underline at the end');
+  });
+
+  it('should handle multiple unclosed formatting markers', () => {
+    const syntax = `Text **bold __underline *italic`;
+    const result = parseSyntax(syntax);
+
+    expect(result.sections).toHaveLength(1);
+    const phrases = result.sections![0].paragraphs![0].phrases;
+
+    // Should parse without hanging and treat all markers as plain text
+    expect(phrases.length).toBeGreaterThan(0);
+  });
+
+  it('should handle streaming-like partial syntax without infinite loop', () => {
+    // This simulates what happens during streaming when text is incrementally added
+    const partialChunks = [
+      'The **premium segment**',
+      'The **premium segment** (devices over $800) showed *remarkable',
+      'The **premium segment** (devices over $800) showed *remarkable* [resilience](trend_desc',
+    ];
+
+    // Each chunk should parse without infinite loop
+    partialChunks.forEach((chunk) => {
+      const result = parseSyntax(chunk);
+      expect(result.sections).toBeDefined();
+    });
+  });
+
+  it('should handle formatting markers at exact string boundaries', () => {
+    // Test edge cases where markers appear at the very end
+    const testCases = [{ text: 'x**' }, { text: 'x__' }, { text: 'ab**' }, { text: 'ab__' }];
+
+    testCases.forEach(({ text }) => {
+      const result = parseSyntax(text);
+      expect(result.sections).toBeDefined();
+      // Should complete without hanging
+      expect(result.sections!.length).toBeGreaterThanOrEqual(0);
+    });
+  });
 });

example/main.ts

@@ -53,8 +53,8 @@ const app1 = document.getElementById('app1');
 const text1 = new Text(app1!);
 (async () => {
   let chunk = '';
-  for (let i = 0; i < syntax.length; i += 50) {
-    chunk += syntax.slice(i, i + 50);
+  for (let i = 0; i < syntax.length; i += 10) {
+    chunk += syntax.slice(i, i + 10);
     text1.render(chunk);
     await new Promise((resolve) => setTimeout(resolve, 160));
   }

src/parser/syntax-parser.ts

@@ -280,7 +280,7 @@ function parseTextWithFormatting(text: string): PhraseSpec[] {
     let foundFormatting = false;
 
     // Check for bold (**text**)
-    if (currentIndex + 2 < textLength && text.substring(currentIndex, currentIndex + 2) === '**') {
+    if (currentIndex + 1 < textLength && text.substring(currentIndex, currentIndex + 2) === '**') {
       const endIndex = text.indexOf('**', currentIndex + 2);
       if (endIndex !== -1) {
         const content = text.substring(currentIndex + 2, endIndex);
@@ -291,11 +291,19 @@ function parseTextWithFormatting(text: string): PhraseSpec[] {
         });
         currentIndex = endIndex + 2;
         foundFormatting = true;
+      } else {
+        // No closing marker found, treat the opening marker as plain text
+        phrases.push({
+          type: PhraseType.TEXT,
+          value: '**',
+        });
+        currentIndex += 2;
+        foundFormatting = true;
       }
     }
 
     // Check for underline (__text__)
-    if (!foundFormatting && currentIndex + 2 < textLength && text.substring(currentIndex, currentIndex + 2) === '__') {
+    if (!foundFormatting && currentIndex + 1 < textLength && text.substring(currentIndex, currentIndex + 2) === '__') {
       const endIndex = text.indexOf('__', currentIndex + 2);
       if (endIndex !== -1) {
         const content = text.substring(currentIndex + 2, endIndex);
@@ -306,6 +314,14 @@ function parseTextWithFormatting(text: string): PhraseSpec[] {
         });
         currentIndex = endIndex + 2;
         foundFormatting = true;
+      } else {
+        // No closing marker found, treat the opening marker as plain text
+        phrases.push({
+          type: PhraseType.TEXT,
+          value: '__',
+        });
+        currentIndex += 2;
+        foundFormatting = true;
       }
     }
 
@@ -321,6 +337,14 @@ function parseTextWithFormatting(text: string): PhraseSpec[] {
         });
         currentIndex = endIndex + 1;
         foundFormatting = true;
+      } else {
+        // No closing marker found, treat the opening marker as plain text
+        phrases.push({
+          type: PhraseType.TEXT,
+          value: '*',
+        });
+        currentIndex += 1;
+        foundFormatting = true;
       }
     }
 
@@ -343,19 +367,32 @@ function parseTextWithFormatting(text: string): PhraseSpec[] {
           value: plainText,
         });
       }
-      currentIndex = nextMarkerIndex;
 
-      // If we're at the end and haven't moved, break to avoid infinite loop
-      if (currentIndex === textLength) {
-        break;
+      // If we found a marker at currentIndex but couldn't process it (due to boundary conditions),
+      // we need to treat it as plain text and advance past it
+      if (nextMarkerIndex === currentIndex && currentIndex < textLength) {
+        // Determine marker length at current position
+        let markerLength = 1;
+        if (currentIndex + 1 < textLength) {
+          const twoChar = text.substring(currentIndex, currentIndex + 2);
+          if (twoChar === '**' || twoChar === '__') {
+            markerLength = 2;
+          }
+        }
+
+        phrases.push({
+          type: PhraseType.TEXT,
+          value: text.substring(currentIndex, currentIndex + markerLength),
+        });
+        currentIndex += markerLength;
+      } else {
+        currentIndex = nextMarkerIndex;
       }
-      if (currentIndex === nextMarkerIndex && nextMarkerIndex === textLength) {
+
+      // If we're at the end, break to avoid infinite loop
+      if (currentIndex === textLength) {
         break;
       }
-      // If we found no markers and are not at end, skip one character to avoid infinite loop
-      if (nextMarkerIndex === textLength && currentIndex < textLength) {
-        currentIndex++;
-      }
     }
   }
 

vite.config.example.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
+
+export default defineConfig({
+  root: './example',
+  base: './',
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+  plugins: [preact()],
+});