@ecopages/ecopages-jsx 0.2.1-beta.0 → 0.3.0

package/src/ecopages-jsx-renderer.js

@@ -1,240 +1,155 @@
-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.constants.js";
-import {
-  isMdxFile,
-  normalizeMdxPageModule
-} from "./ecopages-jsx-mdx.js";
-import { EcopagesJsxRenderSession } from "./ecopages-jsx-render-session.js";
-import { EcopagesJsxRadiantSsrPolicy } from "./ecopages-jsx-radiant-ssr-policy.js";
-class EcopagesJsxRenderer extends IntegrationRenderer {
-  name = ECOPAGES_JSX_PLUGIN_NAME;
-  mdxExtensions;
-  renderSession;
-  radiantSsrPolicy;
-  normalizeForeignChildProps(props) {
-    if (!("children" in props)) {
-      return props;
+import { HttpError } from '@ecopages/core/errors';
+import { createIntegrationRenderer, } from '@ecopages/core/integration';
+import { resolveQueuedTokens } from '@ecopages/core/integration';
+import { createMarkupNodeLike } from '@ecopages/jsx';
+import { renderToString, withServerCustomElementRenderHook } from '@ecopages/jsx/server';
+import { isMdxFile, normalizeMdxPageModule, } from './ecopages-jsx-mdx.js';
+import { recordEjsxHmrOwnership, withEjsxHmrOwnershipScope } from './ecopages-jsx-hmr-ownership.js';
+import { EcopagesJsxRadiantSsrPolicy } from './ecopages-jsx-radiant-ssr-policy.js';
+import { CUSTOM_ELEMENT_SSR_PRELOAD_CACHE_SCOPES, CustomElementScriptPreloader } from '@ecopages/core/integration';
+import { requireAppRuntime } from '@ecopages/core/integration';
+import { createSharedServerModuleImporter } from '@ecopages/core/integration';
+import { ECOPAGES_JSX_PLUGIN_NAME } from './ecopages-jsx.constants.js';
+/** Creates the hook-based Ecopages JSX renderer for one plugin configuration. */
+export function createEcopagesJsxRenderer(jsxConfig = {}) {
+    return createIntegrationRenderer(ECOPAGES_JSX_PLUGIN_NAME, createEcopagesJsxRendererHookFactory(jsxConfig));
+}
+/** Creates JSX renderer hooks that can also configure a custom renderer subclass. */
+export function createEcopagesJsxRendererHookFactory(jsxConfig = {}) {
+    const mdxExtensions = jsxConfig.mdxExtensions ?? ['.mdx'];
+    return ({ appConfig, resolveComponentDependencies, resolveDependencyPath, }) => {
+        const radiantSsrPolicy = new EcopagesJsxRadiantSsrPolicy(jsxConfig.radiantSsrEnabled ?? false);
+        const ssrScriptPreloader = new CustomElementScriptPreloader({
+            cacheScope: CUSTOM_ELEMENT_SSR_PRELOAD_CACHE_SCOPES.ecopagesJsx,
+            preloadScopes: requireAppRuntime(appConfig).customElementSsrPreloadScopes,
+            collectForIntegration: ECOPAGES_JSX_PLUGIN_NAME,
+            enabled: jsxConfig.radiantSsrEnabled ?? false,
+            logLabel: 'ecopages-jsx',
+            resolveDependencyPath,
+            importServerModule: createSharedServerModuleImporter(appConfig),
+        });
+        const withCustomElementRenderHook = async (render) => await radiantSsrPolicy.withRuntime(() => withServerCustomElementRenderHook(({ instance, applyChildren, }) => instance ? radiantSsrPolicy.renderIntrinsicElementMarkup(instance, applyChildren) : undefined, render, { ownsChildren: true }));
+        const renderJsx = async (value) => await withCustomElementRenderHook(() => renderToString(value));
+        const normalizeForeignChildProps = (input) => {
+            if (!input.targetIntegration || input.targetIntegration === ECOPAGES_JSX_PLUGIN_NAME) {
+                return input.props;
+            }
+            return normalizeForeignChildren(input.props);
+        };
+        return {
+            beforeImportPageModule: async () => await radiantSsrPolicy.prepareRuntime(),
+            normalizePageModule: (file, module) => isMdxFile(file, mdxExtensions)
+                ? normalizeMdxPageModule(file, module)
+                : module,
+            beforeRender: async (options) => {
+                await radiantSsrPolicy.prepareRuntime();
+                await ssrScriptPreloader.preloadSsrScripts([
+                    options.Page,
+                    options.Layout,
+                    options.HtmlTemplate,
+                    ...(options.pageDependencyComponents ?? []),
+                ]);
+            },
+            renderComponent: async (input) => {
+                await radiantSsrPolicy.prepareRuntime();
+                await ssrScriptPreloader.preloadSsrScripts([input.component]);
+                return await withEjsxHmrOwnershipScope(async () => {
+                    try {
+                        if (typeof input.component !== 'function') {
+                            throw new TypeError('JSX renderer expected a callable component.');
+                        }
+                        const component = input.component;
+                        const componentProps = input.children === undefined
+                            ? input.props
+                            : {
+                                ...input.props,
+                                children: typeof input.children === 'string'
+                                    ? createMarkupNodeLike(input.children)
+                                    : input.children,
+                            };
+                        const content = await withCustomElementRenderHook(() => component(componentProps));
+                        const html = await renderJsx(content);
+                        const assets = input.component.config?.dependencies
+                            ? await resolveComponentDependencies([input.component])
+                            : undefined;
+                        recordEjsxHmrOwnership([input.component]);
+                        return {
+                            html,
+                            canAttachAttributes: true,
+                            integrationName: ECOPAGES_JSX_PLUGIN_NAME,
+                            assets,
+                        };
+                    }
+                    catch (error) {
+                        throw createRenderError('Error rendering component', error);
+                    }
+                });
+            },
+            renderQueuedChildren: async (children, _runtimeContext, queuedResolutionsByToken, resolveToken) => {
+                if (children === undefined) {
+                    return {};
+                }
+                const html = typeof children === 'string' ? children : await renderJsx(children);
+                return { html: await resolveQueuedTokens(html, queuedResolutionsByToken, resolveToken) };
+            },
+            normalizeForeignChildProps: (input) => normalizeForeignChildProps(input),
+            renderRoute: async (options, render) => await withEjsxHmrOwnershipScope(async () => {
+                const body = await render();
+                recordEjsxHmrOwnership([
+                    options.Page,
+                    options.Layout,
+                    options.HtmlTemplate,
+                    ...(options.pageDependencyComponents ?? []),
+                ]);
+                return body;
+            }),
+        };
+    };
+}
+export const EcopagesJsxRenderer = createEcopagesJsxRenderer();
+function normalizeForeignChildren(props) {
+    if (!('children' in props)) {
+        return props;
     }
     const children = props.children;
-    if (children === void 0 || typeof children === "string") {
-      return props;
+    if (children === undefined || typeof children === 'string') {
+        return props;
     }
-    if (typeof children === "object" && children !== null && "nodeType" in children && typeof children.nodeType === "number" && "outerHTML" in children && typeof children.outerHTML === "string") {
-      return {
-        ...props,
-        children: children.outerHTML
-      };
+    if (typeof children === 'object' &&
+        children !== null &&
+        'nodeType' in children &&
+        typeof children.nodeType === 'number' &&
+        'outerHTML' in children &&
+        typeof children.outerHTML === 'string') {
+        return {
+            ...props,
+            children: children.outerHTML,
+        };
     }
-    return {
-      ...props,
-      children: renderToString(children)
-    };
-  }
-  /**
-   * Re-renders queued JSX children inside the owning renderer so nested custom
-   * elements and queued foreign subtrees contribute assets to the same frame.
-   */
-  async renderQueuedForeignSubtreeChildren(children, queuedResolutionsByToken, resolveToken) {
-    if (children === void 0) {
-      return { assets: [] };
+    if (isJsxSerializableForeignChild(children)) {
+        return {
+            ...props,
+            children: renderToString(children),
+        };
     }
-    let assets = [];
-    let html;
-    if (typeof children === "string") {
-      html = children;
-    } else {
-      const renderedChildren = await this.renderJsx(children);
-      html = renderedChildren.html;
-      assets = renderedChildren.assets;
+    return props;
+}
+function isJsxSerializableForeignChild(children) {
+    if (Array.isArray(children)) {
+        return true;
     }
-    html = await this.foreignSubtreeExecutionService.resolveQueuedTokens(
-      html,
-      queuedResolutionsByToken,
-      resolveToken
-    );
-    return {
-      assets,
-      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;
-    const interceptForeignChildSync = runtime.interceptForeignChildSync;
-    const wrapInput = (input) => ({
-      ...input,
-      props: input.targetIntegration && input.targetIntegration !== this.name ? this.normalizeForeignChildProps(input.props) : input.props
-    });
-    return {
-      interceptForeignChild: interceptForeignChild ? (input) => interceptForeignChild(wrapInput(input)) : void 0,
-      interceptForeignChildSync: interceptForeignChildSync ? (input) => interceptForeignChildSync(wrapInput(input)) : void 0
-    };
-  }
-  constructor({
-    appConfig,
-    assetProcessingService,
-    resolvedIntegrationDependencies,
-    jsxConfig,
-    runtimeOrigin
-  }) {
-    super({
-      appConfig,
-      assetProcessingService,
-      resolvedIntegrationDependencies,
-      runtimeOrigin
-    });
-    this.mdxExtensions = jsxConfig?.mdxExtensions ?? [".mdx"];
-    this.renderSession = new EcopagesJsxRenderSession(
-      (assets) => this.htmlTransformer.dedupeProcessedAssets(assets)
-    );
-    this.radiantSsrPolicy = jsxConfig?.radiantSsrPolicy ?? new EcopagesJsxRadiantSsrPolicy(jsxConfig?.radiantSsrEnabled ?? false);
-  }
-  /** Returns whether the requested page file should be treated as MDX. */
-  isMdxFile(filePath) {
-    return isMdxFile(filePath, this.mdxExtensions);
-  }
-  async importPageFile(file, options) {
-    return await this.withPreparedRadiantRuntime(async () => {
-      const module = await super.importPageFile(file, options);
-      return this.isMdxFile(file) ? normalizeMdxPageModule(file, module) : module;
-    });
-  }
-  async render(options) {
-    return await this.withPreparedRadiantRuntime(
-      () => this.renderSession.withActiveScope(async () => {
-        try {
-          return await this.renderPageWithDocumentShell({
-            page: {
-              component: options.Page,
-              props: {
-                ...options.pageProps,
-                locals: options.pageLocals
-              }
-            },
-            layout: options.Layout ? {
-              component: options.Layout,
-              props: {
-                ...options.pageProps,
-                locals: options.locals
-              }
-            } : void 0,
-            htmlTemplate: options.HtmlTemplate,
-            metadata: options.metadata,
-            pageProps: options.pageProps ?? {}
-          });
-        } catch (error) {
-          throw this.createRenderError("Error rendering page", error);
-        }
-      })
-    );
-  }
-  async renderComponent(input) {
-    return await this.withPreparedRadiantRuntime(
-      () => this.renderSession.withActiveScope(async () => {
-        const assetFrame = this.renderSession.beginCollectedAssetFrame();
-        try {
-          if (typeof input.component !== "function") {
-            throw new TypeError("JSX renderer expected a callable component.");
-          }
-          const component = input.component;
-          const componentProps = input.children === void 0 ? input.props : {
-            ...input.props,
-            children: typeof input.children === "string" ? createMarkupNodeLike(input.children) : input.children
-          };
-          const content = await this.withCustomElementRenderHook(() => component(componentProps));
-          const rendered = await this.renderJsx(content);
-          const queuedForeignSubtreeResolution = await this.resolveOwnedForeignSubtreeHtml(
-            rendered.html,
-            this.getQueuedForeignSubtreeResolutionContext(
-              input
-            )
-          );
-          const componentAssets = input.component.config?.dependencies && typeof this.assetProcessingService?.processDependencies === "function" ? await this.processComponentDependencies([input.component]) : [];
-          const assets = this.htmlTransformer.dedupeProcessedAssets([
-            ...this.renderSession.endCollectedAssetFrame(assetFrame),
-            ...queuedForeignSubtreeResolution.assets,
-            ...componentAssets
-          ]);
-          return {
-            html: queuedForeignSubtreeResolution.html,
-            canAttachAttributes: true,
-            rootTag: this.getRootTagName(queuedForeignSubtreeResolution.html),
-            integrationName: this.name,
-            assets
-          };
-        } catch (error) {
-          this.renderSession.endCollectedAssetFrame(assetFrame);
-          throw this.createRenderError("Error rendering component", error);
-        }
-      })
-    );
-  }
-  async renderToResponse(view, props, ctx) {
-    return await this.withPreparedRadiantRuntime(
-      () => this.renderSession.withActiveScope(async () => {
-        try {
-          if (typeof view !== "function") {
-            throw new TypeError("JSX renderer expected a callable view component.");
-          }
-          const viewComponent = view;
-          return await this.renderViewWithDocumentShell({
-            view: viewComponent,
-            props,
-            ctx,
-            layout: viewComponent.config?.layout
-          });
-        } catch (error) {
-          throw this.createRenderError("Error rendering view", error);
-        }
-      })
-    );
-  }
-  async renderJsx(value) {
-    const collectedAssets = [];
-    const html = await this.withCustomElementRenderHook(() => renderToString(value));
-    const dedupedAssets = this.renderSession.recordCollectedAssets(collectedAssets);
-    return {
-      assets: dedupedAssets,
-      html
-    };
-  }
-  async withCustomElementRenderHook(render) {
-    return await this.radiantSsrPolicy.withRuntime(
-      () => withServerCustomElementRenderHook(this.createIntrinsicCustomElementRenderHook(), render)
-    );
-  }
-  async withPreparedRadiantRuntime(render) {
-    await this.radiantSsrPolicy.prepareRuntime();
-    return await render();
-  }
-  createIntrinsicCustomElementRenderHook() {
-    return ({ instance }) => {
-      return instance ? this.radiantSsrPolicy.renderIntrinsicElementMarkup(instance) : void 0;
-    };
-  }
+    if (children === null || typeof children !== 'object') {
+        return false;
+    }
+    if ('$$typeof' in children) {
+        return true;
+    }
+    return 'strings' in children && Array.isArray(children.strings);
+}
+function createRenderError(message, cause) {
+    if (HttpError.isHttpError(cause)) {
+        return cause;
+    }
+    const errorMessage = cause instanceof Error ? `${message}: ${cause.message}` : message;
+    return HttpError.InternalServerError(errorMessage);
 }
-export {
-  EcopagesJsxRenderer
-};

package/src/ecopages-jsx.constants.js

@@ -1,4 +1,7 @@
-const ECOPAGES_JSX_PLUGIN_NAME = "ecopages-jsx";
-export {
-  ECOPAGES_JSX_PLUGIN_NAME
-};
+/**
+ * Stable integration name shared by the JSX plugin and renderer.
+ *
+ * Ecopages uses this identifier to match route files, renderer instances, and
+ * cross-integration component boundaries.
+ */
+export const ECOPAGES_JSX_PLUGIN_NAME = 'ecopages-jsx';

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

@@ -1,38 +1,34 @@
-import { IntegrationPlugin, type EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
+import { IntegrationPlugin, type IntegrationRendererBase, type IntegrationRuntimeContext, type EcoBuildPlugin } from '@ecopages/core/integration';
+import { type AssetDefinition } from '@ecopages/core/integration';
 import type { JsxRenderable } from '@ecopages/jsx';
 import { EcopagesJsxRenderer } from './ecopages-jsx-renderer.js';
 import type { EcopagesJsxPluginOptions } from './ecopages-jsx.types.js';
 export type { EcopagesJsxMdxOptions, EcopagesJsxPluginOptions, EcopagesJsxRendererConfig, } from './ecopages-jsx.types.js';
 /** JSX integration plugin for Ecopages, supporting `.tsx` templates and optional Radiant web components. */
 export declare class EcopagesJsxPlugin extends IntegrationPlugin<JsxRenderable> {
-    renderer: typeof EcopagesJsxRenderer;
+    renderer: new (options: import("@ecopages/core/integration").IntegrationRendererOptions) => import("@ecopages/core/integration").IntegrationRenderer<JsxRenderable> & {
+        name: string;
+    };
+    readonly bundlesPageDependencies = true;
     private includeRadiant;
-    private mdxEnabled;
     private mdxCompilerOptions?;
     private mdxExtensions;
-    private mdxLoaderPlugin?;
-    /** Returns the build plugins required by the JSX integration. */
-    get plugins(): EcoBuildPlugin[];
-    /** Creates the renderer instance with the resolved JSX integration runtime options. */
-    initializeRenderer(options?: {
-        rendererModules?: unknown;
-    }): EcopagesJsxRenderer;
-    constructor(options?: EcopagesJsxPluginOptions);
-    private getDependencies;
-    /** Ensures MDX build hooks are ready before Ecopages collects contributions. */
-    prepareBuildContributions(): Promise<void>;
-    /**
-     * Registers MDX tooling and completes the base integration setup.
-     */
-    setup(): Promise<void>;
-    private ensureMdxLoaderPlugin;
     /**
-     * Registers Bun's MDX loader at runtime setup time.
+     * Returns the build plugins required by the JSX integration.
      *
-     * Build-time contribution collection may run where Bun is absent, so
-     * this hook stays isolated from manifest preparation.
+     * @remarks
+     * Returns a new loader declaration without registering or initializing it. The build manifest owns the
+     * resulting instance for the app runtime.
      */
-    private registerMdxBunPlugin;
+    plugins(app: IntegrationRuntimeContext['appConfig']): EcoBuildPlugin[];
+    /** Creates the renderer instance with the resolved JSX integration runtime options. */
+    createRenderer(base: IntegrationRendererBase): EcopagesJsxRenderer;
+    constructor(options?: EcopagesJsxPluginOptions);
+    private getDependencies;
+    /** Assigns grouped-build metadata for page-owned JSX content scripts. */
+    prepareAssetDependencies(dependencies: AssetDefinition[]): AssetDefinition[];
+    /** Registers JSX HMR strategy, dev-transform plugins, and Radiant SSR invalidation hooks. */
+    hmr(context: IntegrationRuntimeContext): void;
 }
 /**
  * Creates the JSX integration plugin with resolved defaults.