Single Fetch: json serialization is unstable about remix HOT 10 CLOSED

I can somewhat workaround this by changing my server-side object declaration to match what client renders, i.e.

{
  name: 'Hello, World!',
  '@context': 'https://schema.org',
},

But this is finicky and problematic because I have ESLint rule that auto sorts properties alphabetically.

from remix.

This looks like it's coming from internal JSON.parse behavior that must order numeric object keys:

@jacob-ebey What do you think about prefixing those with _ or something in turbo-stream to make them non-numeric?

from remix.

I think in my case it is the properties that start with @.

from remix.

It's not related to the name of the key. It's due to the reuse of a name property that was previously used. turbo-stream dedupes keys and values to keep the payload minimal, and it tracks them basically with an incrementing integer. When you return something like the following, the first occurrence of name gets assigned a lower integer than @context and then the second occurrence of name re-uses the earlier/lower id.

export const loader = () => {
  return {
    meta: [
      { 
        name: 'description', 
        // ^ `name` here gets assigned a lower numeric id since it's earlier
        content: 'Welcome to Remix!',
     },
      {
        'script:ld+json': [
          {
            '@context': 'https://schema.org',
             // ^ `@context` here gets assigned a higher numeric id since it's later
             name: 'Hello, World!',
             // ^ `name` here reuses the earlier (lower) numeric id
          },
        ],
      },
    ],
  };
};

This results in the problem I described above where we stringify an object with a higher numeric key, followed by a lower numeric key - and JSON.parse re-orders them when parsing, moving name before @context

from remix.

I believe I have addressed this with [email protected]. I can no longer reproduce it in the stackblitz: https://stackblitz.com/edit/remix-run-remix-eliwev?file=package.json

from remix.

I think the serialization is still unstable in a slightly different manner - just not surfacing this specific meta/json+ld issue. Here's a simplified repro on 2.2.3: https://stackblitz.com/edit/remix-run-remix-bbrwkg?file=app%2Froutes%2F_index.tsx

from remix.

Added some better tests and addressed it here: jacob-ebey/turbo-stream#45

from remix.

👍 Awesome - the above stackblitz is fixed with [email protected] via the solution in #9421 (comment).

from remix.

[email protected] will be the default version in Remix 2.11.2 (currently in prerelease, stable release later this week) so you won't need your own turbo-stream dependency in your package.json once upgrading 👍

from remix.

Thank you!

from remix.