@ubean/islands 0.1.2 → 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import { UbeanIslandsPluginOptions, transformVueSfcIslands, ubeanIslandsPlugin } from "./vite.js";
+//#region src/types.d.ts
+type ClientDirective = 'client:load' | 'client:idle' | 'client:visible' | 'client:media' | 'client:only';
+interface IslandDefinition {
+  id: string;
+  component: string;
+  directive: ClientDirective;
+  mediaQuery?: string;
+  props: Record<string, unknown>;
+  slots?: Record<string, string>;
+}
+interface IslandsContext {
+  islands: Map<string, IslandDefinition>;
+  counter: number;
+}
+interface ClientHydrationStrategy {
+  directive: ClientDirective;
+}
+interface IslandSsrOptions {
+  component: string;
+  directive: ClientDirective;
+  props?: Record<string, unknown>;
+  mediaQuery?: string;
+  children?: string;
+}
+declare function createIslandsContext(): IslandsContext;
+declare function registerIsland(ctx: IslandsContext, component: string, directive: ClientDirective, props: Record<string, unknown>, mediaQuery?: string): string;
+declare function getIslandsScript(islands: IslandDefinition[]): string;
+declare function generateIslandPlaceholder(id: string, component: string, directive: ClientDirective, props: Record<string, unknown>, renderedHtml: string, mediaQuery?: string): string;
+declare function renderIslandPlaceholder(options: IslandSsrOptions): string;
+declare const hydrationStrategyMeta: Record<ClientDirective, {
+  directive: ClientDirective;
+  requiresMediaQuery?: boolean;
+}>;
+//#endregion
+//#region src/bootstrap.d.ts
+declare function getIslandsBootstrapScript(): string;
+declare function getIslandsClearScript(): string;
+//#endregion
+export { type ClientDirective, type ClientHydrationStrategy, type IslandDefinition, type IslandSsrOptions, type IslandsContext, type UbeanIslandsPluginOptions, createIslandsContext, generateIslandPlaceholder, getIslandsBootstrapScript, getIslandsClearScript, getIslandsScript, hydrationStrategyMeta, registerIsland, renderIslandPlaceholder, transformVueSfcIslands, ubeanIslandsPlugin };

package/dist/index.js

@@ -0,0 +1,68 @@
+import { transformVueSfcIslands, ubeanIslandsPlugin } from "./vite.js";
+//#region src/types.ts
+function createIslandsContext() {
+	return {
+		islands: /* @__PURE__ */ new Map(),
+		counter: 0
+	};
+}
+function registerIsland(ctx, component, directive, props, mediaQuery) {
+	const id = `island-${++ctx.counter}`;
+	ctx.islands.set(id, {
+		id,
+		component,
+		directive,
+		mediaQuery,
+		props: serializeProps(props)
+	});
+	return id;
+}
+function serializeProps(props) {
+	const result = {};
+	for (const [key, value] of Object.entries(props)) {
+		if (typeof value === "function" || typeof value === "symbol") continue;
+		result[key] = value;
+	}
+	return result;
+}
+function getIslandsScript(islands) {
+	if (islands.length === 0) return "";
+	return `<script type="application/json" data-ubean-islands>${JSON.stringify(islands)}<\/script>`;
+}
+function generateIslandPlaceholder(id, component, directive, props, renderedHtml, mediaQuery) {
+	const propsJson = JSON.stringify(serializeProps(props));
+	const mediaAttr = mediaQuery ? ` data-media="${escapeHtml(mediaQuery)}"` : "";
+	return `<ubean-island
+  data-island-id="${escapeHtml(id)}"
+  data-component="${escapeHtml(component)}"
+  data-directive="${directive}"${mediaAttr}
+  data-props="${escapeHtml(propsJson)}"
+>${renderedHtml}</ubean-island>`;
+}
+function renderIslandPlaceholder(options) {
+	const { component, directive, props = {}, mediaQuery, children = "" } = options;
+	return generateIslandPlaceholder(`island-${Math.random().toString(36).slice(2, 10)}`, component, directive, props, children, mediaQuery);
+}
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const hydrationStrategyMeta = {
+	"client:load": { directive: "client:load" },
+	"client:idle": { directive: "client:idle" },
+	"client:visible": { directive: "client:visible" },
+	"client:media": {
+		directive: "client:media",
+		requiresMediaQuery: true
+	},
+	"client:only": { directive: "client:only" }
+};
+//#endregion
+//#region src/bootstrap.ts
+function getIslandsBootstrapScript() {
+	return `<script>(function(){var HYDRATED_KEY='__ubeanIslandsHydrated';function hydrated(){return !!window[HYDRATED_KEY]}function markHydrated(){window[HYDRATED_KEY]=true}function getIslands(){return document.querySelectorAll('ubean-island[data-island-id]')}function resolveProps(el){try{var d=el.getAttribute('data-props');return d?JSON.parse(d.replace(/&quot;/g,'"').replace(/&amp;/g,'&').replace(/&lt;/g,'<')):{}}catch(e){return{}}}function shouldHydrate(el){return el.getAttribute('data-hydrating')==='true'}function triggerHydrate(el){if(el.hasAttribute('data-hydrated'))return;el.setAttribute('data-hydrating','true')}function onDirective(el){var d=el.getAttribute('data-directive');if(!d||d==='client:only'){if(d==='client:only')triggerHydrate(el);return}if(d==='client:load'){triggerHydrate(el);return}if(d==='idle'||d==='client:idle'){if('requestIdleCallback'in window){requestIdleCallback(function(){triggerHydrate(el)},{timeout:2000});return}setTimeout(function(){triggerHydrate(el)},200);return}if(d==='visible'||d==='client:visible'){if('IntersectionObserver'in window){var io=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){io.disconnect();triggerHydrate(el)}})},{rootMargin:'200px'});io.observe(el);return}triggerHydrate(el);return}if(d==='media'||d==='client:media'){var media=el.getAttribute('data-media');if(media){var mql=window.matchMedia(media);if(mql.matches){triggerHydrate(el)}else{var fn=function(e){if(e.matches){triggerHydrate(el);mql.removeEventListener?mql.removeEventListener('change',fn):mql.removeListener(fn)}};mql.addEventListener?mql.addEventListener('change',fn):mql.addListener(fn);return}}else{triggerHydrate(el)}return}triggerHydrate(el)}function boot(){if(hydrated())return;markHydrated();getIslands().forEach(function(el){onDirective(el)})}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',boot)}else{boot()}})();<\/script>`;
+}
+function getIslandsClearScript() {
+	return `(function(){function clearIslands(){var islands=document.querySelectorAll('ubean-island[data-island-id]');islands.forEach(function(el){if(el.getAttribute('data-directive')!=='client:only'){return}el.innerHTML='';el.setAttribute('data-cleared','true')})}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',clearIslands)}else{clearIslands()}})();`;
+}
+//#endregion
+export { createIslandsContext, generateIslandPlaceholder, getIslandsBootstrapScript, getIslandsClearScript, getIslandsScript, hydrationStrategyMeta, registerIsland, renderIslandPlaceholder, transformVueSfcIslands, ubeanIslandsPlugin };

package/dist/runtime.d.ts

@@ -0,0 +1,35 @@
+import { App, Component } from "vue";
+//#region src/runtime.d.ts
+interface DomElement {
+  getAttribute(name: string): string | null;
+  setAttribute(name: string, value: string): void;
+  hasAttribute(name: string): boolean;
+}
+interface NodeListOf<T> {
+  forEach(callback: (value: T, key: number, parent: NodeListOf<T>) => void): void;
+}
+interface DomParentNode {
+  querySelectorAll(selector: string): NodeListOf<DomElement>;
+}
+interface IslandHydrateOptions {
+  getComponent?: (name: string) => Component | Promise<Component> | null;
+  appContext?: App;
+  onHydrated?: (el: DomElement, component: Component) => void;
+}
+interface IslandRecord {
+  el: DomElement;
+  id: string;
+  componentName: string;
+  directive: string;
+  mediaQuery?: string;
+  props: Record<string, unknown>;
+}
+declare function collectIslands(root?: DomParentNode): IslandRecord[];
+declare function hydrateIsland(record: IslandRecord, component: Component, options?: IslandHydrateOptions): void;
+interface HydrateIslandsOptions extends IslandHydrateOptions {
+  root?: DomParentNode;
+  components?: Record<string, Component | (() => Promise<Component>)>;
+}
+declare function hydrateIslands(options?: HydrateIslandsOptions): void;
+//#endregion
+export { HydrateIslandsOptions, IslandHydrateOptions, IslandRecord, collectIslands, hydrateIsland, hydrateIslands };

package/dist/runtime.js

@@ -0,0 +1,126 @@
+import { createApp, defineComponent, h } from "vue";
+//#region src/runtime.ts
+const _global = globalThis;
+function decodeProps(raw) {
+	if (!raw) return {};
+	try {
+		return JSON.parse(raw.replace(/&quot;/g, "\"").replace(/&amp;/g, "&").replace(/&lt;/g, "<"));
+	} catch {
+		return {};
+	}
+}
+function collectIslands(root) {
+	const doc = root ?? _global.document;
+	if (!doc) return [];
+	const nodes = doc.querySelectorAll("ubean-island[data-island-id]");
+	const records = [];
+	nodes.forEach((el) => {
+		const domEl = el;
+		const id = domEl.getAttribute("data-island-id") || "";
+		const componentName = domEl.getAttribute("data-component") || "";
+		const directive = domEl.getAttribute("data-directive") || "client:load";
+		const mediaQuery = domEl.getAttribute("data-media") || void 0;
+		const props = decodeProps(domEl.getAttribute("data-props"));
+		records.push({
+			el: domEl,
+			id,
+			componentName,
+			directive,
+			mediaQuery,
+			props
+		});
+	});
+	return records;
+}
+function hydrateIsland(record, component, options = {}) {
+	if (record.el.hasAttribute("data-hydrated")) return;
+	record.el.setAttribute("data-hydrated", "true");
+	const app = createApp(defineComponent({
+		name: `Island-${record.componentName}`,
+		setup() {
+			return () => h(component, record.props);
+		}
+	}));
+	if (options.appContext) {
+		if (options.appContext.config?.globalProperties) Object.assign(app.config.globalProperties, options.appContext.config.globalProperties);
+		const appContextInternal = options.appContext;
+		if (appContextInternal._context?.provides) for (const [key, value] of Object.entries(appContextInternal._context.provides)) app.provide(key, value);
+	}
+	app.mount(record.el);
+	options.onHydrated?.(record.el, component);
+}
+function hydrateIslands(options = {}) {
+	const { root, components = {}, getComponent, ...rest } = options;
+	const islands = collectIslands(root);
+	if (islands.length === 0) return;
+	for (const record of islands) {
+		if (record.directive === "client:only") {
+			const comp = resolveComponent(record.componentName, components, getComponent);
+			if (comp) Promise.resolve(comp).then((c) => hydrateIsland(record, c, rest));
+			continue;
+		}
+		const doHydrate = () => {
+			const comp = resolveComponent(record.componentName, components, getComponent);
+			if (comp) Promise.resolve(comp).then((c) => hydrateIsland(record, c, rest));
+		};
+		if (record.el.getAttribute("data-hydrating") === "true" && !record.el.hasAttribute("data-hydrated")) {
+			doHydrate();
+			continue;
+		}
+		const MutationObserverCtor = _global.MutationObserver ?? null;
+		if (MutationObserverCtor) {
+			const observer = new MutationObserverCtor(() => {
+				if (record.el.getAttribute("data-hydrating") === "true" && !record.el.hasAttribute("data-hydrated")) {
+					observer.disconnect();
+					doHydrate();
+				}
+			});
+			observer.observe(record.el, {
+				attributes: true,
+				attributeFilter: ["data-hydrating"]
+			});
+		}
+		const directive = record.directive;
+		if (directive === "client:load") doHydrate();
+		else if (directive === "client:idle") {
+			const ric = _global.requestIdleCallback;
+			if (typeof ric === "function") ric(() => doHydrate(), { timeout: 2e3 });
+			else setTimeout(doHydrate, 200);
+		} else if (directive === "client:visible") {
+			const IOCtor = _global.IntersectionObserver;
+			if (typeof IOCtor === "function") {
+				const io = new IOCtor((entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							io.disconnect();
+							doHydrate();
+						}
+					});
+				}, { rootMargin: "200px" });
+				io.observe(record.el);
+			} else doHydrate();
+		} else if (directive === "client:media" && record.mediaQuery) {
+			const mql = _global.window?.matchMedia?.(record.mediaQuery);
+			if (mql) if (mql.matches) doHydrate();
+			else {
+				const fn = (e) => {
+					if (e.matches) {
+						doHydrate();
+						if (mql.removeEventListener) mql.removeEventListener("change", fn);
+						else if (mql.removeListener) mql.removeListener(fn);
+					}
+				};
+				if (mql.addEventListener) mql.addEventListener("change", fn);
+				else if (mql.addListener) mql.addListener(fn);
+			}
+			else doHydrate();
+		} else doHydrate();
+	}
+}
+function resolveComponent(name, components, getComponent) {
+	if (components[name]) return components[name];
+	if (getComponent) return getComponent(name);
+	return null;
+}
+//#endregion
+export { collectIslands, hydrateIsland, hydrateIslands };

package/dist/vite.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from "vite";
+//#region src/vite.d.ts
+type ClientDirective = 'client:load' | 'client:idle' | 'client:visible' | 'client:media' | 'client:only';
+declare function transformVueSfcIslands(code: string, filePath: string): {
+  code: string;
+  islandCount: number;
+};
+interface UbeanIslandsPluginOptions {
+  enabled?: boolean;
+}
+declare function ubeanIslandsPlugin(_options?: UbeanIslandsPluginOptions): Plugin;
+//#endregion
+export { ClientDirective, UbeanIslandsPluginOptions, transformVueSfcIslands, ubeanIslandsPlugin };

package/dist/vite.js

@@ -0,0 +1,209 @@
+//#region src/vite.ts
+const CLIENT_DIRECTIVES = [
+	"client:load",
+	"client:idle",
+	"client:visible",
+	"client:media",
+	"client:only"
+];
+const DIRECTIVE_RE = /\bclient:(load|idle|visible|media|only)\b/;
+function isVueSfc(id) {
+	return /\.vue(?:\?.*)?$/.test(id) && !id.includes("&type=");
+}
+function extractTemplateBlock(code) {
+	const openMatch = code.match(/<template([^>]*)>/);
+	if (!openMatch) return null;
+	const openTagEnd = openMatch.index + openMatch[0].length;
+	const closeIdx = code.indexOf("</template>", openTagEnd);
+	if (closeIdx === -1) return null;
+	return {
+		start: openMatch.index,
+		end: closeIdx + 11,
+		content: code.slice(openTagEnd, closeIdx),
+		attrs: openMatch[1] || "",
+		openTagEnd
+	};
+}
+function escapeAttr(str) {
+	return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function findTagAt(template, pos) {
+	const lt = template.indexOf("<", pos);
+	if (lt === -1 || lt !== pos) return null;
+	if (template[lt + 1] === "/" || template[lt + 1] === "!" || template[lt + 1] === "?") return null;
+	const nameMatch = template.slice(lt + 1).match(/^([A-Z][A-Za-z0-9._-]*)/);
+	if (!nameMatch) return null;
+	const tagName = nameMatch[1];
+	const gt = findClosingAngleBracket(template, lt + 1 + tagName.length);
+	if (gt === -1) return null;
+	const openTagContent = template.slice(lt, gt + 1);
+	const selfClosing = template[gt - 1] === "/";
+	const attrsStr = template.slice(lt + 1 + tagName.length, selfClosing ? gt - 1 : gt).trim();
+	const attrs = parseAttrs(attrsStr);
+	const openTagEnd = gt + 1;
+	let end = openTagEnd;
+	let innerHTML = "";
+	if (!selfClosing) {
+		const closeTag = `</${tagName}>`;
+		const closePos = findMatchingClose(template, lt, tagName);
+		if (closePos === -1) return null;
+		innerHTML = template.slice(openTagEnd, closePos);
+		end = closePos + closeTag.length;
+	}
+	return {
+		tagName,
+		fullOpenTag: openTagContent,
+		selfClosing,
+		attrs,
+		attrsStr,
+		start: lt,
+		openTagEnd,
+		end,
+		innerHTML
+	};
+}
+function findClosingAngleBracket(str, start) {
+	let inQuote = null;
+	for (let i = start; i < str.length; i++) {
+		const ch = str[i];
+		if (inQuote) {
+			if (ch === inQuote && str[i - 1] !== "\\") inQuote = null;
+		} else if (ch === "\"" || ch === "'") inQuote = ch;
+		else if (ch === ">") return i;
+	}
+	return -1;
+}
+function findMatchingClose(template, openLt, tagName) {
+	const openRe = new RegExp(`<${tagName}[\\s/>]`, "g");
+	const closeRe = new RegExp(`</${tagName}>`, "g");
+	openRe.lastIndex = openLt + 1;
+	closeRe.lastIndex = openLt + 1;
+	let depth = 1;
+	while (depth > 0) {
+		const nextOpen = openRe.exec(template);
+		const nextClose = closeRe.exec(template);
+		if (!nextClose) return -1;
+		if (nextOpen && nextOpen.index < nextClose.index) {
+			depth++;
+			closeRe.lastIndex = nextOpen.index + tagName.length + 2;
+		} else {
+			depth--;
+			if (depth === 0) return nextClose.index;
+			openRe.lastIndex = nextClose.index + tagName.length + 3;
+		}
+	}
+	return -1;
+}
+function parseAttrs(str) {
+	const map = /* @__PURE__ */ new Map();
+	const re = /(?:^|\s)([:@a-zA-Z_][\w.:-]*)(?:=(?:"([^"]*)"|'([^']*)'|(\{[^}]*\}|[^\s"'=<>`]+)))?/g;
+	let m;
+	while ((m = re.exec(str)) !== null) {
+		const name = m[1];
+		const val = m[2] !== void 0 ? m[2] : m[3] !== void 0 ? m[3] : m[4] !== void 0 ? m[4] : true;
+		map.set(name, val);
+	}
+	return map;
+}
+function collectStaticProps(attrs) {
+	const props = {};
+	for (const [key, val] of attrs) {
+		if (key.startsWith("client:")) continue;
+		if (key.startsWith("v-") || key.startsWith("@") || key.startsWith(":")) continue;
+		if (key === "key" || key === "ref") continue;
+		if (val === true) props[key] = true;
+		else props[key] = val;
+	}
+	return props;
+}
+function transformTemplate(template, islandCounter, filePath) {
+	let out = "";
+	let pos = 0;
+	while (pos < template.length) {
+		const lt = template.indexOf("<", pos);
+		if (lt === -1) {
+			out += template.slice(pos);
+			break;
+		}
+		out += template.slice(pos, lt);
+		if (template[lt + 1] === "/" || template[lt + 1] === "!" || template[lt + 1] === "?") {
+			out += template[lt];
+			pos = lt + 1;
+			continue;
+		}
+		if (!template.slice(lt + 1).match(/^([A-Z][A-Za-z0-9._-]*)/)) {
+			const gt = findClosingAngleBracket(template, lt + 1);
+			if (gt === -1) {
+				out += template.slice(lt);
+				break;
+			}
+			out += template.slice(lt, gt + 1);
+			pos = gt + 1;
+			continue;
+		}
+		const tag = findTagAt(template, lt);
+		if (!tag) {
+			out += template[lt];
+			pos = lt + 1;
+			continue;
+		}
+		const directive = CLIENT_DIRECTIVES.find((d) => tag.attrs.has(d));
+		if (!directive) {
+			const inner = tag.selfClosing ? "" : transformTemplate(tag.innerHTML, islandCounter, filePath);
+			out += tag.fullOpenTag;
+			out += inner;
+			if (!tag.selfClosing) out += `</${tag.tagName}>`;
+			pos = tag.end;
+			continue;
+		}
+		islandCounter.count++;
+		const islandId = `island-${filePath.replace(/[^a-zA-Z0-9]/g, "-")}-${islandCounter.count}`;
+		const mediaRaw = tag.attrs.get("client:media");
+		let mediaStr = "";
+		if (directive === "client:media" && mediaRaw && mediaRaw !== true) mediaStr = ` data-media="${escapeAttr(String(mediaRaw).replace(/^["']|["']$/g, ""))}"`;
+		const props = collectStaticProps(tag.attrs);
+		const propsJson = escapeAttr(JSON.stringify(props));
+		out += `<ubean-island data-island-id="${islandId}" data-component="${tag.tagName}" data-directive="${directive}" data-props="${propsJson}"${mediaStr}>`;
+		out += tag.selfClosing ? "" : tag.innerHTML;
+		out += `</ubean-island>`;
+		pos = tag.end;
+	}
+	return out;
+}
+function transformVueSfcIslands(code, filePath) {
+	const tpl = extractTemplateBlock(code);
+	if (!tpl) return {
+		code,
+		islandCount: 0
+	};
+	if (!DIRECTIVE_RE.test(tpl.content)) return {
+		code,
+		islandCount: 0
+	};
+	const counter = { count: 0 };
+	const newContent = transformTemplate(tpl.content, counter, filePath);
+	return {
+		code: `${code.slice(0, tpl.start)}<template${tpl.attrs}>${newContent}</template>${code.slice(tpl.end)}`,
+		islandCount: counter.count
+	};
+}
+function ubeanIslandsPlugin(_options = {}) {
+	let viteConfig;
+	let enabled = true;
+	return {
+		name: "ubean:islands",
+		enforce: "pre",
+		configResolved(config) {
+			viteConfig = config;
+			enabled = _options.enabled !== false;
+		},
+		transform(code, id) {
+			if (!enabled) return null;
+			if (!isVueSfc(id)) return null;
+			if (!DIRECTIVE_RE.test(code)) return null;
+			return transformVueSfcIslands(code, id.split("?")[0].replace(viteConfig.root, "").replace(/^[/\\]/, ""));
+		}
+	};
+}
+//#endregion
+export { transformVueSfcIslands, ubeanIslandsPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubean/islands",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Islands architecture for ubean (Vite plugin for client:load/idle/visible/media/only directives, bootstrap script, client hydrate runtime)",
   "files": [
     "dist"