add ESM support (take 2)

CHANGELOG.md

@@ -16,6 +16,8 @@ Please see [CONTRIBUTING.md](https://github.com/cucumber/cucumber/blob/master/CO
 
 ### Added
 
+* Add support for user code as native ES modules
+
 ### Changed
 
 ### Deprecated

README.md

@@ -67,6 +67,7 @@ The following documentation is for master. See below for documentation for older
   * [Attachments](/docs/support_files/attachments.md)
   * [API Reference](/docs/support_files/api_reference.md)
 * Guides
+  * [ES Modules](./docs/esm.md)
   * [Running in parallel](./docs/parallel.md)
   * [Retrying failing scenarios](./docs/retry.md)
   * [Profiles](./docs/profiles.md)

dependency-lint.yml

@@ -45,6 +45,7 @@ requiredModules:
       - 'dist/**/*'
       - 'lib/**/*'
       - 'node_modules/**/*'
+      - 'src/importers.js'
       - 'tmp/**/*'
     root: '**/*.{js,ts}'
   stripLoaders: false

docs/esm.md

@@ -0,0 +1,15 @@
+# ES Modules (experimental)
+
+You can optionally write your support code (steps, hooks, etc) with native ES modules syntax - i.e. using `import` and `export` statements without transpiling.
+
+To enable this, run with the `--esm` CLI option.
+
+This will also expand the default glob for support files to include the `.mjs` file extension.
+
+As well as support code, these things can also be in ES modules syntax:
+
+- Custom formatters
+- Custom snippets
+- Your `cucumber.js` config file
+
+You can use ES modules selectively/incrementally - the module loading strategy that the `--esm` flag activates supports both ES modules and CommonJS.

features/direct_imports.feature

@@ -44,3 +44,20 @@ Feature: Core feature elements execution using direct imports
       """
       features/step_definitions/cucumber_steps.js:3
       """
+
+  Scenario: deep imports don't break everything
+    Given a file named "features/a.feature" with:
+      """
+      Feature: some feature
+        Scenario: some scenario
+          Given a step passes
+      """
+    And a file named "features/step_definitions/cucumber_steps.js" with:
+      """
+      const {Given} = require('@cucumber/cucumber')
+      const TestCaseHookDefinition = require('@cucumber/cucumber/lib/models/test_case_hook_definition')
+
+      Given(/^a step passes$/, function() {});
+      """
+    When I run cucumber-js
+    Then it passes

features/esm.feature

@@ -0,0 +1,80 @@
+Feature: ES modules support
+
+  cucumber-js works with native ES modules, via a Cli flag `--esm`
+
+  @esm
+  Scenario Outline: native module syntax works when using --esm
+    Given a file named "features/a.feature" with:
+      """
+      Feature:
+        Scenario: one
+          Given a step passes
+
+        Scenario: two
+          Given a step passes
+      """
+    And a file named "features/step_definitions/cucumber_steps.js" with:
+      """
+      import {Given} from '@cucumber/cucumber'
+
+      Given(/^a step passes$/, function() {});
+      """
+    And a file named "cucumber.js" with:
+      """
+      export default {
+        'default': '--format message:messages.ndjson',
+      }
+      """
+    And a file named "custom-formatter.js" with:
+      """
+      import {SummaryFormatter} from '@cucumber/cucumber'
+
+      export default class CustomFormatter extends SummaryFormatter {}
+      """
+    And a file named "custom-snippet-syntax.js" with:
+      """
+      export default class CustomSnippetSyntax {
+          build(opts) {
+              return 'hello world'
+          }
+      }
+      """
+    When I run cucumber-js with `<options> --format ./custom-formatter.js --format-options '{"snippetSyntax": "./custom-snippet-syntax.js"}'`
+    Then it passes
+    Examples:
+      | options            |
+      | --esm              |
+      | --esm --parallel 2 |
+
+  @esm
+  Scenario: .mjs support code files are matched by default when using --esm
+    Given a file named "features/a.feature" with:
+      """
+      Feature:
+        Scenario:
+          Given a step passes
+      """
+    And a file named "features/step_definitions/cucumber_steps.mjs" with:
+      """
+      import {Given} from '@cucumber/cucumber'
+
+      Given(/^a step passes$/, function() {});
+      """
+    When I run cucumber-js with `--esm`
+    Then it passes
+
+  Scenario: native module syntax doesn't work without --esm
+    Given a file named "features/a.feature" with:
+      """
+      Feature:
+        Scenario:
+          Given a step passes
+      """
+    And a file named "features/step_definitions/cucumber_steps.js" with:
+      """
+      import {Given} from '@cucumber/cucumber'
+
+      Given(/^a step passes$/, function() {});
+      """
+    When I run cucumber-js
+    Then it fails

features/support/hooks.ts

@@ -13,7 +13,7 @@ Before('@debug', function (this: World) {
   this.debug = true
 })
 
-Before('@spawn', function (this: World) {
+Before('@spawn or @esm', function (this: World) {
   this.spawn = true
 })
 
@@ -43,6 +43,18 @@ Before(function (
   this.localExecutablePath = path.join(projectPath, 'bin', 'cucumber-js')
 })
 
+Before('@esm', function (this: World) {
+  const [majorVersion] = process.versions.node.split('.')
+  if (Number(majorVersion) < 12) {
+    return 'skipped'
+  }
+  fsExtra.writeJSONSync(path.join(this.tmpDir, 'package.json'), {
+    name: 'feature-test-pickle',
+    type: 'module',
+  })
+  return undefined
+})
+
 Before('@global-install', function (this: World) {
   const tmpObject = tmp.dirSync({ unsafeCleanup: true })
 

package.json

@@ -163,6 +163,15 @@
     "lib": "./lib"
   },
   "main": "./lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/wrapper.mjs",
+      "require": "./lib/index.js"
+    },
+    "./lib/*": {
+      "require": "./lib/*.js"
+    }
+  },
   "types": "./lib/index.d.ts",
   "engines": {
     "node": ">=12"
@@ -181,7 +190,6 @@
     "cli-table3": "^0.6.0",
     "colors": "^1.4.0",
     "commander": "^8.0.0",
-    "create-require": "^1.1.1",
     "duration": "^0.2.2",
     "durations": "^3.4.2",
     "figures": "^3.2.0",
@@ -255,7 +263,7 @@
     "typescript": "4.3.5"
   },
   "scripts": {
-    "build-local": "tsc -p tsconfig.node.json",
+    "build-local": "tsc -p tsconfig.node.json && cp src/importers.js lib/ && cp src/wrapper.mjs lib/",
     "cck-test": "mocha 'compatibility/**/*_spec.ts'",
     "feature-test": "node ./bin/cucumber-js",
     "html-formatter": "node ./bin/cucumber-js --profile htmlFormatter",

src/cli/argv_parser.ts

@@ -21,6 +21,7 @@ export interface IParsedArgvFormatOptions {
 export interface IParsedArgvOptions {
   backtrace: boolean
   dryRun: boolean
+  esm: boolean
   exit: boolean
   failFast: boolean
   format: string[]
@@ -111,6 +112,7 @@ const ArgvParser = {
         'invoke formatters without executing steps',
         false
       )
+      .option('--esm', 'import support code via ES module imports', false)
       .option(
         '--exit',
         'force shutdown of the event loop when the test run has finished: cucumber will call process.exit',

src/cli/configuration_builder.ts

@@ -18,6 +18,7 @@ export interface IConfigurationFormat {
 }
 
 export interface IConfiguration {
+  esm: boolean
   featureDefaultLanguage: string
   featurePaths: string[]
   formats: IConfigurationFormat[]
@@ -77,10 +78,11 @@ export default class ConfigurationBuilder {
       }
       supportCodePaths = await this.expandPaths(
         unexpandedSupportCodePaths,
-        '.js'
+        this.options.esm ? '.@(js|mjs)' : '.js'
       )
     }
     return {
+      esm: this.options.esm,
       featureDefaultLanguage: this.options.language,
       featurePaths,
       formats: this.getFormats(),