Avoid using commandDir in ESM

src/cmd/cmp.ts

@@ -1,12 +1,20 @@
-import { Argv } from 'yargs';
+import type { ArgumentsCamelCase, Argv, Options } from 'yargs';
 
 import { Comparator } from '@pixdif/core';
 import ComparatorLogger from '../log/ComparatorLogger.js';
 
 export const command = 'cmp <expected> <actual>';
 export const describe = 'Compare 2 files.';
 
-export function builder(yargs: Argv): Argv {
+interface CompareOptions extends Options {
+	cacheDir: string;
+	tolerance: number;
+	outputDir?: string;
+	expected: string;
+	actual: string;
+}
+
+export function builder(yargs: Argv): Argv<CompareOptions> {
 	return yargs.options({
 		cacheDir: {
 			type: 'string',
@@ -22,18 +30,10 @@ export function builder(yargs: Argv): Argv {
 			type: 'string',
 			describe: 'The directory to save converted image files.',
 		},
-	});
-}
-
-interface Arguments {
-	cacheDir: string;
-	tolerance: number;
-	outputDir?: string;
-	expected: string;
-	actual: string;
+	}) as Argv<CompareOptions>;
 }
 
-export async function handler(args: Arguments): Promise<void> {
+export async function handler(args: ArgumentsCamelCase<CompareOptions>): Promise<void> {
 	const {
 		cacheDir,
 		tolerance,

src/cmd/convert.ts

@@ -2,28 +2,28 @@ import fs from 'fs';
 import fsp from 'fs/promises';
 import path from 'path';
 
-import { Argv } from 'yargs';
+import type { ArgumentsCamelCase, Argv, Options } from 'yargs';
 import parse from '@pixdif/core/util/parse.js';
 import waitFor from '@pixdif/core/util/waitFor.js';
 
 export const command = 'convert <input>';
 export const describe = 'Convert a file into multiple PNG images.';
 
-export function builder(argv: Argv): Argv {
+interface ConvertOptions extends Options {
+	input: string;
+	outputDir?: string;
+}
+
+export function builder(argv: Argv): Argv<ConvertOptions> {
 	return argv.options({
 		outputDir: {
 			type: 'string',
 			describe: 'The location to save PNG files.',
 		},
-	});
-}
-
-interface Arguments {
-	input: string;
-	outputDir?: string;
+	}) as Argv<ConvertOptions>;
 }
 
-export async function handler(args: Arguments): Promise<void> {
+export async function handler(args: ArgumentsCamelCase<ConvertOptions>): Promise<void> {
 	const {
 		input,
 		outputDir = '.',

src/cmd/diff.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { Argv } from 'yargs';
+import type { ArgumentsCamelCase, Argv, Options } from 'yargs';
 import { glob } from 'glob';
 import { BatchComparator, BatchTask } from '@pixdif/core';
 
@@ -9,7 +9,17 @@ import BatchComparatorLogger from '../log/BatchComparatorLogger.js';
 export const command = 'diff <expectedDir> <actualDir> <pattern>';
 export const describe = 'Compare files in two directories.';
 
-export function builder(yargs: Argv): Argv {
+interface DiffOptions extends Options {
+	expectedDir: string;
+	actualDir: string;
+	pattern: string;
+	cacheDir?: string;
+	tolerance?: number;
+	reportDir?: string;
+	reportFormat: string;
+}
+
+export function builder(yargs: Argv): Argv<DiffOptions> {
 	return yargs.options({
 		cacheDir: {
 			type: 'string',
@@ -30,20 +40,10 @@ export function builder(yargs: Argv): Argv {
 			describe: 'Report format. It is an HTML report by default.',
 			default: '@pixdif/html-reporter',
 		},
-	});
-}
-
-interface Arguments {
-	expectedDir: string;
-	actualDir: string;
-	pattern: string;
-	cacheDir?: string;
-	tolerance?: number;
-	reportDir?: string;
-	reportFormat: string;
+	}) as Argv<DiffOptions>;
 }
 
-export async function handler(args: Arguments): Promise<void> {
+export async function handler(args: ArgumentsCamelCase<DiffOptions>): Promise<void> {
 	const {
 		cacheDir,
 		tolerance,

src/cmd/serve.ts

@@ -1,9 +1,9 @@
-import { Argv } from 'yargs';
+import type { ArgumentsCamelCase, Argv, Options } from 'yargs';
 import type { Server } from 'http';
 
 import { ServerOptions, serve } from '../api/index.js';
 
-interface Arguments extends ServerOptions {
+interface ServeOptions extends ServerOptions, Options {
 	/**
 	 * Port number of the server.
 	 */
@@ -13,7 +13,7 @@ interface Arguments extends ServerOptions {
 export const command = 'serve';
 export const describe = 'Start a server to show reports and manage baselines.';
 
-export function builder(argv: Argv): Argv {
+export function builder(argv: Argv): Argv<ServeOptions> {
 	return argv.options({
 		dataDir: {
 			type: 'string',
@@ -33,9 +33,12 @@ export function builder(argv: Argv): Argv {
 	});
 }
 
-export function handler(options: Arguments): Server {
+export const server: {
+	instance?: Server;
+} = {};
+
+export function handler(options: ArgumentsCamelCase<ServeOptions>): void {
 	const app = serve(options);
-	const server = app.listen(options.port);
+	server.instance = app.listen(options.port);
 	console.log(`Listening at ${options.port}`);
-	return server;
 }

src/pixdif.ts

@@ -2,10 +2,13 @@
 import yargs from 'yargs';
 import assert from 'assert';
 
-const { argv } = yargs()
+const { argv } = yargs(process.argv.slice(2))
 	.version('0.1.0')
 	.default('config', 'pixdif.config.js')
-	.commandDir('cmd')
+	.command(await import('./cmd/cmp.js'))
+	.command(await import('./cmd/convert.js'))
+	.command(await import('./cmd/diff.js'))
+	.command(await import('./cmd/serve.js'))
 	.recommendCommands()
 	.demandCommand()
 	.help();

test/cmp.spec.ts

@@ -13,6 +13,8 @@ it('compares two images', async () => {
 		cacheDir: 'cache',
 		outputDir: 'output/compare',
 		tolerance: 0,
+		_: [],
+		$0: ''
 	});
 	expect(log).nthCalledWith(1, `Expected: ${expected}`);
 	expect(log).nthCalledWith(2, `Actual: ${actual}`);

test/convert.spec.ts

@@ -9,6 +9,8 @@ it('reads an image', async () => {
 	await convert({
 		input,
 		outputDir: 'output/convert',
+		_: [],
+		$0: ''
 	});
 	expect(log).nthCalledWith(1, `Converting ${input} ...`);
 	expect(log).nthCalledWith(2, 'Writing Page 1 ...');

test/diff.spec.ts

@@ -19,6 +19,8 @@ it('compares two directories', async () => {
 		pattern: '*.png',
 		reportDir: 'output/diff',
 		reportFormat: '@pixdif/html-reporter',
+		_: [],
+		$0: ''
 	});
 	const logLines = [
 		`Expected: ${expectedDir}`,

test/serve.spec.ts

@@ -1,16 +1,16 @@
-import { jest, it } from '@jest/globals';
+import { expect, it } from '@jest/globals';
 
-import { handler } from '../src/cmd/serve.js';
-
-jest.mock('../src/api/index.js');
+import { server, handler } from '../src/cmd/serve.js';
 
 it('starts a server', async () => {
 	const options = {
 		dataDir: 'data',
 		outputDir: 'output',
 		port: 8080,
+		_: [],
+		$0: ''
 	};
-
-	const server = handler(options);
-	server.close();
+	handler(options);
+	expect(server.instance).toBeTruthy();
+	server.instance!.close();
 });