feat: more island injection strategies

[sanyuan0704]

Is your feature request related to a problem? Please describe.

Now island component can only hang on window object globally and it is difficult if we want to lazyload it.

In Astro, you can lazyload the island component by multi directives:

<ShowHideButton client:idle />
<HeavyImageCarousel client:visible />
<SidebarToggle client:media="(max-width: 50em)" />

So the key is that island component can be loaded dynamically.Then we can use requestIdleCallback, IntersectionObserver API or some custom logic to decide to load the component in proper time.

Describe the solution you'd like

In Island.js, we can implement above feature in these parts:

• Expose more island config to user, such as __island="visible" | "idle" | "media".
• Islands bundle build phase, we should hang the load function instead of component itself so that the component to can be loaded dynamically.
• In client runtime, we should optimize the hydrate script.Base on the island config by user, we choose to load the island component and hydrate it in the proper time.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[sanyuan0704]

I will work on it for a long way.