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

package/dist/index.cjs

@@ -0,0 +1,465 @@
+"use strict";
+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;
+};
+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);
+
+// 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");
+
+// 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;
+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
+  };
+}
+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 };
+}
+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;
+}
+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';
+${imports}
+
+const frontmatter = ${JSON.stringify(frontmatter)};
+const rawHtml = ${JSON.stringify(content)};
+const slots = ${JSON.stringify(slots)};
+
+const components = { ${usedComponents.join(", ")} };
+
+export default function MarkdownContent() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return createElement('div', {
+      className: 'ox-content',
+      dangerouslySetInnerHTML: { __html: rawHtml }
+    });
+  }
+
+  return createElement('div', { className: 'ox-content' },
+    slots.map((slot) => {
+      const Component = components[slot.name];
+      return Component ? createElement(Component, { key: slot.id, ...slot.props }) : null;
+    })
+  );
+}
+
+export { frontmatter };
+`;
+}
+
+// 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"]
+    }
+  };
+}
+
+// src/index.ts
+var import_vite_plugin_ox_content3 = require("vite-plugin-ox-content");
+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] : []
+  ];
+}
+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"
+  };
+}
+function generateRuntimeModule() {
+  return `
+import React, { useState, useEffect } from 'react';
+
+export function OxContentRenderer({ content, components = {} }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!content) return null;
+
+  const { html, frontmatter, slots } = content;
+
+  if (!mounted) {
+    return React.createElement('div', {
+      className: 'ox-content',
+      dangerouslySetInnerHTML: { __html: html },
+    });
+  }
+
+  return React.createElement('div', { className: 'ox-content' },
+    slots.map((slot) => {
+      const Component = components[slot.name];
+      return Component
+        ? React.createElement(Component, { key: slot.id, ...slot.props })
+        : null;
+    })
+  );
+}
+
+export function useOxContent() {
+  return { OxContentRenderer };
+}
+`;
+}
+function generateComponentsModule(componentMap) {
+  const imports = [];
+  const exports2 = [];
+  componentMap.forEach((path3, name) => {
+    imports.push(`import ${name} from '${path3}';`);
+    exports2.push(`  ${name},`);
+  });
+  return `
+${imports.join("\n")}
+
+export const components = {
+${exports2.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;
+}
+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;
+}
+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);
+    }
+  }
+}
+function toPascalCase(str) {
+  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
+});

package/dist/index.d.cts

@@ -0,0 +1,85 @@
+import { PluginOption } from 'vite';
+import { OxContentOptions } from 'vite-plugin-ox-content';
+export { oxContent } from 'vite-plugin-ox-content';
+
+type ComponentsMap = Record<string, string>;
+/**
+ * Component registration options.
+ * Can be a map, a glob pattern, or an array of glob patterns.
+ */
+type ComponentsOption = ComponentsMap | string | string[];
+interface ReactIntegrationOptions extends OxContentOptions {
+    /**
+     * Components to register for use in Markdown.
+     * Can be a map of names to paths, a glob pattern, or an array of globs.
+     * When using glob patterns, component names are derived from file names.
+     *
+     * @example
+     * ```ts
+     * // Glob pattern (recommended)
+     * components: './src/components/*.tsx'
+     *
+     * // Explicit map
+     * components: { Counter: './src/components/Counter.tsx' }
+     * ```
+     */
+    components?: ComponentsOption;
+    jsxRuntime?: 'automatic' | 'classic';
+}
+interface ResolvedReactOptions {
+    srcDir: string;
+    outDir: string;
+    base: string;
+    gfm: boolean;
+    frontmatter: boolean;
+    toc: boolean;
+    tocMaxDepth: number;
+    components: ComponentsMap;
+    jsxRuntime: 'automatic' | 'classic';
+    root?: string;
+}
+interface ReactTransformResult {
+    code: string;
+    map: null;
+    usedComponents: string[];
+    frontmatter: Record<string, unknown>;
+}
+interface ComponentSlot {
+    name: string;
+    props: Record<string, unknown>;
+    position: number;
+    id: string;
+}
+
+/**
+ * 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',
+ *       },
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function oxContentReact(options?: ReactIntegrationOptions): PluginOption[];
+
+export { type ComponentSlot, type ComponentsMap, type ComponentsOption, type ReactIntegrationOptions, type ReactTransformResult, type ResolvedReactOptions, oxContentReact };

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+import { PluginOption } from 'vite';
+import { OxContentOptions } from 'vite-plugin-ox-content';
+export { oxContent } from 'vite-plugin-ox-content';
+
+type ComponentsMap = Record<string, string>;
+/**
+ * Component registration options.
+ * Can be a map, a glob pattern, or an array of glob patterns.
+ */
+type ComponentsOption = ComponentsMap | string | string[];
+interface ReactIntegrationOptions extends OxContentOptions {
+    /**
+     * Components to register for use in Markdown.
+     * Can be a map of names to paths, a glob pattern, or an array of globs.
+     * When using glob patterns, component names are derived from file names.
+     *
+     * @example
+     * ```ts
+     * // Glob pattern (recommended)
+     * components: './src/components/*.tsx'
+     *
+     * // Explicit map
+     * components: { Counter: './src/components/Counter.tsx' }
+     * ```
+     */
+    components?: ComponentsOption;
+    jsxRuntime?: 'automatic' | 'classic';
+}
+interface ResolvedReactOptions {
+    srcDir: string;
+    outDir: string;
+    base: string;
+    gfm: boolean;
+    frontmatter: boolean;
+    toc: boolean;
+    tocMaxDepth: number;
+    components: ComponentsMap;
+    jsxRuntime: 'automatic' | 'classic';
+    root?: string;
+}
+interface ReactTransformResult {
+    code: string;
+    map: null;
+    usedComponents: string[];
+    frontmatter: Record<string, unknown>;
+}
+interface ComponentSlot {
+    name: string;
+    props: Record<string, unknown>;
+    position: number;
+    id: string;
+}
+
+/**
+ * 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',
+ *       },
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function oxContentReact(options?: ReactIntegrationOptions): PluginOption[];
+
+export { type ComponentSlot, type ComponentsMap, type ComponentsOption, type ReactIntegrationOptions, type ReactTransformResult, type ResolvedReactOptions, oxContentReact };

package/dist/index.js

@@ -0,0 +1,429 @@
+// src/index.ts
+import * as fs from "fs";
+import * as path2 from "path";
+import { oxContent } from "vite-plugin-ox-content";
+
+// src/transform.ts
+import * as path from "path";
+import { transformMarkdown as baseTransformMarkdown } from "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;
+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 baseTransformMarkdown(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
+  };
+}
+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 };
+}
+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;
+}
+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';
+${imports}
+
+const frontmatter = ${JSON.stringify(frontmatter)};
+const rawHtml = ${JSON.stringify(content)};
+const slots = ${JSON.stringify(slots)};
+
+const components = { ${usedComponents.join(", ")} };
+
+export default function MarkdownContent() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return createElement('div', {
+      className: 'ox-content',
+      dangerouslySetInnerHTML: { __html: rawHtml }
+    });
+  }
+
+  return createElement('div', { className: 'ox-content' },
+    slots.map((slot) => {
+      const Component = components[slot.name];
+      return Component ? createElement(Component, { key: slot.id, ...slot.props }) : null;
+    })
+  );
+}
+
+export { frontmatter };
+`;
+}
+
+// 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"]
+    }
+  };
+}
+
+// src/index.ts
+import { oxContent as oxContent2 } from "vite-plugin-ox-content";
+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 = oxContent(options);
+  const environmentPlugin = basePlugins.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"
+  };
+}
+function generateRuntimeModule() {
+  return `
+import React, { useState, useEffect } from 'react';
+
+export function OxContentRenderer({ content, components = {} }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!content) return null;
+
+  const { html, frontmatter, slots } = content;
+
+  if (!mounted) {
+    return React.createElement('div', {
+      className: 'ox-content',
+      dangerouslySetInnerHTML: { __html: html },
+    });
+  }
+
+  return React.createElement('div', { className: 'ox-content' },
+    slots.map((slot) => {
+      const Component = components[slot.name];
+      return Component
+        ? React.createElement(Component, { key: slot.id, ...slot.props })
+        : null;
+    })
+  );
+}
+
+export function useOxContent() {
+  return { OxContentRenderer };
+}
+`;
+}
+function generateComponentsModule(componentMap) {
+  const imports = [];
+  const exports = [];
+  componentMap.forEach((path3, name) => {
+    imports.push(`import ${name} from '${path3}';`);
+    exports.push(`  ${name},`);
+  });
+  return `
+${imports.join("\n")}
+
+export const components = {
+${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;
+}
+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;
+}
+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);
+    }
+  }
+}
+function toPascalCase(str) {
+  return str.replace(/[-_](\w)/g, (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c.toUpperCase());
+}
+export {
+  oxContent2 as oxContent,
+  oxContentReact
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@ox-content/vite-plugin-react",
+  "version": "0.0.1-alpha.0",
+  "description": "React integration for Ox Content - Embed React components in Markdown",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "vite": "catalog:"
+  },
+  "dependencies": {
+    "vite-plugin-ox-content": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tsup": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "react",
+    "markdown",
+    "ox-content",
+    "mdx"
+  ],
+  "license": "MIT",
+  "author": "ubugeeei",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ubugeeei/ox-content.git",
+    "directory": "npm/vite-plugin-ox-content-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}