Trying to understand where islandsByPath are filled

[codepunkt]

I'm trying to understand where islandsByPath gets filled. When debugging, it seems like the call to renderToString from @vue/server-renderer adds islands for the rendered path to the object by invoking renderToString with { islandsByPath, renderers } as second SSRContext parameter, but I'm completely dumbfounded on how this is done and why this works.

[ElMassimo]

Interesting question 😃

The answer is, through Vue's SSR Context.

You can see it being used in useIslandsForPath.

This composable is used in the Island component to gather information about rendered islands, in order to allow Rollup to build an optimized bundle for any JavaScript that should be shipped in the site.

[codepunkt]

That's a great answer, thanks! Where is the Island component being used? I couldn't find any reference to it.

[ElMassimo]

It's automatically injected when a hydration directive is detected, both in MDX and Vue templates.

Code is transformed using Vite plugins.

Add vite-plugin-inspect to a site, and visit the inspector for a Vue file with a hydration directive, and you will be able to see the transformations step-by-step.

[codepunkt]

That's genius! I'm trying to build something similar, but for preact only. Seems a lot harder, as it doesn't have the parser, amongst other things.

[ElMassimo]

You might be interested on this framework which uses React.

The reason I picked Vue is that plain HTML is valid as a Vue template, and Vue is great at encapsulation while being convenient, making it ideal for both dynamic and static sites.

Just in case, have in mind that you can use Preact islands in îles, mentioning it because some people assume it's only for Vue.