Add support for detecting islands in pug templates

[luminarious]

• [*] I have read the troubleshooting section before opening an issue.
• [*] I have tried upgrading iles and vite.

Description 📖

client:* directives cannot be used with Pug templating language.

Reproduction 🐞

https://stackblitz.com/edit/iles-dy6fcn?file=src/pages/index.vue
None of the GrowButtons are recognized as islands.

[luminarious]

Stackblitz runs dev mode by default, have to manually stop and run npm run build && npm run preview

[ElMassimo]

Hi again Hardi!

Currently, hydration directives are detected by traversing the template nodes obtained using parse from @vue/compiler-sfc, and then checking whether a node has a client: property.

For Pug templates, @vue/compiler-sfc will parse the template as text (instead of html nodes), which means the current algorithm does not have the necessary data to work with.

---

I'm open to adding support for pug, as long as it doesn't affect performance for other use cases.

It's likely that it will require using the pug engine to parse the template content and obtain an AST or some kind of tree, which allows traversing the nodes to detect hydration directives, to then wrap those nodes inside an Island.

Let me know if you are interested in exploring this, contributions are welcome!

[luminarious]

I wish I could be of any help there, but parsing and compilation are so far outside my comfort zone 😅

Would it be possible to add the entire Island component manually, instead of using the attribute?

[ElMassimo]

parsing and compilation are so far outside my comfort zone 😅

It's ok, just checking. I might be able to take a look over the next couple of weeks.

Would it be possible to add the entire Island component manually, instead of using the attribute?

Possible, yes, but very cumbersome (to a point where using an html template might end up being more convenient, ha)

---

In the meantime, a workaround if you want to keep using pug, is to create a dummy component with a normal template, and apply the hydration tags passing any additional props:

// src/components/LazyGrowButton.vue
<template>
  <GrowButton client:load v-bind="$attrs"/>
</template>

You can then use LazyGrowButton in pug templates without issues, and it will be hydrated as expected.