astro-island.ts — astro Source File

Source Code

// Note that this file is prebuilt to astro-island.prebuilt.ts
// Do not import this file directly, instead import the prebuilt one instead.
// pnpm --filter astro run prebuild

type directiveAstroKeys = 'load' | 'idle' | 'visible' | 'media' | 'only';

declare const Astro: {
	[k in directiveAstroKeys]?: (
		fn: () => Promise<() => void>,
		opts: Record<string, any>,
		root: HTMLElement,
	) => unknown;
};

{
	interface PropTypeSelector {
		[k: string]: (value: any) => any;
	}

	const propTypes: PropTypeSelector = {
		0: (value) => reviveObject(value),
		1: (value) => reviveArray(value),
		2: (value) => new RegExp(value),
		3: (value) => new Date(value),
		4: (value) => new Map(reviveArray(value)),
		5: (value) => new Set(reviveArray(value)),
		6: (value) => BigInt(value),
		7: (value) => new URL(value),
		8: (value) => new Uint8Array(value),
		9: (value) => new Uint16Array(value),
		10: (value) => new Uint32Array(value),
		11: (value) => Infinity * value,
	};

	// Not using JSON.parse reviver because it's bottom-up but we want top-down
	const reviveTuple = (raw: any): any => {
		const [type, value] = raw;
		return type in propTypes ? propTypes[type](value) : undefined;
	};

	const reviveArray = (raw: any): any => (raw as Array<any>).map(reviveTuple);

	const reviveObject = (raw: any): any => {
		if (typeof raw !== 'object' || raw === null) return raw;
		return Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, reviveTuple(value)]));
	};

	// 🌊🏝🌴
	class AstroIsland extends HTMLElement {
		public Component: any;
		public hydrator: any;
		static observedAttributes = ['props'];

		disconnectedCallback() {
			document.removeEventListener('astro:after-swap', this.unmount);
			document.addEventListener('astro:after-swap', this.unmount, { once: true });
		}

		connectedCallback() {
			if (
// ... (157 more lines)