chore: migrate to ESM (#303)

- [Why do I need `.js`
extension?](https://stackoverflow.com/a/77150985/6512681)
- [Why setting `rootDir` in the
`tsconfig.json`?](https://stackoverflow.com/a/58941798/6512681)
- [How to ensure that we add the `.js` extension via
ESLint](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md#importextensions)

Fixes https://github.com/microsoft/playwright-mcp/issues/302

src/config.ts

@@ -20,9 +20,9 @@ import os from 'os';
 import path from 'path';
 import { devices } from 'playwright';
 
-import { sanitizeForFilePath } from './tools/utils';
+import { sanitizeForFilePath } from './tools/utils.js';
 
-import type { Config, ToolCapability } from '../config';
+import type { Config, ToolCapability } from '../config.js';
 import type { BrowserContextOptions, LaunchOptions } from 'playwright';
 
 export type CLIOptions = {

src/context.ts

@@ -16,13 +16,13 @@
 
 import * as playwright from 'playwright';
 
-import { waitForCompletion } from './tools/utils';
-import { ManualPromise } from './manualPromise';
-import { Tab } from './tab';
+import { waitForCompletion } from './tools/utils.js';
+import { ManualPromise } from './manualPromise.js';
+import { Tab } from './tab.js';
 
-import type { ImageContent, TextContent } from '@modelcontextprotocol/sdk/types';
-import type { ModalState, Tool, ToolActionResult } from './tools/tool';
-import type { Config } from '../config';
+import type { ImageContent, TextContent } from '@modelcontextprotocol/sdk/types.js';
+import type { ModalState, Tool, ToolActionResult } from './tools/tool.js';
+import type { Config } from '../config.js';
 
 type PendingAction = {
   dialogShown: ManualPromise<void>;

src/index.ts

@@ -14,22 +14,22 @@
  * limitations under the License.
  */
 
-import { createServerWithTools } from './server';
-import common from './tools/common';
-import console from './tools/console';
-import dialogs from './tools/dialogs';
-import files from './tools/files';
-import install from './tools/install';
-import keyboard from './tools/keyboard';
-import navigate from './tools/navigate';
-import network from './tools/network';
-import pdf from './tools/pdf';
-import snapshot from './tools/snapshot';
-import tabs from './tools/tabs';
-import screen from './tools/screen';
+import { createServerWithTools } from './server.js';
+import common from './tools/common.js';
+import console from './tools/console.js';
+import dialogs from './tools/dialogs.js';
+import files from './tools/files.js';
+import install from './tools/install.js';
+import keyboard from './tools/keyboard.js';
+import navigate from './tools/navigate.js';
+import network from './tools/network.js';
+import pdf from './tools/pdf.js';
+import snapshot from './tools/snapshot.js';
+import tabs from './tools/tabs.js';
+import screen from './tools/screen.js';
 
-import type { Tool } from './tools/tool';
-import type { Config } from '../config';
+import type { Tool } from './tools/tool.js';
+import type { Config } from '../config.js';
 import type { Server } from '@modelcontextprotocol/sdk/server/index.js';
 
 const snapshotTools: Tool<any>[] = [
@@ -60,7 +60,7 @@ const screenshotTools: Tool<any>[] = [
   ...tabs(false),
 ];
 
-const packageJSON = require('../package.json');
+import packageJSON from '../package.json' with { type: 'json' };
 
 export async function createServer(config: Config = {}): Promise<Server> {
   const allTools = config.vision ? screenshotTools : snapshotTools;

src/program.ts

@@ -16,14 +16,14 @@
 
 import { program } from 'commander';
 
-import { createServer } from './index';
-import { ServerList } from './server';
+import { createServer } from './index.js';
+import { ServerList } from './server.js';
 
-import { startHttpTransport, startStdioTransport } from './transport';
+import { startHttpTransport, startStdioTransport } from './transport.js';
 
-import { resolveConfig } from './config';
+import { resolveConfig } from './config.js';
 
-const packageJSON = require('../package.json');
+import packageJSON from '../package.json' with { type: 'json' };
 
 program
     .version('Version ' + packageJSON.version)

src/resources/resource.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Context } from '../context';
+import type { Context } from '../context.js';
 
 export type ResourceSchema = {
   uri: string;

src/server.ts

@@ -18,10 +18,10 @@ import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { zodToJsonSchema } from 'zod-to-json-schema';
 
-import { Context } from './context';
+import { Context } from './context.js';
 
-import type { Tool } from './tools/tool';
-import type { Config } from '../config';
+import type { Tool } from './tools/tool.js';
+import type { Config } from '../config.js';
 
 type MCPServerOptions = {
   name: string;

src/tab.ts

@@ -16,9 +16,9 @@
 
 import * as playwright from 'playwright';
 
-import { PageSnapshot } from './pageSnapshot';
+import { PageSnapshot } from './pageSnapshot.js';
 
-import type { Context } from './context';
+import type { Context } from './context.js';
 
 export class Tab {
   readonly context: Context;

src/tools/common.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool, type ToolFactory } from './tool';
+import { defineTool, type ToolFactory } from './tool.js';
 
 const wait: ToolFactory = captureSnapshot => defineTool({
   capability: 'wait',

src/tools/console.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool } from './tool';
+import { defineTool } from './tool.js';
 
 const console = defineTool({
   capability: 'core',

src/tools/dialogs.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool, type ToolFactory } from './tool';
+import { defineTool, type ToolFactory } from './tool.js';
 
 const handleDialog: ToolFactory = captureSnapshot => defineTool({
   capability: 'core',

src/tools/files.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool, type ToolFactory } from './tool';
+import { defineTool, type ToolFactory } from './tool.js';
 
 const uploadFile: ToolFactory = captureSnapshot => defineTool({
   capability: 'files',

src/tools/install.ts

@@ -18,7 +18,7 @@ import { fork } from 'child_process';
 import path from 'path';
 
 import { z } from 'zod';
-import { defineTool } from './tool';
+import { defineTool } from './tool.js';
 
 const install = defineTool({
   capability: 'install',

src/tools/keyboard.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool, type ToolFactory } from './tool';
+import { defineTool, type ToolFactory } from './tool.js';
 
 const pressKey: ToolFactory = captureSnapshot => defineTool({
   capability: 'core',

src/tools/navigate.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool, type ToolFactory } from './tool';
+import { defineTool, type ToolFactory } from './tool.js';
 
 const navigate: ToolFactory = captureSnapshot => defineTool({
   capability: 'core',

src/tools/network.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool } from './tool';
+import { defineTool } from './tool.js';
 
 import type * as playwright from 'playwright';
 

src/tools/pdf.ts

@@ -15,10 +15,10 @@
  */
 
 import { z } from 'zod';
-import { defineTool } from './tool';
+import { defineTool } from './tool.js';
 
-import * as javascript from '../javascript';
-import { outputFile } from '../config';
+import * as javascript from '../javascript.js';
+import { outputFile } from '../config.js';
 
 const pdf = defineTool({
   capability: 'pdf',

src/tools/screen.ts

@@ -15,9 +15,9 @@
  */
 
 import { z } from 'zod';
-import { defineTool } from './tool';
+import { defineTool } from './tool.js';
 
-import * as javascript from '../javascript';
+import * as javascript from '../javascript.js';
 
 const elementSchema = z.object({
   element: z.string().describe('Human-readable element description used to obtain permission to interact with the element'),

src/tools/snapshot.ts

@@ -16,9 +16,9 @@
 
 import { z } from 'zod';
 
-import { defineTool } from './tool';
-import * as javascript from '../javascript';
-import { outputFile } from '../config';
+import { defineTool } from './tool.js';
+import * as javascript from '../javascript.js';
+import { outputFile } from '../config.js';
 
 import type * as playwright from 'playwright';
 

src/tools/tabs.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'zod';
-import { defineTool, type ToolFactory } from './tool';
+import { defineTool, type ToolFactory } from './tool.js';
 
 const listTabs = defineTool({
   capability: 'tabs',

src/tools/tool.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import type { ImageContent, TextContent } from '@modelcontextprotocol/sdk/types';
+import type { ImageContent, TextContent } from '@modelcontextprotocol/sdk/types.js';
 import type { z } from 'zod';
-import type { Context } from '../context';
+import type { Context } from '../context.js';
 import type * as playwright from 'playwright';
-import type { ToolCapability } from '../../config';
+import type { ToolCapability } from '../../config.js';
 
 export type ToolSchema<Input extends InputType> = {
   name: string;

src/tools/utils.ts

@@ -15,7 +15,7 @@
  */
 
 import type * as playwright from 'playwright';
-import type { Context } from '../context';
+import type { Context } from '../context.js';
 
 export async function waitForCompletion<R>(context: Context, page: playwright.Page, callback: () => Promise<R>): Promise<R> {
   const requests = new Set<playwright.Request>();

src/transport.ts

@@ -18,7 +18,7 @@ import http from 'node:http';
 import assert from 'node:assert';
 import crypto from 'node:crypto';
 
-import { ServerList } from './server';
+import { ServerList } from './server.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
 import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';