From bda0aec57ef479a86df6786f945f18e89dcd1728 Mon Sep 17 00:00:00 2001 From: kyledurand Date: Fri, 25 Aug 2023 14:15:56 -0400 Subject: [PATCH] feat: allow prop value changes in prop migration --- .changeset/breezy-badgers-bow.md | 5 +++++ ...-component-prop-with-specific-value.input.tsx | 16 ++++++++++++++++ ...component-prop-with-specific-value.output.tsx | 16 ++++++++++++++++ .../tests/transform.test.ts | 16 +++++++++++++--- .../react-rename-component-prop/transform.ts | 13 ++++--------- polaris-migrator/src/utilities/jsx.ts | 13 ++++++++----- 6 files changed, 62 insertions(+), 17 deletions(-) create mode 100644 .changeset/breezy-badgers-bow.md create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx diff --git a/.changeset/breezy-badgers-bow.md b/.changeset/breezy-badgers-bow.md new file mode 100644 index 00000000000..57392e767f3 --- /dev/null +++ b/.changeset/breezy-badgers-bow.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': minor +--- + +Added the ability to migrate prop values diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx new file mode 100644 index 00000000000..cab4daf08c6 --- /dev/null +++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +declare function MyComponent(props: any): JSX.Element; + +export function App() { + return ( + <> + + Hello world + + + Hello world + + + ); +} diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx new file mode 100644 index 00000000000..2dabc875afe --- /dev/null +++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +declare function MyComponent(props: any): JSX.Element; + +export function App() { + return ( + <> + + Hello world + + + Hello world + + + ); +} diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts index 551f612f473..928a361c89b 100644 --- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts +++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts @@ -16,7 +16,7 @@ const fixtures = [ componentName: 'MyComponent', from: 'prop', to: 'newProp', - newValue: 'new-value', + toValue: 'new-value', }, }, { @@ -25,7 +25,7 @@ const fixtures = [ componentName: 'MyComponent.CompoundComponent', from: 'prop', to: 'newProp', - newValue: 'new-value', + toValue: 'new-value', }, }, { @@ -34,7 +34,17 @@ const fixtures = [ componentName: 'MyComponent', from: 'booleanProp', to: 'variant', - newValue: 'boolean-prop-value', + toValue: 'boolean-prop-value', + }, + }, + { + name: 'react-rename-component-prop-with-specific-value', + options: { + componentName: 'MyComponent', + from: 'prop', + to: 'variant', + fromValue: 'targetted-value', + toValue: 'new-targetted-value', }, }, ]; diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts index 3011ce3c3de..aa2508035c6 100644 --- a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts +++ b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts @@ -8,22 +8,17 @@ export default function transformer( options: Options, ) { const componentParts = options.componentName?.split('.'); - if ( - !options.componentName || - !options.from || - !options.to || - componentParts?.length > 2 - ) { + const {componentName, from, to, fromValue, toValue} = options; + if (!componentName || !from || !to || componentParts?.length > 2) { throw new Error( 'Missing required options: componentName, from, to, or your compound component exceeds 2 levels', ); } const source = j(file.source); - const componentName = options.componentName; - const props = {[options.from]: options.to}; + const props = {[from]: to}; - renameProps(j, source, componentName, props, options.newValue); + renameProps(j, source, componentName, props, fromValue, toValue); return source.toSource(); } diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts index a46c9e608c0..a63ab4dc6e9 100644 --- a/polaris-migrator/src/utilities/jsx.ts +++ b/polaris-migrator/src/utilities/jsx.ts @@ -127,7 +127,8 @@ export function renameProps( source: Collection, componentName: string, props: {[from: string]: string}, - newValue?: string, + fromValue?: string, + toValue?: string, ) { const [component, subcomponent] = componentName.split('.'); @@ -141,7 +142,7 @@ export function renameProps( element.node.openingElement.name.property.name === subcomponent ) { element.node.openingElement.attributes?.forEach((node) => - updateNode(node, props, newValue), + updateNode(node, props, fromValue, toValue), ); } }); @@ -151,7 +152,7 @@ export function renameProps( // Handle basic components source.findJSXElements(componentName)?.forEach((element) => { element.node.openingElement.attributes?.forEach((node) => - updateNode(node, props, newValue), + updateNode(node, props, fromValue, toValue), ); }); @@ -160,7 +161,8 @@ export function renameProps( function updateNode( node: any, props: {[from: string]: string}, - newValue?: string, + fromValue?: string, + toValue?: string, ) { const isFromProp = (prop: unknown): prop is keyof typeof props => Object.keys(props).includes(prop as string); @@ -170,7 +172,8 @@ export function renameProps( } node.name.name = props[node.name.name]; - node.value = j.stringLiteral(newValue ?? node.value.value); + if (fromValue && node.value.value !== fromValue) return node; + node.value = j.stringLiteral(toValue ?? node.value.value); return node; } }