build: overhaul build with vite & playwright

.github/workflows/ci.yml

@@ -29,13 +29,21 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - 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), 'mutation-testing-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:

.github/workflows/update-screenshots.yml

@@ -18,6 +18,7 @@ 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
       - name: Commit

.gitignore

@@ -1,9 +1,10 @@
 node_modules
 dist
 dist-test
+dist-tsc
 .stryker-tmp
 reports
-src-generated
+src/generated
 *.tsbuildinfo
 
 target/
@@ -16,4 +17,13 @@ pom.xml.versionsBackup
 packages/*/mvn/resources/
 .scala-build/
 
-.nx/cache
+.nx/cache
+packages/report-schema/src/generated/schema.ts
+# pack files
+mutation-*.tgz
+
+# Playwright
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/

.prettierignore

@@ -6,7 +6,7 @@ CHANGELOG.md
 # Other generated files
 dist
 dist-test
-src-generated
+src/generated
 .stryker-tmp
 reports
 target/
@@ -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/launch.json

@@ -11,12 +11,12 @@
       "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
       "args": [
         "-r",
-        "source-map-support/register",
+        "esbuild-register",
         "--timeout",
         "999999",
         "--colors",
-        "${workspaceFolder}/packages/report-schema/dist/test/**/*.js",
-        "${workspaceFolder}/packages/metrics/dist/test/**/*.js"
+        "${workspaceFolder}/packages/report-schema/test/**/*.js",
+        "${workspaceFolder}/packages/metrics/test/**/*.js"
       ],
       "internalConsoleOptions": "openOnSessionStart"
     },

libs/eslint-plugin-mte/index.js

@@ -26,14 +26,17 @@ module.exports = {
     es6: true,
   },
   ignorePatterns: [
-    'webpack.*.js',
+    'trace/',
+    'vite.config.ts',
+    'tailwind.config.ts',
+    'playwright.config.ts',
     '*.conf.js',
     '*.config.js',
     'tsconfig-transpiler.js',
     'node_modules',
     'dist',
     'dist-test',
-    'src-generated',
+    'src/generated',
     '.stryker-tmp',
     'reports',
     'testResources',

nx.json

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