chore(web-components): implement proper type-checking command

apps/vr-tests-web-components/package.json

@@ -9,20 +9,18 @@
     "format": "prettier . -w --ignore-path ../../.prettierignore",
     "lint": "eslint src --ext .ts,.tsx",
     "start": "start-storybook",
-    "type-check": "echo 'TODO'",
+    "type-check": "tsc -p . --baseUrl . --noEmit",
     "vr:build": "yarn build",
     "vr:test": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
   },
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts-tasks": "*",
-    "html-react-parser": "4.0.0",
-    "typescript": "4.7.4"
-  },
+  "devDependencies": {},
   "dependencies": {
-    "@fluentui/react-button": "*",
-    "@fluentui/react-storybook-addon": "*",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "html-react-parser": "4.0.0",
+    "@fluentui/tokens": ">=1.0.0-alpha",
     "@fluentui/web-components": ">=3.0.0-alpha",
+    "@microsoft/fast-element": "2.0.0-beta.26",
     "tslib": "^2.1.0"
   }
 }

change/@fluentui-web-components-ea366fa4-e157-41e3-89e7-8e1153f496a6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: implement proper type-checking command  within web-component domain",
+  "packageName": "@fluentui/web-components",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/web-components/.storybook/main.cjs

@@ -89,7 +89,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'|'previewHe
 
     // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
     if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
-      config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+      config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin');
     }
 
     return config;

packages/web-components/.storybook/preview.mjs

@@ -4,8 +4,8 @@ import webcomponentsTheme from './theme.mjs';
 import '../src/index-rollup.js';
 import './docs-root.css';
 
-function changeTheme(e) {
-  switchTheme(e.target.value);
+function changeTheme(/** @type {Event} */ e) {
+  switchTheme(/** @type {Parameters<typeof switchTheme>[number]} */ (/** @type {HTMLInputElement}*/ (e.target).value));
 }
 
 document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false);

packages/web-components/.storybook/tsconfig.json

@@ -4,7 +4,7 @@
     "allowJs": true,
     "checkJs": true,
     "noEmit": true,
-    "types": ["node"]
+    "types": ["node", "web"]
   },
   "include": ["*", "../public", "../src/**/*.stories.*"]
 }

packages/web-components/package.json

@@ -176,7 +176,7 @@
     "./dist/esm/toggle-button/define.js"
   ],
   "scripts": {
-    "type-check": "echo 'TODO'",
+    "type-check": "node ./scripts/type-check",
     "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
     "compile": "node ./scripts/compile",
     "compile:benchmark": "rollup -c rollup.bench.js",

packages/web-components/scripts/type-check.js

@@ -0,0 +1,61 @@
+// @ts-check
+
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { promisify } from 'node:util';
+import { exec } from 'node:child_process';
+import { exit } from 'node:process';
+
+const asyncExec = promisify(exec);
+
+main().catch(err => {
+  console.error(err);
+  exit(1);
+});
+
+/**
+ * Copied from ${@link 'file://./../../../scripts/tasks/src/type-check.ts'}
+ */
+async function main() {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  const rootConfig = JSON.parse(fs.readFileSync(path.join(__dirname, '../tsconfig.json'), 'utf-8'));
+
+  const tsConfigsRefs = getTsConfigs(rootConfig, { spec: false, e2e: false });
+
+  const asyncQueue = [];
+
+  for (const ref of tsConfigsRefs) {
+    const program = `tsc -p ${ref} --pretty --baseUrl .`;
+    asyncQueue.push(asyncExec(program));
+  }
+
+  return Promise.all(asyncQueue).catch(err => {
+    console.error(err.stdout);
+    exit(1);
+  });
+}
+
+/**
+ * @param {{references?: Array<{ path: string }>;}} solutionConfig
+ * @param {{ spec: boolean, e2e: boolean }} exclude
+ */
+function getTsConfigs(solutionConfig, exclude) {
+  const refs = solutionConfig.references ?? [];
+  /** @type {string[]} */
+  const refsPaths = [];
+
+  for (const ref of refs) {
+    if (exclude.spec && ref.path.includes('spec')) {
+      continue;
+    }
+    if (exclude.e2e && ref.path.includes('cy')) {
+      continue;
+    }
+
+    refsPaths.push(ref.path);
+  }
+
+  return refsPaths;
+}

packages/web-components/src/text/text.stories.ts

@@ -15,7 +15,7 @@ type TextStoryMeta = Meta<TextStoryArgs>;
  * @param content - the content for the element
  * @returns ViewTemplate
  */
-const generateSemanticElementTemplate = (as: string, content) => {
+const generateSemanticElementTemplate = (as: string, content: string) => {
   switch (as) {
     case 'h1':
       return html`<h1>${content}</h1>`;