SSE plugin trims whitespace

[MikeDepies]

This is fine for 99% of use-cases, however in the event the user wants to send down formatted text in a pretag, this becomes an issue. Maybe I'm missing something that could prevent this.

https://github.com/starfederation/datastar/blob/develop/library/src/plugins/official/backend/actions/sse.ts#L135

[bencroker]

Please provide a demonstrable example so I can investigate this.

[owenis4]

Here is an example where the first html snippet is when loading the page, and the second snippet is when the fragment is sent over SSE. Any formatted text like JSON that uses tabs or spacing for format gets trimmed. Probably a .trim() somewhere in the code

On load fragment:

<textarea class="json-editor w-full h-full p-4 bg-zinc-900 text-stone-300 resize-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent" placeholder="Enter JSON here..." spellcheck="false">[
    {
        "type": "MarketInput",
        "id": "d4730266-929f-4f30-9630-b82437dd2a7b",
        "name": "Finance Market Input",
        "primaryPaths": [
            {
                "path": "finance/open",
                "name": "Open"
            },
            {
                "path": "finance/high",
                "name": "High"
            },
            {
                "path": "finance/low",
                "name": "Low"
            },
            {
                "path": "finance/close",
                "name": "Close"
            },
            {
                "path": "finance/date",
                "name": "Date"
            }
        ]
    }
]</textarea>

Over SSE Fragment:

<textarea class="json-editor w-full h-full p-4 bg-zinc-900 text-stone-300 resize-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent" placeholder="Enter JSON here..." spellcheck="false">[
{
"type": "MarketInput",
"id": "d4730266-929f-4f30-9630-b82437dd2a7b",
"name": "Finance Market Input",
"primaryPaths": [
{
"path": "finance/open",
"name": "Open"
},
{
"path": "finance/high",
"name": "High"
},
{
"path": "finance/low",
"name": "Low"
},
{
"path": "finance/close",
"name": "Close"
},
{
"path": "finance/date",
"name": "Date"
}
]
}
]</textarea>

Here is the response the browser receives, with the JSON still formatted correctly. The data-star code must be calling trim

data: fragments <textarea class="json-editor w-full h-full p-4 bg-zinc-900 text-stone-300 resize-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent" placeholder="Enter JSON here..." spellcheck="false">[
data: fragments     {
data: fragments         &quot;type&quot;: &quot;MarketInput&quot;,
data: fragments         &quot;id&quot;: &quot;d4730266-929f-4f30-9630-b82437dd2a7b&quot;,
data: fragments         &quot;name&quot;: &quot;Finance Market Input&quot;,
data: fragments         &quot;primaryPaths&quot;: [
data: fragments             {
data: fragments                 &quot;path&quot;: &quot;finance/open&quot;,
data: fragments                 &quot;name&quot;: &quot;Open&quot;
data: fragments             },
data: fragments             {
data: fragments                 &quot;path&quot;: &quot;finance/high&quot;,
data: fragments                 &quot;name&quot;: &quot;High&quot;
data: fragments             },
data: fragments             {
data: fragments                 &quot;path&quot;: &quot;finance/low&quot;,
data: fragments                 &quot;name&quot;: &quot;Low&quot;
data: fragments             },
data: fragments             {
data: fragments                 &quot;path&quot;: &quot;finance/close&quot;,
data: fragments                 &quot;name&quot;: &quot;Close&quot;
data: fragments             },
data: fragments             {
data: fragments                 &quot;path&quot;: &quot;finance/date&quot;,
data: fragments                 &quot;name&quot;: &quot;Date&quot;
data: fragments             }
data: fragments         ]
data: fragments     }
data: fragments ]</textarea></div>

[bencroker]

Thanks! Fixed in #678. You can test using https://github.com/starfederation/datastar/blob/develop/bundles/datastar.js