@ecopages/react 0.2.0-alpha.1

package/src/services/react-hydration-asset.service.js

@@ -0,0 +1,198 @@
+import path from "node:path";
+import { rapidhash } from "@ecopages/core/hash";
+import { RESOLVED_ASSETS_DIR } from "@ecopages/core/constants";
+import {
+  AssetFactory
+} from "@ecopages/core/services/asset-processing-service";
+import { createHydrationScript } from "../utils/hydration-scripts.js";
+import { createIslandHydrationScript } from "../utils/hydration-scripts.js";
+import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
+class ReactHydrationAssetService {
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * Resolves the import path for the bundled page component.
+   * Uses HMR manager for development or constructs static path for production.
+   *
+   * @param pagePath - Absolute path to the page source file
+   * @param componentName - Generated unique component name
+   * @returns The resolved import path for the bundled component
+   */
+  async resolveAssetImportPath(pagePath, componentName) {
+    const hmrManager = this.config.assetProcessingService?.getHmrManager();
+    if (hmrManager?.isEnabled()) {
+      return hmrManager.registerEntrypoint(pagePath);
+    }
+    return `/${path.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath)).replace(path.basename(pagePath), `${componentName}.js`).replace(/\\/g, "/")}`;
+  }
+  /**
+   * Creates the asset dependencies for a page: the bundled component and hydration script.
+   *
+   * @param pagePath - Absolute path to the page source file
+   * @param componentName - Generated unique component name
+   * @param importPath - Resolved import path for the bundled component
+   * @param bundleOptions - Bundle configuration options
+   * @param isDevelopment - Whether running in development mode with HMR
+   * @param isMdx - Whether the source file is an MDX file
+   * @param props - Optional page props for client serialization
+   * @returns Array of asset definitions for processing
+   */
+  createPageDependencies(pagePath, componentName, importPath, bundleOptions, isDevelopment, isMdx, props) {
+    const runtimeImports = this.config.bundleService.getRuntimeImports();
+    const dependencies = [
+      AssetFactory.createFileScript({
+        position: "head",
+        filepath: pagePath,
+        name: componentName,
+        excludeFromHtml: true,
+        bundle: true,
+        bundleOptions,
+        attributes: {
+          type: "module",
+          defer: "",
+          "data-eco-persist": "true"
+        }
+      })
+    ];
+    if (props && Object.keys(props).length > 0) {
+      dependencies.push(
+        AssetFactory.createContentScript({
+          position: "head",
+          content: `window.__ECO_PAGE__={module:"${importPath}",props:${JSON.stringify(props)}};`,
+          name: `${componentName}-props`,
+          bundle: false,
+          attributes: {
+            type: "module"
+          }
+        })
+      );
+    }
+    dependencies.push(
+      AssetFactory.createContentScript({
+        position: "head",
+        content: createHydrationScript({
+          importPath,
+          reactImportPath: runtimeImports.react,
+          reactDomClientImportPath: runtimeImports.reactDomClient,
+          routerImportPath: runtimeImports.router,
+          isDevelopment,
+          isMdx,
+          router: this.config.routerAdapter
+        }),
+        name: `${componentName}-hydration`,
+        bundle: false,
+        attributes: {
+          type: "module",
+          defer: "",
+          "data-eco-rerun": "true",
+          "data-eco-script-id": `${componentName}-hydration`,
+          "data-eco-persist": "true"
+        }
+      })
+    );
+    return dependencies;
+  }
+  /**
+   * Builds client-side assets for a React component island.
+   *
+   * Includes the bundled component entry and an inline hydration bootstrap script.
+   *
+   * @param componentFile - Absolute path to the component source file
+   * @param componentInstanceId - Unique instance ID for DOM targeting
+   * @param props - Serialized props for client-side hydration
+   * @param config - Optional component config with `__eco` metadata
+   * @returns Processed assets ready for injection
+   */
+  async buildComponentRenderAssets(componentFile, componentInstanceId, props, config) {
+    const componentName = `ecopages-react-island-${rapidhash(`${componentFile}:${componentInstanceId}`)}`;
+    const importPath = await this.resolveAssetImportPath(componentFile, componentName);
+    const hmrManager = this.config.assetProcessingService?.getHmrManager();
+    const isDevelopment = hmrManager?.isEnabled() ?? false;
+    const declaredModules = collectDeclaredModulesInConfig(config);
+    const bundleOptions = await this.config.bundleService.createBundleOptions(
+      componentName,
+      false,
+      declaredModules
+    );
+    const runtimeImports = this.config.bundleService.getRuntimeImports();
+    const dependencies = [
+      AssetFactory.createFileScript({
+        position: "head",
+        filepath: componentFile,
+        name: componentName,
+        excludeFromHtml: true,
+        bundle: true,
+        bundleOptions,
+        attributes: {
+          type: "module",
+          defer: "",
+          "data-eco-persist": "true"
+        }
+      }),
+      AssetFactory.createContentScript({
+        position: "head",
+        content: createIslandHydrationScript({
+          importPath,
+          reactImportPath: runtimeImports.react,
+          reactDomClientImportPath: runtimeImports.reactDomClient,
+          targetSelector: `[data-eco-component-id="${componentInstanceId}"]`,
+          props,
+          componentRef: config?.__eco?.id,
+          componentFile,
+          isDevelopment
+        }),
+        name: `${componentName}-hydration`,
+        bundle: false,
+        attributes: {
+          type: "module",
+          defer: "",
+          "data-eco-rerun": "true",
+          "data-eco-script-id": `${componentName}-hydration`,
+          "data-eco-persist": "true"
+        }
+      })
+    ];
+    if (!this.config.assetProcessingService) {
+      return [];
+    }
+    return this.config.assetProcessingService.processDependencies(dependencies, componentName);
+  }
+  /**
+   * Builds all client-side route assets for a page.
+   *
+   * @param pagePath - Absolute file path of the page
+   * @param isMdx - Whether the page is an MDX file
+   * @param declaredModules - Explicitly declared browser module specifiers
+   * @returns Processed assets for the route
+   */
+  async buildRouteRenderAssets(pagePath, isMdx, declaredModules) {
+    const componentName = `ecopages-react-${rapidhash(pagePath)}`;
+    const hmrManager = this.config.assetProcessingService?.getHmrManager();
+    const isDevelopment = hmrManager?.isEnabled() ?? false;
+    if (isDevelopment) {
+      this.config.hmrPageMetadataCache?.setDeclaredModules(pagePath, declaredModules);
+    }
+    const importPath = await this.resolveAssetImportPath(pagePath, componentName);
+    const bundleOptions = await this.config.bundleService.createBundleOptions(
+      componentName,
+      isMdx,
+      declaredModules
+    );
+    const dependencies = this.createPageDependencies(
+      pagePath,
+      componentName,
+      importPath,
+      bundleOptions,
+      isDevelopment,
+      isMdx
+    );
+    if (!this.config.assetProcessingService) {
+      throw new Error("AssetProcessingService is not set");
+    }
+    return this.config.assetProcessingService.processDependencies(dependencies, componentName);
+  }
+}
+export {
+  ReactHydrationAssetService
+};

package/src/services/react-hydration-asset.service.ts

@@ -0,0 +1,260 @@
+/**
+ * Hydration asset creation service for React integration.
+ *
+ * Builds the asset definitions (bundled component scripts + hydration bootstrap scripts)
+ * required for client-side React rendering — both at the page level and the component
+ * island level.
+ *
+ * @module
+ */
+
+import path from 'node:path';
+import type { EcoComponentConfig } from '@ecopages/core';
+import { rapidhash } from '@ecopages/core/hash';
+import { RESOLVED_ASSETS_DIR } from '@ecopages/core/constants';
+import {
+	AssetFactory,
+	type AssetDefinition,
+	type ProcessedAsset,
+} from '@ecopages/core/services/asset-processing-service';
+import type { AssetProcessingService } from '@ecopages/core/services/asset-processing-service';
+import { createHydrationScript } from '../utils/hydration-scripts.ts';
+import { createIslandHydrationScript } from '../utils/hydration-scripts.ts';
+import { collectDeclaredModulesInConfig } from '../utils/declared-modules.ts';
+import type { ReactBundleService } from './react-bundle.service.ts';
+import type { ReactHmrPageMetadataCache } from './react-hmr-page-metadata-cache.ts';
+import type { ReactRouterAdapter } from '../router-adapter.ts';
+
+/**
+ * Configuration for the ReactHydrationAssetService.
+ */
+export interface ReactHydrationAssetServiceConfig {
+	srcDir: string;
+	routerAdapter?: ReactRouterAdapter;
+	assetProcessingService: AssetProcessingService;
+	bundleService: ReactBundleService;
+	hmrPageMetadataCache?: ReactHmrPageMetadataCache;
+}
+
+/**
+ * Manages the creation of client-side hydration assets for React pages and component islands.
+ */
+export class ReactHydrationAssetService {
+	constructor(private readonly config: ReactHydrationAssetServiceConfig) {}
+
+	/**
+	 * Resolves the import path for the bundled page component.
+	 * Uses HMR manager for development or constructs static path for production.
+	 *
+	 * @param pagePath - Absolute path to the page source file
+	 * @param componentName - Generated unique component name
+	 * @returns The resolved import path for the bundled component
+	 */
+	async resolveAssetImportPath(pagePath: string, componentName: string): Promise<string> {
+		const hmrManager = this.config.assetProcessingService?.getHmrManager();
+
+		if (hmrManager?.isEnabled()) {
+			return hmrManager.registerEntrypoint(pagePath);
+		}
+
+		return `/${path
+			.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath))
+			.replace(path.basename(pagePath), `${componentName}.js`)
+			.replace(/\\/g, '/')}`;
+	}
+
+	/**
+	 * Creates the asset dependencies for a page: the bundled component and hydration script.
+	 *
+	 * @param pagePath - Absolute path to the page source file
+	 * @param componentName - Generated unique component name
+	 * @param importPath - Resolved import path for the bundled component
+	 * @param bundleOptions - Bundle configuration options
+	 * @param isDevelopment - Whether running in development mode with HMR
+	 * @param isMdx - Whether the source file is an MDX file
+	 * @param props - Optional page props for client serialization
+	 * @returns Array of asset definitions for processing
+	 */
+	createPageDependencies(
+		pagePath: string,
+		componentName: string,
+		importPath: string,
+		bundleOptions: Record<string, unknown>,
+		isDevelopment: boolean,
+		isMdx: boolean,
+		props?: Record<string, unknown>,
+	): AssetDefinition[] {
+		const runtimeImports = this.config.bundleService.getRuntimeImports();
+		const dependencies: AssetDefinition[] = [
+			AssetFactory.createFileScript({
+				position: 'head',
+				filepath: pagePath,
+				name: componentName,
+				excludeFromHtml: true,
+				bundle: true,
+				bundleOptions,
+				attributes: {
+					type: 'module',
+					defer: '',
+					'data-eco-persist': 'true',
+				},
+			}),
+		];
+
+		if (props && Object.keys(props).length > 0) {
+			dependencies.push(
+				AssetFactory.createContentScript({
+					position: 'head',
+					content: `window.__ECO_PAGE__={module:"${importPath}",props:${JSON.stringify(props)}};`,
+					name: `${componentName}-props`,
+					bundle: false,
+					attributes: {
+						type: 'module',
+					},
+				}),
+			);
+		}
+
+		dependencies.push(
+			AssetFactory.createContentScript({
+				position: 'head',
+				content: createHydrationScript({
+					importPath,
+					reactImportPath: runtimeImports.react,
+					reactDomClientImportPath: runtimeImports.reactDomClient,
+					routerImportPath: runtimeImports.router,
+					isDevelopment,
+					isMdx,
+					router: this.config.routerAdapter,
+				}),
+				name: `${componentName}-hydration`,
+				bundle: false,
+				attributes: {
+					type: 'module',
+					defer: '',
+					'data-eco-rerun': 'true',
+					'data-eco-script-id': `${componentName}-hydration`,
+					'data-eco-persist': 'true',
+				},
+			}),
+		);
+
+		return dependencies;
+	}
+
+	/**
+	 * Builds client-side assets for a React component island.
+	 *
+	 * Includes the bundled component entry and an inline hydration bootstrap script.
+	 *
+	 * @param componentFile - Absolute path to the component source file
+	 * @param componentInstanceId - Unique instance ID for DOM targeting
+	 * @param props - Serialized props for client-side hydration
+	 * @param config - Optional component config with `__eco` metadata
+	 * @returns Processed assets ready for injection
+	 */
+	async buildComponentRenderAssets(
+		componentFile: string,
+		componentInstanceId: string,
+		props: Record<string, unknown>,
+		config?: EcoComponentConfig,
+	): Promise<ProcessedAsset[]> {
+		const componentName = `ecopages-react-island-${rapidhash(`${componentFile}:${componentInstanceId}`)}`;
+		const importPath = await this.resolveAssetImportPath(componentFile, componentName);
+		const hmrManager = this.config.assetProcessingService?.getHmrManager();
+		const isDevelopment = hmrManager?.isEnabled() ?? false;
+		const declaredModules = collectDeclaredModulesInConfig(config);
+		const bundleOptions = await this.config.bundleService.createBundleOptions(
+			componentName,
+			false,
+			declaredModules,
+		);
+		const runtimeImports = this.config.bundleService.getRuntimeImports();
+
+		const dependencies: AssetDefinition[] = [
+			AssetFactory.createFileScript({
+				position: 'head',
+				filepath: componentFile,
+				name: componentName,
+				excludeFromHtml: true,
+				bundle: true,
+				bundleOptions,
+				attributes: {
+					type: 'module',
+					defer: '',
+					'data-eco-persist': 'true',
+				},
+			}),
+			AssetFactory.createContentScript({
+				position: 'head',
+				content: createIslandHydrationScript({
+					importPath,
+					reactImportPath: runtimeImports.react,
+					reactDomClientImportPath: runtimeImports.reactDomClient,
+					targetSelector: `[data-eco-component-id="${componentInstanceId}"]`,
+					props,
+					componentRef: config?.__eco?.id,
+					componentFile,
+					isDevelopment,
+				}),
+				name: `${componentName}-hydration`,
+				bundle: false,
+				attributes: {
+					type: 'module',
+					defer: '',
+					'data-eco-rerun': 'true',
+					'data-eco-script-id': `${componentName}-hydration`,
+					'data-eco-persist': 'true',
+				},
+			}),
+		];
+
+		if (!this.config.assetProcessingService) {
+			return [];
+		}
+
+		return this.config.assetProcessingService.processDependencies(dependencies, componentName);
+	}
+
+	/**
+	 * Builds all client-side route assets for a page.
+	 *
+	 * @param pagePath - Absolute file path of the page
+	 * @param isMdx - Whether the page is an MDX file
+	 * @param declaredModules - Explicitly declared browser module specifiers
+	 * @returns Processed assets for the route
+	 */
+	async buildRouteRenderAssets(
+		pagePath: string,
+		isMdx: boolean,
+		declaredModules: string[],
+	): Promise<ProcessedAsset[]> {
+		const componentName = `ecopages-react-${rapidhash(pagePath)}`;
+		const hmrManager = this.config.assetProcessingService?.getHmrManager();
+		const isDevelopment = hmrManager?.isEnabled() ?? false;
+		if (isDevelopment) {
+			this.config.hmrPageMetadataCache?.setDeclaredModules(pagePath, declaredModules);
+		}
+
+		const importPath = await this.resolveAssetImportPath(pagePath, componentName);
+		const bundleOptions = await this.config.bundleService.createBundleOptions(
+			componentName,
+			isMdx,
+			declaredModules,
+		);
+		const dependencies = this.createPageDependencies(
+			pagePath,
+			componentName,
+			importPath,
+			bundleOptions,
+			isDevelopment,
+			isMdx,
+		);
+
+		if (!this.config.assetProcessingService) {
+			throw new Error('AssetProcessingService is not set');
+		}
+
+		return this.config.assetProcessingService.processDependencies(dependencies, componentName);
+	}
+}

package/src/services/react-page-module.service.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Page module loading and configuration resolution service for React integration.
+ *
+ * Handles MDX compilation, component config metadata resolution,
+ * and module hydration analysis.
+ *
+ * @module
+ */
+import type { EcoComponentConfig, EcoPageFile } from '@ecopages/core';
+import type { CompileOptions } from '@mdx-js/mdx';
+/**
+ * Configuration for the ReactPageModuleService.
+ */
+export interface ReactPageModuleServiceConfig {
+    rootDir: string;
+    distDir: string;
+    layoutsDir?: string;
+    componentsDir?: string;
+    mdxCompilerOptions?: CompileOptions;
+    mdxExtensions: string[];
+    integrationName: string;
+    hasRouterAdapter: boolean;
+}
+/**
+ * Manages page module loading (including MDX compilation), config metadata
+ * resolution, and hydration analysis for React pages.
+ */
+export declare class ReactPageModuleService {
+    private readonly config;
+    constructor(config: ReactPageModuleServiceConfig);
+    /**
+     * Checks if the given file path corresponds to an MDX file based on configured extensions.
+     * @param filePath - The file path to check
+     * @returns True if the file is an MDX file
+     */
+    isMdxFile(filePath: string): boolean;
+    /**
+     * Compiles and imports an MDX file as a page module.
+     *
+     * @param filePath - Absolute path to the MDX file
+     * @returns The imported module
+     */
+    importMdxPageFile(filePath: string): Promise<unknown>;
+    /**
+     * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.
+     * Resolves the file path from dependency declarations when not already set.
+     *
+     * @param config - The component config to augment
+     * @param pagePath - Fallback file path if dependency resolution fails
+     * @returns Config with `__eco` metadata populated
+     */
+    ensureConfigFileMetadata(config: EcoComponentConfig, pagePath: string): EcoComponentConfig;
+    /**
+     * Recursively checks whether a component config tree declares any browser modules.
+     * Used to determine if a page needs hydration.
+     */
+    hasModulesInConfig(config: EcoComponentConfig | undefined, visited?: Set<EcoComponentConfig>): boolean;
+    /**
+     * Determines whether a page needs client-side hydration.
+     *
+     * @param pageModule - The imported page module
+     * @returns True if the page should be hydrated
+     */
+    shouldHydratePage(pageModule: EcoPageFile<{
+        config?: EcoComponentConfig;
+    }> & {
+        config?: EcoComponentConfig;
+    }): boolean;
+    /**
+     * Collects all explicitly declared browser module specifiers from a page module.
+     *
+     * @param pageModule - The imported page module
+     * @returns Deduplicated list of declared module specifiers
+     */
+    collectPageDeclaredModules(pageModule: EcoPageFile<{
+        config?: EcoComponentConfig;
+    }> & {
+        config?: EcoComponentConfig;
+    }): string[];
+}

package/src/services/react-page-module.service.js

@@ -0,0 +1,155 @@
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { rapidhash } from "@ecopages/core/hash";
+import { defaultBuildAdapter } from "@ecopages/core/build/build-adapter";
+import { fileSystem } from "@ecopages/file-system";
+import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
+class ReactPageModuleService {
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * Checks if the given file path corresponds to an MDX file based on configured extensions.
+   * @param filePath - The file path to check
+   * @returns True if the file is an MDX file
+   */
+  isMdxFile(filePath) {
+    return this.config.mdxExtensions.some((ext) => filePath.endsWith(ext));
+  }
+  /**
+   * Compiles and imports an MDX file as a page module.
+   *
+   * @param filePath - Absolute path to the MDX file
+   * @returns The imported module
+   */
+  async importMdxPageFile(filePath) {
+    const { createReactMdxLoaderPlugin } = await import("../utils/react-mdx-loader-plugin.js");
+    const mdxPlugin = createReactMdxLoaderPlugin(
+      this.config.mdxCompilerOptions ?? {
+        jsxImportSource: "react",
+        jsxRuntime: "automatic",
+        development: process?.env?.NODE_ENV === "development"
+      }
+    );
+    const outdir = path.join(this.config.distDir, ".server-modules-react-mdx");
+    const fileBaseName = path.basename(filePath, path.extname(filePath));
+    const fileHash = fileSystem.hash(filePath);
+    const cacheBuster = process?.env?.NODE_ENV === "development" ? `-${Date.now()}` : "";
+    const outputFileName = `${fileBaseName}-${fileHash}${cacheBuster}.js`;
+    const buildResult = await defaultBuildAdapter.build({
+      entrypoints: [filePath],
+      root: this.config.rootDir,
+      outdir,
+      target: "node",
+      format: "esm",
+      sourcemap: "none",
+      splitting: false,
+      minify: false,
+      treeshaking: false,
+      naming: outputFileName,
+      plugins: [mdxPlugin]
+    });
+    if (!buildResult.success) {
+      const details = buildResult.logs.map((log) => log.message).join(" | ");
+      throw new Error(`Failed to compile MDX page module: ${details}`);
+    }
+    const preferredOutputPath = path.join(outdir, outputFileName);
+    const compiledOutput = buildResult.outputs.find((output) => output.path === preferredOutputPath)?.path ?? buildResult.outputs.find((output) => output.path.endsWith(".js"))?.path;
+    if (!compiledOutput) {
+      throw new Error(`No compiled MDX output generated for page: ${filePath}`);
+    }
+    return await import(pathToFileURL(compiledOutput).href);
+  }
+  /**
+   * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.
+   * Resolves the file path from dependency declarations when not already set.
+   *
+   * @param config - The component config to augment
+   * @param pagePath - Fallback file path if dependency resolution fails
+   * @returns Config with `__eco` metadata populated
+   */
+  ensureConfigFileMetadata(config, pagePath) {
+    if (config.__eco?.file) {
+      return config;
+    }
+    const buildEcoMeta = (file) => ({
+      id: config.__eco?.id ?? rapidhash(file).toString(36),
+      integration: config.__eco?.integration ?? this.config.integrationName,
+      file
+    });
+    const resolveDependencyValue = (value) => typeof value === "string" ? value : value.src;
+    const dependencyPaths = [
+      ...(config.dependencies?.stylesheets ?? []).map(resolveDependencyValue),
+      ...(config.dependencies?.scripts ?? []).map(resolveDependencyValue)
+    ].filter((value) => Boolean(value)).filter((value) => value.startsWith("./") || value.startsWith("../"));
+    const candidateDirs = [this.config.layoutsDir, this.config.componentsDir, path.dirname(pagePath)].filter(
+      (value) => typeof value === "string" && value.length > 0
+    );
+    for (const dependencyPath of dependencyPaths) {
+      for (const candidateDir of candidateDirs) {
+        const resolvedDependency = path.resolve(candidateDir, dependencyPath);
+        if (fileSystem.exists(resolvedDependency)) {
+          return {
+            ...config,
+            __eco: buildEcoMeta(resolvedDependency)
+          };
+        }
+      }
+    }
+    return {
+      ...config,
+      __eco: buildEcoMeta(pagePath)
+    };
+  }
+  /**
+   * Recursively checks whether a component config tree declares any browser modules.
+   * Used to determine if a page needs hydration.
+   */
+  hasModulesInConfig(config, visited = /* @__PURE__ */ new Set()) {
+    if (!config || visited.has(config)) {
+      return false;
+    }
+    visited.add(config);
+    if (config.dependencies?.modules?.some((entry) => entry.trim().length > 0)) {
+      return true;
+    }
+    if (config.layout?.config && this.hasModulesInConfig(config.layout.config, visited)) {
+      return true;
+    }
+    for (const component of config.dependencies?.components ?? []) {
+      if (this.hasModulesInConfig(component.config, visited)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Determines whether a page needs client-side hydration.
+   *
+   * @param pageModule - The imported page module
+   * @returns True if the page should be hydrated
+   */
+  shouldHydratePage(pageModule) {
+    if (this.config.hasRouterAdapter) {
+      return true;
+    }
+    const pageConfig = pageModule.default?.config;
+    return this.hasModulesInConfig(pageConfig) || this.hasModulesInConfig(pageModule.config);
+  }
+  /**
+   * Collects all explicitly declared browser module specifiers from a page module.
+   *
+   * @param pageModule - The imported page module
+   * @returns Deduplicated list of declared module specifiers
+   */
+  collectPageDeclaredModules(pageModule) {
+    const declarations = [
+      ...collectDeclaredModulesInConfig(pageModule.default?.config),
+      ...collectDeclaredModulesInConfig(pageModule.config)
+    ];
+    return Array.from(new Set(declarations));
+  }
+}
+export {
+  ReactPageModuleService
+};