@frontmcp/ui 0.6.1 → 0.6.2

package/react/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":"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"}

package/renderers/index.d.ts

@@ -1,21 +1,26 @@
 /**
  * React Renderer Module
  *
- * Provides the React renderer for template processing.
- * Other renderers (HTML, MDX) and utilities are available in @frontmcp/uipack.
+ * Provides the React renderer and MDX server-side renderer for template processing.
+ * For React-free renderers (HTML, client-side MDX) use @frontmcp/uipack/renderers.
  *
  * @module @frontmcp/ui/renderers
  *
  * @example
  * ```typescript
- * import { reactRenderer, ReactRenderer } from '@frontmcp/ui/renderers';
+ * import { reactRenderer, ReactRenderer, mdxRenderer, MdxRenderer } from '@frontmcp/ui/renderers';
  * import { rendererRegistry } from '@frontmcp/uipack/renderers';
  *
  * // Register React renderer
  * rendererRegistry.register(reactRenderer);
+ *
+ * // Use MDX server-side renderer
+ * const html = await mdxRenderer.render('# Hello {output.name}', context);
  * ```
  */
 export type { RendererType, UIRenderer, ToolUIProps, HydratedToolUIProps, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts, RenderResult, RendererRegistryOptions, DetectionResult, ReactComponentType, WrapperContext, ExtendedToolUIConfig, } from '@frontmcp/uipack/renderers';
-export { ReactRenderer, reactRenderer, buildHydrationScript } from './react.renderer';
+export { ReactRenderer, reactRenderer } from './react.renderer';
 export { ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './react.adapter';
+export { MdxRenderer, mdxRenderer } from './mdx.renderer';
+export { executeTranspiledCode, transpileAndExecute } from './transpiler';
 //# sourceMappingURL=index.d.ts.map

package/renderers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/renderers/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/renderers/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAI7F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI1D,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC"}

package/renderers/index.js

@@ -30,17 +30,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // libs/ui/src/renderers/index.ts
 var renderers_exports = {};
 __export(renderers_exports, {
+  MdxRenderer: () => MdxRenderer,
   ReactRenderer: () => ReactRenderer,
   ReactRendererAdapter: () => ReactRendererAdapter,
-  buildHydrationScript: () => buildHydrationScript,
   createReactAdapter: () => createReactAdapter,
+  executeTranspiledCode: () => executeTranspiledCode,
   loadReactAdapter: () => loadReactAdapter,
-  reactRenderer: () => reactRenderer
+  mdxRenderer: () => mdxRenderer,
+  reactRenderer: () => reactRenderer,
+  transpileAndExecute: () => transpileAndExecute
 });
 module.exports = __toCommonJS(renderers_exports);
 
 // libs/ui/src/renderers/react.renderer.ts
 var import_renderers = require("@frontmcp/uipack/renderers");
+var VALID_JS_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function isValidComponentName(name) {
+  return VALID_JS_IDENTIFIER.test(name);
+}
+function sanitizeComponentName(name) {
+  if (isValidComponentName(name)) {
+    return name;
+  }
+  const sanitized = name.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/^[0-9]/, "_$&");
+  return sanitized || "Component";
+}
 var REACT_CDN = {
   react: "https://esm.sh/react@19",
   reactDom: "https://esm.sh/react-dom@19/client"
@@ -54,13 +68,6 @@ var ReactRenderer = class {
   type = "react";
   priority = 20;
   // Higher priority than HTML
-  /**
-   * Lazy-loaded React modules.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  React = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ReactDOMServer = null;
   /**
    * Check if this renderer can handle the given template.
    *
@@ -101,46 +108,109 @@ var ReactRenderer = class {
     throw new Error("Invalid template type for ReactRenderer");
   }
   /**
-   * Render the template to HTML string using react-dom/server.
+   * Render the template to HTML for client-side rendering.
+   *
+   * Unlike SSR, this method generates HTML that will be rendered
+   * client-side by React in the browser. No server-side React required.
+   *
+   * The generated HTML includes:
+   * - A container div for the React root
+   * - The component code (transpiled if needed)
+   * - Props embedded as a data attribute
+   * - A render script that initializes the component
    */
-  async render(template, context, options) {
-    await this.loadReact();
-    let Component;
+  async render(template, context, _options) {
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const rootId = `frontmcp-react-${(0, import_renderers.hashString)(Date.now().toString()).slice(0, 8)}`;
+    let componentCode;
+    let componentName;
     if (typeof template === "function") {
-      Component = template;
+      const rawName = template.name || "Component";
+      componentName = sanitizeComponentName(rawName);
+      componentCode = `
+        // Component should be registered via window.__frontmcp_components['${componentName}']
+        (function() {
+          if (!window.__frontmcp_components || !window.__frontmcp_components['${componentName}']) {
+            console.error('[FrontMCP] Component "${componentName}" not registered. Use buildHydrationScript() to register components.');
+          }
+        })();
+      `;
     } else if (typeof template === "string") {
       const transpiled = await this.transpile(template);
-      const cached = import_renderers.transpileCache.getByKey(`exec:${transpiled.hash}`);
-      if (cached) {
-        Component = cached.code;
-      } else {
-        Component = await (0, import_renderers.executeTranspiledCode)(transpiled.code, {
-          // Provide any additional MDX components if specified
-          ...options?.mdxComponents
-        });
-        import_renderers.transpileCache.setByKey(`exec:${transpiled.hash}`, {
-          code: Component,
-          hash: transpiled.hash,
-          cached: false
-        });
-      }
+      const match = transpiled.code.match(/function\s+(\w+)/);
+      const rawName = match?.[1] || "Widget";
+      componentName = sanitizeComponentName(rawName);
+      componentCode = transpiled.code;
     } else {
       throw new Error("Invalid template type for ReactRenderer");
     }
-    const props = {
-      input: context.input,
-      output: context.output,
-      structuredContent: context.structuredContent,
-      helpers: context.helpers
+    const html = `
+<div id="${rootId}" data-frontmcp-react data-component="${componentName}" data-props='${escapedProps}'>
+  <div class="flex items-center justify-center p-4 text-gray-500">
+    <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    Loading...
+  </div>
+</div>
+<script type="module">
+(function() {
+  ${componentCode}
+
+  // Wait for React to be available
+  function waitForReact(callback, maxAttempts) {
+    var attempts = 0;
+    var check = function() {
+      if (typeof React !== 'undefined' && typeof ReactDOM !== 'undefined') {
+        callback();
+      } else if (attempts < maxAttempts) {
+        attempts++;
+        setTimeout(check, 50);
+      } else {
+        console.error('[FrontMCP] React not loaded after ' + maxAttempts + ' attempts');
+      }
     };
-    const element = this.React.createElement(Component, props);
-    const html = this.ReactDOMServer.renderToString(element);
-    if (options?.hydrate) {
-      const componentName = Component.name || "Component";
-      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return `<div data-hydrate="${componentName}" data-props='${escapedProps}'>${html}</div>`;
+    check();
+  }
+
+  waitForReact(function() {
+    try {
+      var root = document.getElementById('${rootId}');
+      if (!root) return;
+
+      var propsJson = root.getAttribute('data-props');
+      var props = propsJson ? JSON.parse(propsJson.replace(/&amp;/g, '&').replace(/&#39;/g, "'").replace(/&lt;/g, '<').replace(/&gt;/g, '>')) : {};
+
+      // Get the component
+      var Component = ${componentName};
+
+      // Check if it's registered globally
+      if (typeof Component === 'undefined' && window.__frontmcp_components) {
+        Component = window.__frontmcp_components['${componentName}'];
+      }
+
+      if (typeof Component === 'function') {
+        var element = React.createElement(Component, props);
+        var reactRoot = ReactDOM.createRoot(root);
+        reactRoot.render(element);
+      } else {
+        console.error('[FrontMCP] Component "${componentName}" not found');
+      }
+    } catch (err) {
+      console.error('[FrontMCP] React render error:', err);
     }
-    return html;
+  }, 100);
+})();
+</script>
+`;
+    return html.trim();
   }
   /**
    * Get runtime scripts for client-side functionality.
@@ -161,54 +231,8 @@ var ReactRenderer = class {
       isInline: false
     };
   }
-  /**
-   * Load React and ReactDOMServer modules.
-   */
-  async loadReact() {
-    if (this.React && this.ReactDOMServer) {
-      return;
-    }
-    try {
-      this.React = await import("react");
-      this.ReactDOMServer = await import("react-dom/server");
-    } catch {
-      throw new Error("React is required for ReactRenderer. Install react and react-dom: npm install react react-dom");
-    }
-  }
 };
 var reactRenderer = new ReactRenderer();
-function buildHydrationScript() {
-  return `
-<script>
-(function() {
-  // Wait for React to be available
-  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
-    console.warn('[FrontMCP] React not available for hydration');
-    return;
-  }
-
-  // Find all elements marked for hydration
-  document.querySelectorAll('[data-hydrate]').forEach(function(root) {
-    var componentName = root.getAttribute('data-hydrate');
-    var propsJson = root.getAttribute('data-props');
-    var props = propsJson ? JSON.parse(propsJson) : {};
-
-    // Look for the component in the global scope
-    if (window.__frontmcp_components && window.__frontmcp_components[componentName]) {
-      try {
-        ReactDOM.hydrateRoot(root, React.createElement(
-          window.__frontmcp_components[componentName],
-          props
-        ));
-      } catch (e) {
-        console.error('[FrontMCP] Hydration failed for', componentName, e);
-      }
-    }
-  });
-})();
-</script>
-`;
-}
 
 // libs/ui/src/renderers/react.adapter.ts
 var mountedRoots = /* @__PURE__ */ new WeakMap();
@@ -405,12 +429,228 @@ function createReactAdapter() {
 async function loadReactAdapter() {
   return createReactAdapter();
 }
+
+// libs/ui/src/renderers/mdx.renderer.ts
+var import_renderers2 = require("@frontmcp/uipack/renderers");
+function buildReactCdnUrls(version = "19") {
+  return {
+    react: `https://esm.sh/react@${version}`,
+    reactDom: `https://esm.sh/react-dom@${version}/client`
+  };
+}
+var REACT_CDN2 = buildReactCdnUrls("19");
+var INLINE_MDX_PLACEHOLDER = `
+// MDX runtime not available inline yet.
+// For blocked-network platforms, use pre-rendered HTML templates.
+console.warn('[FrontMCP] MDX hydration not available on this platform.');
+`;
+var MdxRenderer = class {
+  type = "mdx";
+  priority = 10;
+  // Between HTML (0) and React (20)
+  /**
+   * Lazy-loaded modules.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  React = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ReactDOMServer = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  jsxRuntime = null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mdxEvaluate = null;
+  /**
+   * Check if this renderer can handle the given template.
+   *
+   * Accepts strings containing MDX syntax (Markdown + JSX).
+   */
+  canHandle(template) {
+    if (typeof template !== "string") {
+      return false;
+    }
+    return (0, import_renderers2.containsMdxSyntax)(template);
+  }
+  /**
+   * Prepare MDX template for rendering.
+   * Caches the template hash for deduplication. Actual MDX compilation
+   * happens during render() via @mdx-js/mdx evaluate().
+   */
+  async transpile(template, _options) {
+    const hash = (0, import_renderers2.hashString)(template);
+    const cached = import_renderers2.transpileCache.getByKey(hash);
+    if (cached) {
+      return { ...cached, cached: true };
+    }
+    const transpileResult = {
+      code: template,
+      hash,
+      cached: false
+    };
+    import_renderers2.transpileCache.setByKey(hash, transpileResult);
+    return transpileResult;
+  }
+  /**
+   * Render MDX template to HTML string.
+   *
+   * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
+   * then renders the resulting React component to HTML via SSR.
+   */
+  async render(template, context, options) {
+    await this.loadReact();
+    await this.loadMdx();
+    if (!this.mdxEvaluate) {
+      throw new Error("MDX compilation requires @mdx-js/mdx. Install it: npm install @mdx-js/mdx");
+    }
+    const templateHash = (0, import_renderers2.hashString)(template);
+    const cacheKey = `mdx-component:${templateHash}`;
+    let Content = import_renderers2.componentCache.get(cacheKey);
+    if (!Content) {
+      const result = await this.mdxEvaluate(template, {
+        ...this.jsxRuntime,
+        Fragment: this.React.Fragment,
+        development: false
+      });
+      Content = result.default;
+      import_renderers2.componentCache.set(cacheKey, Content);
+    }
+    const mdxComponents = {
+      ...options?.mdxComponents,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      wrapper: ({ children }) => {
+        return this.React.createElement("div", { className: "mdx-content" }, children);
+      }
+    };
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const reservedProps = /* @__PURE__ */ new Set(["input", "output", "structuredContent", "helpers", "components"]);
+    const outputProps = typeof context.output === "object" && context.output !== null ? Object.fromEntries(Object.entries(context.output).filter(([key]) => !reservedProps.has(key))) : {};
+    const spreadProps = {
+      ...outputProps,
+      ...props
+    };
+    const element = this.React.createElement(Content, {
+      components: mdxComponents,
+      ...spreadProps
+    });
+    const html = this.ReactDOMServer.renderToString(element);
+    if (options?.hydrate) {
+      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      return `<div data-mdx-hydrate="true" data-props='${escapedProps}'>${html}</div>`;
+    }
+    return html;
+  }
+  /**
+   * Get runtime scripts for client-side functionality.
+   */
+  getRuntimeScripts(platform) {
+    if (platform.networkMode === "blocked") {
+      return {
+        headScripts: "",
+        inlineScripts: INLINE_MDX_PLACEHOLDER,
+        isInline: true
+      };
+    }
+    return {
+      headScripts: `
+        <script crossorigin src="${REACT_CDN2.react}"></script>
+        <script crossorigin src="${REACT_CDN2.reactDom}"></script>
+      `,
+      isInline: false
+    };
+  }
+  /**
+   * Load React and ReactDOMServer modules.
+   */
+  async loadReact() {
+    if (this.React && this.ReactDOMServer && this.jsxRuntime) {
+      return;
+    }
+    try {
+      const [react, reactDomServer, jsxRuntime] = await Promise.all([
+        import("react"),
+        import("react-dom/server"),
+        import("react/jsx-runtime")
+      ]);
+      this.React = react;
+      this.ReactDOMServer = reactDomServer;
+      this.jsxRuntime = jsxRuntime;
+    } catch {
+      throw new Error("React is required for MdxRenderer. Install react and react-dom: npm install react react-dom");
+    }
+  }
+  /**
+   * Load @mdx-js/mdx evaluate function.
+   */
+  async loadMdx() {
+    if (this.mdxEvaluate) {
+      return;
+    }
+    try {
+      const mdx = await import("@mdx-js/mdx");
+      this.mdxEvaluate = mdx.evaluate;
+    } catch {
+      console.warn(
+        "[@frontmcp/ui] @mdx-js/mdx not available. MDX rendering disabled. Install @mdx-js/mdx to enable: npm install @mdx-js/mdx"
+      );
+    }
+  }
+};
+var mdxRenderer = new MdxRenderer();
+
+// libs/ui/src/renderers/transpiler.ts
+var import_renderers3 = require("@frontmcp/uipack/renderers");
+async function executeTranspiledCode(code, context = {}) {
+  let React;
+  let jsxRuntime;
+  try {
+    React = await import("react");
+    jsxRuntime = await import("react/jsx-runtime");
+  } catch {
+    throw new Error("React is required for JSX templates. Install react: npm install react react-dom");
+  }
+  const exports2 = {};
+  const module2 = { exports: exports2 };
+  const require2 = (id) => {
+    switch (id) {
+      case "react":
+        return React;
+      case "react/jsx-runtime":
+        return jsxRuntime;
+      case "react/jsx-dev-runtime":
+        return jsxRuntime;
+      default:
+        if (context[id]) {
+          return context[id];
+        }
+        throw new Error(`Module '${id}' not available in JSX template context`);
+    }
+  };
+  try {
+    const fn = new Function("exports", "require", "module", "__filename", "__dirname", "React", "context", code);
+    fn(exports2, require2, module2, "template.js", "/", React, context);
+    const exportKeys = Object.keys(module2.exports);
+    return module2.exports["default"] || (exportKeys.length > 0 ? module2.exports[exportKeys[0]] : null) || module2.exports;
+  } catch (error) {
+    throw new Error(`Failed to execute transpiled JSX: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+async function transpileAndExecute(source, context = {}) {
+  const result = await (0, import_renderers3.transpileJsx)(source);
+  return executeTranspiledCode(result.code, context);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MdxRenderer,
   ReactRenderer,
   ReactRendererAdapter,
-  buildHydrationScript,
   createReactAdapter,
+  executeTranspiledCode,
   loadReactAdapter,
-  reactRenderer
+  mdxRenderer,
+  reactRenderer,
+  transpileAndExecute
 });

package/renderers/mdx.renderer.d.ts

@@ -0,0 +1,99 @@
+/**
+ * MDX Server Renderer
+ *
+ * Handles MDX templates - Markdown with embedded JSX components.
+ * Uses @mdx-js/mdx for compilation and react-dom/server for SSR.
+ *
+ * This renderer requires React as a peer dependency.
+ * For React-free client-side MDX rendering, use MdxClientRenderer from @frontmcp/uipack.
+ *
+ * MDX allows mixing Markdown with React components:
+ * - Markdown headings, lists, code blocks
+ * - JSX component tags: `<Card />`
+ * - JS expressions: `{output.items.map(...)}`
+ * - Frontmatter for metadata
+ *
+ * @module @frontmcp/ui/renderers
+ */
+import type { TemplateContext } from '@frontmcp/uipack/runtime';
+import type { PlatformCapabilities } from '@frontmcp/uipack/theme';
+import type { UIRenderer, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts } from '@frontmcp/uipack/renderers';
+/**
+ * Types this renderer can handle - MDX strings.
+ */
+type MdxTemplate = string;
+/**
+ * MDX Server Renderer Implementation.
+ *
+ * Compiles MDX (Markdown + JSX) to React components using @mdx-js/mdx,
+ * then renders to HTML using react-dom/server.
+ *
+ * @example Basic MDX template
+ * ```typescript
+ * @Tool({
+ *   ui: {
+ *     template: `
+ * # User Profile
+ *
+ * <UserCard name={output.name} email={output.email} />
+ *
+ * ## Recent Activity
+ * {output.items.map(item => <ActivityItem key={item.id} {...item} />)}
+ *     `,
+ *     mdxComponents: { UserCard, ActivityItem }
+ *   }
+ * })
+ * ```
+ */
+export declare class MdxRenderer implements UIRenderer<MdxTemplate> {
+    readonly type: "mdx";
+    readonly priority = 10;
+    /**
+     * Lazy-loaded modules.
+     */
+    private React;
+    private ReactDOMServer;
+    private jsxRuntime;
+    private mdxEvaluate;
+    /**
+     * Check if this renderer can handle the given template.
+     *
+     * Accepts strings containing MDX syntax (Markdown + JSX).
+     */
+    canHandle(template: unknown): template is MdxTemplate;
+    /**
+     * Prepare MDX template for rendering.
+     * Caches the template hash for deduplication. Actual MDX compilation
+     * happens during render() via @mdx-js/mdx evaluate().
+     */
+    transpile(template: MdxTemplate, _options?: TranspileOptions): Promise<TranspileResult>;
+    /**
+     * Render MDX template to HTML string.
+     *
+     * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
+     * then renders the resulting React component to HTML via SSR.
+     */
+    render<In, Out>(template: MdxTemplate, context: TemplateContext<In, Out>, options?: RenderOptions): Promise<string>;
+    /**
+     * Get runtime scripts for client-side functionality.
+     */
+    getRuntimeScripts(platform: PlatformCapabilities): RuntimeScripts;
+    /**
+     * Load React and ReactDOMServer modules.
+     */
+    private loadReact;
+    /**
+     * Load @mdx-js/mdx evaluate function.
+     */
+    private loadMdx;
+}
+/**
+ * Singleton instance of the MDX renderer.
+ */
+export declare const mdxRenderer: MdxRenderer;
+/**
+ * Build MDX hydration script for client-side interactivity.
+ */
+export declare function buildMdxHydrationScript(): string;
+export {};
+//# sourceMappingURL=mdx.renderer.d.ts.map

package/renderers/mdx.renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdx.renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/mdx.renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EAEf,MAAM,4BAA4B,CAAC;AAGpC;;GAEG;AACH,KAAK,WAAW,GAAG,MAAM,CAAC;AA6B1B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,WAAY,YAAW,UAAU,CAAC,WAAW,CAAC;IACzD,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAU;IAC/B,QAAQ,CAAC,QAAQ,MAAM;IAEvB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAa;IAE1B,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,UAAU,CAAa;IAE/B,OAAO,CAAC,WAAW,CAAiF;IAEpG;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,IAAI,WAAW;IAQrD;;;;OAIG;IACG,SAAS,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC;IAmB7F;;;;;OAKG;IACG,MAAM,CAAC,EAAE,EAAE,GAAG,EAClB,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,MAAM,CAAC;IAqFlB;;OAEG;IACH,iBAAiB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,cAAc;IAkBjE;;OAEG;YACW,SAAS;IAoBvB;;OAEG;YACW,OAAO;CAgBtB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,aAAoB,CAAC;AAE7C;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,MAAM,CA2BhD"}