@ecopages/mdx 0.2.0-alpha.12 → 0.2.0-alpha.14

package/CHANGELOG.md

@@ -8,23 +8,18 @@ All notable changes to `@ecopages/mdx` are documented here.
 
 ### Features
 
-- Added standalone MDX server rendering and async compilation support.
+- Added standalone non-React MDX server rendering with async compilation and opt-in `.md` support.
 
 ### Bug Fixes
 
-- Fixed `.md` opt-in handling, loader registration, and Node `source-map` interop.
-
-### Refactoring
-
-- Removed the React-specific renderer and HMR path from the package.
+- Fixed loader registration, Node `source-map` interop, and renderer-owned mixed-boundary rendering for standalone MDX routes.
 
 ### Documentation
 
-- Updated the README for standalone MDX registration and the current integration setup.
+- Updated the README for standalone non-React MDX usage, `.md` opt-in handling, and compiler configuration.
 
 ---
 
 ## Migration Notes
 
-- Register `@ecopages/mdx` and `@ecopages/react` separately when you want MDX server rendering together with React client hydration.
-- The previous React-specific MDX path, including `useReact` and the React-specific HMR hooks, has been removed.
+- Use `reactPlugin({ mdx: { enabled: true } })` for React-backed MDX routes; the standalone `@ecopages/mdx` plugin now targets non-React JSX runtimes.

package/README.md

@@ -1,6 +1,6 @@
 # @ecopages/mdx
 
-Integration plugin for standalone MDX support in Ecopages, specifically designed for non-React JSX runtimes (such as `@kitajs/html`). It configures the MDX compiler to process `.mdx` routes natively.
+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.
 
 ## Installation
 
@@ -29,6 +29,39 @@ By default, the standalone plugin uses:
 - `jsxImportSource: '@kitajs/html'`
 - `jsxRuntime: 'automatic'`
 
+## 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/mdx",
-  "version": "0.2.0-alpha.12",
+  "version": "0.2.0-alpha.14",
   "description": "MDX plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -37,7 +37,7 @@
     "directory": "packages/integrations/mdx"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.12",
+    "@ecopages/core": "0.2.0-alpha.14",
     "@kitajs/html": "^4.1.0",
     "@mdx-js/mdx": "^3.1.0"
   },

package/src/mdx-renderer.d.ts

@@ -2,7 +2,7 @@
  * This module contains the MDX renderer
  * @module
  */
-import type { EcoComponent, EcoComponentConfig, EcoPageFile, EcoPagesElement, GetMetadata, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
+import type { ComponentRenderInput, ComponentRenderResult, 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 { CompileOptions } from '@mdx-js/mdx';
@@ -34,6 +34,11 @@ export declare class MDXRenderer extends IntegrationRenderer<EcoPagesElement> {
     });
     buildRouteRenderAssets(pagePath: string): Promise<ProcessedAsset[]>;
     protected normalizeImportedPageFile<TPageModule extends EcoPageFile>(_file: string, pageModule: TPageModule): TPageModule;
+    renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult>;
+    protected createComponentBoundaryRuntime(options: {
+        boundaryInput: ComponentRenderInput;
+        rendererCache: Map<string, IntegrationRenderer<any>>;
+    }): import("@ecopages/core").ComponentBoundaryRuntime;
     render({ params, query, props, locals, pageLocals, metadata, Page, HtmlTemplate, Layout, pageProps, }: MDXIntegrationRendererOpions): Promise<RouteRendererBody>;
     renderToResponse<P = Record<string, unknown>>(view: EcoComponent<P>, props: P, ctx: RenderToResponseContext): Promise<Response>;
 }

package/src/mdx-renderer.js

@@ -53,6 +53,18 @@ class MDXRenderer extends IntegrationRenderer {
       invariant(false, `Error importing MDX file: ${error}`);
     }
   }
+  async renderComponent(input) {
+    return this.renderStringComponentBoundaryWithQueuedForeignBoundaries(
+      input,
+      input.component
+    );
+  }
+  createComponentBoundaryRuntime(options) {
+    return this.createQueuedBoundaryRuntime({
+      boundaryInput: options.boundaryInput,
+      rendererCache: options.rendererCache
+    });
+  }
   async render({
     params,
     query,
@@ -66,42 +78,31 @@ 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);
     }