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

package/src/route-renderer/orchestration/route-render-orchestrator.ts

@@ -0,0 +1,592 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import type { EcoPagesAppConfig } from '../../types/internal-types.ts';
+import type {
+	ComponentRenderResult,
+	DependencyAttributes,
+	EcoComponent,
+	EcoComponentConfig,
+	EcoPageComponent,
+	EcoPageFile,
+	HtmlTemplateProps,
+	IntegrationRendererRenderOptions,
+	PageBrowserGraphResult,
+	PageMetadataProps,
+	PageProps,
+	ResolvedLazyTrigger,
+	RouteRendererBody,
+	RouteRendererOptions,
+	RouteRenderResult,
+} from '../../types/public-types.ts';
+import {
+	type AssetProcessingService,
+	AssetFactory,
+	createPagePackage,
+	type ProcessedAsset,
+} from '../../services/assets/asset-processing-service/index.ts';
+import { buildGlobalInjectorBootstrapContent, buildGlobalInjectorMapScript } from '../../eco/global-injector-map.ts';
+import { LocalsAccessError } from '../../errors/locals-access-error.ts';
+import { inspectUnresolvedMarkerArtifactHtml } from './render-output.utils.ts';
+import { OwnershipValidationService } from './ownership-validation.service.ts';
+import { OwnershipPlanningService } from './ownership-planning.service.ts';
+import { dedupeProcessedAssets } from './processed-asset-dedupe.ts';
+
+export type RouteRenderOrchestratorResolvedInputs = {
+	Page: EcoPageFile['default'] | EcoPageComponent<any>;
+	HtmlTemplate: EcoComponent<HtmlTemplateProps>;
+	Layout?: EcoComponent;
+	props: Record<string, unknown>;
+	metadata: PageMetadataProps;
+	integrationSpecificProps: Record<string, unknown>;
+};
+
+export type RouteRenderOrchestratorResolvedAssets = {
+	resolvedDependencies: ProcessedAsset[];
+	pageBrowserGraph?: PageBrowserGraphResult;
+};
+
+/**
+ * Structural HTML work applied after the route body has been fully resolved.
+ *
+ * The shared route flow only needs to know whether a post-render HTML step
+ * exists. When `finalizeHtml` is absent, the captured body can be reused as-is.
+ */
+export type RouteHtmlFinalization = {
+	finalizeHtml?(html: string): string;
+};
+
+function createPageLocalsProxy(filePath: string): Record<string, never> {
+	const errorMessage = `[ecopages] Request locals are only available during request-time rendering with cache: 'dynamic'. Page: ${filePath}. If you meant to use locals here, set cache: 'dynamic' and provide locals from route middleware/handlers.`;
+
+	return new Proxy(
+		{},
+		{
+			get: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+			set: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+			has: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+			ownKeys: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+			deleteProperty: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+			defineProperty: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+			getOwnPropertyDescriptor: () => {
+				throw new LocalsAccessError(errorMessage);
+			},
+		},
+	);
+}
+
+export interface RouteRenderOrchestratorAdapter<C> {
+	/**
+	 * Name of the owning Integration for the current route render.
+	 */
+	readonly name: string;
+	/**
+	 * Loads the Integration-owned route inputs needed for one Page render.
+	 */
+	resolveRouteRenderInputs(routeOptions: RouteRendererOptions): Promise<RouteRenderOrchestratorResolvedInputs>;
+	/**
+	 * Resolves route-owned assets needed before Integration rendering starts.
+	 */
+	resolveRouteAssets(input: {
+		routeOptions: RouteRendererOptions;
+		components: (EcoComponent | Partial<EcoComponent>)[];
+	}): Promise<RouteRenderOrchestratorResolvedAssets>;
+	/**
+	 * Resolves the optional page-root render through the foreign-child-aware component contract.
+	 */
+	resolveRoutePageComponentRender(input: {
+		Page: EcoComponent;
+		Layout?: EcoComponent;
+		props: Record<string, unknown>;
+		routeOptions: RouteRendererOptions;
+	}): Promise<ComponentRenderResult | undefined>;
+	/**
+	 * Executes the Integration-specific route render.
+	 */
+	renderRouteBody(renderOptions: IntegrationRendererRenderOptions<C>): Promise<RouteRendererBody>;
+	/**
+	 * Returns the structural Html finalization plan for one prepared route render.
+	 */
+	getRouteHtmlFinalization(renderOptions: IntegrationRendererRenderOptions<C>): RouteHtmlFinalization;
+	/**
+	 * Runs SSR-policy response transformation and returns the body value exposed to callers.
+	 */
+	transformRouteResponse(response: Response): Promise<RouteRendererBody>;
+}
+
+/**
+ * Captured route-render output in both replayable body and string HTML forms.
+ */
+export interface CapturedHtmlRenderResult {
+	body: RouteRendererBody;
+	html: string;
+}
+
+/**
+ * Optional app-scoped collaborators used by the route render orchestrator.
+ */
+export interface RouteRenderOrchestratorDependencies {
+	ownershipPlanningService?: OwnershipPlanningService;
+	ownershipValidationService?: OwnershipValidationService;
+}
+
+/**
+ * Owns one route render from normalized module loading through final HTML output.
+ *
+ * This orchestrator keeps route rendering as one app-scoped unit while still
+ * delegating integration-specific behavior through the adapter seam. It owns
+ * route-root validation, dependency aggregation, page package creation, and the
+ * final HTML/body handling that happens after the integration render returns.
+ */
+export class RouteRenderOrchestrator {
+	private readonly appConfig: EcoPagesAppConfig;
+	private readonly assetProcessingService: AssetProcessingService;
+	private readonly ownershipPlanningService: OwnershipPlanningService;
+	private readonly ownershipValidationService: OwnershipValidationService;
+
+	constructor(
+		appConfig: EcoPagesAppConfig,
+		assetProcessingService: AssetProcessingService,
+		dependencies: RouteRenderOrchestratorDependencies = {},
+	) {
+		this.appConfig = appConfig;
+		this.assetProcessingService = assetProcessingService;
+		this.ownershipPlanningService = dependencies.ownershipPlanningService ?? new OwnershipPlanningService();
+		this.ownershipValidationService =
+			dependencies.ownershipValidationService ?? new OwnershipValidationService(appConfig);
+	}
+
+	/**
+	 * Builds normalized route render options before the integration render runs.
+	 *
+	 * This preparation step validates route-root ownership, resolves page data,
+	 * collects processed assets, captures optional page-root render metadata, and
+	 * produces the page package consumed by downstream HTML transformation.
+	 */
+	async prepareRenderOptions<C = unknown>(
+		routeOptions: RouteRendererOptions,
+		adapter: RouteRenderOrchestratorAdapter<C>,
+	): Promise<IntegrationRendererRenderOptions<C>> {
+		const resolvedInputs = await adapter.resolveRouteRenderInputs(routeOptions);
+		const { Page, HtmlTemplate, Layout, props, metadata, integrationSpecificProps } = resolvedInputs;
+		const validationErrors = this.ownershipValidationService.validate({
+			currentIntegrationName: adapter.name,
+			roots: [
+				{ component: HtmlTemplate as EcoComponent, source: 'html-template' },
+				...(Layout ? [{ component: Layout as EcoComponent, source: 'layout' as const }] : []),
+				{ component: Page as EcoComponent, source: 'page' },
+			],
+		});
+		const ownershipPlan = this.ownershipPlanningService.buildPlan({
+			routeFile: routeOptions.file,
+			currentIntegrationName: adapter.name,
+			HtmlTemplate: HtmlTemplate as EcoComponent,
+			Layout,
+			Page: Page as EcoComponent,
+			validationErrors,
+		});
+
+		const componentsToResolve = Layout ? [HtmlTemplate, Layout, Page] : [HtmlTemplate, Page];
+		const { resolvedDependencies, pageBrowserGraph } = await adapter.resolveRouteAssets({
+			routeOptions,
+			components: componentsToResolve,
+		});
+		const usedIntegrationDependencies = this.collectUsedIntegrationDependencies(componentsToResolve, adapter.name);
+		const allDependencies = [
+			...resolvedDependencies,
+			...usedIntegrationDependencies,
+			...(pageBrowserGraph?.assets ?? []),
+		];
+
+		const componentRender = await adapter.resolveRoutePageComponentRender({
+			Page: Page as EcoComponent,
+			Layout,
+			props,
+			routeOptions,
+		});
+
+		if (componentRender?.assets?.length) {
+			allDependencies.push(...componentRender.assets);
+		}
+
+		const triggers = this.collectResolvedTriggers(componentsToResolve);
+		if (triggers.length > 0) {
+			const globalAssets = await this.buildGlobalInjectorAssets(triggers, adapter.name);
+			allDependencies.push(...globalAssets);
+		}
+
+		const eagerSsrLazyAssets = await this.buildEagerSsrLazyAssets(componentsToResolve, adapter.name);
+		if (eagerSsrLazyAssets.length > 0) {
+			allDependencies.push(...eagerSsrLazyAssets);
+		}
+
+		const dedupedDependencies = dedupeProcessedAssets(allDependencies);
+		const pagePackage = createPagePackage(dedupedDependencies);
+		const pageProps = {
+			...props,
+			params: routeOptions.params || {},
+			query: routeOptions.query || {},
+		};
+		const cacheStrategy = (Page as EcoPageComponent<any>).cache;
+		const defaultCacheStrategy = this.appConfig.cache?.defaultStrategy ?? 'static';
+		const effectiveCacheStrategy = cacheStrategy ?? defaultCacheStrategy;
+		const localsAvailable = effectiveCacheStrategy === 'dynamic' && routeOptions.locals !== undefined;
+
+		const pageLocals = localsAvailable
+			? routeOptions.locals!
+			: (createPageLocalsProxy(routeOptions.file) as RouteRendererOptions['locals']);
+
+		const locals = localsAvailable ? routeOptions.locals : undefined;
+		const preparedOptions: IntegrationRendererRenderOptions<C> = {
+			...routeOptions,
+			resolvedDependencies,
+			pagePackage,
+			componentRender,
+			HtmlTemplate: HtmlTemplate as EcoComponent<HtmlTemplateProps, C>,
+			Layout,
+			props,
+			Page: Page as EcoComponent<PageProps, C>,
+			metadata,
+			params: routeOptions.params || {},
+			query: routeOptions.query || {},
+			pageProps,
+			locals,
+			pageLocals,
+			cacheStrategy,
+			ownershipPlan,
+		};
+
+		return {
+			...integrationSpecificProps,
+			...preparedOptions,
+		};
+	}
+
+	/**
+	 * Captures one route render body as HTML while preserving a replayable body value.
+	 */
+	async captureHtmlRender(render: () => Promise<RouteRendererBody>): Promise<CapturedHtmlRenderResult> {
+		const renderedBody = await render();
+		const capturedRender = await this.captureRenderedBody(renderedBody);
+
+		return {
+			body: capturedRender.body,
+			html: capturedRender.html,
+		};
+	}
+
+	/**
+	 * Executes the full route-render flow and returns the final body plus cache strategy.
+	 */
+	async execute<C = unknown>(
+		options: RouteRendererOptions,
+		adapter: RouteRenderOrchestratorAdapter<C>,
+	): Promise<RouteRenderResult> {
+		const renderOptions = await this.prepareRenderOptions(options, adapter);
+		return this.executePrepared(renderOptions, adapter);
+	}
+
+	/**
+	 * Executes the route-render finalization path for already prepared render options.
+	 */
+	async executePrepared<C = unknown>(
+		renderOptions: IntegrationRendererRenderOptions<C>,
+		adapter: RouteRenderOrchestratorAdapter<C>,
+	): Promise<RouteRenderResult> {
+		const renderExecution = await this.captureHtmlRender(async () => adapter.renderRouteBody(renderOptions));
+		const unresolvedArtifactInspection = inspectUnresolvedMarkerArtifactHtml(renderExecution.html);
+		const htmlFinalization = adapter.getRouteHtmlFinalization(renderOptions);
+		const hasUnresolvedMarkerHtml = unresolvedArtifactInspection.hasUnresolvedMarkerArtifacts;
+
+		if (hasUnresolvedMarkerHtml) {
+			throw new Error(
+				'[ecopages] Route render returned unresolved eco-marker artifact HTML. Full-route unresolved-marker fallback has been removed; resolve mixed foreign children inside renderComponentWithForeignChildren().',
+			);
+		}
+
+		const canReuseCapturedBody = !hasUnresolvedMarkerHtml && htmlFinalization.finalizeHtml === undefined;
+
+		if (canReuseCapturedBody) {
+			const body = await adapter.transformRouteResponse(
+				new Response(renderExecution.body as BodyInit, {
+					headers: {
+						'Content-Type': 'text/html',
+					},
+				}),
+			);
+
+			return {
+				body,
+				cacheStrategy: renderOptions.cacheStrategy,
+			};
+		}
+
+		const finalization = htmlFinalization.finalizeHtml
+			? htmlFinalization.finalizeHtml(unresolvedArtifactInspection.normalizedHtml)
+			: unresolvedArtifactInspection.normalizedHtml;
+
+		const body = await adapter.transformRouteResponse(
+			new Response(finalization, {
+				headers: {
+					'Content-Type': 'text/html',
+				},
+			}),
+		);
+
+		return {
+			body,
+			cacheStrategy: renderOptions.cacheStrategy,
+		};
+	}
+
+	private async captureRenderedBody(body: RouteRendererBody): Promise<{ body: RouteRendererBody; html: string }> {
+		const response = new Response(body as BodyInit);
+
+		if (typeof body === 'string') {
+			return {
+				body,
+				html: await response.text(),
+			};
+		}
+
+		if (!response.body) {
+			return {
+				body,
+				html: await response.text(),
+			};
+		}
+
+		const [capturedBody, replayBody] = response.body.tee();
+
+		return {
+			body: replayBody,
+			html: await new Response(capturedBody).text(),
+		};
+	}
+
+	private collectResolvedTriggers(
+		components: (EcoComponent | Partial<EcoComponent>)[],
+		seen = new Set<object>(),
+	): ResolvedLazyTrigger[] {
+		const triggers: ResolvedLazyTrigger[] = [];
+		for (const comp of components) {
+			if (!comp) {
+				continue;
+			}
+
+			const ecoComp = comp as EcoComponent;
+			if (seen.has(ecoComp)) {
+				continue;
+			}
+			seen.add(ecoComp);
+			const ownTriggers = ecoComp.config?._resolvedLazyTriggers;
+			if (ownTriggers?.length) {
+				triggers.push(...ownTriggers);
+			}
+			const nested = ecoComp.config?.dependencies?.components;
+			if (nested?.length) {
+				triggers.push(...this.collectResolvedTriggers(nested, seen));
+			}
+		}
+		return triggers;
+	}
+
+	private collectUsedIntegrationDependencies(
+		components: (EcoComponent | Partial<EcoComponent>)[],
+		currentIntegrationName: string,
+	): ProcessedAsset[] {
+		const integrationNames = this.collectIntegrationNames(components);
+		const dependencies: ProcessedAsset[] = [];
+
+		for (const integrationName of integrationNames) {
+			if (integrationName === currentIntegrationName) {
+				continue;
+			}
+
+			const integrationPlugin = this.appConfig.integrations.find(
+				(integration) => integration.name === integrationName,
+			);
+			if (!integrationPlugin || typeof integrationPlugin.getResolvedIntegrationDependencies !== 'function') {
+				continue;
+			}
+
+			dependencies.push(...integrationPlugin.getResolvedIntegrationDependencies());
+		}
+
+		return dependencies;
+	}
+
+	private collectIntegrationNames(
+		components: (EcoComponent | Partial<EcoComponent>)[],
+		seen = new Set<object>(),
+	): Set<string> {
+		const integrationNames = new Set<string>();
+
+		for (const comp of components) {
+			if (!comp) {
+				continue;
+			}
+
+			const ecoComp = comp as EcoComponent;
+			if (seen.has(ecoComp)) {
+				continue;
+			}
+			seen.add(ecoComp);
+
+			const integrationName = ecoComp.config?.integration ?? ecoComp.config?.__eco?.integration;
+			if (integrationName) {
+				integrationNames.add(integrationName);
+			}
+
+			const nested = ecoComp.config?.dependencies?.components;
+			if (nested?.length) {
+				const nestedNames = this.collectIntegrationNames(nested, seen);
+				for (const nestedName of nestedNames) {
+					integrationNames.add(nestedName);
+				}
+			}
+		}
+
+		return integrationNames;
+	}
+
+	private async buildGlobalInjectorAssets(
+		triggers: ResolvedLazyTrigger[],
+		currentIntegrationName: string,
+	): Promise<ProcessedAsset[]> {
+		const globalInjectorImportPath = createRequire(import.meta.url).resolve('@ecopages/scripts-injector/global');
+
+		const mapScript = AssetFactory.createInlineContentScript({
+			position: 'head',
+			name: 'ecopages-global-injector-map',
+			content: buildGlobalInjectorMapScript(triggers),
+			attributes: { type: 'ecopages/global-injector-map' },
+			packageRole: 'keep-separate',
+			bundle: false,
+		});
+		const bootstrapInlineScript = AssetFactory.createInlineContentScript({
+			position: 'head',
+			name: 'ecopages-global-injector-bootstrap',
+			content: buildGlobalInjectorBootstrapContent(globalInjectorImportPath),
+			attributes: { type: 'module' },
+			packageRole: 'keep-separate',
+			bundle: true,
+		});
+
+		return this.assetProcessingService.processDependencies(
+			[mapScript, bootstrapInlineScript],
+			currentIntegrationName,
+		);
+	}
+
+	private async buildEagerSsrLazyAssets(
+		components: (EcoComponent | Partial<EcoComponent>)[],
+		currentIntegrationName: string,
+	): Promise<ProcessedAsset[]> {
+		const dependencies = this.collectEagerSsrLazyDependencies(components);
+		if (dependencies.length === 0) {
+			return [];
+		}
+
+		return this.assetProcessingService.processDependencies(dependencies, `${currentIntegrationName}:ssr-lazy`);
+	}
+
+	private collectEagerSsrLazyDependencies(
+		components: (EcoComponent | Partial<EcoComponent>)[],
+	): ReturnType<AssetProcessingService['processDependencies']> extends Promise<infer _>
+		? Parameters<AssetProcessingService['processDependencies']>[0]
+		: never {
+		const dependencies = [] as Parameters<AssetProcessingService['processDependencies']>[0];
+		const visitedConfigs = new Set<EcoComponentConfig>();
+		const seenKeys = new Set<string>();
+
+		const normalizeAttributes = (attributes?: DependencyAttributes) => ({
+			type: 'module',
+			defer: '',
+			...(attributes ?? {}),
+		});
+
+		const collect = (config?: EcoComponentConfig) => {
+			if (!config || visitedConfigs.has(config)) {
+				return;
+			}
+
+			visitedConfigs.add(config);
+
+			const componentFile = config.__eco?.file;
+			if (componentFile) {
+				const componentDir = path.dirname(componentFile);
+				for (const script of config.dependencies?.scripts ?? []) {
+					if (typeof script === 'string' || !script.lazy || script.ssr !== true) {
+						continue;
+					}
+
+					const attributes = normalizeAttributes(script.attributes);
+
+					if (script.content) {
+						const key = `content:${script.content}:${JSON.stringify(attributes)}`;
+						if (seenKeys.has(key)) {
+							continue;
+						}
+
+						seenKeys.add(key);
+						dependencies.push(
+							AssetFactory.createContentScript({
+								position: 'head',
+								content: script.content,
+								attributes,
+								packageRole: 'dynamic-chunk',
+							}),
+						);
+						continue;
+					}
+
+					if (!script.src) {
+						continue;
+					}
+
+					const resolvedPath = path.resolve(componentDir, script.src);
+					const key = `file:${resolvedPath}:${JSON.stringify(attributes)}`;
+					if (seenKeys.has(key)) {
+						continue;
+					}
+
+					seenKeys.add(key);
+					dependencies.push(
+						AssetFactory.createFileScript({
+							filepath: resolvedPath,
+							position: 'head',
+							attributes,
+							packageRole: 'dynamic-chunk',
+						}),
+					);
+				}
+			}
+
+			if (config.layout?.config) {
+				collect(config.layout.config);
+			}
+
+			for (const nestedComponent of config.dependencies?.components ?? []) {
+				collect(nestedComponent?.config);
+			}
+		};
+
+		for (const component of components) {
+			collect(component.config);
+		}
+
+		return dependencies;
+	}
+}

package/src/route-renderer/orchestration/template-serialization.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, test } from 'vitest';
+import {
+	type DeferredTemplateSerializer,
+	serializeTemplateShape,
+	type SerializableTemplateShape,
+} from './template-serialization.ts';
+
+type TestTemplateShape = SerializableTemplateShape & {
+	__testTemplateType: 'deferred-template';
+};
+
+function createTestTemplate(strings: readonly string[], values: readonly unknown[]): TestTemplateShape {
+	return {
+		__testTemplateType: 'deferred-template',
+		strings,
+		values,
+	};
+}
+
+const testDeferredTemplateSerializer: DeferredTemplateSerializer<TestTemplateShape> = {
+	matches(value: unknown): value is TestTemplateShape {
+		return (
+			typeof value === 'object' &&
+			value !== null &&
+			(value as { __testTemplateType?: unknown }).__testTemplateType === 'deferred-template' &&
+			Array.isArray((value as { strings?: unknown }).strings) &&
+			((value as { values?: unknown }).values === undefined ||
+				Array.isArray((value as { values?: unknown }).values))
+		);
+	},
+	serialize(template: TestTemplateShape, serializeValue: (value: unknown) => string | undefined) {
+		return serializeTemplateShape(template, serializeValue);
+	},
+};
+
+function serializeTestDeferredTemplateValue(
+	value: unknown,
+	serializeValue: (value: unknown) => string | undefined,
+): string | undefined {
+	if (!testDeferredTemplateSerializer.matches(value)) {
+		return undefined;
+	}
+
+	return testDeferredTemplateSerializer.serialize(value, serializeValue);
+}
+
+describe('serializeTemplateLike', () => {
+	test('preserves quoted attribute values for multi-token class attributes', () => {
+		const html = serializeTemplateShape(
+			createTestTemplate(['<div class=', '>', '</div>'], ['grid gap-4 lg:grid-cols-2 xl:grid-cols-4', 'Content']),
+			(value) => (value == null ? '' : String(value)),
+		);
+
+		expect(html).toBe('<div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-4">Content</div>');
+	});
+
+	test('omits falsey boolean attributes and preserves truthy boolean attributes', () => {
+		const truthyHtml = serializeTemplateShape(
+			createTestTemplate(['<button ?disabled=', '>x</button>'], ['yes']),
+			(value) => (value == null ? '' : String(value)),
+		);
+		const falseyHtml = serializeTemplateShape(
+			createTestTemplate(['<button ?disabled=', '>x</button>'], ['']),
+			(value) => (value == null ? '' : String(value)),
+		);
+
+		expect(truthyHtml).toBe('<button disabled>x</button>');
+		expect(falseyHtml).toBe('<button>x</button>');
+	});
+
+	test('skips event and prop bindings in SSR output', () => {
+		const html = serializeTemplateShape(
+			createTestTemplate(['<button @click=', ' .value=', '>x</button>'], ['handler', '1']),
+			(value) => (value == null ? '' : String(value)),
+		);
+
+		expect(html).toBe('<button>x</button>');
+	});
+
+	test('escapes attribute values while preserving child interpolation', () => {
+		const html = serializeTemplateShape(
+			createTestTemplate(['<div title=', '>', '</div>'], ['a "quote" & <tag>', '<span>child</span>']),
+			(value) => (value == null ? '' : String(value)),
+		);
+
+		expect(html).toBe('<div title="a &quot;quote&quot; &amp; &lt;tag&gt;"><span>child</span></div>');
+	});
+
+	test('does not serialize unmatched template-like values', () => {
+		expect(
+			serializeTestDeferredTemplateValue(
+				{
+					strings: ['<div>', '</div>'],
+					values: ['content'],
+					_$litType$: 1,
+				},
+				(value) => (value == null ? '' : String(value)),
+			),
+		).toBeUndefined();
+	});
+
+	test('serializes locally provided template serializers without ambient registration', () => {
+		expect(
+			serializeTestDeferredTemplateValue(
+				createTestTemplate(['<div class=', '>', '</div>'], ['shared gap-4', 'content']),
+				(value) => (value == null ? '' : String(value)),
+			),
+		).toBe('<div class="shared gap-4">content</div>');
+	});
+});