Replace the Tag class by a POJO to make the RenderableTreeNode serializable

[CapitaineToinon]

What happened?

I understand my use case is pretty specific and there are workarounds but that would be lovely it this could be fixed.

I'm trying to use Markdoc in an SSR app where the Markdoc.parse and Markdoc.transform are done on the server. The renderable node is then sent to the client and rendered there. With Remix, everything's fine since they use JSON.stringify and JSON.parse under the hood.

However if you try to use Markdoc with sveltekit, you won't be able to do that as they use devalue to get the data around. It can be argued that sveltekit should add an option to either add custom reducers for devalue or an option to opt out but at the same time, looking at the implementation of the Tag class, it seems to be a simple wrapper around some values and could easily be replaced by a POJO. I'd be up to create a PR for that.

What to you guys thing?

To reproduce

Just forked the devalue svelte repl and included some Markdoc example:

https://svelte.dev/repl/f9f7c58c7a9d440f84f11ef697ee8bdb?version=3.49.0

Version

0.4.0

Additional context

No response

[rpaul-stripe]

Hey @CapitaineToinon,

Using the class is actually completely optional. You can write your transform functions in your project so that they return a POJO with the shape {$$mdtype: 'Tag', name: 'foo', attributes: {}, children: []} and it should work exactly the same way. The Tag.isTag function checks the $$mdtype property rather than looking to see if a value is a tag instance, so it will still work as expected.

I'm not really familiar with svelte or devalue, but I would assume you would be able to manually serialize the renderable tree to JSON somewhere before it hits the framework. You can just wrap JSON.stringify around the output of Markdoc.transform and then call JSON.parse on it before rendering.

At Stripe, we also serialize our renderable tree to JSON on the server side and render it on the client — Markdoc was actually designed specifically to support that use case. I'm not sure I understand why that wouldn't work with Svelte, maybe there's something I'm missing about how it does SSR.

In any event, I don't think we can accept the PR as written because eliminating the Tag class would be a significant non-backwards-compatible change that would require everyone to rewrite their custom tag definitions.

[CapitaineToinon]

Oh I wasn't aware I could do that. A bit of a shame you have to add a transform for all my node and tags though but for this use case it's just what I needed, thanks. I understand about the PR, I mostly did it to open the discussion and get familiar with the code base. I have to say, implementing a renderer for svelte and doing the PR made me realize how simple and straight forward markdoc is. Love using it.

[mfix-stripe]

thanks for the kind words @CapitaineToinon 🙏

[rpaul-stripe]

Glad it's working out for you! I'm going to close the PR and move this issue to a discussion thread so that it's discoverable for anybody else who may run into this.