From 69a80477d0c610bcbd1311e5959e00b695bb571b Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 27 Sep 2024 18:28:58 +0800 Subject: [PATCH] [CCUBE-1554][MAHI]Fix naming convention and refactor logic for migrate-media --- codemods/migrate-media-query/index.ts | 119 ++++++++++++++------------ codemods/migrate-text/index.ts | 50 ++++++----- 2 files changed, 93 insertions(+), 76 deletions(-) diff --git a/codemods/migrate-media-query/index.ts b/codemods/migrate-media-query/index.ts index e56910c7e..d5febb793 100644 --- a/codemods/migrate-media-query/index.ts +++ b/codemods/migrate-media-query/index.ts @@ -2,105 +2,114 @@ import { API, FileInfo, JSCodeshift } from "jscodeshift"; import { mediaQueryMap } from "./data"; // ======= Constants ======= // -// Import Paths -const importPathV2Media = "@lifesg/react-design-system/v2_media"; -const importPathDesignSystem = "@lifesg/react-design-system"; -const importPathTheme = "@lifesg/react-design-system/theme"; -// Import Specifiers -const specifierV2MediaQuery = "V2_MediaQuery"; -const specifierMediaQuery = "MediaQuery"; -const specifierV2MediaWidths = "V2_MediaWidths"; +const IMPORT_PATHS = { + V2_MEDIA: "@lifesg/react-design-system/v2_media", + DESIGN_SYSTEM: "@lifesg/react-design-system", + THEME: "@lifesg/react-design-system/theme", +}; -// Member Expression Properties -const memberExpMaxWidth = "MaxWidth"; -const memberExpMinWidth = "MinWidth"; +const IMPORT_SPECIFIERS = { + V2_MEDIA_QUERY: "V2_MediaQuery", + MEDIA_QUERY: "MediaQuery", + V2_MEDIA_WIDTHS: "V2_MediaWidths", +}; -// Deprecated Warning -const deprecatedUsageWarning = `\x1b[31mDeprecated usage detected: V2_MediaWidths is deprecated and needs adjustment.\x1b[0m`; +const MEMBER_EXPRESSION_PROPERTIES = { + MAX_WIDTH: "MaxWidth", + MIN_WIDTH: "MinWidth", +}; -// Identifier Names -const identifierMediaQuery = "MediaQuery"; +const WARNINGS = { + DEPRECATED_USAGE: `\x1b[31mDeprecated usage detected: V2_MediaWidths is deprecated and needs adjustment.\x1b[0m`, +}; + +const IDENTIFIERS = { + MEDIA_QUERY: "MediaQuery", +}; // ======= Transformer Function ======= // export default function transformer(file: FileInfo, api: API) { const j: JSCodeshift = api.jscodeshift; const source = j(file.source); - let isMediaQueryImportUpdated = false; - let isV2MediaWidthsUsed = false; + let IS_MEDIA_QUERY_IMPORT_UPDATED = false; + let IS_V2_MEDIA_WIDTHS_USED = false; - // Change Import Declarations + // Process Import Declarations source.find(j.ImportDeclaration).forEach((path) => { const importPath = path.node.source.value; if ( - importPath === importPathV2Media || - importPath === importPathDesignSystem + importPath === IMPORT_PATHS.V2_MEDIA || + importPath === IMPORT_PATHS.DESIGN_SYSTEM ) { const specifiers = path.node.specifiers; - let hasMediaQuerySpecifier = false; + let HAS_MEDIA_QUERY_SPECIFIER = false; if (specifiers && specifiers.length > 0) { specifiers.forEach((specifier) => { if (j.ImportSpecifier.check(specifier)) { // Handle V2_MediaQuery - if (specifier.imported.name === specifierV2MediaQuery) { - specifier.imported.name = specifierMediaQuery; + if ( + specifier.imported.name === + IMPORT_SPECIFIERS.V2_MEDIA_QUERY + ) { + specifier.imported.name = + IMPORT_SPECIFIERS.MEDIA_QUERY; if ( specifier.local && - specifier.local.name === specifierV2MediaQuery + specifier.local.name === + IMPORT_SPECIFIERS.V2_MEDIA_QUERY ) { - specifier.local.name = specifierMediaQuery; + specifier.local.name = + IMPORT_SPECIFIERS.MEDIA_QUERY; } - hasMediaQuerySpecifier = true; + HAS_MEDIA_QUERY_SPECIFIER = true; } // Detect usage of V2_MediaWidths if ( - specifier.imported.name === specifierV2MediaWidths + specifier.imported.name === + IMPORT_SPECIFIERS.V2_MEDIA_WIDTHS ) { - isV2MediaWidthsUsed = true; + IS_V2_MEDIA_WIDTHS_USED = true; } } }); // If MediaQuery was imported, set flag to update usages - if (hasMediaQuerySpecifier) { - isMediaQueryImportUpdated = true; + if (HAS_MEDIA_QUERY_SPECIFIER) { + IS_MEDIA_QUERY_IMPORT_UPDATED = true; } - // Update import path - if (importPath === importPathV2Media) { - path.node.source.value = importPathTheme; + // Update import path if necessary + if (importPath === IMPORT_PATHS.V2_MEDIA) { + path.node.source.value = IMPORT_PATHS.THEME; } } } }); // Handle Deprecated V2_MediaWidths Usage - if (isV2MediaWidthsUsed) { - let hasLoggedV2MediaWidthsWarning = false; - - source - .find(j.Identifier, { name: specifierV2MediaWidths }) - .forEach((path) => { - if (!hasLoggedV2MediaWidthsWarning) { - console.error( - `File: ${file.path}\n${deprecatedUsageWarning}` - ); - hasLoggedV2MediaWidthsWarning = true; - } - }); + if (IS_V2_MEDIA_WIDTHS_USED) { + const hasV2MediaWidths = + source.find(j.Identifier, { + name: IMPORT_SPECIFIERS.V2_MEDIA_WIDTHS, + }).length > 0; + + if (hasV2MediaWidths) { + console.error(`File: ${file.path}\n${WARNINGS.DEPRECATED_USAGE}`); + } } // Update MediaQuery Imports and Usages - if (isMediaQueryImportUpdated) { + if (IS_MEDIA_QUERY_IMPORT_UPDATED) { // Rename all instances of V2_MediaQuery to MediaQuery source - .find(j.Identifier, { name: specifierV2MediaQuery }) + .find(j.Identifier, { name: IMPORT_SPECIFIERS.V2_MEDIA_QUERY }) .forEach((path) => { - path.node.name = specifierMediaQuery; + path.node.name = IMPORT_SPECIFIERS.MEDIA_QUERY; }); // Update Member Expressions related to MediaQuery @@ -111,10 +120,12 @@ export default function transformer(file: FileInfo, api: API) { if ( j.MemberExpression.check(object) && j.Identifier.check(object.object) && - object.object.name === identifierMediaQuery && + object.object.name === IDENTIFIERS.MEDIA_QUERY && j.Identifier.check(object.property) && - (object.property.name === memberExpMaxWidth || - object.property.name === memberExpMinWidth) && + (object.property.name === + MEMBER_EXPRESSION_PROPERTIES.MAX_WIDTH || + object.property.name === + MEMBER_EXPRESSION_PROPERTIES.MIN_WIDTH) && j.Identifier.check(property) ) { const queryType = object.property.name; @@ -125,8 +136,8 @@ export default function transformer(file: FileInfo, api: API) { mediaQueryMap[queryType] && mediaQueryMap[queryType][mediaKey] ) { - const newMediaKey = mediaQueryMap[queryType][mediaKey]; - property.name = newMediaKey; + const NEW_MEDIA_KEY = mediaQueryMap[queryType][mediaKey]; + property.name = NEW_MEDIA_KEY; } } }); diff --git a/codemods/migrate-text/index.ts b/codemods/migrate-text/index.ts index 9a8250ab7..f5430b27e 100644 --- a/codemods/migrate-text/index.ts +++ b/codemods/migrate-text/index.ts @@ -3,18 +3,21 @@ import { textComponentMap } from "./data"; // ======= Constants ======= // -// Import Paths -const importPathV2Text = "@lifesg/react-design-system/v2_text"; -const importPathLib = "@lifesg/react-design-system"; -const importPathTypography = "@lifesg/react-design-system/typography"; - -// Import Specifiers -const specifierV2Text = "V2_Text"; -const specifierTypography = "Typography"; - -// JSX Identifiers -const jsxIdentifierV2Text = "V2_Text"; -const jsxIdentifierTypography = "Typography"; +const IMPORT_PATHS = { + V2_TEXT: "@lifesg/react-design-system/v2_text", + DESIGN_SYSTEM: "@lifesg/react-design-system", + TYPOGRAPHY: "@lifesg/react-design-system/typography", +}; + +const IMPORT_SPECIFIERS = { + V2_TEXT: "V2_Text", + TYPOGRAPHY: "Typography", +}; + +const JSX_IDENTIFIERS = { + V2_TEXT: "V2_Text", + TYPOGRAPHY: "Typography", +}; // ======= Transformer Function ======= // @@ -29,26 +32,29 @@ export default function transformer(file: FileInfo, api: API) { const importPath = path.node.source.value; // Check if the import is from the target design system path - if (importPath === importPathV2Text || importPath === importPathLib) { + if ( + importPath === IMPORT_PATHS.V2_TEXT || + importPath === IMPORT_PATHS.DESIGN_SYSTEM + ) { // Iterate over each specifier in the import declaration path.node.specifiers?.forEach((specifier) => { if ( j.ImportSpecifier.check(specifier) && - specifier.imported.name === specifierV2Text + specifier.imported.name === IMPORT_SPECIFIERS.V2_TEXT ) { // Rename imported specifier from V2_Text to Typography - specifier.imported.name = specifierTypography; + specifier.imported.name = IMPORT_SPECIFIERS.TYPOGRAPHY; // Rename local specifier if it matches V2_Text if ( specifier.local && - specifier.local.name === specifierV2Text + specifier.local.name === IMPORT_SPECIFIERS.V2_TEXT ) { - specifier.local.name = specifierTypography; + specifier.local.name = IMPORT_SPECIFIERS.TYPOGRAPHY; } // Update the import path to the new typography module - path.node.source.value = importPathTypography; + path.node.source.value = IMPORT_PATHS.TYPOGRAPHY; isLifesgImport = true; } }); @@ -59,7 +65,7 @@ export default function transformer(file: FileInfo, api: API) { const replaceWithNewComponent = (path: any, newComponentValue: string) => { path.replace( j.memberExpression( - j.identifier(jsxIdentifierTypography), + j.identifier(JSX_IDENTIFIERS.TYPOGRAPHY), j.identifier(newComponentValue) ) ); @@ -68,9 +74,9 @@ export default function transformer(file: FileInfo, api: API) { if (isLifesgImport) { // Rename Identifiers from V2_Text to Typography source - .find(j.Identifier, { name: jsxIdentifierV2Text }) + .find(j.Identifier, { name: JSX_IDENTIFIERS.V2_TEXT }) .forEach((path) => { - path.node.name = jsxIdentifierTypography; + path.node.name = JSX_IDENTIFIERS.TYPOGRAPHY; }); // Update Member Expressions @@ -91,7 +97,7 @@ export default function transformer(file: FileInfo, api: API) { if (j.MemberExpression.check(object)) { currentPath = object; } else if (j.Identifier.check(object)) { - if (object.name === jsxIdentifierTypography) { + if (object.name === JSX_IDENTIFIERS.TYPOGRAPHY) { startsWithTypography = true; } break;