npm - @ecopages/core - Versions diffs - 0.2.0-alpha.26 → 0.2.0-alpha.27 - Mend

@ecopages/core 0.2.0-alpha.26 → 0.2.0-alpha.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (550) hide show

package/src/integrations/ghtml/ghtml-renderer.test.ts ADDED Viewed

@@ -0,0 +1,253 @@
+import { describe, expect, it } from 'vitest';
+import HtmlTemplate from '../../../__fixtures__/app/src/includes/html.ghtml.js';
+import { FIXTURE_APP_PROJECT_DIR } from '../../../__fixtures__/constants.js';
+import {
+	eco,
+	type ForeignSubtreeRenderPayload,
+	type EcoComponent,
+	type EcoPagesElement,
+	type HtmlTemplateProps,
+} from '../../index.ts';
+import { ConfigBuilder } from '../../config/config-builder.ts';
+import { IntegrationPlugin } from '../../plugins/integration-plugin.ts';
+import {
+	IntegrationRenderer,
+	type RenderToResponseContext,
+} from '../../route-renderer/orchestration/integration-renderer.ts';
+import { GhtmlRenderer } from './ghtml-renderer.ts';
+const appConfig = await new ConfigBuilder().setRootDir(FIXTURE_APP_PROJECT_DIR).build();
+const metadata = {
+	title: 'Ecopages',
+	description: 'Ecopages',
+};
+const pageBody = '<body>Hello World</body>';
+const TestHtmlTemplate: EcoComponent<HtmlTemplateProps> = async ({ children }) => {
+	return `<html><body>${children}</body></html>`;
+};
+class TestGhtmlRenderer extends GhtmlRenderer {
+	htmlTemplate: EcoComponent<HtmlTemplateProps> = TestHtmlTemplate;
+	protected override async getHtmlTemplate(): Promise<EcoComponent<HtmlTemplateProps>> {
+		return this.htmlTemplate;
+	}
+}
+const createRenderer = (config = appConfig) =>
+	new TestGhtmlRenderer({
+		appConfig: config,
+		assetProcessingService: {} as any,
+		runtimeOrigin: 'http://localhost:3000',
+		resolvedIntegrationDependencies: [],
+	});
+class DeferredRenderer extends IntegrationRenderer<EcoPagesElement> {
+	name = 'deferred';
+	async render(): Promise<string> {
+		return '';
+	}
+	override async renderComponent() {
+		return {
+			html: '<button data-testid="deferred-widget">Deferred widget</button>',
+			canAttachAttributes: true,
+			rootTag: 'button',
+			integrationName: this.name,
+		};
+	}
+	async renderToResponse<P = Record<string, unknown>>(
+		_view: EcoComponent<P>,
+		_props: P,
+		_ctx: RenderToResponseContext,
+	) {
+		return new Response('');
+	}
+}
+class DeferredPlugin extends IntegrationPlugin<EcoPagesElement> {
+	renderer = DeferredRenderer;
+	constructor() {
+		super({
+			name: 'deferred',
+			extensions: ['.deferred.ts'],
+		});
+	}
+}
+describe('GhtmlRenderer', () => {
+	it('should render the page', async () => {
+		const renderer = createRenderer();
+		const body = await renderer.render({
+			params: {},
+			query: {},
+			props: {},
+			file: 'file',
+			metadata,
+			Page: async () => pageBody,
+			resolvedDependencies: [],
+			HtmlTemplate,
+		});
+		expect(body).toContain('<!DOCTYPE html>');
+		expect(body).toContain('<body>Hello World</body>');
+		expect(body).toContain('<title>Ecopages</title>');
+		expect(body).toContain('<meta name="description" content="Ecopages" />');
+	});
+	it('should throw an error if the page fails to render', async () => {
+		const renderer = createRenderer();
+		await expect(
+			renderer.render({
+				params: {},
+				query: {},
+				props: {},
+				file: 'file',
+				resolvedDependencies: [],
+				metadata,
+				Page: async () => {
+					throw new Error('Page failed to render');
+				},
+				HtmlTemplate,
+			}),
+		).rejects.toThrow('Error rendering page: Page failed to render');
+	});
+	it('should resolve deferred foreign layout content without unresolved eco-marker artifacts', async () => {
+		const deferredPlugin = new DeferredPlugin();
+		const config = await new ConfigBuilder()
+			.setRootDir(FIXTURE_APP_PROJECT_DIR)
+			.setRobotsTxt({
+				preferences: {
+					'*': [],
+				},
+			})
+			.setIntegrations([deferredPlugin])
+			.setDefaultMetadata(metadata)
+			.setBaseUrl('http://localhost:3000')
+			.build();
+		deferredPlugin.setConfig(config);
+		deferredPlugin.setRuntimeOrigin('http://localhost:3000');
+		const renderer = createRenderer(config);
+		const DeferredWidget = eco.component<{}, string>({
+			integration: 'deferred',
+			render: () => '<button data-testid="deferred-widget">Deferred widget</button>',
+		});
+		DeferredWidget.config = {
+			...DeferredWidget.config,
+			__eco: {
+				id: 'deferred-widget',
+				file: '/app/components/deferred-widget.deferred.ts',
+				integration: 'deferred',
+			},
+		};
+		const Layout = eco.layout<string>({
+			dependencies: {
+				components: [DeferredWidget],
+			},
+			render: ({ children }) => `<main class="layout">${children}${DeferredWidget({})}</main>`,
+		});
+		const body = await renderer.render({
+			params: {},
+			query: {},
+			props: {},
+			file: 'file',
+			metadata,
+			Page: async () => '<section>Page</section>',
+			Layout,
+			resolvedDependencies: [],
+			HtmlTemplate: TestHtmlTemplate,
+			pageProps: {},
+		});
+		expect(body).toContain('<button data-testid="deferred-widget">Deferred widget</button>');
+		expect(body).not.toContain('<eco-marker');
+	});
+	it('should expose the compatibility foreign-subtree payload contract', async () => {
+		const renderer = createRenderer();
+		const Component = (async () => '<main>Foreign Subtree</main>') as EcoComponent<Record<string, unknown>>;
+		const result = await renderer.renderForeignSubtree({
+			component: Component,
+			props: {},
+		});
+		expect(result).toEqual<ForeignSubtreeRenderPayload>({
+			html: '<main>Foreign Subtree</main>',
+			assets: [],
+			rootTag: 'main',
+			rootAttributes: undefined,
+			attachmentPolicy: { kind: 'first-element' },
+			integrationName: 'ghtml',
+		});
+	});
+	describe('renderToResponse', () => {
+		it('should render a view with default status 200', async () => {
+			const renderer = createRenderer();
+			const View = (async (props: { title: string }) => `<h1>${props.title}</h1>`) as EcoComponent<{
+				title: string;
+			}>;
+			const response = await renderer.renderToResponse(View, { title: 'Hello Ghtml' }, {});
+			expect(response.status).toBe(200);
+			expect(response.headers.get('Content-Type')).toBe('text/html; charset=utf-8');
+			await expect(response.text()).resolves.toContain('<h1>Hello Ghtml</h1>');
+		});
+		it('should render a partial view without a full html wrapper', async () => {
+			const renderer = createRenderer();
+			const View = (async (props: { content: string }) => `<div>${props.content}</div>`) as EcoComponent<{
+				content: string;
+			}>;
+			const response = await renderer.renderToResponse(View, { content: 'Partial' }, { partial: true });
+			const body = await response.text();
+			expect(body).toBe('<div>Partial</div>');
+			expect(body).not.toContain('<!DOCTYPE html>');
+		});
+		it('should render with layout when not partial', async () => {
+			const renderer = createRenderer();
+			const Layout = (async ({ children }: { children: string }) =>
+				`<main class="layout">${children}</main>`) as EcoComponent<{ children: string }>;
+			const View = (async (props: { message: string }) => `<p>${props.message}</p>`) as EcoComponent<{
+				message: string;
+			}>;
+			View.config = { layout: Layout };
+			const response = await renderer.renderToResponse(View, { message: 'With Layout' }, {});
+			const body = await response.text();
+			expect(body).toContain('<main class="layout">');
+			expect(body).toContain('<p>With Layout</p>');
+		});
+		it('should throw an error if the view fails to render', async () => {
+			const renderer = createRenderer();
+			const View = (async () => {
+				throw new Error('View failed to render');
+			}) as EcoComponent<object>;
+			await expect(renderer.renderToResponse(View, {}, {})).rejects.toThrow(
+				'Error rendering view: View failed to render',
+			);
+		});
+	});
+});

package/src/integrations/ghtml/ghtml-renderer.ts ADDED Viewed

@@ -0,0 +1,87 @@
+/**
+ * This module contains the ghtml renderer
+ * @module
+ */
+import type {
+	ComponentRenderInput,
+	ComponentRenderResult,
+	EcoComponent,
+	EcoPagesElement,
+	IntegrationRendererRenderOptions,
+	RouteRendererBody,
+} from '../../types/public-types.ts';
+import {
+	IntegrationRenderer,
+	type RenderToResponseContext,
+} from '../../route-renderer/orchestration/integration-renderer.ts';
+import { GHTML_PLUGIN_NAME } from './ghtml.constants.ts';
+type GhtmlViewFn<P> = (props: P) => Promise<EcoPagesElement> | EcoPagesElement;
+type GhtmlLayoutFn = (
+	props: { children: string } & Record<string, unknown>,
+) => Promise<EcoPagesElement> | EcoPagesElement;
+/**
+ * A renderer for the ghtml integration.
+ * It renders a page using the HtmlTemplate and Page components.
+ */
+export class GhtmlRenderer extends IntegrationRenderer<EcoPagesElement> {
+	name = GHTML_PLUGIN_NAME;
+	override async renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult> {
+		return this.renderStringComponentWithQueuedForeignSubtrees(
+			input,
+			input.component as GhtmlViewFn<Record<string, unknown>>,
+		);
+	}
+	async render({
+		params,
+		query,
+		props,
+		locals,
+		pageLocals,
+		metadata,
+		Page,
+		Layout,
+		HtmlTemplate,
+	}: IntegrationRendererRenderOptions): Promise<RouteRendererBody> {
+		try {
+			return await this.renderPageWithDocumentShell({
+				page: {
+					component: Page as EcoComponent,
+					props: { params, query, ...props, locals: pageLocals },
+				},
+				layout: Layout
+					? {
+							component: Layout as EcoComponent,
+							props: locals ? { locals } : {},
+						}
+					: undefined,
+				htmlTemplate: HtmlTemplate as EcoComponent,
+				metadata,
+				pageProps: props ?? {},
+			});
+		} catch (error) {
+			throw this.createRenderError('Error rendering page', error);
+		}
+	}
+	async renderToResponse<P = Record<string, unknown>>(
+		view: EcoComponent<P>,
+		props: P,
+		ctx: RenderToResponseContext,
+	): Promise<Response> {
+		try {
+			return await this.renderViewWithDocumentShell({
+				view,
+				props,
+				ctx,
+				layout: view.config?.layout as GhtmlLayoutFn | undefined,
+			});
+		} catch (error) {
+			throw this.createRenderError('Error rendering view', error);
+		}
+	}
+}

package/src/integrations/ghtml/ghtml.constants.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const GHTML_PLUGIN_NAME = 'ghtml';

package/src/integrations/ghtml/ghtml.plugin.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { IntegrationPlugin, type IntegrationPluginConfig } from '../../plugins/integration-plugin.ts';
+import { GhtmlRenderer } from './ghtml-renderer.ts';
+import { GHTML_PLUGIN_NAME } from './ghtml.constants.ts';
+/**
+ * The Ghtml plugin class
+ * This plugin provides support for ghtml components in Ecopages
+ */
+export class GhtmlPlugin extends IntegrationPlugin {
+	renderer = GhtmlRenderer;
+	constructor(options?: Omit<IntegrationPluginConfig, 'name'>) {
+		super({
+			name: GHTML_PLUGIN_NAME,
+			extensions: ['.ghtml.ts', '.ghtml.tsx', '.ghtml'],
+			...options,
+		});
+	}
+}
+/**
+ * Factory function to create a Ghtml plugin instance
+ * @param options Configuration options for the Ghtml plugin
+ * @returns A new GhtmlPlugin instance
+ */
+export function ghtmlPlugin(options?: Omit<IntegrationPluginConfig, 'name'>): GhtmlPlugin {
+	return new GhtmlPlugin(options);
+}

package/src/plugins/alias-resolver-plugin.test.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { test } from 'vitest';
+import type { EcoBuildOnResolveResult } from '../build/build-types.ts';
+import { createAliasResolverPlugin } from './alias-resolver-plugin.ts';
+test('createAliasResolverPlugin resolves @ aliases to concrete barrel targets', async () => {
+	const rootDir = fs.mkdtempSync(path.join(tmpdir(), 'ecopages-alias-resolver-'));
+	const srcDir = path.join(rootDir, 'src');
+	const layoutDir = path.join(srcDir, 'layouts', 'base-layout');
+	fs.mkdirSync(layoutDir, { recursive: true });
+	fs.writeFileSync(path.join(layoutDir, 'base-layout.kita.tsx'), 'export const BaseLayout = {};\n', 'utf8');
+	fs.writeFileSync(path.join(layoutDir, 'index.ts'), "export * from './base-layout.kita';\n", 'utf8');
+	try {
+		const registrations: Array<{
+			filter: RegExp;
+			callback: (args: {
+				path: string;
+			}) => EcoBuildOnResolveResult | undefined | Promise<EcoBuildOnResolveResult | undefined>;
+		}> = [];
+		const plugin = createAliasResolverPlugin(srcDir);
+		plugin.setup({
+			onResolve(options, callback) {
+				registrations.push({ filter: options.filter, callback });
+			},
+			onLoad() {},
+			module() {},
+		});
+		assert.equal(registrations.length, 1);
+		assert.deepEqual(await registrations[0]?.callback({ path: '@/layouts/base-layout' }), {
+			path: path.join(layoutDir, 'base-layout.kita.tsx'),
+		});
+	} finally {
+		fs.rmSync(rootDir, { recursive: true, force: true });
+	}
+});

package/src/plugins/alias-resolver-plugin.ts ADDED Viewed

@@ -0,0 +1,63 @@
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import type { EcoBuildPlugin } from '../build/build-types.ts';
+const RESOLVABLE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.mdx', '.css', '.scss', '.sass', '.less'];
+function findResolvablePath(candidate: string): string | undefined {
+	if (path.extname(candidate)) {
+		if (existsSync(candidate)) {
+			return candidate;
+		}
+	}
+	for (const extension of RESOLVABLE_EXTENSIONS) {
+		const fileCandidate = `${candidate}${extension}`;
+		if (existsSync(fileCandidate)) {
+			return fileCandidate;
+		}
+	}
+	for (const extension of RESOLVABLE_EXTENSIONS) {
+		const indexCandidate = path.join(candidate, `index${extension}`);
+		if (existsSync(indexCandidate)) {
+			return indexCandidate;
+		}
+	}
+	return undefined;
+}
+function resolveAliasedBarrelTarget(resolvedPath: string): string {
+	if (!path.basename(resolvedPath).startsWith('index.')) {
+		return resolvedPath;
+	}
+	const source = readFileSync(resolvedPath, 'utf8').trim();
+	const match = source.match(/^export\s+\*\s+from\s+['"]([^'"]+)['"]\s*;?$/);
+	if (!match?.[1]?.startsWith('.')) {
+		return resolvedPath;
+	}
+	const target = findResolvablePath(path.resolve(path.dirname(resolvedPath), match[1]));
+	return target ?? resolvedPath;
+}
+export function createAliasResolverPlugin(srcDir: string): EcoBuildPlugin {
+	return {
+		name: 'ecopages-alias-resolver',
+		setup(build) {
+			build.onResolve({ filter: /^@\// }, (args) => {
+				const candidate = path.join(srcDir, args.path.slice(2));
+				const resolved = findResolvablePath(candidate);
+				if (resolved) {
+					return { path: resolveAliasedBarrelTarget(resolved) };
+				}
+				return {};
+			});
+		},
+	};
+}