chore(web-components): simplify compile script, tweak api-extractor config to stop spamming CI with warnings (#31422)

Author: Hotell

change/@fluentui-web-components-11d3d73a-6976-4867-a739-9687c62e1e20.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: simplify compile script, tweak api-extractor config to stop spamming CI with warnings",
+  "packageName": "@fluentui/web-components",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/web-components/api-extractor.json

@@ -1,23 +1,56 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 
-  "mainEntryPointFilePath": "dist/dts/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/dts/index.d.ts",
 
   "apiReport": {
     "enabled": true,
-    "reportFolder": "docs",
+    "reportFolder": "<projectFolder>/docs",
     "reportFileName": "api-report.md"
   },
 
   "docModel": {
     "enabled": true,
-    "apiJsonFilePath": "dist/fluent-web-components.api.json"
+    "apiJsonFilePath": "<projectFolder>/dist/fluent-web-components.api.json"
   },
-
   "dtsRollup": {
     "enabled": true
   },
   "compiler": {
+    "skipLibCheck": false,
     "tsconfigFilePath": "./tsconfig.api-extractor.json"
+  },
+  "messages": {
+    "tsdocMessageReporting": {
+      "tsdoc-undefined-tag": {
+        "logLevel": "none"
+      },
+      "tsdoc-unsupported-tag": {
+        "logLevel": "none"
+      },
+      "tsdoc-param-tag-with-invalid-type": {
+        "logLevel": "none"
+      },
+      "tsdoc-param-tag-missing-hyphen": {
+        "logLevel": "none"
+      }
+    },
+    "extractorMessageReporting": {
+      "ae-forgotten-export": {
+        "logLevel": "none"
+      },
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      },
+      "ae-unresolved-link": {
+        "logLevel": "none"
+      },
+      "ae-internal-missing-underscore": {
+        "logLevel": "none"
+      },
+      "ae-different-release-tags": {
+        "logLevel": "none"
+      }
+    }
   }
 }

packages/web-components/scripts/compile.js

@@ -1,72 +1,27 @@
 /* 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: generating design tokens`));
-    execSync(`node ./scripts/generate-tokens.cjs`, { stdio: 'inherit' });
+    execSync(`node ./scripts/generate-tokens`, { 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' });
+    execSync(`tsc -p tsconfig.lib.json --rootDir ./src --baseUrl .`, { 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/generate-tokens.cjs

@@ -0,0 +1,34 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import chalk from 'chalk';
+
+import tokensPackage from '@fluentui/tokens';
+
+main();
+
+function main() {
+  console.log(tokensPackage);
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+
+  const fluentTokens = Object.keys(tokensPackage.tokens);
+  const comment = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n';
+
+  const generatedTokens = fluentTokens.reduce((acc, t) => {
+    const token = `export const ${t} = 'var(--${t})';\n`;
+    return acc + token;
+  }, '');
+
+  const dir = path.join(__dirname, '../src', 'theme');
+
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  fs.writeFile(path.join(dir, 'design-tokens.ts'), comment + generatedTokens, err => {
+    if (err) throw err;
+    console.log(chalk.greenBright(`Design token file has been successfully created!`));
+  });
+}

packages/web-components/scripts/generate-tokens.js

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "paths": {}
+    "paths": null,
+    "baseUrl": "."
   }
 }