@ecopages/ecopages-jsx 0.2.0-alpha.13 → 0.2.0-alpha.15

package/CHANGELOG.md

@@ -8,8 +8,12 @@
 
 ### Bug Fixes
 
-- Fixed mixed-renderer JSX boundary resolution, Radiant/browser runtime asset mapping, required peer dependency wiring, Bun-only MDX loader setup, and multi-dot MDX extension matching.
+- Fixed Radiant SSR page inspection to install the light-DOM shim before JSX page modules are imported outside the normal render pass.
+- Restored direct `EcopagesJsxPlugin` construction so the exported class still accepts the public plugin options shape.
+- Fixed intrinsic custom-element asset discovery so Ecopages JSX registers scripts declared with decorator and function-call `customElement(...)` syntax.
+- Fixed the Ecopages JSX browser runtime import map so browser builds no longer expose `@ecopages/jsx/server` through the shared JSX vendor bundle.
+- Fixed the Ecopages JSX browser runtime bundle so Radiant custom-element scripts no longer fail on a duplicate `jsxDEV` export cycle.
 
-### Documentation
+### Refactoring
 
-- Updated the README to document JSX route extensions, Radiant defaults, MDX configuration, and mixed-renderer boundary ownership.
+- Replaced Ecopages JSX renderer static and post-construction configuration with instance-owned renderer wiring and extracted shared plugin and renderer types into a dedicated module.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-alpha.13",
+  "version": "0.2.0-alpha.15",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -21,7 +21,7 @@
     "vfile": "^6.0.3"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.13",
+    "@ecopages/core": "0.2.0-alpha.15",
     "@ecopages/jsx": "^0.3.0-alpha.0",
     "@ecopages/radiant": "^0.3.0-alpha.0"
   }

package/src/ecopages-jsx-renderer.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoComponentConfig, EcoPageFile, GetMetadata, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
-import type { EcoPagesAppConfig } from '@ecopages/core/internal-types';
-import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
-import type { AssetProcessingService, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import { IntegrationRenderer, type RenderToResponseContext, type RouteModuleLoadOptions } from '@ecopages/core/route-renderer/integration-renderer';
 import { type JsxRenderable } from '@ecopages/jsx';
+import type { EcopagesJsxRendererOptions } from './ecopages-jsx.types.js';
+export type { EcopagesJsxRendererConfig, EcopagesJsxRendererOptions } from './ecopages-jsx.types.js';
 type MdxPageModule = EcoPageFile<{
     config?: EcoComponentConfig;
     layout?: EcoComponent;
@@ -16,28 +16,27 @@ type MdxPageModule = EcoPageFile<{
  */
 export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderable> {
     name: string;
-    static mdxExtensions: string[];
-    private intrinsicCustomElementAssets;
+    private static radiantLightDomShimInstallPromise;
+    private readonly intrinsicCustomElementAssets;
     private collectedAssetFrames;
-    private radiantSsrEnabled;
-    private resolveQueuedBoundaryChildren;
-    private resolveQueuedBoundaryHtml;
-    constructor({ appConfig, assetProcessingService, resolvedIntegrationDependencies, runtimeOrigin, }: {
-        appConfig: EcoPagesAppConfig;
-        assetProcessingService: AssetProcessingService;
-        resolvedIntegrationDependencies: ProcessedAsset[];
-        runtimeOrigin: string;
-    });
-    /** Returns whether the requested page file should be treated as MDX. */
-    isMdxFile(filePath: string): boolean;
+    private readonly mdxExtensions;
+    private readonly radiantSsrEnabled;
+    /**
+     * Re-renders queued JSX children inside the owning renderer so nested custom
+     * elements and queued foreign boundaries contribute assets to the same frame.
+     */
+    private renderQueuedBoundaryChildren;
     /**
-     * Supplies the intrinsic custom-element assets discovered by the plugin so
-     * component renders can attach the correct client scripts.
+     * Resolves queued foreign boundaries after JSX has been stringified.
+     *
+     * JSX content needs one extra render pass because child boundaries may emit
+     * additional browser assets while also replacing placeholder tokens.
      */
-    setIntrinsicCustomElementAssets(assetsByTagName: Map<string, readonly ProcessedAsset[]>): void;
-    /** Enables the Radiant SSR light-DOM shim for this renderer instance. */
-    setRadiantSsrEnabled(enabled: boolean): void;
-    protected importPageFile(file: string): Promise<MdxPageModule>;
+    private resolveOwnedBoundaryHtml;
+    constructor({ appConfig, assetProcessingService, resolvedIntegrationDependencies, jsxConfig, runtimeOrigin, }: EcopagesJsxRendererOptions);
+    /** Returns whether the requested page file should be treated as MDX. */
+    isMdxFile(filePath: string): boolean;
+    protected importPageFile(file: string, options?: RouteModuleLoadOptions): Promise<MdxPageModule>;
     render(options: IntegrationRendererRenderOptions<JsxRenderable>): Promise<RouteRendererBody>;
     renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult>;
     protected createComponentBoundaryRuntime(options: {
@@ -45,10 +44,24 @@ export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderab
         rendererCache: Map<string, IntegrationRenderer<any>>;
     }): import("@ecopages/core").ComponentBoundaryRuntime;
     renderToResponse<P = any>(view: EcoComponent<P>, props: P, ctx: RenderToResponseContext): Promise<Response>;
+    /**
+     * Normalizes MDX modules into the same page contract as JSX route modules.
+     *
+     * MDX files export page metadata alongside generated component code, so the
+     * renderer folds those exports back into the Ecopages component shape before
+     * any layout or document-shell logic runs.
+     */
+    private normalizeMdxPageModule;
     private beginCollectedAssetFrame;
     private endCollectedAssetFrame;
     private renderJsx;
     private renderEcoComponent;
+    private ensureRadiantLightDomShimInstalled;
+    private isFunctionComponent;
+    private createComponentProps;
+    private collectComponentAssets;
+    private invokeComponent;
+    private createEcoMeta;
+    private wrapMdxPage;
     private createIntrinsicCustomElementRenderHook;
 }
-export {};

package/src/ecopages-jsx-renderer.js

@@ -1,46 +1,22 @@
 import { rapidhash } from "@ecopages/core/hash";
-import { IntegrationRenderer } from "@ecopages/core/route-renderer/integration-renderer";
+import {
+  IntegrationRenderer
+} from "@ecopages/core/route-renderer/integration-renderer";
 import { createMarkupNodeLike } from "@ecopages/jsx";
 import { renderToString, withServerCustomElementRenderHook } from "@ecopages/jsx/server";
 import { ECOPAGES_JSX_PLUGIN_NAME } from "./ecopages-jsx.plugin.js";
-let radiantLightDomShimInstallPromise;
-async function ensureRadiantLightDomShimInstalled() {
-  if (!radiantLightDomShimInstallPromise) {
-    radiantLightDomShimInstallPromise = import("@ecopages/radiant/server/light-dom-shim").then((module) => {
-      module.installLightDomShim();
-    }).then(() => void 0);
-  }
-  await radiantLightDomShimInstallPromise;
-}
-const isEcoFunctionComponent = (component) => {
-  return typeof component === "function";
-};
-const renderComponent = async (component, props) => {
-  return await component(props);
-};
-const createEcoMeta = (file) => ({
-  id: String(rapidhash(file)),
-  file,
-  integration: ECOPAGES_JSX_PLUGIN_NAME
-});
-const wrapMdxPage = (page, {
-  config,
-  metadata
-}) => {
-  const wrappedPage = (async (props) => renderComponent(page, props));
-  wrappedPage.config = config;
-  if (metadata) {
-    wrappedPage.metadata = metadata;
-  }
-  return wrappedPage;
-};
 class EcopagesJsxRenderer extends IntegrationRenderer {
   name = ECOPAGES_JSX_PLUGIN_NAME;
-  static mdxExtensions = [".mdx"];
-  intrinsicCustomElementAssets = /* @__PURE__ */ new Map();
+  static radiantLightDomShimInstallPromise;
+  intrinsicCustomElementAssets;
   collectedAssetFrames = [];
-  radiantSsrEnabled = false;
-  async resolveQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken) {
+  mdxExtensions;
+  radiantSsrEnabled;
+  /**
+   * Re-renders queued JSX children inside the owning renderer so nested custom
+   * elements and queued foreign boundaries contribute assets to the same frame.
+   */
+  async renderQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken) {
     if (children === void 0) {
       return { assets: [] };
     }
@@ -59,18 +35,25 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       html
     };
   }
-  async resolveQueuedBoundaryHtml(html, runtimeContext) {
+  /**
+   * Resolves queued foreign boundaries after JSX has been stringified.
+   *
+   * JSX content needs one extra render pass because child boundaries may emit
+   * additional browser assets while also replacing placeholder tokens.
+   */
+  async resolveOwnedBoundaryHtml(html, runtimeContext) {
     return this.resolveRendererOwnedQueuedBoundaryHtml({
       html,
       runtimeContext,
       queueLabel: "Ecopages JSX",
-      renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.resolveQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken)
+      renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.renderQueuedBoundaryChildren(children, queuedResolutionsByToken, resolveToken)
     });
   }
   constructor({
     appConfig,
     assetProcessingService,
     resolvedIntegrationDependencies,
+    jsxConfig,
     runtimeOrigin
   }) {
     super({
@@ -79,42 +62,20 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       resolvedIntegrationDependencies,
       runtimeOrigin
     });
+    this.intrinsicCustomElementAssets = jsxConfig?.intrinsicCustomElementAssets ?? /* @__PURE__ */ new Map();
+    this.mdxExtensions = jsxConfig?.mdxExtensions ?? [".mdx"];
+    this.radiantSsrEnabled = jsxConfig?.radiantSsrEnabled ?? false;
   }
   /** Returns whether the requested page file should be treated as MDX. */
   isMdxFile(filePath) {
-    return EcopagesJsxRenderer.mdxExtensions.some((ext) => filePath.endsWith(ext));
-  }
-  /**
-   * Supplies the intrinsic custom-element assets discovered by the plugin so
-   * component renders can attach the correct client scripts.
-   */
-  setIntrinsicCustomElementAssets(assetsByTagName) {
-    this.intrinsicCustomElementAssets = assetsByTagName;
-  }
-  /** Enables the Radiant SSR light-DOM shim for this renderer instance. */
-  setRadiantSsrEnabled(enabled) {
-    this.radiantSsrEnabled = enabled;
+    return this.mdxExtensions.some((ext) => filePath.endsWith(ext));
   }
-  async importPageFile(file) {
-    const module = await super.importPageFile(file);
-    if (!this.isMdxFile(file)) {
-      return module;
+  async importPageFile(file, options) {
+    if (this.radiantSsrEnabled) {
+      await this.ensureRadiantLightDomShimInstalled();
     }
-    const Page = module.default;
-    const normalizedConfig = {
-      ...module.config ?? Page.config ?? {},
-      ...module.layout ? { layout: module.layout } : {},
-      __eco: module.config?.__eco ?? Page.config?.__eco ?? createEcoMeta(file)
-    };
-    const wrappedPage = wrapMdxPage(Page, {
-      config: normalizedConfig,
-      metadata: module.getMetadata ?? Page.metadata
-    });
-    return {
-      ...module,
-      default: wrappedPage,
-      config: normalizedConfig
-    };
+    const module = await super.importPageFile(file, options);
+    return this.isMdxFile(file) ? this.normalizeMdxPageModule(file, module) : module;
   }
   async render(options) {
     try {
@@ -144,26 +105,19 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   async renderComponent(input) {
     const assetFrame = this.beginCollectedAssetFrame();
     try {
-      if (!isEcoFunctionComponent(input.component)) {
+      if (!this.isFunctionComponent(input.component)) {
         throw new TypeError("JSX renderer expected a callable component.");
       }
-      let props = input.props;
-      if (input.children !== void 0) {
-        props = {
-          ...input.props,
-          children: typeof input.children === "string" ? createMarkupNodeLike(input.children) : input.children
-        };
-      }
       const content = await this.renderEcoComponent(
         input.component,
-        props
+        this.createComponentProps(input)
       );
       const rendered = await this.renderJsx(content);
-      const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(
+      const queuedBoundaryResolution = await this.resolveOwnedBoundaryHtml(
         rendered.html,
         this.getQueuedBoundaryRuntime(input)
       );
-      const componentAssets = input.component.config?.dependencies && typeof this.assetProcessingService?.processDependencies === "function" ? await this.processComponentDependencies([input.component]) : [];
+      const componentAssets = await this.collectComponentAssets(input.component);
       const assets = this.htmlTransformer.dedupeProcessedAssets([
         ...this.endCollectedAssetFrame(assetFrame),
         ...queuedBoundaryResolution.assets,
@@ -189,7 +143,7 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   }
   async renderToResponse(view, props, ctx) {
     try {
-      if (!isEcoFunctionComponent(view)) {
+      if (!this.isFunctionComponent(view)) {
         throw new TypeError("JSX renderer expected a callable view component.");
       }
       return await this.renderViewWithDocumentShell({
@@ -202,6 +156,30 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       throw this.createRenderError("Error rendering view", error);
     }
   }
+  /**
+   * Normalizes MDX modules into the same page contract as JSX route modules.
+   *
+   * MDX files export page metadata alongside generated component code, so the
+   * renderer folds those exports back into the Ecopages component shape before
+   * any layout or document-shell logic runs.
+   */
+  normalizeMdxPageModule(file, module) {
+    const Page = module.default;
+    const normalizedConfig = {
+      ...module.config ?? Page.config ?? {},
+      ...module.layout ? { layout: module.layout } : {},
+      __eco: module.config?.__eco ?? Page.config?.__eco ?? this.createEcoMeta(file)
+    };
+    const wrappedPage = this.wrapMdxPage(Page, {
+      config: normalizedConfig,
+      metadata: module.getMetadata ?? Page.metadata
+    });
+    return {
+      ...module,
+      default: wrappedPage,
+      config: normalizedConfig
+    };
+  }
   beginCollectedAssetFrame() {
     const frame = [];
     this.collectedAssetFrames.push(frame);
@@ -216,7 +194,7 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   }
   async renderJsx(value) {
     if (this.radiantSsrEnabled) {
-      await ensureRadiantLightDomShimInstalled();
+      await this.ensureRadiantLightDomShimInstalled();
     }
     const collectedAssets = [];
     const html = withServerCustomElementRenderHook(
@@ -235,12 +213,12 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
   }
   async renderEcoComponent(component, props) {
     if (this.radiantSsrEnabled) {
-      await ensureRadiantLightDomShimInstalled();
+      await this.ensureRadiantLightDomShimInstalled();
     }
     const collectedAssets = [];
     const rendered = await withServerCustomElementRenderHook(
       this.createIntrinsicCustomElementRenderHook(collectedAssets),
-      () => renderComponent(component, props)
+      () => this.invokeComponent(component, props)
     );
     const activeFrame = this.collectedAssetFrames[this.collectedAssetFrames.length - 1];
     if (activeFrame) {
@@ -248,6 +226,53 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
     }
     return rendered;
   }
+  async ensureRadiantLightDomShimInstalled() {
+    if (!EcopagesJsxRenderer.radiantLightDomShimInstallPromise) {
+      EcopagesJsxRenderer.radiantLightDomShimInstallPromise = import("@ecopages/radiant/server/light-dom-shim").then((module) => {
+        module.installLightDomShim();
+      }).then(() => void 0);
+    }
+    await EcopagesJsxRenderer.radiantLightDomShimInstallPromise;
+  }
+  isFunctionComponent(component) {
+    return typeof component === "function";
+  }
+  createComponentProps(input) {
+    if (input.children === void 0) {
+      return input.props;
+    }
+    return {
+      ...input.props,
+      children: typeof input.children === "string" ? createMarkupNodeLike(input.children) : input.children
+    };
+  }
+  async collectComponentAssets(component) {
+    if (!component.config?.dependencies || typeof this.assetProcessingService?.processDependencies !== "function") {
+      return [];
+    }
+    return this.processComponentDependencies([component]);
+  }
+  async invokeComponent(component, props) {
+    return await component(props);
+  }
+  createEcoMeta(file) {
+    return {
+      id: String(rapidhash(file)),
+      file,
+      integration: ECOPAGES_JSX_PLUGIN_NAME
+    };
+  }
+  wrapMdxPage(page, {
+    config,
+    metadata
+  }) {
+    const wrappedPage = (async (props) => this.invokeComponent(page, props));
+    wrappedPage.config = config;
+    if (metadata) {
+      wrappedPage.metadata = metadata;
+    }
+    return wrappedPage;
+  }
   createIntrinsicCustomElementRenderHook(target) {
     return ({ tagName }) => {
       const assets = this.intrinsicCustomElementAssets.get(tagName);

package/src/ecopages-jsx.plugin.d.ts

@@ -1,14 +1,9 @@
-import type { CompileOptions } from '@mdx-js/mdx';
 import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import { IntegrationPlugin, type IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
+import { IntegrationPlugin } from '@ecopages/core/plugins/integration-plugin';
 import type { JsxRenderable } from '@ecopages/jsx';
 import { EcopagesJsxRenderer } from './ecopages-jsx-renderer.js';
-type MdxPluginList = NonNullable<CompileOptions['remarkPlugins']>;
-type MdxCompileOptions = Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime' | 'remarkPlugins' | 'rehypePlugins' | 'recmaPlugins'> & {
-    remarkPlugins?: MdxPluginList;
-    rehypePlugins?: MdxPluginList;
-    recmaPlugins?: MdxPluginList;
-};
+import type { EcopagesJsxPluginOptions } from './ecopages-jsx.types.js';
+export type { EcopagesJsxMdxCompileOptions, EcopagesJsxMdxOptions, EcopagesJsxPluginOptions, EcopagesJsxRendererConfig, } from './ecopages-jsx.types.js';
 /**
  * Stable integration name shared by the JSX plugin and renderer.
  *
@@ -16,46 +11,10 @@ type MdxCompileOptions = Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime' |
  * cross-integration component boundaries.
  */
 export declare const ECOPAGES_JSX_PLUGIN_NAME = "ecopages-jsx";
-/**
- * MDX configuration for the JSX integration.
- *
- * Mirrors Ecopages' built-in combined integration pattern where a single
- * JSX-capable plugin can own both `.tsx` and `.mdx` route files.
- */
-export type EcopagesJsxMdxOptions = {
-    /** Enables MDX file handling inside the JSX integration. */
-    enabled: boolean;
-    /** Additional MDX compiler options. JSX runtime fields are managed by the integration. */
-    compilerOptions?: MdxCompileOptions;
-    /** Extra remark plugins appended to `compilerOptions.remarkPlugins`. */
-    remarkPlugins?: MdxPluginList;
-    /** Extra rehype plugins appended to `compilerOptions.rehypePlugins`. */
-    rehypePlugins?: MdxPluginList;
-    /** Extra recma plugins appended to `compilerOptions.recmaPlugins`. */
-    recmaPlugins?: MdxPluginList;
-    /** Custom file extensions to treat as MDX. */
-    extensions?: string[];
-};
-/** Options for the JSX integration plugin. */
-export type EcopagesJsxPluginOptions = Omit<IntegrationPluginConfig, 'name' | 'extensions'> & {
-    /** Optional JSX route extensions. Defaults to `.tsx`. */
-    extensions?: string[];
-    /**
-     * Whether to include the `@ecopages/radiant` and `@ecopages/signals` vendor
-     * bundles and bare-specifier mappings.
-     *
-     * Set to `false` when pages do not use Radiant web components.
-     * @default true
-     */
-    radiant?: boolean;
-    /** Optional MDX integration configuration. */
-    mdx?: EcopagesJsxMdxOptions;
-};
 /** JSX integration plugin for Ecopages, supporting `.tsx` templates and optional Radiant web components. */
 export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable> {
-    /** Renderer implementation used for JSX and MDX routes. */
-    renderer: IntegrationPlugin<JsxRenderable>["renderer"];
-    private intrinsicCustomElementAssets;
+    renderer: typeof EcopagesJsxRenderer;
+    private customElementAssets;
     private includeRadiant;
     private mdxEnabled;
     private mdxCompilerOptions?;
@@ -79,13 +38,9 @@ export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable>
      * Creates the renderer instance and attaches the discovered intrinsic custom
      * element assets before the renderer handles any requests.
      */
-    initializeRenderer(): EcopagesJsxRenderer;
-    /**
-     * Creates a JSX integration plugin.
-     *
-     * When MDX is enabled, the plugin also claims the configured MDX extensions
-     * and prepares compiler options around the shared `@ecopages/jsx` runtime.
-     */
+    initializeRenderer(options?: {
+        rendererModules?: unknown;
+    }): EcopagesJsxRenderer;
     constructor(options?: EcopagesJsxPluginOptions);
     /** Ensures MDX build hooks are ready before Ecopages collects contributions. */
     prepareBuildContributions(): Promise<void>;
@@ -95,14 +50,25 @@ export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable>
      */
     setup(): Promise<void>;
     private ensureMdxLoaderPlugin;
-    private setupMdxBunPlugin;
-    private buildIntrinsicCustomElementAssetRegistry;
-    private collectScriptEntryFiles;
-    private resolveIntrinsicCustomElementAsset;
-    private extractIntrinsicCustomElementTagNames;
+    /**
+     * Registers Bun's MDX loader at runtime setup time.
+     *
+     * Build-time contribution collection may run where Bun is absent, so
+     * this hook stays isolated from manifest preparation.
+     */
+    private registerMdxBunPlugin;
+    /**
+     * Scans `src/` for custom-element entry scripts and pre-resolves their assets.
+     *
+     * The renderer's server-side custom-element hook relies on this registry to
+     * attach browser scripts without per-render file-system lookups.
+     */
+    private buildCustomElementRegistry;
+    private collectScriptEntries;
+    private resolveCustomElementAsset;
+    private extractCustomElementTagNames;
 }
 /**
- * Creates the JSX integration plugin.
+ * Creates the JSX integration plugin with resolved defaults.
  */
 export declare const ecopagesJsxPlugin: (options?: EcopagesJsxPluginOptions) => EcopagesJsxPlugin;
-export {};

package/src/ecopages-jsx.plugin.js

@@ -5,14 +5,44 @@ import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
 import { VFile } from "vfile";
 import { EcopagesJsxRenderer } from "./ecopages-jsx-renderer.js";
 import { JsxRuntimeBundleService } from "./services/jsx-runtime-bundle.service.js";
+const ECOPAGES_JSX_PLUGIN_NAME = "ecopages-jsx";
+const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 const mergePluginLists = (...lists) => {
   const merged = lists.flatMap((list) => list ? [...list] : []);
   return merged.length > 0 ? merged : void 0;
 };
-const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const createMdxExtensionFilter = (extensions, options) => {
+  const escaped = extensions.map(escapeRegex);
+  const suffix = options?.allowQueryString ? "(\\?.*)?$" : "$";
+  return new RegExp(`(${escaped.join("|")})${suffix}`);
+};
+const appendMdxExtensions = (target, mdxExtensions) => {
+  for (const ext of mdxExtensions) {
+    if (!target.includes(ext)) {
+      target.push(ext);
+    }
+  }
+};
+const resolveMdxCompilerOptions = (mdxOptions) => {
+  const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = mdxOptions;
+  const resolved = {
+    format: "detect",
+    outputFormat: "program",
+    ...compilerOptions,
+    jsxImportSource: "@ecopages/jsx",
+    jsxRuntime: "automatic",
+    development: process.env.NODE_ENV === "development"
+  };
+  const mergedRemark = mergePluginLists(compilerOptions?.remarkPlugins, remarkPlugins);
+  const mergedRehype = mergePluginLists(compilerOptions?.rehypePlugins, rehypePlugins);
+  const mergedRecma = mergePluginLists(compilerOptions?.recmaPlugins, recmaPlugins);
+  if (mergedRemark) resolved.remarkPlugins = mergedRemark;
+  if (mergedRehype) resolved.rehypePlugins = mergedRehype;
+  if (mergedRecma) resolved.recmaPlugins = mergedRecma;
+  return resolved;
+};
 const createMdxLoaderPlugin = (compilerOptions, extensions) => {
-  const escapedExts = extensions.map(escapeRegex);
-  const filter = new RegExp(`(${escapedExts.join("|")})(\\?.*)?$`);
+  const filter = createMdxExtensionFilter(extensions, { allowQueryString: true });
   return {
     name: "ecopages-jsx-mdx-loader",
     setup(build) {
@@ -30,11 +60,26 @@ const createMdxLoaderPlugin = (compilerOptions, extensions) => {
     }
   };
 };
-const ECOPAGES_JSX_PLUGIN_NAME = "ecopages-jsx";
+const resolvePluginOptions = (options) => {
+  const { extensions: userExtensions, radiant, mdx, ...baseConfig } = options ?? {};
+  const extensions = [...userExtensions ?? [".tsx"]];
+  const mdxExtensions = mdx?.extensions ?? [".mdx"];
+  const mdxEnabled = mdx?.enabled ?? false;
+  if (mdxEnabled) {
+    appendMdxExtensions(extensions, mdxExtensions);
+  }
+  return {
+    ...baseConfig,
+    extensions,
+    includeRadiant: radiant ?? true,
+    mdxEnabled,
+    mdxExtensions,
+    mdxCompilerOptions: mdxEnabled && mdx ? resolveMdxCompilerOptions(mdx) : void 0
+  };
+};
 class EcopagesJsxPlugin extends IntegrationPlugin {
-  /** Renderer implementation used for JSX and MDX routes. */
   renderer = EcopagesJsxRenderer;
-  intrinsicCustomElementAssets = /* @__PURE__ */ new Map();
+  customElementAssets = /* @__PURE__ */ new Map();
   includeRadiant;
   mdxEnabled;
   mdxCompilerOptions;
@@ -66,65 +111,32 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
    * Creates the renderer instance and attaches the discovered intrinsic custom
    * element assets before the renderer handles any requests.
    */
-  initializeRenderer() {
-    const renderer = super.initializeRenderer();
-    renderer.setIntrinsicCustomElementAssets(this.intrinsicCustomElementAssets);
-    renderer.setRadiantSsrEnabled(this.includeRadiant);
-    return renderer;
+  initializeRenderer(options) {
+    const rendererConfig = {
+      intrinsicCustomElementAssets: this.customElementAssets,
+      mdxExtensions: this.mdxExtensions,
+      radiantSsrEnabled: this.includeRadiant
+    };
+    const renderer = new this.renderer({
+      ...this.createRendererOptions(options),
+      jsxConfig: rendererConfig
+    });
+    return this.attachRendererRuntimeServices(renderer);
   }
-  /**
-   * Creates a JSX integration plugin.
-   *
-   * When MDX is enabled, the plugin also claims the configured MDX extensions
-   * and prepares compiler options around the shared `@ecopages/jsx` runtime.
-   */
   constructor(options) {
-    const { extensions: _ignoredExtensions, ...restOptions } = options ?? {};
-    const extensions = [...options?.extensions ?? [".tsx"]];
-    const mdxExtensions = options?.mdx?.extensions ?? [".mdx"];
-    const includeRadiant = options?.radiant ?? true;
-    if (options?.mdx?.enabled) {
-      for (const extension of mdxExtensions) {
-        if (!extensions.includes(extension)) {
-          extensions.push(extension);
-        }
-      }
-    }
+    const config = resolvePluginOptions(options);
+    const { extensions, includeRadiant, mdxEnabled, mdxExtensions, mdxCompilerOptions, ...baseConfig } = config;
     super({
       name: ECOPAGES_JSX_PLUGIN_NAME,
       extensions,
       jsxImportSource: "@ecopages/jsx",
-      ...restOptions
+      ...baseConfig
     });
     this.includeRadiant = includeRadiant;
     this.runtimeBundleService = new JsxRuntimeBundleService({ radiant: includeRadiant });
-    this.mdxEnabled = options?.mdx?.enabled ?? false;
+    this.mdxEnabled = mdxEnabled;
     this.mdxExtensions = mdxExtensions;
-    EcopagesJsxRenderer.mdxExtensions = this.mdxExtensions;
-    if (this.mdxEnabled) {
-      const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = options?.mdx ?? {};
-      const resolvedCompilerOptions = {
-        format: "detect",
-        outputFormat: "program",
-        ...compilerOptions,
-        jsxImportSource: "@ecopages/jsx",
-        jsxRuntime: "automatic",
-        development: process.env.NODE_ENV === "development"
-      };
-      const mergedRemarkPlugins = mergePluginLists(compilerOptions?.remarkPlugins, remarkPlugins);
-      const mergedRehypePlugins = mergePluginLists(compilerOptions?.rehypePlugins, rehypePlugins);
-      const mergedRecmaPlugins = mergePluginLists(compilerOptions?.recmaPlugins, recmaPlugins);
-      if (mergedRemarkPlugins) {
-        resolvedCompilerOptions.remarkPlugins = mergedRemarkPlugins;
-      }
-      if (mergedRehypePlugins) {
-        resolvedCompilerOptions.rehypePlugins = mergedRehypePlugins;
-      }
-      if (mergedRecmaPlugins) {
-        resolvedCompilerOptions.recmaPlugins = mergedRecmaPlugins;
-      }
-      this.mdxCompilerOptions = resolvedCompilerOptions;
-    }
+    this.mdxCompilerOptions = mdxCompilerOptions;
   }
   /** Ensures MDX build hooks are ready before Ecopages collects contributions. */
   async prepareBuildContributions() {
@@ -144,9 +156,9 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
   async setup() {
     this.ensureMdxLoaderPlugin();
     if (typeof Bun !== "undefined" && this.mdxEnabled && this.mdxCompilerOptions) {
-      await this.setupMdxBunPlugin();
+      await this.registerMdxBunPlugin();
     }
-    await this.buildIntrinsicCustomElementAssetRegistry();
+    await this.buildCustomElementRegistry();
     await super.setup();
   }
   ensureMdxLoaderPlugin() {
@@ -155,13 +167,18 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
     }
     this.mdxLoaderPlugin = createMdxLoaderPlugin(this.mdxCompilerOptions, this.mdxExtensions);
   }
-  async setupMdxBunPlugin() {
-    if (typeof Bun === "undefined" || !this.mdxEnabled || !this.mdxCompilerOptions) {
+  /**
+   * Registers Bun's MDX loader at runtime setup time.
+   *
+   * Build-time contribution collection may run where Bun is absent, so
+   * this hook stays isolated from manifest preparation.
+   */
+  async registerMdxBunPlugin() {
+    if (typeof Bun === "undefined" || !this.mdxCompilerOptions) {
       return;
     }
     const compilerOptions = this.mdxCompilerOptions;
-    const escapedExts = this.mdxExtensions.map(escapeRegex);
-    const filter = new RegExp(`(${escapedExts.join("|")})$`);
+    const filter = createMdxExtensionFilter(this.mdxExtensions);
     Bun.plugin({
       name: "ecopages-jsx-mdx",
       setup(build) {
@@ -174,57 +191,67 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
       }
     });
   }
-  async buildIntrinsicCustomElementAssetRegistry() {
+  /**
+   * Scans `src/` for custom-element entry scripts and pre-resolves their assets.
+   *
+   * The renderer's server-side custom-element hook relies on this registry to
+   * attach browser scripts without per-render file-system lookups.
+   */
+  async buildCustomElementRegistry() {
     if (!this.appConfig || !this.assetProcessingService) {
       return;
     }
-    this.intrinsicCustomElementAssets.clear();
-    const scriptFiles = await this.collectScriptEntryFiles(this.appConfig.absolutePaths.srcDir);
+    this.customElementAssets.clear();
+    const scriptFiles = await this.collectScriptEntries(this.appConfig.absolutePaths.srcDir);
     for (const scriptFile of scriptFiles) {
-      const tagNames = await this.extractIntrinsicCustomElementTagNames(scriptFile);
+      const tagNames = await this.extractCustomElementTagNames(scriptFile);
       if (tagNames.length === 0) {
         continue;
       }
-      const processedAsset = await this.resolveIntrinsicCustomElementAsset(scriptFile);
-      if (!processedAsset) {
+      const asset = await this.resolveCustomElementAsset(scriptFile);
+      if (!asset) {
         continue;
       }
       for (const tagName of tagNames) {
-        this.intrinsicCustomElementAssets.set(tagName, [processedAsset]);
+        this.customElementAssets.set(tagName, [asset]);
       }
     }
   }
-  async collectScriptEntryFiles(directory) {
-    const directoryEntries = await readdir(directory, { withFileTypes: true });
-    const scriptFiles = [];
-    for (const directoryEntry of directoryEntries) {
-      const entryPath = path.join(directory, directoryEntry.name);
-      if (directoryEntry.isDirectory()) {
-        scriptFiles.push(...await this.collectScriptEntryFiles(entryPath));
+  async collectScriptEntries(directory) {
+    const entries = await readdir(directory, { withFileTypes: true });
+    const scripts = [];
+    for (const entry of entries) {
+      const entryPath = path.join(directory, entry.name);
+      if (entry.isDirectory()) {
+        scripts.push(...await this.collectScriptEntries(entryPath));
         continue;
       }
-      if (/\.script\.(?:ts|tsx)$/.test(directoryEntry.name)) {
-        scriptFiles.push(entryPath);
+      if (/\.script\.(?:ts|tsx)$/.test(entry.name)) {
+        scripts.push(entryPath);
       }
     }
-    return scriptFiles;
+    return scripts;
   }
-  async resolveIntrinsicCustomElementAsset(scriptFile) {
+  async resolveCustomElementAsset(scriptFile) {
     if (!this.assetProcessingService) {
       return void 0;
     }
-    const [processedAsset] = await this.assetProcessingService.processDependencies(
+    const [asset] = await this.assetProcessingService.processDependencies(
       [
         AssetFactory.createFileScript({
           filepath: scriptFile,
-          position: "head"
+          position: "head",
+          attributes: {
+            type: "module",
+            defer: ""
+          }
         })
       ],
-      `${this.name}:intrinsic-custom-elements:${scriptFile}`
+      `${this.name}:custom-elements:${scriptFile}`
     );
-    return processedAsset;
+    return asset;
   }
-  async extractIntrinsicCustomElementTagNames(scriptFile) {
+  async extractCustomElementTagNames(scriptFile) {
     const source = await readFile(scriptFile, "utf8");
     const tagNames = /* @__PURE__ */ new Set();
     for (const match of source.matchAll(/@customElement\(\s*['"]([^'"]+)['"]/g)) {
@@ -233,6 +260,12 @@ class EcopagesJsxPlugin extends IntegrationPlugin {
         tagNames.add(tagName);
       }
     }
+    for (const match of source.matchAll(/customElement\(\s*['"]([^'"]+)['"]\s*\)\s*\(/g)) {
+      const tagName = match[1];
+      if (tagName) {
+        tagNames.add(tagName);
+      }
+    }
     return [...tagNames];
   }
 }

package/src/ecopages-jsx.types.d.ts

@@ -0,0 +1,59 @@
+import type { CompileOptions } from '@mdx-js/mdx';
+import type { IntegrationPluginConfig } from '@ecopages/core/plugins/integration-plugin';
+import type { AssetDefinition, AssetProcessingService, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import type { EcoPagesAppConfig } from '@ecopages/core/internal-types';
+type MdxPluginList = NonNullable<CompileOptions['remarkPlugins']>;
+export type EcopagesJsxMdxCompileOptions = Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime' | 'remarkPlugins' | 'rehypePlugins' | 'recmaPlugins'> & {
+    remarkPlugins?: MdxPluginList;
+    rehypePlugins?: MdxPluginList;
+    recmaPlugins?: MdxPluginList;
+};
+/**
+ * MDX configuration for the JSX integration.
+ *
+ * Mirrors Ecopages' built-in combined integration pattern where a single
+ * JSX-capable plugin can own both `.tsx` and `.mdx` route files.
+ */
+export type EcopagesJsxMdxOptions = {
+    /** Enables MDX file handling inside the JSX integration. */
+    enabled: boolean;
+    /** Additional MDX compiler options. JSX runtime fields are managed by the integration. */
+    compilerOptions?: EcopagesJsxMdxCompileOptions;
+    /** Extra remark plugins appended to `compilerOptions.remarkPlugins`. */
+    remarkPlugins?: MdxPluginList;
+    /** Extra rehype plugins appended to `compilerOptions.rehypePlugins`. */
+    rehypePlugins?: MdxPluginList;
+    /** Extra recma plugins appended to `compilerOptions.recmaPlugins`. */
+    recmaPlugins?: MdxPluginList;
+    /** Custom file extensions to treat as MDX. */
+    extensions?: string[];
+};
+/** Options for the JSX integration plugin. */
+export type EcopagesJsxPluginOptions = Omit<IntegrationPluginConfig, 'name' | 'extensions'> & {
+    /** Optional JSX route extensions. Defaults to `.tsx`. */
+    extensions?: string[];
+    /**
+     * Whether to include the `@ecopages/radiant` and `@ecopages/signals` vendor
+     * bundles and bare-specifier mappings.
+     *
+     * Set to `false` when pages do not use Radiant web components.
+     * @default true
+     */
+    radiant?: boolean;
+    /** Optional MDX integration configuration. */
+    mdx?: EcopagesJsxMdxOptions;
+};
+export type EcopagesJsxRendererConfig = {
+    intrinsicCustomElementAssets?: Map<string, readonly ProcessedAsset[]>;
+    mdxExtensions?: string[];
+    radiantSsrEnabled?: boolean;
+};
+export type EcopagesJsxRendererOptions = {
+    appConfig: EcoPagesAppConfig;
+    assetProcessingService: AssetProcessingService;
+    resolvedIntegrationDependencies: ProcessedAsset[];
+    rendererModules?: unknown;
+    runtimeOrigin: string;
+    jsxConfig?: EcopagesJsxRendererConfig;
+};
+export type { AssetDefinition };

package/src/services/jsx-runtime-bundle.service.d.ts

@@ -17,6 +17,7 @@ export interface JsxRuntimeBundleServiceConfig {
 export declare class JsxRuntimeBundleService {
     private readonly config;
     private cachedSpecifierMap;
+    private cachedJsxEntryModulePath;
     private cachedRadiantEntryModulePath;
     constructor(config: JsxRuntimeBundleServiceConfig);
     setRootDir(rootDir: string | undefined): void;
@@ -44,8 +45,9 @@ export declare class JsxRuntimeBundleService {
      */
     getDependencies(): Promise<AssetDefinition[]>;
     private getOrCreateSpecifierMap;
+    private getOrCreateJsxEntryModulePath;
     private getRadiantBrowserRuntimeSpecifiers;
     private getRadiantBrowserRuntimeModules;
-    private resolveRadiantExportModulePath;
+    private resolvePackageExportModulePath;
     private getOrCreateRadiantEntryModulePath;
 }

package/src/services/jsx-runtime-bundle.service.js

@@ -60,6 +60,7 @@ function findPackageManifestPath(packageName) {
 class JsxRuntimeBundleService {
   config;
   cachedSpecifierMap;
+  cachedJsxEntryModulePath;
   cachedRadiantEntryModulePath;
   constructor(config) {
     this.config = config;
@@ -97,6 +98,7 @@ class JsxRuntimeBundleService {
    */
   async getDependencies() {
     const specifierMap = await this.getSpecifierMap();
+    const jsxEntryModulePath = await this.getOrCreateJsxEntryModulePath();
     const deps = [
       AssetFactory.createInlineContentScript({
         position: "head",
@@ -105,7 +107,7 @@ class JsxRuntimeBundleService {
         attributes: { type: "importmap" }
       }),
       createBrowserRuntimeScriptAsset({
-        importPath: "@ecopages/jsx",
+        importPath: jsxEntryModulePath,
         name: "ecopages-jsx-esm",
         fileName: VENDOR_FILE_NAMES.jsx
       })
@@ -129,7 +131,6 @@ class JsxRuntimeBundleService {
     const jsxVendorUrl = buildBrowserRuntimeAssetUrl(VENDOR_FILE_NAMES.jsx);
     const specifierMap = {
       "@ecopages/jsx": jsxVendorUrl,
-      "@ecopages/jsx/server": jsxVendorUrl,
       "@ecopages/jsx/client": jsxVendorUrl,
       "@ecopages/jsx/jsx-runtime": jsxVendorUrl,
       "@ecopages/jsx/jsx-dev-runtime": jsxVendorUrl
@@ -150,6 +151,28 @@ class JsxRuntimeBundleService {
     this.cachedSpecifierMap = specifierMap;
     return specifierMap;
   }
+  async getOrCreateJsxEntryModulePath() {
+    if (this.cachedJsxEntryModulePath) {
+      return this.cachedJsxEntryModulePath;
+    }
+    const rootDir = this.config.rootDir ?? process.cwd();
+    const artifactsDir = path.join(rootDir, "node_modules", ".cache", "ecopages-browser-runtime");
+    const filePath = path.join(artifactsDir, "ecopages-jsx-esm-entry.mjs");
+    const manifestPath = findPackageManifestPath("@ecopages/jsx");
+    const packageDir = path.dirname(realpathSync(manifestPath));
+    const jsxPkg = JSON.parse(readFileSync(manifestPath, "utf8"));
+    const jsxModulePath = this.resolvePackageExportModulePath(
+      packageDir,
+      ".",
+      jsxPkg.exports?.["."]
+    );
+    const relativeModulePath = path.relative(artifactsDir, jsxModulePath).split(path.sep).join("/");
+    const entryImportPath = relativeModulePath.startsWith(".") ? relativeModulePath : `./${relativeModulePath}`;
+    mkdirSync(artifactsDir, { recursive: true });
+    writeFileSync(filePath, [`export * from '${entryImportPath}';`].join("\n"), "utf8");
+    this.cachedJsxEntryModulePath = filePath;
+    return filePath;
+  }
   getRadiantBrowserRuntimeSpecifiers() {
     return this.getRadiantBrowserRuntimeModules().map(({ exportKey }) => `@ecopages/radiant${exportKey.slice(1)}`);
   }
@@ -159,10 +182,14 @@ class JsxRuntimeBundleService {
     const radiantPkg = JSON.parse(readFileSync(manifestPath, "utf8"));
     return Object.entries(radiantPkg.exports ?? {}).filter(([key]) => isBrowserRuntimeRadiantSpecifier(key) && key !== ".").sort(([left], [right]) => left.localeCompare(right)).map(([exportKey, exportTarget]) => ({
       exportKey,
-      modulePath: this.resolveRadiantExportModulePath(packageDir, exportKey, exportTarget)
+      modulePath: this.resolvePackageExportModulePath(
+        packageDir,
+        exportKey,
+        exportTarget
+      )
     })).filter((module) => existsSync(module.modulePath));
   }
-  resolveRadiantExportModulePath(packageDir, exportKey, exportTarget) {
+  resolvePackageExportModulePath(packageDir, exportKey, exportTarget) {
     if (typeof exportTarget === "string") {
       return path.resolve(packageDir, exportTarget);
     }