@mui/codemod 6.0.0-alpha.8 → 6.0.0-beta.0

package/node/util/migrateToVariants.js

@@ -4,87 +4,173 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = migrateToVariants;
+exports.getCreateBuildStyle = exports.getBuildArrowFunctionAST = exports.getAppendPaletteModeStyles = void 0;
+exports.getIdentifierKey = getIdentifierKey;
+exports.getObjectKey = getObjectKey;
+exports.getObjectToArrowFunction = void 0;
+exports.isThemePaletteMode = isThemePaletteMode;
+exports.removeProperty = removeProperty;
 const MAX_DEPTH = 20;
+
 /**
- *
  * @param {import('jscodeshift').API['j']} j
- * @param {any[]} styles
+ * @returns
  */
-function migrateToVariants(j, styles) {
-  function createBuildStyle(key, upperBuildStyle, applyStylesMode) {
-    if (applyStylesMode) {
-      upperBuildStyle = styleExpression => j.objectExpression([j.spreadElement(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [j.stringLiteral(applyStylesMode), styleExpression]))]);
-    }
-    return function buildStyle(styleExpression) {
-      if (key) {
-        if (key.type === 'Identifier' || key.type === 'StringLiteral') {
-          return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
-        }
-        if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
-          return upperBuildStyle(j.objectExpression([{
-            ...j.objectProperty(key, styleExpression),
-            computed: true
-          }]));
-        }
+const getCreateBuildStyle = j => function createBuildStyle(key, upperBuildStyle, applyStylesMode) {
+  if (applyStylesMode) {
+    upperBuildStyle = styleExpression => j.objectExpression([j.spreadElement(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [j.stringLiteral(applyStylesMode), styleExpression]))]);
+  }
+  return function buildStyle(styleExpression) {
+    if (key) {
+      if (key.type === 'Identifier' || key.type === 'StringLiteral') {
+        return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
       }
-      return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
-    };
+      if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
+        return upperBuildStyle(j.objectExpression([{
+          ...j.objectProperty(key, styleExpression),
+          computed: true
+        }]));
+      }
+    }
+    return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
+  };
+};
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+exports.getCreateBuildStyle = getCreateBuildStyle;
+const getAppendPaletteModeStyles = j =>
+/**
+ *
+ * @param {{ properties: any[] }} node
+ * @param {Record<string, any[] | import('jscodeshift').ObjectExpression>} modeStyles
+ */
+function appendPaletteModeStyles(node, modeStyles) {
+  Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+    node.properties.push(j.spreadElement(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [j.stringLiteral(mode), Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles])));
+  });
+};
+
+/**
+ *
+ * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+exports.getAppendPaletteModeStyles = getAppendPaletteModeStyles;
+function getIdentifierKey(node) {
+  if (node.type === 'MemberExpression') {
+    return node.property;
   }
+  return node;
+}
 
-  /**
-   *
-   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getIdentifierKey(node) {
-    if (node.type === 'MemberExpression') {
-      return node.property;
-    }
-    return node;
+/**
+ *
+ * @param {import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+function getObjectKey(node) {
+  let tempNode = {
+    ...node
+  };
+  while (tempNode.type === 'UnaryExpression') {
+    tempNode = tempNode.argument;
   }
+  while (tempNode.type === 'MemberExpression' || tempNode.type === 'OptionMemberExpression') {
+    tempNode = tempNode.object;
+  }
+  return tempNode;
+}
 
-  /**
-   *
-   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getObjectKey(node) {
-    let tempNode = {
-      ...node
-    };
-    while (tempNode.type === 'UnaryExpression') {
-      tempNode = tempNode.argument;
-    }
-    while (tempNode.type === 'MemberExpression') {
-      tempNode = tempNode.object;
+/**
+ *
+ * @param {import('jscodeshift').ObjectExpression} node
+ */
+function removeProperty(parentNode, child) {
+  if (parentNode) {
+    if (parentNode.type === 'ObjectExpression') {
+      parentNode.properties = parentNode.properties.filter(prop => prop !== child && prop.value !== child);
     }
-    return tempNode;
   }
+}
 
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
-   * @param {import('ast-types').namedTypes.BinaryExpression} addtional
-   */
-  function objectToArrowFunction(objectExpression, addtional) {
-    const paramKeys = new Set();
-    let left;
-    objectExpression.properties.forEach((prop, index) => {
-      paramKeys.add(prop.key.name);
-      const result = j.binaryExpression('===', prop.key, prop.value);
-      if (index === 0) {
-        left = result;
-      } else {
-        left = j.logicalExpression('&&', left, result);
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+const getBuildArrowFunctionAST = j =>
+/**
+ *
+ * @param {Set<string> | import('jscodeshift').Expression[]} params
+ * @param {import('jscodeshift').BlockStatement} body
+ * @returns
+ */
+function buildArrowFunctionAST(params, body) {
+  const destructured = [...params].every(param => typeof param === 'string');
+  return j.arrowFunctionExpression(destructured ? [j.objectPattern([...params].map(k => ({
+    ...j.objectProperty(j.identifier(k), j.identifier(k)),
+    shorthand: true
+  })))] : params, body);
+};
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+exports.getBuildArrowFunctionAST = getBuildArrowFunctionAST;
+const getObjectToArrowFunction = j => {
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+  return (
+    /**
+     *
+     * @param {import('jscodeshift').ObjectExpression} objectExpression
+     * @param {import('jscodeshift').BinaryExpression} addtional
+     */
+    function objectToArrowFunction(objectExpression, addtional) {
+      const paramKeys = new Set();
+      let left;
+      objectExpression.properties.forEach((prop, index) => {
+        paramKeys.add(prop.key.name);
+        const result = j.binaryExpression('===', prop.key, prop.value);
+        if (index === 0) {
+          left = result;
+        } else {
+          left = j.logicalExpression('&&', left, result);
+        }
+      });
+      if (addtional) {
+        paramKeys.add(getObjectKey(addtional.left).name);
       }
-    });
-    if (addtional) {
-      paramKeys.add(getObjectKey(addtional.left).name);
+      return buildArrowFunctionAST(paramKeys, addtional ? j.logicalExpression('&&', left, addtional) : left);
     }
-    return buildArrowFunctionAST(paramKeys, addtional ? j.logicalExpression('&&', left, addtional) : left);
-  }
+  );
+};
+
+/**
+ *
+ * @param {undefined | null | import('jscodeshift').Expression} node
+ */
+exports.getObjectToArrowFunction = getObjectToArrowFunction;
+function isThemePaletteMode(node) {
+  return (node == null ? void 0 : node.type) === 'MemberExpression' && node.object.type === 'MemberExpression' && node.object.object.name === 'theme' && node.object.property.name === 'palette' && node.property.name === 'mode';
+}
+
+/**
+ *
+ * @param {import('jscodeshift').API['j']} j
+ * @param {any[]} styles
+ */
+function migrateToVariants(j, styles) {
+  const createBuildStyle = getCreateBuildStyle(j);
+  const appendPaletteModeStyles = getAppendPaletteModeStyles(j);
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+  const objectToArrowFunction = getObjectToArrowFunction(j);
+
+  /**
+   * A map of used variable with its original name
+   */
+  const parameterMap = {};
 
   /**
    *
-   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   * @param {import('jscodeshift').Identifier | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
    */
   function inverseBinaryExpression(node) {
     if (node.type === 'Identifier' || node.type === 'MemberExpression') {
@@ -111,18 +197,6 @@ function migrateToVariants(j, styles) {
     }
     return node;
   }
-
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} node
-   */
-  function removeProperty(parentNode, child) {
-    if (parentNode) {
-      if (parentNode.type === 'ObjectExpression') {
-        parentNode.properties = parentNode.properties.filter(prop => prop !== child && prop.value !== child);
-      }
-    }
-  }
   function buildObjectAST(jsObject) {
     const result = j.objectExpression([]);
     Object.entries(jsObject).forEach(([key, value]) => {
@@ -130,27 +204,25 @@ function migrateToVariants(j, styles) {
     });
     return result;
   }
-  function buildArrowFunctionAST(params, body) {
-    return j.arrowFunctionExpression([j.objectPattern([...params].map(k => ({
-      ...j.objectProperty(j.identifier(k), j.identifier(k)),
-      shorthand: true
-    })))], body);
-  }
-
-  /**
-   *
-   * @param {{ properties: any[] }} node
-   * @param {Record<string, any[] | import('ast-types').namedTypes.ObjectExpression>} modeStyles
-   */
-  function appendPaletteModeStyles(node, modeStyles) {
-    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
-      node.properties.push(j.spreadElement(j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [j.stringLiteral(mode), Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles])));
-    });
+  function resolveParamName(name) {
+    if (typeof name !== 'string') {
+      if (name.type === 'Identifier' && parameterMap[name.name]) {
+        if (parameterMap[name.name].includes('-')) {
+          return j.stringLiteral(parameterMap[name.name]);
+        }
+        return {
+          ...name,
+          name: parameterMap[name.name]
+        };
+      }
+      return name;
+    }
+    return parameterMap[name] || name;
   }
 
   /**
    *
-   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   * @param {import('jscodeshift').LogicalExpression | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
    */
   function buildProps(node) {
     const properties = [];
@@ -161,25 +233,25 @@ function migrateToVariants(j, styles) {
     };
     function assignProperties(_node) {
       if (_node.type === 'BinaryExpression') {
-        variables.add(getObjectKey(_node.left).name);
+        variables.add(resolveParamName(getObjectKey(_node.left).name));
         if (_node.operator === '===') {
-          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
+          properties.push(j.objectProperty(resolveParamName(getIdentifierKey(_node.left)), _node.right));
         } else {
           isAllEqual = false;
         }
       }
       if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
         isAllEqual = false;
-        variables.add(getObjectKey(_node).name);
+        variables.add(resolveParamName(getObjectKey(_node).name));
       }
       if (_node.type === 'UnaryExpression') {
         isAllEqual = false;
         if (_node.argument.type === 'UnaryExpression') {
           // handle `!!variable`
-          variables.add(getObjectKey(_node.argument.argument).name);
+          variables.add(resolveParamName(getObjectKey(_node.argument.argument).name));
         } else {
           // handle `!variable`
-          variables.add(getObjectKey(_node.argument).name);
+          variables.add(resolveParamName(getObjectKey(_node.argument).name));
         }
       }
     }
@@ -215,13 +287,10 @@ function migrateToVariants(j, styles) {
     const currentArrow = currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
     const variables = new Set();
     [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach(param => {
-      variables.add(param.key.name);
+      variables.add(resolveParamName(param.key.name));
     });
     return buildArrowFunctionAST(variables, j.logicalExpression('&&', parentArrow.body, currentArrow.body));
   }
-  function isThemePaletteMode(node) {
-    return node.type === 'MemberExpression' && node.object.type === 'MemberExpression' && node.object.object.name === 'theme' && node.object.property.name === 'palette' && node.property.name === 'mode';
-  }
 
   // 2. Find logical spread expressions to convert to variants
   styles.forEach(style => {
@@ -229,38 +298,65 @@ function migrateToVariants(j, styles) {
     style.params.forEach(param => {
       if (param.type === 'ObjectPattern') {
         param.properties.forEach(prop => {
-          parameters.add(prop.key.name);
+          if (prop.type === 'ObjectProperty') {
+            let paramName;
+            if (prop.value.type === 'Identifier') {
+              paramName = prop.value.name;
+            }
+            if (prop.value.type === 'AssignmentPattern') {
+              paramName = prop.value.left.name;
+            }
+            if (paramName) {
+              parameters.add(paramName);
+              if (prop.key.type === 'Identifier') {
+                parameterMap[paramName] = prop.key.name;
+              }
+              if (prop.key.type === 'StringLiteral') {
+                parameterMap[paramName] = prop.key.value;
+              }
+            }
+          }
         });
       }
+      if (param.type === 'Identifier') {
+        parameters.add(param.name);
+      }
     });
     const variants = [];
     if (style.body.type === 'LogicalExpression') {
-      if (style.params[0] && style.params[0].type === 'ObjectPattern' && style.params[0].properties.some(prop => prop.key.name !== 'theme')) {
+      if (style.params[0] && (style.params[0].type === 'Identifier' || style.params[0].type === 'ObjectPattern' && style.params[0].properties.some(prop => prop.key.name !== 'theme'))) {
         // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
         style.body = j.objectExpression([j.objectProperty(j.identifier('variants'), j.arrayExpression([j.objectExpression([j.objectProperty(j.identifier('props'), buildProps(style.body.left)), j.objectProperty(j.identifier('style'), style.body.right)])]))]);
       }
     } else if (style.body.type === 'ConditionalExpression') {
       // skip ConditionalExpression
     } else {
-      let objectExpression = style.body;
-      let counter = 0;
-      while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
-        counter += 1;
-        if (objectExpression.type === 'BlockStatement') {
-          objectExpression = objectExpression.body.find(item => item.type === 'ReturnStatement').argument;
-        }
+      const expressions = [];
+      if (style.body.type === 'ArrayExpression') {
+        expressions.push(...style.body.elements);
+      } else {
+        expressions.push(style.body);
       }
-      recurseObjectExpression({
-        node: objectExpression,
-        buildStyle: createBuildStyle()
+      expressions.forEach(objectExpression => {
+        let counter = 0;
+        while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
+          counter += 1;
+          if (objectExpression.type === 'BlockStatement') {
+            objectExpression = objectExpression.body.find(item => item.type === 'ReturnStatement').argument;
+          }
+        }
+        recurseObjectExpression({
+          node: objectExpression,
+          buildStyle: createBuildStyle()
+        });
+        if (variants.length && objectExpression.type === 'ObjectExpression') {
+          objectExpression.properties.push(j.objectProperty(j.identifier('variants'), j.arrayExpression(variants.filter(variant => {
+            const props = variant.properties.find(prop => prop.key.name === 'props');
+            const styleVal = variant.properties.find(prop => prop.key.name === 'style');
+            return props && styleVal && (!styleVal.value.properties || styleVal.value.properties.length > 0) && (props.value.type === 'ArrowFunctionExpression' || props.value.properties.length > 0);
+          }))));
+        }
       });
-      if (variants.length) {
-        objectExpression.properties.push(j.objectProperty(j.identifier('variants'), j.arrayExpression(variants.filter(variant => {
-          const props = variant.properties.find(prop => prop.key.name === 'props');
-          const styleVal = variant.properties.find(prop => prop.key.name === 'style');
-          return props && styleVal && (!styleVal.value.properties || styleVal.value.properties.length > 0) && (props.value.type === 'ArrowFunctionExpression' || props.value.properties.length > 0);
-        }))));
-      }
     }
     function recurseObjectExpression(data) {
       if (data.node.type === 'ObjectExpression') {
@@ -388,7 +484,6 @@ function migrateToVariants(j, styles) {
             leftName = (_getObjectKey5 = getObjectKey(data.node.test.argument)) == null ? void 0 : _getObjectKey5.name;
           }
           if (parameters.has(leftName) && leftName !== 'theme') {
-            var _data$parentNode;
             let props = buildProps(data.node.test);
             if (data.props) {
               props = mergeProps(data.props, props);
@@ -399,32 +494,37 @@ function migrateToVariants(j, styles) {
               style: styleVal
             };
             variants.push(buildObjectAST(variant));
-
-            // create another variant with inverted condition
-            let props2 = buildProps(inverseBinaryExpression(data.node.test));
-            if (data.props) {
-              props2 = mergeProps(data.props, props2);
-            }
-            const styleVal2 = data.buildStyle(data.node.alternate);
-            const variant2 = {
-              props: props2,
-              style: styleVal2
-            };
-            variants.push(buildObjectAST(variant2));
-            if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression') {
-              removeProperty(data.parentNode, data.node);
+            if (data.node.consequent.type === 'ObjectExpression' && data.node.alternate.type === 'ObjectExpression') {
+              var _data$parentNode;
+              // create another variant with inverted condition
+              let props2 = buildProps(inverseBinaryExpression(data.node.test));
+              if (data.props) {
+                props2 = mergeProps(data.props, props2);
+              }
+              const styleVal2 = data.buildStyle(data.node.alternate);
+              const variant2 = {
+                props: props2,
+                style: styleVal2
+              };
+              variants.push(buildObjectAST(variant2));
+              if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression') {
+                removeProperty(data.parentNode, data.node);
+              }
+            } else {
+              var _data$replaceValue;
+              (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, data.node.alternate);
             }
           }
           if (leftName === 'theme' && ((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression' && ((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' && isThemePaletteMode(data.node.test.left)) {
             if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
-              var _data$replaceValue;
+              var _data$replaceValue2;
               if (data.modeStyles) {
                 if (!data.modeStyles[data.node.test.right.value]) {
                   data.modeStyles[data.node.test.right.value] = [];
                 }
                 data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, data.node.consequent));
               }
-              (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, data.node.alternate);
+              (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node.alternate);
             }
           }
         }
@@ -459,6 +559,12 @@ function migrateToVariants(j, styles) {
               }
               data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
             });
+            if (data.key) {
+              var _data$replaceValue3;
+              // to remove the arrow function
+              // { ...: theme => `1px solid...` } to { ...: `1px solid...` }
+              (_data$replaceValue3 = data.replaceValue) == null || _data$replaceValue3.call(data, data.node);
+            }
           }
         }
       }

package/node/v5.0.0/theme-spacing.test/large-actual.js

@@ -24,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
 var _styles = require("@mui/material/styles");
 var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
-var _i18n = require("docs/src/modules/utils/i18n");
+var _i18n = require("@mui/docs/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
 var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
 var _jsxRuntime = require("react/jsx-runtime");

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -24,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
 var _styles = require("@mui/material/styles");
 var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
-var _i18n = require("docs/src/modules/utils/i18n");
+var _i18n = require("@mui/docs/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
 var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
 var _jsxRuntime = require("react/jsx-runtime");