From b3a314d2a9a71239ee6c05b32599530ce7c5d211 Mon Sep 17 00:00:00 2001 From: Kermina Awad Date: Fri, 8 Sep 2023 11:42:55 -0400 Subject: [PATCH 1/7] use exact children type to allow React type augmentation --- packages/mui-material/package.json | 2 +- ...tModuleAugmentation.js => testAugmentation.js} | 4 ++-- .../mui-material/src/FormControl/FormControl.d.ts | 7 ++----- .../mui-material/src/FormLabel/FormLabel.d.ts | 6 +----- .../mui-material/src/InputLabel/InputLabel.d.ts | 6 +----- .../mui-material/src/TextField/TextField.d.ts | 4 ---- .../reactAugmentation/children.spec.tsx | 15 +++++++++++++++ .../reactAugmentation/children.tsconfig.json | 7 +++++++ packages/mui-material/tsconfig.json | 6 +++++- 9 files changed, 34 insertions(+), 23 deletions(-) rename packages/mui-material/scripts/{testModuleAugmentation.js => testAugmentation.js} (93%) create mode 100644 packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx create mode 100644 packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 46da622f2b0ff4..0b339f9dde4a20 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -39,7 +39,7 @@ "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json", - "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" + "typescript:augmentation": "node scripts/testAugmentation.js" }, "dependencies": { "@babel/runtime": "^7.22.15", diff --git a/packages/mui-material/scripts/testModuleAugmentation.js b/packages/mui-material/scripts/testAugmentation.js similarity index 93% rename from packages/mui-material/scripts/testModuleAugmentation.js rename to packages/mui-material/scripts/testAugmentation.js index 8b23912c5030d2..539eff9642d52e 100644 --- a/packages/mui-material/scripts/testModuleAugmentation.js +++ b/packages/mui-material/scripts/testAugmentation.js @@ -21,7 +21,7 @@ async function test(tsconfigPath) { } /** - * Tests various module augmentation scenarios. + * Tests various augmentation scenarios. * We can't run them with a single `tsc` run since these apply globally. * Running them all would mean they're not isolated. * Each test case represents a section in our docs. @@ -30,7 +30,7 @@ async function test(tsconfigPath) { * This script also allows us to test in parallel which we can't do with our mocha tests. */ async function main() { - const tsconfigPaths = await glob('test/typescript/moduleAugmentation/*.tsconfig.json', { + const tsconfigPaths = await glob('test/typescript/*Augmentation/*.tsconfig.json', { absolute: true, cwd: packageRoot, }); diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts index e16a6d1b2f51ff..ad3e453b33cd96 100644 --- a/packages/mui-material/src/FormControl/FormControl.d.ts +++ b/packages/mui-material/src/FormControl/FormControl.d.ts @@ -8,11 +8,8 @@ import { FormControlClasses } from './formControlClasses'; export interface FormControlPropsSizeOverrides {} export interface FormControlPropsColorOverrides {} -export interface FormControlOwnProps { - /** - * The content of the component. - */ - children?: React.ReactNode; +export interface FormControlOwnProps + extends Pick, 'children'> { /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts index 980c088469fb5d..560322a45de5de 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.d.ts +++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts @@ -12,11 +12,7 @@ export interface FormLabelPropsColorOverrides {} */ export type FormLabelBaseProps = React.LabelHTMLAttributes; -export interface FormLabelOwnProps { - /** - * The content of the component. - */ - children?: React.ReactNode; +export interface FormLabelOwnProps extends Pick { /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/InputLabel/InputLabel.d.ts b/packages/mui-material/src/InputLabel/InputLabel.d.ts index d14ab786e97ab1..d35c933cac7be5 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.d.ts +++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts @@ -8,11 +8,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface InputLabelPropsSizeOverrides {} -export interface InputLabelOwnProps { - /** - * The content of the component. - */ - children?: React.ReactNode; +export interface InputLabelOwnProps extends Pick { /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts index 33b83fb1c04450..a79a66d8d86ec3 100644 --- a/packages/mui-material/src/TextField/TextField.d.ts +++ b/packages/mui-material/src/TextField/TextField.d.ts @@ -33,10 +33,6 @@ export interface BaseTextFieldProps * @default false */ autoFocus?: boolean; - /** - * @ignore - */ - children?: React.ReactNode; /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx b/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx new file mode 100644 index 00000000000000..aba8df1d890095 --- /dev/null +++ b/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Autocomplete from '@mui/material/Autocomplete'; +import TextField from '@mui/material/TextField'; + +type AugmentedChildren = React.ReactNode | Record; + +// Update React's children prop type +declare module 'react' { + interface HTMLAttributes { + children?: AugmentedChildren | Iterable; + } +} + +// Rendering a TextField for the Autocomplete should work + } />; diff --git a/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json b/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json new file mode 100644 index 00000000000000..799871a6d1c64e --- /dev/null +++ b/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "skipLibCheck": true + }, + "extends": "../../../../../tsconfig", + "files": ["children.spec.tsx"] +} diff --git a/packages/mui-material/tsconfig.json b/packages/mui-material/tsconfig.json index 95e08259e572d4..2151f3e5b528df 100644 --- a/packages/mui-material/tsconfig.json +++ b/packages/mui-material/tsconfig.json @@ -1,5 +1,9 @@ { "extends": "../../tsconfig", "include": ["src/**/*", "test/**/*"], - "exclude": ["test/typescript/moduleAugmentation", "src/types/OverridableComponentAugmentation.ts"] + "exclude": [ + "test/typescript/moduleAugmentation", + "test/typescript/reactAugmentation", + "src/types/OverridableComponentAugmentation.ts" + ] } From 2ee38183e343d5051b8a3c24af5981e69b2958c1 Mon Sep 17 00:00:00 2001 From: Kermina Awad Date: Fri, 8 Sep 2023 12:10:00 -0400 Subject: [PATCH 2/7] keep PropTypes in sync with TS changes --- .../scripts/testModuleAugmentation.js | 65 +++++++++++++++++++ .../src/FormControl/FormControl.d.ts | 7 +- .../mui-material/src/FormLabel/FormLabel.d.ts | 6 +- .../mui-material/src/TextField/TextField.js | 2 +- 4 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 packages/mui-material/scripts/testModuleAugmentation.js diff --git a/packages/mui-material/scripts/testModuleAugmentation.js b/packages/mui-material/scripts/testModuleAugmentation.js new file mode 100644 index 00000000000000..8b23912c5030d2 --- /dev/null +++ b/packages/mui-material/scripts/testModuleAugmentation.js @@ -0,0 +1,65 @@ +const childProcess = require('child_process'); +const path = require('path'); +const { chunk } = require('lodash'); +const glob = require('fast-glob'); +const { promisify } = require('util'); + +const exec = promisify(childProcess.exec); +const packageRoot = path.resolve(__dirname, '../'); + +async function test(tsconfigPath) { + try { + await exec(['yarn', 'tsc', '--project', tsconfigPath].join(' '), { cwd: packageRoot }); + } catch (error) { + if (error.stdout !== undefined) { + // `exec` error + throw new Error(`exit code ${error.code}: ${error.stdout}`); + } + // Unknown error + throw error; + } +} + +/** + * Tests various module augmentation scenarios. + * We can't run them with a single `tsc` run since these apply globally. + * Running them all would mean they're not isolated. + * Each test case represents a section in our docs. + * + * We're not using mocha since mocha is used for runtime tests. + * This script also allows us to test in parallel which we can't do with our mocha tests. + */ +async function main() { + const tsconfigPaths = await glob('test/typescript/moduleAugmentation/*.tsconfig.json', { + absolute: true, + cwd: packageRoot, + }); + // Need to process in chunks or we might run out-of-memory + // approximate yarn lerna --concurrency 7 + const tsconfigPathsChunks = chunk(tsconfigPaths, 7); + + // eslint-disable-next-line no-restricted-syntax + for await (const tsconfigPathsChunk of tsconfigPathsChunks) { + await Promise.all( + tsconfigPathsChunk.map(async (tsconfigPath) => { + await test(tsconfigPath).then( + () => { + // eslint-disable-next-line no-console -- test runner feedback + console.log(`PASS ${path.relative(process.cwd(), tsconfigPath)}`); + }, + (error) => { + // don't bail but log the error + console.error(`FAIL ${path.relative(process.cwd(), tsconfigPath)}\n ${error}`); + // and mark the test as failed + process.exitCode = 1; + }, + ); + }), + ); + } +} + +main().catch((error) => { + console.error(error); + process.exit(1); +}); diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts index ad3e453b33cd96..24ba4ce8dba4be 100644 --- a/packages/mui-material/src/FormControl/FormControl.d.ts +++ b/packages/mui-material/src/FormControl/FormControl.d.ts @@ -8,8 +8,11 @@ import { FormControlClasses } from './formControlClasses'; export interface FormControlPropsSizeOverrides {} export interface FormControlPropsColorOverrides {} -export interface FormControlOwnProps - extends Pick, 'children'> { +export interface FormControlOwnProps { + /** + * The content of the component. + */ + children?: React.HTMLAttributes['children']; /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts index 560322a45de5de..16ee676a92892f 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.d.ts +++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts @@ -12,7 +12,11 @@ export interface FormLabelPropsColorOverrides {} */ export type FormLabelBaseProps = React.LabelHTMLAttributes; -export interface FormLabelOwnProps extends Pick { +export interface FormLabelOwnProps { + /** + * The content of the component. + */ + children?: React.LabelHTMLAttributes['children']; /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js index df210682e3412c..86dc50c9519040 100644 --- a/packages/mui-material/src/TextField/TextField.js +++ b/packages/mui-material/src/TextField/TextField.js @@ -236,7 +236,7 @@ TextField.propTypes /* remove-proptypes */ = { */ autoFocus: PropTypes.bool, /** - * @ignore + * The content of the component. */ children: PropTypes.node, /** From 8b0fd1e87fa3724616697034a0b62566b74a1e9c Mon Sep 17 00:00:00 2001 From: Kermina Awad Date: Fri, 8 Sep 2023 12:11:36 -0400 Subject: [PATCH 3/7] update CircleCI config for mui-material augmentation changes --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c33615ccb38a71..a807b598e21893 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -270,7 +270,7 @@ jobs: - run: name: Test module augmentation command: | - yarn workspace @mui/material typescript:module-augmentation + yarn workspace @mui/material typescript:augmentation yarn workspace @mui/base typescript:module-augmentation yarn workspace @mui/joy typescript:module-augmentation - run: From 69a9e797ab57e4d5955268d7bbd0178c73535851 Mon Sep 17 00:00:00 2001 From: Kermina Awad Date: Fri, 8 Sep 2023 12:13:14 -0400 Subject: [PATCH 4/7] remove accidently added file --- .../scripts/testModuleAugmentation.js | 65 ------------------- 1 file changed, 65 deletions(-) delete mode 100644 packages/mui-material/scripts/testModuleAugmentation.js diff --git a/packages/mui-material/scripts/testModuleAugmentation.js b/packages/mui-material/scripts/testModuleAugmentation.js deleted file mode 100644 index 8b23912c5030d2..00000000000000 --- a/packages/mui-material/scripts/testModuleAugmentation.js +++ /dev/null @@ -1,65 +0,0 @@ -const childProcess = require('child_process'); -const path = require('path'); -const { chunk } = require('lodash'); -const glob = require('fast-glob'); -const { promisify } = require('util'); - -const exec = promisify(childProcess.exec); -const packageRoot = path.resolve(__dirname, '../'); - -async function test(tsconfigPath) { - try { - await exec(['yarn', 'tsc', '--project', tsconfigPath].join(' '), { cwd: packageRoot }); - } catch (error) { - if (error.stdout !== undefined) { - // `exec` error - throw new Error(`exit code ${error.code}: ${error.stdout}`); - } - // Unknown error - throw error; - } -} - -/** - * Tests various module augmentation scenarios. - * We can't run them with a single `tsc` run since these apply globally. - * Running them all would mean they're not isolated. - * Each test case represents a section in our docs. - * - * We're not using mocha since mocha is used for runtime tests. - * This script also allows us to test in parallel which we can't do with our mocha tests. - */ -async function main() { - const tsconfigPaths = await glob('test/typescript/moduleAugmentation/*.tsconfig.json', { - absolute: true, - cwd: packageRoot, - }); - // Need to process in chunks or we might run out-of-memory - // approximate yarn lerna --concurrency 7 - const tsconfigPathsChunks = chunk(tsconfigPaths, 7); - - // eslint-disable-next-line no-restricted-syntax - for await (const tsconfigPathsChunk of tsconfigPathsChunks) { - await Promise.all( - tsconfigPathsChunk.map(async (tsconfigPath) => { - await test(tsconfigPath).then( - () => { - // eslint-disable-next-line no-console -- test runner feedback - console.log(`PASS ${path.relative(process.cwd(), tsconfigPath)}`); - }, - (error) => { - // don't bail but log the error - console.error(`FAIL ${path.relative(process.cwd(), tsconfigPath)}\n ${error}`); - // and mark the test as failed - process.exitCode = 1; - }, - ); - }), - ); - } -} - -main().catch((error) => { - console.error(error); - process.exit(1); -}); From 98ea0f1df2af528fafad592c8fe7739ad7cac611 Mon Sep 17 00:00:00 2001 From: Kermina Awad Date: Fri, 8 Sep 2023 12:32:06 -0400 Subject: [PATCH 5/7] keep children undocumented on TextField component --- packages/mui-material/src/TextField/TextField.d.ts | 4 ++++ packages/mui-material/src/TextField/TextField.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts index a79a66d8d86ec3..488cc6dd3e162c 100644 --- a/packages/mui-material/src/TextField/TextField.d.ts +++ b/packages/mui-material/src/TextField/TextField.d.ts @@ -33,6 +33,10 @@ export interface BaseTextFieldProps * @default false */ autoFocus?: boolean; + /** + * @ignore + */ + children?: FormControlProps['children']; /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/TextField/TextField.js b/packages/mui-material/src/TextField/TextField.js index 86dc50c9519040..df210682e3412c 100644 --- a/packages/mui-material/src/TextField/TextField.js +++ b/packages/mui-material/src/TextField/TextField.js @@ -236,7 +236,7 @@ TextField.propTypes /* remove-proptypes */ = { */ autoFocus: PropTypes.bool, /** - * The content of the component. + * @ignore */ children: PropTypes.node, /** From a45fca32b7ed2fec45ab4af05958fa5caed6593d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 4 Jan 2024 14:49:58 +0530 Subject: [PATCH 6/7] remove not needed tests --- packages/mui-material/package.json | 2 +- .../reactAugmentation/children.spec.tsx | 15 --------------- .../reactAugmentation/children.tsconfig.json | 7 ------- packages/mui-material/tsconfig.json | 6 +----- 4 files changed, 2 insertions(+), 28 deletions(-) delete mode 100644 packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx delete mode 100644 packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 576e271052c418..ffcbad78965ae9 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -39,7 +39,7 @@ "release": "pnpm build && pnpm publish", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", "typescript": "tsc -p tsconfig.json", - "typescript:augmentation": "node scripts/testAugmentation.js" + "typescript:augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { "@babel/runtime": "^7.23.6", diff --git a/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx b/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx deleted file mode 100644 index aba8df1d890095..00000000000000 --- a/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; - -type AugmentedChildren = React.ReactNode | Record; - -// Update React's children prop type -declare module 'react' { - interface HTMLAttributes { - children?: AugmentedChildren | Iterable; - } -} - -// Rendering a TextField for the Autocomplete should work - } />; diff --git a/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json b/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json deleted file mode 100644 index 799871a6d1c64e..00000000000000 --- a/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "compilerOptions": { - "skipLibCheck": true - }, - "extends": "../../../../../tsconfig", - "files": ["children.spec.tsx"] -} diff --git a/packages/mui-material/tsconfig.json b/packages/mui-material/tsconfig.json index 2025e3f446ac1e..cb183f93333562 100644 --- a/packages/mui-material/tsconfig.json +++ b/packages/mui-material/tsconfig.json @@ -1,9 +1,5 @@ { "extends": "../../tsconfig.json", "include": ["src/**/*", "test/**/*"], - "exclude": [ - "test/typescript/moduleAugmentation", - "test/typescript/reactAugmentation", - "src/types/OverridableComponentAugmentation.ts" - ] + "exclude": ["test/typescript/moduleAugmentation", "src/types/OverridableComponentAugmentation.ts"] } From 491c0c50666ed60cd6fe3d886ba080ad8b282e92 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 4 Jan 2024 14:51:22 +0530 Subject: [PATCH 7/7] revert left over --- packages/mui-material/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index ffcbad78965ae9..afa5d0efe29edd 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -39,7 +39,7 @@ "release": "pnpm build && pnpm publish", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", "typescript": "tsc -p tsconfig.json", - "typescript:augmentation": "node scripts/testModuleAugmentation.js" + "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { "@babel/runtime": "^7.23.6",