From c625415734ded91e0206afc8c23c24df0d9dc29b Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 27 Oct 2020 11:21:18 +0100 Subject: [PATCH 1/2] Add compat for usage in utils itself --- .../macros/MuiError.macro.d.ts | 3 ++ .../macros/MuiError.macro.js | 41 +++++++++++++++---- .../macros/MuiError.macro.test.js | 8 ++++ .../relative-import/error-codes.json | 3 ++ .../__fixtures__/relative-import/input.js | 4 ++ .../__fixtures__/relative-import/output.js | 7 ++++ packages/material-ui-utils/src/capitalize.ts | 1 - 7 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 packages/material-ui-utils/macros/MuiError.macro.d.ts create mode 100644 packages/material-ui-utils/macros/__fixtures__/relative-import/error-codes.json create mode 100644 packages/material-ui-utils/macros/__fixtures__/relative-import/input.js create mode 100644 packages/material-ui-utils/macros/__fixtures__/relative-import/output.js diff --git a/packages/material-ui-utils/macros/MuiError.macro.d.ts b/packages/material-ui-utils/macros/MuiError.macro.d.ts new file mode 100644 index 00000000000000..53d894b2241058 --- /dev/null +++ b/packages/material-ui-utils/macros/MuiError.macro.d.ts @@ -0,0 +1,3 @@ +export default class MuiError { + constructor(message: string); +} diff --git a/packages/material-ui-utils/macros/MuiError.macro.js b/packages/material-ui-utils/macros/MuiError.macro.js index a91c70c8c105ff..c0e2f13b357fda 100644 --- a/packages/material-ui-utils/macros/MuiError.macro.js +++ b/packages/material-ui-utils/macros/MuiError.macro.js @@ -1,6 +1,7 @@ const { createMacro, MacroError } = require('babel-plugin-macros'); const helperModuleImports = require('@babel/helper-module-imports'); const fs = require('fs'); +const path = require('path'); function invertObject(object) { const inverted = {}; @@ -11,9 +12,13 @@ function invertObject(object) { } /** + * Supported imports: + * 1. bare specifier e.g. `'@material-ui/utils/macros/MuiError.macro'` + * 2. relative import from `packages/material-ui-utils/src` e.g. `'../macros/MuiError.macro'` + * * @param {import('babel-plugin-macros').MacroParams} param0 */ -function muiError({ references, babel, config }) { +function muiError({ references, babel, config, source }) { const { errorCodesPath = {}, missingError = 'annotate' } = config; const errorCodes = JSON.parse(fs.readFileSync(errorCodesPath, { encoding: 'utf8' })); const errorCodesLookup = invertObject(errorCodes); @@ -125,13 +130,33 @@ function muiError({ references, babel, config }) { errorCode = parseInt(errorCode, 10); if (formatMuiErrorMessageIdentifier === null) { - // Outputs: - // import { formatMuiErrorMessage } from '@material-ui/utils'; - formatMuiErrorMessageIdentifier = helperModuleImports.addNamed( - babelPath, - 'formatMuiErrorMessage', - '@material-ui/utils', - ); + const isBareImportSourceIdentifier = source.startsWith('@material-ui/utils'); + if (isBareImportSourceIdentifier) { + // Input: import MuiError from '@material-ui/utils/macros/MuiError.macro' + // Outputs: + // import { formatMuiErrorMessage } from '@material-ui/utils'; + formatMuiErrorMessageIdentifier = helperModuleImports.addNamed( + babelPath, + 'formatMuiErrorMessage', + '@material-ui/utils', + ); + } else { + const normalizedRelativeImport = path.normalize( + source.replace('../macros/MuiError.macro', './formatMuiErrorMessage'), + ); + // 'formatMuiErrorMessage' implies './formatMuiErrorMessage' for fs paths but not for import specifiers. + const formatMuiErrorMessageImportSource = normalizedRelativeImport.startsWith('.') + ? normalizedRelativeImport + : `./${normalizedRelativeImport}`; + // Input: import MuiError from '../macros/MuiError.macro' + // Outputs: + // import formatMuiErrorMessage from './formatMuiErrorMessage'; + formatMuiErrorMessageIdentifier = helperModuleImports.addDefault( + babelPath, + formatMuiErrorMessageImportSource, + { nameHint: 'formatMuiErrorMessage' }, + ); + } } // Outputs: diff --git a/packages/material-ui-utils/macros/MuiError.macro.test.js b/packages/material-ui-utils/macros/MuiError.macro.test.js index d5bdf637a533e8..e503820c75e6cb 100644 --- a/packages/material-ui-utils/macros/MuiError.macro.test.js +++ b/packages/material-ui-utils/macros/MuiError.macro.test.js @@ -95,5 +95,13 @@ pluginTester({ }, }, }, + { + title: 'relative-import', + pluginOptions: { + muiError: { errorCodesPath: path.join(fixturePath, 'relative-import', 'error-codes.json') }, + }, + fixture: path.join(fixturePath, 'relative-import', 'input.js'), + output: readOutputFixtureSync('relative-import', 'output.js'), + }, ], }); diff --git a/packages/material-ui-utils/macros/__fixtures__/relative-import/error-codes.json b/packages/material-ui-utils/macros/__fixtures__/relative-import/error-codes.json new file mode 100644 index 00000000000000..3fe90729b7efe7 --- /dev/null +++ b/packages/material-ui-utils/macros/__fixtures__/relative-import/error-codes.json @@ -0,0 +1,3 @@ +{ + "1": "Material-UI: Expected valid input target.\nDid you use `inputComponent`" +} diff --git a/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js b/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js new file mode 100644 index 00000000000000..b8727eb2e54546 --- /dev/null +++ b/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js @@ -0,0 +1,4 @@ +// eslint-disable-next-line import/no-useless-path-segments -- macro requirement +import MuiError from '../../../macros/MuiError.macro'; + +throw new MuiError('Material-UI: Expected valid input target.\n' + 'Did you use `inputComponent`'); diff --git a/packages/material-ui-utils/macros/__fixtures__/relative-import/output.js b/packages/material-ui-utils/macros/__fixtures__/relative-import/output.js new file mode 100644 index 00000000000000..b0e82ed1768e0e --- /dev/null +++ b/packages/material-ui-utils/macros/__fixtures__/relative-import/output.js @@ -0,0 +1,7 @@ +import _formatMuiErrorMessage from '../../formatMuiErrorMessage'; +throw new Error( + process.env.NODE_ENV !== 'production' + ? `Material-UI: Expected valid input target. +Did you use \`inputComponent\`` + : _formatMuiErrorMessage(1), +); diff --git a/packages/material-ui-utils/src/capitalize.ts b/packages/material-ui-utils/src/capitalize.ts index 4c21f6659441db..35f1ab3badd758 100644 --- a/packages/material-ui-utils/src/capitalize.ts +++ b/packages/material-ui-utils/src/capitalize.ts @@ -1,4 +1,3 @@ -// @ts-ignore import MuiError from '../macros/MuiError.macro'; // It should to be noted that this function isn't equivalent to `text-transform: capitalize`. // From bd907da7973a923cd6d372facafc1d0d2ef315c9 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 27 Oct 2020 14:50:56 +0100 Subject: [PATCH 2/2] Fix lint --- .eslintignore | 1 + .../macros/__fixtures__/relative-import/input.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintignore b/.eslintignore index edefeeeebadd18..8da77316e6795e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -18,6 +18,7 @@ /packages/material-ui-icons/legacy /packages/material-ui-icons/src /packages/material-ui-icons/templateSvgIcon.js +/packages/material-ui-utils/macros/__fixtures__/ # Ignore fixtures /packages/typescript-to-proptypes/test/*/* /tmp diff --git a/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js b/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js index b8727eb2e54546..492b6cb19cd307 100644 --- a/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js +++ b/packages/material-ui-utils/macros/__fixtures__/relative-import/input.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/no-useless-path-segments -- macro requirement import MuiError from '../../../macros/MuiError.macro'; throw new MuiError('Material-UI: Expected valid input target.\n' + 'Did you use `inputComponent`');