Use comments instead of honox-island for marking islands

[yusukebe]

What is the feature you are proposing?

This does not request a new feature but is about implementation.

Currently, to mark a component as an island component, we use hono-island tag like the following:

<honox-island component-name="/islands/badge.tsx" data-serialized-props='{"name":"Hono"}'>
  <div>
    Hey Hono!
  </div>
</honox-island>

But, this cause some problems:

• Difficult to hydrate HTML correctly, related to Nested islands hydrate error 2 #155
• Made mismatch of HTML tags structure, related to <honox-island> tag breaks direct child CSS #141

So, instead, perhaps, we may use a comment:

<!--honox-island component-name:islands_badge.tsx data-serialized-props:'{"name":"Hono"}'-->
  <div>
    Hey Hono!
  </div>
<!--/honox-island-->

If this method will resolve some issues, we must try implementing it.

[yasuaki640]

Just to confirm the direction, are you thinking of implementing a component that outputs HTML comments in SSR or something in that direction?

[yusukebe]

Hi @yasuaki640

No particular direction. Either is fine if we can make it possible.

And, I'm not picky about using comments. If we can get the React hydration right and not break the HTML structure with it, it's OK.

[usualoma]

The approach we should adopt is subtle, but the following code can be spit out of React, which may achieve the objective. 😵‍💫

<script>
  document.write('<!--honox-island component-name:islands_badge.tsx data-serialized-props:'{"name":"Hono"}'-->')
  document.currentScript.remove()
</script>
  <div>
    Hey Hono!
  </div>
<script>
  document.write('<!--/honox-island-->')
  document.currentScript.remove()
</script>