ElMassimo / ElMassimo/iles

Allow Vue islands to be nested

Open
#165 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
1.2k
Forks
36
PR merge metrics
No merged PRs in 30d

Description

### Description 📖

In some use cases it can be convenient to ignore client directives when an ancestor component is already an island.

An example from [this thread](https://github.com/ElMassimo/iles/issues/128#issuecomment-1189839536):

```
- EventContent
- EventDetails (client:load)
- NewsSubscription
- EmailSubscription (client:load)
```

and

```
- EventsContent
- NewsSubscription
- EmailSubscription (client:load)
```

### Implementation Details ⚙️

During page generation, it would be necessary for `Island` to `provide` a context, which can be detected by nested islands, to avoid rendering an additional client-side script and instead simply render the inner component.

Additionally, when building the client bundle, it would be necessary to replace [`Island`](https://github.com/ElMassimo/iles/blob/main/packages/iles/src/client/app/components/Island.vue) with a no-op implementation, to avoid injecting an additional script to hydrate that inner component.

Further discussion is needed to understand the impact on style extraction, and whether these two changes are actually implementable.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.