@ilha/astro 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # `@ilha/astro`
 
-An [Astro](https://astro.build) integration that renders and hydrates [Ilha](https://github.com/ilhajs/ilha) islands as Astro components.
+An [Astro](https://astro.build) integration that renders and hydrates [Ilha](https://github.com/ilhajs/ilha) components as Astro islands.
 
 ---
 
@@ -34,9 +34,7 @@ export default defineConfig({
 
 You can also pass `exclude` globs. Files outside the filter remain available to other Astro JSX renderers.
 
-Other JSX renderers (e.g. `@astrojs/solid-js`) can appear before or after `@ilha/astro` — Ilha islands are tagged with Astro's `astro:renderer` symbol, so Astro routes them to Ilha's renderer regardless of integration order.
-
-Then use any Ilha island as an Astro component, with a [client directive](https://docs.astro.build/en/reference/directives-reference/#client-directives) to control hydration:
+Then use any Ilha component as an Astro component, with a [client directive](https://docs.astro.build/en/reference/directives-reference/#client-directives) to control hydration:
 
 ```astro
 ---
@@ -48,12 +46,12 @@ import { Counter } from "../islands/counter";
 
 ## How it works
 
-- **Server-side:** the component is rendered with [`.hydratable()`](https://github.com/ilhajs/ilha), which wraps the island's SSR output in a `[data-ilha]` element carrying serialized props and a state snapshot.
-- **Client-side:** on hydration, the renderer finds that `[data-ilha]` element inside Astro's island wrapper and calls the island's own `.mount()` — no re-render, no flicker, no post-mount setup needed since the snapshot already matches the DOM.
+- **Server-side:** the renderer calls `renderToString()`, which wraps output in a `[data-ilha]` element with a state snapshot.
+- **Client-side:** the renderer finds that host inside Astro's island wrapper and calls `mount(..., { hydrate: true })`.
 
-Because hydration is driven entirely by Ilha's own `data-ilha-*` attributes, every [Astro client directive](https://docs.astro.build/en/reference/directives-reference/#client-directives) (`client:load`, `client:idle`, `client:visible`, `client:media`, `client:only`) works as expected.
+Every [Astro client directive](https://docs.astro.build/en/reference/directives-reference/#client-directives) (`client:load`, `client:idle`, `client:visible`, `client:media`, `client:only`) works as expected.
 
 ## Notes
 
-- Ilha islands don't support Astro's `<slot />` / children forwarding — render everything through the island component and its props (via `Island.toString()` / `.hydratable()` on the server).
-- `client:only` skips SSR entirely and mounts fresh in the browser, matching Astro's usual behavior for other framework renderers.
+- Astro slots arrive as string children. Plain text renders; HTML in slot content is escaped — don't pass markup through slots.
+- `client:only` skips SSR and mounts fresh in the browser.

package/dist/client.js

@@ -1,54 +1,13 @@
-import { ilha, raw } from "ilha";
+import { mount } 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(() => {
-		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)) {
-			const unmount = Component.mount(element, props);
-			element.addEventListener("astro:unmount", () => unmount(), { once: true });
-		}
-		return;
-	}
-	if (isMountable(Component)) {
-		const host = element.querySelector("[data-ilha]") ?? element;
-		const unmount = Component.mount(host);
-		element.addEventListener("astro:unmount", () => unmount(), { once: true });
-		return;
-	}
 	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 {
-		throw new Error(`[@ilha/astro] Failed to bind client component — expected a function that can re-run against SSR markup.`);
-	}
+	const nested = element.querySelector("[data-ilha]");
+	const unmount = mount(nested ?? element, () => Component(merged), { hydrate: !!nested });
+	element.addEventListener("astro:unmount", () => unmount(), { once: true });
 };
 
 //#endregion

package/dist/index.js

@@ -1,10 +1,4 @@
 //#region src/index.ts
-const ASTRO_RENDERER_GLOBAL = Symbol.for("ilha.astroRenderer");
-const rendererName = "@ilha/astro";
-function setRendererMarker() {
-	globalThis[ASTRO_RENDERER_GLOBAL] = rendererName;
-}
-setRendererMarker();
 const OPTIONS_MODULE = "virtual:@ilha/astro/options";
 function globToRegExp(pattern) {
 	let source = "^";
@@ -63,7 +57,6 @@ function ilhaIntegration(options = {}) {
 	return {
 		name: "@ilha/astro",
 		hooks: { "astro:config:setup": ({ addRenderer, updateConfig }) => {
-			setRendererMarker();
 			addRenderer(getRenderer());
 			updateConfig({ vite: getViteConfig(options) });
 		} }

package/dist/server.js

@@ -1,45 +1,12 @@
-import { ilha, raw } from "ilha";
+import { renderToString } from "ilha";
 
 //#region src/server.ts
-const ISLAND = Symbol.for("ilha.island");
-const RAW = Symbol.for("ilha.raw");
 let componentFilter;
 function getComponentFilter() {
 	return componentFilter ??= import("virtual:@ilha/astro/options").then(({ default: filter }) => filter).catch(() => () => true);
 }
-function isIsland(Component) {
-	return typeof Component === "function" && ISLAND in 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(() => {
-		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(String(value));
-}
 function isAstroRenderable(value) {
-	return !!value && typeof value === "object" && !isRawHtml(value) && typeof value.render === "function";
+	return !!value && typeof value === "object" && typeof value.render === "function";
 }
 async function resolveAstroRenderable(value) {
 	let out = "";
@@ -49,48 +16,24 @@ async function resolveAstroRenderable(value) {
 	return out;
 }
 async function resolvePropValue(value) {
-	if (isAstroRenderable(value)) return toRawHtml(await resolveAstroRenderable(value));
+	if (isAstroRenderable(value)) return await resolveAstroRenderable(value);
 	if (Array.isArray(value)) return Promise.all(value.map(resolvePropValue));
 	return value;
 }
-async function resolveProps(props) {
+async function mergeProps(props, slots) {
 	const resolved = {};
 	for (const [key, value] of Object.entries(props)) resolved[key] = await resolvePropValue(value);
+	for (const [name, value] of Object.entries(slots)) resolved[name === "default" ? "children" : name] = value;
 	return resolved;
 }
-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);
-	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
-	});
-}
-async function check(Component, props, slots, metadata) {
+async function check(Component, _props, _slots, metadata) {
 	if (metadata?.componentUrl && !(await getComponentFilter())(metadata.componentUrl)) return false;
-	if (isIsland(Component)) return true;
-	if (typeof Component !== "function") return false;
-	try {
-		return await renderPlainComponent(Component, props, slots) !== void 0;
-	} catch {
-		return false;
-	}
+	return typeof Component === "function";
 }
 async function renderToStaticMarkup(Component, props, slots, metadata) {
-	if (isIsland(Component)) return { html: await Component.hydratable(await resolveProps(props), {
-		name: metadata?.displayName ?? "IlhaIsland",
-		snapshot: true
-	}) };
-	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 };
+	if (typeof Component !== "function") throw new Error(`[@ilha/astro] Unable to render "${metadata?.displayName ?? "component"}" — expected a function.`);
+	const merged = await mergeProps(props, slots);
+	return { html: await renderToString(() => Component(merged)) };
 }
 const renderer = {
 	name: "@ilha/astro",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/astro",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Astro integration for Ilha islands",
   "keywords": [
     "astro-component",
@@ -27,6 +27,7 @@
   ],
   "type": "module",
   "sideEffects": false,
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -49,14 +50,15 @@
   "scripts": {
     "build": "tsdown && tsc -p tsconfig.build.json",
     "cleanup": "rimraf dist node_modules",
-    "test": "bun test"
+    "test": "bun test src/index.test.ts",
+    "test:integration": "bun test src/integration.test.ts"
   },
   "devDependencies": {
-    "astro": "^7.2.4",
-    "ilha": "^0.12.1"
+    "astro": "^7.2.9",
+    "ilha": "0.14.0"
   },
   "peerDependencies": {
-    "astro": "^7.2.4",
-    "ilha": ">=0.12.1"
+    "astro": "^7.2.9",
+    "ilha": "^0.14.0"
   }
 }