@yaakdoc/react 0.0.0-stage → 0.1.0

package/dist/run-in-yaak-CMMcDS7S.js

@@ -0,0 +1,164 @@
+import { createContext, createElement, use, useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/island.tsx
+/**
+* Provided by the server renderer. Islands are rendered as isolated roots (exactly like they are
+* hydrated on the client), so `useId()` and friends produce matching ids.
+* @internal
+*/
+const IslandRendererContext = createContext(null);
+/**
+* Turns a component into an island: it is rendered to HTML on the server like any other component,
+* and hydrated on the client (only this component, not the whole page).
+*
+* Islands are hydrated in isolation: their props must be JSON-serializable and they cannot use
+* yaakdoc context hooks. Register islands on the client with `hydrateIslands()`.
+*/
+function createIsland(name, Component) {
+	function Island(props) {
+		const renderer = use(IslandRendererContext);
+		const common = {
+			"data-island": name,
+			"data-props": JSON.stringify(props),
+			style: { display: "contents" }
+		};
+		if (renderer) {
+			const prefix = renderer.next();
+			return /* @__PURE__ */ jsx("yd-island", {
+				...common,
+				"data-prefix": prefix,
+				dangerouslySetInnerHTML: { __html: renderer.render(createElement(Component, props), prefix) }
+			});
+		}
+		return /* @__PURE__ */ jsx("yd-island", {
+			...common,
+			children: /* @__PURE__ */ jsx(Component, { ...props })
+		});
+	}
+	Island.displayName = `Island(${name})`;
+	return Object.assign(Island, {
+		islandName: name,
+		Component
+	});
+}
+//#endregion
+//#region src/islands/browser.ts
+/** Browser helpers shared by the islands. */
+/** `localStorage` access that never throws (private mode, blocked storage...). */
+const storage = {
+	get(key) {
+		try {
+			return localStorage.getItem(key);
+		} catch {
+			return null;
+		}
+	},
+	set(key, value) {
+		try {
+			localStorage.setItem(key, value);
+		} catch {}
+	}
+};
+/** Resolves a (possibly relative) URL against the current page. */
+const resolveUrl = (url) => new URL(url, window.location.href).href;
+//#endregion
+//#region src/islands/environment.tsx
+const ENVIRONMENT_STORAGE_KEY = "yaakdoc-environment";
+const ENVIRONMENT_EVENT = "yaakdoc:environment";
+/**
+* Shows the content variants of one environment. Variants are elements with
+* `data-yd-env="<environment id>"`; `<html data-environment>` drives the CSS (see
+* {@link environmentCss}) and the `hidden` attributes are kept in sync for accessibility.
+*/
+function applyEnvironment(id) {
+	document.documentElement.dataset.environment = id;
+	for (const element of document.querySelectorAll("[data-yd-env]")) element.hidden = element.dataset.ydEnv !== id;
+	storage.set(ENVIRONMENT_STORAGE_KEY, id);
+	window.dispatchEvent(new CustomEvent(ENVIRONMENT_EVENT, { detail: id }));
+}
+/** Headless environment switcher state, synced across switchers and remembered. */
+function useEnvironment(environments, defaultId) {
+	const [selected, setSelected] = useState(defaultId);
+	useEffect(() => {
+		const onChange = (event) => setSelected(event.detail);
+		window.addEventListener(ENVIRONMENT_EVENT, onChange);
+		const current = document.documentElement.dataset.environment;
+		if (current && current !== defaultId && environments.some((env) => env.id === current)) applyEnvironment(current);
+		return () => window.removeEventListener(ENVIRONMENT_EVENT, onChange);
+	}, [environments, defaultId]);
+	return {
+		selected,
+		select: useCallback((id) => {
+			if (environments.some((env) => env.id === id)) applyEnvironment(id);
+		}, [environments]),
+		current: environments.find((env) => env.id === selected)
+	};
+}
+/** Inline <head> script: applies the remembered environment before first paint. */
+function environmentScript(ids) {
+	return `(function(){try{var e=localStorage.getItem(${JSON.stringify(ENVIRONMENT_STORAGE_KEY)});if(e&&${JSON.stringify(ids)}.indexOf(e)>=0)document.documentElement.dataset.environment=e}catch(_){}})();`;
+}
+/** CSS that shows the variants of the environment set on <html> (falls back to `hidden`). */
+function environmentCss(ids) {
+	return ["[data-yd-env]{display:contents}[data-yd-env][hidden]{display:none}", ...ids.map((id) => {
+		const value = JSON.stringify(id);
+		return `html[data-environment=${value}] [data-yd-env]:not([data-yd-env=${value}]){display:none}html[data-environment=${value}] [data-yd-env=${value}]{display:contents}`;
+	})].join("");
+}
+function EnvironmentSwitcherImpl({ environments, defaultId, className, label = "Environment" }) {
+	const { selected, select } = useEnvironment(environments, defaultId);
+	return /* @__PURE__ */ jsx("select", {
+		"data-yd": "environment-switcher",
+		className,
+		"aria-label": label,
+		value: selected,
+		onChange: (event) => select(event.target.value),
+		children: environments.map((env) => /* @__PURE__ */ jsx("option", {
+			value: env.id,
+			children: env.name
+		}, env.id))
+	});
+}
+/** Unstyled environment switcher (native select). */
+const EnvironmentSwitcher = createIsland("yd:environment-switcher", EnvironmentSwitcherImpl);
+//#endregion
+//#region src/islands/run-in-yaak.tsx
+/** Official "Run in Yaak" badge image. */
+const RUN_IN_YAAK_BADGE = "https://yaak.app/static/button.svg";
+/** Link that opens Yaak and prompts to import the export/spec at `dataUrl` (must be absolute). */
+function runInYaakUrl(name, dataUrl) {
+	return `https://yaak.app/button/run?${new URLSearchParams({
+		name,
+		url: dataUrl
+	})}`;
+}
+/**
+* "Run in Yaak" link for an export URL. Relative URLs (sites without a configured public URL) are
+* made absolute on the client, after hydration.
+*/
+function useRunInYaakHref(name, dataUrl) {
+	const [href, setHref] = useState(() => runInYaakUrl(name, dataUrl));
+	useEffect(() => {
+		setHref(runInYaakUrl(name, resolveUrl(dataUrl)));
+	}, [name, dataUrl]);
+	return href;
+}
+function RunInYaakLinkImpl({ name, dataUrl, badge = false, label = "Run in Yaak", className }) {
+	const href = useRunInYaakHref(name, dataUrl);
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		"data-yd": "run-in-yaak",
+		className,
+		target: "_blank",
+		rel: "noopener",
+		children: badge ? /* @__PURE__ */ jsx("img", {
+			src: RUN_IN_YAAK_BADGE,
+			alt: label,
+			height: 32
+		}) : label
+	});
+}
+/** Unstyled "Run in Yaak" link (or the official badge with `badge`). */
+const RunInYaakLink = createIsland("yd:run-in-yaak", RunInYaakLinkImpl);
+//#endregion
+export { ENVIRONMENT_STORAGE_KEY as a, environmentCss as c, resolveUrl as d, storage as f, useRunInYaakHref as i, environmentScript as l, createIsland as m, RunInYaakLink as n, EnvironmentSwitcher as o, IslandRendererContext as p, runInYaakUrl as r, applyEnvironment as s, RUN_IN_YAAK_BADGE as t, useEnvironment as u };

package/dist/server.d.ts

@@ -0,0 +1,26 @@
+import { _ as ThemeRuntime, l as PageData, p as SiteData, t as Assets } from "./types-BY2lOvlK.js";
+import { PreparedDocument } from "@yaakdoc/core";
+import { ReactNode } from "react";
+//#region src/document.d.ts
+type DocumentProps = {
+  site: SiteData;
+  page: PageData;
+  assets: Assets;
+  ThemeHead?: ThemeRuntime["Head"];
+  children: ReactNode;
+};
+/** The HTML document shell: meta tags, color mode script, assets, branding. */
+export declare function Document({ site, page, assets, ThemeHead, children }: DocumentProps): import("react").JSX.Element;
+//#endregion
+//#region src/server.d.ts
+export type RenderPageOptions = {
+  theme: ThemeRuntime;
+  document: PreparedDocument;
+  site: SiteData;
+  page: PageData;
+  assets: Assets;
+};
+/** Renders a full HTML page (static: no hydration of the page itself, islands hydrate separately). */
+export declare function renderPage({ theme, document, site, page, assets }: RenderPageOptions): Promise<string>;
+//#endregion
+export type { DocumentProps };

package/dist/server.js

@@ -0,0 +1,139 @@
+import { b as useDocument, p as ComponentsProvider, t as BrandingStyles, v as toAbsoluteUrl, y as YaakdocProvider } from "./site-DyK7ZcqQ.js";
+import { c as environmentCss, l as environmentScript, p as IslandRendererContext } from "./run-in-yaak-CMMcDS7S.js";
+import { i as colorModeScript } from "./color-mode-B-vJCVkP.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import { prerender } from "react-dom/static";
+//#region src/document.tsx
+const absolute = (site, path) => toAbsoluteUrl(site, path) ?? path;
+/** The HTML document shell: meta tags, color mode script, assets, branding. */
+function Document({ site, page, assets, ThemeHead, children }) {
+	const title = page.title && page.title !== site.title ? `${page.title} · ${site.title}` : site.title;
+	const description = page.description || site.description;
+	const environmentIds = useDocument().environments.map((env) => env.id);
+	return /* @__PURE__ */ jsxs("html", {
+		lang: "en",
+		"data-color-mode": site.defaultColorMode,
+		suppressHydrationWarning: true,
+		children: [/* @__PURE__ */ jsxs("head", { children: [
+			/* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
+			/* @__PURE__ */ jsx("meta", {
+				name: "viewport",
+				content: "width=device-width, initial-scale=1"
+			}),
+			/* @__PURE__ */ jsx("title", { children: title }),
+			description ? /* @__PURE__ */ jsx("meta", {
+				name: "description",
+				content: description
+			}) : null,
+			/* @__PURE__ */ jsx("meta", {
+				name: "generator",
+				content: site.generator
+			}),
+			/* @__PURE__ */ jsx("meta", {
+				property: "og:type",
+				content: "website"
+			}),
+			/* @__PURE__ */ jsx("meta", {
+				property: "og:title",
+				content: title
+			}),
+			description ? /* @__PURE__ */ jsx("meta", {
+				property: "og:description",
+				content: description
+			}) : null,
+			site.url ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("link", {
+				rel: "canonical",
+				href: absolute(site, page.path)
+			}), /* @__PURE__ */ jsx("meta", {
+				property: "og:url",
+				content: absolute(site, page.path)
+			})] }) : null,
+			page.kind === "not-found" ? /* @__PURE__ */ jsx("meta", {
+				name: "robots",
+				content: "noindex"
+			}) : null,
+			/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: colorModeScript(site.defaultColorMode) } }),
+			environmentIds.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: environmentScript(environmentIds) } }), /* @__PURE__ */ jsx("style", {
+				"data-yd": "environments",
+				dangerouslySetInnerHTML: { __html: environmentCss(environmentIds) }
+			})] }) : null,
+			site.favicon ? /* @__PURE__ */ jsx("link", {
+				rel: "icon",
+				href: site.favicon
+			}) : null,
+			site.fonts.stylesheet ? /* @__PURE__ */ jsx("link", {
+				rel: "stylesheet",
+				href: site.fonts.stylesheet
+			}) : null,
+			page.markdownUrl ? /* @__PURE__ */ jsx("link", {
+				rel: "alternate",
+				type: "text/markdown",
+				href: page.markdownUrl,
+				title: "Markdown"
+			}) : null,
+			site.llms.txtUrl ? /* @__PURE__ */ jsx("link", {
+				rel: "alternate",
+				type: "text/plain",
+				href: site.llms.txtUrl,
+				title: "llms.txt"
+			}) : null,
+			assets.modulePreloads.map((href) => /* @__PURE__ */ jsx("link", {
+				rel: "modulepreload",
+				href
+			}, href)),
+			assets.styles.map((href) => /* @__PURE__ */ jsx("link", {
+				rel: "stylesheet",
+				href
+			}, href)),
+			assets.inlineStyles.map((style) => /* @__PURE__ */ jsx("style", {
+				"data-vite-dev-id": style.id,
+				dangerouslySetInnerHTML: { __html: style.css }
+			}, style.id)),
+			/* @__PURE__ */ jsx(BrandingStyles, {}),
+			ThemeHead ? /* @__PURE__ */ jsx(ThemeHead, { page }) : null,
+			site.head.map(({ tag: Tag, attrs, content }) => /* @__PURE__ */ jsx(Tag, {
+				...attrs,
+				...content ? { dangerouslySetInnerHTML: { __html: content } } : {}
+			}, `${Tag}:${JSON.stringify(attrs)}:${content ?? ""}`))
+		] }), /* @__PURE__ */ jsxs("body", { children: [children, assets.scripts.map((src) => /* @__PURE__ */ jsx("script", {
+			type: "module",
+			src
+		}, src))] })]
+	});
+}
+//#endregion
+//#region src/server.tsx
+/** Renders a full HTML page (static: no hydration of the page itself, islands hydrate separately). */
+async function renderPage({ theme, document, site, page, assets }) {
+	const { Layout } = theme;
+	let counter = 0;
+	const element = /* @__PURE__ */ jsx(IslandRendererContext, {
+		value: {
+			render: (island, identifierPrefix) => renderToString(island, { identifierPrefix }),
+			next: () => `i${(counter++).toString(36)}-`
+		},
+		children: /* @__PURE__ */ jsx(YaakdocProvider, {
+			document,
+			site,
+			page,
+			children: /* @__PURE__ */ jsx(ComponentsProvider, {
+				components: theme.components,
+				children: /* @__PURE__ */ jsx(Document, {
+					site,
+					page,
+					assets,
+					ThemeHead: theme.Head,
+					children: /* @__PURE__ */ jsx(Layout, { page })
+				})
+			})
+		})
+	});
+	const { prelude } = await prerender(element, { onError(error) {
+		console.error("[yaakdoc] Render error:", error);
+	} });
+	const html = await new Response(prelude).text();
+	return html.startsWith("<!DOCTYPE") ? html : `<!DOCTYPE html>${html}`;
+}
+//#endregion
+export { Document, renderPage };