Skip to content

Commit

Permalink
refactor: improve performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@snitin315
snitin315 committed Jan 18, 2024
1 parent 98395cf commit 1e9a703
Show file tree
Hide file tree
Showing 9 changed files with 271 additions and 134 deletions.
54 changes: 37 additions & 17 deletions packages/blade/codemods/brand-refresh/transformers/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,22 @@ const transformer: Transform = (file, api, options) => {
// Update the themeTokens prop in BladeProvider
try {
root
.find(j.JSXElement)
.filter((path) => path.value.openingElement.name.name === 'BladeProvider')
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'themeTokens')
.replaceWith((path) => {
path.node.value.expression.name = 'bladeTheme';
.find(j.JSXElement, {
openingElement: {
name: {
name: 'BladeProvider',
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'themeTokens',
},
})
.replaceWith(({ node }) => {
node.value.expression.name = 'bladeTheme';

return path.node;
return node;
});
} catch (error) {

Check warning on line 112 in packages/blade/codemods/brand-refresh/transformers/index.ts

View workflow job for this annotation

GitHub Actions / Validate Source Code 

Implicit any in catch clause
console.error(
Expand All @@ -113,13 +121,19 @@ const transformer: Transform = (file, api, options) => {
// Update color token value based on the context
try {
root
.find(j.JSXElement)
.filter((path) =>
/(Text|Title|Code|Display|Heading|Box|Icon)/i.test(path.value.openingElement.name.name),
)
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) => /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(name),
},
},
})
// Find all color props
.find(j.JSXAttribute)
.filter((path) => path.node.name.name.toLowerCase().includes('color'))
.find(j.JSXAttribute, {
name: {
name: (name) => name.toLowerCase().includes('color'),
},
})
.replaceWith((path) => {
const { node, parent } = path;

Expand Down Expand Up @@ -180,10 +194,16 @@ const transformer: Transform = (file, api, options) => {
// Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme"
try {
root
.find(j.ImportDeclaration)
.filter((path) => /@razorpay\/blade\/tokens/i.test(path.value.source.value as string))
.find(j.ImportSpecifier)
.filter((path) => ['paymentTheme', 'bankingTheme'].includes(path.value.imported.name))
.find(j.ImportDeclaration, {
source: {
value: '@razorpay/blade/tokens',
},
})
.find(j.ImportSpecifier, {
imported: {
name: (name) => ['paymentTheme', 'bankingTheme'].includes(name),
},
})
.replaceWith((path) => {
path.value.imported.name = 'bladeTheme';

Expand Down
16 changes: 12 additions & 4 deletions packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,18 @@ function migrateActionListComponent({ root, j, file }): void {
// <Table surfaceLevel={2}> -> <Table >
try {
root
.find(j.JSXElement)
.filter((path) => path.value.openingElement.name.name === 'ActionList')
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'surfaceLevel')
.find(j.JSXElement, {
openingElement: {
name: {
name: 'ActionList',
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'surfaceLevel',
},
})
.remove();
} catch (error) {

Check warning on line 22 in packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts

View workflow job for this annotation

GitHub Actions / Validate Source Code 

Implicit any in catch clause
console.error(
Expand Down
11 changes: 7 additions & 4 deletions packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ import { red, isExpression } from './utils';
function migrateAmountComponent({ root, j, file }): void {
try {
root
.find(j.JSXElement)
.filter((path) =>
['Amount', 'CardHeaderAmount'].includes(path.value.openingElement.name.name),
)
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
},
},
})
.replaceWith((path) => {
const { node } = path;

Expand Down
20 changes: 12 additions & 8 deletions packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ import { red } from './utils';
function migrateBadgeComponent({ root, j, file }): void {
try {
root
.find(j.JSXElement)
.filter(
(path) =>
path.value.openingElement.name.name === 'Badge' ||
path.value.openingElement.name.name === 'CardHeaderBadge',
)
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'fontWeight')
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) => ['Badge', 'CardHeaderBadge'].includes(name),
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'fontWeight',
},
})
.remove();
} catch (error) {

Check warning on line 20 in packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts

View workflow job for this annotation

GitHub Actions / Validate Source Code 

Implicit any in catch clause
console.error(
Expand Down
16 changes: 12 additions & 4 deletions packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,18 @@ import { red } from './utils';
function migrateCardAndTable({ root, j, file }): void {
try {
root
.find(j.JSXElement)
.filter((path) => ['Card', 'Table'].includes(path.value.openingElement.name.name))
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'surfaceLevel')
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) => ['Card', 'Table'].includes(name),
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'surfaceLevel',
},
})
.replaceWith((path) => {
const { node } = path;

Expand Down
174 changes: 109 additions & 65 deletions packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
// Break `contrast="high"` prop from Typography & ProgressBar Components
try {
root
.find(j.JSXElement)
.filter((path) =>
['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
path.value.openingElement.name.name,
),
)
.find(j.JSXAttribute) // Find all props
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) =>
['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
name,
),
},
},
})
.find(j.JSXAttribute)
.filter(
(path, index, self) =>
['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
Expand All @@ -36,19 +40,26 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
// Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis`
try {
root
.find(j.JSXElement)
.filter((path) =>
[
'Badge',
'Counter',
'IconButton',
'Alert',
'CardHeaderBadge',
'CardHeaderCounter',
].includes(path.value.openingElement.name.name),
)
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'contrast')
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) =>
[
'Badge',
'Counter',
'IconButton',
'Alert',
'CardHeaderBadge',
'CardHeaderCounter',
].includes(name),
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'contrast',
},
})
.replaceWith((path) => {
path.node.name.name = 'emphasis';

Expand Down Expand Up @@ -89,10 +100,18 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
// <Spinner contrast="low|high" /> -> <Spinner color="primary|white" />
try {
root
.find(j.JSXElement)
.filter((path) => path.value.openingElement.name.name === 'Spinner')
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'contrast')
.find(j.JSXElement, {
openingElement: {
name: {
name: 'Spinner',
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'contrast',
},
})
.replaceWith((path) => {
path.node.name.name = 'color';

Expand All @@ -117,10 +136,18 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
// Remove 'contrast' prop from the Skeleton Component
try {
root
.find(j.JSXElement)
.filter((path) => path.value.openingElement.name.name === 'Skeleton')
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'contrast')
.find(j.JSXElement, {
openingElement: {
name: {
name: 'Skeleton',
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'contrast',
},
})
.remove();
} catch (error) {
console.error(
Expand All @@ -134,22 +161,26 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
// Remove deprecated 'intent'/'variant' props in favor of color
try {
root
.find(j.JSXElement)
.filter((path) =>
[
'Alert',
'Badge',
'Counter',
'Chip',
'ChipGroup',
'Indicator',
'ProgressBar',
'Amount',
'CardHeaderBadge',
'CardHeaderCounter',
'CardHeaderAmount',
].includes(path.value.openingElement.name.name),
)
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) =>
[
'Alert',
'Badge',
'Counter',
'Chip',
'ChipGroup',
'Indicator',
'ProgressBar',
'Amount',
'CardHeaderBadge',
'CardHeaderCounter',
'CardHeaderAmount',
].includes(name),
},
},
})
.replaceWith((path) => {
const { node } = path;

Expand Down Expand Up @@ -194,11 +225,14 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {

return node;
})
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'intent' || path.node.name.name === 'variant')
.find(j.JSXAttribute, {
name: {
name: (name) => name === 'intent' || name === 'variant',
},
})
// Remove duplicate intent/variant props
.filter(
(path, index, self) =>
(path.node.name.name === 'intent' || path.node.name.name === 'variant') &&
index === self.findIndex((obj) => path.node.start === obj.node.start),
)
.replaceWith((path) => {
Expand All @@ -222,24 +256,34 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void {
// <Button variant="secondary" color="default"> -> <Button variant="secondary" color="primary">
try {
root
.find(j.JSXElement)
.filter((path) =>
[
'Button',
'Link',
'Badge',
'Counter',
'Chip',
'ChipGroup',
'CardHeaderBadge',
'CardHeaderCounter',
'CardHeaderIconButton',
'CardHeaderLink',
'Spinner',
].includes(path.value.openingElement.name.name),
)
.find(j.JSXAttribute)
.filter((path) => path.node.name.name === 'color' && path.node.value.value === 'default')
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) =>
[
'Button',
'Link',
'Badge',
'Counter',
'Chip',
'ChipGroup',
'CardHeaderBadge',
'CardHeaderCounter',
'CardHeaderIconButton',
'CardHeaderLink',
'Spinner',
].includes(name),
},
},
})
.find(j.JSXAttribute, {
name: {
name: 'color',
},
value: {
value: 'default',
},
})
.replaceWith((path) => {
path.node.value.value = 'primary';

Expand Down
Loading

0 comments on commit 1e9a703

Please sign in to comment.