feat: Add benchmark workflows and actions for performance testing

- Implemented a new GitHub Action for benchmark execution, including steps for dependency installation, test execution, and result reporting.
- Created benchmark monitoring workflow triggered on pushes to the develop branch, storing results and alerting on performance regressions.
- Added a PR check workflow to compare benchmark results against the baseline and post comments on pull requests.
- Introduced a new Angular sample project with custom elements and shadow DOM components, including various input types.
- Established a React performance test scenario rendering multiple KoliBri components to evaluate performance.
- Configured Tailwind CSS and PostCSS for styling in the Angular sample project.
- Added comprehensive benchmark tests with Playwright, including result comparison and reporting.
- Included necessary configuration files for Knip, Prettier, and Playwright in the benchmark tests package.

Refs: #7656

Author: deleonio

.github/actions/benchmark/action.yml

@@ -0,0 +1,30 @@
+name: Benchmark Execution
+runs:
+  using: 'composite'
+  steps:
+    - name: Install dependencies
+      uses: ./.github/actions/pnpm-setup
+
+    - name: Install playwright dependencies and browsers
+      run: pnpm exec playwright install --with-deps chromium
+      shell: bash
+      working-directory: packages/tools/benchmark-tests
+
+    - name: Build required packages
+      run: pnpm build:deps
+      shell: bash
+      working-directory: packages/tools/benchmark-tests
+
+    - name: Run benchmark tests
+      run: pnpm test-benchmark
+      shell: bash
+      working-directory: packages/tools/benchmark-tests
+
+    - name: Outline benchmark result
+      run: cat benchmark-result.json
+      shell: bash
+      working-directory: packages/tools/benchmark-tests
+
+    - name: Remove husky
+      run: rm -rf .husky
+      shell: bash

.github/workflows/benchmark.monitoring.yml

@@ -0,0 +1,35 @@
+name: Benchmark-Monitoring
+
+on:
+  push:
+    branches:
+      - develop
+  workflow_dispatch:
+
+concurrency:
+  group: 'workflow-${{ github.workflow }}-${{ github.ref }}'
+  cancel-in-progress: true
+
+jobs:
+  benchmark:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Install and execute benchmark
+        uses: ./.github/actions/benchmark
+
+      - name: Store benchmark result
+        uses: rhysd/github-action-benchmark@v1
+        with:
+          alert-threshold: 10%
+          auto-push: true
+          fail-threshold: 25%
+          gh-pages-branch: benchmarks
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          output-file-path: packages/tools/benchmark-tests/benchmark-result.json
+          tool: customSmallerIsBetter

.github/workflows/benchmark.pr-check.yml

@@ -0,0 +1,46 @@
+name: Benchmark-PR-Check
+
+on:
+  pull_request:
+
+concurrency:
+  group: 'workflow-${{ github.workflow }}-${{ github.ref }}'
+  cancel-in-progress: true
+
+jobs:
+  benchmark:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Install and execute benchmark
+        uses: ./.github/actions/benchmark
+
+      - name: Load benchmark from target branch
+        run: |
+          git fetch origin ${{ github.base_ref }}
+          git show origin/${{ github.base_ref }}:packages/tools/benchmark-tests/benchmark-result.json > packages/tools/benchmark-tests/benchmark-baseline.json || echo "[]" > packages/tools/benchmark-tests/benchmark-baseline.json
+
+      - name: Compare benchmark with baseline
+        run: node scripts/compare-benchmark.mjs
+        working-directory: packages/tools/benchmark-tests
+
+      - name: Find comment
+        uses: peter-evans/find-comment@v3
+        id: fc
+        with:
+          body-includes: Hydration Benchmark Report
+          issue-number: ${{ github.event.pull_request.number }}
+
+      - name: Post PR Comment
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          body-path: packages/tools/benchmark-tests/benchmark-report.md
+          edit-mode: replace
+          issue-number: ${{ github.event.pull_request.number }}
+          reactions: false
+          token: ${{ secrets.GITHUB_TOKEN }}

packages/components/package.json

@@ -66,16 +66,16 @@
 		"lint:tsc": "tsc --noemit",
 		"dev": "cross-env NODE_ENV=development stencil build --prod --watch",
 		"test": "pnpm test:unit",
+		"test:e2e": "playwright test",
 		"test:unit": "cross-env NODE_ENV=test stencil test --spec --json --outputFile dist/jest-test-results.json",
 		"test:watch": "cross-env NODE_ENV=test stencil test --spec --watchAll",
-		"test:e2e": "playwright test",
 		"postpack": "mv package.bak.json package.json",
 		"prepack": "npm run build && cp package.json package.bak.json && rimraf dist/collection dist/kolibri/assets/@leanup dist/types/assets/@leanup && node scripts/anonymous.js && node scripts/minify.js",
 		"xunused": "knip"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "1.6.13",
-		"adopted-style-sheets": "1.1.8",
+		"adopted-style-sheets": "1.1.9-rc.17",
 		"clsx": "2.1.1",
 		"color-convert": "2.0.1",
 		"color-rgba": "2.4.0",
@@ -134,7 +134,7 @@
 		"typescript": "5.8.2"
 	},
 	"peerDependencies": {
-		"adopted-style-sheets": "1.1.8"
+		"adopted-style-sheets": "1.1.9-rc.17"
 	},
 	"files": [
 		"assets",

packages/components/stencil.config.ts

@@ -48,7 +48,6 @@ const TAGS = [
 	'kol-skip-nav',
 	'kol-spin',
 	'kol-split-button',
-	'kol-table-settings-wc',
 	'kol-table-stateful',
 	'kol-table-stateless',
 	'kol-tabs',

packages/samples/angular/.gitignore

@@ -1,42 +1,2 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# Compiled output
-/dist
-/tmp
-/out-tsc
-/bazel-out
-
-# Node
-/node_modules
-npm-debug.log
-yarn-error.log
-
-# IDEs and editors
-.idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# Visual Studio Code
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# Miscellaneous
-/.angular/cache
-.sass-cache/
-/connect.lock
-/coverage
-/libpeerconnection.log
-testem.log
-/typings
-
-# System files
-.DS_Store
-Thumbs.db
+.angular
+/src/assets/

packages/samples/angular/.knip.json

@@ -0,0 +1,7 @@
+{
+	"$schema": "https://unpkg.com/knip@5/schema.json",
+	"entry": ["src/main.ts"],
+	"ignore": [],
+	"ignoreDependencies": ["@public-ui/angular-v17", "@public-ui/components", "@public-ui/themes", "@tailwindcss/postcss", "adopted-style-sheets"],
+	"project": ["src/**/*.{js,ts}"]
+}