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

package/src/hmr/hmr-strategy.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { HmrStrategy, HmrStrategyType, type HmrAction } from './hmr-strategy';
+
+/**
+ * Mock strategy for testing the base class behavior
+ */
+class MockStrategy extends HmrStrategy {
+	readonly type: HmrStrategyType;
+	override readonly priorityOffset: number;
+	private matchPattern: string;
+
+	constructor(options: { type: HmrStrategyType; priorityOffset?: number; matchPattern?: string }) {
+		super();
+		this.type = options.type;
+		this.priorityOffset = options.priorityOffset ?? 0;
+		this.matchPattern = options.matchPattern ?? '.';
+	}
+
+	matches(filePath: string): boolean {
+		return filePath.endsWith(this.matchPattern);
+	}
+
+	async process(filePath: string): Promise<HmrAction> {
+		return {
+			type: 'broadcast',
+			events: [{ type: 'update', path: filePath, timestamp: Date.now() }],
+		};
+	}
+}
+
+describe('HmrStrategyType', () => {
+	it('INTEGRATION has value 100', () => {
+		expect(HmrStrategyType.INTEGRATION).toBe(100);
+	});
+
+	it('ASSET has value 50', () => {
+		expect(HmrStrategyType.ASSET).toBe(50);
+	});
+
+	it('SCRIPT has value 25', () => {
+		expect(HmrStrategyType.SCRIPT).toBe(25);
+	});
+
+	it('FALLBACK has value 0', () => {
+		expect(HmrStrategyType.FALLBACK).toBe(0);
+	});
+
+	it('maintains priority order: INTEGRATION > ASSET > SCRIPT > FALLBACK', () => {
+		expect(HmrStrategyType.INTEGRATION).toBeGreaterThan(HmrStrategyType.ASSET);
+		expect(HmrStrategyType.ASSET).toBeGreaterThan(HmrStrategyType.SCRIPT);
+		expect(HmrStrategyType.SCRIPT).toBeGreaterThan(HmrStrategyType.FALLBACK);
+	});
+});
+
+describe('HmrStrategy', () => {
+	describe('priority', () => {
+		it('returns type value when priorityOffset is 0', () => {
+			const strategy = new MockStrategy({ type: HmrStrategyType.INTEGRATION });
+			expect(strategy.priority).toBe(100);
+		});
+
+		it('returns type + priorityOffset', () => {
+			const strategy = new MockStrategy({ type: HmrStrategyType.INTEGRATION, priorityOffset: 5 });
+			expect(strategy.priority).toBe(105);
+		});
+
+		it('allows negative priorityOffset', () => {
+			const strategy = new MockStrategy({ type: HmrStrategyType.ASSET, priorityOffset: -10 });
+			expect(strategy.priority).toBe(40);
+		});
+	});
+
+	describe('strategy selection by priority', () => {
+		it('higher priority strategies are selected first', () => {
+			const strategies = [
+				new MockStrategy({ type: HmrStrategyType.FALLBACK, matchPattern: '.test' }),
+				new MockStrategy({ type: HmrStrategyType.INTEGRATION, matchPattern: '.test' }),
+				new MockStrategy({ type: HmrStrategyType.SCRIPT, matchPattern: '.test' }),
+				new MockStrategy({ type: HmrStrategyType.ASSET, matchPattern: '.test' }),
+			];
+
+			const sorted = [...strategies].sort((a, b) => b.priority - a.priority);
+
+			expect(sorted[0].type).toBe(HmrStrategyType.INTEGRATION);
+			expect(sorted[1].type).toBe(HmrStrategyType.ASSET);
+			expect(sorted[2].type).toBe(HmrStrategyType.SCRIPT);
+			expect(sorted[3].type).toBe(HmrStrategyType.FALLBACK);
+		});
+
+		it('priorityOffset can override default ordering', () => {
+			const assetWithHighOffset = new MockStrategy({
+				type: HmrStrategyType.ASSET,
+				priorityOffset: 60,
+				matchPattern: '.test',
+			});
+			const integration = new MockStrategy({
+				type: HmrStrategyType.INTEGRATION,
+				matchPattern: '.test',
+			});
+
+			expect(assetWithHighOffset.priority).toBeGreaterThan(integration.priority);
+		});
+	});
+
+	describe('matches', () => {
+		it('should be implemented by subclasses', () => {
+			const strategy = new MockStrategy({ type: HmrStrategyType.ASSET, matchPattern: '.css' });
+			expect(strategy.matches('styles.css')).toBe(true);
+			expect(strategy.matches('script.js')).toBe(false);
+		});
+	});
+
+	describe('process', () => {
+		it('should return an HmrAction', async () => {
+			const strategy = new MockStrategy({ type: HmrStrategyType.ASSET });
+			const action = await strategy.process('/path/to/file.');
+
+			expect(action.type).toBe('broadcast');
+			expect(action.events).toBeDefined();
+			expect(action.events?.[0].type).toBe('update');
+			expect(action.events?.[0].path).toBe('/path/to/file.');
+		});
+	});
+});

package/src/hmr/hmr.postcss.test.e2e.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const FIXTURE_DIR = resolve(process.cwd(), 'packages/core/__fixtures__/app');
+const TEST_CSS_FILE = resolve(FIXTURE_DIR, 'src/pages/postcss-hmr.css');
+
+test.describe('HMR E2E PostCSS', () => {
+	test('should hot-update processor-owned CSS without a full page reload', async ({ page }) => {
+		const originalCss = readFileSync(TEST_CSS_FILE, 'utf-8');
+		const title = page.locator('.postcss-title').first();
+
+		try {
+			await page.goto('/postcss-hmr', { waitUntil: 'networkidle' });
+			await expect(title).toBeVisible();
+
+			const initialColor = await title.evaluate((el) => getComputedStyle(el).color);
+			expect(initialColor).toBeTruthy();
+			await page.evaluate(() => {
+				(window as typeof window & { __postcssReloadProbe?: string }).__postcssReloadProbe = 'before-change';
+			});
+
+			const modifiedCss = originalCss.replace('.postcss-title {', '.postcss-title {\n\tcolor: rgb(255, 0, 0);');
+
+			await writeFile(TEST_CSS_FILE, modifiedCss, { flush: true });
+
+			await expect
+				.poll(async () => title.evaluate((el) => getComputedStyle(el).color), { timeout: 10000 })
+				.toBe('rgb(255, 0, 0)');
+
+			await expect(
+				page.evaluate(
+					() => (window as typeof window & { __postcssReloadProbe?: string }).__postcssReloadProbe ?? null,
+				),
+			).resolves.toBe('before-change');
+		} finally {
+			await writeFile(TEST_CSS_FILE, originalCss, { flush: true });
+		}
+	});
+});

package/src/hmr/hmr.test.e2e.ts

@@ -14,62 +14,53 @@ import { resolve } from 'node:path';
 
 const FIXTURE_DIR = resolve(process.cwd(), 'packages/core/__fixtures__/app');
 const TEST_CSS_FILE = resolve(FIXTURE_DIR, 'src/pages/index.css');
-const BUILT_CSS_FILE = resolve(FIXTURE_DIR, '.eco/assets/pages/index.css');
-const TEST_URL = 'http://localhost:3002';
 
 test.describe('HMR E2E', () => {
 	test('should load page with .main-title element', async ({ page }) => {
-		await page.goto(TEST_URL, { waitUntil: 'networkidle' });
+		await page.goto('/', { waitUntil: 'networkidle' });
 		const title = page.locator('.main-title').first();
 		await expect(title).toBeVisible();
 	});
 
 	test('should connect to HMR WebSocket', async ({ page }) => {
-		await page.goto(TEST_URL);
-
-		const connected = await page.evaluate(async () => {
-			return new Promise<boolean>((resolve) => {
-				const ws = new WebSocket('ws://localhost:3002/_hmr');
-				ws.onopen = () => {
-					ws.close();
-					resolve(true);
-				};
-				ws.onerror = () => resolve(false);
-				setTimeout(() => resolve(false), 5000);
-			});
+		const socketPromise = page.waitForEvent('websocket', {
+			predicate: (socket) => socket.url().endsWith('/_hmr'),
+			timeout: 10000,
 		});
 
-		expect(connected).toBe(true);
+		await page.goto('/', { waitUntil: 'networkidle' });
+		const socket = await socketPromise;
+
+		expect(socket.url()).toMatch(/\/_hmr$/);
 	});
 
-	test('should reload page when CSS file changes', async ({ page }) => {
+	test('should fall back to a full page reload when raw CSS file changes', async ({ page }) => {
 		const originalCss = readFileSync(TEST_CSS_FILE, 'utf-8');
+		const title = page.locator('.main-title').first();
 
-		await page.goto(TEST_URL, { waitUntil: 'networkidle' });
-
-		const initialColor = await page.evaluate(() => {
-			const el = document.querySelector('.main-title');
-			return el ? getComputedStyle(el).color : null;
-		});
-
-		expect(initialColor).toBeTruthy();
-
-		const modifiedCss = originalCss.replace('.main-title {', '.main-title {\n\tcolor: rgb(255, 0, 0);');
-
-		const loadPromise = page.waitForEvent('load', { timeout: 10000 });
+		try {
+			await page.goto('/', { waitUntil: 'networkidle' });
+			await expect(title).toBeVisible();
 
-		await writeFile(TEST_CSS_FILE, modifiedCss, { flush: true });
-		await writeFile(BUILT_CSS_FILE, modifiedCss, { flush: true });
+			const initialColor = await title.evaluate((el) => getComputedStyle(el).color);
+			expect(initialColor).toBeTruthy();
 
-		await loadPromise;
+			const modifiedCss = originalCss.replace('.main-title {', '.main-title {\n\tcolor: rgb(255, 0, 0);');
+			const reloadPromise = page.waitForEvent('framenavigated', {
+				predicate: (frame) => frame === page.mainFrame(),
+				timeout: 10000,
+			});
 
-		const updatedColor = await page.evaluate(() => {
-			const el = document.querySelector('.main-title');
-			return el ? getComputedStyle(el).color : null;
-		});
+			await writeFile(TEST_CSS_FILE, modifiedCss, { flush: true });
 
-		expect(updatedColor).toBe('rgb(255, 0, 0)');
+			await reloadPromise;
+			await page.waitForLoadState('networkidle');
 
-		await writeFile(TEST_CSS_FILE, originalCss, { flush: true });
+			await expect
+				.poll(async () => title.evaluate((el) => getComputedStyle(el).color), { timeout: 10000 })
+				.toBe('rgb(255, 0, 0)');
+		} finally {
+			await writeFile(TEST_CSS_FILE, originalCss, { flush: true });
+		}
 	});
 });

package/src/hmr/strategies/js-hmr-strategy.test.ts

@@ -0,0 +1,335 @@
+import { describe, expect, it, beforeAll, afterAll } from 'vitest';
+import { JsHmrStrategy, type JsHmrContext } from './js-hmr-strategy';
+import { HmrStrategyType } from '../hmr-strategy';
+import { InMemoryDevGraphService, NoopDevGraphService } from '../../services/runtime-state/dev-graph.service.ts';
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+
+const TMP_DIR = path.join(os.tmpdir(), 'js-hmr-strategy-test');
+const SRC_DIR = path.join(TMP_DIR, 'src');
+
+function createMockContext(overrides: Partial<JsHmrContext> = {}): JsHmrContext {
+	return {
+		getWatchedFiles: () => new Map(),
+		getSpecifierMap: () => new Map(),
+		getEntrypointDependencyGraph: () => new NoopDevGraphService(),
+		getDistDir: () => TMP_DIR,
+		getPlugins: () => [],
+		getSrcDir: () => SRC_DIR,
+		getPagesDir: () => path.join(SRC_DIR, 'pages'),
+		getLayoutsDir: () => path.join(SRC_DIR, 'layouts'),
+		getTemplateExtensions: () => ['.tsx'],
+		getBrowserBundleService: () => ({
+			bundle: async () => ({ success: true, logs: [], outputs: [] }),
+		}),
+		...overrides,
+	};
+}
+
+describe('JsHmrStrategy', () => {
+	beforeAll(() => {
+		fs.mkdirSync(SRC_DIR, { recursive: true });
+	});
+
+	afterAll(() => {
+		fs.rmSync(TMP_DIR, { recursive: true, force: true });
+	});
+
+	describe('type', () => {
+		it('has SCRIPT type', () => {
+			const context = createMockContext();
+			const strategy = new JsHmrStrategy(context);
+			expect(strategy.type).toBe(HmrStrategyType.SCRIPT);
+		});
+
+		it('has default priority of 25', () => {
+			const context = createMockContext();
+			const strategy = new JsHmrStrategy(context);
+			expect(strategy.priority).toBe(25);
+		});
+	});
+
+	describe('matches', () => {
+		it('returns false when no watched files are registered', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map(),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'app.ts'))).toBe(false);
+		});
+
+		it('returns false for unrelated .ts files when dependency graph support is available', () => {
+			const devGraphService = new InMemoryDevGraphService();
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+				getEntrypointDependencyGraph: () => devGraphService,
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'component.ts'))).toBe(false);
+		});
+
+		it('returns true for dependency-connected .tsx files in src directory', () => {
+			const changedFile = path.join(SRC_DIR, 'component.tsx');
+			const devGraphService = new InMemoryDevGraphService();
+			devGraphService.setEntrypointDependencies(path.join(SRC_DIR, 'entry.ts'), [changedFile]);
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+				getEntrypointDependencyGraph: () => devGraphService,
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(changedFile)).toBe(true);
+		});
+
+		it('returns true for registered entrypoints even without dependency graph hits', () => {
+			const entrypoint = path.join(SRC_DIR, 'entry.tsx');
+			const devGraphService = new InMemoryDevGraphService();
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[entrypoint, '/output.js']]),
+				getEntrypointDependencyGraph: () => devGraphService,
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(entrypoint)).toBe(true);
+		});
+
+		it('returns true for .js files in src directory', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'utils.js'))).toBe(true);
+		});
+
+		it('returns true for .jsx files in src directory', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'component.jsx'))).toBe(true);
+		});
+
+		it('returns false for .css files', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'styles.css'))).toBe(false);
+		});
+
+		it('returns false for files outside src directory', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches('/other/path/file.ts')).toBe(false);
+		});
+
+		it('returns false for integration-owned route template files', () => {
+			const pagesDir = path.join(SRC_DIR, 'pages');
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+				getPagesDir: () => pagesDir,
+				getTemplateExtensions: () => ['.kita.tsx', '.react.tsx'],
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(pagesDir, 'index.kita.tsx'))).toBe(false);
+			expect(strategy.matches(path.join(pagesDir, 'home.react.tsx'))).toBe(false);
+		});
+
+		it('returns false for non-extension matches', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'data.json'))).toBe(false);
+			expect(strategy.matches(path.join(SRC_DIR, 'readme.md'))).toBe(false);
+		});
+	});
+
+	describe('process', () => {
+		it('returns none when no watched files are registered', async () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map(),
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			const action = await strategy.process(path.join(SRC_DIR, 'app.ts'));
+
+			expect(action.type).toBe('none');
+		});
+
+		it('rebuilds only dependency-connected entrypoints when graph hit exists', async () => {
+			const entryA = path.join(SRC_DIR, 'entry-a.ts');
+			const entryB = path.join(SRC_DIR, 'entry-b.ts');
+			const depA = path.join(SRC_DIR, 'shared-a.ts');
+			const setEntrypointDependenciesCalls: Array<{ entrypointPath: string; dependencies: string[] }> = [];
+			let batchedEntrypoints: string[] = [];
+			const devGraphService = new InMemoryDevGraphService();
+			devGraphService.setEntrypointDependencies(entryA, [depA]);
+			devGraphService.setEntrypointDependencies(entryB, [entryB]);
+
+			const context = createMockContext({
+				getWatchedFiles: () =>
+					new Map([
+						[entryA, '/_hmr/entry-a.js'],
+						[entryB, '/_hmr/entry-b.js'],
+					]),
+				getEntrypointDependencyGraph: () => ({
+					supportsSelectiveInvalidation: () => devGraphService.supportsSelectiveInvalidation(),
+					getDependencyEntrypoints: (filePath: string) => devGraphService.getDependencyEntrypoints(filePath),
+					setEntrypointDependencies: (entrypointPath: string, dependencies: string[]) => {
+						setEntrypointDependenciesCalls.push({ entrypointPath, dependencies });
+						devGraphService.setEntrypointDependencies(entrypointPath, dependencies);
+					},
+					clearEntrypointDependencies: (entrypointPath: string) =>
+						devGraphService.clearEntrypointDependencies(entrypointPath),
+					reset: () => devGraphService.reset(),
+				}),
+			});
+
+			const strategy = new JsHmrStrategy(context) as unknown as {
+				process: (filePath: string) => Promise<{ type: string; events?: unknown[] }>;
+				[key: string]: unknown;
+			};
+
+			strategy.bundleEntrypoints = async (entrypoints: string[]) => {
+				batchedEntrypoints = entrypoints;
+				const dependencies = new Map<string, string[]>();
+				for (const ep of entrypoints) {
+					dependencies.set(path.resolve(ep), [ep, depA]);
+				}
+				return { success: true, dependencies };
+			};
+
+			strategy.processOutput = async () => {
+				return { success: true, requiresReload: false };
+			};
+
+			const action = await strategy.process(depA);
+
+			expect(batchedEntrypoints).toEqual([entryA]);
+			expect(setEntrypointDependenciesCalls).toEqual([{ entrypointPath: entryA, dependencies: [entryA, depA] }]);
+			expect(action).toEqual({
+				type: 'broadcast',
+				events: [
+					{
+						type: 'update',
+						path: '/_hmr/entry-a.js',
+						timestamp: expect.any(Number),
+					},
+				],
+			});
+		});
+
+		it('falls back to rebuilding all watched entrypoints when graph has no hit', async () => {
+			const entryA = path.join(SRC_DIR, 'entry-a.ts');
+			const entryB = path.join(SRC_DIR, 'entry-b.ts');
+			const changedFile = path.join(SRC_DIR, 'new-shared.ts');
+			let batchedEntrypoints: string[] = [];
+
+			const context = createMockContext({
+				getWatchedFiles: () =>
+					new Map([
+						[entryA, '/_hmr/entry-a.js'],
+						[entryB, '/_hmr/entry-b.js'],
+					]),
+				getEntrypointDependencyGraph: () => new NoopDevGraphService(),
+			});
+
+			const strategy = new JsHmrStrategy(context) as unknown as {
+				process: (filePath: string) => Promise<{ type: string; events?: unknown[] }>;
+				[key: string]: unknown;
+			};
+
+			strategy.bundleEntrypoints = async (entrypoints: string[]) => {
+				batchedEntrypoints = entrypoints;
+				const dependencies = new Map<string, string[]>();
+				for (const ep of entrypoints) {
+					dependencies.set(path.resolve(ep), [ep]);
+				}
+				return { success: true, dependencies };
+			};
+
+			strategy.processOutput = async () => {
+				return { success: true, requiresReload: false };
+			};
+
+			const action = await strategy.process(changedFile);
+
+			expect(batchedEntrypoints).toEqual([entryA, entryB]);
+			expect(action).toEqual({
+				type: 'broadcast',
+				events: [
+					{
+						type: 'update',
+						path: '/_hmr/entry-a.js',
+						timestamp: expect.any(Number),
+					},
+					{
+						type: 'update',
+						path: '/_hmr/entry-b.js',
+						timestamp: expect.any(Number),
+					},
+				],
+			});
+		});
+
+		it('skips watched entrypoints owned by higher-priority integration strategies', async () => {
+			const reactEntrypoint = path.join(SRC_DIR, 'react-page.tsx');
+			const scriptEntrypoint = path.join(SRC_DIR, 'widget.script.ts');
+			const changedFile = path.join(SRC_DIR, 'shared.ts');
+			let batchedEntrypoints: string[] = [];
+			const devGraphService = new InMemoryDevGraphService();
+			devGraphService.setEntrypointDependencies(reactEntrypoint, [changedFile]);
+			devGraphService.setEntrypointDependencies(scriptEntrypoint, [changedFile]);
+
+			const context = createMockContext({
+				getWatchedFiles: () =>
+					new Map([
+						[reactEntrypoint, '/_hmr/react-page.js'],
+						[scriptEntrypoint, '/_hmr/widget.script.js'],
+					]),
+				getEntrypointDependencyGraph: () => devGraphService,
+				shouldProcessEntrypoint: (entrypointPath: string) => entrypointPath !== reactEntrypoint,
+			});
+
+			const strategy = new JsHmrStrategy(context) as unknown as {
+				process: (filePath: string) => Promise<{ type: string; events?: unknown[] }>;
+				[key: string]: unknown;
+			};
+
+			strategy.bundleEntrypoints = async (entrypoints: string[]) => {
+				batchedEntrypoints = entrypoints;
+				return { success: true, dependencies: new Map([[path.resolve(scriptEntrypoint), [scriptEntrypoint]]]) };
+			};
+
+			strategy.processOutput = async () => {
+				return { success: true, requiresReload: false };
+			};
+
+			const action = await strategy.process(changedFile);
+
+			expect(batchedEntrypoints).toEqual([scriptEntrypoint]);
+			expect(action).toEqual({
+				type: 'broadcast',
+				events: [
+					{
+						type: 'update',
+						path: '/_hmr/widget.script.js',
+						timestamp: expect.any(Number),
+					},
+				],
+			});
+		});
+	});
+});