chore: enforce file extensions on imports

To make our output agnostic it should include file extensions in the
output, as per the ESM spec. It's a bit odd for Node packages but makes
it easier to publish a browser build.

.eslintrc.js

@@ -10,7 +10,8 @@ module.exports = {
     "plugins": [
         "mocha",
         "@typescript-eslint",
-        "unicorn"
+        "unicorn",
+        "import"
     ],
 
     "extends": [
@@ -88,7 +89,8 @@ module.exports = {
 
         "no-restricted-imports": ["error", {
             patterns: ["*Events"],
-        }]
+        }],
+        "import/extensions": ["error", "ignorePackages"]
     },
     "overrides": [
         {

mocha-config/puppeteer-unit-tests.js

@@ -18,9 +18,9 @@ const base = require('./base');
 
 module.exports = {
   ...base,
-  require: ['ts-node/register', './test/mocha-utils.ts'],
+  require: ['./test/mocha-ts-require', './test/mocha-utils.ts'],
   spec: 'test/*.spec.ts',
-  extension: ['ts'],
+  extension: ['js', 'ts'],
   parallel: process.env.CI && !process.env.COVERAGE,
   // retry twice more, so we run each test up to 3 times if needed.
   retries: process.env.CI ? 2 : 0,

package.json

@@ -8,7 +8,7 @@
     "node": ">=10.18.1"
   },
   "scripts": {
-    "unit": "tsc --version && mocha --config mocha-config/puppeteer-unit-tests.js",
+    "unit": "npm run tsc-cjs && mocha --config mocha-config/puppeteer-unit-tests.js",
     "unit-with-coverage": "cross-env COVERAGE=1 npm run unit",
     "assert-unit-coverage": "cross-env COVERAGE=1 mocha --config mocha-config/coverage-tests.js",
     "funit": "PUPPETEER_PRODUCT=firefox npm run unit",
@@ -76,6 +76,7 @@
     "dependency-cruiser": "^9.7.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-mocha": "^6.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-unicorn": "^19.0.1",

scripts/ensure-correct-devtools-protocol-package.ts

@@ -33,6 +33,7 @@
  * find the one closest to our Chromium revision.
  */
 
+// eslint-disable-next-line import/extensions
 import { PUPPETEER_REVISIONS } from '../src/revisions';
 import { execSync } from 'child_process';
 

src/api-docs-entry.ts

@@ -25,34 +25,34 @@
  * Once we have migrated to API Extractor and removed DocLint we can remove the
  * duplication and use this file.
  */
-export * from './common/Accessibility';
-export * from './common/Browser';
-export * from './node/BrowserFetcher';
-export * from './common/Connection';
-export * from './common/ConsoleMessage';
-export * from './common/Coverage';
-export * from './common/DeviceDescriptors';
-export * from './common/Dialog';
-export * from './common/DOMWorld';
-export * from './common/JSHandle';
-export * from './common/ExecutionContext';
-export * from './common/EventEmitter';
-export * from './common/FileChooser';
-export * from './common/FrameManager';
-export * from './common/Input';
-export * from './common/Page';
-export * from './common/Puppeteer';
-export * from './node/LaunchOptions';
-export * from './node/Launcher';
-export * from './common/HTTPRequest';
-export * from './common/HTTPResponse';
-export * from './common/SecurityDetails';
-export * from './common/Target';
-export * from './common/Errors';
-export * from './common/Tracing';
-export * from './common/NetworkManager';
-export * from './common/WebWorker';
-export * from './common/USKeyboardLayout';
-export * from './common/EvalTypes';
-export * from './common/TimeoutSettings';
-export * from './common/LifecycleWatcher';
+export * from './common/Accessibility.js';
+export * from './common/Browser.js';
+export * from './node/BrowserFetcher.js';
+export * from './common/Connection.js';
+export * from './common/ConsoleMessage.js';
+export * from './common/Coverage.js';
+export * from './common/DeviceDescriptors.js';
+export * from './common/Dialog.js';
+export * from './common/DOMWorld.js';
+export * from './common/JSHandle.js';
+export * from './common/ExecutionContext.js';
+export * from './common/EventEmitter.js';
+export * from './common/FileChooser.js';
+export * from './common/FrameManager.js';
+export * from './common/Input.js';
+export * from './common/Page.js';
+export * from './common/Puppeteer.js';
+export * from './node/LaunchOptions.js';
+export * from './node/Launcher.js';
+export * from './common/HTTPRequest.js';
+export * from './common/HTTPResponse.js';
+export * from './common/SecurityDetails.js';
+export * from './common/Target.js';
+export * from './common/Errors.js';
+export * from './common/Tracing.js';
+export * from './common/NetworkManager.js';
+export * from './common/WebWorker.js';
+export * from './common/USKeyboardLayout.js';
+export * from './common/EvalTypes.js';
+export * from './common/TimeoutSettings.js';
+export * from './common/LifecycleWatcher.js';

src/common/Accessibility.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { CDPSession } from './Connection';
-import { ElementHandle } from './JSHandle';
+import { CDPSession } from './Connection.js';
+import { ElementHandle } from './JSHandle.js';
 import { Protocol } from 'devtools-protocol';
 
 /**

src/common/Browser.ts

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { assert } from './assert';
-import { helper } from './helper';
-import { Target } from './Target';
-import { EventEmitter } from './EventEmitter';
-import { Connection, ConnectionEmittedEvents } from './Connection';
+import { assert } from './assert.js';
+import { helper } from './helper.js';
+import { Target } from './Target.js';
+import { EventEmitter } from './EventEmitter.js';
+import { Connection, ConnectionEmittedEvents } from './Connection.js';
 import { Protocol } from 'devtools-protocol';
-import { Page } from './Page';
+import { Page } from './Page.js';
 import { ChildProcess } from 'child_process';
-import { Viewport } from './PuppeteerViewport';
+import { Viewport } from './PuppeteerViewport.js';
 
 type BrowserCloseCallback = () => Promise<void> | void;
 

src/common/Connection.ts

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { assert } from './assert';
-import { debug } from './Debug';
+import { assert } from './assert.js';
+import { debug } from './Debug.js';
 const debugProtocolSend = debug('puppeteer:protocol:SEND ►');
 const debugProtocolReceive = debug('puppeteer:protocol:RECV ◀');
 
 import { Protocol } from 'devtools-protocol';
-import { ProtocolMapping } from 'devtools-protocol/types/protocol-mapping';
-import { ConnectionTransport } from './ConnectionTransport';
-import { EventEmitter } from './EventEmitter';
+import { ProtocolMapping } from 'devtools-protocol/types/protocol-mapping.js';
+import { ConnectionTransport } from './ConnectionTransport.js';
+import { EventEmitter } from './EventEmitter.js';
 
 interface ConnectionCallback {
   resolve: Function;

src/common/ConsoleMessage.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { JSHandle } from './JSHandle';
+import { JSHandle } from './JSHandle.js';
 
 /**
  * @public

src/common/Coverage.ts

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { assert } from './assert';
-import { helper, debugError, PuppeteerEventListener } from './helper';
+import { assert } from './assert.js';
+import { helper, debugError, PuppeteerEventListener } from './helper.js';
 import { Protocol } from 'devtools-protocol';
-import { CDPSession } from './Connection';
+import { CDPSession } from './Connection.js';
 
-import { EVALUATION_SCRIPT_URL } from './ExecutionContext';
+import { EVALUATION_SCRIPT_URL } from './ExecutionContext.js';
 
 /**
  * The CoverageEntry class represents one entry of the coverage report.

src/common/DOMWorld.ts

@@ -14,25 +14,28 @@
  * limitations under the License.
  */
 
-import { assert } from './assert';
-import { helper } from './helper';
-import { LifecycleWatcher, PuppeteerLifeCycleEvent } from './LifecycleWatcher';
-import { TimeoutError } from './Errors';
-import { JSHandle, ElementHandle } from './JSHandle';
-import { ExecutionContext } from './ExecutionContext';
-import { TimeoutSettings } from './TimeoutSettings';
-import { MouseButton } from './Input';
-import { FrameManager, Frame } from './FrameManager';
-import { getQueryHandlerAndSelector, QueryHandler } from './QueryHandler';
+import { assert } from './assert.js';
+import { helper } from './helper.js';
+import {
+  LifecycleWatcher,
+  PuppeteerLifeCycleEvent,
+} from './LifecycleWatcher.js';
+import { TimeoutError } from './Errors.js';
+import { JSHandle, ElementHandle } from './JSHandle.js';
+import { ExecutionContext } from './ExecutionContext.js';
+import { TimeoutSettings } from './TimeoutSettings.js';
+import { MouseButton } from './Input.js';
+import { FrameManager, Frame } from './FrameManager.js';
+import { getQueryHandlerAndSelector, QueryHandler } from './QueryHandler.js';
 import {
   SerializableOrJSHandle,
   EvaluateHandleFn,
   WrapElementHandle,
   EvaluateFn,
   EvaluateFnReturnType,
   UnwrapPromiseLike,
-} from './EvalTypes';
-import { isNode } from '../environment';
+} from './EvalTypes.js';
+import { isNode } from '../environment.js';
 
 // This predicateQueryHandler is declared here so that TypeScript knows about it
 // when it is used in the predicate function below.

src/common/Debug.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { isNode } from '../environment';
+import { isNode } from '../environment.js';
 
 /**
  * A debug function that can be used in any environment.

src/common/Dialog.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { assert } from './assert';
-import { CDPSession } from './Connection';
+import { assert } from './assert.js';
+import { CDPSession } from './Connection.js';
 import { Protocol } from 'devtools-protocol';
 
 /**

src/common/EmulationManager.ts

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { CDPSession } from './Connection';
-import { Viewport } from './PuppeteerViewport';
+import { CDPSession } from './Connection.js';
+import { Viewport } from './PuppeteerViewport.js';
 import { Protocol } from 'devtools-protocol';
 
 export class EmulationManager {

src/common/EvalTypes.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { JSHandle, ElementHandle } from './JSHandle';
+import { JSHandle, ElementHandle } from './JSHandle.js';
 
 /**
  * @public

src/common/ExecutionContext.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { assert } from './assert';
-import { helper } from './helper';
-import { createJSHandle, JSHandle, ElementHandle } from './JSHandle';
-import { CDPSession } from './Connection';
-import { DOMWorld } from './DOMWorld';
-import { Frame } from './FrameManager';
+import { assert } from './assert.js';
+import { helper } from './helper.js';
+import { createJSHandle, JSHandle, ElementHandle } from './JSHandle.js';
+import { CDPSession } from './Connection.js';
+import { DOMWorld } from './DOMWorld.js';
+import { Frame } from './FrameManager.js';
 import { Protocol } from 'devtools-protocol';
-import { EvaluateHandleFn, SerializableOrJSHandle } from './EvalTypes';
+import { EvaluateHandleFn, SerializableOrJSHandle } from './EvalTypes.js';
 
 export const EVALUATION_SCRIPT_URL = '__puppeteer_evaluation_script__';
 const SOURCE_URL_REGEX = /^[\040\t]*\/\/[@#] sourceURL=\s*(\S*?)\s*$/m;

src/common/FileChooser.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ElementHandle } from './JSHandle';
+import { ElementHandle } from './JSHandle.js';
 import { Protocol } from 'devtools-protocol';
-import { assert } from './assert';
+import { assert } from './assert.js';
 
 /**
  * File choosers let you react to the page requesting for a file.

src/common/FrameManager.ts

@@ -14,19 +14,22 @@
  * limitations under the License.
  */
 
-import { EventEmitter } from './EventEmitter';
-import { assert } from './assert';
-import { helper, debugError } from './helper';
-import { ExecutionContext, EVALUATION_SCRIPT_URL } from './ExecutionContext';
-import { LifecycleWatcher, PuppeteerLifeCycleEvent } from './LifecycleWatcher';
-import { DOMWorld, WaitForSelectorOptions } from './DOMWorld';
-import { NetworkManager } from './NetworkManager';
-import { TimeoutSettings } from './TimeoutSettings';
-import { CDPSession } from './Connection';
-import { JSHandle, ElementHandle } from './JSHandle';
-import { MouseButton } from './Input';
-import { Page } from './Page';
-import { HTTPResponse } from './HTTPResponse';
+import { EventEmitter } from './EventEmitter.js';
+import { assert } from './assert.js';
+import { helper, debugError } from './helper.js';
+import { ExecutionContext, EVALUATION_SCRIPT_URL } from './ExecutionContext.js';
+import {
+  LifecycleWatcher,
+  PuppeteerLifeCycleEvent,
+} from './LifecycleWatcher.js';
+import { DOMWorld, WaitForSelectorOptions } from './DOMWorld.js';
+import { NetworkManager } from './NetworkManager.js';
+import { TimeoutSettings } from './TimeoutSettings.js';
+import { CDPSession } from './Connection.js';
+import { JSHandle, ElementHandle } from './JSHandle.js';
+import { MouseButton } from './Input.js';
+import { Page } from './Page.js';
+import { HTTPResponse } from './HTTPResponse.js';
 import { Protocol } from 'devtools-protocol';
 import {
   SerializableOrJSHandle,
@@ -35,7 +38,7 @@ import {
   EvaluateFn,
   EvaluateFnReturnType,
   UnwrapPromiseLike,
-} from './EvalTypes';
+} from './EvalTypes.js';
 
 const UTILITY_WORLD_NAME = '__puppeteer_utility_world__';
 

src/common/HTTPRequest.ts

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { CDPSession } from './Connection';
-import { Frame } from './FrameManager';
-import { HTTPResponse } from './HTTPResponse';
-import { assert } from './assert';
-import { helper, debugError } from './helper';
+import { CDPSession } from './Connection.js';
+import { Frame } from './FrameManager.js';
+import { HTTPResponse } from './HTTPResponse.js';
+import { assert } from './assert.js';
+import { helper, debugError } from './helper.js';
 import { Protocol } from 'devtools-protocol';
 
 /**

src/common/HTTPResponse.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { CDPSession } from './Connection';
-import { Frame } from './FrameManager';
-import { HTTPRequest } from './HTTPRequest';
-import { SecurityDetails } from './SecurityDetails';
+import { CDPSession } from './Connection.js';
+import { Frame } from './FrameManager.js';
+import { HTTPRequest } from './HTTPRequest.js';
+import { SecurityDetails } from './SecurityDetails.js';
 import { Protocol } from 'devtools-protocol';
 
 /**