@ilha/astro 0.1.0 → 0.1.2

package/dist/client.js

@@ -1,7 +1,22 @@
+import ilha, { raw } from "ilha";
+
 //#region src/client.ts
+const RAW = Symbol.for("ilha.raw");
 function isMountable(Component) {
 	return !!Component && typeof Component.mount === "function";
 }
+function isRawHtml(value) {
+	return !!(value && typeof value === "object" && RAW in value);
+}
+function wrapPlainAsIsland(Component, merged) {
+	return ilha.render(() => {
+		const result = Component(merged);
+		if (result == null) return raw("");
+		if (typeof result === "string") return raw(result);
+		if (isRawHtml(result)) return raw(result.value);
+		return raw("");
+	});
+}
 var client_default = (element) => async (Component, props, slotted, _metadata) => {
 	if (!element.hasAttribute("ssr")) {
 		if (isMountable(Component)) {
@@ -19,6 +34,16 @@ var client_default = (element) => async (Component, props, slotted, _metadata) =
 	if (typeof Component !== "function") return;
 	const merged = { ...props };
 	for (const [name, value] of Object.entries(slotted ?? {})) merged[name === "default" ? "children" : name] = value;
+	const nestedHost = element.querySelector("[data-ilha]");
+	if (nestedHost?.querySelector("[data-ilha-slot]")) {
+		try {
+			const unmount = wrapPlainAsIsland(Component, merged).mount(nestedHost);
+			element.addEventListener("astro:unmount", () => unmount(), { once: true });
+		} catch {
+			throw new Error(`[@ilha/astro] Failed to mount nested islands inside plain component — expected a function that returns ilha RawHtml/string.`);
+		}
+		return;
+	}
 	try {
 		Component(merged);
 	} catch {

package/dist/server.js

@@ -1,3 +1,5 @@
+import ilha, { raw } from "ilha";
+
 //#region src/server.ts
 const ISLAND = Symbol.for("ilha.island");
 const RAW = Symbol.for("ilha.raw");
@@ -7,6 +9,28 @@ function isIsland(Component) {
 function isRawHtml(value) {
 	return !!(value && typeof value === "object" && RAW in value);
 }
+function resultToHtml(result) {
+	if (typeof result === "string") return result;
+	if (isRawHtml(result)) return result.value;
+}
+/** True when plain SSR emitted nested island slot hosts that need a parent mount ctx. */
+function hasNestedIslandSlots(html) {
+	return html.includes("data-ilha-slot");
+}
+/**
+* Wrap a plain function so its render runs under an island render ctx.
+* Nested islands then get unique `data-ilha-slot` ids and can be mounted
+* when the shell hydrates on the client.
+*/
+function wrapPlainAsIsland(Component, merged) {
+	return ilha.render(() => {
+		const result = Component(merged);
+		if (result == null) return raw("");
+		if (typeof result === "string") return raw(result);
+		if (isRawHtml(result)) return raw(result.value);
+		return raw("");
+	});
+}
 function toRawHtml(value) {
 	return {
 		[RAW]: true,
@@ -33,12 +57,21 @@ async function resolveProps(props) {
 	for (const [key, value] of Object.entries(props)) resolved[key] = await resolvePropValue(value);
 	return resolved;
 }
-async function renderPlainComponent(Component, props, slots) {
+async function mergePlainProps(props, slots) {
 	const merged = await resolveProps(props);
 	for (const [name, value] of Object.entries(slots)) merged[name === "default" ? "children" : name] = toRawHtml(value);
-	const result = Component(merged);
-	if (typeof result === "string") return result;
-	if (isRawHtml(result)) return result.value;
+	return merged;
+}
+async function renderPlainComponent(Component, props, slots, metadata) {
+	const merged = await mergePlainProps(props, slots);
+	const html = resultToHtml(Component(merged));
+	if (html === void 0) return void 0;
+	if (!hasNestedIslandSlots(html)) return html;
+	return wrapPlainAsIsland(Component, merged).hydratable({}, {
+		name: metadata?.displayName ?? "IlhaPlain",
+		snapshot: true,
+		skipOnMount: true
+	});
 }
 async function check(Component, props, slots) {
 	if (isIsland(Component)) return true;
@@ -55,7 +88,7 @@ async function renderToStaticMarkup(Component, props, slots, metadata) {
 		snapshot: true,
 		skipOnMount: true
 	}) };
-	const html = await renderPlainComponent(Component, props, slots);
+	const html = await renderPlainComponent(Component, props, slots, metadata);
 	if (html === void 0) throw new Error(`[@ilha/astro] Unable to render "${metadata?.displayName ?? "component"}" — expected an ilha island or a function returning ilha RawHtml/string.`);
 	return { html };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/astro",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Astro integration for Ilha islands",
   "keywords": [
     "astro-component",
@@ -51,11 +51,11 @@
     "test": "bun test"
   },
   "devDependencies": {
-    "astro": "^7.1.3",
-    "ilha": "^0.9.5"
+    "astro": "^7.1.6",
+    "ilha": "^0.10.0"
   },
   "peerDependencies": {
     "astro": "^7.0.0",
-    "ilha": ">=0.9.5"
+    "ilha": ">=0.10.0"
   }
 }