diff --git a/.eslintrc.js b/.eslintrc.js index e0f4b9c8d01018..a97b7093a954a7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -257,10 +257,7 @@ module.exports = /** @type {Config} */ ({ { files: [ // matching the pattern of the test runner - '*.test.mjs', - '*.test.js', - '*.test.ts', - '*.test.tsx', + '*.test.?(c|m)[jt]s?(x)', ], extends: ['plugin:mocha/recommended'], rules: { @@ -332,14 +329,14 @@ module.exports = /** @type {Config} */ ({ }, // Next.js entry points pages { - files: ['docs/pages/**/*{.tsx,.js}'], + files: ['docs/pages/**/*.?(c|m)[jt]s?(x)'], rules: { 'react/prop-types': 'off', }, }, // demos { - files: ['docs/src/pages/**/*{.tsx,.js}', 'docs/data/**/*{.tsx,.js}'], + files: ['docs/src/pages/**/*.?(c|m)[jt]s?(x)', 'docs/data/**/*.?(c|m)[jt]s?(x)'], rules: { // This most often reports data that is defined after the component definition. // This is safe to do and helps readability of the demo code since the data is mostly irrelevant. @@ -349,23 +346,14 @@ module.exports = /** @type {Config} */ ({ 'no-console': 'off', }, }, - // demos - proptype generation { - files: ['docs/data/base/components/modal/UseModal.js'], - rules: { - 'consistent-return': 'off', - 'func-names': 'off', - 'no-else-return': 'off', - 'prefer-template': 'off', - }, - }, - { - files: ['docs/data/**/*{.tsx,.js}'], + files: ['docs/data/**/*.?(c|m)[jt]s?(x)'], excludedFiles: [ - 'docs/data/joy/getting-started/templates/**/*.tsx', - 'docs/data/**/css/*{.tsx,.js}', - 'docs/data/**/system/*{.tsx,.js}', - 'docs/data/**/tailwind/*{.tsx,.js}', + // filenames/match-exported sees filename as 'file-name.d' + // Plugin looks unmaintain, find alternative? (e.g. eslint-plugin-project-structure) + '*.d.ts', + 'docs/data/joy/getting-started/templates/**/*', + 'docs/data/**/{css,system,tailwind}/*', ], rules: { 'filenames/match-exported': ['error'], @@ -380,6 +368,13 @@ module.exports = /** @type {Config} */ ({ { files: ['packages/*/src/**/*.tsx'], excludedFiles: '*.spec.tsx', + rules: { + 'react/prop-types': 'off', + }, + }, + { + files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'], + excludedFiles: '*.spec.*', rules: { 'no-restricted-imports': [ 'error', @@ -406,11 +401,10 @@ module.exports = /** @type {Config} */ ({ ], }, ], - 'react/prop-types': 'off', }, }, { - files: ['*.spec.tsx', '*.spec.ts'], + files: ['*.spec.*'], rules: { 'no-alert': 'off', 'no-console': 'off', @@ -449,7 +443,7 @@ module.exports = /** @type {Config} */ ({ }, }, { - files: ['docs/**/*{.ts,.tsx,.js}'], + files: ['docs/**/*.?(c|m)[jt]s?(x)'], rules: { 'no-restricted-imports': [ 'error', @@ -461,8 +455,8 @@ module.exports = /** @type {Config} */ ({ }, }, { - files: ['packages/*/src/**/*{.ts,.tsx,.js}'], - excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx'], + files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'], + excludedFiles: ['*.d.ts', '*.spec.*'], rules: { 'no-restricted-imports': [ 'error', @@ -477,8 +471,8 @@ module.exports = /** @type {Config} */ ({ }, }, { - files: ['packages/*/src/**/*{.ts,.tsx,.js}'], - excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx', 'packages/mui-joy/**/*{.ts,.tsx,.js}'], + files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'], + excludedFiles: ['*.d.ts', '*.spec.*', 'packages/mui-joy/**/*'], rules: { 'material-ui/mui-name-matches-component-name': 'error', }, diff --git a/docs/data/base/components/modal/UseModal.js b/docs/data/base/components/modal/UseModal.js index 02be482df395da..ace323bb23dbdd 100644 --- a/docs/data/base/components/modal/UseModal.js +++ b/docs/data/base/components/modal/UseModal.js @@ -138,15 +138,14 @@ Modal.propTypes = { children: PropTypes.element.isRequired, closeAfterTransition: PropTypes.bool, container: PropTypes.oneOfType([ - function (props, propName) { + (props, propName) => { if (props[propName] == null) { - return new Error("Prop '" + propName + "' is required but wasn't specified"); - } else if ( - typeof props[propName] !== 'object' || - props[propName].nodeType !== 1 - ) { - return new Error("Expected prop '" + propName + "' to be of type Element"); + return new Error(`Prop '${propName}' is required but wasn't specified`); } + if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { + return new Error(`Expected prop '${propName}' to be of type Element`); + } + return null; }, PropTypes.func, ]), diff --git a/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts b/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts index 004fbb17ab1416..33affc73689c93 100644 --- a/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts +++ b/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts @@ -186,16 +186,18 @@ export function generatePropTypes( } if (propType.type === 'DOMElementNode') { - return `function (props, propName) { + return `(props, propName) => { if (props[propName] == null) { return ${ propType.optional ? 'null' - : `new Error("Prop '" + propName + "' is required but wasn't specified")` + : `new Error(\`Prop '\${propName}' is required but wasn't specified\`)` } - } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { - return new Error("Expected prop '" + propName + "' to be of type Element") } + if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { + return new Error(\`Expected prop '\${propName}' to be of type Element\`) + } + return null; }`; } diff --git a/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/output.js b/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/output.js index b3d973dd409bb6..9aeea873a04a3c 100644 --- a/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/output.js +++ b/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/output.js @@ -1,30 +1,38 @@ Foo.propTypes = { - bothTypes: function (props, propName) { + bothTypes: (props, propName) => { if (props[propName] == null) { - return new Error("Prop '" + propName + "' is required but wasn't specified"); - } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { - return new Error("Expected prop '" + propName + "' to be of type Element"); + return new Error(`Prop '${propName}' is required but wasn't specified`); } + if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { + return new Error(`Expected prop '${propName}' to be of type Element`); + } + return null; }, - element: function (props, propName) { + element: (props, propName) => { if (props[propName] == null) { - return new Error("Prop '" + propName + "' is required but wasn't specified"); - } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { - return new Error("Expected prop '" + propName + "' to be of type Element"); + return new Error(`Prop '${propName}' is required but wasn't specified`); + } + if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { + return new Error(`Expected prop '${propName}' to be of type Element`); } + return null; }, - htmlElement: function (props, propName) { + htmlElement: (props, propName) => { if (props[propName] == null) { - return new Error("Prop '" + propName + "' is required but wasn't specified"); - } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { - return new Error("Expected prop '" + propName + "' to be of type Element"); + return new Error(`Prop '${propName}' is required but wasn't specified`); } + if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { + return new Error(`Expected prop '${propName}' to be of type Element`); + } + return null; }, - optional: function (props, propName) { + optional: (props, propName) => { if (props[propName] == null) { return null; - } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { - return new Error("Expected prop '" + propName + "' to be of type Element"); } + if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) { + return new Error(`Expected prop '${propName}' to be of type Element`); + } + return null; }, };