@cucumber/html-formatter 18.0.0 → 19.2.0

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@cucumber/html-formatter",
-  "version": "18.0.0",
+  "version": "19.2.0",
   "description": "HTML formatter for Cucumber",
-  "bin": {
-    "cucumber-html-formatter": "bin/cucumber-html-formatter.js"
-  },
   "main": "dist/src/CucumberHtmlStream.js",
   "types": "dist/src/CucumberHtmlStream.d.ts",
   "repository": {
@@ -14,40 +11,62 @@
   "author": "Aslak Hellesøy",
   "license": "MIT",
   "scripts": {
-    "prepare": "cpy '**/*.scss' '../dist/src' --cwd='src' --parents",
-    "test": "mocha",
-    "prepublishOnly": "tsc --build tsconfig.build.json"
+    "clean": "shx rm -rf dist",
+    "build:tsc": "tsc --build tsconfig.build.json",
+    "build:webpack": "webpack",
+    "build": "npm run clean && npm run build:tsc && npm run prepare && npm run build:webpack",
+    "prepare": "shx mkdir -p dist/src && shx cp src/*.scss dist/src && shx cp src/index.mustache.html dist/src",
+    "test": "mocha --exclude test/acceptance.ts",
+    "prepublishOnly": "npm run build",
+    "eslint:fix": "eslint --ext ts,tsx --max-warnings 0 --fix src test",
+    "eslint": "eslint --ext ts,tsx --max-warnings 0 src test",
+    "validate": "mocha test/acceptance.ts"
   },
-  "dependencies": {
-    "@cucumber/messages": "^17.1.1",
-    "commander": "8.3.0",
-    "source-map-support": "0.5.21"
+  "peerDependencies": {
+    "@cucumber/messages": ">=18"
   },
   "devDependencies": {
-    "@babel/core": "7.16.12",
-    "@cucumber/gherkin-streams": "^4.0.0",
+    "@babel/core": "7.18.0",
+    "@cucumber/compatibility-kit": "^9.2.0",
+    "@cucumber/gherkin": "23.0.1",
+    "@cucumber/gherkin-streams": "^5.0.1",
     "@cucumber/gherkin-utils": "^7.0.0",
-    "@cucumber/message-streams": "^3.0.0",
+    "@cucumber/message-streams": "^4.0.1",
+    "@cucumber/messages": "^18.0.0",
     "@cucumber/query": "^11.0.0",
-    "@cucumber/react": "^19.0.0",
-    "@types/mocha": "9.1.0",
-    "@types/node": "16.11.21",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
-    "babel-loader": "8.2.3",
-    "cpy-cli": "3.1.1",
-    "css-loader": "6.5.1",
-    "mini-css-extract-plugin": "2.5.3",
-    "mocha": "9.2.0",
-    "puppeteer": "^13.1.2",
+    "@cucumber/react-components": "^20.1.0",
+    "@types/glob": "^7.2.0",
+    "@types/mocha": "9.1.1",
+    "@types/node": "17.0.23",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "babel-loader": "8.2.5",
+    "css-loader": "6.7.1",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "glob": "^8.0.0",
+    "mini-css-extract-plugin": "2.6.0",
+    "mocha": "10.0.0",
+    "prettier": "^2.6.2",
+    "puppeteer": "^14.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "sass": "1.49.0",
-    "sass-loader": "12.4.0",
-    "ts-loader": "9.2.6",
-    "ts-node": "10.4.0",
-    "typescript": "4.5.5",
-    "webpack": "5.67.0",
+    "sass": "1.52.1",
+    "sass-loader": "13.0.0",
+    "shx": "^0.3.4",
+    "source-map-support": "0.5.21",
+    "ts-loader": "9.3.0",
+    "ts-node": "10.8.0",
+    "typescript": "4.7.2",
+    "webpack": "5.72.1",
     "webpack-cli": "4.9.2"
   },
   "bugs": {

package/src/CucumberHtmlStream.ts

@@ -1,6 +1,6 @@
+import * as messages from '@cucumber/messages'
 import fs from 'fs'
 import { Readable, Transform, TransformCallback } from 'stream'
-import * as messages from '@cucumber/messages'
 
 export default class CucumberHtmlStream extends Transform {
   private template: string | null = null
@@ -11,7 +11,10 @@ export default class CucumberHtmlStream extends Transform {
    * @param cssPath
    * @param jsPath
    */
-  constructor(private readonly cssPath: string, private readonly jsPath: string) {
+  constructor(
+    private readonly cssPath: string,
+    private readonly jsPath: string
+  ) {
     super({ objectMode: true })
   }
 
@@ -79,22 +82,31 @@ export default class CucumberHtmlStream extends Transform {
   ) {
     this.readTemplate((err, template) => {
       if (err) return callback(err)
-      const beginIndex = begin == null ? 0 : template.indexOf(begin) + begin.length
+      if (!template)
+        return callback(new Error('template is required if error is missing'))
+      const beginIndex =
+        begin == null ? 0 : template.indexOf(begin) + begin.length
       const endIndex = end == null ? template.length : template.indexOf(end)
       this.push(template.substring(beginIndex, endIndex))
       callback()
     })
   }
 
-  private readTemplate(callback: (error?: Error | null, data?: string) => void) {
+  private readTemplate(
+    callback: (error?: Error | null, data?: string) => void
+  ) {
     if (this.template !== null) {
       return callback(null, this.template)
     }
-    fs.readFile(__dirname + '/index.mustache.html', { encoding: 'utf-8' }, (err, template) => {
-      if (err) return callback(err)
-      this.template = template
-      return callback(null, template)
-    })
+    fs.readFile(
+      __dirname + '/index.mustache.html',
+      { encoding: 'utf-8' },
+      (err, template) => {
+        if (err) return callback(err)
+        this.template = template
+        return callback(null, template)
+      }
+    )
   }
 
   private writeMessage(envelope: messages.Envelope) {

package/src/main.tsx

@@ -1,8 +1,9 @@
+import './styles.scss'
+
 import * as messages from '@cucumber/messages'
-import { components, searchFromURLParams } from '@cucumber/react'
+import { components, searchFromURLParams } from '@cucumber/react-components'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './styles.scss'
 
 const { CucumberReact } = components
 const { FilteredResults, EnvelopesWrapper, SearchWrapper } = components.app

package/test/CucumberHtmlStreamTest.ts

@@ -1,13 +1,20 @@
 import * as messages from '@cucumber/messages'
-import CucumberHtmlStream from '../src/CucumberHtmlStream'
-import { Writable } from 'stream'
 import assert from 'assert'
+import { Writable } from 'stream'
 
-async function renderAsHtml(...envelopes: messages.Envelope[]): Promise<string> {
+import CucumberHtmlStream from '../src/CucumberHtmlStream'
+
+async function renderAsHtml(
+  ...envelopes: messages.Envelope[]
+): Promise<string> {
   return new Promise((resolve, reject) => {
     let html = ''
     const sink: Writable = new Writable({
-      write(chunk: any, encoding: string, callback: (error?: Error | null) => void): void {
+      write(
+        chunk: string,
+        _: string,
+        callback: (error?: Error | null) => void
+      ): void {
         html += chunk
         callback()
       },
@@ -40,7 +47,9 @@ describe('CucumberHtmlStream', () => {
       },
     }
     const html = await renderAsHtml(e1)
-    assert(html.indexOf(`window.CUCUMBER_MESSAGES = [${JSON.stringify(e1)}]`) >= 0)
+    assert(
+      html.indexOf(`window.CUCUMBER_MESSAGES = [${JSON.stringify(e1)}]`) >= 0
+    )
   })
 
   it('writes two messages to html', async () => {
@@ -57,7 +66,11 @@ describe('CucumberHtmlStream', () => {
     }
     const html = await renderAsHtml(e1, e2)
     assert(
-      html.indexOf(`window.CUCUMBER_MESSAGES = [${JSON.stringify(e1)},${JSON.stringify(e2)}]`) >= 0
+      html.indexOf(
+        `window.CUCUMBER_MESSAGES = [${JSON.stringify(e1)},${JSON.stringify(
+          e2
+        )}]`
+      ) >= 0
     )
   })
 })

package/test/acceptance.ts

@@ -0,0 +1,62 @@
+import { NdjsonToMessageStream } from '@cucumber/message-streams'
+import assert from 'assert'
+import fs from 'fs'
+import glob from 'glob'
+import path from 'path'
+import puppeteer from 'puppeteer'
+import { PassThrough, pipeline } from 'stream'
+
+import CucumberHtmlStream from '../src/CucumberHtmlStream'
+
+async function canRenderHtml(html: string): Promise<boolean> {
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox'],
+  })
+  const page = await browser.newPage()
+  await page.setContent(html)
+  const dynamicHTML = await page.evaluate(() => {
+    const content = document.querySelector('[data-testid="cucumber-react"]')
+    return content && content.innerHTML
+  })
+  await browser.close()
+
+  if (!dynamicHTML) {
+    return false
+  }
+
+  return true
+}
+
+describe('html-formatter', () => {
+  const files = glob.sync(
+    `./node_modules/@cucumber/compatibility-kit/features/**/*.ndjson`
+  )
+  for (const ndjson of files) {
+    it(`can render ${path.basename(ndjson, '.ndjson')}`, async () => {
+      const ndjsonData = fs.createReadStream(ndjson, { encoding: 'utf-8' })
+      const toMessageStream = new NdjsonToMessageStream()
+      const htmlData = await new Promise<string>((resolve, reject) => {
+        const chunks: Buffer[] = []
+        const out = new PassThrough()
+          .on('data', (chunk) => chunks.push(Buffer.from(chunk)))
+          .on('end', () => resolve(Buffer.concat(chunks).toString()))
+        pipeline(
+          ndjsonData,
+          toMessageStream,
+          new CucumberHtmlStream(
+            __dirname + '/../dist/main.css',
+            __dirname + '/../dist/main.js'
+          ),
+          out,
+          (err: Error) => {
+            if (err) {
+              reject(err)
+            }
+          }
+        )
+      })
+      assert.ok(await canRenderHtml(htmlData.toString()))
+    })
+  }
+})

package/tsconfig.build.json

@@ -1,13 +1,15 @@
 {
-  "extends": "../../tsconfig.build.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "rootDir": ".",
-    "outDir": "dist"
+    "outDir": "dist",
+    "composite": true,
+    "declarationMap": true,
+    "noEmit": false
   },
   "include": [
     "src",
     "test",
-    "features",
     "package.json"
   ]
 }

package/tsconfig.json

@@ -1,3 +1,25 @@
 {
-  "extends": "../../tsconfig.json"
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "sourceMap": true,
+    "allowJs": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "experimentalDecorators": true,
+    "module": "CommonJS",
+    "lib": [
+      "ES6",
+      "dom"
+    ],
+    "target": "ES6",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "jsx": "react"
+  }
 }

package/.github/ISSUE_TEMPLATE.md

@@ -1,5 +0,0 @@
-PLEASE DO NOT CREATE ISSUES IN THIS REPO.
-THIS REPO IS A READ-ONLY MIRROR.
-
-Create your issue in the Cucumber monorepo instead:
-https://github.com/cucumber/cucumber/issues

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +0,0 @@
-PLEASE DO NOT CREATE PULL REAUESTS IN THIS REPO.
-THIS REPO IS A READ-ONLY MIRROR.
-
-Create your pull request in the Cucumber monorepo instead:
-https://github.com/cucumber/cucumber/pulls

package/.rsync

@@ -1,3 +0,0 @@
-../../LICENSE LICENSE
-../../.templates/github/ .github/
-../../.templates/javascript/ .

package/.subrepo

@@ -1 +0,0 @@
-cucumber/html-formatter

package/Dockerfile

@@ -1,15 +0,0 @@
-# cucumber/html-formatter
-FROM node:16-alpine
-
-RUN mkdir -p /home/node/app
-ADD src /home/node/app/src
-ADD test /home/node/app/test
-ADD bin /home/node/app/bin
-ADD package.json /home/node/app/package.json
-ADD tsconfig.json /home/node/app/tsconfig.json
-ADD webpack.config.js /home/node/app/webpack.config.js
-RUN cd /home/node/app && npm install
-RUN cd /home/node/app && npm run build
-
-USER node
-ENTRYPOINT [ "/home/node/app/bin/cucumber-html-formatter.js" ]

package/Makefile

@@ -1,27 +0,0 @@
-include default.mk
-
-CCK_NDJSONS = $(shell find ../../compatibility-kit/javascript/features -name "*.ndjson")
-HTML_REPORTS = $(patsubst ../../compatibility-kit/javascript/features/%.ndjson,acceptance/%.html,$(CCK_NDJSONS))
-HTML_REPORT_CHECKS = $(patsubst acceptance/%.html,acceptance/%.html.checked,$(HTML_REPORTS))
-
-.built: webpack.config.js dist/main.js dist/src/index.mustache.html
-
-dist/main.js: dist/src/main.js
-	../../node_modules/.bin/webpack-cli
-
-dist/src/main.js:
-	npm i -D puppeteer
-	npm run prepublishOnly
-
-dist/src/index.mustache.html: src/index.mustache.html
-	cp $< $@
-
-.tested: $(HTML_REPORT_CHECKS)
-
-.PRECIOUS: acceptance/%.html
-acceptance/%.html: ../../compatibility-kit/javascript/features/%.ndjson .built
-	mkdir -p $(@D)
-	cat $< | ./bin/cucumber-html-formatter.js > $@
-
-acceptance/%.html.checked: acceptance/%.html
-	node check.js $< > $@

package/bin/cucumber-html-formatter.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-require('source-map-support').install()
-require('../dist/src/cli-main')

package/check.js

@@ -1,27 +0,0 @@
-const fs = require('fs')
-const path = process.argv[2]
-const html = fs.readFileSync(path, 'utf-8')
-const puppeteer = require('puppeteer')
-
-async function check() {
-  const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] })
-  const page = await browser.newPage()
-  await page.setContent(html)
-  const dynamicHTML = await page.evaluate(() => {
-    const content = document.querySelector('[data-testid="cucumber-react"]')
-    return content && content.innerHTML
-  })
-  await browser.close()
-
-  if (!dynamicHTML)
-    throw new Error(
-      `The file ${path} did not render a [data-testid="cucumber-react"] element. Inspect manually.`
-    )
-}
-
-check()
-  .then(() => console.log(`${path} rendered OK!`))
-  .catch((err) => {
-    console.error(err.stack)
-    process.exit(1)
-  })

package/default.mk

@@ -1,87 +0,0 @@
-SHELL := /usr/bin/env bash
-# https://stackoverflow.com/questions/2483182/recursive-wildcards-in-gnu-make
-rwildcard=$(foreach d,$(wildcard $(1:=/*)),$(call rwildcard,$d,$2) $(filter $(subst *,%,$2),$d))
-TYPESCRIPT_SOURCE_FILES = $(sort $(call rwildcard,src test,*.ts *.tsx))
-PRIVATE = $(shell node -e "console.log(require('./package.json').private)")
-IS_TESTDATA = $(findstring -testdata,${CURDIR})
-NPM_MODULE = $(shell cat package.json | jq .name --raw-output)
-
-default: .tested
-.PHONY: default
-
-../../node_modules ../../package-lock.json: package.json
-	cd ../.. && npm install
-
-.codegen:
-	touch $@
-
-.tested: .tested-npm .built
-
-.built: $(TYPESCRIPT_SOURCE_FILES) ../../node_modules ../../package-lock.json .codegen
-	pushd ../.. && \
-	npm run build && \
-	popd && \
-	touch $@
-
-.tested-npm: $(TYPESCRIPT_SOURCE_FILES) ../../node_modules ../../package-lock.json .codegen
-	npm run test
-	touch $@
-
-pre-release: clean update-version update-dependencies default
-.PHONY: pre-release
-
-update-dependencies: ../../node_modules ../../package-lock.json
-	../../node_modules/.bin/npm-check-updates --upgrade --reject hast-util-sanitize,@types/node,react-markdown,rehype-raw,rehype-sanitize,remark-gfm
-.PHONY: update-dependencies
-
-update-version:
-ifeq ($(IS_TESTDATA),-testdata)
-	# no-op
-else
-ifdef NEW_VERSION
-	npm --no-git-tag-version --allow-same-version version "$(NEW_VERSION)"
-	# Update all npm packages that depend on us
-	pushd ../.. && \
-		./scripts/npm-each update_npm_dependency_if_exists package.json "$(NPM_MODULE)" "$(NEW_VERSION)"
-else
-	@echo -e "\033[0;31mNEW_VERSION is not defined. Can't update version :-(\033[0m"
-	exit 1
-endif
-endif
-.PHONY: update-version
-
-publish: .codegen
-ifeq ($(IS_TESTDATA),-testdata)
-	# no-op
-else
-ifneq (true,$(PRIVATE))
-	npm publish --access public
-else
-	@echo "Not publishing private npm module"
-endif
-endif
-.PHONY: publish
-
-post-release:
-.PHONY: post-release
-
-clean: clean-javascript
-.PHONY: clean
-
-clean-javascript:
-	rm -rf .deps .codegen .tested* coverage dist acceptance
-.PHONY: clean-javascript
-
-clobber: clean
-	rm -rf node_modules ../../node_modules
-.PHONY: clobber
-
-### COMMON stuff for all platforms
-
-BERP_VERSION = 1.3.0
-BERP_GRAMMAR = gherkin.berp
-
-define berp-generate-parser =
--! dotnet tool list --tool-path /usr/bin | grep "berp\s*$(BERP_VERSION)" && dotnet tool update Berp --version $(BERP_VERSION) --tool-path /usr/bin
-berp -g $(BERP_GRAMMAR) -t $< -o $@ --noBOM
-endef

package/dist/src/cli-main.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=cli-main.d.ts.map

package/dist/src/cli-main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cli-main.d.ts","sourceRoot":"","sources":["../../src/cli-main.ts"],"names":[],"mappings":""}

package/dist/src/cli-main.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const message_streams_1 = require("@cucumber/message-streams");
-const commander_1 = __importDefault(require("commander"));
-const package_json_1 = __importDefault(require("../package.json"));
-const stream_1 = require("stream");
-const CucumberHtmlStream_1 = __importDefault(require("./CucumberHtmlStream"));
-const program = new commander_1.default.Command();
-program.version(package_json_1.default.version);
-program.parse(process.argv);
-const toMessageStream = new message_streams_1.NdjsonToMessageStream();
-(0, stream_1.pipeline)(process.stdin, toMessageStream, new CucumberHtmlStream_1.default(__dirname + '/../../dist/main.css', __dirname + '/../../dist/main.js'), process.stdout, (err) => {
-    if (err) {
-        // tslint:disable-next-line:no-console
-        console.error(err);
-        process.exit(1);
-    }
-});
-//# sourceMappingURL=cli-main.js.map

package/dist/src/cli-main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cli-main.js","sourceRoot":"","sources":["../../src/cli-main.ts"],"names":[],"mappings":";;;;;AAAA,+DAAiE;AACjE,0DAAiC;AACjC,mEAA+B;AAC/B,mCAAiC;AACjC,8EAAqD;AAErD,MAAM,OAAO,GAAG,IAAI,mBAAS,CAAC,OAAO,EAAE,CAAA;AAEvC,OAAO,CAAC,OAAO,CAAC,sBAAC,CAAC,OAAO,CAAC,CAAA;AAC1B,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;AAE3B,MAAM,eAAe,GAAG,IAAI,uCAAqB,EAAE,CAAA;AACnD,IAAA,iBAAQ,EACN,OAAO,CAAC,KAAK,EACb,eAAe,EACf,IAAI,4BAAkB,CAAC,SAAS,GAAG,sBAAsB,EAAE,SAAS,GAAG,qBAAqB,CAAC,EAC7F,OAAO,CAAC,MAAM,EACd,CAAC,GAAQ,EAAE,EAAE;IACX,IAAI,GAAG,EAAE;QACP,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KAChB;AACH,CAAC,CACF,CAAA"}

package/src/cli-main.ts

@@ -1,25 +0,0 @@
-import { NdjsonToMessageStream } from '@cucumber/message-streams'
-import commander from 'commander'
-import p from '../package.json'
-import { pipeline } from 'stream'
-import CucumberHtmlStream from './CucumberHtmlStream'
-
-const program = new commander.Command()
-
-program.version(p.version)
-program.parse(process.argv)
-
-const toMessageStream = new NdjsonToMessageStream()
-pipeline(
-  process.stdin,
-  toMessageStream,
-  new CucumberHtmlStream(__dirname + '/../../dist/main.css', __dirname + '/../../dist/main.js'),
-  process.stdout,
-  (err: any) => {
-    if (err) {
-      // tslint:disable-next-line:no-console
-      console.error(err)
-      process.exit(1)
-    }
-  }
-)