@ox-content/vite-plugin-vue 0.0.1-alpha.0 → 0.3.0-alpha.11

package/dist/index.cjs

@@ -1,400 +1,501 @@
-"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,
-  oxContentVue: () => oxContentVue
-});
-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 = /(?::|v-bind:)?([a-zA-Z0-9-]+)(?:=(?:"([^"]*)"|'([^']*)'|{([^}]*)}|\[([^\]]*)\]))?/g;
+//#region src/transform.ts
+/**
+* Markdown to Vue SFC transformation.
+*/
+const COMPONENT_REGEX = /<([A-Z][a-zA-Z0-9]*)\s*([^>]*?)\s*(?:\/>|>([\s\S]*?)<\/\1>)/g;
+const PROP_REGEX = /(?::|v-bind:)?([a-zA-Z0-9-]+)(?:=(?:"([^"]*)"|'([^']*)'|{([^}]*)}|\[([^\]]*)\]))?/g;
+const ISLAND_MARKER_PREFIX = "OXCONTENT-ISLAND-";
+const ISLAND_MARKER_SUFFIX = "-PLACEHOLDER";
+/**
+* Transforms Markdown content with Vue component support.
+*/
 async function transformMarkdownWithVue(code, id, options) {
-  const { components } = options;
-  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 (components.has(componentName)) {
-      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,
-    // Already extracted
-    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 sfcCode = generateVueSFC(
-    transformed.html,
-    usedComponents,
-    slots,
-    frontmatter,
-    options,
-    id
-  );
-  return {
-    code: sfcCode,
-    map: null,
-    usedComponents,
-    frontmatter
-  };
+	const { components } = options;
+	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 (!components.has(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: generateVueSFC(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;
+}
+/**
+* Extracts frontmatter from Markdown content.
+*/
 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.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
+	};
 }
+/**
+* Parses component props from a string.
+*/
 function parseProps(propsString) {
-  const props = {};
-  if (!propsString) return props;
-  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;
+	const props = {};
+	if (!propsString) return props;
+	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 generateVueSFC(content, usedComponents, slots, frontmatter, options, id) {
-  const mdDir = path.dirname(id);
-  const root = options.root || process.cwd();
-  const componentImports = usedComponents.map((name) => {
-    const componentPath = options.components.get(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");
-  const slotRenderCases = slots.map(
-    (slot) => `
-      case '${slot.id}':
-        return h(${slot.name}, ${JSON.stringify(slot.props)});`
-  ).join("");
-  return `
-import { h, ref, onMounted, defineComponent } from 'vue';
+/**
+* Generates a Vue component as JavaScript module from the processed Markdown.
+*/
+function generateVueSFC(content, usedComponents, islands, frontmatter, options, id) {
+	const mdDir = path$1.dirname(id);
+	const root = options.root || process.cwd();
+	const componentImports = usedComponents.map((name) => {
+		const componentPath = options.components.get(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 { h, ref, defineComponent } from 'vue';
+
+export const frontmatter = ${JSON.stringify(frontmatter)};
+
+const rawHtml = ${JSON.stringify(content)};
+
+export default defineComponent({
+  name: 'MarkdownContent',
+  setup(_, { expose }) {
+    expose({ frontmatter });
+
+    return () =>
+      h('div', {
+        class: 'ox-content',
+        innerHTML: rawHtml,
+      });
+  },
+});
+`;
+	return `
+import { h, ref, onMounted, onBeforeUnmount, defineComponent, render } from 'vue';
+import { initIslands } from '@ox-content/islands';
 ${componentImports}
 
 export const frontmatter = ${JSON.stringify(frontmatter)};
 
 const rawHtml = ${JSON.stringify(content)};
-const slots = ${JSON.stringify(slots)};
+const components = {
+${componentMap}
+};
 
-function renderSlot(slotId) {
-  switch (slotId) {${slotRenderCases}
-    default:
-      return null;
-  }
+function createVueHydrate(container) {
+  const mountedTargets = [];
+
+  return (element, props) => {
+    const componentName = element.dataset.oxIsland;
+    const Component = components[componentName];
+    if (!Component) return;
+
+    const islandContent = element.dataset.oxContent || element.innerHTML;
+    const children = islandContent
+      ? { default: () => h('div', { innerHTML: islandContent }) }
+      : undefined;
+
+    const vnode = h(Component, props, children);
+    render(vnode, element);
+    mountedTargets.push(element);
+
+    return () => render(null, element);
+  };
 }
 
 export default defineComponent({
   name: 'MarkdownContent',
   setup(_, { expose }) {
-    const mounted = ref(false);
+    const container = ref(null);
+    let controller;
 
     onMounted(() => {
-      mounted.value = true;
+      if (container.value) {
+        controller = initIslands(createVueHydrate(container.value), {
+          selector: '.ox-content [data-ox-island]',
+        });
+      }
     });
 
-    expose({ frontmatter });
+    onBeforeUnmount(() => {
+      if (controller) controller.destroy();
+    });
 
-    return () => {
-      if (!mounted.value) {
-        return h('div', {
-          class: 'ox-content',
-          innerHTML: rawHtml,
-        });
-      }
+    expose({ frontmatter });
 
-      return h('div', { class: 'ox-content' },
-        slots.map((slot) => renderSlot(slot.id))
-      );
-    };
+    return () =>
+      h('div', {
+        class: 'ox-content',
+        ref: container,
+        innerHTML: rawHtml,
+      });
   },
 });
 `;
 }
 
-// src/environment.ts
+//#endregion
+//#region src/environment.ts
+/**
+* Creates a Vite environment for Vue markdown processing.
+*
+* @param mode - 'ssr' for server-side rendering, 'client' for client hydration
+* @param options - Resolved Vue integration options
+*/
 function createVueMarkdownEnvironment(mode, options) {
-  const isSSR = mode === "ssr";
-  return {
-    build: {
-      outDir: isSSR ? `${options.outDir}/.ox-content/ssr` : `${options.outDir}/.ox-content/client`,
-      ssr: isSSR,
-      rollupOptions: {
-        input: isSSR ? void 0 : void 0,
-        output: {
-          format: isSSR ? "esm" : "esm",
-          entryFileNames: isSSR ? "[name].js" : "[name].[hash].js",
-          chunkFileNames: isSSR ? "chunks/[name].js" : "chunks/[name].[hash].js"
-        }
-      },
-      // SSR-specific optimizations
-      ...isSSR && {
-        target: "node18",
-        minify: false
-      }
-    },
-    resolve: {
-      conditions: isSSR ? ["node", "import"] : ["browser", "import"]
-    },
-    optimizeDeps: {
-      // Pre-bundle Vue for faster cold starts
-      include: isSSR ? [] : ["vue"],
-      // Exclude ox-content packages from optimization (they're local)
-      exclude: ["vite-plugin-ox-content", "vite-plugin-ox-content-vue"]
-    },
-    // Development server options (client only)
-    ...!isSSR && {
-      dev: {
-        warmup: ["./src/**/*.vue", "./docs/**/*.md"]
-      }
-    }
-  };
+	const isSSR = mode === "ssr";
+	return {
+		build: {
+			outDir: isSSR ? `${options.outDir}/.ox-content/ssr` : `${options.outDir}/.ox-content/client`,
+			ssr: isSSR,
+			rollupOptions: {
+				input: isSSR ? void 0 : void 0,
+				output: {
+					format: isSSR ? "esm" : "esm",
+					entryFileNames: isSSR ? "[name].js" : "[name].[hash].js",
+					chunkFileNames: isSSR ? "chunks/[name].js" : "chunks/[name].[hash].js"
+				}
+			},
+			...isSSR && {
+				target: "node18",
+				minify: false
+			}
+		},
+		resolve: { conditions: isSSR ? ["node", "import"] : ["browser", "import"] },
+		optimizeDeps: {
+			include: isSSR ? [] : ["vue"],
+			exclude: ["@ox-content/vite-plugin", "@ox-content/vite-plugin-vue"]
+		},
+		...!isSSR && { dev: { warmup: ["./src/**/*.vue", "./docs/**/*.md"] } }
+	};
 }
 
-// src/index.ts
-var import_vite_plugin_ox_content3 = require("vite-plugin-ox-content");
+//#endregion
+//#region src/index.ts
+/**
+* Vite Plugin for Ox Content Vue Integration
+*
+* Uses Vite's Environment API to enable embedding Vue components in Markdown.
+* Provides SSR and client environments for proper hydration.
+*/
+/**
+* Creates the Ox Content Vue integration plugin with Environment API support.
+*
+* @example
+* ```ts
+* // vite.config.ts
+* import { defineConfig } from 'vite';
+* import vue from '@vitejs/plugin-vue';
+* import { oxContentVue } from 'vite-plugin-ox-content-vue';
+*
+* export default defineConfig({
+*   plugins: [
+*     vue(),
+*     oxContentVue({
+*       srcDir: 'docs',
+*       components: {
+*         Counter: './src/components/Counter.vue',
+*       },
+*     }),
+*   ],
+* });
+* ```
+*/
 function oxContentVue(options = {}) {
-  const resolved = resolveVueOptions(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 vueTransformPlugin = {
-    name: "ox-content:vue-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 transformMarkdownWithVue(code, id, {
-        ...resolved,
-        components: componentMap,
-        root: config.root
-      });
-      return {
-        code: result.code,
-        map: result.map
-      };
-    }
-  };
-  const vueEnvironmentPlugin = {
-    name: "ox-content:vue-environment",
-    config() {
-      return {
-        environments: {
-          // SSR environment for Vue component rendering
-          oxcontent_ssr: createVueMarkdownEnvironment("ssr", resolved),
-          // Client environment for hydration
-          oxcontent_client: createVueMarkdownEnvironment("client", resolved)
-        }
-      };
-    },
-    // Environment-specific module resolution
-    resolveId: {
-      order: "pre",
-      async handler(id, _importer, _options) {
-        if (id === "virtual:ox-content-vue/runtime") {
-          return "\0virtual:ox-content-vue/runtime";
-        }
-        if (id === "virtual:ox-content-vue/components") {
-          return "\0virtual:ox-content-vue/components";
-        }
-        return null;
-      }
-    },
-    load: {
-      order: "pre",
-      async handler(id) {
-        if (id === "\0virtual:ox-content-vue/runtime") {
-          return generateRuntimeModule(resolved);
-        }
-        if (id === "\0virtual:ox-content-vue/components") {
-          return generateComponentsModule(componentMap);
-        }
-        return null;
-      }
-    },
-    // Per-environment build hooks
-    applyToEnvironment(environment) {
-      return environment.name === "oxcontent_ssr" || environment.name === "oxcontent_client" || environment.name === "client" || environment.name === "ssr";
-    }
-  };
-  const vueHmrPlugin = {
-    name: "ox-content:vue-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:vue-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 [
-    vueTransformPlugin,
-    vueEnvironmentPlugin,
-    vueHmrPlugin,
-    ...environmentPlugin ? [environmentPlugin] : []
-  ];
+	const resolved = resolveVueOptions(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 vueTransformPlugin = {
+		name: "ox-content:vue-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 transformMarkdownWithVue(code, id, {
+				...resolved,
+				components: componentMap,
+				root: config.root
+			});
+			return {
+				code: result.code,
+				map: result.map
+			};
+		}
+	};
+	const vueEnvironmentPlugin = {
+		name: "ox-content:vue-environment",
+		config() {
+			return { environments: {
+				oxcontent_ssr: createVueMarkdownEnvironment("ssr", resolved),
+				oxcontent_client: createVueMarkdownEnvironment("client", resolved)
+			} };
+		},
+		resolveId: {
+			order: "pre",
+			async handler(id, _importer, _options) {
+				if (id === "virtual:ox-content-vue/runtime") return "\0virtual:ox-content-vue/runtime";
+				if (id === "virtual:ox-content-vue/components") return "\0virtual:ox-content-vue/components";
+				return null;
+			}
+		},
+		load: {
+			order: "pre",
+			async handler(id) {
+				if (id === "\0virtual:ox-content-vue/runtime") return generateRuntimeModule(resolved);
+				if (id === "\0virtual:ox-content-vue/components") return generateComponentsModule(componentMap);
+				return null;
+			}
+		},
+		applyToEnvironment(environment) {
+			return environment.name === "oxcontent_ssr" || environment.name === "oxcontent_client" || environment.name === "client" || environment.name === "ssr";
+		}
+	};
+	const vueHmrPlugin = {
+		name: "ox-content:vue-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:vue-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 [
+		vueTransformPlugin,
+		vueEnvironmentPlugin,
+		vueHmrPlugin,
+		...environmentPlugin ? [environmentPlugin] : []
+	];
 }
+/**
+* Resolves Vue integration options with defaults.
+*/
 function resolveVueOptions(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,
-    components: options.components ?? {},
-    // Vue-specific options
-    reactivityTransform: options.reactivityTransform ?? false,
-    customBlocks: options.customBlocks ?? true
-  };
+	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,
+		components: options.components ?? {},
+		reactivityTransform: options.reactivityTransform ?? false,
+		customBlocks: options.customBlocks ?? true
+	};
 }
+/**
+* Generates the runtime module for Vue markdown rendering.
+*/
 function generateRuntimeModule(_options) {
-  return `
+	return `
 import { h, defineComponent, ref, onMounted } from 'vue';
 
 export const OxContentRenderer = defineComponent({
@@ -413,19 +514,19 @@ export const OxContentRenderer = defineComponent({
     return () => {
       if (!props.content) return null;
 
-      const { html, frontmatter, toc, slots } = props.content;
+      const { html, frontmatter, toc, islands } = props.content;
 
-      // Render static HTML with component slots
+      // Render static HTML with component islands
       return h('div', {
         class: 'ox-content',
         innerHTML: mounted.value ? undefined : html,
-      }, mounted.value ? renderWithSlots(html, slots, props.components) : undefined);
+      }, mounted.value ? renderWithIslands(html, islands, props.components) : undefined);
     };
   },
 });
 
-function renderWithSlots(html, slots, components) {
-  // Parse and render slots with Vue components
+function renderWithIslands(html, islands, components) {
+  // Parse and render islands with Vue components
   // This is a simplified version - full implementation would use proper parsing
   return h('div', { innerHTML: html });
 }
@@ -437,84 +538,86 @@ export function useOxContent() {
 }
 `;
 }
+/**
+* Generates the components registration module.
+*/
 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;
 `;
 }
+/**
+* Resolves component glob patterns to a component map.
+*/
 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;
 }
+/**
+* Simple glob matcher for component files.
+*/
 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;
 }
+/**
+* Recursively walks a directory.
+*/
 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);
+	}
 }
+/**
+* Converts a string to PascalCase.
+*/
 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,
-  oxContentVue
+
+//#endregion
+Object.defineProperty(exports, 'oxContent', {
+  enumerable: true,
+  get: function () {
+    return _ox_content_vite_plugin.oxContent;
+  }
 });
+exports.oxContentVue = oxContentVue;