@ecopages/react 0.2.0-alpha.4 → 0.2.0-alpha.41

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

@@ -1,214 +0,0 @@
-/**
- * Page module loading and configuration resolution service for React integration.
- *
- * Handles MDX compilation, component config metadata resolution,
- * and module hydration analysis.
- *
- * @module
- */
-
-import path from 'node:path';
-import { pathToFileURL } from 'node:url';
-import type { EcoComponentConfig, EcoPageFile } from '@ecopages/core';
-import { rapidhash } from '@ecopages/core/hash';
-import { defaultBuildAdapter } from '@ecopages/core/build/build-adapter';
-import { fileSystem } from '@ecopages/file-system';
-import type { CompileOptions } from '@mdx-js/mdx';
-import { collectDeclaredModulesInConfig } from '../utils/declared-modules.ts';
-
-/**
- * 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 class ReactPageModuleService {
-	constructor(private readonly 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 {
-		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: string): Promise<unknown> {
-		const { createReactMdxLoaderPlugin } = await import('../utils/react-mdx-loader-plugin.ts');
-		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: EcoComponentConfig, pagePath: string): EcoComponentConfig {
-		if (config.__eco?.file) {
-			return config;
-		}
-
-		const buildEcoMeta = (file: string) => ({
-			id: config.__eco?.id ?? rapidhash(file).toString(36),
-			integration: config.__eco?.integration ?? this.config.integrationName,
-			file,
-		});
-
-		const resolveDependencyValue = (value: string | { src?: string }) =>
-			typeof value === 'string' ? value : value.src;
-
-		const dependencyPaths = [
-			...(config.dependencies?.stylesheets ?? []).map(resolveDependencyValue),
-			...(config.dependencies?.scripts ?? []).map(resolveDependencyValue),
-		]
-			.filter((value): value is string => Boolean(value))
-			.filter((value) => value.startsWith('./') || value.startsWith('../'));
-
-		const candidateDirs = [this.config.layoutsDir, this.config.componentsDir, path.dirname(pagePath)].filter(
-			(value): value is string => 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: EcoComponentConfig | undefined, visited = new Set<EcoComponentConfig>()): boolean {
-		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: EcoPageFile<{ config?: EcoComponentConfig }> & { config?: EcoComponentConfig },
-	): boolean {
-		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: EcoPageFile<{ config?: EcoComponentConfig }> & { config?: EcoComponentConfig },
-	): string[] {
-		const declarations = [
-			...collectDeclaredModulesInConfig(pageModule.default?.config),
-			...collectDeclaredModulesInConfig(pageModule.config),
-		];
-
-		return Array.from(new Set(declarations));
-	}
-}

package/src/services/react-runtime-bundle.service.ts

@@ -1,271 +0,0 @@
-/**
- * Runtime bundle service for React integration.
- *
- * Owns creation of the browser runtime assets for React and React DOM,
- * including temporary entry generation, specifier mapping, and React DOM
- * interop rewriting.
- *
- * @module
- */
-
-import fs from 'node:fs';
-import path from 'node:path';
-import { createRequire } from 'node:module';
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import { type AssetDefinition, AssetFactory } from '@ecopages/core/services/asset-processing-service';
-import type { ReactRouterAdapter } from '../router-adapter.ts';
-
-type RuntimeModuleConfig = {
-	specifier: string;
-	defaultExport?: boolean;
-};
-
-export type ReactRuntimeImports = {
-	react: string;
-	reactDomClient: string;
-	reactJsxRuntime: string;
-	reactJsxDevRuntime: string;
-	reactDom: string;
-	router?: string;
-};
-
-export interface ReactRuntimeBundleServiceConfig {
-	routerAdapter?: ReactRouterAdapter;
-}
-
-export class ReactRuntimeBundleService {
-	constructor(private readonly config: ReactRuntimeBundleServiceConfig) {}
-
-	getRuntimeImports(): ReactRuntimeImports {
-		const runtimeImports: ReactRuntimeImports = {
-			react: this.buildImportMapSourceUrl('react.js'),
-			reactDomClient: this.buildImportMapSourceUrl('react-dom.js'),
-			reactJsxRuntime: this.buildImportMapSourceUrl('react.js'),
-			reactJsxDevRuntime: this.buildImportMapSourceUrl('react.js'),
-			reactDom: this.buildImportMapSourceUrl('react-dom.js'),
-		};
-
-		if (this.config.routerAdapter) {
-			runtimeImports.router = this.buildImportMapSourceUrl(`${this.config.routerAdapter.bundle.outputName}.js`);
-		}
-
-		return runtimeImports;
-	}
-
-	getSpecifierMap(): Record<string, string> {
-		const runtimeImports = this.getRuntimeImports();
-		const map: Record<string, string> = {
-			react: runtimeImports.react,
-			'react/jsx-runtime': runtimeImports.reactJsxRuntime,
-			'react/jsx-dev-runtime': runtimeImports.reactJsxDevRuntime,
-			'react-dom': runtimeImports.reactDom,
-			'react-dom/client': runtimeImports.reactDomClient,
-		};
-
-		if (this.config.routerAdapter && runtimeImports.router) {
-			map[this.config.routerAdapter.importMapKey] = runtimeImports.router;
-		}
-
-		return map;
-	}
-
-	getDependencies(): AssetDefinition[] {
-		const runtimeAttrs = { type: 'module', defer: '' } as const;
-		const runtimeImports = this.getRuntimeImports();
-		const reactRuntimeAliasPlugin = this.createRuntimeSpecifierAliasPlugin({
-			react: runtimeImports.react,
-		});
-		const reactDomRuntimeInteropPlugin = this.createReactDomRuntimeInteropPlugin();
-
-		const reactEntry = this.createRuntimeEntry(
-			[
-				{ specifier: 'react', defaultExport: true },
-				{ specifier: 'react/jsx-runtime' },
-				{ specifier: 'react/jsx-dev-runtime' },
-			],
-			'react-entry.mjs',
-		);
-		const reactDomEntry = this.createRuntimeEntry(
-			[{ specifier: 'react-dom', defaultExport: true }, { specifier: 'react-dom/client' }],
-			'react-dom-entry.mjs',
-		);
-
-		const dependencies: AssetDefinition[] = [
-			AssetFactory.createNodeModuleScript({
-				position: 'head',
-				importPath: reactEntry,
-				name: 'react',
-				excludeFromHtml: true,
-				bundleOptions: { naming: 'react.js' },
-				attributes: runtimeAttrs,
-			}),
-			AssetFactory.createNodeModuleScript({
-				position: 'head',
-				importPath: reactDomEntry,
-				name: 'react-dom',
-				excludeFromHtml: true,
-				bundleOptions: {
-					naming: 'react-dom.js',
-					plugins: [reactRuntimeAliasPlugin, reactDomRuntimeInteropPlugin],
-				},
-				attributes: runtimeAttrs,
-			}),
-		];
-
-		if (this.config.routerAdapter) {
-			const runtimeAliasPlugin = this.createRuntimeAliasPlugin();
-			const mappedSpecifiers = new Set(Object.keys(this.getSpecifierMap()));
-			const unresolvedExternals = this.config.routerAdapter.bundle.externals.filter(
-				(external) => !mappedSpecifiers.has(external),
-			);
-
-			dependencies.push(
-				AssetFactory.createNodeModuleScript({
-					position: 'head',
-					importPath: this.config.routerAdapter.bundle.importPath,
-					name: this.config.routerAdapter.bundle.outputName,
-					excludeFromHtml: true,
-					bundleOptions: {
-						naming: `${this.config.routerAdapter.bundle.outputName}.js`,
-						external: unresolvedExternals,
-						plugins: [runtimeAliasPlugin],
-					},
-					attributes: runtimeAttrs,
-				}),
-			);
-		}
-
-		return dependencies;
-	}
-
-	createRuntimeAliasPlugin(): EcoBuildPlugin {
-		const specifierMap = this.getSpecifierMap();
-		const escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-		const filter = new RegExp(
-			`^(${Object.keys(specifierMap)
-				.map((key) => escapeRegExp(key))
-				.join('|')})$`,
-		);
-
-		return {
-			name: 'react-plugin-runtime-alias',
-			setup(build) {
-				build.onResolve({ filter }, (args) => {
-					const mappedPath = specifierMap[args.path];
-					if (!mappedPath) {
-						return undefined;
-					}
-
-					return {
-						path: mappedPath,
-						external: true,
-					};
-				});
-			},
-		};
-	}
-
-	private buildImportMapSourceUrl(fileName: string): string {
-		return `/${AssetFactory.RESOLVED_ASSETS_VENDORS_DIR}/${fileName}`;
-	}
-
-	private createRuntimeSpecifierAliasPlugin(specifierMap: Record<string, string>, external = true): EcoBuildPlugin {
-		const escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-		const filter = new RegExp(
-			`^(${Object.keys(specifierMap)
-				.map((key) => escapeRegExp(key))
-				.join('|')})$`,
-		);
-
-		return {
-			name: 'react-plugin-runtime-specifier-alias',
-			setup(build) {
-				build.onResolve({ filter }, (args) => {
-					const mappedPath = specifierMap[args.path];
-					if (!mappedPath) {
-						return undefined;
-					}
-
-					return {
-						path: mappedPath,
-						external,
-					};
-				});
-			},
-		};
-	}
-
-	private createReactDomRuntimeInteropPlugin(): EcoBuildPlugin {
-		const reactDomFileFilter = /[\\/]react-dom[\\/].*\.js$/;
-		const reactRequirePattern = /\brequire\((['"])react\1\)/g;
-
-		return {
-			name: 'react-dom-runtime-interop',
-			setup(build) {
-				build.onLoad({ filter: reactDomFileFilter }, (args) => {
-					const content = fs.readFileSync(args.path, 'utf-8');
-					if (!reactRequirePattern.test(content)) {
-						return undefined;
-					}
-
-					reactRequirePattern.lastIndex = 0;
-					const rewritten = content.replace(reactRequirePattern, '__ecopages_react_runtime');
-
-					return {
-						contents: `import * as __ecopages_react_runtime from 'react';\n${rewritten}`,
-						loader: 'js',
-						resolveDir: path.dirname(args.path),
-					};
-				});
-			},
-		};
-	}
-
-	private getRuntimeArtifactsDir(): string {
-		const tmpDir = path.join(process.cwd(), 'node_modules', '.cache', 'ecopages-react-runtime');
-		fs.mkdirSync(tmpDir, { recursive: true });
-		return tmpDir;
-	}
-
-	private createRuntimeEntry(modules: RuntimeModuleConfig[], fileName: string): string {
-		const tmpDir = this.getRuntimeArtifactsDir();
-		const requireFromRoot = createRequire(path.join(process.cwd(), 'package.json'));
-		const seenExports = new Set<string>();
-		const statements: string[] = [];
-
-		for (const module of modules) {
-			if (module.defaultExport) {
-				statements.push(`import __ecopages_default_export__ from '${module.specifier}';`);
-				statements.push('export default __ecopages_default_export__;');
-			}
-
-			const exportNames = this.getModuleExportNames(module.specifier, requireFromRoot).filter(
-				(name) => !seenExports.has(name),
-			);
-
-			if (exportNames.length > 0) {
-				statements.push(`export { ${exportNames.join(', ')} } from '${module.specifier}';`);
-				for (const exportName of exportNames) {
-					seenExports.add(exportName);
-				}
-			}
-		}
-
-		const filePath = path.join(tmpDir, fileName);
-		fs.writeFileSync(filePath, statements.join('\n'), 'utf-8');
-		return filePath;
-	}
-
-	private getModuleExportNames(specifier: string, requireFromRoot: ReturnType<typeof createRequire>): string[] {
-		const moduleExports = requireFromRoot(specifier);
-
-		return Object.keys(moduleExports)
-			.filter((name) => name !== '__esModule' && name !== 'default')
-			.filter((name) => this.isValidExportName(name))
-			.sort();
-	}
-
-	private isValidExportName(name: string): boolean {
-		return /^[$A-Z_a-z][$\w]*$/.test(name);
-	}
-}