chore: setup typescript 4.7 for web-components package (#26299)

* chore: setup typescript 4.7 for web-components package

* chore: generate change-file

* fixup! chore: setup typescript 4.7 for web-components package

* fixup! fixup! chore: setup typescript 4.7 for web-components package

change/@fluentui-web-components-974b7e3c-cb82-4399-8daf-f58a9a1b23ed.json

@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore: setup typescript 4.7 for web-components package",
+ "packageName": "@fluentui/web-components",
+ "email": "martinhochel@microsoft.com",
+ "dependentChangeType": "none"
+}

package.json

@@ -219,8 +219,8 @@
  "express": "4.17.1",
  "extract-comments": "1.1.0",
  "file-loader": "6.2.0",
- "fork-ts-checker-webpack-plugin": "6.1.0",
  "find-free-port": "2.0.0",
+ "fork-ts-checker-webpack-plugin": "6.1.0",
  "fs-extra": "8.1.0",
  "geckodriver": "3.0.2",
  "glob": "7.2.0",
@@ -297,7 +297,7 @@
  "through2": "4.0.2",
  "tmp": "0.2.1",
  "ts-jest": "26.5.6",
- "ts-loader": "9.3.1",
+ "ts-loader": "9.4.2",
  "ts-node": "10.9.1",
  "tsconfig-paths": "4.1.0",
  "tsconfig-paths-webpack-plugin": "4.0.0",
@@ -330,7 +330,9 @@
  "typings"
  ],
  "nohoist": [
- "@fluentui/web-components/@storybook/html"
+ "@fluentui/web-components/@storybook/html",
+ "@fluentui/web-components/@microsoft/api-extractor",
+ "@fluentui/web-components/@microsoft/api-extractor/**"
  ]
  },
  "resolutions": {

packages/web-components/.eslintrc.json

@@ -0,0 +1,62 @@
+{
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "import"],
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier"
+ ],
+ "settings": {
+ "react": {
+ "version": "latest"
+ }
+ },
+ "rules": {
+ "no-extra-boolean-cast": "off",
+ "no-prototype-builtins": "off",
+ "no-fallthrough": "off",
+ "no-unexpected-multiline": "off",
+ "import/order": "error",
+ "sort-imports": [
+ "error",
+ {
+ "ignoreCase": true,
+ "ignoreDeclarationSort": true
+ }
+ ],
+ "comma-dangle": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/camelcase": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "warn",
+ {
+ "args": "none"
+ }
+ ],
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/naming-convention": [
+ "error",
+ {
+ "selector": "default",
+ "format": ["UPPER_CASE", "camelCase", "PascalCase"],
+ "leadingUnderscore": "allow"
+ },
+ {
+ "selector": "property",
+ "format": null // disable for property names because of our foo__expanded convention for JSS
+ // TODO: I think we can come up with a regex that ignores variables with __ in them
+ },
+ {
+ "selector": "variable",
+ "format": null // disable for variable names because of our foo__expanded convention for JSS
+ // TODO: I think we can come up with a regex that ignores variables with __ in them
+ }
+ ]
+ }
+}

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

@@ -1,5 +1,7 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
+const tsBin = require.resolve('typescript');
+
 module.exports = {
  stories: ['../src/**/*.stories.@(ts|mdx)'],
  staticDirs: ['../public'],
@@ -21,16 +23,29 @@ module.exports = {
  },
  ],
  webpackFinal: async config => {
- config.module.rules.push({
- test: /\.ts$/,
- use: [
- {
- loader: 'ts-loader',
+ config.resolve.extensionAlias = {
+ '.js': ['.ts', '.js'],
+ '.mjs': ['.mts', '.mjs'],
+ };
+ config.module.rules.push(
+ {
+ test: /\.([cm]?ts|tsx)$/,
+ loader: 'ts-loader',
+ sideEffects: true,
+ options: {
+ transpileOnly: true,
+ compiler: tsBin,
  },
- ],
- });
- config.resolve.extensions.push('.ts');
- config.resolve.extensions.push('.js');
+ },
+ // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
+ // It also enables importing other packages without proper ESM extensions, but that should be avoided !
+ // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
+ {
+ test: /\.storybook\/.+\.m?js/,
+ resolve: { fullySpecified: false },
+ },
+ );
+ config.resolve.extensions.push(...['.ts', '.js']);
  config.plugins.push(
  new CircularDependencyPlugin({
  exclude: /node_modules/,

packages/web-components/.storybook/manager.js

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/addons';
-import webcomponentsTheme from './theme';
+import webcomponentsTheme from './theme.mjs';
 
 addons.setConfig({
  previewTabs: {

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

@@ -1,6 +1,6 @@
-import * as Fluent from '../src/index-rollup';
-import webcomponentsTheme from './theme';
-import { switchTheme } from '../public/theme-switch';
+import * as Fluent from '../src/index-rollup.ts';
+import webcomponentsTheme from './theme.mjs';
+import { switchTheme } from '../public/theme-switch.ts';
 
 Fluent;
 

packages/web-components/karma.conf.js → packages/web-components/karma.conf.cjs

@@ -46,7 +46,7 @@ module.exports = function (config) {
  ],
  files: [`dist/esm/__test__/${setup}.js`],
  preprocessors: {
- [`dist/esm/__test__/${setup}.js`]: ['webpack', 'sourcemap'],
+ [`dist/esm/__test__/${setup}.cjs`]: ['webpack', 'sourcemap'],
  },
  webpackMiddleware: {
  // webpack-dev-middleware configuration

packages/web-components/package.json

@@ -15,13 +15,16 @@
  "bugs": {
  "url": "https://github.com/Microsoft/fluentui/issues/new/choose"
  },
+ "type": "module",
  "main": "dist/esm/index.js",
  "types": "dist/web-components.d.ts",
  "unpkg": "dist/web-components.min.js",
  "scripts": {
+ "tsc": "tsc",
+ "api-extractor": "api-extractor",
  "clean": "node ./build/clean.js dist",
  "doc": "api-extractor run --local",
- "doc:ci": "api-extractor run --local",
+ "doc:ci": "yarn doc",
  "build": "tsc -p ./tsconfig.json && rollup -c && yarn doc",
  "dev": "tsc -p ./tsconfig.json -w",
  "tdd": "yarn dev & yarn test-chrome:watch",
@@ -37,14 +40,14 @@
  "test": "yarn doc:ci && yarn test-chrome:verbose",
  "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
  "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
- "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage",
- "test-chrome:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
- "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
- "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging",
- "test-chrome:verbose:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha ",
- "test-chrome:verbose:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --reporter=mocha",
- "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage",
- "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+ "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
+ "test-chrome:verbose": "karma start karma.conf.cjs --no-fail-on-empty-test-suite --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
+ "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
+ "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
+ "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha ",
+ "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
+ "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
+ "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
  },
  "devDependencies": {
  "@storybook/html": "6.5.5",
@@ -69,7 +72,9 @@
  "karma-source-map-support": "1.4.0",
  "karma-sourcemap-loader": "0.3.8",
  "karma-webpack": "5.0.0",
- "mocha": "7.2.0"
+ "mocha": "7.2.0",
+ "@microsoft/api-extractor": "7.31.2",
+ "typescript": "4.7.4"
  },
  "dependencies": {
  "@microsoft/fast-element": "^2.0.0-beta.17",

packages/web-components/rollup.config.js

@@ -6,6 +6,9 @@ import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';
 import typescript from 'rollup-plugin-typescript2';
 import { transformCSSFragment, transformHTMLFragment } from './build/transform-fragments';
 
+// eslint-disable-next-line no-undef
+const tsBin = require.resolve('typescript');
+
 const parserOptions = {
  sourceType: 'module',
 };
@@ -28,6 +31,8 @@ export default [
  resolve(),
  commonJS(),
  typescript({
+ // eslint-disable-next-line no-undef
+ typescript: require(tsBin),
  tsconfigOverride: {
  compilerOptions: {
  declaration: false,