microsoft · Hotell · Mar 8, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/change/@fluentui-eslint-plugin-ee7a918a-238e-45f3-8a6b-18eb7ca7e02b.json b/change/@fluentui-eslint-plugin-ee7a918a-238e-45f3-8a6b-18eb7ca7e02b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(eslint-plugin): add triple-slash-reference rule to  ban TS '///' within source code",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-drawer-ecbe0ab7-6a66-465a-ac31-daf11345c21c.json b/change/@fluentui-react-drawer-ecbe0ab7-6a66-465a-ac31-daf11345c21c.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "perf: speed up tsc by not running on cypress files during .d.ts generation and type-checking",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-field-b0fef346-1748-4494-95c1-40003abf4b2f.json b/change/@fluentui-react-field-b0fef346-1748-4494-95c1-40003abf4b2f.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: re-genearate api.md as result of perf improvements to generate-api task",
+  "packageName": "@fluentui/react-field",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-infobutton-9b9694b6-4898-4726-9013-1cc195c28984.json b/change/@fluentui-react-infobutton-9b9694b6-4898-4726-9013-1cc195c28984.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "perf: speed up tsc by not running on cypress files during .d.ts generation and type-checking",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-infolabel-bff74b1d-1607-4226-9d1d-c9dd3fd6998c.json b/change/@fluentui-react-infolabel-bff74b1d-1607-4226-9d1d-c9dd3fd6998c.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "perf: speed up tsc by not running on cypress files during .d.ts generation and type-checking",
+  "packageName": "@fluentui/react-infolabel",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-tree-2717028e-e8b4-4198-aa82-71af3425d855.json b/change/@fluentui-react-tree-2717028e-e8b4-4198-aa82-71af3425d855.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "perf: speed up tsc by not running on cypress files during .d.ts generation and type-checking",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
@@ -359,6 +359,7 @@
       "packages/*",
       "packages/fluentui/*",
       "packages/react-components/*",
+      "packages/react-components/*/*",
       "scripts/*",
       "tools/*",
       "typings"

@@ -6,7 +6,9 @@
       "files": ["template/**/*.{ts,tsx}"],
       "rules": {
         // the rule can't understand that the actual list of deps is in template.json
-        "import/no-extraneous-dependencies": "off"
+        "import/no-extraneous-dependencies": "off",
+        // valid in some template files - don't wanna spam consumer with inline eslint-disabled pragmas
+        "@typescript-eslint/triple-slash-reference": "off"
       }
     }
   ]

@@ -14,6 +14,8 @@ module.exports = {
      */
     ...getNamingConventionRule(),
     '@fluentui/max-len': 'off',
+    // @typescript-eslint rules
+    '@typescript-eslint/triple-slash-reference': ['error', { lib: 'always', path: 'never', types: 'never' }],
   },
   overrides: [
     {

@@ -1,4 +1,3 @@
-/// <reference types="cypress-real-events" />
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { mount } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
-import { DrawerProps } from '@fluentui/react-components';
+
+import type { DrawerProps } from '../Drawer';
 
 const mountFluent = (element: JSX.Element) => {
   mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);

@@ -11,12 +11,15 @@
   },
   "exclude": [
     "./src/testing/**",
+    "./src/e2e/**",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
@@ -21,7 +21,7 @@ export const Field: ForwardRefComponent<FieldProps>;
 export const fieldClassNames: SlotClassNames<FieldSlots>;
 
 // @public (undocumented)
-export const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
+export const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "required" | "size" | "orientation" | "validationState" | "generatedControlId"> & {
     labelFor?: string | undefined;
     labelId?: string | undefined;
     validationMessageId?: string | undefined;
@@ -81,7 +81,7 @@ export const renderField_unstable: (state: FieldState, contextValues: FieldConte
 export const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
 
 // @public (undocumented)
-export const useFieldContext_unstable: () => Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
+export const useFieldContext_unstable: () => Readonly<Pick<FieldState, "required" | "size" | "orientation" | "validationState" | "generatedControlId"> & {
     labelFor?: string | undefined;
     labelId?: string | undefined;
     validationMessageId?: string | undefined;

@@ -1,5 +1,4 @@
 /* eslint-disable deprecation/deprecation */
-/// <reference types="cypress-real-events" />
 
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';

@@ -16,7 +16,9 @@
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
@@ -1,5 +1,3 @@
-/// <reference types="cypress-real-events" />
-
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';

@@ -20,6 +20,9 @@
     },
     {
       "path": "./.storybook/tsconfig.json"
+    },
+    {
+      "path": "./tsconfig.cy.json"
     }
   ]
 }
@@ -16,7 +16,9 @@
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
@@ -1,6 +1,3 @@
-/// <reference types="cypress" />
-/// <reference types="cypress-real-events" />
-
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';

@@ -1,6 +1,3 @@
-/// <reference types="cypress" />
-/// <reference types="cypress-real-events" />
-
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';

@@ -1,6 +1,3 @@
-/// <reference types="cypress" />
-/// <reference types="cypress-real-events" />
-
 import * as React from 'react';
 import { mount as mountBase } from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';

@@ -20,6 +20,9 @@
     },
     {
       "path": "./.storybook/tsconfig.json"
+    },
+    {
+      "path": "./tsconfig.cy.json"
     }
   ]
 }
@@ -16,7 +16,9 @@
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
@@ -229,7 +229,7 @@ function getPackageStoriesGlob(options) {
   const packages = Object.keys(dependencies);
 
   const result = packages
-    .filter(pkgName => pkgName.startsWith('@fluentui/') && !excludeStoriesInsertionFromPackages.includes(pkgName))
+    .filter(pkgName => projects.has(pkgName) && !excludeStoriesInsertionFromPackages.includes(pkgName))
     .map(pkgName => {
       const storiesGlob = '**/@(index.stories.@(ts|tsx)|*.stories.mdx)';
       const pkgMetadata = getMetadata(pkgName, projects);
@@ -238,6 +238,12 @@ function getPackageStoriesGlob(options) {
         return `${rootOffset}${pkgMetadata.root}/stories/${storiesGlob}`;
       }
 
+      // if defined package has stories project use that
+      const pkgMetadataStories = projects.get(`${pkgName}-stories`);
+      if (pkgMetadataStories) {
+        return `${rootOffset}${pkgMetadataStories.root}/src/${storiesGlob}`;
+      }
+
       return `${rootOffset}${pkgMetadata.root}/src/${storiesGlob}`;
     });
 

@@ -10,12 +10,13 @@ export function generateApi() {
 }
 
 function generateTypeDeclarations() {
-  const { isUsingPathAliasesForDx, tsConfigFileForCompilation } = getTsPathAliasesConfigUsedOnlyForDx();
+  const { tsConfigFileForCompilation } = getTsPathAliasesConfigUsedOnlyForDx();
   const cmd = [
     'tsc',
     `-p ./${tsConfigFileForCompilation}`,
     '--emitDeclarationOnly',
-    isUsingPathAliasesForDx ? '--baseUrl .' : null,
+    // turn off path aliases.
+    '--baseUrl .',
   ]
     .filter(Boolean)
     .join(' ');

@@ -26,7 +26,7 @@ function prepareTsTaskConfig(options: TscTaskOptions) {
 
   const { isUsingPathAliasesForDx, tsConfigFileForCompilation } = getTsPathAliasesConfigUsedOnlyForDx();
 
-  if (isUsingPathAliasesForDx) {
+  if (isUsingPathAliasesForDx()) {
     logger.info(`📣 TSC: Project is using TS path aliases for DX. Disabling aliases for build.`);
     options.baseUrl = '.';
     options.rootDir = './src';

@@ -65,24 +65,27 @@ export function getTsPathAliasesConfig() {
 
 export function getTsPathAliasesConfigUsedOnlyForDx() {
   const tsConfigFilesWithAliases = ['tsconfig.app.json', 'tsconfig.lib.json', 'tsconfig.json'];
-  const tsConfigBaseFilesForDx = ['tsconfig.base.v8.json', 'tsconfig.base.all.json'];
   const cwd = process.cwd();
   const tsConfigPath = path.join(cwd, `./tsconfig.json`);
 
   if (!fs.existsSync(tsConfigPath)) {
     throw new Error(`${tsConfigPath} doesn't exist`);
   }
 
-  const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf-8')));
-  const isUsingPathAliasesForDx =
-    tsConfig.extends && tsConfigBaseFilesForDx.some(relativeFilePath => tsConfig.extends.endsWith(relativeFilePath));
-
   const tsConfigFileForCompilation = tsConfigFilesWithAliases.find(fileName => fs.existsSync(path.join(cwd, fileName)));
 
   if (!tsConfigFileForCompilation) {
     throw new Error(`no tsconfig from one of [${tsConfigFilesWithAliases}] found!`);
   }
 
+  const isUsingPathAliasesForDx = () => {
+    const tsConfigBaseFilesForDx = ['tsconfig.base.v8.json', 'tsconfig.base.all.json'];
+    const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf-8')));
+    return Boolean(
+      tsConfig.extends && tsConfigBaseFilesForDx.some(relativeFilePath => tsConfig.extends.endsWith(relativeFilePath)),
+    );
+  };
+
   return { isUsingPathAliasesForDx, tsConfigFileForCompilation };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,9 @@ @@
         },
         {
           "path": "./.storybook/tsconfig.json"
+        },
+        {
+          "path": "./tsconfig.cy.json"
         }
       ]
     }