Plugin system?

[steve8708]

We see this example of a Hydrogen "plugin" but I am having trouble finding docs about how we can make a plugin like this as well

Specifically, we would like to make an even better integration with Partytown for Hydrogen. There are still a few steps you need to know about when using Partytown with Hydrogen, namely copying files and including a few things

I would love to do more like our Nuxt plugin, where there is 0 config and handles this stuff behind the hood. Similarly we are working on a 0 config approach for Next.js too

Would love any guidance or happy to collaborate on how we can do similar with Hydrogen. Knowing e-com businesses first hand, there are a looot of 3rd party analytics / conversion tracking / other scripts to deal with. We've seen repeatedly you can have an incredibly fast loading, near-0 JS site... until you need to add in all of your 3rd party analytics and other scripts.

So I think a really easy integration for Hydrogen is a major win, not just for Hydrogen, but for partners that depend on custom JS to run and don't have the time to rebuild everything they already have, and obviously for merchants who just need to integrate JS and don't have time to rebuild all 3rd party logic.

Separately, we'd love to make our Builder.io integration a plugin as well

[benjaminsehl]

Steve! So glad you brought this up. Would love to discuss, this is something I'd love to figure out; creating a React-first design implementation for Shopify apps.

The Shopify side is working on taking the release candidate to the finish line right now, but I can probably get some folks from the team on this shortly.

Working with Partytown & Builder would be awesome.

[frandiox]

@steve8708 Hi, thanks for starting this!
For the time being, I think most of this integration could be done as a generic Vite plugin if I didn't understand things wrong. It would work in Hydrogen and other Vite-based projects. Vite hooks are explained here.

Specifically, I think you could check the buildStart hook to move Partytown files into public directory. To avoid copying files for the 3 builds we have (client, server, worker), you can use configResolved hook to store the config in the outer scope, which will give you information about the current build (config.build.ssr: boolean, I think) so you can copy files only for client builds.

Apart from that, you might want to considertransformIndexHtml hook to add a script tag to the head of every SSRed page. Perhaps this is not needed if you include the React component in App.server.jsx, not sure.

Happy to assist with any question 👍

[steve8708]

Terrific, this gives is a place to dig in, thanks @frandiox!