perf(build): Don't invoke tsc during test and development (#1503)

* Since the repo migrated to Storybook and its Vite builder
invoking tsc during development preview is a waste of developer
time.
* The same goes for unit test runs. Now the test runner
uses the esbuild plugin to transform `.ts` files on the fly
during testing.
* Removed some obsolete npm scripts.

The typescript compiler is now invoked only when
running `build:publish`, i.e. before release.

Author: rkaraivanov

.github/CONTRIBUTING.md

@@ -27,7 +27,7 @@ v18.19.1
 git clone https://github.com/IgniteUI/igniteui-webcomponents.git
 cd igniteui-webcomponents
 npm ci
-npm run build
+npm start
 ```
 
 ## Making Changes

package-lock.json

@@ -18,18 +18,14 @@
   },
   "scripts": {
     "start": "npm run storybook",
-    "build": "npm run clean && npm run build:styles && npm run build:typescript && npm run cem && npm run build:meta",
     "build:publish": "npm run cem && node scripts/build.mjs",
-    "build:typescript": "tsc",
     "cem": "cem analyze --config cem.config.mjs",
     "cem:watch": "cem analyze --config cem.config.mjs --watch",
     "build:styles": "node scripts/build-styles.mjs",
-    "build:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\"",
     "build:meta": "node scripts/build-stories.mjs",
     "watch-meta": "node scripts/stories-watcher.js ",
     "watch-scss": "node scripts/styles-watcher.mjs",
-    "watch-ts": "tsc --watch --preserveWatchOutput",
-    "check": "madge --circular --warning --no-spinner dist/src/index.js",
+    "check": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
     "clean": "npm run clean:dist && npm run clean:styles && npm run clean:docs",
     "clean:dist": "rimraf ./dist",
     "clean:styles": "rimraf --glob \"src/**/*.css.ts\"",
@@ -41,10 +37,10 @@
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "format": "biome check --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "release": "node scripts/gen-changelog.mjs",
-    "test": "npm run build && wtr --coverage",
-    "test:watch": "npm run build && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\" \"wtr --watch\"",
-    "storybook": "npm run build && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000 --debug\"",
-    "storybook:build": "npm run build && storybook build -o ./storybook-static",
+    "test": "npm run build:styles && wtr --coverage",
+    "test:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"wtr --watch\"",
+    "storybook": "npm run build:styles && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000\"",
+    "storybook:build": "npm run build:styles && storybook build -o ./storybook-static",
     "build:typedoc:export": "node scripts/build-typedoc.js export",
     "build:typedoc:import": "node scripts/build-typedoc.js import",
     "build:typedoc:watch": "node scripts/build-typedoc.js watch",
@@ -71,6 +67,7 @@
     "@storybook/web-components": "^8.4.6",
     "@storybook/web-components-vite": "^8.4.6",
     "@types/mocha": "^10.0.10",
+    "@web/dev-server-esbuild": "^1.0.3",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-playwright": "^0.11.0",
     "autoprefixer": "^10.4.20",
@@ -90,7 +87,7 @@
     "node-watch": "^0.7.4",
     "playwright": "^1.49.0",
     "postcss": "^8.4.49",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "rimraf": "^5.0.10",
     "sass": "^1.78.0",
     "sass-embedded": "^1.78.0",
@@ -105,7 +102,7 @@
     "typedoc": "^0.26.11",
     "typedoc-plugin-localization": "^3.0.5",
     "typescript": "^5.6.3",
-    "vite": "^6.0.1"
+    "vite": "^6.0.2"
   },
   "browserslist": [
     "defaults"
@@ -117,5 +114,12 @@
       "git add"
     ]
   },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      }
+    }
+  },
   "customElements": "custom-elements.json"
 }

package.json

@@ -1,7 +1,9 @@
+import { fileURLToPath } from 'node:url';
 import { playwrightLauncher } from '@web/test-runner-playwright';
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  files: ['dist/**/*.spec.js'],
+  files: ['src/**/*.spec.ts'],
   browsers: [playwrightLauncher({ product: 'chromium', headless: true })],
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
@@ -16,6 +18,13 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     exclude: ['node_modules/**/*', '**/themes/**'],
   },
 
+  plugins: [
+    esbuildPlugin({
+      ts: true,
+      tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url)),
+    }),
+  ],
+
   // See documentation for all available options
   // https://modern-web.dev/docs/test-runner/cli-and-configuration/#configuration-file
 });