diff --git a/apps/public-docsite-v9/.storybook/fix-title.js b/apps/public-docsite-v9/.storybook/fix-title.js index 2bd55cf8cb82b1..3f72f01ea672c5 100644 --- a/apps/public-docsite-v9/.storybook/fix-title.js +++ b/apps/public-docsite-v9/.storybook/fix-title.js @@ -1,6 +1,11 @@ const fs = require('fs'); const path = require('path'); +/** + * + * @param {string} filePath + * @param {string} title + */ function fixTitle(filePath, title) { const htmlDocumentPath = path.resolve(__dirname, filePath); const htmlDocument = fs.readFileSync(htmlDocumentPath, 'utf-8'); diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index 01f295d0ccc576..a57e9a915e54d5 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -1,16 +1,9 @@ -// @ts-check - -const { - getPackageStoriesGlob, - createPathAliasesConfig, - registerTsPaths, - rules, - registerRules, -} = require('@fluentui/scripts-storybook'); +const path = require('path'); +const { getPackageStoriesGlob, registerTsPaths, rules, registerRules } = require('@fluentui/scripts-storybook'); const rootMain = require('../../../.storybook/main'); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index ebe4c1cf402845..1963954c0e0d4f 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -1,6 +1,8 @@ +import * as rootPreview from '../../../.storybook/preview'; + import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories'; import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories'; -import * as rootPreview from '../../../.storybook/preview'; + import './docs-root-v9.css'; /** @type {NonNullable} */ diff --git a/apps/public-docsite-v9/.storybook/theme.js b/apps/public-docsite-v9/.storybook/theme.js index bd13f4a67625fa..269f6d7244393a 100644 --- a/apps/public-docsite-v9/.storybook/theme.js +++ b/apps/public-docsite-v9/.storybook/theme.js @@ -1,4 +1,5 @@ import { create } from '@storybook/theming'; + import logo from '../public/fluentui-logo.svg'; /** diff --git a/apps/public-docsite-v9/.storybook/tsconfig.json b/apps/public-docsite-v9/.storybook/tsconfig.json new file mode 100644 index 00000000000000..663aae308c427c --- /dev/null +++ b/apps/public-docsite-v9/.storybook/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "types": ["node", "static-assets", "storybook__addons"] + }, + "include": ["*.js"] +} diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index 8dd9d63b38b5f5..7b9107d07cf465 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -12,6 +12,7 @@ "code-style": "just-scripts code-style", "just": "just-scripts", "lint": "just-scripts lint", + "type-check": "just-scripts type-check", "start": "yarn storybook:docs", "storybook": "start-storybook --port 3000 --no-manager-cache", "storybook:docs": "yarn storybook --docs" diff --git a/apps/public-docsite-v9/tsconfig.app.json b/apps/public-docsite-v9/tsconfig.app.json new file mode 100644 index 00000000000000..ef06ccd867c65b --- /dev/null +++ b/apps/public-docsite-v9/tsconfig.app.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "ESNext", + "target": "ES2019", + "noEmit": false, + "outDir": "lib", + "jsx": "react", + "sourceMap": true, + "types": ["webpack-env"] + }, + "include": ["src"] +} diff --git a/apps/public-docsite-v9/tsconfig.json b/apps/public-docsite-v9/tsconfig.json index cc35ba4818249e..215391a01f5626 100644 --- a/apps/public-docsite-v9/tsconfig.json +++ b/apps/public-docsite-v9/tsconfig.json @@ -1,21 +1,23 @@ { + "extends": "../../tsconfig.base.all.json", "compilerOptions": { - "target": "es5", - "outDir": "lib", - "module": "commonjs", - "jsx": "react", - "declaration": true, - "sourceMap": true, + "module": "ESNext", + "target": "ES2019", "noEmit": true, "experimentalDecorators": true, "noUnusedLocals": true, - "forceConsistentCasingInFileNames": true, "strictNullChecks": true, "noImplicitAny": true, - "moduleResolution": "node", - "preserveConstEnums": true, - "skipLibCheck": true, - "types": ["webpack-env", "@storybook/react"] + "types": ["webpack-env"] }, - "include": ["src"] + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./.storybook/tsconfig.json" + } + ] } diff --git a/apps/stress-test/webpack/webpack.config.ts b/apps/stress-test/webpack/webpack.config.ts index e2ff29043c58b9..b3a42e043ce9bc 100644 --- a/apps/stress-test/webpack/webpack.config.ts +++ b/apps/stress-test/webpack/webpack.config.ts @@ -2,7 +2,7 @@ import * as path from 'path'; import { fileURLToPath } from 'url'; import { CleanWebpackPlugin } from 'clean-webpack-plugin'; // eslint-disable-next-line import/no-extraneous-dependencies -import { registerTsPaths, createPathAliasesConfig, rules } from '@fluentui/scripts-storybook'; +import { registerTsPaths, rules } from '@fluentui/scripts-storybook'; import { configurePages } from './pageConfig.js'; import { configureGriffel } from './griffelConfig.js'; import * as WebpackDevServer from 'webpack-dev-server'; @@ -12,7 +12,7 @@ const enabledReactProfiling = true; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json'); type WebpackArgs = { mode: 'production' | 'development' | 'none'; diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 3a4a437264cd75..00e58ddc63b17e 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -31,7 +31,8 @@ jobs: - script: | yarn nx workspace-lint yarn nx run @fluentui/nx-workspace-tools:check-graph - displayName: NX workspace lint + yarn nx workspace-generator tsconfig-base-all --verify + displayName: Workspace lint - script: | # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts, thus it needs to be build in advance diff --git a/change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json b/change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json new file mode 100644 index 00000000000000..e559a82c4d869e --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-ca54b58c-216f-4a2c-bc44-b19249dd8d16.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: enable build-less DX for storybook", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-components/react-migration-v0-v9/.storybook/main.js b/packages/react-components/react-migration-v0-v9/.storybook/main.js index 15a002e45f8ce0..3679d73941ae18 100644 --- a/packages/react-components/react-migration-v0-v9/.storybook/main.js +++ b/packages/react-components/react-migration-v0-v9/.storybook/main.js @@ -1,7 +1,9 @@ -const { registerTsPaths, createPathAliasesConfig } = require('@fluentui/scripts-storybook'); +const path = require('path'); +const { registerTsPaths } = require('@fluentui/scripts-storybook'); + const rootMain = require('../../../../.storybook/main'); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../../tsconfig.base.all.json'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md index e5d6fe9b6ba211..0ba63bb5217d4b 100644 --- a/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md +++ b/packages/react-components/react-migration-v0-v9/etc/react-migration-v0-v9.api.md @@ -7,11 +7,11 @@ import { ComponentProps } from '@fluentui/react-components'; import { GriffelStyle } from '@fluentui/react-components'; import { ObjectOf } from '@fluentui/react-northstar'; -import { ObjectShorthandValue } from '@fluentui/react-northstar'; +import type { ObjectShorthandValue } from '@fluentui/react-northstar'; import * as React_2 from 'react'; import { Slot } from '@fluentui/react-components'; import { Slot as Slot_2 } from '@fluentui/react-utilities'; -import { SlotRenderFunction } from '@fluentui/react-components'; +import { SlotRenderFunction } from '@fluentui/react-utilities'; // @public (undocumented) export const Flex: React_2.ForwardRefExoticComponent & FlexProps & React_2.RefAttributes>; @@ -133,7 +133,7 @@ export type StyledTextSlots = { }; // @public (undocumented) -export const useFlexStyles: () => Record<"fill" | "wrap" | "inline" | "flex" | "column" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>; +export const useFlexStyles: () => Record<"flex" | "fill" | "column" | "wrap" | "inline" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>; // @public (undocumented) export const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>; diff --git a/packages/react-components/react-migration-v0-v9/package.json b/packages/react-components/react-migration-v0-v9/package.json index 518f647a8d05b8..9174861f4c6d19 100644 --- a/packages/react-components/react-migration-v0-v9/package.json +++ b/packages/react-components/react-migration-v0-v9/package.json @@ -19,7 +19,7 @@ "just": "just-scripts", "lint": "just-scripts lint", "test": "jest --passWithNoTests", - "type-check": "tsc -b tsconfig.json", + "type-check": "just-scripts type-check", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", "start": "yarn storybook" diff --git a/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx b/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx index 76ccfdf5318165..165e0537e2252e 100644 --- a/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx +++ b/packages/react-components/react-migration-v0-v9/src/components/FormField/FormFieldShim.tsx @@ -5,7 +5,8 @@ import { useFieldStyles_unstable, useField_unstable, } from '@fluentui/react-components'; -import { ObjectShorthandValue } from '@fluentui/react-northstar'; +import type { ObjectShorthandValue } from '@fluentui/react-northstar'; + import * as React from 'react'; type WithContent = ObjectShorthandValue> | string; diff --git a/packages/react-components/react-migration-v0-v9/tsconfig.json b/packages/react-components/react-migration-v0-v9/tsconfig.json index 1941a041d46c19..cb0beb41b1488d 100644 --- a/packages/react-components/react-migration-v0-v9/tsconfig.json +++ b/packages/react-components/react-migration-v0-v9/tsconfig.json @@ -1,6 +1,7 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../../../tsconfig.base.all.json", "compilerOptions": { + "strict": true, "target": "ES2019", "noEmit": true, "isolatedModules": true, diff --git a/packages/react-components/react-migration-v8-v9/.storybook/main.js b/packages/react-components/react-migration-v8-v9/.storybook/main.js index 41673434a97056..cbbdca67753d11 100644 --- a/packages/react-components/react-migration-v8-v9/.storybook/main.js +++ b/packages/react-components/react-migration-v8-v9/.storybook/main.js @@ -1,7 +1,9 @@ -const { registerTsPaths, createPathAliasesConfig, registerRules, rules } = require('@fluentui/scripts-storybook'); +const path = require('path'); +const { registerTsPaths, registerRules, rules } = require('@fluentui/scripts-storybook'); + const rootMain = require('../../../../.storybook/main'); -const { tsConfigAllPath } = createPathAliasesConfig(); +const tsConfigAllPath = path.join(__dirname, '../../../../tsconfig.base.all.json'); module.exports = /** @type {Omit} */ ({ ...rootMain, diff --git a/packages/react-components/react-migration-v8-v9/package.json b/packages/react-components/react-migration-v8-v9/package.json index be85c40f3eb226..d571ebc21bc9cf 100644 --- a/packages/react-components/react-migration-v8-v9/package.json +++ b/packages/react-components/react-migration-v8-v9/package.json @@ -18,7 +18,7 @@ "just": "just-scripts", "lint": "just-scripts lint", "test": "jest --passWithNoTests", - "type-check": "tsc -b tsconfig.json", + "type-check": "just-scripts type-check", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", "start": "yarn storybook" diff --git a/packages/react-components/react-migration-v8-v9/tsconfig.json b/packages/react-components/react-migration-v8-v9/tsconfig.json index 1941a041d46c19..4908309138a098 100644 --- a/packages/react-components/react-migration-v8-v9/tsconfig.json +++ b/packages/react-components/react-migration-v8-v9/tsconfig.json @@ -1,13 +1,15 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../../../tsconfig.base.all.json", "compilerOptions": { + "strict": true, "target": "ES2019", "noEmit": true, "isolatedModules": true, "importHelpers": true, "jsx": "react", "noUnusedLocals": true, - "preserveConstEnums": true + "preserveConstEnums": true, + "paths": {} }, "include": [], "files": [], diff --git a/scripts/generators/create-package/index.ts b/scripts/generators/create-package/index.ts index 7a5de4a1cd02b2..335aaec0ff5868 100644 --- a/scripts/generators/create-package/index.ts +++ b/scripts/generators/create-package/index.ts @@ -1,14 +1,14 @@ -import { NodePlopAPI, AddManyActionConfig } from 'plop'; -import { Actions } from 'node-plop'; +import { spawnSync } from 'child_process'; import * as path from 'path'; + +import { PackageJson, findGitRoot } from '@fluentui/scripts-monorepo'; +import { WorkspaceJsonConfiguration } from '@nrwl/devkit'; +import chalk from 'chalk'; import * as fs from 'fs-extra'; import * as jju from 'jju'; import _ from 'lodash'; -import chalk from 'chalk'; -import { spawnSync } from 'child_process'; -import { WorkspaceJsonConfiguration } from '@nrwl/devkit'; - -import { findGitRoot, PackageJson } from '@fluentui/scripts-monorepo'; +import { Actions } from 'node-plop'; +import { AddManyActionConfig, NodePlopAPI } from 'plop'; const root = findGitRoot(); @@ -160,6 +160,17 @@ module.exports = (plop: NodePlopAPI) => { if (migrateResult.status !== 0) { throw new Error('Something went wrong running the migration. Please check previous logs for details.'); } + const tsConfigAllUpdate = spawnSync('yarn', ['nx', 'workspace-generator', 'tsconfig-base-all'], { + cwd: root, + stdio: 'inherit', + shell: true, + }); + if (tsConfigAllUpdate.status !== 0) { + throw new Error( + 'Something went wrong while updating tsconfig.base.all.json. Please check previous logs for details.', + ); + } + return 'Successfully migrated package'; }, () => { diff --git a/scripts/storybook/src/index.d.ts b/scripts/storybook/src/index.d.ts index 3b549d3d4dbff5..8e89d8b7855d32 100644 --- a/scripts/storybook/src/index.d.ts +++ b/scripts/storybook/src/index.d.ts @@ -3,7 +3,6 @@ export { loadWorkspaceAddon, registerTsPaths, registerRules, - createPathAliasesConfig, overrideDefaultBabelLoader, } from './utils'; diff --git a/scripts/storybook/src/index.js b/scripts/storybook/src/index.js index 7f12318ec27922..364bb4019e518f 100644 --- a/scripts/storybook/src/index.js +++ b/scripts/storybook/src/index.js @@ -1,14 +1,7 @@ const rules = require('./rules'); -const { - createPathAliasesConfig, - getPackageStoriesGlob, - loadWorkspaceAddon, - registerRules, - registerTsPaths, -} = require('./utils'); +const { getPackageStoriesGlob, loadWorkspaceAddon, registerRules, registerTsPaths } = require('./utils'); module.exports = { - createPathAliasesConfig, getPackageStoriesGlob, loadWorkspaceAddon, registerRules, diff --git a/scripts/storybook/src/utils.js b/scripts/storybook/src/utils.js index d4405b483335f2..f38cdf5e6efbf2 100644 --- a/scripts/storybook/src/utils.js +++ b/scripts/storybook/src/utils.js @@ -3,7 +3,7 @@ const path = require('path'); const { fullSourcePlugin: babelPlugin } = require('@fluentui/babel-preset-storybook-full-source'); const { isConvergedPackage, getAllPackageInfo, getProjectMetadata } = require('@fluentui/scripts-monorepo'); -const { stripIndents, offsetFromRoot, workspaceRoot, readJsonFile, writeJsonFile } = require('@nrwl/devkit'); +const { stripIndents, offsetFromRoot, workspaceRoot } = require('@nrwl/devkit'); const semver = require('semver'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); @@ -354,48 +354,9 @@ function overrideDefaultBabelLoader(options) { } } -/** - * Create tsconfig.json with merged "compilerOptions.paths" from v0,v8,v9 tsconfigs. - * - * Main purpose of this is to be used for build-less DX in webpack in tandem with {@link registerTsPaths} - * @returns - */ -function createPathAliasesConfig() { - const { tsConfigAllPath } = createMergedTsConfig(); - return { tsConfigAllPath }; -} - -function createMergedTsConfig() { - const rootPath = workspaceRoot; - const tsConfigAllPath = path.join(rootPath, 'dist/tsconfig.base.all.json'); - const baseConfigs = { - v0: readJsonFile(path.join(rootPath, 'tsconfig.base.v0.json')), - v8: readJsonFile(path.join(rootPath, 'tsconfig.base.v8.json')), - v9: readJsonFile(path.join(rootPath, 'tsconfig.base.json')), - }; - const mergedTsConfig = { - compilerOptions: { - moduleResolution: 'node', - forceConsistentCasingInFileNames: true, - skipLibCheck: true, - baseUrl: workspaceRoot, - paths: { - ...baseConfigs.v0.compilerOptions.paths, - ...baseConfigs.v8.compilerOptions.paths, - ...baseConfigs.v9.compilerOptions.paths, - }, - }, - }; - - writeJsonFile(tsConfigAllPath, mergedTsConfig); - - return { tsConfigAllPath, mergedTsConfig }; -} - exports.getPackageStoriesGlob = getPackageStoriesGlob; exports.loadWorkspaceAddon = loadWorkspaceAddon; exports.registerTsPaths = registerTsPaths; exports.registerRules = registerRules; -exports.createPathAliasesConfig = createPathAliasesConfig; exports.overrideDefaultBabelLoader = overrideDefaultBabelLoader; exports._createCodesandboxRule = _createCodesandboxRule; diff --git a/scripts/tasks/src/api-extractor.ts b/scripts/tasks/src/api-extractor.ts index 336ad6667301c4..96c8cc8b6cf38f 100644 --- a/scripts/tasks/src/api-extractor.ts +++ b/scripts/tasks/src/api-extractor.ts @@ -57,7 +57,7 @@ export function apiExtractor(): TaskFunction { }; const args: ReturnType & Partial = getJustArgv(); - const { isUsingTsSolutionConfigs, packageJson, tsConfig } = getTsPathAliasesConfig(); + const { isUsingTsSolutionConfigs, packageJson, tsConfigs } = getTsPathAliasesConfig(); if (configsToExecute.length === 0) { return noop; @@ -102,14 +102,14 @@ export function apiExtractor(): TaskFunction { } function onConfigLoaded(config: Parameters>[0]) { - if (!(isUsingTsSolutionConfigs && tsConfig)) { + if (!(isUsingTsSolutionConfigs && tsConfigs.lib)) { return; } logger.info(`api-extractor: package is using TS path aliases. Overriding TS compiler settings.`); const compilerConfig = getTsPathAliasesApiExtractorConfig({ - tsConfig, + tsConfig: tsConfigs.lib, packageJson, pathAliasesTsConfigPath: isLocalBuild ? path.join(workspaceRoot, 'tsconfig.base.json') : undefined, definitionsRootPath: 'dist/out-tsc/types', diff --git a/scripts/tasks/src/copy.ts b/scripts/tasks/src/copy.ts index f750762477ce24..61e911f8333d9e 100644 --- a/scripts/tasks/src/copy.ts +++ b/scripts/tasks/src/copy.ts @@ -1,7 +1,9 @@ -import * as fs from 'fs-extra'; import * as path from 'path'; -import { series, resolveCwd, copyTask, copyInstructionsTask, logger, TaskFunction } from 'just-scripts'; -import { getProjectMetadata, findGitRoot } from '@fluentui/scripts-monorepo'; + +import { findGitRoot, getProjectMetadata } from '@fluentui/scripts-monorepo'; +import * as fs from 'fs-extra'; +import { TaskFunction, copyInstructionsTask, copyTask, logger, resolveCwd, series } from 'just-scripts'; + import { getTsPathAliasesConfig } from './utils'; export function expandSourcePath(pattern: string): string | null { @@ -38,10 +40,11 @@ export function expandSourcePath(pattern: string): string | null { * Used solely for packages that use TS solution config files with TS path aliases */ export function copyCompiled() { - const { isUsingTsSolutionConfigs, packageJson, tsConfig } = getTsPathAliasesConfig(); + const { isUsingTsSolutionConfigs, packageJson, tsConfigs } = getTsPathAliasesConfig(); const root = findGitRoot(); const packageDir = process.cwd(); + const tsConfig = tsConfigs.lib; if (!(isUsingTsSolutionConfigs && tsConfig)) { logger.warn(`copy-compiled: works only with packages that use TS solution config files. Skipping...`); diff --git a/scripts/tasks/src/generate-api.ts b/scripts/tasks/src/generate-api.ts index 829339d5cd4c89..6a598757c8eb25 100644 --- a/scripts/tasks/src/generate-api.ts +++ b/scripts/tasks/src/generate-api.ts @@ -1,17 +1,24 @@ -import { exec } from 'child_process'; -import { promisify } from 'util'; +import { execSync } from 'child_process'; import { series } from 'just-scripts'; import { apiExtractor } from './api-extractor'; - -const execAsync = promisify(exec); +import { getTsPathAliasesConfigUsedOnlyForDx } from './utils'; export function generateApi() { return series(generateTypeDeclarations, apiExtractor); } function generateTypeDeclarations() { - const cmd = 'tsc -p ./tsconfig.lib.json --emitDeclarationOnly'; - return execAsync(cmd); + const { isUsingPathAliasesForDx, tsConfigFileForCompilation } = getTsPathAliasesConfigUsedOnlyForDx(); + const cmd = [ + 'tsc', + `-p ./${tsConfigFileForCompilation}`, + '--emitDeclarationOnly', + isUsingPathAliasesForDx ? '--baseUrl .' : null, + ] + .filter(Boolean) + .join(' '); + + return execSync(cmd, { stdio: 'inherit' }); } diff --git a/scripts/tasks/src/presets.ts b/scripts/tasks/src/presets.ts index 47a4bd4b7dede6..ffa8f45073515d 100644 --- a/scripts/tasks/src/presets.ts +++ b/scripts/tasks/src/presets.ts @@ -20,6 +20,7 @@ import { hasSass, sass } from './sass'; import { buildStorybookTask, startStorybookTask } from './storybook'; import { swc } from './swc'; import { ts } from './ts'; +import { typeCheck } from './type-check'; import { webpack, webpackDevServer } from './webpack'; /** Do only the bare minimum setup of options and resolve paths */ @@ -64,7 +65,7 @@ export function preset() { task('eslint', eslint); task('webpack', webpack); task('webpack-dev-server', webpackDevServer(args)); - task('api-extractor', apiExtractor()); + task('api-extractor', apiExtractor); task('lint-imports:all', lintImportTaskAll); task('lint-imports:amd', lintImportTaskAmdOnly); task('prettier', prettier); @@ -72,6 +73,7 @@ export function preset() { task('storybook:build', buildStorybookTask()); task('babel:postprocess', babel); task('generate-api', generateApi); + task('type-check', typeCheck); task('ts:compile', () => { const moduleFlag = args.module; diff --git a/scripts/tasks/src/ts.ts b/scripts/tasks/src/ts.ts index 1d7e99665ff3b0..89388cd5228c9c 100644 --- a/scripts/tasks/src/ts.ts +++ b/scripts/tasks/src/ts.ts @@ -3,7 +3,7 @@ import * as path from 'path'; import { TscTaskOptions, logger, tscTask } from 'just-scripts'; import { getJustArgv } from './argv'; -import { getTsPathAliasesConfig, getTsPathAliasesConfigV8 } from './utils'; +import { getTsPathAliasesConfig, getTsPathAliasesConfigUsedOnlyForDx } from './utils'; const libPath = path.resolve(process.cwd(), 'lib'); const srcPath = path.resolve(process.cwd(), 'src'); @@ -24,24 +24,26 @@ function prepareTsTaskConfig(options: TscTaskOptions) { options.sourceMap = true; } - const { isUsingV8pathAliases, tsConfigFileV8 } = getTsPathAliasesConfigV8(); + const { isUsingPathAliasesForDx, tsConfigFileForCompilation } = getTsPathAliasesConfigUsedOnlyForDx(); - if (isUsingV8pathAliases) { - logger.info(`📣 TSC: V8 package is using TS path aliases. Overriding tsconfig settings.`); + if (isUsingPathAliasesForDx) { + logger.info(`📣 TSC: Project is using TS path aliases for DX. Disabling aliases for build.`); options.baseUrl = '.'; options.rootDir = './src'; - options.project = tsConfigFileV8; + options.project = tsConfigFileForCompilation; + + return options; } - const { isUsingTsSolutionConfigs, tsConfigFile, tsConfig } = getTsPathAliasesConfig(); + const { isUsingTsSolutionConfigs, tsConfigFileNames, tsConfigs } = getTsPathAliasesConfig(); - if (isUsingTsSolutionConfigs && tsConfig) { + if (isUsingTsSolutionConfigs && tsConfigs.lib) { logger.info(`📣 TSC: package is using TS path aliases. Overriding tsconfig settings.`); - const tsConfigOutDir = tsConfig.compilerOptions.outDir as string; + const tsConfigOutDir = tsConfigs.lib.compilerOptions.outDir as string; options.outDir = `${tsConfigOutDir}/${options.outDir}`; - options.project = tsConfigFile; + options.project = tsConfigFileNames.lib; } return options; diff --git a/scripts/tasks/src/type-check.ts b/scripts/tasks/src/type-check.ts new file mode 100644 index 00000000000000..72f73f2fc62fba --- /dev/null +++ b/scripts/tasks/src/type-check.ts @@ -0,0 +1,43 @@ +import * as fs from 'fs'; + +import { logger } from 'just-scripts'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { exec } from 'just-scripts-utils'; + +import { getTsPathAliasesConfig } from './utils'; + +export function typeCheck() { + const { isUsingTsSolutionConfigs, tsConfigFileContents, tsConfigs, tsConfigFilePaths } = getTsPathAliasesConfig(); + + if (!isUsingTsSolutionConfigs) { + logger.info('project is not using TS solution config. skipping...'); + return; + } + + const content = tsConfigFileContents.root; + const config = tsConfigs.root; + const configPath = tsConfigFilePaths.root; + + if (!(content && config)) { + return; + } + + // turn off path aliases. + // @ts-expect-error - bad just-scripts ts types + config.compilerOptions.paths = {}; + fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8'); + + const cmd = 'tsc'; + const args = ['-b', '--pretty', configPath]; + const program = `${cmd} ${args.join(' ')}`; + + return exec(program) + .catch(err => { + console.error(err.stdout); + process.exit(1); + }) + .finally(() => { + // restore original tsconfig.json + fs.writeFileSync(configPath, content, 'utf-8'); + }); +} diff --git a/scripts/tasks/src/utils.ts b/scripts/tasks/src/utils.ts index a46babceaff712..dca9655a309602 100644 --- a/scripts/tasks/src/utils.ts +++ b/scripts/tasks/src/utils.ts @@ -1,31 +1,89 @@ +import { execSync } from 'child_process'; import * as fs from 'fs'; import * as path from 'path'; -import { stripJsonComments } from '@nrwl/devkit'; -import * as jju from 'jju'; +import { parseJson, stripJsonComments } from '@nrwl/devkit'; import type { TscTaskOptions } from 'just-scripts'; +/** + * + * get full TS configuration for particular tsconfig.json. + * uses tsc --showConfig under the hood + */ +export function getFullTsConfig(options: { configFileName: string; cwd: string }): TsConfig | null { + const { configFileName, cwd } = options; + const configPath = path.join(cwd, configFileName); + + if (!fs.existsSync(configPath)) { + console.warn(`${configPath} doesn't exist`); + return null; + } + + const output = execSync(`tsc -p ${configFileName} --showConfig`, { cwd, encoding: 'utf-8' }); + const json = JSON.parse(output); + + return json; +} + export function getTsPathAliasesConfig() { const cwd = process.cwd(); - const tsConfigFile = 'tsconfig.lib.json'; - const tsConfigPath = path.join(cwd, './tsconfig.lib.json'); - const tsConfig: TsConfig | null = fs.existsSync(tsConfigPath) - ? jju.parse(fs.readFileSync(tsConfigPath, 'utf-8')) - : null; + const tsConfigFileNames = { + root: 'tsconfig.json', + lib: 'tsconfig.lib.json', + }; + const tsConfigFilePaths = { + root: path.join(cwd, tsConfigFileNames.root), + lib: path.join(cwd, tsConfigFileNames.lib), + }; + const tsConfigFileContents = { + root: fs.existsSync(tsConfigFilePaths.root) ? fs.readFileSync(tsConfigFilePaths.root, 'utf-8') : null, + lib: fs.existsSync(tsConfigFilePaths.lib) ? fs.readFileSync(tsConfigFilePaths.lib, 'utf-8') : null, + }; + const tsConfigs = { + root: tsConfigFileContents.root + ? (parseJson(tsConfigFileContents.root, { expectComments: true }) as TsConfig) + : null, + lib: tsConfigFileContents.lib ? (parseJson(tsConfigFileContents.lib, { expectComments: true }) as TsConfig) : null, + }; const packageJson: PackageJson = JSON.parse(fs.readFileSync(path.join(cwd, './package.json'), 'utf-8')); - const isUsingTsSolutionConfigs = Boolean(tsConfig); + const isUsingTsSolutionConfigs = + tsConfigs.root && + tsConfigs.root.references && + tsConfigs.root.references.length > 0 && + Boolean(tsConfigFileContents.lib); - return { tsConfig, isUsingTsSolutionConfigs, tsConfigFile, tsConfigPath, packageJson }; + return { + tsConfigFileNames, + tsConfigFilePaths, + tsConfigFileContents, + tsConfigs, + packageJson, + isUsingTsSolutionConfigs, + }; } -export function getTsPathAliasesConfigV8() { +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 tsConfigFile = 'tsconfig.json'; - const tsConfigPath = path.join(cwd, `./${tsConfigFile}`); + 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 isUsingV8pathAliases = tsConfig.extends && tsConfig.extends.includes('tsconfig.base.v8.json'); - return { isUsingV8pathAliases, tsConfigFileV8: tsConfigFile }; + 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!`); + } + + return { isUsingPathAliasesForDx, tsConfigFileForCompilation }; } const packagesWithInvalidTypes = [ diff --git a/tools/generators/tsconfig-base-all/README.md b/tools/generators/tsconfig-base-all/README.md new file mode 100644 index 00000000000000..bf5861795bcb73 --- /dev/null +++ b/tools/generators/tsconfig-base-all/README.md @@ -0,0 +1,46 @@ +# tsconfig-base-all + +Workspace Generator for generating/updating `/tsconfig.base.all.json`. + +> `tsconfig.base.all.json` contains all monorepo project path aliases, and reflect source of truth for all monorepo packages. + + + +- [Usage](#usage) + - [Examples](#examples) +- [Options](#options) + - [`verify`](#verify) + + + +## Usage + +```sh +yarn nx workspace-generator tsconfig-base-all +``` + +Show what will be generated without writing to disk: + +```sh +yarn nx workspace-generator tsconfig-base-all --dry-run +``` + +### Examples + +```sh +yarn nx workspace-generator tsconfig-base-all +``` + +## Options + +#### `verify` + +Type: `boolean` + +use this option on CI to check if base.all.json is up to date and in sync with all other base configs + +Following will throw an error if `tsconfig.base.all.json` is out of date + +```sh +yarn nx workspace-generator tsconfig-base-all --verify +``` diff --git a/tools/generators/tsconfig-base-all/index.spec.ts b/tools/generators/tsconfig-base-all/index.spec.ts new file mode 100644 index 00000000000000..956d08ad247a07 --- /dev/null +++ b/tools/generators/tsconfig-base-all/index.spec.ts @@ -0,0 +1,121 @@ +import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; +import { Tree, writeJson, readJson, updateJson } from '@nrwl/devkit'; + +import generator from './index'; +import { TsconfigBaseAllGeneratorSchema } from './schema'; + +describe('tsconfig-base-all generator', () => { + let tree: Tree; + const options: TsconfigBaseAllGeneratorSchema = {}; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + writeJson(tree, '/tsconfig.base.v0.json', { + compilerOptions: { + paths: { + '@proj/v0-one': ['packages/v0-one/src/index.ts'], + '@proj/v0-two': ['packages/v0-two/src/index.ts'], + }, + }, + }); + writeJson(tree, '/tsconfig.base.v8.json', { + compilerOptions: { + paths: { + '@proj/v8-one': ['packages/v8-one/src/index.ts'], + '@proj/v8-two': ['packages/v8-two/src/index.ts'], + }, + }, + }); + writeJson(tree, '/tsconfig.base.json', { + compilerOptions: { + paths: { + '@proj/one': ['packages/one/src/index.ts'], + '@proj/two': ['packages/two/src/index.ts'], + }, + }, + }); + }); + + it('should run successfully', async () => { + await generator(tree, options); + const baseAllJson = readJson(tree, '/tsconfig.base.all.json'); + + expect(baseAllJson).toMatchInlineSnapshot(` + Object { + "compilerOptions": Object { + "baseUrl": ".", + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "moduleResolution": "node", + "paths": Object { + "@proj/one": Array [ + "packages/one/src/index.ts", + ], + "@proj/two": Array [ + "packages/two/src/index.ts", + ], + "@proj/v0-one": Array [ + "packages/v0-one/src/index.ts", + ], + "@proj/v0-two": Array [ + "packages/v0-two/src/index.ts", + ], + "@proj/v8-one": Array [ + "packages/v8-one/src/index.ts", + ], + "@proj/v8-two": Array [ + "packages/v8-two/src/index.ts", + ], + }, + "preserveConstEnums": true, + "pretty": true, + "rootDir": ".", + "skipLibCheck": true, + "sourceMap": true, + "typeRoots": Array [ + "node_modules/@types", + "./typings", + ], + }, + } + `); + }); + + describe(`--verify`, () => { + it(`should pass if base all config is up to date`, async () => { + expect.assertions(1); + await generator(tree, {}); + + updateJson(tree, '/tsconfig.base.json', json => { + json.compilerOptions.paths['@proj/three'] = ['packages/three/src/index.ts']; + return json; + }); + + await generator(tree, {}); + + await expect(generator(tree, { verify: true })).resolves.toBe(undefined); + }); + + it(`should fail if base all config is not up to date`, async () => { + expect.assertions(1); + await generator(tree, {}); + + updateJson(tree, '/tsconfig.base.json', json => { + json.compilerOptions.paths['@proj/three'] = ['packages/three/src/index.ts']; + return json; + }); + + try { + await generator(tree, { verify: true }); + } catch (err) { + expect((err as Error).message).toMatchInlineSnapshot(` + " + 🚨 /tsconfig.base.all.json is out of date. + + Please update it by running 'yarn nx workspace-generator tsconfig-base-all'. + " + `); + } + }); + }); +}); diff --git a/tools/generators/tsconfig-base-all/index.ts b/tools/generators/tsconfig-base-all/index.ts new file mode 100644 index 00000000000000..fdad039a5f8754 --- /dev/null +++ b/tools/generators/tsconfig-base-all/index.ts @@ -0,0 +1,33 @@ +import { Tree, formatFiles, writeJson } from '@nrwl/devkit'; +import { isEqual } from 'lodash'; + +import { TsconfigBaseAllGeneratorSchema } from './schema'; +import { createPathAliasesConfig } from './lib/utils'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +interface NormalizedSchema extends ReturnType {} + +export default async function (tree: Tree, schema: TsconfigBaseAllGeneratorSchema) { + const normalizedOptions = normalizeOptions(tree, schema); + + const { existingTsConfig, mergedTsConfig, tsConfigAllPath } = createPathAliasesConfig(tree); + + if (normalizedOptions.verify && !isEqual(existingTsConfig, mergedTsConfig)) { + throw new Error(` + 🚨 ${tsConfigAllPath} is out of date. + + Please update it by running 'yarn nx workspace-generator tsconfig-base-all'. + `); + } + + writeJson(tree, tsConfigAllPath, mergedTsConfig); + await formatFiles(tree); +} + +function normalizeOptions(tree: Tree, options: TsconfigBaseAllGeneratorSchema) { + const defaults = { verify: false }; + return { + ...defaults, + ...options, + }; +} diff --git a/tools/generators/tsconfig-base-all/lib/utils.ts b/tools/generators/tsconfig-base-all/lib/utils.ts new file mode 100644 index 00000000000000..f9a246d4f26daf --- /dev/null +++ b/tools/generators/tsconfig-base-all/lib/utils.ts @@ -0,0 +1,40 @@ +// use this module to define any kind of generic utilities that are used in more than 1 place within the generator implementation +import * as path from 'path'; +import { readJson, Tree } from '@nrwl/devkit'; + +/** + * + * Create tsconfig.json with merged "compilerOptions.paths" from v0,v8,v9 tsconfigs. + */ +export function createPathAliasesConfig(tree: Tree) { + const tsConfigAllPath = '/tsconfig.base.all.json'; + const existingTsConfig = tree.exists(tsConfigAllPath) ? readJson(tree, tsConfigAllPath) : null; + + const baseConfigs = { + v0: readJson(tree, path.join('/tsconfig.base.v0.json')), + v8: readJson(tree, path.join('/tsconfig.base.v8.json')), + v9: readJson(tree, path.join('/tsconfig.base.json')), + }; + const tsConfigBase = '.'; + const mergedTsConfig = { + compilerOptions: { + moduleResolution: 'node', + forceConsistentCasingInFileNames: true, + skipLibCheck: true, + typeRoots: ['node_modules/@types', './typings'], + isolatedModules: true, + preserveConstEnums: true, + sourceMap: true, + pretty: true, + rootDir: tsConfigBase, + baseUrl: tsConfigBase, + paths: { + ...baseConfigs.v0.compilerOptions.paths, + ...baseConfigs.v8.compilerOptions.paths, + ...baseConfigs.v9.compilerOptions.paths, + }, + }, + }; + + return { tsConfigAllPath, mergedTsConfig, existingTsConfig }; +} diff --git a/tools/generators/tsconfig-base-all/schema.json b/tools/generators/tsconfig-base-all/schema.json new file mode 100644 index 00000000000000..78f52b5970b631 --- /dev/null +++ b/tools/generators/tsconfig-base-all/schema.json @@ -0,0 +1,14 @@ +{ + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "id": "tsconfig-base-all", + "description": "Create tsconfig.json with merged 'compilerOptions.paths' from v0,v8,v9 tsconfigs", + "type": "object", + "properties": { + "verify": { + "type": "boolean", + "description": "Verify integrity of tsconfig.base.all.json path aliases" + } + }, + "required": [] +} diff --git a/tools/generators/tsconfig-base-all/schema.ts b/tools/generators/tsconfig-base-all/schema.ts new file mode 100644 index 00000000000000..8188c3342d5abe --- /dev/null +++ b/tools/generators/tsconfig-base-all/schema.ts @@ -0,0 +1,6 @@ +export interface TsconfigBaseAllGeneratorSchema { + /** + * Verify integrity of tsconfig.base.all.json path aliases + */ + verify?: boolean; +} diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json new file mode 100644 index 00000000000000..030c677be31982 --- /dev/null +++ b/tsconfig.base.all.json @@ -0,0 +1,158 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "forceConsistentCasingInFileNames": true, + "skipLibCheck": true, + "typeRoots": ["node_modules/@types", "./typings"], + "isolatedModules": true, + "preserveConstEnums": true, + "sourceMap": true, + "pretty": true, + "rootDir": ".", + "baseUrl": ".", + "paths": { + "@fluentui/react-portal-compat-context": ["packages/react-components/react-portal-compat-context/src/index.ts"], + "@fluentui/a11y-testing": ["packages/a11y-testing/src/index.ts"], + "@fluentui/ability-attributes": ["packages/fluentui/ability-attributes/src/index.ts"], + "@fluentui/accessibility": ["packages/fluentui/accessibility/src/index.ts"], + "@fluentui/code-sandbox": ["packages/fluentui/code-sandbox/src/index.ts"], + "@fluentui/digest": ["packages/fluentui/digest/src/index.ts"], + "@fluentui/docs-components": ["packages/fluentui/docs-components/src/index.ts"], + "@fluentui/react-bindings": ["packages/fluentui/react-bindings/src/index.ts"], + "@fluentui/react-builder": ["packages/fluentui/react-builder/src/index.ts"], + "@fluentui/react-component-event-listener": ["packages/fluentui/react-component-event-listener/src/index.ts"], + "@fluentui/react-component-nesting-registry": ["packages/fluentui/react-component-nesting-registry/src/index.ts"], + "@fluentui/react-component-ref": ["packages/fluentui/react-component-ref/src/index.ts"], + "@fluentui/react-icons-northstar": ["packages/fluentui/react-icons-northstar/src/index.ts"], + "@fluentui/react-northstar": ["packages/fluentui/react-northstar/src/index.ts"], + "@fluentui/react-northstar-emotion-renderer": ["packages/fluentui/react-northstar-emotion-renderer/src/index.ts"], + "@fluentui/react-northstar-fela-renderer": ["packages/fluentui/react-northstar-fela-renderer/src/index.ts"], + "@fluentui/react-northstar-styles-renderer": ["packages/fluentui/react-northstar-styles-renderer/src/index.ts"], + "@fluentui/react-northstar-prototypes": ["packages/fluentui/react-northstar-prototypes/src/index.ts"], + "@fluentui/react-telemetry": ["packages/fluentui/react-telemetry/src/index.ts"], + "@fluentui/react-proptypes": ["packages/fluentui/react-proptypes/src/index.ts"], + "@fluentui/state": ["packages/fluentui/state/src/index.ts"], + "@fluentui/styles": ["packages/fluentui/styles/src/index.ts"], + "@fluentui/api-docs": ["packages/api-docs/src/index.ts"], + "@fluentui/azure-themes": ["packages/azure-themes/src/index.ts"], + "@fluentui/codemods": ["packages/codemods/src/index.ts"], + "@fluentui/date-time-utilities": ["packages/date-time-utilities/src/index.ts"], + "@fluentui/example-data": ["packages/example-data/src/index.ts"], + "@fluentui/fluent2-theme": ["packages/fluent2-theme/src/index.ts"], + "@fluentui/font-icons-mdl2": ["packages/font-icons-mdl2/src/index.ts"], + "@fluentui/foundation-legacy": ["packages/foundation-legacy/src/index.ts"], + "@fluentui/jest-serializer-merge-styles": ["packages/jest-serializer-merge-styles/src/index.ts"], + "@fluentui/merge-styles": ["packages/merge-styles/src/index.ts"], + "@fluentui/react": ["packages/react/src/index.ts"], + "@fluentui/react/lib/*": ["packages/react/src/*"], + "@fluentui/react-date-time": ["packages/react-date-time/src/index.ts"], + "@fluentui/react-experiments": ["packages/react-experiments/src/index.ts"], + "@fluentui/react-experiments/lib/*": ["packages/react-experiments/src/*"], + "@fluentui/react-file-type-icons": ["packages/react-file-type-icons/src/index.ts"], + "@fluentui/react-focus": ["packages/react-focus/src/index.ts"], + "@fluentui/react-hooks": ["packages/react-hooks/src/index.ts"], + "@fluentui/scheme-utilities": ["packages/scheme-utilities/src/index.ts"], + "@fluentui/set-version": ["packages/set-version/src/index.ts"], + "@fluentui/style-utilities": ["packages/style-utilities/src/index.ts"], + "@fluentui/test-utilities": ["packages/test-utilities/src/index.ts"], + "@fluentui/theme-samples": ["packages/theme-samples/src/index.ts"], + "@fluentui/utilities": ["packages/utilities/src/index.ts"], + "@fluentui/webpack-utilities": ["packages/utilities/src/index.ts"], + "@fluentui/dom-utilities": ["packages/dom-utilities/src/index.ts"], + "@fluentui/theme": ["packages/theme/src/index.ts"], + "@fluentui/react-cards": ["packages/react-cards/src/index.ts"], + "@fluentui/react-charting": ["packages/react-charting/src/index.ts"], + "@fluentui/react-window-provider": ["packages/react-window-provider/src/index.ts"], + "@fluentui/react-icons-mdl2": ["packages/react-icons-mdl2/src/index.ts"], + "@fluentui/react-icons-mdl2-branded": ["packages/react-icons-mdl2-branded/src/index.ts"], + "@fluentui/react-icon-provider": ["packages/react-icon-provider/src/index.ts"], + "@fluentui/react-examples": ["packages/react-examples/src/index.ts"], + "@fluentui/react-examples/lib/*": ["packages/react-examples/src/*"], + "@fluentui/public-docsite-setup": ["packages/public-docsite-setup/src/index.ts"], + "@fluentui/react-docsite-components": ["packages/react-docsite-components/src/index.ts"], + "@fluentui/react-docsite-components/lib/index2": ["packages/react-docsite-components/src/index2.ts"], + "@fluentui/monaco-editor": [ + "packages/monaco-editor/esm/vs/editor/editor.api.d.ts", + "packages/monaco-editor/src/monacoBundle.ts" + ], + "@fluentui/monaco-editor/esm/*": ["packages/monaco-editor/esm/"], + "@fluentui/monaco-editor/lib/*": ["packages/monaco-editor/src/*"], + "@fluentui/react-monaco-editor": ["packages/react-monaco-editor/src/index.ts"], + "@fluentui/storybook": ["packages/storybook/src/index.ts"], + "@fluentui/babel-preset-global-context": ["packages/react-components/babel-preset-global-context/src/index.ts"], + "@fluentui/babel-preset-storybook-full-source": [ + "packages/react-components/babel-preset-storybook-full-source/src/index.ts" + ], + "@fluentui/global-context": ["packages/react-components/global-context/src/index.ts"], + "@fluentui/keyboard-key": ["packages/keyboard-key/src/index.ts"], + "@fluentui/keyboard-keys": ["packages/react-components/keyboard-keys/src/index.ts"], + "@fluentui/priority-overflow": ["packages/react-components/priority-overflow/src/index.ts"], + "@fluentui/react-accordion": ["packages/react-components/react-accordion/src/index.ts"], + "@fluentui/react-alert": ["packages/react-components/react-alert/src/index.ts"], + "@fluentui/react-aria": ["packages/react-components/react-aria/src/index.ts"], + "@fluentui/react-avatar": ["packages/react-components/react-avatar/src/index.ts"], + "@fluentui/react-badge": ["packages/react-components/react-badge/src/index.ts"], + "@fluentui/react-breadcrumb": ["packages/react-components/react-breadcrumb/src/index.ts"], + "@fluentui/react-button": ["packages/react-components/react-button/src/index.ts"], + "@fluentui/react-card": ["packages/react-components/react-card/src/index.ts"], + "@fluentui/react-checkbox": ["packages/react-components/react-checkbox/src/index.ts"], + "@fluentui/react-combobox": ["packages/react-components/react-combobox/src/index.ts"], + "@fluentui/react-components": ["packages/react-components/react-components/src/index.ts"], + "@fluentui/react-components/unstable": ["packages/react-components/react-components/src/unstable/index.ts"], + "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"], + "@fluentui/react-conformance-griffel": ["packages/react-components/react-conformance-griffel/src/index.ts"], + "@fluentui/react-context-selector": ["packages/react-components/react-context-selector/src/index.ts"], + "@fluentui/react-data-grid-react-window": ["packages/react-components/react-data-grid-react-window/src/index.ts"], + "@fluentui/react-datepicker-compat": ["packages/react-components/react-datepicker-compat/src/index.ts"], + "@fluentui/react-dialog": ["packages/react-components/react-dialog/src/index.ts"], + "@fluentui/react-divider": ["packages/react-components/react-divider/src/index.ts"], + "@fluentui/react-drawer": ["packages/react-components/react-drawer/src/index.ts"], + "@fluentui/react-field": ["packages/react-components/react-field/src/index.ts"], + "@fluentui/react-focus-management": ["packages/react-focus-management/src/index.ts"], + "@fluentui/react-image": ["packages/react-components/react-image/src/index.ts"], + "@fluentui/react-infobutton": ["packages/react-components/react-infobutton/src/index.ts"], + "@fluentui/react-input": ["packages/react-components/react-input/src/index.ts"], + "@fluentui/react-jsx-runtime": ["packages/react-components/react-jsx-runtime/src/index.ts"], + "@fluentui/react-label": ["packages/react-components/react-label/src/index.ts"], + "@fluentui/react-link": ["packages/react-components/react-link/src/index.ts"], + "@fluentui/react-menu": ["packages/react-components/react-menu/src/index.ts"], + "@fluentui/react-migration-v0-v9": ["packages/react-components/react-migration-v0-v9/src/index.ts"], + "@fluentui/react-migration-v8-v9": ["packages/react-components/react-migration-v8-v9/src/index.ts"], + "@fluentui/react-overflow": ["packages/react-components/react-overflow/src/index.ts"], + "@fluentui/react-persona": ["packages/react-components/react-persona/src/index.ts"], + "@fluentui/react-popover": ["packages/react-components/react-popover/src/index.ts"], + "@fluentui/react-portal": ["packages/react-components/react-portal/src/index.ts"], + "@fluentui/react-portal-compat": ["packages/react-components/react-portal-compat/src/index.ts"], + "@fluentui/react-positioning": ["packages/react-components/react-positioning/src/index.ts"], + "@fluentui/react-progress": ["packages/react-components/react-progress/src/index.ts"], + "@fluentui/react-provider": ["packages/react-components/react-provider/src/index.ts"], + "@fluentui/react-radio": ["packages/react-components/react-radio/src/index.ts"], + "@fluentui/react-select": ["packages/react-components/react-select/src/index.ts"], + "@fluentui/react-shared-contexts": ["packages/react-components/react-shared-contexts/src/index.ts"], + "@fluentui/react-skeleton": ["packages/react-components/react-skeleton/src/index.ts"], + "@fluentui/react-slider": ["packages/react-components/react-slider/src/index.ts"], + "@fluentui/react-spinbutton": ["packages/react-components/react-spinbutton/src/index.ts"], + "@fluentui/react-spinner": ["packages/react-components/react-spinner/src/index.ts"], + "@fluentui/react-storybook-addon": ["packages/react-components/react-storybook-addon/src/index.ts"], + "@fluentui/react-storybook-addon-codesandbox": [ + "packages/react-components/react-storybook-addon-codesandbox/src/index.ts" + ], + "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"], + "@fluentui/react-table": ["packages/react-components/react-table/src/index.ts"], + "@fluentui/react-tabs": ["packages/react-components/react-tabs/src/index.ts"], + "@fluentui/react-tabster": ["packages/react-components/react-tabster/src/index.ts"], + "@fluentui/react-tags": ["packages/react-components/react-tags/src/index.ts"], + "@fluentui/react-text": ["packages/react-components/react-text/src/index.ts"], + "@fluentui/react-textarea": ["packages/react-components/react-textarea/src/index.ts"], + "@fluentui/react-theme": ["packages/react-components/react-theme/src/index.ts"], + "@fluentui/react-theme-sass": ["packages/react-components/react-theme-sass/src/index.ts"], + "@fluentui/react-toolbar": ["packages/react-components/react-toolbar/src/index.ts"], + "@fluentui/react-tooltip": ["packages/react-components/react-tooltip/src/index.ts"], + "@fluentui/react-tree": ["packages/react-components/react-tree/src/index.ts"], + "@fluentui/react-utilities": ["packages/react-components/react-utilities/src/index.ts"], + "@fluentui/react-virtualizer": ["packages/react-components/react-virtualizer/src/index.ts"], + "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], + "@fluentui/tokens": ["packages/tokens/src/index.ts"] + } + } +} diff --git a/typings/storybook__addons/index.d.ts b/typings/storybook__addons/index.d.ts index 7f4a5b1f7abd2d..3f37163394817a 100644 --- a/typings/storybook__addons/index.d.ts +++ b/typings/storybook__addons/index.d.ts @@ -47,7 +47,7 @@ declare module '@storybook/addons' { * Allows to override code that will be used for "Show Code" tab. * @see https://github.com/storybookjs/storybook/blob/main/addons/docs/docs/recipes.md#customizing-source-snippets */ - transformSource: (snippet: string, story: StoryContextForEnhancers) => string | undefined; + transformSource?: (snippet: string, story: StoryContextForEnhancers) => string | undefined; container?: React.ComponentType; page?: React.ComponentType;