<is-land> for Islands Architecture

npm install @11ty/is-land

<script type="module" src="/is-land.js"></script>

<is-land>This is an island.</is-land>

<is-land on:visible on:idle>
	<!-- your HTML here -->

	<is-land on:media="(min-width: 64em)">
		<!-- Islands can be nested -->
		<!-- Islands inherit all of their parents’ loading conditions -->
	</is-land>
</is-land>

<is-land on:visible on:idle>
	<vanilla-web-component>
		Put your pre-JS fallback content in your web component.
	</vanilla-web-component>
</is-land>

<is-land on:visible on:idle>
  <template data-island>
    <vanilla-web-component>
      This component is post-JS.
    </vanilla-web-component>
  </template>
</is-land>

<is-land on:visible>
	<template data-island>
		<!-- CSS -->
		<style>
			/* My custom CSS */
		</style>
		<link rel="stylesheet" href="my-css-file.css" />

		<!-- JS -->
		<script type="module">
			console.log("Hydrating!");
		</script>
		<script type="module" src="my-js-file.js"></script>
	</template>
</is-land>

<style>
	is-land[ready] {
		background-color: lightgreen;
	}
</style>

<script type="module">
	// Define once for any number of Petite Vue islands.
Island.addInitType("petite-vue", async (target) => {
	const { createApp } = await import("https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js");
	createApp().mount(target);
});
</script>
<is-land on:visible type="petite-vue" v-scope="{ name: 'Vue' }">
  Hello from <span v-html="name">HTML</span>
</is-land>

<script type="module">
	// Define once for any number of Vue islands.
Island.addInitType("vue", async (target) => {
	const { createApp } = await import("https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.js");
	createApp({
		data: () => (target.dataset), // use <is-land data-> attributes as component data
	}).mount(target);
});
</script>
<is-land on:visible type="vue" data-name="Vue">
	Hello from <span v-text="name"></span>
</is-land>

<script type="module">
	// Define once for any number of Svelte islands.
Island.addInitType("svelte", async (target) => {
	// requires an Import map and svelte is lazy loaded when island is ready
	const { mount } = await import("svelte");
	const component = await import(target.getAttribute("import"));

	mount(component.default, {
		target: target,
		props: {},
	});
});
</script>
<!-- This example uses an Eleventy `svelte` Universal Filter (see SveltePlugin.cjs) -->
{% assign component = "./lib/svelte/my-component-js-only.svelte" | svelte %}
<is-land on:visible type="svelte" import="{{ component.clientJsUrl }}"></is-land>

<script type="module">
	// Define once for any number of Preact islands.
Island.addInitType("preact", async (target) => {
	const component = await import(target.getAttribute("import"));
	component.default(target);
});
</script>
<is-land on:visible type="preact" import="preact-component.js"></is-land>

<is-land on:visible import="lit-component.js">
  <lit-component name="Post-JS">Pre-JS Content</lit-web-component>
</is-land>

<script type="module">
	// Define once for any number of Alpine islands.
Island.addInitType("alpine", async (target) => {
	await import("https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js");
});

// Workaround for Alpine global mount
Island.addFallback("[x-data]", (node) => {
	if(node.hasAttribute("x-ignore")) {
		return;
  }

  node.setAttribute("x-ignore", "");

  return () => {
		node.removeAttribute("x-ignore");

    if(Alpine) {
			Alpine.nextTick(() => Alpine.initTree(node));
    }
  };
});
</script>
<is-land on:visible type="alpine">
  <div x-data="{ name: 'Alpine.js' }">
    Hello from <span x-text="name">HTML</span>!
  </div>
</is-land>