From 9c0a333584d53af5854f427c13b8a824bf05affd Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 20 May 2024 13:20:17 +0200 Subject: [PATCH 1/2] chore: implement proper type-checking command within web-component domain --- apps/vr-tests-web-components/package.json | 16 +++-- packages/web-components/.storybook/main.cjs | 2 +- .../web-components/.storybook/preview.mjs | 4 +- .../web-components/.storybook/tsconfig.json | 2 +- packages/web-components/package.json | 2 +- packages/web-components/scripts/type-check.js | 61 +++++++++++++++++++ .../web-components/src/text/text.stories.ts | 2 +- 7 files changed, 74 insertions(+), 15 deletions(-) create mode 100644 packages/web-components/scripts/type-check.js diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json index bc3202d6125101..f313be11c1c6af 100644 --- a/apps/vr-tests-web-components/package.json +++ b/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" } } diff --git a/packages/web-components/.storybook/main.cjs b/packages/web-components/.storybook/main.cjs index 64a2437390d081..cac41f6ca7932d 100644 --- a/packages/web-components/.storybook/main.cjs +++ b/packages/web-components/.storybook/main.cjs @@ -89,7 +89,7 @@ module.exports = /** @type {Omit constructor.name !== 'ProgressPlugin'); + config.plugins = config.plugins.filter(value => value && value.constructor.name !== 'ProgressPlugin'); } return config; diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.mjs index de53eeeb8dc963..83f03428f7096d 100644 --- a/packages/web-components/.storybook/preview.mjs +++ b/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[number]} */ (/** @type {HTMLInputElement}*/ (e.target).value)); } document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false); diff --git a/packages/web-components/.storybook/tsconfig.json b/packages/web-components/.storybook/tsconfig.json index 78905f4f659714..ea51024beda2f0 100644 --- a/packages/web-components/.storybook/tsconfig.json +++ b/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.*"] } diff --git a/packages/web-components/package.json b/packages/web-components/package.json index ccce2bc7b7a4e3..d331b9e8e5b55b 100644 --- a/packages/web-components/package.json +++ b/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", diff --git a/packages/web-components/scripts/type-check.js b/packages/web-components/scripts/type-check.js new file mode 100644 index 00000000000000..2a41506e7e06d5 --- /dev/null +++ b/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; +} diff --git a/packages/web-components/src/text/text.stories.ts b/packages/web-components/src/text/text.stories.ts index e7e06deef506c4..04e0291bbdf474 100644 --- a/packages/web-components/src/text/text.stories.ts +++ b/packages/web-components/src/text/text.stories.ts @@ -15,7 +15,7 @@ type TextStoryMeta = Meta; * @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`

${content}

`; From 05415083949481bb39d25efe5833f3afbeab1de8 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 20 May 2024 13:21:03 +0200 Subject: [PATCH 2/2] change file --- ...eb-components-ea366fa4-e157-41e3-89e7-8e1153f496a6.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-ea366fa4-e157-41e3-89e7-8e1153f496a6.json diff --git a/change/@fluentui-web-components-ea366fa4-e157-41e3-89e7-8e1153f496a6.json b/change/@fluentui-web-components-ea366fa4-e157-41e3-89e7-8e1153f496a6.json new file mode 100644 index 00000000000000..ea73c2cad4707b --- /dev/null +++ b/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" +}