@stream-mdx/react 0.4.0 → 1.0.0

package/dist/mdx-coordinator.mjs

@@ -1,529 +0,0 @@
-"use client";
-"use client";
-
-// src/mdx-coordinator.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-// src/mdx-client.ts
-import React from "react";
-import * as ReactJsxRuntime from "react/jsx-runtime";
-var withClassName = (tag, className) => {
-  return (props) => React.createElement(tag, { className, ...props });
-};
-function assignMdxChildKey(child, index) {
-  if (child == null) return child;
-  if (Array.isArray(child)) {
-    return child.map((entry, subIndex) => assignMdxChildKey(entry, `${index}-${subIndex}`));
-  }
-  if (React.isValidElement(child)) {
-    if (child.key !== null && child.key !== void 0) {
-      return child;
-    }
-    return React.cloneElement(child, { key: index });
-  }
-  return child;
-}
-var MDXClient = class {
-  constructor(compileEndpoint = "/api/mdx-compile-v2") {
-    this.cache = /* @__PURE__ */ new Map();
-    this.inlineModules = /* @__PURE__ */ new Map();
-    this.compiledCache = /* @__PURE__ */ new Map();
-    this.compiledInflight = /* @__PURE__ */ new Map();
-    this.compileEndpoint = compileEndpoint;
-  }
-  /**
-   * Compile MDX block on server
-   */
-  async compile(block) {
-    if (block.type !== "mdx") {
-      throw new Error("Block is not MDX type");
-    }
-    const cacheKey = block.id;
-    const cachedPromise = this.cache.get(cacheKey);
-    if (cachedPromise) {
-      return cachedPromise;
-    }
-    const compilationPromise = this.doCompile(block);
-    this.cache.set(cacheKey, compilationPromise);
-    try {
-      const result = await compilationPromise;
-      return result;
-    } catch (error) {
-      this.cache.delete(cacheKey);
-      throw error;
-    }
-  }
-  async getCompiledInternal(ref) {
-    const inline = this.inlineModules.get(ref.id);
-    if (inline) {
-      return this.cloneCompiled(inline);
-    }
-    const cached = this.compiledCache.get(ref.id);
-    if (cached) {
-      return this.cloneCompiled(cached);
-    }
-    const inflight = this.compiledInflight.get(ref.id);
-    if (inflight) {
-      const resolved = await inflight;
-      return this.cloneCompiled(resolved);
-    }
-    const fetchPromise = this.fetchCompiled(ref);
-    this.compiledInflight.set(ref.id, fetchPromise);
-    try {
-      const data = await fetchPromise;
-      this.compiledCache.set(ref.id, data);
-      return this.cloneCompiled(data);
-    } finally {
-      this.compiledInflight.delete(ref.id);
-    }
-  }
-  async getCompiled(ref, options) {
-    if (options?.signal) {
-      const inline = this.inlineModules.get(ref.id);
-      if (inline) {
-        return this.cloneCompiled(inline);
-      }
-      const cached = this.compiledCache.get(ref.id);
-      if (cached) {
-        return this.cloneCompiled(cached);
-      }
-      const data = await this.fetchCompiled(ref, options);
-      this.compiledCache.set(ref.id, data);
-      return this.cloneCompiled(data);
-    }
-    return this.getCompiledInternal(ref);
-  }
-  /**
-   * Clear compilation cache
-   */
-  clearCache() {
-    this.cache.clear();
-    this.compiledCache.clear();
-    this.compiledInflight.clear();
-  }
-  registerInlineModule(compiled) {
-    this.inlineModules.set(compiled.id, {
-      ...compiled,
-      dependencies: Array.isArray(compiled.dependencies) ? [...compiled.dependencies] : []
-    });
-  }
-  clearInlineModules() {
-    this.inlineModules.clear();
-  }
-  /**
-   * Actual compilation implementation
-   */
-  async doCompile(block) {
-    const response = await fetch(this.compileEndpoint, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        content: block.payload.raw,
-        blockId: block.id
-      })
-    });
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: "Unknown error" }));
-      throw new Error(`MDX compilation failed: ${error.error || response.statusText}`);
-    }
-    const data = await response.json();
-    return {
-      id: data.id,
-      code: data.code,
-      dependencies: data.dependencies || [],
-      cached: data.cached || false
-    };
-  }
-  async fetchCompiled(ref, options) {
-    const response = await fetch(`${this.compileEndpoint}?id=${ref.id}`, {
-      signal: options?.signal
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to get compiled MDX: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return {
-      id: data.id,
-      code: data.code,
-      dependencies: data.dependencies || [],
-      timestamp: data.timestamp
-    };
-  }
-  cloneCompiled(compiled) {
-    return {
-      ...compiled,
-      dependencies: Array.isArray(compiled.dependencies) ? [...compiled.dependencies] : []
-    };
-  }
-};
-var MDXComponentFactory = class {
-  constructor(mdxClient) {
-    this.components = /* @__PURE__ */ new Map();
-    this.customComponents = /* @__PURE__ */ new Map();
-    this.mdxClient = mdxClient;
-    this.baseComponents = this.createBaseComponents();
-  }
-  registerInlineModule(module) {
-    this.mdxClient.registerInlineModule(module);
-    this.components.delete(module.id);
-  }
-  /**
-   * Create React component from compiled MDX
-   */
-  async createComponent(ref) {
-    const cached = this.components.get(ref.id);
-    if (cached) {
-      return cached;
-    }
-    const compiled = await this.mdxClient.getCompiled(ref);
-    const component = this.evaluateCompiledMDX(compiled);
-    this.components.set(ref.id, component);
-    return component;
-  }
-  /**
-   * Safely evaluate compiled MDX code
-   */
-  evaluateCompiledMDX(compiled) {
-    try {
-      const context = this.createEvaluationContext();
-      const argNames = Object.keys(context);
-      const argValues = Object.values(context);
-      const moduleExports = new Function(...argNames, compiled.code)(...argValues);
-      const MDXComponent = this.resolveEvaluatedModule(moduleExports);
-      return (props) => {
-        const registryComponents = this.getComponents();
-        const incomingComponents = props?.components;
-        const mergedComponents = incomingComponents ? { ...registryComponents, ...incomingComponents } : registryComponents;
-        return React.createElement(MDXComponent, {
-          ...props,
-          components: mergedComponents
-        });
-      };
-    } catch (error) {
-      console.error("Failed to evaluate MDX:", error);
-      return () => React.createElement(
-        "div",
-        {
-          className: "mdx-error"
-        },
-        `MDX Error: ${error instanceof Error ? error.message : "Unknown error"}`
-      );
-    }
-  }
-  /**
-   * Create safe evaluation context for MDX
-   */
-  createEvaluationContext() {
-    const runtime = ReactJsxRuntime;
-    const createElementWithChildren = (type, props, key) => {
-      const baseProps = props ?? {};
-      const finalProps = key === void 0 || key === null ? baseProps : { ...baseProps, key };
-      if (Array.isArray(finalProps.children)) {
-        finalProps.children = finalProps.children.map((child, index) => assignMdxChildKey(child, index));
-      }
-      return React.createElement(type, finalProps);
-    };
-    const runtimeJsx = typeof runtime.jsx === "function" ? runtime.jsx.bind(runtime) : createElementWithChildren;
-    const runtimeJsxs = typeof runtime.jsxs === "function" ? runtime.jsxs.bind(runtime) : createElementWithChildren;
-    const runtimeJsxDEV = typeof runtime.jsxDEV === "function" ? runtime.jsxDEV.bind(runtime) : (type, props, key, ..._rest) => createElementWithChildren(type, props, key);
-    const jsxRuntime = {
-      jsx: runtimeJsx,
-      jsxs: runtimeJsxs,
-      jsxDEV: runtimeJsxDEV,
-      Fragment: runtime.Fragment ?? React.Fragment
-    };
-    return {
-      __mdx_runtime: jsxRuntime,
-      React,
-      Fragment: React.Fragment,
-      useState: React.useState,
-      useEffect: React.useEffect,
-      useMemo: React.useMemo,
-      useCallback: React.useCallback,
-      useRef: React.useRef,
-      useContext: React.useContext,
-      useReducer: React.useReducer,
-      useLayoutEffect: React.useLayoutEffect,
-      console: {
-        log: console.log,
-        warn: console.warn,
-        error: console.error
-      }
-    };
-  }
-  resolveEvaluatedModule(output) {
-    if (!output) {
-      throw new Error("Compiled MDX module returned no exports");
-    }
-    if (typeof output === "function") {
-      return output;
-    }
-    if (typeof output.default === "function") {
-      return output.default;
-    }
-    if (typeof output.MDXContent === "function") {
-      return output.MDXContent;
-    }
-    throw new Error("Compiled MDX module did not export a component");
-  }
-  getComponents() {
-    if (this.customComponents.size === 0) {
-      return { ...this.baseComponents };
-    }
-    const merged = { ...this.baseComponents };
-    for (const [key, component] of this.customComponents) {
-      merged[key] = component;
-    }
-    return merged;
-  }
-  /**
-   * Register or replace custom MDX components
-   */
-  registerComponents(components, options) {
-    if (options?.replace) {
-      this.customComponents.clear();
-    }
-    for (const [key, component] of Object.entries(components)) {
-      if (!component) continue;
-      this.customComponents.set(key, component);
-    }
-  }
-  /**
-   * Get base MDX components
-   */
-  createBaseComponents() {
-    return {
-      // Standard HTML elements
-      h1: withClassName("h1", "mdx-h1"),
-      h2: withClassName("h2", "mdx-h2"),
-      h3: withClassName("h3", "mdx-h3"),
-      h4: withClassName("h4", "mdx-h4"),
-      h5: withClassName("h5", "mdx-h5"),
-      h6: withClassName("h6", "mdx-h6"),
-      p: withClassName("p", "mdx-p"),
-      strong: withClassName("strong", "mdx-strong"),
-      em: withClassName("em", "mdx-em"),
-      code: withClassName("code", "mdx-code"),
-      pre: withClassName("pre", "mdx-pre"),
-      ul: withClassName("ul", "mdx-ul"),
-      ol: withClassName("ol", "mdx-ol"),
-      li: withClassName("li", "mdx-li"),
-      blockquote: withClassName("blockquote", "mdx-blockquote"),
-      a: (props) => React.createElement("a", {
-        className: "mdx-link",
-        target: props.href?.startsWith("http") ? "_blank" : void 0,
-        rel: props.href?.startsWith("http") ? "noopener noreferrer" : void 0,
-        ...props
-      }),
-      img: (props) => React.createElement("img", { className: "mdx-img", ...props }),
-      table: withClassName("table", "mdx-table"),
-      thead: withClassName("thead", "mdx-thead"),
-      tbody: withClassName("tbody", "mdx-tbody"),
-      tr: withClassName("tr", "mdx-tr"),
-      th: withClassName("th", "mdx-th"),
-      td: withClassName("td", "mdx-td")
-    };
-  }
-  /**
-   * Clear component cache
-   */
-  clearCache() {
-    this.components.clear();
-  }
-  clearCustomComponents() {
-    this.customComponents.clear();
-  }
-};
-var globalMDXClient = null;
-var globalComponentFactory = null;
-function getMDXClient(compileEndpoint) {
-  if (!globalMDXClient) {
-    globalMDXClient = new MDXClient(compileEndpoint);
-  }
-  return globalMDXClient;
-}
-function getMDXComponentFactory(compileEndpoint) {
-  if (!globalComponentFactory) {
-    const client = getMDXClient(compileEndpoint);
-    globalComponentFactory = new MDXComponentFactory(client);
-  }
-  return globalComponentFactory;
-}
-function registerInlineMdxModule(compiled) {
-  const factory = getMDXComponentFactory();
-  factory.registerInlineModule({
-    id: compiled.id,
-    code: compiled.code,
-    dependencies: compiled.dependencies ?? []
-  });
-}
-
-// src/mdx-coordinator.ts
-function useMdxCoordinator(blocks, compileEndpoint, options) {
-  const mdxClientRef = useRef(getMDXClient(compileEndpoint));
-  const mode = options?.mode ?? "server";
-  const [compiledMap, setCompiledMap] = useState(/* @__PURE__ */ new Map());
-  const blockSignatureRef = useRef(/* @__PURE__ */ new Map());
-  const applyCompiledRef = useCallback(
-    (block, compiledId) => {
-      if (mode === "worker") {
-        return;
-      }
-      if (options?.workerClient) {
-        options.workerClient.setMdxCompiled(block.id, compiledId);
-        return;
-      }
-      const store = options?.store;
-      if (!store) {
-        return;
-      }
-      const currentBlocks = store.getBlocks();
-      const index = currentBlocks.findIndex((candidate) => candidate.id === block.id);
-      if (index === -1) return;
-      const current = currentBlocks[index];
-      if (current.payload.compiledMdxRef?.id === compiledId) {
-        return;
-      }
-      store.applyPatches([
-        {
-          op: "setProps",
-          at: { blockId: block.id, nodeId: block.id },
-          props: {
-            block: {
-              ...current,
-              payload: {
-                ...current.payload,
-                compiledMdxRef: { id: compiledId },
-                meta: {
-                  ...current.payload.meta ?? {},
-                  mdxStatus: "compiled"
-                }
-              }
-            }
-          }
-        }
-      ]);
-    },
-    [options?.workerClient, options?.store, mode]
-  );
-  useEffect(() => {
-    if (mode === "worker") {
-      return;
-    }
-    const targets = blocks.filter((b) => b.type === "mdx" && b.isFinalized && !b.payload.compiledMdxRef && !compiledMap.has(b.id));
-    if (targets.length === 0) return;
-    let cancelled = false;
-    (async () => {
-      for (const block of targets) {
-        try {
-          const compiled = await mdxClientRef.current.compile(block);
-          if (cancelled) return;
-          registerInlineMdxModule({
-            id: compiled.id,
-            code: compiled.code,
-            dependencies: compiled.dependencies
-          });
-          setCompiledMap((prev) => {
-            if (prev.has(block.id)) return prev;
-            const next = new Map(prev);
-            next.set(block.id, compiled.id);
-            return next;
-          });
-          applyCompiledRef(block, compiled.id);
-        } catch (e) {
-          console.warn("MDX compile failed for block", block.id, e);
-          if (options?.workerClient) {
-            options.workerClient.setMdxError(block.id, e instanceof Error ? e.message : String(e));
-          } else if (options?.store) {
-            options.store.applyPatches([
-              {
-                op: "setProps",
-                at: { blockId: block.id, nodeId: block.id },
-                props: {
-                  block: {
-                    ...block,
-                    payload: {
-                      ...block.payload,
-                      meta: { ...block.payload.meta ?? {}, mdxStatus: "error", mdxError: e instanceof Error ? e.message : String(e) }
-                    }
-                  }
-                }
-              }
-            ]);
-          }
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [blocks, compiledMap, applyCompiledRef, options?.workerClient, options?.store, mode]);
-  useEffect(() => {
-    if (mode === "worker") {
-      return;
-    }
-    const blockMap = new Map(blocks.map((block) => [block.id, block]));
-    setCompiledMap((prev) => {
-      let mutated = false;
-      const next = new Map(prev);
-      for (const [blockId] of prev) {
-        const candidate = blockMap.get(blockId);
-        if (!candidate || candidate.type !== "mdx") {
-          next.delete(blockId);
-          mutated = true;
-          continue;
-        }
-        const previousSignature = blockSignatureRef.current.get(blockId);
-        const currentSignature = candidate.payload.raw ?? "";
-        if (previousSignature !== void 0 && previousSignature !== currentSignature) {
-          next.delete(blockId);
-          mutated = true;
-        }
-      }
-      return mutated ? next : prev;
-    });
-    const signatureMap = /* @__PURE__ */ new Map();
-    for (const block of blocks) {
-      if (block.type === "mdx") {
-        signatureMap.set(block.id, block.payload.raw ?? "");
-      }
-    }
-    blockSignatureRef.current = signatureMap;
-  }, [blocks, mode]);
-  const derivedBlocks = useMemo(() => {
-    if (mode === "worker") {
-      return blocks;
-    }
-    if (options?.workerClient) {
-      return blocks;
-    }
-    if (compiledMap.size === 0) return blocks;
-    let changed = false;
-    const out = blocks.map((b) => {
-      if (b.type === "mdx" && !b.payload.compiledMdxRef) {
-        const id = compiledMap.get(b.id);
-        if (id) {
-          changed = true;
-          return {
-            ...b,
-            payload: {
-              ...b.payload,
-              compiledMdxRef: { id }
-            }
-          };
-        }
-      }
-      return b;
-    });
-    return changed ? out : blocks;
-  }, [blocks, compiledMap, mode, options?.workerClient]);
-  if (options?.workerClient) {
-    return blocks;
-  }
-  return derivedBlocks;
-}
-export {
-  useMdxCoordinator
-};