Skip to content

Commit

Permalink
[CCUBE-1554][MAHI]Update logic for media codemod to seperate mediawid…
Browse files Browse the repository at this point in the history 
…th import and clean up comments for scripts
  • Loading branch information
@mahidhar-reddy09
mahidhar-reddy09 committed Oct 1, 2024
1 parent 69a8047 commit 60b7022
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 32 deletions.
60 changes: 40 additions & 20 deletions codemods/migrate-media-query/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const MEMBER_EXPRESSION_PROPERTIES = {
};

const WARNINGS = {
DEPRECATED_USAGE: `\x1b[31mDeprecated usage detected: V2_MediaWidths is deprecated and needs adjustment.\x1b[0m`,
DEPRECATED_USAGE: `\x1b[31m[MIGRATION] V2_MediaWidths requires manual migration to Breakpoint. Refer to <"https://github.com/LifeSG/react-design-system/wiki/Migration-to-V3-(WIP)">. File:\x1b[0m`,
};

const IDENTIFIERS = {
Expand All @@ -33,10 +33,9 @@ export default function transformer(file: FileInfo, api: API) {
const j: JSCodeshift = api.jscodeshift;
const source = j(file.source);

let IS_MEDIA_QUERY_IMPORT_UPDATED = false;
let IS_V2_MEDIA_WIDTHS_USED = false;
let isMediaQueryImportUpdated = false;
let isV2MediaWidthsUsed = false;

// Process Import Declarations
source.find(j.ImportDeclaration).forEach((path) => {
const importPath = path.node.source.value;

Expand All @@ -45,12 +44,12 @@ export default function transformer(file: FileInfo, api: API) {
importPath === IMPORT_PATHS.DESIGN_SYSTEM
) {
const specifiers = path.node.specifiers;
let HAS_MEDIA_QUERY_SPECIFIER = false;
let hasMediaQuerySpecifier = false;

if (specifiers && specifiers.length > 0) {
specifiers.forEach((specifier) => {
if (j.ImportSpecifier.check(specifier)) {
// Handle V2_MediaQuery
// Change import path for V2_Media to updated V3 Media
if (
specifier.imported.name ===
IMPORT_SPECIFIERS.V2_MEDIA_QUERY
Expand All @@ -65,54 +64,76 @@ export default function transformer(file: FileInfo, api: API) {
specifier.local.name =
IMPORT_SPECIFIERS.MEDIA_QUERY;
}
HAS_MEDIA_QUERY_SPECIFIER = true;
hasMediaQuerySpecifier = true;
}

// Detect usage of V2_MediaWidths
if (
specifier.imported.name ===
IMPORT_SPECIFIERS.V2_MEDIA_WIDTHS
) {
IS_V2_MEDIA_WIDTHS_USED = true;
isV2MediaWidthsUsed = true;
}
}
});

// If MediaQuery was imported, set flag to update usages
if (HAS_MEDIA_QUERY_SPECIFIER) {
IS_MEDIA_QUERY_IMPORT_UPDATED = true;
if (hasMediaQuerySpecifier) {
isMediaQueryImportUpdated = true;
}
// Create seperate import for deprecated MediaWidths
if (hasMediaQuerySpecifier && isV2MediaWidthsUsed) {
path.node.specifiers = specifiers.filter((specifier) => {
if (j.ImportSpecifier.check(specifier)) {
return (
specifier.imported.name !==
IMPORT_SPECIFIERS.V2_MEDIA_WIDTHS
);
}
return true;
});
const newImportDeclaration = j.importDeclaration(
[
j.importSpecifier(
j.identifier(IMPORT_SPECIFIERS.V2_MEDIA_WIDTHS)
),
],
j.literal(IMPORT_PATHS.V2_MEDIA)
);

j(path).insertAfter(newImportDeclaration);
}

// Update import path if necessary
// Update import path
if (importPath === IMPORT_PATHS.V2_MEDIA) {
path.node.source.value = IMPORT_PATHS.THEME;
}
}
}
});

// Handle Deprecated V2_MediaWidths Usage
if (IS_V2_MEDIA_WIDTHS_USED) {
// Link to migration docs for V2_MediaWidths deprecation
if (isV2MediaWidthsUsed) {
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}`);
console.error(`${WARNINGS.DEPRECATED_USAGE} ${file.path}`);
}
}

// Update MediaQuery Imports and Usages
if (IS_MEDIA_QUERY_IMPORT_UPDATED) {
// Update MediaQuery usages
if (isMediaQueryImportUpdated) {
// Rename all instances of V2_MediaQuery to MediaQuery
source
.find(j.Identifier, { name: IMPORT_SPECIFIERS.V2_MEDIA_QUERY })
.forEach((path) => {
path.node.name = IMPORT_SPECIFIERS.MEDIA_QUERY;
});

// Update Member Expressions related to MediaQuery
// Map V2 Breakpoints of MediaQuery to V3
source.find(j.MemberExpression).forEach((path) => {
const object = path.node.object;
const property = path.node.property;
Expand All @@ -131,13 +152,12 @@ export default function transformer(file: FileInfo, api: API) {
const queryType = object.property.name;
const mediaKey = property.name;

// Check and replace mediaKey using mediaQueryMap
if (
mediaQueryMap[queryType] &&
mediaQueryMap[queryType][mediaKey]
) {
const NEW_MEDIA_KEY = mediaQueryMap[queryType][mediaKey];
property.name = NEW_MEDIA_KEY;
const newMediaKey = mediaQueryMap[queryType][mediaKey];
property.name = newMediaKey;
}
}
});
Expand Down
12 changes: 3 additions & 9 deletions codemods/migrate-text/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,41 +27,36 @@ export default function transformer(file: FileInfo, api: API) {

let isLifesgImport = false;

// Process Import Declarations
source.find(j.ImportDeclaration).forEach((path) => {
const importPath = path.node.source.value;

// Check if the import is from the target design system path
if (
importPath === IMPORT_PATHS.V2_TEXT ||
importPath === IMPORT_PATHS.DESIGN_SYSTEM
) {
// Iterate over each specifier in the import declaration
// Update V2 imports to V3 updated imports
path.node.specifiers?.forEach((specifier) => {
if (
j.ImportSpecifier.check(specifier) &&
specifier.imported.name === IMPORT_SPECIFIERS.V2_TEXT
) {
// Rename imported specifier from V2_Text to Typography
specifier.imported.name = IMPORT_SPECIFIERS.TYPOGRAPHY;

// Rename local specifier if it matches V2_Text
if (
specifier.local &&
specifier.local.name === IMPORT_SPECIFIERS.V2_TEXT
) {
specifier.local.name = IMPORT_SPECIFIERS.TYPOGRAPHY;
}

// Update the import path to the new typography module
path.node.source.value = IMPORT_PATHS.TYPOGRAPHY;
isLifesgImport = true;
}
});
}
});

// Helper Function to Replace Member Expressions
// Create updated Typography component
const replaceWithNewComponent = (path: any, newComponentValue: string) => {
path.replace(
j.memberExpression(
Expand All @@ -79,13 +74,12 @@ export default function transformer(file: FileInfo, api: API) {
path.node.name = JSX_IDENTIFIERS.TYPOGRAPHY;
});

// Update Member Expressions
// Map V2 Text component usage to respective V3 Typography component usage
source.find(j.MemberExpression).forEach((path) => {
let currentPath = path.node;
const propertyNameParts: string[] = [];
let startsWithTypography = false;

// Traverse the member expression to collect property names
while (j.MemberExpression.check(currentPath)) {
const property = currentPath.property;
const object = currentPath.object;
Expand Down
4 changes: 3 additions & 1 deletion tests/codemod/migrate-media-query/test-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ const StyledContainer = styled.div<StyleProps>\`
`;

export const expectedOutputCode = `
import { MediaQuery, V2_MediaWidths } from "@lifesg/react-design-system/theme";
import { MediaQuery } from "@lifesg/react-design-system/theme";
import { V2_MediaWidths } from "@lifesg/react-design-system/v2_media";
const StyledContainer = styled.div<StyleProps>\`
flex-grow: 1;
Expand Down
4 changes: 2 additions & 2 deletions tests/codemod/migrate-media-query/transformer.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as fs from "fs";
import * as path from "path";
import { expectedOutputCode, inputCode } from "./test-data";

describe("Codemod Transformer for V2_Layout to Layout", () => {
describe("Codemod Transformer for V2_MediaQuery to MediaQuery", () => {
const inputPath = path.join(__dirname, "input.tsx");
const outputPath = path.join(__dirname, "output.tsx");

Expand All @@ -19,7 +19,7 @@ describe("Codemod Transformer for V2_Layout to Layout", () => {
fs.unlinkSync(outputPath);
});

it("should transform V2_Layout components to Layout components and map props correctly", () => {
it("should transform V2_MediaQuery to MediaQuery and map the breakpoints correctly", () => {
fs.copyFileSync(inputPath, outputPath);

// Execute the jscodeshift command for the codemod
Expand Down

0 comments on commit 60b7022

Please sign in to comment.