@islands/hydration/dist/svelte.js

Hydration utilities for îles

import { onDispose } from "./hydration.js";
import { createRawSnippet, mount, unmount } from "svelte";
//#region svelte.ts
function createIsland(Component, id, el, props, slots = {}) {
	let children;
	let $$slots;
	let renderFns = {};
	Object.entries(slots).forEach(([slotName, html]) => {
		const fnName = slotName === "default" ? "children" : slotName;
		renderFns[fnName] = createRawSnippet(() => ({ render: () => html }));
		$$slots ??= {};
		if (slotName === "default") {
			$$slots.default = true;
			children = renderFns[fnName];
		} else $$slots[fnName] = renderFns[fnName];
	});
	const component = mount(Component, {
		target: el,
		props: {
			...props,
			children,
			$$slots,
			...renderFns
		}
	});
	if (import.meta.env.DISPOSE_ISLANDS) onDispose(id, () => unmount(component));
	if (import.meta.env.DEV) window.__ILE_DEVTOOLS__?.onHydration({
		id,
		el,
		props,
		slots,
		component,
		framework: "svelte"
	});
}
//#endregion
export { createIsland as default };