@ox-content/vite-plugin-svelte 3.0.0-alpha.9 → 3.0.0-beta.0

package/dist/index.cjs

@@ -32,6 +32,14 @@ const COMPONENT_REGEX = /<([A-Z][a-zA-Z0-9]*)\s*([^>]*?)\s*(?:\/>|>([\s\S]*?)<\/
 const PROP_REGEX = /([a-zA-Z0-9-]+)(?:=(?:"([^"]*)"|'([^']*)'|{([^}]*)}|\[([^\]]*)\]))?/g;
 const ISLAND_MARKER_PREFIX = "OXCONTENT-ISLAND-";
 const ISLAND_MARKER_SUFFIX = "-PLACEHOLDER";
+const DOCUMENT_PROP_MARKER_PREFIX = "OXCONTENT-DOCUMENT-PROP-";
+const DOCUMENT_PROP_MARKER_SUFFIX = "-PLACEHOLDER";
+const PAYLOAD_SCRIPT = /^\s*<script type="application\/json">[\s\S]*?<\/script>/i;
+const RUST_PAYLOAD_KEYS = /* @__PURE__ */ new Set([
+	"props",
+	"expressions",
+	"spreads"
+]);
 async function transformMarkdownWithSvelte(code, id, options) {
 	const components = options.components;
 	const { content: markdownContent, frontmatter } = extractFrontmatter(code);
@@ -91,7 +99,11 @@ async function transformMarkdownWithSvelte(code, id, options) {
 		i18n: false
 	};
 	if (mdx) {
-		const transformed = await (0, _ox_content_vite_plugin.transformMarkdown)(markdownContent, id, baseOptions);
+		const documentExpressions = options.mdxDocumentProps ? prepareMdxDocumentExpressions(markdownContent, id) : {
+			content: markdownContent,
+			expressions: []
+		};
+		const transformed = await (0, _ox_content_vite_plugin.transformMarkdown)(documentExpressions.content, id, baseOptions);
 		const discovered = await (0, _ox_content_vite_plugin.discoverDocumentMdxIslands)({
 			source: markdownContent,
 			html: transformed.html,
@@ -104,7 +116,8 @@ async function transformMarkdownWithSvelte(code, id, options) {
 			}),
 			srcDir: options.srcDir
 		});
-		return compileSvelteResult(generateSvelteModule(options.renderIsland ? await (0, _ox_content_vite_plugin.applyIslandSsrHtml)(transformed.html, options.renderIsland, id, discovered.usedComponents) : transformed.html, discovered.usedComponents, discovered.usedComponents, frontmatter, options, id, discovered.localBindings), id, discovered.usedComponents, frontmatter);
+		if (options.mdxDocumentProps) return compileSvelteResult(generateMdxDocumentPropsSvelteModule(transformed.html, discovered.usedComponents, frontmatter, options, id, discovered.localBindings, documentExpressions.expressions), id, discovered.usedComponents, frontmatter, options.ssr);
+		return compileSvelteResult(generateSvelteModule(options.renderIsland ? await (0, _ox_content_vite_plugin.applyIslandSsrHtml)(transformed.html, options.renderIsland, id, discovered.usedComponents) : transformed.html, discovered.usedComponents, discovered.usedComponents, frontmatter, options, id, discovered.localBindings), id, discovered.usedComponents, frontmatter, options.ssr);
 	}
 	const usedComponents = [];
 	const islands = [];
@@ -138,13 +151,13 @@ async function transformMarkdownWithSvelte(code, id, options) {
 		lastIndex = matchEnd;
 	}
 	processedContent += markdownContent.slice(lastIndex);
-	return compileSvelteResult(generateSvelteModule(injectIslandMarkers((await (0, _ox_content_vite_plugin.transformMarkdown)(processedContent, id, baseOptions)).html, islands), usedComponents, islands, frontmatter, options, id), id, usedComponents, frontmatter);
+	return compileSvelteResult(generateSvelteModule(injectIslandMarkers((await (0, _ox_content_vite_plugin.transformMarkdown)(processedContent, id, baseOptions)).html, islands), usedComponents, islands, frontmatter, options, id), id, usedComponents, frontmatter, options.ssr);
 }
-function compileSvelteResult(svelteCode, id, usedComponents, frontmatter) {
+function compileSvelteResult(svelteCode, id, usedComponents, frontmatter, ssr = false) {
 	return {
 		code: `${(0, svelte_compiler.compile)(svelteCode, {
 			filename: id,
-			generate: "client",
+			generate: ssr ? "server" : "client",
 			runes: true
 		}).js.code}\nexport const frontmatter = ${JSON.stringify(frontmatter)};`,
 		map: null,
@@ -258,6 +271,588 @@ function parseProps(propsString) {
 	}
 	return props;
 }
+/** Opt a document-props component into the island contract. */
+const MDX_ISLAND_DIRECTIVE = "oxIsland";
+const MDX_ISLAND_MEDIA_DIRECTIVE = "oxIslandMedia";
+const MDX_ISLAND_LOAD_STRATEGIES = /* @__PURE__ */ new Set([
+	"eager",
+	"idle",
+	"visible",
+	"media"
+]);
+function prepareMdxDocumentExpressions(content, filePath) {
+	const skipRanges = mergeRanges([
+		...collectFenceRanges(content),
+		...collectInlineCodeRanges(content),
+		...collectMdxEsmLineRanges(content)
+	]);
+	const expressions = [];
+	let output = "";
+	let cursor = 0;
+	let rangeIndex = 0;
+	let inTag = false;
+	let quote = null;
+	while (cursor < content.length) {
+		const range = skipRanges[rangeIndex];
+		if (range && cursor >= range.end) {
+			rangeIndex += 1;
+			continue;
+		}
+		if (range && cursor === range.start) {
+			output += content.slice(range.start, range.end);
+			cursor = range.end;
+			continue;
+		}
+		const char = content[cursor];
+		if (inTag) {
+			output += char;
+			if (quote) {
+				if (char === quote && content[cursor - 1] !== "\\") quote = null;
+			} else if (char === "\"" || char === "'") quote = char;
+			else if (char === ">") inTag = false;
+			cursor += 1;
+			continue;
+		}
+		if (char === "<" && startsHtmlLikeTag(content, cursor)) {
+			inTag = true;
+			output += char;
+			cursor += 1;
+			continue;
+		}
+		if (char === "{" && content[cursor - 1] !== "\\") {
+			const end = findMdxExpressionEnd(content, cursor + 1);
+			if (end !== -1) {
+				const expression = content.slice(cursor + 1, end).trim();
+				const path = parseDocumentPropPath(expression);
+				if (!path) throw new Error(`[ox-content-svelte] Unsupported MDX document prop expression "{${expression}}" in ${filePath}. Only identifiers and dotted property paths are supported.`);
+				const marker = `${DOCUMENT_PROP_MARKER_PREFIX}${expressions.length}${DOCUMENT_PROP_MARKER_SUFFIX}`;
+				expressions.push({
+					marker,
+					expression,
+					path
+				});
+				output += marker;
+				cursor = end + 1;
+				continue;
+			}
+		}
+		output += char;
+		cursor += 1;
+	}
+	return {
+		content: output,
+		expressions
+	};
+}
+function collectInlineCodeRanges(content) {
+	const ranges = [];
+	const fenceRanges = collectFenceRanges(content);
+	let lineStart = 0;
+	while (lineStart < content.length) {
+		const lineEnd = content.indexOf("\n", lineStart);
+		const end = lineEnd === -1 ? content.length : lineEnd;
+		if (!isInRanges(lineStart, end, fenceRanges)) {
+			let cursor = lineStart;
+			while (cursor < end) {
+				const marker = matchBacktickRun(content, cursor);
+				if (!marker) {
+					cursor += 1;
+					continue;
+				}
+				const close = content.indexOf(marker, cursor + marker.length);
+				if (close === -1 || close >= end) {
+					cursor += marker.length;
+					continue;
+				}
+				ranges.push({
+					start: cursor,
+					end: close + marker.length
+				});
+				cursor = close + marker.length;
+			}
+		}
+		lineStart = lineEnd === -1 ? content.length : lineEnd + 1;
+	}
+	return ranges;
+}
+function collectMdxEsmLineRanges(content) {
+	const ranges = [];
+	const fenceRanges = collectFenceRanges(content);
+	let lineStart = 0;
+	while (lineStart < content.length) {
+		const lineEnd = content.indexOf("\n", lineStart);
+		const end = lineEnd === -1 ? content.length : lineEnd + 1;
+		const contentEnd = lineEnd === -1 ? content.length : lineEnd;
+		if (!isInRanges(lineStart, contentEnd, fenceRanges)) {
+			const line = content.slice(lineStart, contentEnd).trimStart();
+			if (line.startsWith("import ") || line.startsWith("export ")) ranges.push({
+				start: lineStart,
+				end
+			});
+		}
+		lineStart = lineEnd === -1 ? content.length : lineEnd + 1;
+	}
+	return ranges;
+}
+function mergeRanges(ranges) {
+	const sorted = ranges.filter((range) => range.end > range.start).sort((left, right) => left.start - right.start || left.end - right.end);
+	const merged = [];
+	for (const range of sorted) {
+		const previous = merged.at(-1);
+		if (previous && range.start <= previous.end) previous.end = Math.max(previous.end, range.end);
+		else merged.push({ ...range });
+	}
+	return merged;
+}
+function matchBacktickRun(content, index) {
+	if (content[index] !== "`") return null;
+	let end = index + 1;
+	while (content[end] === "`") end += 1;
+	return content.slice(index, end);
+}
+function startsHtmlLikeTag(content, index) {
+	const next = content[index + 1];
+	return next === "/" || next === "!" || next === "?" || /[A-Za-z]/.test(next ?? "");
+}
+function findMdxExpressionEnd(content, start) {
+	let depth = 1;
+	let quote = null;
+	let escaped = false;
+	for (let index = start; index < content.length; index += 1) {
+		const char = content[index];
+		if (quote) {
+			if (escaped) escaped = false;
+			else if (char === "\\") escaped = true;
+			else if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "\"" || char === "'" || char === "`") {
+			quote = char;
+			continue;
+		}
+		if (char === "{") {
+			depth += 1;
+			continue;
+		}
+		if (char === "}") {
+			depth -= 1;
+			if (depth === 0) return index;
+		}
+	}
+	return -1;
+}
+function parseDocumentPropPath(expression) {
+	if (!/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(expression) || RESERVED_DOCUMENT_PROP_WORDS.has(expression)) return null;
+	return expression.split(".");
+}
+const RESERVED_DOCUMENT_PROP_WORDS = /* @__PURE__ */ new Set([
+	"false",
+	"Infinity",
+	"NaN",
+	"null",
+	"this",
+	"true",
+	"undefined"
+]);
+function generateMdxDocumentPropsSvelteModule(html, usedComponents, frontmatter, options, id, localBindings, documentExpressions) {
+	const filePathLiteral = JSON.stringify(id);
+	const imports = (0, _ox_content_vite_plugin.renderIslandComponentImports)(usedComponents, {
+		globalComponents: options.components,
+		localBindings,
+		documentPath: id,
+		root: options.root
+	});
+	const { template, hydratedIslands } = renderMdxDocumentTemplate(html, usedComponents, id, documentExpressions);
+	return `${renderMdxIslandModuleScript(hydratedIslands, imports)}
+<script>
+  ${hydratedIslands.length > 0 ? "" : imports}
+
+  const frontmatter = ${JSON.stringify(frontmatter)};
+  export { frontmatter };
+
+  let __ox_mdx_props = $props();
+${hydratedIslands.length > 0 ? renderMdxIslandPropsSerializer(filePathLiteral) : ""}
+
+  function __ox_mdx_document_prop(props, path, expression) {
+    const propName = path.join(".");
+    let value = props;
+    for (const segment of path) {
+      if (
+        value == null ||
+        (typeof value !== "object" && typeof value !== "function") ||
+        !(segment in Object(value))
+      ) {
+        throw new Error('[ox-content-svelte] Missing MDX document prop "' + propName + '" in ' + ${filePathLiteral} + ' for expression {' + expression + '}.');
+      }
+      value = value[segment];
+    }
+    if (value === undefined) {
+      throw new Error('[ox-content-svelte] Missing MDX document prop "' + propName + '" in ' + ${filePathLiteral} + ' for expression {' + expression + '}.');
+    }
+    return value;
+  }
+<\/script>
+
+<div class="ox-content">${template}</div>
+
+<style>
+  .ox-content {
+    line-height: 1.6;
+  }
+</style>
+`;
+}
+/**
+* Island wiring for a document-props page.
+*
+* This host never hydrates the whole page — that is the point of the mode — so
+* the runtime cannot be started from `onMount`. It is exported instead, and the
+* host calls it once on the client. Pages with no islands get no module script
+* at all and stay zero-JavaScript.
+*/
+function renderMdxIslandModuleScript(hydratedIslands, imports) {
+	if (hydratedIslands.length === 0) return "";
+	return `
+<script module>
+  import { createRawSnippet, hydrate, mount, unmount } from 'svelte';
+  import { initIslands, readIslandSlotHtml } from '@ox-content/islands';
+  ${imports}
+
+  const __ox_island_components = {
+${hydratedIslands.map((name) => `    ${name},`).join("\n")}
+  };
+
+  export function hydrateIslands(options) {
+    return initIslands((element, props) => {
+      const Component = __ox_island_components[element.dataset.oxIsland];
+      if (!Component) return;
+
+      const islandContent = readIslandSlotHtml(element);
+      const componentProps = { ...props };
+      if (islandContent) {
+        componentProps.children = createRawSnippet(() => ({
+          render: () => \`<div>\${islandContent}</div>\`,
+        }));
+      }
+
+      const attach = element.dataset.oxSsr === 'true' ? hydrate : mount;
+      const instance = attach(Component, { target: element, props: componentProps });
+      return () => unmount(instance);
+    }, { selector: '[data-ox-island]', ...options });
+  }
+<\/script>`;
+}
+/**
+* `JSON.stringify` drops functions and `undefined` silently and throws an
+* opaque error on a cycle, either of which turns into an island that renders
+* but never comes alive. Walking first turns both into a build diagnostic that
+* names the prop.
+*/
+function renderMdxIslandPropsSerializer(filePathLiteral) {
+	return `
+  function __ox_mdx_island_props(componentName, props) {
+    const seen = new WeakSet();
+    const check = (value, path) => {
+      const kind = typeof value;
+      if (value === null || kind === 'string' || kind === 'number' || kind === 'boolean') return;
+      if (kind !== 'object') {
+        throw new Error('[ox-content-svelte] Island "' + componentName + '" in ' + ${filePathLiteral} + ' received a ' + kind + ' for prop "' + path + '", which cannot be serialised for hydration. Pass a JSON value, or drop ${MDX_ISLAND_DIRECTIVE} to keep the component server-only.');
+      }
+      if (seen.has(value)) {
+        throw new Error('[ox-content-svelte] Island "' + componentName + '" in ' + ${filePathLiteral} + ' received a circular value for prop "' + path + '", which cannot be serialised for hydration.');
+      }
+      seen.add(value);
+      if (Array.isArray(value)) {
+        value.forEach((item, index) => check(item, path + '[' + index + ']'));
+        return;
+      }
+      for (const key of Object.keys(value)) check(value[key], path ? path + '.' + key : key);
+    };
+    for (const key of Object.keys(props)) check(props[key], key);
+    return JSON.stringify(props);
+  }
+`;
+}
+function renderMdxDocumentTemplate(html, usedComponents, filePath, documentExpressions) {
+	const context = {
+		html,
+		filePath,
+		usedComponents: new Set(usedComponents),
+		expressionsByMarker: new Map(documentExpressions.map((expression) => [expression.marker, expression])),
+		islandRanges: findMdxIslandRanges(html),
+		hydratedIslands: /* @__PURE__ */ new Set()
+	};
+	return {
+		template: renderHtmlRange(context, 0, html.length),
+		hydratedIslands: [...context.hydratedIslands]
+	};
+}
+function renderHtmlRange(context, start, end) {
+	let output = "";
+	let cursor = start;
+	while (cursor < end) {
+		const island = findNextIslandRange(context, cursor, end);
+		if (!island) {
+			output += renderRawHtmlTemplate(context.html.slice(cursor, end), context.expressionsByMarker);
+			break;
+		}
+		output += renderRawHtmlTemplate(context.html.slice(cursor, island.openStart), context.expressionsByMarker);
+		output += renderMdxIslandTemplate(context, island);
+		cursor = island.closeEnd;
+	}
+	return output;
+}
+function findNextIslandRange(context, cursor, end) {
+	for (const island of context.islandRanges) {
+		if (island.openStart < cursor || island.closeEnd > end) continue;
+		if (context.usedComponents.has(island.name)) return island;
+	}
+	return null;
+}
+function renderRawHtmlTemplate(html, expressionsByMarker) {
+	if (!html) return "";
+	let output = "";
+	let cursor = 0;
+	while (cursor < html.length) {
+		const next = findNextDocumentExpressionMarker(html, cursor, expressionsByMarker);
+		if (!next) {
+			output += renderRawHtmlBlock(html.slice(cursor));
+			break;
+		}
+		output += renderRawHtmlBlock(html.slice(cursor, next.index));
+		output += renderDocumentExpression(next.expression);
+		cursor = next.index + next.expression.marker.length;
+	}
+	return output;
+}
+function findNextDocumentExpressionMarker(html, start, expressionsByMarker) {
+	let nextIndex = -1;
+	let nextExpression;
+	for (const expression of expressionsByMarker.values()) {
+		const index = html.indexOf(expression.marker, start);
+		if (index !== -1 && (nextIndex === -1 || index < nextIndex)) {
+			nextIndex = index;
+			nextExpression = expression;
+		}
+	}
+	return nextExpression ? {
+		index: nextIndex,
+		expression: nextExpression
+	} : null;
+}
+function renderRawHtmlBlock(html) {
+	return html ? `{@html ${JSON.stringify(html).replaceAll("<\/script", "<\\/script")}}` : "";
+}
+function renderDocumentExpression(expression) {
+	return `{${documentPropResolverExpression(expression.path, expression.expression)}}`;
+}
+function renderMdxIslandTemplate(context, island) {
+	assertSvelteComponentName(island.name, context.filePath);
+	const payload = readMdxIslandPayload(island);
+	const hydration = takeMdxIslandHydration(payload, island.name, context.filePath);
+	const attrs = renderMdxIslandAttributes(payload, context.filePath);
+	const children = renderHtmlRange(context, island.contentStart, island.closeStart);
+	const element = children ? `<${island.name}${attrs}>${children}</${island.name}>` : `<${island.name}${attrs} />`;
+	if (!hydration) return element;
+	context.hydratedIslands.add(island.name);
+	const wrapperAttrs = [
+		`data-ox-island="${island.name}"`,
+		"data-ox-ssr=\"true\"",
+		`data-ox-load="${hydration.load}"`
+	];
+	if (hydration.media) wrapperAttrs.push(`data-ox-media=${JSON.stringify(hydration.media)}`);
+	wrapperAttrs.push(`data-ox-props={${mdxIslandPropsExpression(payload, island.name, context.filePath)}}`);
+	return `<div ${wrapperAttrs.join(" ")}>${element}</div>`;
+}
+/**
+* Reads and removes the island directives so they never reach the component.
+*
+* The strategy is a build-time decision, so it has to be a literal: resolving
+* it from a document prop would mean the wrapper could not be written until
+* render time, by which point the load strategy has already been read.
+*/
+function takeMdxIslandHydration(payload, name, filePath) {
+	for (const directive of [MDX_ISLAND_DIRECTIVE, MDX_ISLAND_MEDIA_DIRECTIVE]) if (directive in payload.expressions) throw new Error(`[ox-content-svelte] "${directive}" on <${name}> in ${filePath} has to be a literal, not a document prop: the load strategy is chosen when the page is built.`);
+	if (!(MDX_ISLAND_DIRECTIVE in payload.props)) return void 0;
+	const raw = payload.props[MDX_ISLAND_DIRECTIVE];
+	const media = payload.props[MDX_ISLAND_MEDIA_DIRECTIVE];
+	delete payload.props[MDX_ISLAND_DIRECTIVE];
+	delete payload.props[MDX_ISLAND_MEDIA_DIRECTIVE];
+	const load = raw === true || raw === "" ? "eager" : raw;
+	if (typeof load !== "string" || !MDX_ISLAND_LOAD_STRATEGIES.has(load)) throw new Error(`[ox-content-svelte] Unknown island load strategy ${JSON.stringify(raw)} on <${name}> in ${filePath}. Use ${[...MDX_ISLAND_LOAD_STRATEGIES].join(", ")}.`);
+	if (load === "media" && typeof media !== "string") throw new Error(`[ox-content-svelte] <${name} ${MDX_ISLAND_DIRECTIVE}="media"> in ${filePath} needs ${MDX_ISLAND_MEDIA_DIRECTIVE} with the query to wait for.`);
+	return {
+		load,
+		media: typeof media === "string" ? media : void 0
+	};
+}
+/**
+* The same props the component is rendered with, serialised for the client.
+*
+* Built in attribute order so a spread and a named prop resolve the way Svelte
+* resolves them in the template above.
+*/
+function mdxIslandPropsExpression(payload, name, filePath) {
+	const parts = [];
+	for (const spread of payload.spreads) {
+		const expression = spread.trim().startsWith("...") ? spread.trim().slice(3).trim() : spread.trim();
+		const path = parseDocumentPropPath(expression);
+		if (!path) throw new Error(`[ox-content-svelte] Unsupported MDX document prop spread "{${spread}}" in ${filePath}. Only identifiers and dotted property paths are supported.`);
+		parts.push(documentPropResolverExpression(path, expression));
+	}
+	const entries = [];
+	for (const [key, value] of Object.entries(payload.props)) entries.push(`${JSON.stringify(key)}: ${renderSvelteLiteral(value)}`);
+	for (const [key, expression] of Object.entries(payload.expressions)) {
+		const path = parseDocumentPropPath(expression.trim());
+		if (!path) throw new Error(`[ox-content-svelte] Unsupported MDX document prop expression "{${expression}}" for prop "${key}" in ${filePath}. Only identifiers and dotted property paths are supported.`);
+		entries.push(`${JSON.stringify(key)}: ${documentPropResolverExpression(path, expression.trim())}`);
+	}
+	if (entries.length > 0) parts.push(`{ ${entries.join(", ")} }`);
+	const merged = parts.length === 0 ? "{}" : parts.length === 1 ? parts[0] : `Object.assign({}, ${parts.join(", ")})`;
+	return `__ox_mdx_island_props(${JSON.stringify(name)}, ${merged})`;
+}
+function renderMdxIslandAttributes(payload, filePath) {
+	const attrs = [];
+	for (const spread of payload.spreads) {
+		const expression = spread.trim().startsWith("...") ? spread.trim().slice(3).trim() : spread.trim();
+		const path = parseDocumentPropPath(expression);
+		if (!path) throw new Error(`[ox-content-svelte] Unsupported MDX document prop spread "{${spread}}" in ${filePath}. Only identifiers and dotted property paths are supported.`);
+		attrs.push(`{...${documentPropResolverExpression(path, expression)}}`);
+	}
+	for (const [name, value] of Object.entries(payload.props)) {
+		assertSvelteAttributeName(name, filePath);
+		attrs.push(`${name}={${renderSvelteLiteral(value)}}`);
+	}
+	for (const [name, expression] of Object.entries(payload.expressions)) {
+		assertSvelteAttributeName(name, filePath);
+		const path = parseDocumentPropPath(expression.trim());
+		if (!path) throw new Error(`[ox-content-svelte] Unsupported MDX document prop expression "{${expression}}" for prop "${name}" in ${filePath}. Only identifiers and dotted property paths are supported.`);
+		attrs.push(`${name}={${documentPropResolverExpression(path, expression.trim())}}`);
+	}
+	return attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
+}
+function documentPropResolverExpression(path, expression) {
+	return `__ox_mdx_document_prop(__ox_mdx_props, ${JSON.stringify(path)}, ${JSON.stringify(expression)})`;
+}
+function renderSvelteLiteral(value) {
+	const literal = JSON.stringify(value);
+	return literal === void 0 ? "undefined" : literal.replaceAll("<\/script", "<\\/script");
+}
+function findMdxIslandRanges(html) {
+	const ranges = [];
+	const openRe = /<(div|span)\b([^>]*\bdata-ox-island="([^"]+)"[^>]*)>/gi;
+	let match;
+	while ((match = openRe.exec(html)) !== null) {
+		const tag = match[1];
+		const name = decodeHtmlAttr(match[3] ?? "");
+		if (!name) continue;
+		const openStart = match.index;
+		const openEnd = match.index + match[0].length;
+		const closeStart = findMatchingClose(html, openEnd, tag);
+		const closeEnd = closeStart < html.length ? closeStart + tag.length + 3 : html.length;
+		const script = html.slice(openEnd, closeStart).match(PAYLOAD_SCRIPT)?.[0];
+		ranges.push({
+			name,
+			tag,
+			openStart,
+			openEnd,
+			innerStart: openEnd,
+			contentStart: openEnd + (script?.length ?? 0),
+			closeStart,
+			closeEnd,
+			propsAttr: matchAttr(match[2] ?? "", "data-ox-props"),
+			script
+		});
+	}
+	return ranges.sort((left, right) => left.openStart - right.openStart);
+}
+function findMatchingClose(html, from, tag) {
+	const openNeedle = `<${tag}`;
+	const closeNeedle = `</${tag}>`;
+	let depth = 1;
+	let cursor = from;
+	while (cursor < html.length) {
+		const nextOpen = indexOfTagOpen(html, openNeedle, cursor);
+		const nextClose = html.indexOf(closeNeedle, cursor);
+		if (nextClose === -1) return html.length;
+		if (nextOpen !== -1 && nextOpen < nextClose) {
+			depth += 1;
+			cursor = nextOpen + openNeedle.length;
+		} else {
+			depth -= 1;
+			if (depth === 0) return nextClose;
+			cursor = nextClose + closeNeedle.length;
+		}
+	}
+	return html.length;
+}
+function indexOfTagOpen(html, openNeedle, from) {
+	let cursor = from;
+	while (cursor < html.length) {
+		const index = html.indexOf(openNeedle, cursor);
+		if (index === -1) return -1;
+		const next = html[index + openNeedle.length];
+		if (next === " " || next === ">" || next === "	" || next === "\n" || next === "/") return index;
+		cursor = index + openNeedle.length;
+	}
+	return -1;
+}
+function matchAttr(attrs, name) {
+	const match = new RegExp(`\\b${name}="([^"]*)"`, "i").exec(attrs);
+	return match?.[1] === void 0 ? void 0 : decodeHtmlAttr(match[1]);
+}
+function readMdxIslandPayload(island) {
+	const fromAttr = island.propsAttr ? tryParseJson(island.propsAttr) : void 0;
+	const fromScript = island.script ? tryParseJson(island.script.match(/<script type="application\/json">([\s\S]*?)<\/script>/i)?.[1] ?? "") : void 0;
+	return normalizeMdxIslandPayload(fromAttr ?? fromScript ?? {});
+}
+function normalizeMdxIslandPayload(parsed) {
+	if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {
+		props: {},
+		expressions: {},
+		spreads: []
+	};
+	const record = parsed;
+	const keys = Object.keys(record);
+	if (keys.length > 0 && keys.every((key) => RUST_PAYLOAD_KEYS.has(key))) return {
+		props: toRecord(record.props),
+		expressions: toStringRecord(record.expressions),
+		spreads: toStringArray(record.spreads)
+	};
+	return {
+		props: record,
+		expressions: {},
+		spreads: []
+	};
+}
+function toRecord(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function toStringRecord(value) {
+	const record = toRecord(value);
+	const output = {};
+	for (const [key, entry] of Object.entries(record)) if (typeof entry === "string") output[key] = entry;
+	return output;
+}
+function toStringArray(value) {
+	return Array.isArray(value) ? value.filter((entry) => typeof entry === "string") : [];
+}
+function tryParseJson(value) {
+	try {
+		return JSON.parse(value);
+	} catch {
+		return;
+	}
+}
+function decodeHtmlAttr(value) {
+	return value.replaceAll("&quot;", "\"").replaceAll("&#39;", "'").replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&amp;", "&");
+}
+function assertSvelteComponentName(name, filePath) {
+	if (!/^[A-Z][A-Za-z0-9_$]*$/.test(name)) throw new Error(`[ox-content-svelte] Unsupported MDX component name "${name}" in ${filePath} for mdxDocumentProps. Only simple Svelte component identifiers are supported.`);
+}
+function assertSvelteAttributeName(name, filePath) {
+	if (!/^[A-Za-z_$][\w$-]*$/.test(name)) throw new Error(`[ox-content-svelte] Unsupported MDX component prop name "${name}" in ${filePath}.`);
+}
 function generateSvelteModule(content, usedComponents, _islands, frontmatter, options, id, localBindings) {
 	const rawHtmlLiteral = JSON.stringify(content).replaceAll("<\/script", "<\\/script");
 	const imports = (0, _ox_content_vite_plugin.renderIslandComponentImports)(usedComponents, {
@@ -287,7 +882,7 @@ function generateSvelteModule(content, usedComponents, _islands, frontmatter, op
 	const componentMap = usedComponents.map((name) => `  ${name},`).join("\n");
 	return `
 <script>
-  import { createRawSnippet, onMount, mount, unmount } from 'svelte';
+  import { createRawSnippet, hydrate, mount, onMount, unmount } from 'svelte';
   import { initIslands, readIslandSlotHtml } from '@ox-content/islands';
   ${imports}
 
@@ -317,7 +912,8 @@ ${componentMap}
         }));
       }
 
-      const instance = mount(Component, { target: element, props: componentProps });
+      const attach = element.dataset.oxSsr === 'true' ? hydrate : mount;
+      const instance = attach(Component, { target: element, props: componentProps });
       mounted.push(instance);
 
       return () => unmount(instance);
@@ -409,6 +1005,10 @@ function resolveSingleEmbedOptions(options) {
 /**
 * Creates the Ox Content Svelte integration plugin.
 *
+* Forwards core options such as `ssg`, `redirects`, `feeds`, and `siteMaps`.
+* The Svelte Markdown transform and environments replace the generic core
+* transform/`markdown` environment; other build plugins are kept.
+*
 * @example
 * ```ts
 * // vite.config.ts
@@ -445,13 +1045,14 @@ function oxContentSvelte(options = {}) {
 				componentMap = new Map(Object.entries(resolvedComponents));
 			}
 		},
-		async transform(code, id) {
+		async transform(code, id, transformOptions) {
 			if (!isMarkdownFilePath(id, resolved.extensions)) return null;
 			const result = await transformMarkdownWithSvelte(code, id, {
 				...resolved,
 				components: Object.fromEntries(componentMap),
 				root: config.root,
-				renderIsland: options.renderIsland
+				renderIsland: options.renderIsland,
+				ssr: transformOptions?.ssr
 			});
 			return {
 				code: result.code,
@@ -504,14 +1105,13 @@ function oxContentSvelte(options = {}) {
 			return modules;
 		}
 	};
-	const environmentPlugin = (0, _ox_content_vite_plugin.oxContent)(options).flatMap((plugin) => Array.isArray(plugin) ? plugin : [plugin]).find((plugin) => plugin.name === "ox-content:environment");
-	const plugins = [
+	const replacedCorePluginNames = /* @__PURE__ */ new Set(["ox-content", "ox-content:environment"]);
+	return [
 		svelteTransformPlugin,
 		svelteEnvironmentPlugin,
-		svelteHmrPlugin
+		svelteHmrPlugin,
+		...(0, _ox_content_vite_plugin.oxContent)(options).flatMap((plugin) => Array.isArray(plugin) ? plugin : [plugin]).filter((plugin) => !replacedCorePluginNames.has(plugin.name))
 	];
-	if (environmentPlugin) plugins.push(environmentPlugin);
-	return plugins;
 }
 function resolveSvelteOptions(options) {
 	return {
@@ -527,7 +1127,8 @@ function resolveSvelteOptions(options) {
 		codeAnnotations: resolveCodeAnnotationsOptions(options.codeAnnotations),
 		runes: options.runes ?? true,
 		embeds: resolveBuiltinEmbedOptions(options.embeds),
-		mdx: options.mdx
+		mdx: options.mdx,
+		mdxDocumentProps: options.mdxDocumentProps ?? false
 	};
 }
 function resolveCodeAnnotationsOptions(options) {