chore: switch fast-html test fixtures from webpack to vite

Author: radium-v

package-lock.json

@@ -62,11 +62,12 @@
     "@babel/preset-env": "^7.12.13",
     "@octokit/rest": "^22.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^15.0.1",
+    "@types/node": "^22.12.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "beachball": "^2.51.0",
     "chalk": "^2.4.2",
+    "concurrently": "^9.2.1",
     "copyfiles": "^2.4.1",
     "dotenv": "^6.0.0",
     "eslint": "^8.0.0",
@@ -80,6 +81,7 @@
     "rimraf": "^5.0.0",
     "ts-node": "^8.8.2",
     "typescript": "~4.7.0",
+    "vite": "^7.1.10",
     "yargs": "^16.2.0"
   },
   "overrides": {

package.json

@@ -0,0 +1,8 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint tests
+*.spec.*

packages/web-components/fast-html/.eslintignore

@@ -21,35 +21,25 @@
     "./rules/*.yml"
   ],
   "scripts": {
-    "clean": "tsc -b --clean src",
-    "clean:dist": "node ../../../build/clean.js dist",
-    "build": "tsc -b src && npm run doc",
-    "build:attribute": "webpack --config ./src/fixtures/attribute/webpack.config.js",
-    "build:event": "webpack --config ./src/fixtures/event/webpack.config.js",
-    "build:binding": "webpack --config ./src/fixtures/binding/webpack.config.js",
-    "build:children": "webpack --config ./src/fixtures/children/webpack.config.js",
-    "build:dot-syntax": "webpack --config ./src/fixtures/dot-syntax/webpack.config.js",
-    "build:when": "webpack --config ./src/fixtures/when/webpack.config.js",
-    "build:ref": "webpack --config ./src/fixtures/ref/webpack.config.js",
-    "build:repeat": "webpack --config ./src/fixtures/repeat/webpack.config.js",
-    "build:observer-map": "webpack --config ./src/fixtures/observer-map/webpack.config.js",
-    "build:slotted": "webpack --config ./src/fixtures/slotted/webpack.config.js",
-    "build:lifecycle-callbacks": "webpack --config ./src/fixtures/lifecycle-callbacks/webpack.config.js",
-    "build-app": "npm run build:attribute && npm run build:dot-syntax && npm run build:event && npm run build:children && npm run build:binding && npm run build:when && npm run build:ref && npm run build:repeat && npm run build:observer-map && npm run build:slotted && npm run build:lifecycle-callbacks",
-    "build-server": "tsc -b server",
-    "doc": "api-extractor run --local",
+    "build:tsc": "tsc -p ./tsconfig.json",
+    "build": "npm run build:tsc && npm run doc",
+    "clean": "rimraf dist temp test-results",
+    "dev:full": "concurrently -k -n fast-element,fast-html,server \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npm:test-server\"",
+    "dev": "concurrently -k -n tsc,server \"npm run watch\" \"npm run test-server\"",
     "doc:ci": "api-extractor run",
+    "doc": "npm run doc:ci -- --local",
+    "eslint:fix": "npm run eslint -- --fix",
     "eslint": "eslint . --ext .ts",
-    "eslint:fix": "eslint . --ext .ts --fix",
+    "install-playwright-browsers": "npm run playwright install",
     "prepublishOnly": "npm run clean && npm run build",
-    "pretest": "npm run build && npm run build-server",
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,html}\" --list-different",
     "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,html}\"",
-    "test": "npm run build-app && playwright test && npm run test:rules",
-    "test-server": "node server/dist/server.js",
+    "test-server": "npx vite test/ --clearScreen false",
+    "test:playwright": "playwright test",
     "test:rules": "sg test --skip-snapshot-tests",
-    "install-playwright-browsers": "npm run playwright install",
-    "dev": "npm run build && npm run build-app && npm run build-server && npm run test-server"
+    "test": "npm run test:playwright && npm run test:rules",
+    "test:ui": "concurrently -k -n fast-element,fast-html,playwright \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npx playwright test --ui\"",
+    "watch": "npm run build:tsc -- -w --preserveWatchOutput"
   },
   "description": "A package for facilitating rendering FAST Web Components in a non-browser environment.",
   "exports": {
@@ -71,13 +61,8 @@
     "@microsoft/api-extractor": "^7.47.0",
     "@microsoft/fast-element": "^2.8.0",
     "@playwright/test": "^1.49.0",
-    "@types/express": "^4.17.21",
     "@types/node": "^17.0.17",
-    "express": "^4.19.2",
-    "typescript": "~5.3.0",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-merge": "^6.0.1"
+    "typescript": "~5.3.0"
   },
   "beachball": {
     "disallowedChangeTypes": [
@@ -86,4 +71,4 @@
       "patch"
     ]
   }
-}
+}

packages/web-components/fast-html/package.json

@@ -1,10 +1,12 @@
-export default {
-    testDir: "./src/fixtures",
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+    testDir: ".",
+    testMatch: "**/*.spec.ts",
     retries: 3,
     webServer: {
         command: "npm run test-server",
-        port: 8080,
-        timeout: 120 * 1000,
+        port: 5173,
         reuseExistingServer: true,
     },
-};
+});

packages/web-components/fast-html/playwright.config.ts

@@ -1,6 +1,6 @@
 import { Observable } from "@microsoft/fast-element/observable.js";
 import { assignObservables } from "./utilities.js";
-import { JSONSchema, Schema } from "./schema.js";
+import type { JSONSchema, Schema } from "./schema.js";
 
 /**
  * ObserverMap provides functionality for caching binding paths, extracting root properties,

packages/web-components/fast-html/server/README.md

@@ -1,4 +1,4 @@
-import { type ChildrenMap } from "./utilities.js";
+import type { ChildrenMap } from "./utilities.js";
 
 type FastContextMetaData = "$fast_context";
 type FastContextsMetaData = "$fast_parent_contexts";