feat(nuxt): allow client components within NuxtIsland

[huang-julien]

🔗 Linked issue

#19772

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hi 👋 This PR finally introduce client components within island components.

How does it works ?

This still use Teleport and the same trick of reactivity from client-side slots.

• simply mark a component with a nuxt-client prop/attr -> <SugarCounter :multiplier nuxt-client />

How to enable it

This feature is behind a flag: experimental.componentIslands.selectiveClient (i'm open for any other name like nuxtClient, selectiveHydration ?) which needs to be set to true

About remote islands

• When using a NuxtIsland with remote islands (it's the source prop introduced in Nuxt 3.7), you need to set dangerouslyAllowClientComponents to true in order to load client components for security reasons (you should'nt trust a remote island)
  <NuxtIsland source="some-source.com" name="SomeComponent" dangerouslyAllowClientComponents />.
• Remote islands can only provide Vue components as client components
• Allow deeply selective hydration within server component (.server -> component -> component -> nuxt-client) later

About nuxt-client

Since we use nuxt-client to determine wich component should be loaded client-side, this means that this cannot be used as attribute by users (we remove it).

About payload

Since we cannot only rely on what is received by the HTML during hydration, this means we need to retrieve some additionnal payloads:

• props
• chunks
• teleports

What's next

• A refactor of server components
• A breaking change (if you're using remote islands) will probably come in a close future to settle a definitive API for islands components so other frameworks or servers (looking at you CMS 👀) can have a stable implementation to provide island components to Nuxt.

Todo (by priorities) - it's working but some small improvement can be done

• remove nuxt-client attr from the client component
• improve payload
• filter teleports (in the island response) if needed
• improve chunks (by using input or manualChunk)
  • IF using manualChunk instead of rollupOptions.build.input to chunk components, make manualChunk hookable so users can extend it
  • try to avoid making a single chunk for lazy components
  • if going for input, fix the client/ssr styles
• tests, unit and fixtures
  • fixtures
  • unit
• update doc
• Make the unplugin compatible with webpack (if possible :( ). (later....probably)
• some rename + clean code

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[danielroe]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt-nightly@pr-22649

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@e3b8b84). Click here to learn what that means.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #22649   +/-   ##
=======================================
  Coverage        ?   59.25%           
=======================================
  Files           ?        5           
  Lines           ?      945           
  Branches        ?       54           
=======================================
  Hits            ?      560           
  Misses          ?      385           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[danielroe]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt-nightly@pr-22649