@ox-content/vite-plugin-react 0.0.1-alpha.0 → 0.3.0-alpha.13

package/dist/index.cjs

@@ -1,352 +1,458 @@
-"use strict";
+//#region rolldown:runtime
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  oxContent: () => import_vite_plugin_ox_content3.oxContent,
-  oxContentReact: () => oxContentReact
-});
-module.exports = __toCommonJS(index_exports);
-var fs = __toESM(require("fs"), 1);
-var path2 = __toESM(require("path"), 1);
-var import_vite_plugin_ox_content2 = require("vite-plugin-ox-content");
+//#endregion
+let fs = require("fs");
+fs = __toESM(fs);
+let path$1 = require("path");
+path$1 = __toESM(path$1);
+let _ox_content_vite_plugin = require("@ox-content/vite-plugin");
 
-// src/transform.ts
-var path = __toESM(require("path"), 1);
-var import_vite_plugin_ox_content = require("vite-plugin-ox-content");
-var COMPONENT_REGEX = /<([A-Z][a-zA-Z0-9]*)\s*([^>]*?)\s*(?:\/>|>(?:[\s\S]*?)<\/\1>)/g;
-var PROP_REGEX = /([a-zA-Z0-9-]+)(?:=(?:"([^"]*)"|'([^']*)'|{([^}]*)}))?/g;
+//#region src/transform.ts
+const COMPONENT_REGEX = /<([A-Z][a-zA-Z0-9]*)\s*([^>]*?)\s*(?:\/>|>([\s\S]*?)<\/\1>)/g;
+const PROP_REGEX = /([a-zA-Z0-9-]+)(?:=(?:"([^"]*)"|'([^']*)'|{([^}]*)}|\[([^\]]*)\]))?/g;
+const ISLAND_MARKER_PREFIX = "OXCONTENT-ISLAND-";
+const ISLAND_MARKER_SUFFIX = "-PLACEHOLDER";
 async function transformMarkdownWithReact(code, id, options) {
-  const components = options.components;
-  const usedComponents = [];
-  const slots = [];
-  let slotIndex = 0;
-  const { content: markdownContent, frontmatter } = extractFrontmatter(code);
-  let processedContent = markdownContent;
-  let match;
-  while ((match = COMPONENT_REGEX.exec(markdownContent)) !== null) {
-    const [fullMatch, componentName, propsString] = match;
-    if (componentName in components) {
-      if (!usedComponents.includes(componentName)) {
-        usedComponents.push(componentName);
-      }
-      const props = parseProps(propsString);
-      const slotId = `__ox_slot_${slotIndex++}__`;
-      slots.push({
-        name: componentName,
-        props,
-        position: match.index,
-        id: slotId
-      });
-      processedContent = processedContent.replace(
-        fullMatch,
-        `<div data-ox-slot="${slotId}"></div>`
-      );
-    }
-  }
-  const transformed = await (0, import_vite_plugin_ox_content.transformMarkdown)(processedContent, id, {
-    srcDir: options.srcDir,
-    outDir: options.outDir,
-    base: options.base,
-    ssg: { enabled: false, extension: ".html", clean: false, bare: false, generateOgImage: false },
-    gfm: options.gfm,
-    frontmatter: false,
-    toc: options.toc,
-    tocMaxDepth: options.tocMaxDepth,
-    footnotes: true,
-    tables: true,
-    taskLists: true,
-    strikethrough: true,
-    highlight: false,
-    highlightTheme: "github-dark",
-    mermaid: false,
-    ogImage: false,
-    ogImageOptions: {},
-    transformers: [],
-    docs: false,
-    search: { enabled: false, limit: 10, prefix: true, placeholder: "Search...", hotkey: "k" }
-  });
-  const jsxCode = generateReactModule(
-    transformed.html,
-    usedComponents,
-    slots,
-    frontmatter,
-    options,
-    id
-  );
-  return {
-    code: jsxCode,
-    map: null,
-    usedComponents,
-    frontmatter
-  };
+	const components = options.components;
+	const usedComponents = [];
+	const islands = [];
+	let islandIndex = 0;
+	const { content: markdownContent, frontmatter } = extractFrontmatter(code);
+	const fenceRanges = collectFenceRanges(markdownContent);
+	let processedContent = "";
+	let lastIndex = 0;
+	let match;
+	COMPONENT_REGEX.lastIndex = 0;
+	while ((match = COMPONENT_REGEX.exec(markdownContent)) !== null) {
+		const [fullMatch, componentName, propsString, rawIslandContent] = match;
+		const matchStart = match.index;
+		const matchEnd = matchStart + fullMatch.length;
+		if (!Object.prototype.hasOwnProperty.call(components, componentName) || isInRanges(matchStart, matchEnd, fenceRanges)) {
+			processedContent += markdownContent.slice(lastIndex, matchEnd);
+			lastIndex = matchEnd;
+			continue;
+		}
+		if (!usedComponents.includes(componentName)) usedComponents.push(componentName);
+		const props = parseProps(propsString);
+		const islandId = `ox-island-${islandIndex++}`;
+		const islandContent = typeof rawIslandContent === "string" ? rawIslandContent.trim() : void 0;
+		islands.push({
+			name: componentName,
+			props,
+			position: matchStart,
+			id: islandId,
+			content: islandContent
+		});
+		processedContent += markdownContent.slice(lastIndex, matchStart) + createIslandMarker(islandId);
+		lastIndex = matchEnd;
+	}
+	processedContent += markdownContent.slice(lastIndex);
+	return {
+		code: generateReactModule(injectIslandMarkers((await (0, _ox_content_vite_plugin.transformMarkdown)(processedContent, id, {
+			srcDir: options.srcDir,
+			outDir: options.outDir,
+			base: options.base,
+			ssg: {
+				enabled: false,
+				extension: ".html",
+				clean: false,
+				bare: false,
+				generateOgImage: false
+			},
+			gfm: options.gfm,
+			frontmatter: false,
+			toc: options.toc,
+			tocMaxDepth: options.tocMaxDepth,
+			footnotes: true,
+			tables: true,
+			taskLists: true,
+			strikethrough: true,
+			highlight: false,
+			highlightTheme: "github-dark",
+			mermaid: false,
+			ogImage: false,
+			ogImageOptions: {},
+			transformers: [],
+			docs: false,
+			search: {
+				enabled: false,
+				limit: 10,
+				prefix: true,
+				placeholder: "Search...",
+				hotkey: "k"
+			}
+		})).html, islands), usedComponents, islands, frontmatter, options, id),
+		map: null,
+		usedComponents,
+		frontmatter
+	};
+}
+function createIslandMarker(islandId) {
+	return `${ISLAND_MARKER_PREFIX}${islandId}${ISLAND_MARKER_SUFFIX}`;
+}
+function collectFenceRanges(content) {
+	const ranges = [];
+	let inFence = false;
+	let fenceChar = "";
+	let fenceLength = 0;
+	let fenceStart = 0;
+	let pos = 0;
+	while (pos < content.length) {
+		const lineEnd = content.indexOf("\n", pos);
+		const next = lineEnd === -1 ? content.length : lineEnd + 1;
+		const fenceMatch = content.slice(pos, lineEnd === -1 ? content.length : lineEnd).match(/^\s{0,3}([`~]{3,})/);
+		if (fenceMatch) {
+			const marker = fenceMatch[1];
+			if (!inFence) {
+				inFence = true;
+				fenceChar = marker[0];
+				fenceLength = marker.length;
+				fenceStart = pos;
+			} else if (marker[0] === fenceChar && marker.length >= fenceLength) {
+				inFence = false;
+				ranges.push({
+					start: fenceStart,
+					end: next
+				});
+				fenceChar = "";
+				fenceLength = 0;
+			}
+		}
+		pos = next;
+	}
+	if (inFence) ranges.push({
+		start: fenceStart,
+		end: content.length
+	});
+	return ranges;
+}
+function isInRanges(start, end, ranges) {
+	for (const range of ranges) if (start < range.end && end > range.start) return true;
+	return false;
+}
+function injectIslandMarkers(html, islands) {
+	let output = html;
+	for (const island of islands) {
+		const marker = createIslandMarker(island.id);
+		const propsAttr = Object.keys(island.props).length > 0 ? ` data-ox-props='${JSON.stringify(island.props).replace(/'/g, "&#39;")}'` : "";
+		const contentAttr = island.content ? ` data-ox-content='${island.content.replace(/'/g, "&#39;")}'` : "";
+		const attrs = `data-ox-island="${island.name}"${propsAttr}${contentAttr}`;
+		output = output.replaceAll(`<p>${marker}</p>`, `<div ${attrs}></div>`);
+		output = output.replaceAll(marker, `<span ${attrs}></span>`);
+	}
+	return output;
 }
 function extractFrontmatter(content) {
-  const frontmatterRegex = /^---\n([\s\S]*?)\n---\n/;
-  const match = frontmatterRegex.exec(content);
-  if (!match) {
-    return { content, frontmatter: {} };
-  }
-  const frontmatterStr = match[1];
-  const frontmatter = {};
-  for (const line of frontmatterStr.split("\n")) {
-    const colonIndex = line.indexOf(":");
-    if (colonIndex > 0) {
-      const key = line.slice(0, colonIndex).trim();
-      let value = line.slice(colonIndex + 1).trim();
-      try {
-        value = JSON.parse(value);
-      } catch {
-        if (typeof value === "string" && value.startsWith('"') && value.endsWith('"')) {
-          value = value.slice(1, -1);
-        }
-      }
-      frontmatter[key] = value;
-    }
-  }
-  return { content: content.slice(match[0].length), frontmatter };
+	const match = /^---\n([\s\S]*?)\n---\n/.exec(content);
+	if (!match) return {
+		content,
+		frontmatter: {}
+	};
+	const frontmatterStr = match[1];
+	const frontmatter = {};
+	for (const line of frontmatterStr.split("\n")) {
+		const colonIndex = line.indexOf(":");
+		if (colonIndex > 0) {
+			const key = line.slice(0, colonIndex).trim();
+			let value = line.slice(colonIndex + 1).trim();
+			try {
+				value = JSON.parse(value);
+			} catch {
+				if (typeof value === "string" && (value.startsWith("\"") && value.endsWith("\"") || value.startsWith("'") && value.endsWith("'"))) value = value.slice(1, -1);
+			}
+			frontmatter[key] = value;
+		}
+	}
+	return {
+		content: content.slice(match[0].length),
+		frontmatter
+	};
 }
 function parseProps(propsString) {
-  const props = {};
-  if (!propsString) return props;
-  let match;
-  while ((match = PROP_REGEX.exec(propsString)) !== null) {
-    const [, name, doubleQuoted, singleQuoted, braceValue] = match;
-    if (name) {
-      if (doubleQuoted !== void 0) props[name] = doubleQuoted;
-      else if (singleQuoted !== void 0) props[name] = singleQuoted;
-      else if (braceValue !== void 0) {
-        try {
-          props[name] = JSON.parse(braceValue);
-        } catch {
-          props[name] = braceValue;
-        }
-      } else props[name] = true;
-    }
-  }
-  return props;
+	const props = {};
+	if (!propsString) return props;
+	PROP_REGEX.lastIndex = 0;
+	let match;
+	while ((match = PROP_REGEX.exec(propsString)) !== null) {
+		const [, name, doubleQuoted, singleQuoted, braceValue, bracketValue] = match;
+		if (name) if (doubleQuoted !== void 0) props[name] = doubleQuoted;
+		else if (singleQuoted !== void 0) props[name] = singleQuoted;
+		else if (braceValue !== void 0) try {
+			props[name] = JSON.parse(braceValue);
+		} catch {
+			props[name] = braceValue;
+		}
+		else if (bracketValue !== void 0) try {
+			props[name] = JSON.parse(`[${bracketValue}]`);
+		} catch {
+			props[name] = bracketValue;
+		}
+		else props[name] = true;
+	}
+	return props;
 }
-function generateReactModule(content, usedComponents, slots, frontmatter, options, id) {
-  const mdDir = path.dirname(id);
-  const root = options.root || process.cwd();
-  const imports = usedComponents.map((name) => {
-    const componentPath = options.components[name];
-    if (!componentPath) return "";
-    const absolutePath = path.resolve(root, componentPath.replace(/^\.\//, ""));
-    const relativePath = path.relative(mdDir, absolutePath).replace(/\\/g, "/");
-    const importPath = relativePath.startsWith(".") ? relativePath : "./" + relativePath;
-    return `import ${name} from '${importPath}';`;
-  }).filter(Boolean).join("\n");
-  return `
-import React, { useState, useEffect, createElement } from 'react';
+function generateReactModule(content, usedComponents, islands, frontmatter, options, id) {
+	const mdDir = path$1.dirname(id);
+	const root = options.root || process.cwd();
+	const imports = usedComponents.map((name) => {
+		const componentPath = options.components[name];
+		if (!componentPath) return "";
+		const absolutePath = path$1.resolve(root, componentPath.replace(/^\.\//, ""));
+		const relativePath = path$1.relative(mdDir, absolutePath).replace(/\\/g, "/");
+		return `import ${name} from '${relativePath.startsWith(".") ? relativePath : "./" + relativePath}';`;
+	}).filter(Boolean).join("\n");
+	const componentMap = usedComponents.map((name) => `  ${name},`).join("\n");
+	if (islands.length === 0) return `
+import React, { createElement } from 'react';
+
+export const frontmatter = ${JSON.stringify(frontmatter)};
+
+const rawHtml = ${JSON.stringify(content)};
+
+export default function MarkdownContent() {
+  return createElement('div', {
+    className: 'ox-content',
+    dangerouslySetInnerHTML: { __html: rawHtml },
+  });
+}
+`;
+	return `
+import React, { useEffect, useRef, createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { initIslands } from '@ox-content/islands';
 ${imports}
 
-const frontmatter = ${JSON.stringify(frontmatter)};
+export const frontmatter = ${JSON.stringify(frontmatter)};
+
 const rawHtml = ${JSON.stringify(content)};
-const slots = ${JSON.stringify(slots)};
+const components = {
+${componentMap}
+};
+
+function createReactHydrate() {
+  const mountedRoots = [];
+
+  return (element, props) => {
+    const componentName = element.dataset.oxIsland;
+    const Component = components[componentName];
+    if (!Component) return;
 
-const components = { ${usedComponents.join(", ")} };
+    const islandContent = element.dataset.oxContent || element.innerHTML;
+    const vnode = islandContent
+      ? createElement(
+          Component,
+          props,
+          createElement('div', { dangerouslySetInnerHTML: { __html: islandContent } })
+        )
+      : createElement(Component, props);
+
+    const root = createRoot(element);
+    root.render(vnode);
+    mountedRoots.push(root);
+
+    return () => root.unmount();
+  };
+}
 
 export default function MarkdownContent() {
-  const [mounted, setMounted] = useState(false);
+  const containerRef = useRef(null);
 
   useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return createElement('div', {
-      className: 'ox-content',
-      dangerouslySetInnerHTML: { __html: rawHtml }
+    if (!containerRef.current) return;
+    const controller = initIslands(createReactHydrate(), {
+      selector: '.ox-content [data-ox-island]',
     });
-  }
+    return () => controller.destroy();
+  }, []);
 
-  return createElement('div', { className: 'ox-content' },
-    slots.map((slot) => {
-      const Component = components[slot.name];
-      return Component ? createElement(Component, { key: slot.id, ...slot.props }) : null;
-    })
-  );
+  return createElement('div', {
+    className: 'ox-content',
+    ref: containerRef,
+    dangerouslySetInnerHTML: { __html: rawHtml },
+  });
 }
-
-export { frontmatter };
 `;
 }
 
-// src/environment.ts
+//#endregion
+//#region src/environment.ts
 function createReactMarkdownEnvironment(mode, options) {
-  const isSSR = mode === "ssr";
-  return {
-    build: {
-      outDir: isSSR ? `${options.outDir}/.ox-content/ssr` : `${options.outDir}/.ox-content/client`,
-      ssr: isSSR,
-      rollupOptions: {
-        output: {
-          format: "esm",
-          entryFileNames: isSSR ? "[name].js" : "[name].[hash].js"
-        }
-      },
-      ...isSSR && { target: "node18", minify: false }
-    },
-    resolve: {
-      conditions: isSSR ? ["node", "import"] : ["browser", "import"]
-    },
-    optimizeDeps: {
-      include: isSSR ? [] : ["react", "react-dom"],
-      exclude: ["vite-plugin-ox-content", "vite-plugin-ox-content-react"]
-    }
-  };
+	const isSSR = mode === "ssr";
+	return {
+		build: {
+			outDir: isSSR ? `${options.outDir}/.ox-content/ssr` : `${options.outDir}/.ox-content/client`,
+			ssr: isSSR,
+			rollupOptions: { output: {
+				format: "esm",
+				entryFileNames: isSSR ? "[name].js" : "[name].[hash].js"
+			} },
+			...isSSR && {
+				target: "node18",
+				minify: false
+			}
+		},
+		resolve: { conditions: isSSR ? ["node", "import"] : ["browser", "import"] },
+		optimizeDeps: {
+			include: isSSR ? [] : ["react", "react-dom"],
+			exclude: ["@ox-content/vite-plugin", "@ox-content/vite-plugin-react"]
+		}
+	};
 }
 
-// src/index.ts
-var import_vite_plugin_ox_content3 = require("vite-plugin-ox-content");
+//#endregion
+//#region src/index.ts
+/**
+* Vite Plugin for Ox Content React Integration
+*
+* Uses Vite's Environment API to enable embedding React components in Markdown.
+*/
+/**
+* Creates the Ox Content React integration plugin.
+*
+* @example
+* ```ts
+* // vite.config.ts
+* import { defineConfig } from 'vite';
+* import react from '@vitejs/plugin-react';
+* import { oxContentReact } from 'vite-plugin-ox-content-react';
+*
+* export default defineConfig({
+*   plugins: [
+*     react(),
+*     oxContentReact({
+*       srcDir: 'docs',
+*       components: {
+*         Counter: './src/components/Counter.tsx',
+*       },
+*     }),
+*   ],
+* });
+* ```
+*/
 function oxContentReact(options = {}) {
-  const resolved = resolveReactOptions(options);
-  let componentMap = /* @__PURE__ */ new Map();
-  let config;
-  if (typeof options.components === "object" && !Array.isArray(options.components)) {
-    componentMap = new Map(Object.entries(options.components));
-  }
-  const reactTransformPlugin = {
-    name: "ox-content:react-transform",
-    enforce: "pre",
-    async configResolved(resolvedConfig) {
-      config = resolvedConfig;
-      const componentsOption = options.components;
-      if (componentsOption) {
-        const resolvedComponents = await resolveComponentsGlob(
-          componentsOption,
-          config.root
-        );
-        componentMap = new Map(Object.entries(resolvedComponents));
-      }
-    },
-    async transform(code, id) {
-      if (!id.endsWith(".md")) {
-        return null;
-      }
-      const result = await transformMarkdownWithReact(code, id, {
-        ...resolved,
-        components: Object.fromEntries(componentMap),
-        root: config.root
-      });
-      return {
-        code: result.code,
-        map: result.map
-      };
-    }
-  };
-  const reactEnvironmentPlugin = {
-    name: "ox-content:react-environment",
-    config() {
-      const envOptions = {
-        ...resolved,
-        components: Object.fromEntries(componentMap)
-      };
-      return {
-        environments: {
-          oxcontent_ssr: createReactMarkdownEnvironment("ssr", envOptions),
-          oxcontent_client: createReactMarkdownEnvironment("client", envOptions)
-        }
-      };
-    },
-    resolveId(id) {
-      if (id === "virtual:ox-content-react/runtime") {
-        return "\0virtual:ox-content-react/runtime";
-      }
-      if (id === "virtual:ox-content-react/components") {
-        return "\0virtual:ox-content-react/components";
-      }
-      return null;
-    },
-    load(id) {
-      if (id === "\0virtual:ox-content-react/runtime") {
-        return generateRuntimeModule();
-      }
-      if (id === "\0virtual:ox-content-react/components") {
-        return generateComponentsModule(componentMap);
-      }
-      return null;
-    },
-    applyToEnvironment(environment) {
-      return ["oxcontent_ssr", "oxcontent_client", "client", "ssr"].includes(
-        environment.name
-      );
-    }
-  };
-  const reactHmrPlugin = {
-    name: "ox-content:react-hmr",
-    apply: "serve",
-    handleHotUpdate({ file, server, modules }) {
-      const isComponent = Array.from(componentMap.values()).some(
-        (path3) => file.endsWith(path3.replace(/^\.\//, ""))
-      );
-      if (isComponent) {
-        const mdModules = Array.from(
-          server.moduleGraph.idToModuleMap.values()
-        ).filter((mod) => mod.file?.endsWith(".md"));
-        if (mdModules.length > 0) {
-          server.ws.send({
-            type: "custom",
-            event: "ox-content:react-update",
-            data: { file }
-          });
-          return [...modules, ...mdModules];
-        }
-      }
-      return modules;
-    }
-  };
-  const basePlugins = (0, import_vite_plugin_ox_content2.oxContent)(options);
-  const environmentPlugin = basePlugins.find((p) => p.name === "ox-content:environment");
-  return [
-    reactTransformPlugin,
-    reactEnvironmentPlugin,
-    reactHmrPlugin,
-    ...environmentPlugin ? [environmentPlugin] : []
-  ];
+	const resolved = resolveReactOptions(options);
+	let componentMap = /* @__PURE__ */ new Map();
+	let config;
+	if (typeof options.components === "object" && !Array.isArray(options.components)) componentMap = new Map(Object.entries(options.components));
+	const reactTransformPlugin = {
+		name: "ox-content:react-transform",
+		enforce: "pre",
+		async configResolved(resolvedConfig) {
+			config = resolvedConfig;
+			const componentsOption = options.components;
+			if (componentsOption) {
+				const resolvedComponents = await resolveComponentsGlob(componentsOption, config.root);
+				componentMap = new Map(Object.entries(resolvedComponents));
+			}
+		},
+		async transform(code, id) {
+			if (!id.endsWith(".md")) return null;
+			const result = await transformMarkdownWithReact(code, id, {
+				...resolved,
+				components: Object.fromEntries(componentMap),
+				root: config.root
+			});
+			return {
+				code: result.code,
+				map: result.map
+			};
+		}
+	};
+	const reactEnvironmentPlugin = {
+		name: "ox-content:react-environment",
+		config() {
+			const envOptions = {
+				...resolved,
+				components: Object.fromEntries(componentMap)
+			};
+			return { environments: {
+				oxcontent_ssr: createReactMarkdownEnvironment("ssr", envOptions),
+				oxcontent_client: createReactMarkdownEnvironment("client", envOptions)
+			} };
+		},
+		resolveId(id) {
+			if (id === "virtual:ox-content-react/runtime") return "\0virtual:ox-content-react/runtime";
+			if (id === "virtual:ox-content-react/components") return "\0virtual:ox-content-react/components";
+			return null;
+		},
+		load(id) {
+			if (id === "\0virtual:ox-content-react/runtime") return generateRuntimeModule();
+			if (id === "\0virtual:ox-content-react/components") return generateComponentsModule(componentMap);
+			return null;
+		},
+		applyToEnvironment(environment) {
+			return [
+				"oxcontent_ssr",
+				"oxcontent_client",
+				"client",
+				"ssr"
+			].includes(environment.name);
+		}
+	};
+	const reactHmrPlugin = {
+		name: "ox-content:react-hmr",
+		apply: "serve",
+		handleHotUpdate({ file, server, modules }) {
+			if (Array.from(componentMap.values()).some((path) => file.endsWith(path.replace(/^\.\//, "")))) {
+				const mdModules = Array.from(server.moduleGraph.idToModuleMap.values()).filter((mod) => mod.file?.endsWith(".md"));
+				if (mdModules.length > 0) {
+					server.ws.send({
+						type: "custom",
+						event: "ox-content:react-update",
+						data: { file }
+					});
+					return [...modules, ...mdModules];
+				}
+			}
+			return modules;
+		}
+	};
+	const environmentPlugin = (0, _ox_content_vite_plugin.oxContent)(options).find((p) => p.name === "ox-content:environment");
+	return [
+		reactTransformPlugin,
+		reactEnvironmentPlugin,
+		reactHmrPlugin,
+		...environmentPlugin ? [environmentPlugin] : []
+	];
 }
 function resolveReactOptions(options) {
-  return {
-    srcDir: options.srcDir ?? "docs",
-    outDir: options.outDir ?? "dist",
-    base: options.base ?? "/",
-    gfm: options.gfm ?? true,
-    frontmatter: options.frontmatter ?? true,
-    toc: options.toc ?? true,
-    tocMaxDepth: options.tocMaxDepth ?? 3,
-    jsxRuntime: options.jsxRuntime ?? "automatic"
-  };
+	return {
+		srcDir: options.srcDir ?? "docs",
+		outDir: options.outDir ?? "dist",
+		base: options.base ?? "/",
+		gfm: options.gfm ?? true,
+		frontmatter: options.frontmatter ?? true,
+		toc: options.toc ?? true,
+		tocMaxDepth: options.tocMaxDepth ?? 3,
+		jsxRuntime: options.jsxRuntime ?? "automatic"
+	};
 }
 function generateRuntimeModule() {
-  return `
+	return `
 import React, { useState, useEffect } from 'react';
 
 export function OxContentRenderer({ content, components = {} }) {
@@ -358,7 +464,7 @@ export function OxContentRenderer({ content, components = {} }) {
 
   if (!content) return null;
 
-  const { html, frontmatter, slots } = content;
+  const { html, frontmatter, islands } = content;
 
   if (!mounted) {
     return React.createElement('div', {
@@ -368,10 +474,10 @@ export function OxContentRenderer({ content, components = {} }) {
   }
 
   return React.createElement('div', { className: 'ox-content' },
-    slots.map((slot) => {
-      const Component = components[slot.name];
+    islands.map((island) => {
+      const Component = components[island.name];
       return Component
-        ? React.createElement(Component, { key: slot.id, ...slot.props })
+        ? React.createElement(Component, { key: island.id, ...island.props })
         : null;
     })
   );
@@ -383,83 +489,70 @@ export function useOxContent() {
 `;
 }
 function generateComponentsModule(componentMap) {
-  const imports = [];
-  const exports2 = [];
-  componentMap.forEach((path3, name) => {
-    imports.push(`import ${name} from '${path3}';`);
-    exports2.push(`  ${name},`);
-  });
-  return `
+	const imports = [];
+	const exports = [];
+	componentMap.forEach((path, name) => {
+		imports.push(`import ${name} from '${path}';`);
+		exports.push(`  ${name},`);
+	});
+	return `
 ${imports.join("\n")}
 
 export const components = {
-${exports2.join("\n")}
+${exports.join("\n")}
 };
 
 export default components;
 `;
 }
 async function resolveComponentsGlob(componentsOption, root) {
-  if (typeof componentsOption === "object" && !Array.isArray(componentsOption)) {
-    return componentsOption;
-  }
-  const patterns = Array.isArray(componentsOption) ? componentsOption : [componentsOption];
-  const result = {};
-  for (const pattern of patterns) {
-    const files = await globFiles(pattern, root);
-    for (const file of files) {
-      const baseName = path2.basename(file, path2.extname(file));
-      const componentName = toPascalCase(baseName);
-      const relativePath = "./" + path2.relative(root, file).replace(/\\/g, "/");
-      result[componentName] = relativePath;
-    }
-  }
-  return result;
+	if (typeof componentsOption === "object" && !Array.isArray(componentsOption)) return componentsOption;
+	const patterns = Array.isArray(componentsOption) ? componentsOption : [componentsOption];
+	const result = {};
+	for (const pattern of patterns) {
+		const files = await globFiles(pattern, root);
+		for (const file of files) {
+			const componentName = toPascalCase(path$1.basename(file, path$1.extname(file)));
+			result[componentName] = "./" + path$1.relative(root, file).replace(/\\/g, "/");
+		}
+	}
+	return result;
 }
 async function globFiles(pattern, root) {
-  const files = [];
-  const isGlob = pattern.includes("*");
-  if (!isGlob) {
-    const fullPath = path2.resolve(root, pattern);
-    if (fs.existsSync(fullPath)) {
-      files.push(fullPath);
-    }
-    return files;
-  }
-  const parts = pattern.split("*");
-  const baseDir = path2.resolve(root, parts[0]);
-  const ext = parts[1] || "";
-  if (!fs.existsSync(baseDir)) {
-    return files;
-  }
-  if (pattern.includes("**")) {
-    await walkDir(baseDir, files, ext);
-  } else {
-    const entries = await fs.promises.readdir(baseDir, { withFileTypes: true });
-    for (const entry of entries) {
-      if (entry.isFile() && entry.name.endsWith(ext)) {
-        files.push(path2.join(baseDir, entry.name));
-      }
-    }
-  }
-  return files;
+	const files = [];
+	if (!pattern.includes("*")) {
+		const fullPath = path$1.resolve(root, pattern);
+		if (fs.existsSync(fullPath)) files.push(fullPath);
+		return files;
+	}
+	const parts = pattern.split("*");
+	const baseDir = path$1.resolve(root, parts[0]);
+	const ext = parts[1] || "";
+	if (!fs.existsSync(baseDir)) return files;
+	if (pattern.includes("**")) await walkDir(baseDir, files, ext);
+	else {
+		const entries = await fs.promises.readdir(baseDir, { withFileTypes: true });
+		for (const entry of entries) if (entry.isFile() && entry.name.endsWith(ext)) files.push(path$1.join(baseDir, entry.name));
+	}
+	return files;
 }
 async function walkDir(dir, files, ext) {
-  const entries = await fs.promises.readdir(dir, { withFileTypes: true });
-  for (const entry of entries) {
-    const fullPath = path2.join(dir, entry.name);
-    if (entry.isDirectory()) {
-      await walkDir(fullPath, files, ext);
-    } else if (entry.isFile() && entry.name.endsWith(ext)) {
-      files.push(fullPath);
-    }
-  }
+	const entries = await fs.promises.readdir(dir, { withFileTypes: true });
+	for (const entry of entries) {
+		const fullPath = path$1.join(dir, entry.name);
+		if (entry.isDirectory()) await walkDir(fullPath, files, ext);
+		else if (entry.isFile() && entry.name.endsWith(ext)) files.push(fullPath);
+	}
 }
 function toPascalCase(str) {
-  return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
+	return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  oxContent,
-  oxContentReact
+
+//#endregion
+Object.defineProperty(exports, 'oxContent', {
+  enumerable: true,
+  get: function () {
+    return _ox_content_vite_plugin.oxContent;
+  }
 });
+exports.oxContentReact = oxContentReact;