@ecopages/mdx 0.2.0-alpha.5 → 0.2.0-alpha.50

package/README.md

@@ -1,19 +1,21 @@
-# Ecopages MDX Integration Plugin
+# @ecopages/mdx
 
-The `@ecopages/mdx` package adds standalone MDX support for non-React JSX runtimes such as `@kitajs/html`. It uses the MDX compiler through Ecopages' integration system and is intended for server-rendered `.mdx` routes.
+Integration plugin for standalone MDX support in Ecopages for non-React JSX runtimes such as `@kitajs/html`. Use it when MDX should render directly on the server without React hydration.
 
-## Install
+## Installation
 
 ```bash
-bunx jsr add @ecopages/mdx
+bun add @ecopages/mdx @kitajs/html @mdx-js/mdx
 ```
 
+`@kitajs/html` and `@mdx-js/mdx` are required peer dependencies for this package.
+
 ## Usage
 
-Integrating MDX into your Ecopages project is made simple. Import and apply the `mdxPlugin` in your Ecopages configuration as demonstrated below:
+Import and apply the `mdxPlugin` in your `eco.config.ts`:
 
 ```ts
-import { ConfigBuilder } from '@ecopages/core';
+import { ConfigBuilder } from '@ecopages/core/config-builder';
 import { mdxPlugin } from '@ecopages/mdx';
 
 const config = await new ConfigBuilder()
@@ -29,11 +31,55 @@ By default, the standalone plugin uses:
 - `jsxImportSource: '@kitajs/html'`
 - `jsxRuntime: 'automatic'`
 
-You can override MDX compiler options, but React runtimes are intentionally not supported here.
+## What This Integration Owns
+
+- `.mdx` route files.
+- Optional `.md` routes when you opt them into `extensions`.
+- MDX compilation against a non-React JSX runtime.
+
+## Configure Markdown Extensions
+
+Use `extensions` when both `.mdx` and `.md` files should run through the MDX loader.
+
+```ts
+import { mdxPlugin } from '@ecopages/mdx';
+
+mdxPlugin({
+	extensions: ['.mdx', '.md'],
+});
+```
+
+## Compiler Options
+
+Pass `compilerOptions` to add remark, rehype, or recma plugins while keeping the non-React JSX runtime managed by the integration.
+
+```ts
+import { mdxPlugin } from '@ecopages/mdx';
+
+mdxPlugin({
+	compilerOptions: {
+		remarkPlugins: [],
+		rehypePlugins: [],
+	},
+});
+```
+
+> [!WARNING]
+> React runtimes are intentionally rejected by this standalone plugin.
+
+## Mixed Rendering
 
-## Using MDX with React Router
+Standalone MDX can own the page shell or nested MDX foreign subtrees in a mixed-renderer app. When another integration reaches an MDX-owned foreign child, Ecopages hands that foreign subtree back to the MDX renderer so the MDX runtime can finish serialization before the outer renderer resumes.
 
-If you are using `@ecopages/react` with a client-side router, enable MDX directly within the React plugin instead of using this standalone plugin. This ensures unified routing, hydration, and HMR for both `.tsx` and `.mdx` pages:
+Important:
+
+- Components that may render foreign children must declare those children in `config.dependencies.components`.
+- Ecopages validates mixed-renderer ownership from declared dependencies during render preparation rather than inferring every foreign subtree from rendered HTML alone.
+- Standalone MDX keeps its own page normalization and non-React JSX runtime behavior.
+
+## Using MDX with React
+
+If you are using `@ecopages/react` and building a full React application, **do not** use this standalone MDX plugin. Instead, enable MDX directly within the React plugin configuration to ensure unified hydration, client-side routing, and HMR:
 
 ```ts
 import { reactPlugin } from '@ecopages/react';
@@ -44,9 +90,3 @@ reactPlugin({
 	mdx: { enabled: true },
 });
 ```
-
-See the `@ecopages/react` documentation for details.
-
-## React runtimes are not supported here
-
-Standalone `mdxPlugin()` rejects `jsxImportSource: 'react'` and related React JSX runtimes. For React-backed MDX, use [@ecopages/react](../react/README.md) with `mdx.enabled`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/mdx",
-  "version": "0.2.0-alpha.5",
+  "version": "0.2.0-alpha.50",
   "description": "MDX plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -37,12 +37,12 @@
     "directory": "packages/integrations/mdx"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.5",
+    "@ecopages/core": "0.2.0-alpha.50",
     "@kitajs/html": "^4.1.0",
     "@mdx-js/mdx": "^3.1.0"
   },
   "dependencies": {
-    "@ecopages/logger": "^0.2.2",
+    "@ecopages/logger": "^0.2.3",
     "source-map": "^0.7.6",
     "vfile": "^6.0.3"
   }

package/src/mdx-loader-plugin.d.ts

@@ -1,3 +1,3 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import { type CompileOptions } from '@mdx-js/mdx';
 export declare function createMdxLoaderPlugin(compilerOptions?: CompileOptions): EcoBuildPlugin;

package/src/mdx-loader-plugin.js

@@ -1,8 +1,15 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import { compile } from "@mdx-js/mdx";
-import { SourceMapGenerator } from "source-map";
+import sourceMap from "source-map";
 import { VFile } from "vfile";
+function resolveCompileFormat(filePath, compilerOptions) {
+  const configuredFormat = compilerOptions?.format;
+  if (configuredFormat && configuredFormat !== "detect") {
+    return configuredFormat;
+  }
+  return path.extname(filePath).toLowerCase() === ".md" ? "mdx" : configuredFormat;
+}
 function createMdxLoaderPlugin(compilerOptions) {
   const mdxExtensions = compilerOptions?.mdxExtensions ?? [".mdx"];
   const mdExtensions = compilerOptions?.mdExtensions ?? [".md"];
@@ -18,13 +25,14 @@ function createMdxLoaderPlugin(compilerOptions) {
         const file = new VFile({ path: filePath, value: source });
         const compiled = await compile(file, {
           ...compilerOptions,
-          SourceMapGenerator
+          format: resolveCompileFormat(filePath, compilerOptions),
+          SourceMapGenerator: sourceMap.SourceMapGenerator
         });
-        const sourceMap = compiled.map ? `
+        const inlineSourceMap = compiled.map ? `
 //# sourceMappingURL=data:application/json;base64,${Buffer.from(JSON.stringify(compiled.map)).toString("base64")}
 ` : "";
         return {
-          contents: `${String(compiled.value)}${sourceMap}`,
+          contents: `${String(compiled.value)}${inlineSourceMap}`,
           loader: compilerOptions?.jsx ? "jsx" : "js",
           resolveDir: path.dirname(args.path)
         };

package/src/mdx-renderer.d.ts

@@ -2,50 +2,27 @@
  * This module contains the MDX renderer
  * @module
  */
-import type { EcoComponent, EcoComponentConfig, EcoPageFile, EcoPagesElement, GetMetadata, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
-import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
-import type { AssetProcessingService, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoPageFile, EcoPagesElement, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
+import { IntegrationRenderer, type PageBrowserGraphContribution, type PageBrowserGraphContributionContext, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
 import type { CompileOptions } from '@mdx-js/mdx';
-/**
- * A structure representing an MDX file
- */
-export type MDXFile = {
-    default: EcoComponent;
-    config?: EcoComponentConfig;
-    getMetadata: GetMetadata;
-};
+import type { MDXRendererOptions } from './mdx.types.js';
+export type { MDXFile, MDXRendererConfig, MDXRendererOptions } from './mdx.types.js';
 /**
  * Options for the MDX renderer
  */
-interface MDXIntegrationRendererOpions<C = EcoPagesElement> extends IntegrationRendererRenderOptions<C> {
+interface MDXIntegrationRendererOptions<C = EcoPagesElement> extends IntegrationRendererRenderOptions<C> {
 }
 /**
  * A renderer for the MDX integration.
  */
 export declare class MDXRenderer extends IntegrationRenderer<EcoPagesElement> {
     name: string;
-    compilerOptions: CompileOptions;
-    constructor({ compilerOptions, ...options }: {
-        appConfig: any;
-        assetProcessingService: AssetProcessingService;
-        resolvedIntegrationDependencies: ProcessedAsset[];
-        runtimeOrigin: string;
-        compilerOptions?: CompileOptions;
-    });
-    buildRouteRenderAssets(pagePath: string): Promise<ProcessedAsset[]>;
-    protected importPageFile(file: string): Promise<EcoPageFile<{
-        layout?: EcoComponent<any> | {
-            config: EcoComponentConfig | undefined;
-        };
-    }>>;
-    render({ params, query, props, locals, pageLocals, metadata, Page, HtmlTemplate, Layout, pageProps, }: MDXIntegrationRendererOpions): Promise<RouteRendererBody>;
+    readonly compilerOptions: CompileOptions;
+    private isFunctionComponent;
+    constructor({ mdxConfig, ...options }: MDXRendererOptions);
+    protected collectPageBrowserGraphContribution(context: PageBrowserGraphContributionContext): Promise<PageBrowserGraphContribution>;
+    protected normalizeImportedPageFile<TPageModule extends EcoPageFile>(_file: string, pageModule: TPageModule): TPageModule;
+    renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult>;
+    render({ params, query, props, locals, pageLocals, metadata, Page, HtmlTemplate, Layout, pageProps, }: MDXIntegrationRendererOptions): Promise<RouteRendererBody>;
     renderToResponse<P = Record<string, unknown>>(view: EcoComponent<P>, props: P, ctx: RenderToResponseContext): Promise<Response>;
 }
-/**
- * Factory function to create an MDX renderer class with specific compiler options.
- *
- * @param compilerOptions - Compiler options for MDX compilation.
- * @returns A new MDXRenderer class extended with the provided context.
- */
-export declare function createMDXRenderer(compilerOptions: CompileOptions): typeof MDXRenderer;
-export {};

package/src/mdx-renderer.js

@@ -1,19 +1,22 @@
-import { IntegrationRenderer } from "@ecopages/core/route-renderer/integration-renderer";
-import { invariant } from "@ecopages/core/utils/invariant";
-import { PLUGIN_NAME } from "./mdx.plugin.js";
+import { assertIntegrationInvariant } from "@ecopages/core/plugins/integration-plugin";
+import {
+  IntegrationRenderer
+} from "@ecopages/core/route-renderer/integration-renderer";
+import { MDX_PLUGIN_NAME } from "./mdx.constants.js";
 import { rapidhash } from "@ecopages/core/hash";
 class MDXRenderer extends IntegrationRenderer {
-  name = PLUGIN_NAME;
+  name = MDX_PLUGIN_NAME;
   compilerOptions;
-  constructor({
-    compilerOptions,
-    ...options
-  }) {
+  isFunctionComponent(component) {
+    return typeof component === "function";
+  }
+  constructor({ mdxConfig, ...options }) {
     super(options);
-    this.compilerOptions = compilerOptions || {};
+    this.compilerOptions = mdxConfig?.compilerOptions ?? {};
   }
-  async buildRouteRenderAssets(pagePath) {
-    const { default: pageComponent } = await this.importPageFile(pagePath);
+  async collectPageBrowserGraphContribution(context) {
+    const { file: pagePath, pageModule } = context;
+    const { default: pageComponent } = pageModule;
     const config = pageComponent.config;
     const components = [];
     const resolvedLayout = config?.layout;
@@ -32,28 +35,32 @@ class MDXRenderer extends IntegrationRenderer {
         }
       });
     }
-    return await this.resolveDependencies(components);
+    return { assets: await this.resolveDependencies(components) };
   }
-  async importPageFile(file) {
+  normalizeImportedPageFile(_file, pageModule) {
     try {
-      const {
-        default: Page,
-        config,
-        getMetadata
-      } = await super.importPageFile(file);
+      const mdxModule = pageModule;
+      const { default: Page, config, getMetadata } = mdxModule;
       if (typeof Page !== "function") {
         throw new Error("MDX file must export a default function");
       }
       const resolvedLayout = config?.layout;
       if (config) Page.config = config;
       return {
+        ...pageModule,
         default: Page,
         layout: resolvedLayout,
         getMetadata
       };
     } catch (error) {
-      invariant(false, `Error importing MDX file: ${error}`);
+      assertIntegrationInvariant(false, `Error importing MDX file: ${error}`);
+    }
+  }
+  async renderComponent(input) {
+    if (!this.isFunctionComponent(input.component)) {
+      throw new TypeError("MDX renderer expected a callable component.");
     }
+    return this.renderStringComponentWithQueuedForeignSubtrees(input, input.component);
   }
   async render({
     params,
@@ -68,58 +75,36 @@ class MDXRenderer extends IntegrationRenderer {
     pageProps
   }) {
     try {
-      const pageContent = await Page({ params, query, ...props, locals: pageLocals });
-      const children = typeof Layout === "function" ? await Layout({ children: pageContent, locals }) : pageContent;
-      const body = await HtmlTemplate({
+      return await this.renderPageWithDocumentShell({
+        page: {
+          component: Page,
+          props: { params, query, ...props, locals: pageLocals }
+        },
+        layout: Layout ? {
+          component: Layout,
+          props: locals ? { locals } : {}
+        } : void 0,
+        htmlTemplate: HtmlTemplate,
         metadata,
-        children,
         pageProps: pageProps || {}
       });
-      return this.DOC_TYPE + body;
     } catch (error) {
       throw this.createRenderError("Error rendering page", error);
     }
   }
   async renderToResponse(view, props, ctx) {
     try {
-      const Layout = view.config?.layout;
-      const viewFn = view;
-      const pageContent = await viewFn(props);
-      let body;
-      if (ctx.partial) {
-        body = pageContent;
-      } else {
-        const children = Layout ? await Layout({ children: pageContent }) : pageContent;
-        const HtmlTemplate = await this.getHtmlTemplate();
-        const metadata = view.metadata ? await view.metadata({
-          params: {},
-          query: {},
-          props,
-          appConfig: this.appConfig
-        }) : this.appConfig.defaultMetadata;
-        body = this.DOC_TYPE + await HtmlTemplate({
-          metadata,
-          children,
-          pageProps: props
-        });
-      }
-      return this.createHtmlResponse(body, ctx);
+      return await this.renderViewWithDocumentShell({
+        view,
+        props,
+        ctx,
+        layout: view.config?.layout
+      });
     } catch (error) {
       throw this.createRenderError("Error rendering view", error);
     }
   }
 }
-function createMDXRenderer(compilerOptions) {
-  return class extends MDXRenderer {
-    constructor(options) {
-      super({
-        ...options,
-        compilerOptions
-      });
-    }
-  };
-}
 export {
-  MDXRenderer,
-  createMDXRenderer
+  MDXRenderer
 };

package/src/mdx.constants.d.ts

@@ -0,0 +1 @@
+export declare const MDX_PLUGIN_NAME = "MDX";

package/src/mdx.constants.js

@@ -0,0 +1,4 @@
+const MDX_PLUGIN_NAME = "MDX";
+export {
+  MDX_PLUGIN_NAME
+};

package/src/mdx.plugin.d.ts

@@ -1,15 +1,12 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
 import type { EcoPagesElement } from '@ecopages/core';
-import { IntegrationPlugin, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
-import type { CompileOptions } from '@mdx-js/mdx';
+import { IntegrationPlugin, type EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import { MDXRenderer } from './mdx-renderer.js';
+import type { MDXPluginConfig } from './mdx.types.js';
+export type { MDXPluginConfig, MDXRendererConfig, MDXRendererOptions } from './mdx.types.js';
 /**
  * The name of the MDX plugin
  */
 export declare const PLUGIN_NAME = "MDX";
-export type MDXPluginConfig = Partial<Omit<IntegrationPluginConfig, 'name'>> & {
-    compilerOptions?: CompileOptions;
-};
 /**
  * The MDX plugin class
  * This plugin provides support for MDX components in Ecopages.
@@ -20,10 +17,25 @@ export type MDXPluginConfig = Partial<Omit<IntegrationPluginConfig, 'name'>> & {
  */
 export declare class MDXPlugin extends IntegrationPlugin<EcoPagesElement> {
     renderer: typeof MDXRenderer;
-    private compilerOptions;
+    private readonly compilerOptions;
     private mdxLoaderPlugin;
     constructor({ compilerOptions, ...options }?: MDXPluginConfig);
+    initializeRenderer(options?: {
+        rendererModules?: unknown;
+    }): MDXRenderer;
     get plugins(): EcoBuildPlugin[];
+    /**
+     * Materializes the MDX loader once so config-time sealing and runtime setup
+     * can share the same loader instance.
+     */
+    private ensureLoaderPlugin;
+    /**
+     * Prepares the MDX loader contribution before config build seals the manifest.
+     */
+    prepareBuildContributions(): Promise<void>;
+    /**
+     * Runs runtime-only MDX setup after build contributions are already prepared.
+     */
     setup(): Promise<void>;
 }
 /**

package/src/mdx.plugin.js

@@ -1,10 +1,13 @@
-import { IntegrationPlugin } from "@ecopages/core/plugins/integration-plugin";
-import { deepMerge } from "@ecopages/core/utils/deep-merge";
+import {
+  IntegrationPlugin,
+  mergeIntegrationOptions
+} from "@ecopages/core/plugins/integration-plugin";
 import { Logger } from "@ecopages/logger";
 import { createMdxLoaderPlugin } from "./mdx-loader-plugin.js";
-import { createMDXRenderer, MDXRenderer } from "./mdx-renderer.js";
+import { MDX_PLUGIN_NAME } from "./mdx.constants.js";
+import { MDXRenderer } from "./mdx-renderer.js";
 const appLogger = new Logger("[MDXPlugin]");
-const PLUGIN_NAME = "MDX";
+const PLUGIN_NAME = MDX_PLUGIN_NAME;
 const defaultOptions = {
   format: "detect",
   outputFormat: "program",
@@ -12,8 +15,20 @@ const defaultOptions = {
   jsxRuntime: "automatic",
   development: process.env.NODE_ENV === "development"
 };
+function splitMarkdownExtensions(extensions) {
+  const mdExtensions = [];
+  const mdxExtensions = [];
+  for (const extension of extensions) {
+    if (extension === ".md") {
+      mdExtensions.push(extension);
+      continue;
+    }
+    mdxExtensions.push(extension);
+  }
+  return { mdExtensions, mdxExtensions };
+}
 class MDXPlugin extends IntegrationPlugin {
-  renderer;
+  renderer = MDXRenderer;
   compilerOptions;
   mdxLoaderPlugin;
   constructor({ compilerOptions, ...options } = { extensions: [".mdx"] }) {
@@ -22,7 +37,15 @@ class MDXPlugin extends IntegrationPlugin {
       extensions: [".mdx"],
       ...options
     });
-    const finalCompilerOptions = deepMerge({ ...defaultOptions }, compilerOptions);
+    const { mdExtensions, mdxExtensions } = splitMarkdownExtensions(this.extensions);
+    const finalCompilerOptions = mergeIntegrationOptions(
+      {
+        ...defaultOptions,
+        mdxExtensions,
+        mdExtensions
+      },
+      compilerOptions
+    );
     const jsxImportSource = finalCompilerOptions.jsxImportSource;
     if (jsxImportSource === "react" || (jsxImportSource?.startsWith("react/") ?? false)) {
       throw new Error(
@@ -30,17 +53,44 @@ class MDXPlugin extends IntegrationPlugin {
       );
     }
     this.compilerOptions = finalCompilerOptions;
-    this.renderer = createMDXRenderer(finalCompilerOptions);
     appLogger.debug(`MDX plugin configured with jsxImportSource: ${jsxImportSource ?? "default"}`);
   }
+  initializeRenderer(options) {
+    const renderer = new this.renderer({
+      ...this.createRendererOptions(options),
+      mdxConfig: {
+        compilerOptions: this.compilerOptions
+      }
+    });
+    return this.attachRendererRuntimeServices(renderer);
+  }
   get plugins() {
     if (this.mdxLoaderPlugin) {
       return [this.mdxLoaderPlugin];
     }
     return [];
   }
-  async setup() {
+  /**
+   * Materializes the MDX loader once so config-time sealing and runtime setup
+   * can share the same loader instance.
+   */
+  ensureLoaderPlugin() {
+    if (this.mdxLoaderPlugin) {
+      return;
+    }
     this.mdxLoaderPlugin = createMdxLoaderPlugin(this.compilerOptions);
+  }
+  /**
+   * Prepares the MDX loader contribution before config build seals the manifest.
+   */
+  async prepareBuildContributions() {
+    this.ensureLoaderPlugin();
+  }
+  /**
+   * Runs runtime-only MDX setup after build contributions are already prepared.
+   */
+  async setup() {
+    this.ensureLoaderPlugin();
     await super.setup();
   }
 }

package/src/mdx.types.d.ts

@@ -0,0 +1,26 @@
+import type { EcoComponent, EcoComponentConfig, EcoPagesAppConfig, GetMetadata } from '@ecopages/core';
+import type { IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
+import type { AssetProcessingService, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import type { CompileOptions } from '@mdx-js/mdx';
+export type MDXPluginConfig = Partial<Omit<IntegrationPluginConfig, 'name'>> & {
+    compilerOptions?: CompileOptions;
+};
+export type MDXRendererConfig = {
+    compilerOptions?: CompileOptions;
+};
+export type MDXRendererOptions = {
+    appConfig: EcoPagesAppConfig;
+    assetProcessingService: AssetProcessingService;
+    resolvedIntegrationDependencies: ProcessedAsset[];
+    rendererModules?: unknown;
+    runtimeOrigin: string;
+    mdxConfig?: MDXRendererConfig;
+};
+/**
+ * A structure representing an MDX file.
+ */
+export type MDXFile = {
+    default: EcoComponent;
+    config?: EcoComponentConfig;
+    getMetadata: GetMetadata;
+};

package/CHANGELOG.md

@@ -1,31 +0,0 @@
-# Changelog
-
-All notable changes to `@ecopages/mdx` are documented here.
-
-> **Note:** Changelog tracking begins at version `0.2.0`. Changes prior to this release are not recorded here but are available in the git history.
-
-## [UNRELEASED] — TBD
-
-### Features
-
-- **Decoupled from React** — The MDX integration now works as a standalone, runtime-agnostic integration. React dependencies have been removed; MDX routes are server-rendered without requiring the React integration (`4d5474a4`).
-- **Async MDX compilation** — The MDX loader plugin now compiles MDX files asynchronously, improving compatibility with async remark/rehype plugins (`9e879dbe`).
-- **Updated type definitions** — Plugin options are more precisely typed to clarify server-rendered MDX route configuration.
-
-### Refactoring
-
-- Removed unused HMR strategy and renderer files that were React-specific.
-- README updated to document standalone MDX usage without React.
-- Ambient module declarations cleaned up (`5f46ecc5`).
-- Aligned with full orchestration mode (`fc07bdb0`).
-
-### Documentation
-
-- README updated to clarify the integration is now usable without the React integration.
-
----
-
-## Migration Notes
-
-- If you were using `@ecopages/mdx` together with `@ecopages/react` for MDX routes, the two integrations must now be registered separately. MDX handles server rendering; React handles client hydration.
-- The `useReact` option and React-specific HMR hooks have been removed.

package/src/mdx-loader-plugin.ts

@@ -1,40 +0,0 @@
-import { readFileSync } from 'node:fs';
-import path from 'node:path';
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import { type CompileOptions, compile } from '@mdx-js/mdx';
-import { SourceMapGenerator } from 'source-map';
-import { VFile } from 'vfile';
-
-export function createMdxLoaderPlugin(compilerOptions?: CompileOptions): EcoBuildPlugin {
-	const mdxExtensions = compilerOptions?.mdxExtensions ?? ['.mdx'];
-	const mdExtensions = compilerOptions?.mdExtensions ?? ['.md'];
-	const allExtensions = [...mdxExtensions, ...mdExtensions];
-	const escapedExts = allExtensions.map((ext) => ext.replace('.', '\\.'));
-	const filter = new RegExp(`(${escapedExts.join('|')})(\\?.*)?$`);
-
-	return {
-		name: 'mdx-loader',
-		setup(build) {
-			build.onLoad({ filter }, async (args) => {
-				const filePath = args.path.includes('?') ? args.path.split('?')[0] : args.path;
-				const source = readFileSync(filePath, 'utf-8');
-				const file = new VFile({ path: filePath, value: source });
-
-				const compiled = await compile(file, {
-					...compilerOptions,
-					SourceMapGenerator,
-				});
-
-				const sourceMap = compiled.map
-					? `\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(JSON.stringify(compiled.map)).toString('base64')}\n`
-					: '';
-
-				return {
-					contents: `${String(compiled.value)}${sourceMap}`,
-					loader: compilerOptions?.jsx ? 'jsx' : 'js',
-					resolveDir: path.dirname(args.path),
-				};
-			});
-		},
-	};
-}

package/src/mdx-renderer.ts

@@ -1,221 +0,0 @@
-/**
- * This module contains the MDX renderer
- * @module
- */
-
-import type {
-	EcoComponent,
-	EcoComponentConfig,
-	EcoPageFile,
-	EcoPagesElement,
-	GetMetadata,
-	IntegrationRendererRenderOptions,
-	PageMetadataProps,
-	RouteRendererBody,
-} from '@ecopages/core';
-import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
-import { invariant } from '@ecopages/core/utils/invariant';
-import type { AssetProcessingService, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
-import type { CompileOptions } from '@mdx-js/mdx';
-import { PLUGIN_NAME } from './mdx.plugin.ts';
-import { rapidhash } from '@ecopages/core/hash';
-
-/**
- * A structure representing an MDX file
- */
-export type MDXFile = {
-	default: EcoComponent;
-	config?: EcoComponentConfig;
-	getMetadata: GetMetadata;
-};
-
-/**
- * Options for the MDX renderer
- */
-interface MDXIntegrationRendererOpions<C = EcoPagesElement> extends IntegrationRendererRenderOptions<C> {}
-
-/**
- * A renderer for the MDX integration.
- */
-export class MDXRenderer extends IntegrationRenderer<EcoPagesElement> {
-	name = PLUGIN_NAME;
-	compilerOptions: CompileOptions;
-
-	constructor({
-		compilerOptions,
-		...options
-	}: {
-		appConfig: any;
-		assetProcessingService: AssetProcessingService;
-		resolvedIntegrationDependencies: ProcessedAsset[];
-		runtimeOrigin: string;
-		compilerOptions?: CompileOptions;
-	}) {
-		super(options);
-		this.compilerOptions = compilerOptions || {};
-	}
-
-	override async buildRouteRenderAssets(pagePath: string): Promise<ProcessedAsset[]> {
-		const { default: pageComponent } = await this.importPageFile(pagePath);
-		const config = pageComponent.config;
-		const components: Partial<EcoComponent>[] = [];
-
-		const resolvedLayout = config?.layout;
-
-		if (resolvedLayout?.config?.dependencies) {
-			components.push({ config: resolvedLayout.config });
-		}
-
-		if (config?.dependencies) {
-			components.push({
-				config: {
-					...config,
-					__eco: {
-						id: rapidhash(pagePath).toString(36),
-						file: pagePath,
-						integration: this.name,
-					},
-				},
-			});
-		}
-
-		return await this.resolveDependencies(components);
-	}
-
-	protected override async importPageFile(file: string): Promise<
-		EcoPageFile<{
-			layout?:
-				| EcoComponent<any>
-				| {
-						config: EcoComponentConfig | undefined;
-				  };
-		}>
-	> {
-		try {
-			const {
-				default: Page,
-				config,
-				getMetadata,
-			} = (await super.importPageFile(file)) as EcoPageFile<{
-				layout?:
-					| EcoComponent<any>
-					| {
-							config: EcoComponentConfig | undefined;
-					  };
-			}> & {
-				config?: EcoComponentConfig;
-			};
-
-			if (typeof Page !== 'function') {
-				throw new Error('MDX file must export a default function');
-			}
-
-			const resolvedLayout = config?.layout;
-
-			if (config) Page.config = config;
-
-			return {
-				default: Page,
-				layout: resolvedLayout,
-				getMetadata,
-			};
-		} catch (error) {
-			invariant(false, `Error importing MDX file: ${error}`);
-		}
-	}
-
-	async render({
-		params,
-		query,
-		props,
-		locals,
-		pageLocals,
-		metadata,
-		Page,
-		HtmlTemplate,
-		Layout,
-		pageProps,
-	}: MDXIntegrationRendererOpions): Promise<RouteRendererBody> {
-		try {
-			const pageContent = await Page({ params, query, ...props, locals: pageLocals });
-			const children =
-				typeof Layout === 'function' ? await Layout({ children: pageContent, locals }) : pageContent;
-
-			const body = await HtmlTemplate({
-				metadata,
-				children,
-				pageProps: pageProps || {},
-			});
-
-			return this.DOC_TYPE + body;
-		} catch (error) {
-			throw this.createRenderError('Error rendering page', error);
-		}
-	}
-
-	async renderToResponse<P = Record<string, unknown>>(
-		view: EcoComponent<P>,
-		props: P,
-		ctx: RenderToResponseContext,
-	): Promise<Response> {
-		try {
-			const Layout = view.config?.layout as
-				| ((props: { children: EcoPagesElement } & Record<string, unknown>) => Promise<EcoPagesElement>)
-				| undefined;
-
-			const viewFn = view as (props: P) => Promise<EcoPagesElement>;
-			const pageContent = await viewFn(props);
-
-			let body: string;
-			if (ctx.partial) {
-				body = pageContent as string;
-			} else {
-				const children = Layout ? await Layout({ children: pageContent }) : pageContent;
-
-				const HtmlTemplate = await this.getHtmlTemplate();
-				const metadata: PageMetadataProps = view.metadata
-					? await view.metadata({
-							params: {},
-							query: {},
-							props: props as Record<string, unknown>,
-							appConfig: this.appConfig,
-						})
-					: this.appConfig.defaultMetadata;
-
-				body =
-					this.DOC_TYPE +
-					(await HtmlTemplate({
-						metadata,
-						children: children as EcoPagesElement,
-						pageProps: props as Record<string, unknown>,
-					}));
-			}
-
-			return this.createHtmlResponse(body, ctx);
-		} catch (error) {
-			throw this.createRenderError('Error rendering view', error);
-		}
-	}
-}
-
-/**
- * Factory function to create an MDX renderer class with specific compiler options.
- *
- * @param compilerOptions - Compiler options for MDX compilation.
- * @returns A new MDXRenderer class extended with the provided context.
- */
-export function createMDXRenderer(compilerOptions: CompileOptions): typeof MDXRenderer {
-	return class extends MDXRenderer {
-		constructor(options: {
-			appConfig: any;
-			assetProcessingService: AssetProcessingService;
-			resolvedIntegrationDependencies: ProcessedAsset[];
-			runtimeOrigin: string;
-		}) {
-			super({
-				...options,
-				compilerOptions,
-			});
-		}
-	};
-}

package/src/mdx.plugin.ts

@@ -1,85 +0,0 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import type { EcoPagesElement } from '@ecopages/core';
-import { IntegrationPlugin, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
-import { deepMerge } from '@ecopages/core/utils/deep-merge';
-import { Logger } from '@ecopages/logger';
-import type { CompileOptions } from '@mdx-js/mdx';
-import { createMdxLoaderPlugin } from './mdx-loader-plugin.ts';
-import { createMDXRenderer, MDXRenderer } from './mdx-renderer.ts';
-
-const appLogger = new Logger('[MDXPlugin]');
-
-/**
- * The name of the MDX plugin
- */
-export const PLUGIN_NAME = 'MDX';
-
-export type MDXPluginConfig = Partial<Omit<IntegrationPluginConfig, 'name'>> & {
-	compilerOptions?: CompileOptions;
-};
-
-const defaultOptions: CompileOptions = {
-	format: 'detect',
-	outputFormat: 'program',
-	jsxImportSource: '@kitajs/html',
-	jsxRuntime: 'automatic',
-	development: process.env.NODE_ENV === 'development',
-};
-
-/**
- * The MDX plugin class
- * This plugin provides support for MDX components in Ecopages.
- *
- * Standalone `mdxPlugin()` is intended for non-React JSX runtimes such as
- * `@kitajs/html`. React-backed MDX should be configured through
- * `reactPlugin({ mdx: { enabled: true, compilerOptions: ... } })` instead.
- */
-export class MDXPlugin extends IntegrationPlugin<EcoPagesElement> {
-	renderer: typeof MDXRenderer;
-	private compilerOptions: CompileOptions;
-	private mdxLoaderPlugin: EcoBuildPlugin | undefined;
-
-	constructor({ compilerOptions, ...options }: MDXPluginConfig = { extensions: ['.mdx'] }) {
-		super({
-			name: PLUGIN_NAME,
-			extensions: ['.mdx'],
-			...options,
-		});
-
-		const finalCompilerOptions = deepMerge({ ...defaultOptions }, compilerOptions);
-		const jsxImportSource = finalCompilerOptions.jsxImportSource;
-
-		if (jsxImportSource === 'react' || (jsxImportSource?.startsWith('react/') ?? false)) {
-			throw new Error(
-				'Standalone `mdxPlugin()` does not support React JSX runtimes. Use `reactPlugin({ mdx: { enabled: true, compilerOptions: ... } })` instead.',
-			);
-		}
-
-		this.compilerOptions = finalCompilerOptions;
-		this.renderer = createMDXRenderer(finalCompilerOptions);
-
-		appLogger.debug(`MDX plugin configured with jsxImportSource: ${jsxImportSource ?? 'default'}`);
-	}
-
-	override get plugins(): EcoBuildPlugin[] {
-		if (this.mdxLoaderPlugin) {
-			return [this.mdxLoaderPlugin];
-		}
-
-		return [];
-	}
-
-	override async setup(): Promise<void> {
-		this.mdxLoaderPlugin = createMdxLoaderPlugin(this.compilerOptions);
-		await super.setup();
-	}
-}
-
-/**
- * Factory function to create an MDX plugin instance.
- * @param options Configuration options for the MDX plugin
- * @returns A new MDXPlugin instance
- */
-export function mdxPlugin(options?: MDXPluginConfig): MDXPlugin {
-	return new MDXPlugin(options);
-}