@ecopages/core 0.2.0-alpha.22 → 0.2.0-alpha.24

package/src/services/assets/asset-processing-service/processors/script/node-module-script.processor.ts

@@ -0,0 +1,87 @@
+import path from 'node:path';
+import { fileSystem } from '@ecopages/file-system';
+import { getAppBuildAdapter } from '../../../../../build/build-adapter.ts';
+import type { NodeModuleScriptAsset } from '../../assets.types.ts';
+import { BaseScriptProcessor } from '../base/base-script-processor.ts';
+
+export class NodeModuleScriptProcessor extends BaseScriptProcessor<NodeModuleScriptAsset> {
+	async process(dep: NodeModuleScriptAsset) {
+		const modulePath = this.resolveModulePath(dep.importPath, this.appConfig.rootDir);
+		const moduleName = path.basename(modulePath);
+		const filename = dep.name ?? `nm-${moduleName}`;
+		const configHash = this.generateHash(
+			JSON.stringify({ inline: dep.inline, minify: !dep.inline && this.isProduction, opts: dep.bundleOptions }),
+		);
+		const cachekey = `${this.buildCacheKey(filename, this.generateHash(modulePath), dep)}:${configHash}`;
+
+		return this.getOrProcess(cachekey, async () => {
+			if (dep.inline) {
+				const content = fileSystem.readFileAsBuffer(modulePath).toString();
+				return {
+					content,
+					kind: dep.kind,
+					position: dep.position,
+					attributes: dep.attributes,
+					inline: true,
+					excludeFromHtml: dep.excludeFromHtml,
+					packageRole: dep.packageRole,
+				};
+			}
+
+			const outdir = path.join(this.getAssetsDir(), 'vendors');
+			const bundlerOptions = this.getBundlerOptions(dep);
+
+			const filePath = await this.bundleScript({
+				entrypoint: modulePath,
+				outdir: outdir,
+				minify: this.isProduction,
+				naming: bundlerOptions.naming ?? (dep.name ? `${dep.name}-[hash].[ext]` : '[name]-[hash].[ext]'),
+				...bundlerOptions,
+			});
+
+			return {
+				filepath: filePath,
+				kind: dep.kind,
+				position: dep.position,
+				attributes: dep.attributes,
+				inline: dep.inline,
+				excludeFromHtml: dep.excludeFromHtml,
+				packageRole: dep.packageRole,
+			};
+		});
+	}
+
+	private resolveModulePath(importPath: string, rootDir: string): string {
+		if (path.isAbsolute(importPath) && fileSystem.exists(importPath)) {
+			return importPath;
+		}
+
+		try {
+			return getAppBuildAdapter(this.appConfig).resolve(importPath, rootDir);
+		} catch {
+			return this.resolveModulePathFallback(importPath, rootDir);
+		}
+	}
+
+	private resolveModulePathFallback(importPath: string, rootDir: string, maxDepth = 5): string {
+		let currentDir = rootDir;
+		let remainingDepth = maxDepth;
+
+		while (remainingDepth >= 0) {
+			const modulePath = path.join(currentDir, 'node_modules', importPath);
+			if (fileSystem.exists(modulePath)) {
+				return modulePath;
+			}
+
+			const parentDir = path.dirname(currentDir);
+			if (parentDir === currentDir) {
+				break;
+			}
+
+			currentDir = parentDir;
+			remainingDepth -= 1;
+		}
+
+		throw new Error(`Could not resolve module '${importPath}' from '${rootDir}'`);
+	}
+}

package/src/services/assets/asset-processing-service/processors/stylesheet/content-stylesheet.processor.test.ts

@@ -0,0 +1,261 @@
+import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
+import { fileSystem } from '@ecopages/file-system';
+import { ContentStylesheetProcessor } from './content-stylesheet.processor';
+import type { EcoPagesAppConfig } from '../../../../../types/internal-types';
+import type { ContentStylesheetAsset } from '../../assets.types';
+import { Processor } from '../../../../../plugins/processor.ts';
+
+function createMockConfig(processors = new Map<string, Processor>()): EcoPagesAppConfig {
+	return {
+		baseUrl: 'http://localhost:3000',
+		rootDir: '/test/project',
+		srcDir: 'src',
+		publicDir: 'public',
+		pagesDir: 'pages',
+		includesDir: 'includes',
+		layoutsDir: 'layouts',
+		distDir: '.eco/public',
+		workDir: '.eco',
+		templatesExt: [],
+		componentsDir: 'components',
+		robotsTxt: { preferences: { '*': [] } },
+		additionalWatchPaths: [],
+		defaultMetadata: { title: 'Test', description: 'Test' },
+		integrations: [],
+		integrationsDependencies: [],
+		absolutePaths: {
+			config: '/test/project/eco.config.ts',
+			componentsDir: '/test/project/src/components',
+			distDir: '/test/project/.eco/public',
+			workDir: '/test/project/.eco',
+			includesDir: '/test/project/src/includes',
+			layoutsDir: '/test/project/src/layouts',
+			pagesDir: '/test/project/src/pages',
+			projectDir: '/test/project',
+			publicDir: '/test/project/public',
+			srcDir: '/test/project/src',
+			htmlTemplatePath: '/test/project/src/html.tsx',
+			error404TemplatePath: '/test/project/src/404.tsx',
+		},
+		processors,
+		loaders: new Map(),
+		sourceTransforms: new Map(),
+	};
+}
+
+class TestStylesheetProcessor extends Processor {
+	readonly buildPlugins = undefined;
+	readonly plugins = undefined;
+
+	constructor() {
+		super({
+			name: 'bundled-css',
+			capabilities: [{ kind: 'stylesheet' }],
+		});
+	}
+
+	async setup(): Promise<void> {}
+
+	async teardown(): Promise<void> {}
+
+	async process(input: unknown): Promise<unknown> {
+		return typeof input === 'string' ? input.replace('red', 'green') : input;
+	}
+}
+
+describe('ContentStylesheetProcessor', () => {
+	let writeMock: ReturnType<typeof vi.spyOn>;
+
+	beforeEach(() => {
+		writeMock = vi.spyOn(fileSystem, 'write').mockImplementation(() => {});
+		vi.spyOn(fileSystem, 'exists').mockImplementation(() => true);
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	describe('process - file-based stylesheet', () => {
+		test('should write stylesheet file when not inline', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: 'body { color: red; }',
+				inline: false,
+			};
+
+			const result = await processor.process(dep);
+
+			expect(writeMock).toHaveBeenCalled();
+			expect(result.filepath).toBeDefined();
+			expect(result.filepath).toContain('style-');
+			expect(result.filepath).toContain('.css');
+			expect(result.kind).toBe('stylesheet');
+			expect(result.inline).toBe(false);
+			expect(result.content).toBeUndefined();
+		});
+
+		test('should include hash in filename', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: 'body { color: blue; }',
+				inline: false,
+			};
+
+			const result = await processor.process(dep);
+
+			expect(result.filepath).toMatch(/style-\d+\.css$/);
+		});
+	});
+
+	describe('process - inline stylesheet', () => {
+		test('should return content without writing file when inline', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.inline { display: flex; }',
+				inline: true,
+			};
+
+			const result = await processor.process(dep);
+
+			expect(writeMock).not.toHaveBeenCalled();
+			expect(result.inline).toBe(true);
+			expect(result.content).toBe('.inline { display: flex; }');
+			expect(result.filepath).toBeUndefined();
+		});
+	});
+
+	describe('process - caching', () => {
+		test('should return cached result on subsequent calls', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.cached { margin: 0; }',
+				inline: false,
+			};
+
+			const result1 = await processor.process(dep);
+			const result2 = await processor.process(dep);
+
+			expect(writeMock.mock.calls.length).toBe(1);
+			expect(result1).toEqual(result2);
+		});
+
+		test('should use different cache keys for different content', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep1: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.first { padding: 10px; }',
+				inline: false,
+			};
+
+			const dep2: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.second { padding: 20px; }',
+				inline: false,
+			};
+
+			await processor.process(dep1);
+			await processor.process(dep2);
+
+			expect(writeMock.mock.calls.length).toBe(2);
+		});
+	});
+
+	describe('process - attributes and position', () => {
+		test('should preserve attributes from dependency', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.styled { color: green; }',
+				inline: true,
+				attributes: { 'data-theme': 'dark' },
+			};
+
+			const result = await processor.process(dep);
+
+			expect(result.attributes).toEqual({ 'data-theme': 'dark' });
+		});
+
+		test('should preserve position from dependency', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.head-style { font-size: 16px; }',
+				inline: true,
+				position: 'head',
+			};
+
+			const result = await processor.process(dep);
+
+			expect(result.position).toBe('head');
+		});
+
+		test('should return updated attributes when cached asset is retrieved with different attributes', async () => {
+			const processor = new ContentStylesheetProcessor({ appConfig: createMockConfig() });
+
+			const depWithMedia: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.cached-style { color: red; }',
+				inline: false,
+				attributes: { media: 'screen' },
+				position: 'head',
+			};
+
+			const depWithPrint: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: '.cached-style { color: red; }',
+				inline: false,
+				attributes: { media: 'print' },
+				position: 'body',
+			};
+
+			const result1 = await processor.process(depWithMedia);
+			const result2 = await processor.process(depWithPrint);
+
+			expect(result1.attributes).toEqual({ media: 'screen' });
+			expect(result1.position).toBe('head');
+			expect(result2.attributes).toEqual({ media: 'print' });
+			expect(result2.position).toBe('body');
+		});
+	});
+
+	describe('process - stylesheet processors', () => {
+		test('should apply configured stylesheet processors to bundled content', async () => {
+			const processors = new Map<string, Processor>([['bundled-css', new TestStylesheetProcessor()]]);
+			const processor = new ContentStylesheetProcessor({
+				appConfig: createMockConfig(processors),
+			});
+
+			const dep: ContentStylesheetAsset = {
+				kind: 'stylesheet',
+				source: 'content',
+				content: 'body { color: red; }',
+				inline: true,
+			};
+
+			const result = await processor.process(dep);
+
+			expect(result.content).toBe('body { color: green; }');
+		});
+	});
+});

package/src/services/assets/asset-processing-service/processors/stylesheet/content-stylesheet.processor.ts

@@ -0,0 +1,71 @@
+import path from 'node:path';
+import { fileSystem } from '@ecopages/file-system';
+import type { ContentStylesheetAsset, ProcessedAsset } from '../../assets.types.ts';
+import { BaseProcessor } from '../base/base-processor.ts';
+
+export class ContentStylesheetProcessor extends BaseProcessor<ContentStylesheetAsset> {
+	private static readonly PROCESSABLE_STYLESHEET_EXTENSIONS = new Set(['.css', '.scss', '.sass', '.less']);
+
+	private isProcessableStylesheet(filepath: string): boolean {
+		return ContentStylesheetProcessor.PROCESSABLE_STYLESHEET_EXTENSIONS.has(path.extname(filepath));
+	}
+
+	private async applyStylesheetProcessors(content: string, filepath: string): Promise<string> {
+		if (!this.isProcessableStylesheet(filepath)) {
+			return content;
+		}
+
+		let transformedContent = content;
+		const processors = this.appConfig.processors ? Array.from(this.appConfig.processors.values()) : [];
+
+		for (const processor of processors) {
+			const hasCapabilities = processor.getAssetCapabilities().length > 0;
+			const canProcessStylesheet = processor.canProcessAsset('stylesheet', filepath);
+
+			if (!canProcessStylesheet && (hasCapabilities || !processor.getName().includes('postcss'))) {
+				continue;
+			}
+
+			if (!processor.matchesFileFilter(filepath)) {
+				continue;
+			}
+
+			const result = await processor.process(transformedContent, filepath);
+
+			if (typeof result === 'string') {
+				transformedContent = result;
+				continue;
+			}
+
+			if (result instanceof Buffer) {
+				transformedContent = result.toString();
+			}
+		}
+
+		return transformedContent;
+	}
+
+	async process(dep: ContentStylesheetAsset): Promise<ProcessedAsset> {
+		const virtualFilepath = path.join(this.appConfig.absolutePaths.distDir, 'styles', 'page-bundle.css');
+		const processedContent = await this.applyStylesheetProcessors(dep.content, virtualFilepath);
+		const hash = this.generateHash(processedContent);
+		const filename = `style-${hash}.css`;
+		const cachekey = this.buildCacheKey(filename, hash, dep);
+
+		return this.getOrProcess(cachekey, () => {
+			const filepath = path.join(this.getAssetsDir(), 'styles', filename);
+
+			if (!dep.inline) fileSystem.write(filepath, processedContent);
+
+			return {
+				filepath: dep.inline ? undefined : filepath,
+				content: dep.inline ? processedContent : undefined,
+				kind: 'stylesheet',
+				position: dep.position,
+				attributes: dep.attributes,
+				inline: dep.inline,
+				packageRole: dep.packageRole,
+			};
+		});
+	}
+}

package/src/services/assets/asset-processing-service/processors/stylesheet/file-stylesheet.processor.ts

@@ -0,0 +1,81 @@
+import path from 'node:path';
+import { fileSystem } from '@ecopages/file-system';
+import type { FileStylesheetAsset, ProcessedAsset } from '../../assets.types.ts';
+import { BaseProcessor } from '../base/base-processor.ts';
+
+export class FileStylesheetProcessor extends BaseProcessor<FileStylesheetAsset> {
+	private static readonly PROCESSABLE_STYLESHEET_EXTENSIONS = new Set(['.css', '.scss', '.sass', '.less']);
+
+	getStyleContent = (srcUrl: string): Buffer => {
+		return fileSystem.readFileAsBuffer(srcUrl);
+	};
+
+	private isProcessableStylesheet(filepath: string): boolean {
+		return FileStylesheetProcessor.PROCESSABLE_STYLESHEET_EXTENSIONS.has(path.extname(filepath));
+	}
+
+	private async applyStylesheetProcessors(content: string, filepath: string): Promise<string> {
+		if (!this.isProcessableStylesheet(filepath)) {
+			return content;
+		}
+
+		let transformedContent = content;
+
+		for (const processor of this.appConfig.processors.values()) {
+			const hasCapabilities = processor.getAssetCapabilities().length > 0;
+			const canProcessStylesheet = processor.canProcessAsset('stylesheet', filepath);
+
+			if (!canProcessStylesheet && (hasCapabilities || !processor.getName().includes('postcss'))) {
+				continue;
+			}
+
+			if (!processor.matchesFileFilter(filepath)) {
+				continue;
+			}
+
+			const result = await processor.process(transformedContent, filepath);
+
+			if (typeof result === 'string') {
+				transformedContent = result;
+				continue;
+			}
+
+			if (result instanceof Buffer) {
+				transformedContent = result.toString();
+			}
+		}
+
+		return transformedContent;
+	}
+
+	async process(dep: FileStylesheetAsset): Promise<ProcessedAsset> {
+		const buffer = this.getStyleContent(dep.filepath);
+		const rawContent = buffer.toString();
+		const processedContent = await this.applyStylesheetProcessors(rawContent, dep.filepath);
+		const hash = this.generateHash(processedContent);
+		const cachekey = this.buildCacheKey(dep.filepath, hash, dep);
+
+		return this.getOrProcess(cachekey, () => {
+			const filepath = path.join(
+				this.getAssetsDir(),
+				path.relative(this.appConfig.absolutePaths.srcDir, dep.filepath),
+			);
+			const outputBuffer = Buffer.from(processedContent);
+
+			if (!dep.inline) {
+				fileSystem.ensureDir(path.dirname(filepath));
+				fileSystem.write(filepath, outputBuffer);
+			}
+
+			return {
+				filepath: filepath,
+				content: dep.inline ? processedContent : undefined,
+				kind: 'stylesheet',
+				position: dep.position,
+				attributes: dep.attributes,
+				inline: dep.inline,
+				packageRole: dep.packageRole,
+			};
+		});
+	}
+}

package/src/services/assets/asset-processing-service/ungrouped-dependency-processing.ts

@@ -0,0 +1,65 @@
+import { fileSystem } from '@ecopages/file-system';
+import type { AssetProcessor } from './processor.interface.ts';
+import type { AssetDefinition, ProcessedAsset } from './assets.types.ts';
+
+type ProcessUngroupedDependencyOptions = {
+	dep: AssetDefinition;
+	key: string;
+	depKey: string;
+	getCachedAsset: (dep: AssetDefinition, depKey: string) => ProcessedAsset | null;
+	getProcessor: (dep: AssetDefinition) => AssetProcessor | undefined;
+	resolveProcessedAssetSrcUrl: (processed: ProcessedAsset) => string | undefined;
+	setCachedAsset: (dep: AssetDefinition, depKey: string, processed: ProcessedAsset) => void;
+	logMissingProcessor: (dep: AssetDefinition) => void;
+	logMissingFile: (dep: AssetDefinition & { filepath: string }) => void;
+	logProcessingError: (dep: AssetDefinition, error: unknown) => void;
+};
+
+export async function processUngroupedDependency(
+	options: ProcessUngroupedDependencyOptions,
+): Promise<ProcessedAsset | null> {
+	const {
+		dep,
+		key,
+		depKey,
+		getCachedAsset,
+		getProcessor,
+		resolveProcessedAssetSrcUrl,
+		setCachedAsset,
+		logMissingProcessor,
+		logMissingFile,
+		logProcessingError,
+	} = options;
+	const cached = getCachedAsset(dep, depKey);
+
+	if (cached) {
+		return { key, ...cached } as ProcessedAsset;
+	}
+
+	const processor = getProcessor(dep);
+	if (!processor) {
+		logMissingProcessor(dep);
+		return null;
+	}
+
+	if (dep.source === 'file' && 'filepath' in dep && !fileSystem.exists(dep.filepath)) {
+		logMissingFile(dep);
+		return null;
+	}
+
+	try {
+		const processed = await processor.process(dep);
+		const srcUrl = resolveProcessedAssetSrcUrl(processed);
+		const processedWithKey = {
+			key,
+			...processed,
+			srcUrl,
+		};
+
+		setCachedAsset(dep, depKey, processedWithKey);
+		return processedWithKey as ProcessedAsset;
+	} catch (error) {
+		logProcessingError(dep, error);
+		return null;
+	}
+}

package/src/services/assets/browser-bundle.service.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ViteHostBuildAdapter } from '../../build/build-adapter.ts';
+import { BrowserBundleService } from './browser-bundle.service.ts';
+
+describe('BrowserBundleService', () => {
+	it('routes browser bundle requests through the app executor with profile defaults', async () => {
+		const build = vi.fn(async () => ({
+			success: true,
+			logs: [],
+			outputs: [{ path: '/tmp/out/entry.js' }],
+		}));
+		const service = new BrowserBundleService({
+			runtime: {
+				buildAdapter: {
+					getTranspileOptions: () => ({
+						target: 'browser',
+						format: 'esm',
+						sourcemap: 'none',
+					}),
+				},
+				buildExecutor: { build },
+			},
+			loaders: new Map(),
+		} as any);
+
+		await service.bundle({
+			profile: 'browser-script',
+			entrypoints: ['/tmp/entry.ts'],
+			outdir: '/tmp/out',
+			minify: false,
+			naming: '[name].js',
+		});
+
+		expect(build).toHaveBeenCalledWith(
+			expect.objectContaining({
+				entrypoints: ['/tmp/entry.ts'],
+				outdir: '/tmp/out',
+				target: 'browser',
+				format: 'esm',
+				sourcemap: 'none',
+			}),
+		);
+	});
+
+	it('fails fast when a Vite-hosted app tries to use the Bun browser bundle seam', async () => {
+		const service = new BrowserBundleService({
+			runtime: {
+				buildAdapter: new ViteHostBuildAdapter(),
+				buildExecutor: {
+					build: vi.fn(),
+				},
+			},
+			loaders: new Map(),
+		} as any);
+
+		await expect(
+			service.bundle({
+				profile: 'browser-script',
+				entrypoints: ['/tmp/entry.ts'],
+				outdir: '/tmp/out',
+				minify: false,
+				naming: '[name].js',
+			}),
+		).rejects.toThrow(/Vite-hosted builds are owned by the host runtime/);
+	});
+});