build: overhaul build with vite & playwright (#2825)

BREAKING CHANGE: mutation-testing-report-schema and mutation-testing-metrics are now ESM
BREAKING CHANGE: report-schema `MutantStatus` is a union type instead of TS enum

---------

Co-authored-by: Nico Jansen <jansennico@gmail.com>

.github/workflows/ci.yml

@@ -28,14 +28,26 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: 21
       - run: npm ci
+      # Only install playwright if elements project is affected
+      - name: affected
+        id: affected
+        shell: bash
+        run: echo "affected=$(npx nx show projects --affected --json)" >> "$GITHUB_OUTPUT"
+      - name: Install Playwright Browsers
+        if: ${{ contains(fromJson(steps.affected.outputs.affected), 'elements') }}
+        run: npx playwright install chromium firefox --with-deps
       - name: Lint & Build & Test
         run: npm run all
       - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: image-diffs
-          path: packages/elements/reports/diff/
+          path: packages/elements/playwright-report/
   incremental_mutation_testing:
     runs-on: ubuntu-latest
     steps:
@@ -44,6 +56,6 @@ jobs:
       - run: npm run download-incremental-reports
       - name: Run Stryker incrementally
         run: |
-          npx nx run-many --target=stryker --projects=mutation-testing-metrics,mutation-testing-elements -- --incremental
+          npx nx run-many --target=stryker --projects=metrics,elements -- --incremental
         env:
           STRYKER_DASHBOARD_API_KEY: ${{ secrets.STRYKER_DASHBOARD_API_KEY }}

.github/workflows/mutation-testing.yml

@@ -11,28 +11,44 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
       - run: npm ci
       - name: Run Stryker
-        run: npx nx run mutation-testing-metrics:stryker
+        run: npx nx run metrics:stryker
         env:
           STRYKER_DASHBOARD_API_KEY: ${{ secrets.STRYKER_DASHBOARD_API_KEY }}
   elements:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
       - run: npm ci
       - name: Run Stryker
-        run: npx nx run mutation-testing-elements:stryker
+        run: npx nx run elements:stryker
         env:
           STRYKER_DASHBOARD_API_KEY: ${{ secrets.STRYKER_DASHBOARD_API_KEY }}
 
   metrics-scala:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
       - uses: coursier/cache-action@v6
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: 21
       - run: npm ci
       - name: Run Stryker
-        run: npx nx run mutation-testing-metrics-scala:stryker
+        run: npx nx run metrics-scala:stryker
         env:
           STRYKER_DASHBOARD_API_KEY: ${{ secrets.STRYKER_DASHBOARD_API_KEY }}

.github/workflows/release.yml

@@ -12,6 +12,14 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: 21
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
       - name: Set Release Env
         run: |
           echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc

.github/workflows/update-screenshots.yml

@@ -18,8 +18,9 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
+      - run: npx playwright install chromium firefox --with-deps
       - run: npx nx run-many --target=build
-      - run: npx nx run mutation-testing-elements:test:integration:update
+      - run: npx nx run elements:test:integration:update
       - name: Commit
         run: |
           git config --global user.name 'Stryker Mutator NPA'

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 dist
-dist-test
+dist-tsc
 .stryker-tmp
 reports
 src-generated
@@ -16,4 +16,12 @@ pom.xml.versionsBackup
 packages/*/mvn/resources/
 .scala-build/
 
-.nx/cache
+.nx/cache
+# pack files
+mutation-*.tgz
+
+# Playwright
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/

.prettierignore

@@ -5,7 +5,7 @@ CHANGELOG.md
 
 # Other generated files
 dist
-dist-test
+dist-tsc
 src-generated
 .stryker-tmp
 reports
@@ -18,4 +18,4 @@ report.json
 
 testResources
 
-/.nx/cache
+/.nx/cache

.prettierrc

@@ -2,6 +2,6 @@
   "printWidth": 150,
   "singleQuote": true,
   "htmlWhitespaceSensitivity": "strict",
-  "tailwindConfig": "./packages/elements/tailwind.config.js",
+  "tailwindConfig": "./packages/elements/tailwind.config.ts",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/extensions.json

@@ -3,7 +3,13 @@
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
   // List of extensions which should be recommended for users of this workspace.
-  "recommendations": ["streetsidesoftware.code-spell-checker", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
+  "recommendations": [
+    "streetsidesoftware.code-spell-checker",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "ms-playwright.playwright"
+  ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
 }

.vscode/launch.json

@@ -19,21 +19,6 @@
         "${workspaceFolder}/packages/metrics/dist/test/**/*.js"
       ],
       "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Integration tests (Mutation testing elements)",
-      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
-      "env": {
-        "TS_NODE_IGNORE_DIAGNOSTICS": "1149,6133",
-        "HEADLESS": "true"
-        // "UPDATE_ALL_SCREENSHOTS": "true",
-      },
-      "args": ["--no-timeout", "--colors", "--config", "${workspaceFolder}/packages/elements/test/integration/.mocharc.cjs"],
-      "cwd": "${workspaceFolder}/packages/elements",
-      "internalConsoleOptions": "openOnSessionStart",
-      "sourceMaps": true
     }
   ]
 }

CONTRIBUTING.md

@@ -0,0 +1,97 @@
+# Contribute to mutation-testing-elements
+
+This is the contribution guide for mutation-testing-elements. Great to have you here! Here are a few ways you can help make this project better.
+
+## Learn & listen
+
+Get in touch with us through twitter or via the [Stryker Slack](https://join.slack.com/t/stryker-mutator/shared_invite/enQtOTUyMTYyNTg1NDQ0LTU4ODNmZDlmN2I3MmEyMTVhYjZlYmJkOThlNTY3NTM1M2QxYmM5YTM3ODQxYmJjY2YyYzllM2RkMmM1NjNjZjM).
+
+- [@stryker_mutator](https://twitter.com/stryker_mutator)
+- [@\_nicojs](https://twitter.com/_nicojs)
+- [@hugovr@mastodon.social](https://mastodon.social/@hugovr)
+
+## Code style
+
+Please adhere to our [editorconfig](https://editorconfig.org), [eslint](https://eslint.org/) rules and prettier rules.
+
+If you're using vscode, please open the [workspace.code-workspace](./workspace.code-workspace) file (note: **not** the directory) and install the recommended extensions.
+
+## Dependencies
+
+Install the following:
+
+- An LTS version of [NodeJS](https://nodejs.org/)
+- For metrics-scala:
+  - [Java JDK](https://openjdk.java.net/), a recent version like 11, 17 or 21 is recommended
+  - [sbt](https://www.scala-sbt.org/), to build and test the project
+
+## Running stuff locally
+
+We use [nx](https://nx.dev/) to manage the packages in this repository. You don't have to install it globally. The packages themselves can be found in the [packages folder](./packages/).
+
+### Cheatsheet for NX
+
+Here are some common nx commands:
+
+- `npx nx show projects` (optionall with `--affected`)
+- `npx nx run-many --target test`
+- `npx nx test metrics`
+- `npx nx run metrics:test`
+- `npm run all -- --base=master`
+
+In general, whenever you want to `npm run $A` something, instead call `npx nx $A $PROJECT` where `$PROJECT` is the name of the project you want to run it on. For example, `npm run test:unit` in `packages/elements` becomes `npx nx test:unit elements`.
+
+## VSCode environment configuration
+
+Some quick notes to help you get started:
+
+1. On the left side, you can see all stryker projects and plugins. Open files from there.
+1. Use `CTRL+Shift+B` (or `⌘+Shift+B` on OSX) to run the _build task_. This runs `npm start`, compiling any changes you make in the background.
+1. Use `CTRL+Shift+D` (or `⌘⇧D` on OSX) to open up the _debug_ pane. Here you can select a config to run.
+
+Have fun!
+
+## Debugging mutation-testing-elements
+
+### Unit tests
+
+To debug the unit tests, you can place a `debugger` statement on the place you want to debug. Then, start the unit tests and open the dev tools to trigger the debug statement.
+
+## Integration tests
+
+Install the VS Code Playwright plugin (from the recommended extensions). Then run any test from the sidebar in a test file.
+
+## Running Stryker on mutation-testing-elements
+
+We support mutation testing mutation-testing-elements with Stryker! You can run it with `npx nx run PACKAGE_NAME:stryker`, for example `npx nx run elements:stryker`.
+
+## Adding new features
+
+New features are welcome! Either as requests or proposals.
+
+1. Please create an issue first or let us know via the [Stryker Slack](https://join.slack.com/t/stryker-mutator/shared_invite/enQtOTUyMTYyNTg1NDQ0LTU4ODNmZDlmN2I3MmEyMTVhYjZlYmJkOThlNTY3NTM1M2QxYmM5YTM3ODQxYmJjY2YyYzllM2RkMmM1NjNjZjM)
+1. Create a fork on your github account.
+1. When writing your code, please conform to the existing coding style.
+   See [.editorconfig](https://github.com/stryker-mutator/stryker-js/blob/master/.editorconfig), the [typescript guidelines](https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines) and our tslint.json
+   - You can check if there are lint issues using `npx nx run-many -t lint`.
+   - You can automatically fix a lot of lint issues using `npm run lint:fix`
+1. Please create or edit unit tests or integration tests.
+1. Run the tests using `npx nx run test`
+1. Push your changes and create [a pull request](https://github.com/stryker-mutator/mutation-testing-elements/compare)
+
+Don't get discouraged! We estimate that the response time from the
+maintainers is around 3 days or so.
+
+# Bug triage
+
+Found a bug? Don't worry, we'll fix it, or you can ;)
+
+Please report a bug report on our [issues page](https://github.com/stryker-mutator/mutation-testing-elements/issues). In this please:
+
+1. Label the issue as bug
+2. Explain what the bug is in clear English
+3. Include reproduction steps
+   This can be an example project, code snippet, etc
+4. Include the expected behavior.
+5. Include actual behavior.
+6. Add more details if required (e.g. which browser, which test runner, which versions, etc)

libs/eslint-plugin-mte/index.js

@@ -2,14 +2,15 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   parserOptions: {
-    project: true,
+    project: ['./tsconfig.json', './{src,test}/tsconfig.json', './test/{unit,integration}/tsconfig.json', '../../tsconfig.node.json'],
   },
   rules: {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
 
     // Not useful for a lot of stuff, but mainly `.shadowRoot`
     '@typescript-eslint/no-non-null-assertion': 'off',
@@ -21,18 +22,17 @@ module.exports = {
     'plugin:@typescript-eslint/recommended-type-checked',
     'prettier',
   ],
+  reportUnusedDisableDirectives: true,
   env: {
     node: true,
     es6: true,
   },
   ignorePatterns: [
-    'webpack.*.js',
-    '*.conf.js',
-    '*.config.js',
+    'trace/',
     'tsconfig-transpiler.js',
     'node_modules',
     'dist',
-    'dist-test',
+    'dist-tsc',
     'src-generated',
     '.stryker-tmp',
     'reports',

nx.json

@@ -2,30 +2,35 @@
   "extends": "nx/presets/npm.json",
   "targetDefaults": {
     "build:tsc": {
-      "dependsOn": ["^generate"],
-      "outputs": ["{projectRoot}/packages/*/dist", "{projectRoot}/packages/*/dist-test"]
+      "dependsOn": ["report-schema:generate"],
+      "outputs": ["{projectRoot}/packages/*/dist", "{projectRoot}/packages/*/dist-tsc"],
+      "cache": true
     },
     "build": {
-      "dependsOn": ["^build", "root:build:tsc", "generate"],
-      "outputs": ["{projectRoot}/dist", "{projectRoot}/dist-test", "{projectRoot}/target"],
+      "dependsOn": ["^build", "root:build:tsc"],
+      "outputs": ["{projectRoot}/dist", "{projectRoot}/target"],
       "cache": true
     },
     "generate": {
+      "inputs": ["{projectRoot}/src/*.json", "{workspaceRoot}/tasks/schema2ts.js"],
       "outputs": ["{projectRoot}/src-generated"],
       "cache": true
     },
     "test": {
-      "dependsOn": ["generate", "build", "root:build:tsc"],
+      "dependsOn": ["root:build:tsc"],
       "cache": true
     },
     "stryker": {
-      "dependsOn": ["build", "^build", "root:build:tsc"],
+      "dependsOn": ["generate", "root:build:tsc", "^build"],
       "outputs": ["{projectRoot}/reports", "{projectRoot}/target-stryker4s-report-*/"],
       "cache": true
     },
     "lint": {
-      "dependsOn": ["build", "root:build:tsc"],
+      "dependsOn": ["root:build:tsc"],
       "cache": true
+    },
+    "start": {
+      "dependsOn": ["root:build:tsc"]
     }
   }
 }