chore(web-components): introduce ts-solution configs and monorepo set…

…up/DX (#26843)

* chore(web-components): implement ts path aliases setup with valid ts compilation

* chore(web-components): refactor test setup and test/sb utils approach

* fix(web-components): tweak npmignore to not ship non relevant assets

* chore: re-generate api-report

* generate change file

* fixup! chore(web-components): refactor test setup and test/sb utils approach

change/@fluentui-web-components-516db34f-7e06-4348-a459-507ea3b7c881.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(web-components): introduce ts-solution configs and monorepo setup/DX",
+  "packageName": "@fluentui/web-components",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/web-components/.npmignore

@@ -1,7 +1,6 @@
 # Tests
-dist/dts/__test__/
-dist/esm/__test__/
 *.spec.*
+*.test.*
 coverage/
 
 # images
@@ -10,12 +9,16 @@ images/
 # Source files
 src/
 
+scripts/
+
 # config files
 .eslintignore
 .eslintrc.js
 .prettierignore
 .storybook
 tsconfig.json
+tsconfig.lib.json
+tsconfig.spec.json
 tsconfig.build.json
 rollup.config.json
 karma.conf.cjs
@@ -24,6 +27,7 @@ api-extractor.json
 
 # Storybook static site
 dist/storybook-static/
+public/
 
 # cache
 .rollupcache

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

@@ -1,8 +1,15 @@
+const path = require('path');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 
 const tsBin = require.resolve('typescript');
+const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');
 
-module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookConfig,'typescript'|'babel'>} */ ({
+const tsPaths = new TsconfigPathsPlugin({
+  configFile: tsConfigPath,
+});
+
+module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookConfig,'typescript'|'babel'|'previewHead'>} */ ({
   stories: ['../src/**/*.stories.@(ts|mdx)'],
   staticDirs: ['../public'],
   core: {
@@ -24,10 +31,19 @@ module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookCon
     },
   ],
   webpackFinal: async config => {
+    config.resolve = config.resolve ?? {};
+    config.resolve.extensions = config.resolve.extensions ?? [];
+    config.resolve.plugins = config.resolve.plugins ?? [];
+    config.module = config.module ?? {};
+    config.plugins = config.plugins ?? [];
+
     config.resolve.extensionAlias = {
       '.js': ['.ts', '.js'],
       '.mjs': ['.mts', '.mjs'],
     };
+    config.resolve.extensions.push(...['.ts', '.js']);
+    config.resolve.plugins.push(tsPaths);
+    config.module.rules = config.module.rules ?? [];
     config.module.rules.push(
       {
         test: /\.([cm]?ts|tsx)$/,
@@ -46,7 +62,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main').StorybookCon
         resolve: { fullySpecified: false },
       },
     );
-    config.resolve.extensions.push(...['.ts', '.js']);
+
     config.plugins.push(
       new CircularDependencyPlugin({
         exclude: /node_modules/,

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

@@ -1,14 +1,14 @@
-import * as Fluent from '../src/index-rollup.ts';
+import * as Fluent from '../src/index-rollup.js';
 import webcomponentsTheme from './theme.mjs';
-import { switchTheme } from '../public/theme-switch.ts';
+import { switchTheme } from '../public/theme-switch.js';
 
 Fluent;
 
 function changeTheme(e) {
   switchTheme(e.target.value);
 }
 
-document.getElementById('theme-switch').addEventListener('change', changeTheme, false);
+document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false);
 switchTheme('web-light');
 
 export const parameters = {

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

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["*", "../public", "../src/**/*.stories.*"]
+}

packages/web-components/api-extractor.json

@@ -16,5 +16,13 @@
 
   "dtsRollup": {
     "enabled": true
+  },
+  "compiler": {
+    "tsconfigFilePath": "./tsconfig.lib.json",
+    "overrideTsconfig": {
+      "compilerOptions": {
+        "paths": {}
+      }
+    }
   }
 }

packages/web-components/docs/api-report.md

@@ -1204,14 +1204,15 @@ export const lineHeightHero800: CSSDesignToken<string>;
 export const lineHeightHero900: CSSDesignToken<string>;
 
 // @public
-export class ProgressBar extends FASTProgress {
+class ProgressBar_2 extends FASTProgress {
     shape: ProgressBarShape;
     thickness: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
+export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
 
 // @public
 export const ProgressBarShape: {
@@ -1226,7 +1227,7 @@ export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 export const ProgressBarStyles: ElementStyles;
 
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
 
 // @public
 export const ProgressBarThickness: {

packages/web-components/karma.conf.cjs

@@ -29,6 +29,7 @@ module.exports = function (config) {
   }
 
   const setup = 'setup-browser' + (config.package ? '-' + config.package : '');
+
   const options = {
     basePath,
     browserDisconnectTimeout: 10000,
@@ -44,9 +45,9 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-firefox-launcher'),
     ],
-    files: [`dist/esm/__test__/${setup}.js`],
+    files: [`scripts/${setup}.cjs`],
     preprocessors: {
-      [`dist/esm/__test__/${setup}.cjs`]: ['webpack', 'sourcemap'],
+      [`scripts/${setup}.cjs`]: ['webpack', 'sourcemap'],
     },
     webpackMiddleware: {
       // webpack-dev-middleware configuration

packages/web-components/package.json

@@ -48,10 +48,11 @@
   "scripts": {
     "tsc": "tsc",
     "api-extractor": "api-extractor",
-    "clean": "node ./build/clean.cjs dist",
+    "compile": "node ./scripts/compile",
+    "clean": "node ./scripts/clean dist",
     "doc": "api-extractor run --local",
     "doc:ci": "yarn doc",
-    "build": "tsc -p ./tsconfig.json && rollup -c && yarn doc",
+    "build": "yarn compile && rollup -c && yarn doc",
     "dev": "tsc -p ./tsconfig.json -w",
     "tdd": "yarn dev & yarn test-chrome:watch",
     "prepare": "yarn clean && yarn build",
@@ -60,7 +61,7 @@
     "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
     "format:check": "yarn format -c",
     "code-style": "yarn format:check && yarn lint",
-    "start": "yarn start-storybook -p 6006 --docs",
+    "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
     "start-storybook": "node node_modules/@storybook/html/bin/index",
     "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
     "test": "yarn doc:ci && yarn test-chrome:verbose",

packages/web-components/public/theme-switch.ts

@@ -1,5 +1,5 @@
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
-import { setTheme } from '../src/theme';
+import { setTheme } from '@fluentui/web-components';
 
 const themes = {
   'web-light': webLightTheme,

packages/web-components/rollup.config.js

@@ -4,7 +4,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';
 import typescript from 'rollup-plugin-typescript2';
-import { transformCSSFragment, transformHTMLFragment } from './build/transform-fragments';
+import { transformCSSFragment, transformHTMLFragment } from './scripts/transform-fragments';
 
 // eslint-disable-next-line no-undef
 const tsBin = require.resolve('typescript');
@@ -33,6 +33,7 @@ export default [
       typescript({
         // eslint-disable-next-line no-undef
         typescript: require(tsBin),
+        tsconfig: './tsconfig.lib.json',
         tsconfigOverride: {
           compilerOptions: {
             declaration: false,

packages/web-components/build/clean.cjs → packages/web-components/scripts/clean.js

@@ -1,10 +1,13 @@
+/* eslint-disable no-undef */
 /**
  * Utility for cleaning directories.
  * Usage: node build/clean.js %path%
  */
-const path = require('path');
-const rimraf = require('rimraf');
-const argv = require('yargs').argv;
+import * as path from 'path';
+import rimraf from 'rimraf';
+import yargs from 'yargs';
+
+const argv = yargs.argv;
 
 /**
  * All paths passed to the clean script

packages/web-components/scripts/compile.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-undef */
+import * as path from 'path';
+import * as fs from 'fs';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import chalk from 'chalk';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const root = path.join(__dirname, '..');
+
+main();
+
+function compile() {
+  const packageJsonPath = path.join(root, 'package.json');
+  const tsConfigLibPath = path.join(root, 'tsconfig.lib.json');
+  const tsConfigSpecPath = path.join(root, 'tsconfig.spec.json');
+
+  const tsConfigLib = JSON.parse(fs.readFileSync(tsConfigLibPath, 'utf-8'));
+  const tsConfigSpec = JSON.parse(fs.readFileSync(tsConfigSpecPath, 'utf-8'));
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+
+  const modifiedTsConfigLib = overrideTsConfig({ ...tsConfigLib });
+  const modifiedTsConfigSpec = overrideTsConfig({ ...tsConfigSpec });
+
+  const tempTsconfigLibPath = path.join(root, 'tsconfig.lib-generated.json');
+  const tempTsconfigSpecPath = path.join(root, 'tsconfig.spec-generated.json');
+
+  fs.writeFileSync(tempTsconfigLibPath, JSON.stringify(modifiedTsConfigLib, null, 2), 'utf-8');
+  fs.writeFileSync(tempTsconfigSpecPath, JSON.stringify(modifiedTsConfigSpec, null, 2), 'utf-8');
+
+  const workspaceDependencies = Object.keys(packageJson.dependencies).filter(depName =>
+    depName.startsWith('@fluentui/'),
+  );
+
+  try {
+    console.log(chalk.bold(`🎬 compile:start`));
+
+    console.log(chalk.blueBright(`compile: building workspace dependencies: ${workspaceDependencies}`));
+    execSync(`lage build --to ${workspaceDependencies}`, { stdio: 'inherit' });
+
+    console.log(chalk.blueBright(`compile: running tsc`));
+    execSync(`tsc -p tsconfig.lib-generated.json`, { stdio: 'inherit' });
+    execSync(`tsc -p tsconfig.spec-generated.json`, { stdio: 'inherit' });
+
+    console.log(chalk.bold(`🏁 compile:end`));
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  } finally {
+    fs.unlinkSync(tempTsconfigLibPath);
+    fs.unlinkSync(tempTsconfigSpecPath);
+  }
+}
+
+/**
+ *
+ * @param {Record<string,any>} config
+ */
+function overrideTsConfig(config) {
+  config.compilerOptions.paths = {};
+  config.compilerOptions.rootDir = './src';
+  return config;
+}
+
+function main() {
+  compile();
+}

packages/web-components/scripts/setup-browser.cjs

@@ -0,0 +1,11 @@
+/* eslint-disable no-undef */
+/**
+ *
+ * @param r {__WebpackModuleApi.RequireContext}
+ */
+function importAll(r) {
+  r.keys().forEach(r);
+}
+
+// Explicitly add to browser test
+importAll(require.context('../dist/esm', true, /\.spec\.js$/));

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

@@ -1,6 +1,6 @@
 import { html, when } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../__test__/helpers.js';
+import { renderComponent } from '../helpers.js';
 import type { Badge as FluentBadge } from './badge.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 import './define.js';

packages/web-components/src/counter-badge/counter-badge.stories.ts

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../__test__/helpers.js';
+import { renderComponent } from '../helpers.js';
 import type { CounterBadge as FluentCounterBadge } from './counter-badge.js';
 import {
   CounterBadgeAppearance,

packages/web-components/src/progress-bar/progress-bar.stories.ts

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../__test__/helpers.js';
+import { renderComponent } from '../helpers.js';
 import type { ProgressBar as FluentProgressBar } from './progress-bar.js';
 import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 import './define.js';

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

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../__test__/helpers.js';
+import { renderComponent } from '../helpers.js';
 import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 import './define.js';
 

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

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../__test__/helpers.js';
+import { renderComponent } from '../helpers.js';
 import type { Text as FluentText } from './text.js';
 import './define.js';
 import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';