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": "[email protected]",
+  "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,