@ecopages/core 0.2.0-alpha.4 → 0.2.0-alpha.6

package/src/route-renderer/component-graph/component-marker.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+import { createComponentMarker, parseComponentMarkers } from './component-marker.ts';
+
+describe('component marker contract', () => {
+	it('creates a canonical marker element', () => {
+		const html = createComponentMarker({
+			nodeId: 'n_1',
+			integration: 'react',
+			componentRef: 'c_1',
+			propsRef: 'p_1',
+			slotRef: 's_1',
+		});
+
+		expect(html).toContain('<eco-marker');
+		expect(html).toContain('data-eco-node-id="n_1"');
+		expect(html).toContain('data-eco-integration="react"');
+		expect(html).toContain('data-eco-component-ref="c_1"');
+		expect(html).toContain('data-eco-props-ref="p_1"');
+		expect(html).toContain('data-eco-slot-ref="s_1"');
+	});
+
+	it('parses multiple markers from html', () => {
+		const html = [
+			'<main>',
+			createComponentMarker({
+				nodeId: 'n_1',
+				integration: 'lit',
+				componentRef: 'c_1',
+				propsRef: 'p_1',
+			}),
+			createComponentMarker({
+				nodeId: 'n_2',
+				integration: 'react',
+				componentRef: 'c_2',
+				propsRef: 'p_2',
+				slotRef: 's_2',
+			}),
+			'</main>',
+		].join('');
+
+		const markers = parseComponentMarkers(html);
+		expect(markers).toHaveLength(2);
+		expect(markers[0]).toEqual({
+			nodeId: 'n_1',
+			integration: 'lit',
+			componentRef: 'c_1',
+			propsRef: 'p_1',
+			slotRef: undefined,
+		});
+		expect(markers[1]).toEqual({
+			nodeId: 'n_2',
+			integration: 'react',
+			componentRef: 'c_2',
+			propsRef: 'p_2',
+			slotRef: 's_2',
+		});
+	});
+
+	it('ignores malformed markers missing required fields', () => {
+		const html =
+			'<eco-marker data-eco-node-id="n_1" data-eco-integration="lit"></eco-marker>' +
+			createComponentMarker({
+				nodeId: 'n_2',
+				integration: 'lit',
+				componentRef: 'c_2',
+				propsRef: 'p_2',
+			});
+
+		const markers = parseComponentMarkers(html);
+		expect(markers).toHaveLength(1);
+		expect(markers[0]?.nodeId).toBe('n_2');
+	});
+});

package/src/route-renderer/component-graph/component-reference.ts

@@ -0,0 +1,29 @@
+import type { EcoComponent } from '../../public-types.ts';
+
+const runtimeComponentRefs = new WeakMap<EcoComponent, string>();
+let nextRuntimeComponentRef = 0;
+
+/**
+ * Resolves a stable component reference for marker emission and lookup.
+ *
+ * Build-time metadata remains the preferred source. When a component is
+ * imported directly from source on the server and metadata has not been
+ * injected, fall back to a process-local stable runtime reference so explicit
+ * request-time rendering can still resolve deferred boundaries.
+ */
+export function getComponentReference(component: EcoComponent): string {
+	const metadataRef = component.config?.__eco?.id ?? component.config?.__eco?.file;
+	if (metadataRef) {
+		return metadataRef;
+	}
+
+	const existingRef = runtimeComponentRefs.get(component);
+	if (existingRef) {
+		return existingRef;
+	}
+
+	nextRuntimeComponentRef += 1;
+	const runtimeRef = `eco-runtime-component-${nextRuntimeComponentRef}`;
+	runtimeComponentRefs.set(component, runtimeRef);
+	return runtimeRef;
+}

package/src/route-renderer/component-graph/marker-graph-resolver.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { EcoComponent } from '../../public-types.ts';
+import type { ProcessedAsset } from '../../services/assets/asset-processing-service';
+import { createComponentMarker } from './component-marker.ts';
+import { MarkerGraphResolver } from './marker-graph-resolver.ts';
+
+describe('MarkerGraphResolver', () => {
+	it('should resolve markers with renderer output, assets, and root attributes', async () => {
+		const service = new MarkerGraphResolver();
+		const Nested = (() => '<aside>Nested</aside>') as EcoComponent<Record<string, unknown>>;
+		Nested.config = {
+			integration: 'react',
+			__eco: {
+				id: 'nested-component',
+				file: '/app/components/nested-component.tsx',
+				integration: 'react',
+			},
+		};
+		const renderComponent = vi.fn(async () => ({
+			html: '<aside>Nested Render</aside>',
+			canAttachAttributes: true,
+			rootTag: 'aside',
+			integrationName: 'react',
+			rootAttributes: { 'data-eco-component-id': 'nested-1' },
+			assets: [{ kind: 'script', srcUrl: '/assets/nested.js', position: 'head' } as ProcessedAsset],
+		}));
+
+		const html = `<main>${createComponentMarker({
+			nodeId: 'n_1',
+			integration: 'react',
+			componentRef: 'nested-component',
+			propsRef: 'p_1',
+		})}</main>`;
+
+		const result = await service.resolve({
+			html,
+			componentsToResolve: [Nested],
+			graphContext: {
+				propsByRef: {
+					p_1: { count: 3 },
+				},
+				slotChildrenByRef: {},
+			},
+			resolveRenderer: () => ({ renderComponent }),
+			applyAttributesToFirstElement: (fragment, attributes) =>
+				fragment.replace('<aside', `<aside data-eco-component-id="${attributes['data-eco-component-id']}"`),
+		});
+
+		expect(result.html).toContain('<aside data-eco-component-id="nested-1">Nested Render</aside>');
+		expect(result.assets).toEqual([{ kind: 'script', srcUrl: '/assets/nested.js', position: 'head' }]);
+		expect(renderComponent).toHaveBeenCalledWith({
+			component: Nested,
+			props: { count: 3 },
+			children: undefined,
+			integrationContext: {
+				componentInstanceId: 'n_1',
+			},
+		});
+	});
+
+	it('should pass stable marker node ids as component instance ids for nested renders', async () => {
+		const service = new MarkerGraphResolver();
+		const Nested = (() => '<aside>Nested</aside>') as EcoComponent<Record<string, unknown>>;
+		Nested.config = {
+			integration: 'react',
+			__eco: {
+				id: 'nested-component',
+				file: '/app/components/nested-component.tsx',
+				integration: 'react',
+			},
+		};
+		const renderComponent = vi.fn(async () => ({
+			html: '<aside>Nested Render</aside>',
+			canAttachAttributes: true,
+			rootTag: 'aside',
+			integrationName: 'react',
+		}));
+
+		await service.resolve({
+			html: `<main>${createComponentMarker({
+				nodeId: 'n_42',
+				integration: 'react',
+				componentRef: 'nested-component',
+				propsRef: 'p_1',
+			})}</main>`,
+			componentsToResolve: [Nested],
+			graphContext: {
+				propsByRef: {
+					p_1: { count: 7 },
+				},
+				slotChildrenByRef: {},
+			},
+			resolveRenderer: () => ({ renderComponent }),
+			applyAttributesToFirstElement: (fragment) => fragment,
+		});
+
+		expect(renderComponent).toHaveBeenCalledWith({
+			component: Nested,
+			props: { count: 7 },
+			children: undefined,
+			integrationContext: {
+				componentInstanceId: 'n_42',
+			},
+		});
+	});
+
+	it('should fail when marker props are missing', async () => {
+		const service = new MarkerGraphResolver();
+		const Nested = (() => '<aside>Nested</aside>') as EcoComponent<Record<string, unknown>>;
+		Nested.config = {
+			__eco: {
+				id: 'nested-component',
+				file: '/app/components/nested-component.tsx',
+				integration: 'react',
+			},
+		};
+
+		await expect(
+			service.resolve({
+				html: createComponentMarker({
+					nodeId: 'n_1',
+					integration: 'react',
+					componentRef: 'nested-component',
+					propsRef: 'missing',
+				}),
+				componentsToResolve: [Nested],
+				graphContext: { propsByRef: {}, slotChildrenByRef: {} },
+				resolveRenderer: () => ({
+					renderComponent: vi.fn(),
+				}),
+				applyAttributesToFirstElement: (fragment) => fragment,
+			}),
+		).rejects.toThrow('[ecopages] Missing props reference for marker: missing');
+	});
+});

package/src/route-renderer/{marker-graph-resolver.ts → component-graph/marker-graph-resolver.ts}

@@ -1,6 +1,7 @@
-import type { ComponentRenderInput, ComponentRenderResult, EcoComponent } from '../public-types.ts';
-import type { ProcessedAsset } from '../services/asset-processing-service/index.ts';
+import type { ComponentRenderInput, ComponentRenderResult, EcoComponent } from '../../public-types.ts';
+import type { ProcessedAsset } from '../../services/assets/asset-processing-service/index.ts';
 import type { MarkerNodeId } from './component-marker.ts';
+import { getComponentReference } from './component-reference.ts';
 import { extractComponentGraph } from './component-graph.ts';
 import { resolveComponentGraph } from './component-graph-executor.ts';
 
@@ -93,6 +94,9 @@ export class MarkerGraphResolver {
 				component,
 				props,
 				children,
+				integrationContext: {
+					componentInstanceId: marker.nodeId,
+				},
 			});
 
 			if (componentRender.assets?.length) {
@@ -118,9 +122,10 @@ export class MarkerGraphResolver {
 	 * Builds a reference registry from the root component set and all nested
 	 * declared component dependencies.
 	 *
-	 * Component refs are keyed by `__eco.id` when available, falling back to
-	 * `__eco.file`. Traversal is depth-first and deduplicated by component
-	 * identity to remain stable in shared dependency graphs.
+	 * Component refs are keyed by build metadata when available, falling back to a
+	 * stable runtime reference for source-imported components. Traversal is depth-
+	 * first and deduplicated by component identity to remain stable in shared
+	 * dependency graphs.
 	 *
 	 * @param components Root components participating in resolution.
 	 * @returns Lookup table from component ref to component definition.
@@ -137,10 +142,7 @@ export class MarkerGraphResolver {
 			}
 			seen.add(current);
 
-			const ref = current.config?.__eco?.id ?? current.config?.__eco?.file;
-			if (ref) {
-				registry.set(ref, current);
-			}
+			registry.set(getComponentReference(current), current);
 
 			const nested = current.config?.dependencies?.components ?? [];
 			for (const component of nested) {