@ecopages/core 0.2.0-alpha.53 → 0.2.0-alpha.54

package/src/hmr/hmr-strategy.ts

@@ -0,0 +1,177 @@
+import type { ClientBridgeEvent } from '../types/public-types.ts';
+
+/**
+ * HMR Strategy Pattern
+ *
+ * This module defines the base classes and types for Hot Module Replacement strategies.
+ * Each strategy handles a specific type of file change and determines how to process it.
+ *
+ * @module
+ * @example
+ * ```typescript
+ * class CustomHmrStrategy extends HmrStrategy {
+ *   readonly type = HmrStrategyType.INTEGRATION;
+ *
+ *   matches(filePath: string): boolean {
+ *     return filePath.endsWith('.custom');
+ *   }
+ *
+ *   async process(filePath: string): Promise<HmrAction> {
+ *     return {
+ *       type: 'broadcast',
+ *       events: [{ type: 'update', path: filePath, timestamp: Date.now() }],
+ *     };
+ *   }
+ * }
+ * ```
+ */
+
+/**
+ * Defines the category of an HMR strategy, which determines its execution priority.
+ * Strategies are evaluated in descending order: INTEGRATION → ASSET → SCRIPT → FALLBACK.
+ *
+ * @remarks
+ * The numeric values represent base priorities. Strategies can fine-tune their priority
+ * using the `priorityOffset` property.
+ */
+export const HmrStrategyType = {
+	/**
+	 * Integration-specific strategies (React, Lit, etc.)
+	 * Highest priority to allow framework-specific HMR handling.
+	 */
+	INTEGRATION: 100,
+
+	/**
+	 * Asset processing strategies (CSS, images, etc.)
+	 * High priority for specialized asset handling.
+	 */
+	ASSET: 50,
+
+	/**
+	 * Generic script bundling strategies (JS/TS)
+	 * Medium priority for standard script processing.
+	 */
+	SCRIPT: 25,
+
+	/**
+	 * Fallback strategy for unhandled file types.
+	 * Lowest priority, triggers full page reload.
+	 */
+	FALLBACK: 0,
+} as const;
+
+export type HmrStrategyType = (typeof HmrStrategyType)[keyof typeof HmrStrategyType];
+
+/**
+ * Represents an action to be taken after processing a file change.
+ */
+export interface HmrAction {
+	/**
+	 * Whether to broadcast an HMR event to connected clients.
+	 */
+	type: 'broadcast' | 'none';
+
+	/**
+	 * The HMR events to broadcast, if type is 'broadcast'.
+	 * Multiple events may be broadcast in one action.
+	 */
+	events?: ClientBridgeEvent[];
+}
+
+/**
+ * Base class for HMR strategies.
+ *
+ * Each strategy handles a specific type of file change and determines how to process it.
+ * Strategies are selected based on their priority (higher values are evaluated first) and
+ * whether they match the changed file path.
+ *
+ * @remarks
+ * Strategies are expected to be stateless and idempotent. The same file change
+ * should produce the same result when processed by the same strategy.
+ *
+ * @example
+ * ```typescript
+ * class MyAssetStrategy extends HmrStrategy {
+ *   readonly type = HmrStrategyType.ASSET;
+ *   readonly priorityOffset = 5;
+ *
+ *   matches(filePath: string): boolean {
+ *     return /\.(png|jpg|svg)$/.test(filePath);
+ *   }
+ *
+ *   async process(filePath: string): Promise<HmrAction> {
+ *     await this.optimizeImage(filePath);
+ *     return {
+ *       type: 'broadcast',
+ *       events: [{ type: 'update', path: filePath, timestamp: Date.now() }]
+ *     };
+ *   }
+ * }
+ * ```
+ */
+export abstract class HmrStrategy {
+	/**
+	 * The category of this strategy, determining its base priority.
+	 */
+	abstract readonly type: HmrStrategyType;
+
+	/**
+	 * Optional offset to fine-tune priority within the same category.
+	 * Useful when multiple strategies share the same type.
+	 *
+	 * @defaultValue 0
+	 */
+	readonly priorityOffset: number = 0;
+
+	/**
+	 * Computed priority for strategy selection.
+	 * Higher values are evaluated first.
+	 *
+	 * @returns The sum of the strategy type and priority offset
+	 */
+	get priority(): number {
+		return this.type + this.priorityOffset;
+	}
+
+	/**
+	 * Determines if this strategy can handle the given file path.
+	 *
+	 * @param filePath - Absolute path to the changed file
+	 * @returns `true` when this strategy should process the file
+	 *
+	 * @example
+	 * ```typescript
+	 * matches(filePath: string): boolean {
+	 *   return filePath.endsWith('.css');
+	 * }
+	 * ```
+	 */
+	abstract matches(filePath: string): boolean;
+
+	/**
+	 * Processes a file change and returns the action to take.
+	 *
+	 * This method may perform side effects such as:
+	 * - Rebuilding files
+	 * - Writing to disk
+	 * - Transforming code
+	 * - Updating caches
+	 *
+	 * @param filePath - Absolute path to the changed file
+	 * @returns Action to take (broadcast event or none)
+	 *
+	 * @example
+	 * ```typescript
+	 * async process(filePath: string): Promise<HmrAction> {
+	 *   const processed = await this.transform(filePath);
+	 *   await Bun.write(outputPath, processed);
+	 *
+	 *   return {
+	 *     type: 'broadcast',
+	 *     events: [{ type: 'update', path: outputPath, timestamp: Date.now() }]
+	 *   };
+	 * }
+	 * ```
+	 */
+	abstract process(filePath: string): Promise<HmrAction>;
+}

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

@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+/**
+ * HMR E2E Tests
+ *
+ * True end-to-end tests for Hot Module Replacement using Playwright.
+ * These tests modify actual source files and verify the browser updates.
+ *
+ * Run with: bunx playwright test packages/core/src/hmr/hmr.e2e.test.ts
+ */
+
+const FIXTURE_DIR = resolve(process.cwd(), 'packages/core/__fixtures__/app');
+const TEST_CSS_FILE = resolve(FIXTURE_DIR, 'src/pages/index.css');
+
+test.describe('HMR E2E', () => {
+	test('should load page with .main-title element', async ({ page }) => {
+		await page.goto('/', { waitUntil: 'networkidle' });
+		const title = page.locator('.main-title').first();
+		await expect(title).toBeVisible();
+	});
+
+	test('should connect to HMR WebSocket', async ({ page }) => {
+		const socketPromise = page.waitForEvent('websocket', {
+			predicate: (socket) => socket.url().endsWith('/_hmr'),
+			timeout: 10000,
+		});
+
+		await page.goto('/', { waitUntil: 'networkidle' });
+		const socket = await socketPromise;
+
+		expect(socket.url()).toMatch(/\/_hmr$/);
+	});
+
+	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();
+
+		try {
+			await page.goto('/', { waitUntil: 'networkidle' });
+			await expect(title).toBeVisible();
+
+			const initialColor = await title.evaluate((el) => getComputedStyle(el).color);
+			expect(initialColor).toBeTruthy();
+
+			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,
+			});
+
+			await writeFile(TEST_CSS_FILE, modifiedCss, { flush: true });
+
+			await reloadPromise;
+			await page.waitForLoadState('networkidle');
+
+			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/default-hmr-strategy.ts

@@ -0,0 +1,60 @@
+/**
+ * Default HMR Strategy
+ *
+ * Fallback strategy for file types that don't have specialized handling.
+ * Triggers a full page reload to ensure changes are reflected.
+ *
+ * @module
+ */
+
+import { HmrStrategy, HmrStrategyType, type HmrAction } from '../hmr-strategy.ts';
+
+/**
+ * Default fallback strategy for unhandled file types.
+ *
+ * This strategy matches all files and triggers a full page reload.
+ * It has the lowest priority (FALLBACK) and acts as a catch-all when
+ * no other strategy matches the changed file.
+ *
+ * @remarks
+ * This strategy ensures that all file changes result in some action,
+ * even if we don't have specialized handling for that file type.
+ *
+ * @example
+ * ```typescript
+ * const strategy = new DefaultHmrStrategy();
+ * const action = await strategy.process('/path/to/unknown.file');
+ * ```
+ */
+export class DefaultHmrStrategy extends HmrStrategy {
+	readonly type = HmrStrategyType.FALLBACK;
+
+	/**
+	 * Matches all file paths.
+	 *
+	 * @param _filePath - Absolute path to the changed file (unused)
+	 * @returns Always returns true as this is a catch-all strategy
+	 */
+	matches(_filePath: string): boolean {
+		return true;
+	}
+
+	/**
+	 * Processes a file change by triggering a full page reload.
+	 *
+	 * @param filePath - Absolute path to the changed file
+	 * @returns Action to broadcast a reload event
+	 */
+	async process(filePath: string): Promise<HmrAction> {
+		return {
+			type: 'broadcast',
+			events: [
+				{
+					type: 'reload',
+					path: filePath,
+					message: 'fallback-strategy',
+				},
+			],
+		};
+	}
+}

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

@@ -0,0 +1,344 @@
+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(),
+		getEntrypointDependencyGraph: () => new NoopDevGraphService(),
+		getDistDir: () => TMP_DIR,
+		getPlugins: () => [],
+		getSrcDir: () => SRC_DIR,
+		getPagesDir: () => path.join(SRC_DIR, 'pages'),
+		getLayoutsDir: () => path.join(SRC_DIR, 'layouts'),
+		getTemplateExtensions: () => ['.kita.tsx', '.react.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 true for unrelated .ts files when watched entrypoints exist', () => {
+			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(true);
+		});
+
+		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 integration-owned server templates outside pages and layouts', () => {
+			const context = createMockContext({
+				getWatchedFiles: () => new Map([[path.join(SRC_DIR, 'entry.ts'), '/output.js']]),
+				getTemplateExtensions: () => ['.kita.tsx', '.react.tsx'],
+			});
+			const strategy = new JsHmrStrategy(context);
+
+			expect(strategy.matches(path.join(SRC_DIR, 'views', 'explicit-team-view.kita.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),
+					},
+				],
+			});
+		});
+	});
+});