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

package/src/plugins/eco-component-meta-plugin.test.ts

@@ -0,0 +1,406 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+	createEcoComponentMetaPlugin,
+	createEcoComponentMetaTransform,
+	createEcoComponentMetaVitePlugin,
+} from './eco-component-meta-plugin';
+import type { EcoPagesAppConfig } from '../types/internal-types';
+import { fileSystem } from '@ecopages/file-system';
+
+/**
+ * Creates a regex pattern to match __eco injection with any id hash.
+ * The id is a base36 hash that varies, so we match it with a pattern.
+ */
+function ecoMetaPattern(file: string, integration: string): RegExp {
+	const escapedFile = file.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+	return new RegExp(`__eco: \\{ id: "[a-z0-9]+", file: "${escapedFile}", integration: "${integration}" \\}`);
+}
+
+describe('eco-component-meta-plugin', () => {
+	const Config = {
+		integrations: [
+			{
+				name: 'kitajs',
+				extensions: ['.kita.tsx'],
+			},
+			{
+				name: 'react',
+				extensions: ['.tsx'],
+			},
+			{
+				name: 'ghtml',
+				extensions: ['.ts', '.ghtml.ts'],
+			},
+		],
+	} as EcoPagesAppConfig;
+
+	const plugin = createEcoComponentMetaPlugin({ config: Config });
+	const transform = createEcoComponentMetaTransform({ config: Config });
+
+	async function runPluginOnContent(content: string, filePath: string) {
+		let regexFilter: RegExp | undefined;
+		let onLoadCallback: any;
+
+		const buildMock = {
+			onLoad: (options: { filter: RegExp }, callback: any) => {
+				regexFilter = options.filter;
+				onLoadCallback = callback;
+			},
+		};
+
+		plugin.setup(buildMock as any);
+
+		if (!onLoadCallback || !regexFilter) {
+			throw new Error('Plugin did not register onLoad handler');
+		}
+
+		if (!regexFilter.test(filePath)) {
+			throw new Error(`File path ${filePath} does not match plugin filter ${regexFilter}`);
+		}
+
+		const fileSpy = vi.spyOn(fileSystem, 'readFileSync').mockImplementation(() => content);
+
+		try {
+			return await onLoadCallback({ path: filePath });
+		} finally {
+			fileSpy.mockRestore();
+		}
+	}
+
+	it('creates a bundler-neutral transform that strips query suffixes through the Vite adapter', () => {
+		const vitePlugin = createEcoComponentMetaVitePlugin({ config: Config });
+		const result = vitePlugin.transform(
+			"import { eco } from '@ecopages/core';\nexport default eco.page({ render: () => '<main />' });",
+			'/path/to/pages/index.tsx?import',
+		);
+
+		expect(typeof result).toBe('object');
+		expect((result as { code: string }).code).toMatch(ecoMetaPattern('/path/to/pages/index.tsx', 'react'));
+	});
+
+	it('creates a shared transform primitive that can run without the loader wrapper', () => {
+		const result = transform.transform(
+			"import { eco } from '@ecopages/core';\nexport default eco.page({ render: () => '<main />' });",
+			'/path/to/pages/index.tsx',
+		);
+
+		expect(typeof result).toBe('object');
+		expect((result as { code: string }).code).toMatch(ecoMetaPattern('/path/to/pages/index.tsx', 'react'));
+	});
+
+	it('should inject __eco into X.config assignment in TSX files', async () => {
+		const content = `
+            MyComponent.config = {
+                dependencies: {}
+            };
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/component.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/component.tsx', 'react'));
+	});
+
+	it('should NOT inject __eco into config patterns in non-EcoComponent files', async () => {
+		const content = `
+            export const config = {
+                apiUrl: 'https://api.example.com',
+                theme: 'dark'
+            };
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/settings.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).not.toContain('__eco:');
+	});
+
+	it('should inject __eco into EcoComponent-typed object with config property', async () => {
+		const content = `
+            import type { EcoComponent } from '@ecopages/core';
+
+            export const LitCounter: EcoComponent = {
+                config: {
+                    dependencies: {
+                        scripts: ['lit-counter.script.ts'] } } };
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/lit-counter.ts');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/lit-counter.ts', 'ghtml'));
+	});
+
+	it('should inject __eco into eco.component() call', async () => {
+		const content = `
+            import { eco } from '@ecopages/core';
+            export const Counter = eco.component${'<CounterProps>'}({
+                dependencies: {
+                    scripts: ['./counter.ts'] },
+                render: () => '${'<div>'}Counter${'</div>'}' });
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/counter.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/counter.tsx', 'react'));
+		expect(result.contents).toContain('eco.component' + '<CounterProps>({');
+	});
+
+	it('should inject __eco into eco.page call', async () => {
+		const content = `
+            import { eco } from '@ecopages/core';
+            export default eco.page({
+                dependencies: {
+                    components: [] },
+                render: () => '${'<main>'}Page${'</main>'}' });
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/pages/index.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/pages/index.tsx', 'react'));
+	});
+
+	it('should inject __eco into eco.layout call', async () => {
+		const content = `
+            import { eco } from '@ecopages/core';
+            export const MainLayout = eco.layout({
+                render: ({ children }) => '${'<main>'}' + children + '${'</main>'}' });
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/layouts/main-layout.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/layouts/main-layout.tsx', 'react'));
+	});
+
+	it('should inject __eco into eco.html call', async () => {
+		const content = `
+            import { eco } from '@ecopages/core';
+            export default eco.html({
+                render: ({ children }) => '${'<html><body>'}' + children + '${'</body></html>'}' });
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/html.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/html.tsx', 'react'));
+	});
+
+	it('should inject __eco into eco.component() with lazy dependencies', async () => {
+		const content = `
+            export const LazyCounter = eco.component({
+                dependencies: {
+					scripts: [{ src: './counter.ts', lazy: { 'on:interaction': 'click' } }] },
+                render: () => '${'<div>'}Lazy${'</div>'}' });
+        `;
+
+		const result = await runPluginOnContent(content, '/path/to/lazy-counter.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/lazy-counter.tsx', 'react'));
+	});
+
+	it('should detect kitajs integration from .kita.tsx extension', async () => {
+		const content = `import { eco } from '@ecopages/core';
+import type { PageHeadProps } from '@ecopages/core';
+
+export const Head = eco.component<PageHeadProps<string>>({
+	dependencies: {
+		stylesheets: ['../styles/global.css'] },
+	render: ({ metadata, children }) => (
+		<head>
+			<meta charset="UTF-8" />
+			{children}
+		</head>
+	) });`;
+
+		const result = await runPluginOnContent(content, '/path/to/includes/head.kita.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/includes/head.kita.tsx', 'kitajs'));
+	});
+
+	it('should handle eco.page with complex generic types', async () => {
+		const content = `
+import { eco } from '@ecopages/core';
+
+export default eco.page<{ title: string; callback: (arg: string) => void }>({
+	staticProps: async () => ({ props: { title: 'Hello', callback: () => {} } }),
+	render: (props) => '<div>' + props.title + '</div>' });
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/pages/complex.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/pages/complex.tsx', 'react'));
+	});
+
+	it('should handle multiple eco.component calls in same file', async () => {
+		const content = `
+import { eco } from '@ecopages/core';
+
+export const Button = eco.component({
+	render: () => '<button>Click</button>' });
+
+export const Input = eco.component({
+	render: () => '<input type="text" />' });
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/components.tsx');
+
+		expect(result).toBeDefined();
+		const matches = result.contents.match(
+			/__eco: \{ id: "[a-z0-9]+", file: "\/path\/to\/components\.tsx", integration: "react" \},/g,
+		);
+		expect(matches).toHaveLength(2);
+	});
+
+	it('should handle eco.component with empty config object', async () => {
+		const content = `
+import { eco } from '@ecopages/core';
+
+export const Simple = eco.component({});
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/simple.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/simple.tsx', 'react'));
+	});
+
+	it('should not inject into non-eco call expressions', async () => {
+		const content = `
+import { other } from 'some-lib';
+
+export const Thing = other.component({
+	render: () => '<div>Thing</div>' });
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/thing.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).not.toContain('__eco:');
+	});
+
+	it('should not inject into non-config variable declarations', async () => {
+		const content = `
+const settings = {
+	theme: 'dark',
+	locale: 'en' };
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/settings.ts');
+
+		expect(result).toBeDefined();
+		expect(result.contents).not.toContain('__eco:');
+	});
+
+	it('should handle file paths with special characters in directory', async () => {
+		const content = `
+import { eco } from '@ecopages/core';
+
+export default eco.page({
+	render: () => '<div>Page</div>' });
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/my-app/pages/index.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/my-app/pages/index.tsx', 'react'));
+	});
+
+	it('should handle eco.component with nested object in dependencies', async () => {
+		const content = `
+import { eco } from '@ecopages/core';
+
+export const LazyComponent = eco.component({
+	dependencies: {
+		stylesheets: ['./style.css'],
+		scripts: [{ src: './script.ts', lazy: { 'on:interaction': 'click' } }],
+		components: [] },
+	render: () => '<div>Lazy</div>' });
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/lazy.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/lazy.tsx', 'react'));
+	});
+
+	it('should preserve original code structure after injection', async () => {
+		const content = `import { eco } from '@ecopages/core';
+
+export const Counter = eco.component({
+	dependencies: {
+		scripts: ['./counter.ts'] },
+	render: () => '<button>0</button>' });`;
+
+		const result = await runPluginOnContent(content, '/path/to/counter.tsx');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toContain("import { eco } from '@ecopages/core';");
+		expect(result.contents).toContain("scripts: ['./counter.ts']");
+		expect(result.contents).toContain("render: () => '<button>0</button>'");
+	});
+
+	it('should handle query string in file path for cache busting', async () => {
+		const content = `
+import { eco } from '@ecopages/core';
+
+export default eco.page({
+	render: () => '<div>Page</div>' });
+`;
+
+		const result = await runPluginOnContent(content, '/path/to/pages/index.tsx?update=123456');
+
+		expect(result).toBeDefined();
+		expect(result.contents).toMatch(ecoMetaPattern('/path/to/pages/index.tsx', 'react'));
+	});
+
+	describe('Regression: eco-blog views failure', () => {
+		it('should inject __eco into a kitajs page with complex props and no manual __eco', async () => {
+			const content = `import { eco } from '@ecopages/core';
+import { MainLayout } from '@/layouts/main-layout.kita';
+import type { Post } from '@/lib/db';
+
+export interface BlogListProps {
+	posts: Post[];
+}
+
+export const BlogList = eco.page<BlogListProps>({
+	layout: MainLayout,
+	metadata: () => ({
+		title: 'EcoBlog | Home',
+		description: 'A blog about sustainability and technology' }),
+	render: ({ posts }) => {
+		return (
+			<div class="max-w-3xl mx-auto space-y-12">
+                {/* content */}
+			</div>
+		);
+	} });`;
+
+			const result = await runPluginOnContent(
+				content,
+				'/path/to/playground/eco-blog/src/views/blog-list.kita.tsx',
+			);
+
+			expect(result).toBeDefined();
+			expect(result.contents).toMatch(
+				ecoMetaPattern('/path/to/playground/eco-blog/src/views/blog-list.kita.tsx', 'kitajs'),
+			);
+		});
+
+		it('should inject __eco even if the eco call is not at the top level', async () => {
+			const content = `
+                import { eco } from '@ecopages/core';
+                const createPage = () => eco.page({ render: () => 'hi' });
+                export default createPage();
+            `;
+			const result = await runPluginOnContent(content, '/path/to/nested.tsx');
+			expect(result.contents).toMatch(ecoMetaPattern('/path/to/nested.tsx', 'react'));
+		});
+	});
+});