@ecopages/core 0.2.0-alpha.5 → 0.2.0-alpha.7

package/src/eco/eco.test.ts

@@ -0,0 +1,678 @@
+/**
+ * Unit tests for the eco namespace API
+ */
+
+import { describe, expect, test } from 'vitest';
+import { createRequire } from 'node:module';
+import { eco } from './eco.ts';
+import type { EcoComponent, GetMetadataContext, HtmlTemplateProps, LayoutProps, StaticPath } from '../public-types.ts';
+import type { EcoPagesAppConfig } from 'src/internal-types.ts';
+import { getComponentRenderContext, runWithComponentRenderContext } from './component-render-context.ts';
+
+const mockAppConfig = {} as EcoPagesAppConfig;
+
+describe('eco namespace', () => {
+	describe('eco.component()', () => {
+		test('should create a component with basic dependencies', () => {
+			type Props = { count: number };
+			const Counter = eco.component<Props>({
+				dependencies: {
+					stylesheets: ['./counter.css'],
+					scripts: ['./counter.script.ts'],
+				},
+				render: ({ count }) => `<my-counter count="${count}"></my-counter>`,
+			});
+
+			expect(Counter).toBeDefined();
+			expect(typeof Counter).toBe('function');
+			expect(Counter.config).toBeDefined();
+			expect(Counter.config?.dependencies?.stylesheets).toEqual(['./counter.css']);
+			expect(Counter.config?.dependencies?.scripts).toEqual(['./counter.script.ts']);
+		});
+
+		test('should render component without lazy dependencies', () => {
+			const Component = eco.component({
+				render: () => '<div>Hello</div>',
+			});
+
+			const result = Component({});
+			expect(result).toBe('<div>Hello</div>');
+		});
+
+		test('should create component with lazy dependencies', () => {
+			const Counter = eco.component({
+				dependencies: {
+					stylesheets: ['./counter.css'],
+					scripts: [{ src: './counter.script.ts', lazy: { 'on:interaction': 'mouseenter,focusin' } }],
+				},
+				render: () => '<my-counter></my-counter>',
+			});
+
+			expect(Counter.config?.dependencies?.scripts).toEqual([
+				{ src: './counter.script.ts', lazy: { 'on:interaction': 'mouseenter,focusin' } },
+			]);
+		});
+
+		test('should auto-wrap component with scripts-injector when lazy scripts are resolved', () => {
+			const Counter = eco.component({
+				dependencies: {
+					scripts: [{ src: './counter.script.ts', lazy: { 'on:interaction': 'mouseenter,focusin' } }],
+				},
+				render: () => '<my-counter></my-counter>',
+			});
+
+			if (Counter.config) {
+				Counter.config._resolvedLazyScripts = [
+					{ lazy: { 'on:interaction': 'mouseenter,focusin' }, scripts: '/_assets/counter.js' },
+				];
+			}
+
+			const result = Counter({});
+			expect(result).toContain('<scripts-injector');
+			expect(result).toContain('<script type="ecopages/injector-map">');
+			expect(result).toContain(
+				'"on:interaction":{"value":"mouseenter,focusin","scripts":["/_assets/counter.js"]}',
+			);
+			expect(result).toContain('<my-counter></my-counter>');
+			expect(result).toContain('</scripts-injector>');
+		});
+
+		test('should handle on:idle trigger', () => {
+			const Component = eco.component({
+				dependencies: {
+					scripts: [{ src: './script.ts', lazy: { 'on:idle': true } }],
+				},
+				render: () => '<div>Content</div>',
+			});
+
+			if (Component.config) {
+				Component.config._resolvedLazyScripts = [{ lazy: { 'on:idle': true }, scripts: '/_assets/script.js' }];
+			}
+
+			const result = Component({});
+			expect(result).toContain('"on:idle":{"scripts":["/_assets/script.js"]}');
+		});
+
+		test('should handle on:visible trigger with boolean', () => {
+			const Component = eco.component({
+				dependencies: {
+					scripts: [{ src: './script.ts', lazy: { 'on:visible': true } }],
+				},
+				render: () => '<div>Content</div>',
+			});
+
+			if (Component.config) {
+				Component.config._resolvedLazyScripts = [
+					{ lazy: { 'on:visible': true }, scripts: '/_assets/script.js' },
+				];
+			}
+
+			const result = Component({});
+			expect(result).toContain('"on:visible":{"scripts":["/_assets/script.js"]}');
+		});
+
+		test('should handle on:visible trigger with threshold value', () => {
+			const Component = eco.component({
+				dependencies: {
+					scripts: [{ src: './script.ts', lazy: { 'on:visible': '0.5' } }],
+				},
+				render: () => '<div>Content</div>',
+			});
+
+			if (Component.config) {
+				Component.config._resolvedLazyScripts = [
+					{ lazy: { 'on:visible': '0.5' }, scripts: '/_assets/script.js' },
+				];
+			}
+
+			const result = Component({});
+			expect(result).toContain('"on:visible":{"value":"0.5","scripts":["/_assets/script.js"]}');
+		});
+
+		test('should not wrap when lazy script entries exist but _resolvedLazyScripts is not set', () => {
+			const Component = eco.component({
+				dependencies: {
+					scripts: [{ src: './script.ts', lazy: { 'on:interaction': 'mouseenter' } }],
+				},
+				render: () => '<div>Content</div>',
+			});
+
+			const result = Component({});
+			expect(result).toBe('<div>Content</div>');
+			expect(result).not.toContain('scripts-injector');
+		});
+
+		test('should pass props to render function', () => {
+			type Props = { name: string; count: number };
+			const Component = eco.component<Props>({
+				render: ({ name, count }) => `<div>${name}: ${count}</div>`,
+			});
+
+			const result = Component({ name: 'Counter', count: 5 });
+			expect(result).toBe('<div>Counter: 5</div>');
+		});
+
+		test('should support multiple lazy triggers in dependencies.scripts', () => {
+			const Component = eco.component({
+				dependencies: {
+					scripts: [
+						{ src: './idle.ts', lazy: { 'on:idle': true } },
+						{ src: './visible.ts', lazy: { 'on:visible': '0.5' } },
+					],
+				},
+				render: () => '<section>Content</section>',
+			});
+
+			if (Component.config) {
+				Component.config._resolvedLazyScripts = [
+					{ lazy: { 'on:idle': true }, scripts: '/_assets/idle.js' },
+					{ lazy: { 'on:visible': '0.5' }, scripts: '/_assets/visible.js' },
+				];
+			}
+
+			const result = Component({});
+			expect(result).toContain('"on:idle":{"scripts":["/_assets/idle.js"]}');
+			expect(result).toContain('"on:visible":{"value":"0.5","scripts":["/_assets/visible.js"]}');
+			expect(result).toContain('<section>Content</section>');
+			expect((result.match(/<scripts-injector/g) ?? []).length).toBe(1);
+		});
+
+		test('should set explicit integration on component config', () => {
+			const Component = eco.component({
+				integration: 'lit',
+				render: () => '<div>Content</div>',
+			});
+
+			expect(Component.config?.integration).toBe('lit');
+		});
+
+		test('should emit marker output for React components from non-React context when metadata exists', async () => {
+			const require = createRequire(import.meta.url);
+			const React = require('react') as {
+				createElement: (tag: string, props: Record<string, unknown>, children: string) => unknown;
+			};
+
+			const ReactButton = eco.component({
+				integration: 'react',
+				__eco: {
+					id: 'react-button',
+					file: '/app/components/react-button.react.tsx',
+					integration: 'react',
+				},
+				render: () => React.createElement('button', { type: 'button' }, 'Click'),
+			});
+
+			const execution = await runWithComponentRenderContext(
+				{
+					currentIntegration: 'lit',
+					boundaryContext: {
+						decideBoundaryRender: ({ targetIntegration }) =>
+							targetIntegration === 'react' ? 'defer' : 'inline',
+					},
+				},
+				async () => ReactButton({}),
+			);
+
+			expect(execution.value).toContain('<eco-marker');
+			expect(execution.value).toContain('data-eco-integration="react"');
+			expect(execution.value).toContain('data-eco-component-ref="react-button"');
+		});
+
+		test('should emit a runtime fallback reference when React marker metadata is missing', async () => {
+			const require = createRequire(import.meta.url);
+			const React = require('react') as {
+				createElement: (tag: string, props: Record<string, unknown>, children: string) => unknown;
+			};
+
+			const ReactButton = eco.component({
+				integration: 'react',
+				render: () => React.createElement('button', { type: 'button' }, 'Click'),
+			});
+
+			const execution = await runWithComponentRenderContext(
+				{
+					currentIntegration: 'lit',
+					boundaryContext: {
+						decideBoundaryRender: ({ targetIntegration }) =>
+							targetIntegration === 'react' ? 'defer' : 'inline',
+					},
+				},
+				async () => ReactButton({}),
+			);
+
+			expect(execution.value).toContain('<eco-marker');
+			expect(execution.value).toContain('data-eco-component-ref="eco-runtime-component-');
+		});
+
+		test('should render inline when boundary context returns inline for a React component', async () => {
+			const ReactButton = eco.component({
+				integration: 'react',
+				__eco: {
+					id: 'react-button',
+					file: '/app/components/react-button.react.tsx',
+					integration: 'react',
+				},
+				render: () => '<button type="button">Click</button>',
+			});
+
+			const execution = await runWithComponentRenderContext(
+				{
+					currentIntegration: 'lit',
+					boundaryContext: {
+						decideBoundaryRender: () => 'inline',
+					},
+				},
+				async () => ReactButton({}),
+			);
+
+			expect(execution.value).toBe('<button type="button">Click</button>');
+			expect(execution.value).not.toContain('<eco-marker');
+			expect(execution.graphContext.propsByRef).toEqual({});
+			expect(execution.graphContext.slotChildrenByRef).toEqual({});
+		});
+
+		test('should share render context across duplicated module instances', async () => {
+			const duplicateModule = (await import(
+				'./component-render-context.ts?duplicate-instance' as string
+			)) as typeof import('./component-render-context.ts');
+
+			const execution = await runWithComponentRenderContext(
+				{
+					currentIntegration: 'kitajs',
+					boundaryContext: {
+						decideBoundaryRender: () => 'inline',
+					},
+				},
+				async () => {
+					expect(getComponentRenderContext()?.currentIntegration).toBe('kitajs');
+					expect(duplicateModule.getComponentRenderContext()?.currentIntegration).toBe('kitajs');
+					return 'shared-context';
+				},
+			);
+
+			expect(execution.value).toBe('shared-context');
+		});
+	});
+
+	describe('eco.html()', () => {
+		test('should create a document shell component with html props', () => {
+			const Html = eco.html({
+				render: ({ children, language = 'en' }: HtmlTemplateProps) =>
+					`<html lang="${language}"><body>${children}</body></html>`,
+			});
+
+			const result = Html({
+				children: '<main>Hello</main>',
+				metadata: { title: 'Home', description: 'Welcome' },
+				pageProps: {},
+			});
+
+			expect(typeof Html).toBe('function');
+			expect(result).toBe('<html lang="en"><body><main>Hello</main></body></html>');
+		});
+	});
+
+	describe('eco.layout()', () => {
+		test('should create a route layout component with layout props', () => {
+			const Layout = eco.layout({
+				render: ({ children, locals }: LayoutProps<string>) =>
+					`<main data-user="${locals?.user ?? 'guest'}">${children}</main>`,
+			});
+
+			const result = Layout({ children: '<h1>Page</h1>', locals: { user: '123' } });
+
+			expect(typeof Layout).toBe('function');
+			expect(result).toBe('<main data-user="123"><h1>Page</h1></main>');
+		});
+
+		test('should work when used as page layout', () => {
+			const Layout = eco.layout<string>({
+				render: ({ children }) => `<main>${children}</main>`,
+			});
+
+			const Page = eco.page({
+				layout: Layout,
+				render: () => '<h1>Page Content</h1>',
+			});
+
+			expect(Page.config?.layout).toBe(Layout);
+			expect(Page.config?.dependencies?.components).toContain(Layout);
+		});
+	});
+
+	describe('eco.page()', () => {
+		test('should create a page without staticProps', () => {
+			const Page = eco.page({
+				dependencies: {
+					components: [],
+				},
+				render: () => '<h1>Welcome</h1>',
+			});
+
+			expect(Page).toBeDefined();
+			expect(typeof Page).toBe('function');
+			expect(Page.config).toBeDefined();
+		});
+
+		test('should create a page with typed props', () => {
+			type PageProps = { params?: { slug?: string }; query?: Record<string, string> };
+			const Page = eco.page<PageProps>({
+				render: ({ params }) => `<h1>${params?.slug || 'Home'}</h1>`,
+			});
+
+			const result = Page({ params: { slug: 'test-post' } });
+			expect(result).toBe('<h1>test-post</h1>');
+		});
+
+		test('should work with lazy dependencies on pages', () => {
+			const Page = eco.page({
+				dependencies: {
+					scripts: [{ src: './page.script.ts', lazy: { 'on:interaction': 'click' } }],
+				},
+				render: () => '<div>Page Content</div>',
+			});
+
+			if (Page.config) {
+				Page.config._resolvedLazyScripts = [
+					{ lazy: { 'on:interaction': 'click' }, scripts: '/_assets/page.js' },
+				];
+			}
+
+			const result = Page({});
+			expect(result).toContain('<scripts-injector');
+			expect(result).toContain('"on:interaction":{"value":"click","scripts":["/_assets/page.js"]}');
+		});
+
+		test('should store layout in config and include in dependencies', async () => {
+			const Layout = eco.component<{ children: string }>({
+				render: ({ children }) => `<main class="layout">${children}</main>`,
+			});
+
+			const Page = eco.page({
+				layout: Layout,
+				render: () => '<h1>Page Content</h1>',
+			});
+
+			expect(Page.config?.layout).toBe(Layout);
+			expect(Page.config?.dependencies?.components).toContain(Layout);
+			const result = await Page({});
+			expect(result).toBe('<h1>Page Content</h1>');
+		});
+
+		test('should render raw content (layout wrapping happens at render time)', async () => {
+			const Layout = eco.component<{ children: string }>({
+				render: ({ children }) => `<main class="layout">${children}</main>`,
+			});
+
+			const Page = eco.page({
+				layout: Layout,
+				render: async () => {
+					await Promise.resolve();
+					return '<h1>Async Content</h1>';
+				},
+			});
+
+			expect(Page.config?.layout).toBe(Layout);
+			const result = await Page({});
+			expect(result).toBe('<h1>Async Content</h1>');
+		});
+
+		test('should include layout in dependencies when provided', () => {
+			const Layout = eco.component<{ children: string }>({
+				dependencies: {
+					stylesheets: ['./layout.css'],
+				},
+				render: ({ children }) => `<main>${children}</main>`,
+			});
+
+			const Page = eco.page({
+				layout: Layout,
+				dependencies: {
+					stylesheets: ['./page.css'],
+				},
+				render: () => '<h1>Content</h1>',
+			});
+
+			expect(Page.config?.dependencies?.components).toContain(Layout);
+			expect(Page.config?.dependencies?.stylesheets).toEqual(['./page.css']);
+		});
+
+		test('should set explicit integration on page config', () => {
+			const Page = eco.page({
+				integration: 'react',
+				render: () => '<h1>Page</h1>',
+			});
+
+			expect(Page.config?.integration).toBe('react');
+		});
+	});
+
+	describe('eco.metadata()', () => {
+		test('should be an identity function', () => {
+			const metadataFn = () => ({
+				title: 'Home',
+				description: 'Welcome',
+			});
+
+			const wrapped = eco.metadata(metadataFn);
+			expect(wrapped).toBe(metadataFn);
+		});
+
+		test('should work with async metadata function', async () => {
+			const metadataFn = async () => ({
+				title: 'Home',
+				description: 'Welcome',
+			});
+
+			const wrapped = eco.metadata(metadataFn);
+			const result = await wrapped({ props: {}, params: {}, query: {}, appConfig: mockAppConfig });
+			expect(result.title).toBe('Home');
+		});
+
+		test('should work with props-based metadata', () => {
+			const metadataFn = async () => ({ title: 'My Post', description: 'Post excerpt' });
+			const wrapped = eco.metadata(metadataFn);
+			expect(wrapped).toBe(metadataFn);
+		});
+	});
+
+	describe('eco.staticPaths()', () => {
+		test('should be an identity function', () => {
+			const staticPathsFn = async () => ({
+				paths: [{ params: { slug: 'post-1' } }, { params: { slug: 'post-2' } }],
+			});
+
+			const wrapped = eco.staticPaths(staticPathsFn);
+			expect(wrapped).toBe(staticPathsFn);
+		});
+
+		test('should preserve function behavior', async () => {
+			const staticPathsFn = async () => ({
+				paths: [{ params: { slug: 'post-1' } }, { params: { slug: 'post-2' } }],
+			});
+
+			const wrapped = eco.staticPaths(staticPathsFn);
+			const result = await wrapped({ appConfig: mockAppConfig, runtimeOrigin: '' });
+			expect(result.paths).toHaveLength(2);
+			expect(result.paths[0].params.slug).toBe('post-1');
+		});
+	});
+
+	describe('eco.staticProps()', () => {
+		test('should be an identity function', () => {
+			const staticPropsFn = async ({ pathname }: any) => ({
+				props: { slug: pathname.params.slug },
+			});
+
+			const wrapped = eco.staticProps(staticPropsFn);
+			expect(wrapped).toBe(staticPropsFn);
+		});
+
+		test('should preserve function behavior', async () => {
+			const staticPropsFn = async ({ pathname }: any) => ({
+				props: { post: { title: 'Test Post', slug: pathname.params.slug } },
+			});
+
+			const wrapped = eco.staticProps(staticPropsFn);
+			const result = await wrapped({
+				pathname: { params: { slug: 'my-post' } },
+				appConfig: mockAppConfig,
+				runtimeOrigin: '',
+			});
+			expect(result.props.post.title).toBe('Test Post');
+			expect(result.props.post.slug).toBe('my-post');
+		});
+	});
+
+	describe('integration', () => {
+		test('should work with nested components', () => {
+			const Button = eco.component<{ label: string }>({
+				dependencies: {
+					scripts: [
+						{
+							src: './button.script.ts',
+							lazy: {
+								'on:interaction': 'click',
+							},
+						},
+					],
+				},
+				render: ({ label }) => `<button>${label}</button>`,
+			});
+
+			const Card = eco.component<{ title: string; children: string }>({
+				dependencies: {
+					components: [Button as EcoComponent],
+				},
+				render: ({ title, children }) => `<div class="card"><h2>${title}</h2>${children}</div>`,
+			});
+
+			expect(Card.config?.dependencies?.components).toContain(Button);
+		});
+	});
+
+	test('should attach staticPaths when provided (consolidated API)', () => {
+		const staticPathsFn = async () => ({
+			paths: [{ params: { slug: 'post-1' } }, { params: { slug: 'post-2' } }],
+		});
+
+		const Page = eco.page({
+			staticPaths: staticPathsFn,
+			render: () => '<h1>Page</h1>',
+		});
+
+		expect(Page.staticPaths).toBe(staticPathsFn);
+	});
+
+	test('should attach staticProps when provided (consolidated API)', () => {
+		type Props = { title: string; slug: string };
+
+		const staticPropsFn = async ({ pathname }: { pathname: StaticPath }) => ({
+			props: { title: 'Test', slug: pathname.params.slug as string },
+		});
+
+		const Page = eco.page<Props>({
+			staticProps: staticPropsFn,
+			render: ({ title }) => `<h1>${title}</h1>`,
+		});
+
+		expect(Page.staticProps).toBe(staticPropsFn);
+	});
+
+	test('should attach metadata when provided (consolidated API)', () => {
+		type Props = { title: string };
+
+		const metadataFn = ({ props: { title } }: GetMetadataContext<Props>) => ({
+			title,
+			description: `Page: ${title}`,
+		});
+
+		const Page = eco.page<Props>({
+			metadata: metadataFn,
+			render: ({ title }) => `<h1>${title}</h1>`,
+		});
+
+		expect(Page.metadata).toBe(metadataFn);
+	});
+
+	test('should attach all static functions together (consolidated API)', async () => {
+		type Props = { title: string; slug: string };
+
+		const Page = eco.page<Props>({
+			staticPaths: async () => ({
+				paths: [{ params: { slug: 'hello' } }],
+			}),
+			staticProps: async ({ pathname }) => ({
+				props: { title: 'Hello World', slug: pathname.params.slug as string },
+			}),
+			metadata: ({ props: { title } }) => ({
+				title,
+				description: `Page: ${title}`,
+			}),
+			render: ({ title }) => `<h1>${title}</h1>`,
+		});
+
+		expect(Page.staticPaths).toBeDefined();
+		expect(Page.staticProps).toBeDefined();
+		expect(Page.metadata).toBeDefined();
+
+		// Verify they work correctly
+		const paths = await Page.staticPaths!({ appConfig: mockAppConfig, runtimeOrigin: '' });
+		expect(paths.paths).toHaveLength(1);
+
+		const props = await Page.staticProps!({
+			pathname: { params: { slug: 'hello' } },
+			appConfig: mockAppConfig,
+			runtimeOrigin: '',
+		});
+		expect(props.props.title).toBe('Hello World');
+
+		const result = Page({ title: 'Hello World', slug: 'hello' });
+		expect(result).toBe('<h1>Hello World</h1>');
+	});
+
+	test('should not have static functions when not provided', () => {
+		const Page = eco.page({
+			render: () => '<h1>Simple Page</h1>',
+		});
+
+		expect(Page.staticPaths).toBeUndefined();
+		expect(Page.staticProps).toBeUndefined();
+		expect(Page.metadata).toBeUndefined();
+	});
+
+	test('should attach cache strategy "static" when provided', () => {
+		const Page = eco.page({
+			cache: 'static',
+			render: () => '<h1>Static Page</h1>',
+		});
+
+		expect(Page.cache).toBe('static');
+	});
+
+	test('should attach cache strategy "dynamic" when provided', () => {
+		const Page = eco.page({
+			cache: 'dynamic',
+			render: () => '<h1>Dynamic Page</h1>',
+		});
+
+		expect(Page.cache).toBe('dynamic');
+	});
+
+	test('should attach cache strategy with revalidation when provided', () => {
+		const Page = eco.page({
+			cache: { revalidate: 3600, tags: ['blog'] },
+			render: () => '<h1>Blog Page</h1>',
+		});
+
+		expect(Page.cache).toEqual({ revalidate: 3600, tags: ['blog'] });
+	});
+
+	test('should not have cache when not provided', () => {
+		const Page = eco.page({
+			render: () => '<h1>Page Without Cache</h1>',
+		});
+
+		expect(Page.cache).toBeUndefined();
+	});
+});