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

package/src/eco/eco.test.ts

@@ -1,678 +0,0 @@
-/**
- * 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();
-	});
-});