@ecopages/ecopages-jsx 0.2.0-beta.1 → 0.2.0-beta.11

package/node_modules/@ecopages/mdx-core/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@ecopages/mdx-core",
+  "version": "0.2.0-beta.11",
+  "description": "Shared MDX loader utilities for Ecopages integrations",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./src/index.js",
+      "types": "./src/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@ecopages/core": "0.2.0-beta.11",
+    "@mdx-js/mdx": "^3.1.0"
+  },
+  "dependencies": {
+    "source-map": "^0.7.6",
+    "vfile": "^6.0.3"
+  },
+  "types": "./src/index.d.ts"
+}

package/node_modules/@ecopages/mdx-core/src/index.d.ts

@@ -0,0 +1,2 @@
+export { createMdxLoaderPlugin, type CreateMdxLoaderPluginOptions } from './mdx-loader-plugin.js';
+export { appendMdxExtensions, createMdxExtensionFilter, mergePluginLists, resolveCompileFormat, resolveLoaderExtensions, resolveMdxCompilerOptions, type MdxCompilerOptionsInput, } from './mdx-utils.js';

package/node_modules/@ecopages/mdx-core/src/index.js

@@ -0,0 +1,18 @@
+import { createMdxLoaderPlugin } from "./mdx-loader-plugin.js";
+import {
+  appendMdxExtensions,
+  createMdxExtensionFilter,
+  mergePluginLists,
+  resolveCompileFormat,
+  resolveLoaderExtensions,
+  resolveMdxCompilerOptions
+} from "./mdx-utils.js";
+export {
+  appendMdxExtensions,
+  createMdxExtensionFilter,
+  createMdxLoaderPlugin,
+  mergePluginLists,
+  resolveCompileFormat,
+  resolveLoaderExtensions,
+  resolveMdxCompilerOptions
+};

package/node_modules/@ecopages/mdx-core/src/mdx-loader-plugin.d.ts

@@ -0,0 +1,11 @@
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
+import { type CompileOptions } from '@mdx-js/mdx';
+export interface CreateMdxLoaderPluginOptions {
+    name: string;
+    compilerOptions?: CompileOptions;
+    extensions?: string[];
+    defaultMdExtensions?: string[];
+    includeSourceMap?: boolean;
+    loader?: 'js' | 'jsx';
+}
+export declare function createMdxLoaderPlugin(options: CreateMdxLoaderPluginOptions): EcoBuildPlugin;

package/node_modules/@ecopages/mdx-core/src/mdx-loader-plugin.js

@@ -0,0 +1,44 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { compile } from "@mdx-js/mdx";
+import sourceMap from "source-map";
+import { VFile } from "vfile";
+import { createMdxExtensionFilter, resolveCompileFormat, resolveLoaderExtensions } from "./mdx-utils.js";
+function createMdxLoaderPlugin(options) {
+  const {
+    name,
+    compilerOptions,
+    extensions = resolveLoaderExtensions(compilerOptions, {
+      defaultMdExtensions: options.defaultMdExtensions
+    }),
+    includeSourceMap = true,
+    loader = compilerOptions?.jsx ? "jsx" : "js"
+  } = options;
+  const filter = createMdxExtensionFilter(extensions, { allowQueryString: true });
+  return {
+    name,
+    setup(build) {
+      build.onLoad({ filter }, async (args) => {
+        const filePath = args.path.includes("?") ? args.path.split("?")[0] : args.path;
+        const source = await readFile(filePath, "utf-8");
+        const file = new VFile({ path: filePath, value: source });
+        const compiled = await compile(file, {
+          ...compilerOptions,
+          format: resolveCompileFormat(filePath, compilerOptions),
+          SourceMapGenerator: sourceMap.SourceMapGenerator
+        });
+        const inlineSourceMap = includeSourceMap && compiled.map ? `
+//# sourceMappingURL=data:application/json;base64,${Buffer.from(JSON.stringify(compiled.map)).toString("base64")}
+` : "";
+        return {
+          contents: `${String(compiled.value)}${inlineSourceMap}`,
+          loader,
+          resolveDir: path.dirname(args.path)
+        };
+      });
+    }
+  };
+}
+export {
+  createMdxLoaderPlugin
+};

package/node_modules/@ecopages/mdx-core/src/mdx-utils.d.ts

@@ -0,0 +1,29 @@
+import type { CompileOptions } from '@mdx-js/mdx';
+export interface MdxCompilerOptionsInput {
+    compilerOptions?: CompileOptions;
+    remarkPlugins?: CompileOptions['remarkPlugins'];
+    rehypePlugins?: CompileOptions['rehypePlugins'];
+    recmaPlugins?: CompileOptions['recmaPlugins'];
+}
+export declare const mergePluginLists: <T>(...lists: Array<readonly T[] | null | undefined>) => T[] | undefined;
+export declare const appendMdxExtensions: (target: string[], mdxExtensions: string[]) => void;
+export declare const createMdxExtensionFilter: (extensions: string[], options?: {
+    allowQueryString?: boolean;
+}) => RegExp;
+export declare function resolveLoaderExtensions(compilerOptions?: CompileOptions, options?: {
+    defaultMdExtensions?: string[];
+}): string[];
+/**
+ * Resolves the MDX parser mode for a source file.
+ *
+ * Files with a `.md` extension must be forced into `mdx` mode when the caller
+ * explicitly opts them into the MDX pipeline. Leaving the compiler in `detect`
+ * mode would treat `.md` files as plain markdown, causing top-level ESM such as
+ * `import` and `export` to render as text instead of being compiled.
+ */
+export declare function resolveCompileFormat(filePath: string, compilerOptions?: CompileOptions): CompileOptions['format'];
+export declare function resolveMdxCompilerOptions(mdxOptions: MdxCompilerOptionsInput, options: {
+    jsxImportSource: string;
+    jsxRuntime?: CompileOptions['jsxRuntime'];
+    defaults?: CompileOptions;
+}): CompileOptions;

package/node_modules/@ecopages/mdx-core/src/mdx-utils.js

@@ -0,0 +1,55 @@
+import path from "node:path";
+const mergePluginLists = (...lists) => {
+  const merged = lists.flatMap((list) => list ? [...list] : []);
+  return merged.length > 0 ? merged : void 0;
+};
+const appendMdxExtensions = (target, mdxExtensions) => {
+  for (const extension of mdxExtensions) {
+    if (!target.includes(extension)) {
+      target.push(extension);
+    }
+  }
+};
+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}`);
+};
+function resolveLoaderExtensions(compilerOptions, options) {
+  const mdxExtensions = compilerOptions?.mdxExtensions ?? [".mdx"];
+  const mdExtensions = compilerOptions?.mdExtensions ?? options?.defaultMdExtensions ?? [];
+  return [...mdxExtensions, ...mdExtensions];
+}
+function resolveCompileFormat(filePath, compilerOptions) {
+  const configuredFormat = compilerOptions?.format;
+  if (configuredFormat && configuredFormat !== "detect") {
+    return configuredFormat;
+  }
+  return path.extname(filePath).toLowerCase() === ".md" ? "mdx" : configuredFormat;
+}
+function resolveMdxCompilerOptions(mdxOptions, options) {
+  const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = mdxOptions;
+  const resolved = {
+    ...options.defaults,
+    ...compilerOptions,
+    jsxImportSource: options.jsxImportSource,
+    jsxRuntime: options.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;
+}
+export {
+  appendMdxExtensions,
+  createMdxExtensionFilter,
+  mergePluginLists,
+  resolveCompileFormat,
+  resolveLoaderExtensions,
+  resolveMdxCompilerOptions
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/ecopages-jsx",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.11",
   "description": "JSX integration plugin for Ecopages",
   "keywords": [
     "ecopages",
@@ -27,15 +27,19 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ecopages/ecopages.git",
+    "url": "git+https://github.com/ecopages/ecopages.git",
     "directory": "packages/integrations/ecopages-jsx"
   },
+  "bundleDependencies": [
+    "@ecopages/mdx-core"
+  ],
   "dependencies": {
+    "@ecopages/mdx-core": "0.2.0-beta.11",
     "@mdx-js/mdx": "^3.1.1",
     "vfile": "^6.0.3"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-beta.1",
+    "@ecopages/core": "0.2.0-beta.11",
     "@ecopages/jsx": "0.3.0-alpha.25",
     "@ecopages/radiant": "0.3.0-alpha.25"
   }

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

@@ -1,6 +1,7 @@
 import type { CompileOptions } from '@mdx-js/mdx';
 import type { EcoComponent, EcoComponentConfig, EcoFunctionComponent, EcoPageFile, GetMetadata } from '@ecopages/core';
 import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
+import { appendMdxExtensions, createMdxExtensionFilter } from '@ecopages/mdx-core';
 import type { JsxRenderable } from '@ecopages/jsx';
 import type { EcopagesJsxMdxCompileOptions, EcopagesJsxMdxOptions } from './ecopages-jsx.types.js';
 export type ResolvedMdxCompileOptions = EcopagesJsxMdxCompileOptions & Pick<CompileOptions, 'jsxImportSource' | 'jsxRuntime'>;
@@ -10,10 +11,7 @@ export type EcopagesJsxMdxPageModule = EcoPageFile<{
     layout?: EcoComponent;
     getMetadata?: GetMetadata;
 }>;
-export declare const createMdxExtensionFilter: (extensions: string[], options?: {
-    allowQueryString?: boolean;
-}) => RegExp;
-export declare const appendMdxExtensions: (target: string[], mdxExtensions: string[]) => void;
+export { appendMdxExtensions, createMdxExtensionFilter };
 export declare const resolveMdxCompilerOptions: (mdxOptions: EcopagesJsxMdxOptions) => ResolvedMdxCompileOptions;
 export declare const createMdxLoaderPlugin: (compilerOptions: ResolvedMdxCompileOptions, extensions: string[]) => EcoBuildPlugin;
 export declare const registerBunMdxPlugin: (compilerOptions: ResolvedMdxCompileOptions, extensions: string[]) => Promise<void>;

package/src/ecopages-jsx-mdx.js

@@ -1,62 +1,27 @@
 import { readFile } from "node:fs/promises";
-import path from "node:path";
 import { rapidhash } from "@ecopages/core/hash";
+import {
+  appendMdxExtensions,
+  createMdxExtensionFilter,
+  createMdxLoaderPlugin as createMdxLoaderPluginCore,
+  resolveMdxCompilerOptions as resolveMdxCompilerOptionsCore
+} from "@ecopages/mdx-core";
 import { VFile } from "vfile";
 import { ECOPAGES_JSX_PLUGIN_NAME } from "./ecopages-jsx.constants.js";
-const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const mergePluginLists = (...lists) => {
-  const merged = lists.flatMap((list) => list ? [...list] : []);
-  return merged.length > 0 ? merged : void 0;
-};
-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 = {
+const resolveMdxCompilerOptions = (mdxOptions) => resolveMdxCompilerOptionsCore(mdxOptions, {
+  jsxImportSource: "@ecopages/jsx",
+  defaults: {
     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 filter = createMdxExtensionFilter(extensions, { allowQueryString: true });
-  return {
-    name: "ecopages-jsx-mdx-loader",
-    setup(build) {
-      build.onLoad({ filter }, async (args) => {
-        const { compile } = await import("@mdx-js/mdx");
-        const filePath = args.path.includes("?") ? args.path.split("?")[0] : args.path;
-        const source = await readFile(filePath, "utf-8");
-        const compiled = await compile(new VFile({ value: source, path: filePath }), compilerOptions);
-        return {
-          contents: String(compiled.value),
-          loader: "js",
-          resolveDir: path.dirname(filePath)
-        };
-      });
-    }
-  };
-};
+    outputFormat: "program"
+  }
+});
+const createMdxLoaderPlugin = (compilerOptions, extensions) => createMdxLoaderPluginCore({
+  name: "ecopages-jsx-mdx-loader",
+  compilerOptions,
+  extensions,
+  includeSourceMap: false,
+  loader: "js"
+});
 const registerBunMdxPlugin = async (compilerOptions, extensions) => {
   if (typeof Bun === "undefined") {
     return;

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

@@ -22,13 +22,6 @@ export declare class EcopagesJsxRenderer extends IntegrationRenderer<JsxRenderab
      * elements and queued foreign subtrees contribute assets to the same frame.
      */
     private renderQueuedForeignSubtreeChildren;
-    /**
-     * Resolves queued foreign subtrees after JSX has been stringified.
-     *
-     * JSX content needs one extra render pass because child foreign subtrees may emit
-     * additional browser assets while also replacing placeholder tokens.
-     */
-    private resolveOwnedForeignSubtreeHtml;
     protected createForeignChildRuntime(options: {
         renderInput: ComponentRenderInput;
         rendererCache: Map<string, IntegrationRenderer<any>>;

package/src/ecopages-jsx-renderer.js

@@ -61,24 +61,6 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
       html
     };
   }
-  /**
-   * Resolves queued foreign subtrees after JSX has been stringified.
-   *
-   * JSX content needs one extra render pass because child foreign subtrees may emit
-   * additional browser assets while also replacing placeholder tokens.
-   */
-  async resolveOwnedForeignSubtreeHtml(html, runtimeContext) {
-    return this.foreignSubtreeExecutionService.resolveQueuedHtml({
-      currentIntegrationName: this.name,
-      html,
-      runtimeContext,
-      queueLabel: "Ecopages JSX",
-      getOwningRenderer: (integrationName, rendererCache) => this.getIntegrationRendererForName(integrationName, rendererCache),
-      applyAttributesToFirstElement: (resolvedHtml, attributes) => this.htmlTransformer.applyAttributesToFirstElement(resolvedHtml, attributes),
-      dedupeProcessedAssets: (assets) => this.htmlTransformer.dedupeProcessedAssets(assets),
-      renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.renderQueuedForeignSubtreeChildren(children, queuedResolutionsByToken, resolveToken)
-    });
-  }
   createForeignChildRuntime(options) {
     const runtime = super.createForeignChildRuntime(options);
     const interceptForeignChild = runtime.interceptForeignChild;
@@ -165,11 +147,11 @@ class EcopagesJsxRenderer extends IntegrationRenderer {
           };
           const content = await this.withCustomElementRenderHook(() => component(componentProps));
           const rendered = await this.renderJsx(content);
-          const queuedForeignSubtreeResolution = await this.resolveOwnedForeignSubtreeHtml(
+          const queuedForeignSubtreeResolution = await this.resolveQueuedForeignSubtreeHtml(
             rendered.html,
-            this.getQueuedForeignSubtreeResolutionContext(
-              input
-            )
+            this.getQueuedForeignSubtreeResolutionContext(input),
+            (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => this.renderQueuedForeignSubtreeChildren(children, queuedResolutionsByToken, resolveToken),
+            "Ecopages JSX"
           );
           const componentAssets = input.component.config?.dependencies && typeof this.assetProcessingService?.processDependencies === "function" ? await this.processComponentDependencies([input.component]) : [];
           const assets = this.htmlTransformer.dedupeProcessedAssets([